/* ── SparkLayer Pulse — homepage concept ─────────────────────────────────────
   Styling cues from sparklayer.io: deep-navy hero with a radial violet glow, a
   gradient-accent phrase inside every headline, the rainbow wave divider,
   violet check bullets, floating tilted product cards, chunky Geist heads.
   Brand palette = the SparkLayer mark: violet var(--violet) · cyan var(--cyan) ·
   orange var(--orange) · pink var(--pink).                                             */

/* ══ TYPE TOKENS ══════════════════════════════════════════════════════════
   Three faces, declared once. Every font-family in this file and in the
   pages' own <style> blocks reads a token — the Roboto → Geist swap was a
   sweep across ~80 hard-coded stacks precisely because they were
   hard-coded, and the next change should be one line.

     --font-body      running copy and UI
     --font-display   headings and figures
     --font-mono      code, SKUs, anything columnar
   ═══════════════════════════════════════════════════════════════════════ */
:root{
  --font-body:Geist,Inter,system-ui,-apple-system,sans-serif;
  --font-display:"Bricolage Grotesque","Helvetica Neue",sans-serif;
  --font-mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
}
.sl-kit{
  --violet:#671EF3; --violet-2:#7c3aed; --violet-soft:#a78bfa;
  --cyan:#0BCEFC; --orange:#FF9243; --pink:#FF026A;
  --ink:#0a2540; --ink-2:#1b2148;
  --navy:#0a0e26; --navy-2:#131a3f;
  --paper:#ffffff; --paper-2:#f6f9fc;
  --txt:#2a3a52; --txt-soft:#666; --txt-faint:#8898aa;
  --line:#e6ebf1;
  --grad:linear-gradient(90deg,var(--cyan) 0%,var(--violet) 38%,var(--pink) 72%,var(--orange) 100%);
  /* Stripe's two elevation recipes: resting card + floating window */
  --e1:0 2px 6px -1px rgba(50,50,93,.16),0 1px 3px -1px rgba(0,0,0,.16);
  --e2:0 14px 34px -8px rgba(50,50,93,.16),0 6px 16px -8px rgba(0,0,0,.14);
  --e3:0 44px 96px -20px rgba(50,50,93,.17),0 18px 44px -18px rgba(0,0,0,.15);
  --card-shadow:var(--e2);
  /* one radius scale */
  --r-lg:12px; --r-md:10px; --r-sm:7px;
  /* one spacing scale */
  --s-1:8px; --s-2:12px; --s-3:16px; --s-4:24px; --s-5:32px; --s-6:48px; --s-7:72px; --s-8:104px;
  /* one card gutter — every card grid uses it, so two grids stacked down the
     page can never sit on different rhythms */
  --gut:18px;

  /* Added 18 Aug 2026 after an audit found these six carrying real,
     repeated roles with no token behind them — the palette had drifted
     to sixteen violets and no status colour at all. */
  --violet-3:#6d28d9;   /* the deep violet the product mocks use for chrome and emphasis — sits between --violet and --violet-2 and was the single most-used untokenised colour in the file */
  --violet-pale:#c4b5fd;   /* violet on a dark ground, where --violet-soft is still too saturated */
  --good:#0f7a4d;   /* the positive state — in stock, on target, up. Was 23 uses with no token at all */
  --good-soft:#d7f5e5;   /* the ground --good sits on */
  --txt-mute:#9aa5b8;   /* between --txt-soft and --txt-faint */
  --line-2:#eef0f6;   /* the heavier hairline / panel tint */
}
.sl-kit *,.sl-kit{margin:0;padding:0;box-sizing:border-box}
/* The body face tops out at 500 by CONVENTION, not necessity: Roboto's
   600/700 were faux-bold, and when the face became Geist (which has real
   ones) the cap stayed so the product mocks don't all shift weight.
   A bare <b> would land there by default.
   Geist numerals and Bricolage headings set their weight by class and win. */
.sl-kit b,.sl-kit strong{font-weight:500}

.sl-kit *::selection{background:rgba(103,30,243,.18)}
.sl-kit{font-family:var(--font-body);color:var(--txt);background:var(--paper);-webkit-font-smoothing:antialiased;overflow-x:hidden}
.sl-kit h1,.sl-kit h2,.sl-kit h3,.sl-kit .wordmark{font-family:var(--font-display);color:var(--ink);letter-spacing:-.02em}
.sl-kit h1,.sl-kit h2,.sl-kit h3{text-wrap:balance}
.sl-kit h1{letter-spacing:-.033em}
.sl-kit h2{letter-spacing:-.028em}
.sl-kit p,.sl-kit li{text-wrap:pretty}
.sl-kit button{font-family:inherit;cursor:pointer;border:none}
.sl-kit a{color:inherit;text-decoration:none;transition:color .15s ease}
.sl-kit .mono{font-family:var(--font-mono)}
.sl-kit .wrap{max-width:1160px;margin:0 auto;padding:0 24px}

/* accent phrase inside headlines — the sparklayer.io signature */
.sl-kit .accent{background:linear-gradient(92deg,#1e4ff3 0%,#a855f7 30%,var(--pink) 55%,#a855f7 80%,var(--violet) 100%);background-size:220% 100%;background-clip:text;color:transparent;animation:plp-accentFlow 7s ease-in-out infinite alternate}
@keyframes plp-accentFlow{from{background-position:0% 0}to{background-position:100% 0}}
.sl-kit .accent-ul{position:relative;white-space:nowrap}
.sl-kit .accent-ul::after{content:"";position:absolute;left:0;right:0;bottom:-.06em;height:.075em;border-radius:99px;background:var(--grad);opacity:.9}

/* ── micro banner ── */
.sl-kit .microbar{background:#05081c;color:#9aa3c7;font-size:11.5px;letter-spacing:.14em;text-align:center;padding:9px 16px}
.sl-kit .microbar b{color:var(--cyan);font-weight:500}
.sl-kit .microbar .dot{display:inline-block;width:7px;height:7px;border-radius:99px;background:#2dd4bf;margin:0 7px 1px 2px;box-shadow:0 0 0 3px rgba(45,212,191,.18);animation:plp-blip 2.4s ease-in-out infinite}
@keyframes plp-blip{50%{box-shadow:0 0 0 6px rgba(45,212,191,0)}}

/* ── nav ── */
.sl-kit .nav-outer{background:rgba(255,255,255,.82);backdrop-filter:blur(14px);position:sticky;top:0;z-index:50;border-bottom:1px solid rgba(10,37,64,.06)}
.sl-kit nav{display:flex;align-items:center;gap:28px;padding:13px 0}
.sl-kit .brand{display:flex;align-items:center;gap:11px}
.sl-kit .brand-tile{position:relative;width:38px;height:38px;border-radius:var(--r-md);display:grid;place-items:center;overflow:hidden;
  background:linear-gradient(135deg,var(--violet-2) 0%,#a855f7 30%,var(--violet-3) 60%,#c084fc 100%);background-size:220% 220%;animation:plp-pan 7s ease-in-out infinite;box-shadow:0 4px 14px -4px rgba(124,58,237,.5)}
@keyframes plp-pan{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
.sl-kit .wordmark{color:var(--ink);font-weight: 600;font-size:19px}
.sl-kit .wordmark small{display:block;font-size:9.5px;font-weight:500;letter-spacing:.22em;color:var(--txt-faint);text-transform:uppercase}
.sl-kit .nav-links{display:flex;gap:24px;margin-left:12px;font-size:15px;color:var(--txt-soft);font-weight:600}
.sl-kit .nav-links a{position:relative;padding:4px 0;transition:color .18s ease}
.sl-kit .nav-links a:hover{color:var(--ink)}
.sl-kit .nav-links a::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:1.5px;border-radius:2px;background:var(--violet-soft);transform:scaleX(0);transform-origin:left;transition:transform .22s ease}
.sl-kit .nav-links a:hover::after{transform:scaleX(1)}
.sl-kit .nav-cta{margin-left:auto;display:flex;gap:12px;align-items:center}
.sl-kit .btn{display:inline-flex;align-items:center;gap:7px;font-weight:500;font-size:15px;border-radius:999px;padding:10px 18px;transition:background .18s ease,color .18s ease,transform .18s cubic-bezier(.22,.8,.3,1),box-shadow .18s ease}
.sl-kit .btn:active{transform:translateY(0)}
.sl-kit .btn:focus-visible,.sl-kit a:focus-visible,.sl-kit input:focus-visible{outline:2px solid var(--violet-soft);outline-offset:3px;border-radius:var(--r-sm)}
.sl-kit .cta-form input:focus-visible,.sl-kit .cta-form input:focus{outline:none}
.sl-kit .btn-primary{background:var(--violet);color:#fff}
.sl-kit .btn-primary:hover{background:#5717d6;transform:translateY(-2px);box-shadow:0 8px 18px -8px rgba(103,30,243,.45)}

.sl-kit .btn-ghost{background:transparent;color:var(--violet);border:none;padding-inline:10px}
.sl-kit .btn-ghost:hover{color:#7a3ff5;transform:translateY(-2px)}
.sl-kit .btn-ghost span{transition:transform .18s ease}
.sl-kit .btn-ghost:hover span{transform:translateX(2px)}
.sl-kit .btn-light{background:#fff;color:var(--ink);border:1.5px solid var(--line);box-shadow:var(--e1)}
.sl-kit .btn-sm{padding:7px 15px;font-size:15px;border-radius:999px}

/* ── hero ── */
.sl-kit .hero{position:relative;background:linear-gradient(180deg,#f7f9fc 0%,#f3f6fa 62%,#ffffff 100%);color:var(--ink);overflow-x:clip;overflow-y:visible}
/* the diagonal gradient ribbon — brand colours, Stripe-style */
/* Geometry is tokenised for the same reason the colours are: a page theme
   should be able to move the sweep as well as re-tint it, without touching
   the i:nth-child rules (which is how the bands drift apart). */
.sl-kit .ribbon{--rb-y:-215px;--rb-x:-380px;--rb-rot:338deg;--rb-sy:1;
  position:absolute;top:var(--rb-y);right:var(--rb-x);width:1360px;height:1480px;
  transform:rotate(var(--rb-rot)) scaleY(var(--rb-sy));
  pointer-events:none;filter:blur(60px) saturate(1.12);opacity:.6;will-change:transform}
/* A white scrim over the ribbon, strongest on the copy side. The hero wrap is
   z-index 2, so the text always sits on top of it. As the viewport narrows the
   ribbon crowds the copy, so the scrim reaches further across and the ribbon
   itself is dialled back — legibility over decoration. */
.sl-kit .hero::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(102deg,#fff 0%,rgba(255,255,255,.9) 20%,rgba(255,255,255,.45) 38%,rgba(255,255,255,0) 56%)}
@media (max-width:1280px){
  .sl-kit .ribbon{opacity:.62}
  .sl-kit .hero::after{background:linear-gradient(102deg,#fff 0%,rgba(255,255,255,.94) 26%,rgba(255,255,255,.62) 46%,rgba(255,255,255,.12) 66%,rgba(255,255,255,0) 78%)}
}
@media (max-width:1100px){
  .sl-kit .ribbon{opacity:.42;filter:blur(80px) saturate(1.04)}
  .sl-kit .hero::after{background:linear-gradient(102deg,#fff 0%,rgba(255,255,255,.96) 32%,rgba(255,255,255,.74) 54%,rgba(255,255,255,.3) 76%,rgba(255,255,255,.05) 100%)}
}
.sl-kit .ribbon i{position:absolute;left:0;right:0;border-radius:999px;animation:plp-ribbonDrift 11s ease-in-out infinite alternate}
.sl-kit .ribbon i:nth-child(2){animation-duration:14s;animation-delay:-4s}
.sl-kit .ribbon i:nth-child(3){animation-duration:9s;animation-delay:-2s}
.sl-kit .ribbon i:nth-child(4){animation-duration:16s;animation-delay:-7s}
@keyframes plp-ribbonDrift{to{transform:translate(52px,-14px)}}
/* ══ HERO PALETTES ═══════════════════════════════════════════════════════
   The ribbon's five bands are drawn from five custom properties rather than
   five hard-coded gradients, so a page can re-tint its whole hero with one
   class and nothing else changes — same geometry, same drift, same blur.

   The default is the BRAND ribbon (cyan → violet → pink → orange): the
   homepage and /pulse. Every other page picks a palette so the site doesn't
   read as one hero repeated. Add a theme by adding five stops here — never
   by overriding the `i:nth-child` rules on the page, which is how the
   geometry drifts apart.

       <div class="ribbon ribbon--tide">  →  /how-it-works
       <div class="ribbon ribbon--ember"> →  warm, commercial pages
       <div class="ribbon ribbon--moss">  →  calm, operational pages
       <div class="ribbon ribbon--dusk">  →  the deepest, most premium
   ══════════════════════════════════════════════════════════════════════ */
.sl-kit .ribbon {
    --rb-1: var(--cyan); --rb-2: var(--violet); --rb-3: var(--pink);
    --rb-4: var(--orange); --rb-5: #ffd9a8;
}
/* Tide — /how-it-works.
   It used to share two of its five stops with the brand ribbon AND all of
   its geometry, so beside /pulse it read as the same sweep in the same
   place: a visitor moving between the two pages saw no change. Both halves
   are different now.

   COLOUR: brand cyan → sky → azure → royal → teal. All blue, no violet,
   no magenta, no orange — so nothing collides with the brand ribbon's
   cyan-violet-pink-orange, and the page has a colour of its own rather
   than a rearrangement of the brand's.

   GEOMETRY: it enters from the LEFT and sweeps down to the right (+16°
   instead of −22°), sits lower, and is stretched vertically so the bands
   are wider and fewer of them cross the hero. Same component, mirrored. */
.sl-kit .ribbon--tide {
    /* NO VIOLET. Reordering the ramp twice never fixed this because the
       problem wasn't the order — every version still had violet in it, and
       violet is the mass you see once the bands are blurred together. It is
       blue end to end now, with a teal tail: brand cyan → sky → azure →
       royal → teal. Nothing here reads purple at any blur radius. */
    --rb-1: var(--cyan); --rb-2: #38bdf8; --rb-3: #0ea5e9;
    --rb-4: #3b82f6; --rb-5: #5eead4;
    --rb-rot: 12deg; --rb-sy: 1; --rb-y: 210px;
    right: auto; left: -240px;
    /* The hero clips horizontally but NOT vertically (the brand ribbon needs
       that to soften its top edge), so a sweep moved to the floor just kept
       going — down through the trusted band and into the accordion. Shorter,
       and masked so its tail dissolves before the hero ends. */
    height: 900px;
    -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 48%, rgba(0,0,0,.45) 74%, transparent 96%);
    mask-image: linear-gradient(180deg, #000 0%, #000 48%, rgba(0,0,0,.45) 74%, transparent 96%);
    opacity: .62;
    filter: blur(74px) saturate(1.06);
}
/* ── and the veil has to move with it ─────────────────────────────────────
   `.hero::after` is a white wash running LEFT to right at 102°: opaque over
   the copy column, clear by 56%, because the brand ribbon enters from the
   RIGHT. Mirroring the ribbon to the left put it straight into the opaque
   end and the background vanished. Re-tinting a shared component is safe;
   MOVING one means checking what else was drawn around where it used to be.

   So the axis turns for this hero: the ribbon sweeps along the FLOOR, and
   the veil becomes a top-down wash — dense over the copy, clear across the
   bottom third where the sweep now lives. Different axis, not just a
   different tint, which is the point. Scoped to .hero--light, so the
   homepage and /pulse keep the 102° wash. */
.sl-kit .hero--light:has(.ribbon--tide)::after {
    background: linear-gradient(180deg, #fff 0%, rgba(255,255,255,.95) 30%, rgba(255,255,255,.62) 52%, rgba(255,255,255,.18) 72%, rgba(255,255,255,0) 88%);
}
/* Bold — not a palette, a WEIGHT. The default ribbon is tuned for the
   homepage, where a dense mock sits over it; on /pulse it has more empty
   hero to fill and reads as a faint smudge, so it comes forward: more
   opacity, less blur, a touch more saturation. Stack it on any palette. */
.sl-kit .ribbon--bold {
    opacity: .82;
    filter: blur(46px) saturate(1.2);
}
@media (max-width: 1280px) { .sl-kit .ribbon--bold { opacity: .78; } }
@media (max-width: 1100px) { .sl-kit .ribbon--bold { opacity: .58; filter: blur(64px) saturate(1.1); } }

/* Ember — pink through orange into gold. The warmest of the four. */
.sl-kit .ribbon--ember {
    --rb-1: var(--pink); --rb-2: #f43f5e; --rb-3: var(--orange);
    --rb-4: #fbbf24; --rb-5: #fde4a8;
}
/* Moss — green through teal into violet. Quiet; for pages about process. */
.sl-kit .ribbon--moss {
    --rb-1: #34d399; --rb-2: #10b981; --rb-3: var(--cyan);
    --rb-4: #818cf8; --rb-5: #a7f3d0;
}
/* Dusk — indigo through violet into rose. Deepest, least busy. */
.sl-kit .ribbon--dusk {
    --rb-1: #6366f1; --rb-2: var(--violet); --rb-3: #a855f7;
    --rb-4: var(--pink); --rb-5: #c7b6ff;
}

.sl-kit .ribbon i:nth-child(1){top:120px;height:150px;background:linear-gradient(90deg,var(--rb-1),var(--rb-2))}
.sl-kit .ribbon i:nth-child(2){top:270px;height:140px;background:linear-gradient(90deg,var(--rb-2),var(--rb-3))}
.sl-kit .ribbon i:nth-child(3){top:410px;height:130px;background:linear-gradient(90deg,var(--rb-3),var(--rb-4))}
.sl-kit .ribbon i:nth-child(4){top:540px;height:120px;background:linear-gradient(90deg,var(--rb-4),var(--rb-5));opacity:.85}
.sl-kit .ribbon i:nth-child(5){top:660px;height:110px;background:linear-gradient(90deg,var(--rb-5),var(--rb-1));opacity:.5}
@keyframes plp-drift{to{transform:translateX(60px)}}
.sl-kit .hero-wm{position:absolute;left:-0.05em;bottom:10px;pointer-events:none;z-index:0;
  font-family:var(--font-display);font-weight: 600;font-size:clamp(180px,26vw,420px);
  letter-spacing:-.03em;line-height:1;color:transparent;-webkit-text-stroke:1.4px rgba(13,18,48,.045);
  white-space:nowrap;user-select:none}
/* a bright arc of outline sweeps through the letters */
.sl-kit .hero-wm::after{content:"Pulse";position:absolute;inset:0;color:transparent;
  -webkit-text-stroke:1.4px rgba(124,58,237,.15);
  -webkit-mask:linear-gradient(115deg,transparent 40%,#fff 50%,transparent 60%);
  mask:linear-gradient(115deg,transparent 40%,#fff 50%,transparent 60%);
  -webkit-mask-size:300% 100%;mask-size:300% 100%;
  animation:plp-wmSweep 11s linear infinite}
@keyframes plp-wmSweep{0%,18%{-webkit-mask-position:140% 0;mask-position:140% 0}82%,100%{-webkit-mask-position:-140% 0;mask-position:-140% 0}}
.sl-kit .hero .wrap{position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:48px;align-items:center;padding-bottom:80px}
.sl-kit .eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:11px;letter-spacing:.14em;color:var(--violet);font-weight:500;margin-bottom:var(--s-4);text-transform:uppercase;background:#f1ecff;border:1px solid #e2d8ff;border-radius:999px;padding:6px 13px}
/* The intro statement sat almost on the accordion below it. In the kit, not
   a page's <style>: three pages render three-parts-accordion.php and the
   spacing has to be the same on all of them. */
.sl-kit .team-band .sec-head{margin-bottom:var(--s-7)}

/* ══ THE CUSTOMER-GROUPS MOCK ═══════════════════════════════════════════
   Art for the dashboard row of three-parts-accordion.php, rendered by
   /how-it-works, /partners-shopify and every platform page. */
/* ── the customer-groups mock ──────────────────────────────────────
   A simulation of the real Groups screen, not a screenshot: the base
   group at the top with everything below inheriting from it, one
   indented child group, and "inherits" where a value is not overridden.
   That inheritance IS the feature, so the mock has to show it. */
.sl-kit .cg-win { font-family: var(--font-body); }
.sl-kit .cg-head { display: flex; align-items: center; justify-content: space-between; padding: 13px 14px 0; }
.sl-kit .cg-title { font-family: var(--font-display); font-size: 13.5px; font-weight: 600; color: var(--ink); }
.sl-kit .cg-new { font-size: 10px; font-weight: 600; color: #fff; background: var(--violet-3); border-radius: 6px; padding: 4px 8px; }
.sl-kit .cg-base { margin: 10px 14px 0; padding: 10px 11px; border: 1px solid var(--line); border-radius: 9px; background: var(--paper-2); }
.sl-kit .cg-base-h { font-size: 11.5px; font-weight: 600; color: var(--ink); }
.sl-kit .cg-base-s { font-size: 10px; line-height: 1.4; color: var(--txt-faint); margin-top: 2px; }
.sl-kit .cg-chips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 7px; }
.sl-kit .cg-c { font-size: 9.5px; font-weight: 600; padding: 2.5px 6px; border-radius: 5px; background: #eef0f6; color: var(--txt); white-space: nowrap; }
.sl-kit .cg-tag { background: #d7f5e5; color: var(--good); }
.sl-kit .cg-pl { background: #efe7ff; color: var(--violet-3); }
.sl-kit .cg-tbl { margin: 10px 14px 0; }
.sl-kit .cg-hr, .sl-kit .cg-r {
    display: grid; grid-template-columns: 1.25fr 1fr 1.15fr .75fr .7fr;
    gap: 6px; align-items: center; padding: 6px 2px;
}
.sl-kit .cg-hr { font-size: 8.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--txt-faint); padding-bottom: 4px; }
.sl-kit .cg-r { border-top: 1px solid var(--line); }
.sl-kit .cg-hr > *, .sl-kit .cg-r > * { justify-self: start; }
.sl-kit .cg-n { font-size: 11px; font-weight: 600; color: var(--ink); }
.sl-kit .cg-sub .cg-n { font-weight: 500; color: var(--txt); padding-left: 2px; }
.sl-kit .cg-v { font-size: 10.5px; font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
.sl-kit .cg-i { font-size: 9.5px; color: var(--txt-faint); font-style: italic; }
.sl-kit .cg-foot { margin: 10px 14px 13px; font-size: 10px; color: var(--txt-faint); }

/* ══ RELATED INTEGRATIONS ═══════════════════════════════════════════════
   The sibling row at the foot of a partner or platform page. Shared by
   both layouts via _includes/related-integrations.php. */
/* ── related integrations ────────────────────────────────────────── */
/* The feature row above already ends in its own padding, so .sl-sec's 56px on
   top read as a gap; below, the logo wall started immediately. */
.sl-kit .sl-sec.pt-rel-sec { padding-top: 16px; padding-bottom: 64px; }
@media (min-width: 961px) {
  .sl-kit .sl-sec.pt-rel-sec { padding-top: 36px; padding-bottom: 64px; }
}
.sl-kit .pt-rel-sec .hp-more { margin-top: 18px; }
.sl-kit .pt-rel { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gut); margin-top: var(--s-5); }
@media (max-width: 900px) { .sl-kit .pt-rel { grid-template-columns: minmax(0, 1fr); } }
.sl-kit .pt-rel-card {
    display: flex; flex-direction: column;
    padding: var(--s-4); border-radius: var(--r-lg);
    border: 1px solid var(--line); background: var(--paper);
    text-decoration: none !important;
    transition: border-color .2s ease, transform .2s ease;
}
.sl-kit .pt-rel-card:hover { border-color: #ded7f8; transform: translateY(-2px); }
.sl-kit .pt-rel-logo {
    display: flex; align-items: center; justify-content: center;
    width: 100%; height: 62px; margin-bottom: var(--s-3);
    border-radius: 10px; background: var(--paper-2); overflow: hidden;
}
.sl-kit .pt-rel-logo img { max-width: 56%; height: auto; display: block; }
.sl-kit .pt-rel-name {
    display: flex; align-items: center; gap: 7px; margin-bottom: 6px;
    font-family: var(--font-display); font-size: 16.5px; font-weight: 600; color: var(--ink);
}
.sl-kit .pt-rel-name i {
    font-style: normal; color: var(--violet);
    opacity: 0; transform: translateX(-3px);
    transition: opacity .2s ease, transform .2s ease;
}
.sl-kit .pt-rel-card:hover .pt-rel-name i { opacity: 1; transform: none; }
.sl-kit .pt-rel-sum {
    font-size: 14px; line-height: 1.45; color: var(--txt-soft);
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}

/* ══ HERO ART ON A PHONE ══════════════════════════════════════════════════
   Every kit hero pairs copy with a wide, dense mock built to be read at half
   a desktop hero. At phone width it shrinks to a ~280px block nobody can make
   anything out in, sitting below the fold under the CTAs that are the actual
   job of that screen. It was hidden on the homepage only; every other kit
   page had the same problem. */
@media (max-width:768px){
  .sl-kit .hero .mock{display:none}
}

/* ══ THE HERO LOCKUP ══════════════════════════════════════════════════════
   Two marks either side of a sync rail, for any page whose hero is about a
   pairing. Shared by _views/partner.html and _views/platform.html. */
/* ── the partner lockup in the masthead ──────────────────────────────
   Scoped `.sl-kit` so the tokens resolve (UI-SYSTEM.md rule 7). The two
   marks sit on white plates because the supplied logos are a mix of
   transparent PNGs and dark-on-transparent SVGs — on the hero's wash,
   half of them disappeared. */
.sl-kit .pt-lock {
    display: flex; align-items: center; justify-content: center;
    gap: clamp(14px, 3vw, 30px);
}
.sl-kit .pt-mark {
    display: grid; place-items: center;
    width: clamp(96px, 15vw, 148px); height: clamp(96px, 15vw, 148px);
    padding: clamp(14px, 2.4vw, 24px);
    border-radius: 26px; background: #fff;
    /* --e1, not --e2: on the navy hero a heavy shadow reads as a dark
       halo round a white plate rather than as lift */
    box-shadow: var(--e1);
}
.sl-kit .pt-mark img { width: 100%; height: auto; display: block; }

/* ── the sync, drawn ─────────────────────────────────────────────────
   Three pulsing dots said "these two things are near each other". What
   these pages actually claim is a two-way sync — data out to the
   partner, trade read back — so the art says that: a violet packet
   travelling to the partner and a cyan one returning, which is exactly
   the idiom the homepage's data-flow strip already uses (cwl-link in
   sl-kit.css). Same language, same reading.

   A ring breathes out of each plate on alternating beats, so the two
   marks feel like they're answering each other rather than sitting
   still. Transform/opacity only — no layout work per frame. */
.sl-kit .pt-mark { position: relative; }
.sl-kit .pt-mark::after {
    content: ""; position: absolute; inset: 0; border-radius: 26px;
    border: 1px solid rgba(255, 255, 255, .30);
    animation: ptRing 3.4s cubic-bezier(.3, 0, .2, 1) infinite;
    pointer-events: none;
}
/* the SparkLayer plate answers half a beat later */
.sl-kit .pt-mark:last-child::after { animation-delay: 1.7s; }
@keyframes ptRing {
    0%        { transform: scale(1);    opacity: .5; }
    70%, 100% { transform: scale(1.26); opacity: 0; }
}

.sl-kit .pt-rail {
    position: relative; width: clamp(46px, 7vw, 88px); height: 2px; border-radius: 2px;
    background: linear-gradient(90deg, rgba(255,255,255,.05), rgba(255,255,255,.24), rgba(255,255,255,.05));
}
.sl-kit .pt-pk {
    position: absolute; top: 50%; left: 0; margin-top: -3.5px;
    width: 7px; height: 7px; border-radius: 99px;
}
.sl-kit .pt-pk--out {
    background: var(--violet-soft); box-shadow: 0 0 0 3px rgba(167, 139, 250, .20);
    animation: ptOut 2.8s cubic-bezier(.45, 0, .55, 1) infinite;
}
.sl-kit .pt-pk--back {
    background: var(--cyan); box-shadow: 0 0 0 3px rgba(11, 206, 252, .18);
    animation: ptBack 2.8s cubic-bezier(.45, 0, .55, 1) infinite;
}
@keyframes ptOut {
    0%       { transform: translateX(-7px); opacity: 0; }
    14%, 82% { opacity: 1; }
    100%     { transform: translateX(clamp(46px, 7vw, 88px)); opacity: 0; }
}
@keyframes ptBack {
    0%       { transform: translateX(clamp(46px, 7vw, 88px)); opacity: 0; }
    14%, 82% { opacity: 1; }
    100%     { transform: translateX(-7px); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
    .sl-kit .pt-pk, .sl-kit .pt-mark::after { animation: none; }
    .sl-kit .pt-pk--back { display: none; }          /* one dot, parked */
    .sl-kit .pt-pk--out  { left: 50%; margin-left: -3.5px; }
    .sl-kit .pt-mark::after { opacity: .28; }
}

/* ══ THE DARK HERO ════════════════════════════════════════════════════════
   The homepage's navy hero, made reusable. It lived only in index.html's
   inline <style>, so the partner pages (eleven of them, through
   masthead.php) would have had to copy it — and a copied hero is a hero
   that drifts. Opt in with `dark: true` on the masthead include; the host
   page also needs `header-dark` on its <header> or the nav stays
   dark-on-dark.

   The washes are the ribbon's own colours at low alpha — violet high-left,
   cyan low-centre, pink far right — so the hero reads as the brand sweep
   diffused behind the copy rather than as a flat navy panel. They are
   deliberately gentler than the homepage's (which runs .42/.30): this hero
   carries a partner logo lockup that has to stay legible on top of it. */
/* .hero.hero--dark rather than .hero--dark: the base `.sl-kit .hero h1`,
   `.sl-kit .hero .sub` rules live further down this file at the same
   specificity, so an unchained variant class loses on source order alone. */
/* overflow:hidden because the ribbon is a 1360x1480 blurred blob and the
   hero is ~660px tall: unclipped it carried on past the curve and painted a
   pale band over the white section below, ending on a hard horizontal edge
   wherever its own box stopped. The curve (::after, bottom:-1px) is inside
   the hero, so clipping costs nothing. */
.sl-kit .hero.hero--dark{
  overflow:hidden;
  background:
    radial-gradient(820px 480px at 14% 18%, rgba(103,30,243,.30), transparent 66%),
    radial-gradient(700px 430px at 60% 82%, rgba(11,206,252,.13), transparent 68%),
    radial-gradient(760px 460px at 88% 6%, rgba(255,2,106,.15), transparent 64%),
    linear-gradient(180deg,#0a0a1a 0%,#0e1433 68%,#131a3f 100%);
}
/* The homepage's own hero furniture, so a dark hero is the SAME hero
   wherever it appears: the luminosity-blended texture over the navy, and
   the rainbow curve sitting on the bottom edge. Both lived only in
   index.html's inline <style>. */
.sl-kit .hero.hero--dark::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:url("/assets/images/about/bg_example.jpg") center center / cover no-repeat;
  opacity:.22;max-height:1010px;mix-blend-mode:luminosity;
}
/* top:auto matters — the shared /pulse rule sets inset:0, and top+bottom+height
   over-constrains, so the browser drops `bottom` and pins the curve to the TOP. */
.sl-kit .hero.hero--dark::after{
  content:"";pointer-events:none;position:absolute;
  top:auto;right:auto;bottom:-1px;left:0;
  width:100%;height:220px;z-index:31;
  background:url("/assets/images/effects/bg_curve.svg") center bottom / 100% no-repeat;
}
/* The palette ribbons (--tide etc.) are washes drawn for a LIGHT hero; over
   navy they read as a pale smear across the headline. The dark hero takes
   the brand ribbon at the homepage's geometry instead. */
.sl-kit .hero.hero--dark .ribbon{
  display:block;position:absolute;top:-215px;right:-380px;
  width:1360px;height:1480px;transform:rotate(338deg);
  pointer-events:none;filter:blur(60px) saturate(1.12);opacity:.3;will-change:transform;
}
/* The curve is a 220px band sitting on the hero's bottom edge, so the copy
   needs clearance or the CTAs land on it — the homepage reserves the same
   150px. It mattered more here once the "Already a customer?" note came out
   of the hero, since that note had been doing the spacing by accident. */
.sl-kit .hero.hero--dark .wrap{padding-bottom:150px}
@media (max-width:768px){.sl-kit .hero.hero--dark .wrap{padding-bottom:56px}}
.sl-kit .hero.hero--dark .hero-wm{-webkit-text-stroke:1.5px rgba(255,255,255,.05)}
/* the kit's watermark carries a hard-coded "Pulse" ::after ghost — it belongs
   to /pulse, not to every dark hero */
.sl-kit .hero.hero--dark .hero-wm::after{content:none}
.sl-kit .hero.hero--dark h1{color:#fff}
/* The kit caps the hero's copy column at 480px, which is right when the other
   half is a full product mock. Here it is a two-logo lockup, so the headline
   was wrapping to three lines against a mostly empty right-hand column. */
.sl-kit .hero.hero--dark .wrap>:first-child{max-width:600px}
@media (min-width:961px){.sl-kit .hero.hero--dark .wrap{grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr)}}
/* the homepage's accent — pale violet through orchid to rose. The light
   hero's accent is a saturated pink-to-violet built for white behind it;
   on navy it vibrates. */
.sl-kit .hero.hero--dark h1 .accent{
  background:linear-gradient(92deg,var(--violet-pale) 0%,#e9a5ff 42%,#ff86b8 78%,var(--violet-pale) 100%);
  background-size:220% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.sl-kit .hero.hero--dark .sub{color:#b9bed6}
.sl-kit .hero.hero--dark .ticks li{color:#d9d5f0}
.sl-kit .hero.hero--dark .hp-quiet{color:#8f96c0}
.sl-kit .hero.hero--dark .hp-quiet a{color:#c4b5fd}
.sl-kit .hero.hero--dark .sub b{color:#fff}
/* the eyebrow pill is a white chip on the light hero — on navy it becomes a
   translucent one, the same treatment the homepage's tick rows use */
.sl-kit .hero.hero--dark .intro-badge{
  background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.14);
  color:#c8cde4;box-shadow:none;
}
.sl-kit .hero.hero--dark .intro-badge b{color:#fff}
.sl-kit .hero.hero--dark .hero-note{
  background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.12);color:#9aa2c6;
}
.sl-kit .hero.hero--dark .hero-note b{color:#fff}
.sl-kit .hero.hero--dark .hero-note a{color:var(--violet-pale)}
.sl-kit .hero.hero--dark .hp-demo-link a{color:var(--violet-pale);font-weight:500}

.sl-kit .intro-badge{display:inline-flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--line);border-radius:999px;padding:7px 14px 7px 9px;font-size:13px;font-weight:500;color:var(--txt-soft);box-shadow:var(--e1);margin-bottom:24px}
.sl-kit .intro-badge b{color:var(--ink);font-weight:500}
.sl-kit .intro-badge .ib-dot{width:8px;height:8px;border-radius:99px;background:#2dd4bf;box-shadow:0 0 0 3px rgba(45,212,191,.18);animation:plp-blipIB 2.6s ease-in-out infinite}
@keyframes plp-blipIB{50%{box-shadow:0 0 0 6px rgba(45,212,191,0)}}
/* ── the rotating eyebrow (data-rotate) ───────────────────────────────
   Two phrases in one pill. The viewport is a fixed-height mask; phrases
   are absolutely stacked inside it and roll vertically with a light blur,
   so it reads as one line re-forming rather than two lines swapping.
   The pill's WIDTH is animated to the incoming phrase (measured in
   sl-kit.js) — sizing it to the wider phrase instead would leave the
   shorter one visibly slack in a pill this small. */
.sl-kit .intro-badge .ib-rot{position:relative;display:block;overflow:hidden;
  height:1.35em;transition:width .55s cubic-bezier(.22,1,.36,1)}
.sl-kit .intro-badge .ib-ph{position:absolute;left:0;top:0;display:block;
  line-height:1.35em;white-space:nowrap;opacity:0;transform:translateY(110%);filter:blur(4px);
  transition:opacity .34s ease,transform .55s cubic-bezier(.22,1,.36,1),filter .34s ease}
.sl-kit .intro-badge .ib-ph.is-on{opacity:1;transform:none;filter:none}
.sl-kit .intro-badge .ib-ph.is-out{opacity:0;transform:translateY(-110%);filter:blur(4px)}
@media (prefers-reduced-motion: reduce){
  /* no roll and no width animation — just a calm cross-fade */
  .sl-kit .intro-badge .ib-rot{transition:none}
  .sl-kit .intro-badge .ib-ph{transform:none!important;filter:none!important;transition:opacity .3s ease}
}
.sl-kit .hero h1{color:var(--ink);font-size:44px;line-height:1.15;font-weight:500}
.sl-kit .hero .wrap>:first-child{max-width:480px}
.sl-kit .hero .sub{margin-top:22px;font-size:15px;line-height:1.45;color:var(--txt-soft)}
.sl-kit .ticks{margin-top:26px;display:grid;gap:12px;font-size:15px;color:var(--txt)}
.sl-kit .ticks li{list-style:none;display:flex;gap:11px;align-items:center;white-space:nowrap}
@media (max-width:960px){ .sl-kit .ticks li{white-space:normal;align-items:flex-start}}
.sl-kit .tick{flex:none;margin-top:2px;width:19px;height:19px;border-radius:99px;background:#f1ecff;border:1px solid #e2d8ff;display:grid;place-items:center}
.sl-kit .tick svg path{stroke:var(--violet-3)}
.sl-kit .ai-band .tick{background:rgba(167,139,250,.14);border-color:rgba(167,139,250,.3)}
.sl-kit .ai-band .tick svg path{stroke:var(--violet-pale)}
.sl-kit .tick svg{width:11px;height:11px}
.sl-kit .hero-note{display:inline-flex;align-items:center;gap:10px;margin-top:26px;padding:9px 16px 9px 12px;border-radius:99px;
  background:rgba(255,255,255,.72);border:1px solid rgba(13,18,48,.07);box-shadow:0 1px 2px rgba(13,18,48,.04);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  font-size:13px;line-height:1.3;color:var(--txt-faint);white-space:nowrap}
.sl-kit .hero-note b{color:var(--ink);font-weight:500}
.sl-kit .hero-note{position:relative;cursor:help;transition:border-color .2s ease,background .2s ease}
.sl-kit .hero-note>span:not(.hn-tip)>b{text-decoration:underline dotted rgba(124,58,237,.45);text-underline-offset:3px}
.sl-kit .hero-note:hover,.sl-kit .hero-note:focus-visible{background:rgba(255,255,255,.9);border-color:rgba(124,58,237,.28);outline:none}
/* the tooltip */
.sl-kit .hn-tip{position:absolute;left:0;bottom:calc(100% + 12px);z-index:6;width:340px;max-width:calc(100vw - 2rem);
  padding:12px 15px;border-radius:var(--r-md);white-space:normal;text-align:left;
  background:linear-gradient(160deg,#161a3d,#0d1130);border:1px solid rgba(255,255,255,.1);
  box-shadow:0 24px 48px -18px rgba(10,12,40,.55),0 2px 6px rgba(10,12,40,.2);
  font-size:12.5px;line-height:1.4;color:rgba(233,236,255,.78);
  opacity:0;transform:translateY(6px) scale(.985);transform-origin:24px 100%;pointer-events:none;
  transition:opacity .18s ease,transform .24s cubic-bezier(.22,.8,.3,1)}
.sl-kit .hn-tip b{display:block;margin-bottom:3px;color:#fff;font-weight:500;font-size:13px}
.sl-kit .hn-tip em{display:block;margin-top:7px;padding-top:7px;border-top:1px solid rgba(255,255,255,.09);
  font-style:normal;font-size:11.5px;color:rgba(196,181,253,.9)}
/* the little pointer */
.sl-kit .hn-tip::after{content:"";position:absolute;top:100%;left:26px;margin-top:-1px;
  border:6px solid transparent;border-top-color:#0d1130}
.sl-kit .hero-note:hover .hn-tip,.sl-kit .hero-note:focus-visible .hn-tip{opacity:1;transform:none}
@media (max-width:560px){.sl-kit .hn-tip{left:auto;right:0}.sl-kit .hn-tip::after{left:auto;right:26px}}
.sl-kit .hn-mark{flex:none;display:block;width:15px;height:15px}
.sl-kit .hn-mark svg{width:100%;height:100%;display:block}
@media (max-width:560px){.sl-kit .hero-note{white-space:normal;align-items:flex-start;border-radius:var(--r-md)}
  .sl-kit .hn-mark{margin-top:1px}}
.sl-kit .hero-ctas{margin-top:32px;display:flex;gap:14px;flex-wrap:wrap;align-items:center}
.sl-kit .hero-note{margin-top:26px;font-size:13px;color:var(--txt-faint)}
.sl-kit .hero-note a{color:var(--violet);text-decoration:underline;text-underline-offset:3px}

/* ECG pulse line behind the hero */
.sl-kit .ecg{position:absolute;inset:auto 0 62px 0;height:110px;opacity:.22;z-index:1;pointer-events:none}
.sl-kit .ecg path{fill:none;stroke:url(#ecgGrad);stroke-width:2.2;stroke-linecap:round;stroke-dasharray:1600;stroke-dashoffset:1600;animation:plp-draw 5s ease-out .4s forwards}
@keyframes plp-draw{to{stroke-dashoffset:0}}

/* ── the hero cockpit mock ── */
.sl-kit .mock{position:relative}
@media (min-width:961px){
  /* the cockpit is the proof — let it run past the wrap's right edge so the
     app reads at a believable width rather than a thumbnail. */
  .sl-kit .mock{width:calc(100% + 88px);margin-left:78px}
}
@media (min-width:961px) and (max-width:1100px){
  .sl-kit .mock{width:calc(100% + 40px);margin-left:24px}
}
/* Pulse's real left rail, so the mock reads as the actual app */
.sl-kit .mock-app{display:grid;grid-template-columns:128px minmax(0,1fr);align-items:stretch}
.sl-kit .mock-rail{background:#fbfbfe;border-right:1px solid #eee;padding:10px 8px;height:100%}
.sl-kit .mock-rail .mr-brand{display:flex;align-items:center;gap:6px;font-family:var(--font-body);font-weight: 600;font-size:10px;color:var(--ink);padding:2px 4px 12px}
.sl-kit .mock-rail .mr-tile{width:16px;height:16px;border-radius:5px;background:linear-gradient(135deg,var(--violet-2),#a855f7);display:grid;place-items:center;flex:none}
.sl-kit .mock-rail .mr-tile svg{width:9px;height:9px}
.sl-kit .mock-rail .mr-group{font-size:8px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:#b6bccd;padding:9px 5px 4px}
.sl-kit .mock-rail .mr-item{display:flex;align-items:center;gap:6px;padding:3.5px 6px;border-radius:6px;font-size:9.5px;color:var(--txt-soft);white-space:nowrap}
.sl-kit .mock-rail .mr-item svg{width:11px;height:11px;flex:none;opacity:.72}
.sl-kit .mock-rail .mr-item.on svg{opacity:1}
.sl-kit .mock-rail .mr-item.on{background:#efe9ff;color:#5b21b6;font-weight:500}
.sl-kit .mock-rail .mr-badge{margin-left:auto;font-size:8px;font-weight:500;background:#ffe4ec;color:#c02455;border-radius:99px;padding:1px 5px}
@media (max-width:960px){.sl-kit .mock-app{grid-template-columns:1fr}.sl-kit .mock-rail{display:none}}
.sl-kit .mock-window{background:#fff;border-radius:var(--r-sm);border:1px solid #eee;overflow:hidden;position:relative}
.sl-kit .mock-chrome{display:flex;align-items:center;gap:8px;background:#f2f3f9;border-bottom:1px solid var(--line);padding:11px 14px}
.sl-kit .mock-chrome i{width:10px;height:10px;border-radius:99px;background:#d9dcec}
.sl-kit .mock-chrome .url{margin-left:8px;flex:1;background:#fff;border:1px solid var(--line);border-radius:var(--r-sm);font-size:11px;color:var(--txt-faint);padding:5px 12px}
.sl-kit .mock-body{padding:16px 16px 14px;background:linear-gradient(180deg,#fbfbfe,#f5f6fb)}
/* ── the hero cockpit, matched to the real Overview ───────────────────────
   Card chrome, the target pill, the activity/metric/granularity controls, the
   dual-axis chart with its legend, the period-comparison strip and the
   Top customers / Top products pair — same anatomy as the live dashboard. */
.sl-kit .mock-card{background:#fff;border:1px solid #eee;border-radius:var(--r-sm);padding:12px 13px 10px}
/* the four KPI cards, matched to the live Overview: icon + label + sparkle,
   value + delta, the window line, then the target rule and its progress bar. */
.sl-kit .mock-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:10px}
.sl-kit .mk{background:#fff;border:1px solid #eee;border-radius:var(--r-sm);padding:9px 10px}
.sl-kit .mk-h{display:flex;align-items:center;gap:5px;font-size:9px;color:var(--txt-soft)}
.sl-kit .mk-h svg{width:10px;height:10px;flex:none}
.sl-kit .mk-h .sp{margin-left:1px;color:var(--violet-pale);font-size:8px}
.sl-kit .mk-v{margin-top:3px;display:flex;align-items:baseline;gap:5px;font-family:var(--font-body);font-weight:500;font-size:17px;color:var(--ink)}
.sl-kit .mk-v .pill{font-size:8px;padding:1.5px 5px}
.sl-kit .mk-w{margin-top:3px;font-size:7.5px;color:var(--txt-faint)}
.sl-kit .mk-t{margin-top:7px;padding-top:6px;border-top:1px solid #f2f3f9;display:flex;align-items:center;gap:4px;font-size:7.5px;color:var(--txt-soft)}
.sl-kit .mk-t .ring{width:7px;height:7px;border-radius:99px;border:2px solid currentColor;flex:none}
.sl-kit .mk-bar{margin-top:5px;height:3px;border-radius:99px;background:#eef0f8;overflow:hidden}
.sl-kit .mk-bar i{display:block;height:100%;border-radius:99px}
@media (max-width:960px){.sl-kit .mock-kpis{grid-template-columns:repeat(2,1fr)}}
.sl-kit .mock-card + .mock-card,.sl-kit .mock-tops{margin-top:10px}
.sl-kit .mock-tops .mock-card + .mock-card{margin-top:0}
.sl-kit .mock-tops{align-items:start}
.sl-kit .mc-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.sl-kit .mc-title{font-size:11.5px;font-weight:500;color:var(--ink);display:flex;align-items:center;gap:7px}
.sl-kit .mc-target{font-size:8.5px;font-weight:500;background:#fff3e0;color:#b45309;border-radius:99px;padding:2px 7px}
.sl-kit .mc-sub{margin-top:3px;font-size:9px;color:var(--txt-faint)}
.sl-kit .mc-controls{display:flex;align-items:center;gap:6px;flex:none}
.sl-kit .mc-sel{font-size:8.5px;color:var(--txt-soft);border:1px solid var(--line);border-radius:7px;padding:4px 7px;white-space:nowrap}
.sl-kit .mc-seg{display:inline-flex;background:#f1f2f8;border-radius:8px;padding:2px}
.sl-kit .mc-seg i{font-style:normal;font-size:8.5px;padding:3px 7px;border-radius:6px;color:var(--txt-faint);white-space:nowrap}
.sl-kit .mc-seg i.on{background:#fff;color:var(--ink);font-weight:500;box-shadow:0 1px 2px rgba(13,18,48,.08)}
.sl-kit .mc-chart{position:relative;display:grid;grid-template-columns:22px minmax(0,1fr) 26px;align-items:stretch;gap:5px;margin-top:9px}
.sl-kit .mc-chart svg{width:100%;height:96px;display:block}
.sl-kit .mc-yl,.sl-kit .mc-yr{display:flex;flex-direction:column;justify-content:space-between;font-size:7px;color:var(--txt-faint)}
.sl-kit .mc-yr{color:#10b981;text-align:right}
.sl-kit .mc-x{display:flex;justify-content:space-between;padding:4px 26px 0 27px;font-size:7.5px;color:var(--txt-faint)}
.sl-kit .mc-legend{display:flex;align-items:center;justify-content:center;gap:6px;padding-top:6px;font-size:8.5px;color:var(--txt-soft)}
.sl-kit .mc-legend .lg{width:6px;height:6px;border-radius:99px;display:inline-block}
.sl-kit .mc-legend .lg-o{background:#6366f1}.sl-kit .mc-legend .lg-g{background:#10b981;margin-left:6px}
.sl-kit .mc-compare{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;margin-top:9px;background:var(--line);border:1px solid var(--line);border-radius:8px;overflow:hidden}
.sl-kit .mc-compare>div{background:#fff;padding:7px 9px}
.sl-kit .cmp-k{font-size:8px;color:var(--txt-faint)}
.sl-kit .cmp-v{margin-top:2px;font-family:var(--font-body);font-weight:500;font-size:11.5px;color:var(--ink);display:flex;align-items:center;gap:4px;flex-wrap:wrap}
.sl-kit .cmp-v em{font-style:normal;font-family:var(--font-body);font-weight:400;font-size:7.5px;color:var(--txt-faint)}
.sl-kit .mock-tops{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.sl-kit .mt-h{font-size:10.5px;font-weight:500;color:var(--ink);padding-bottom:7px;border-bottom:1px solid #f0f1f8;display:flex;flex-direction:column;gap:2px}
.sl-kit .mt-h span{font-weight:400;font-size:8px;color:var(--txt-faint)}
.sl-kit .mt-r{display:flex;align-items:center;gap:7px;padding:6px 0;border-bottom:1px solid #f6f7fb;font-size:9.5px}
.sl-kit .mt-r:last-child{border-bottom:none}
.sl-kit .mt-n{font-size:8px;color:var(--txt-faint);width:8px;flex:none}
.sl-kit .mt-av{width:15px;height:15px;border-radius:5px;color:#fff;font-size:6.5px;font-weight:500;display:grid;place-items:center;font-family:var(--font-body);flex:none}
.sl-kit .mt-sw{width:15px;height:15px;border-radius:4px;flex:none}
.sl-kit .mt-name{color:var(--ink);font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sl-kit .mt-v{margin-left:auto;font-family:var(--font-body);font-weight:500;font-size:9.5px;color:var(--ink);white-space:nowrap}
.sl-kit .mt-v em{font-style:normal;font-family:var(--font-body);font-weight:400;font-size:7.5px;color:var(--txt-faint)}
@media (max-width:960px){.sl-kit .mc-controls,.sl-kit .mock-tops{display:none}.sl-kit .mc-compare{grid-template-columns:repeat(2,1fr)}}
.sl-kit .kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.sl-kit .kpi{background:#fff;border:1px solid var(--line);border-radius:var(--r-md);padding:11px 13px}
.sl-kit .kpi .k{font-size:10.5px;color:var(--txt-faint);font-weight:500}
.sl-kit .kpi .v{font-family:var(--font-body);font-weight: 600;font-size:21px;color:var(--ink);margin-top:3px;display:flex;align-items:baseline;gap:7px}
.sl-kit .pill{font-size:9.5px;font-weight:500;border-radius:99px;padding:2px 7px}
.sl-kit .pill.up{background:var(--good-soft);color:var(--good)}.sl-kit .pill.down{background:#fde4e9;color:#c02455}
.sl-kit .kpi .t{margin-top:7px;height:3.5px;border-radius:99px;background:#eef0f8;overflow:hidden}
.sl-kit .kpi .t i{display:block;height:100%;border-radius:99px}
.sl-kit .sparkiebar{margin-top:10px;display:flex;gap:9px;align-items:center;background:linear-gradient(90deg,#f4efff,#faf7ff);border:1px solid #e6dcff;border-radius:var(--r-md);padding:9px 12px;font-size:11.5px;color:#4c1d95}
.sl-kit .sparkiebar .sdot{flex:none;width:20px;height:20px;border-radius:6px;background:#fff;border:1px solid var(--line);display:grid;place-items:center;overflow:hidden}
.sl-kit .sparkie-img{display:block;width:78%;height:78%;object-fit:contain}
.sl-kit .mock-chart{margin-top:10px;background:#fff;border:1px solid var(--line);border-radius:var(--r-md);padding:12px 12px 6px}
.sl-kit .mock-chart .h{display:flex;justify-content:space-between;align-items:center;font-size:11px;font-weight:500;color:var(--ink)}
.sl-kit .mock-chart .h span:last-child{font-weight:500;color:var(--txt-faint);font-size:10px}
/* the queue strip under the chart — restores the window's landscape ratio and
   shows the half of Pulse the KPIs don't: what to actually do today. */
.sl-kit .mock-queue{margin-top:10px;background:#fff;border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden}
.sl-kit .mock-queue .mq-h{display:flex;align-items:center;justify-content:space-between;padding:9px 12px;border-bottom:1px solid #f0f1f8;font-size:11px;font-weight:500;color:var(--ink)}
.sl-kit .mock-queue .mq-h em{font-style:normal;font-weight:500;color:var(--violet-3);font-size:10px}
.sl-kit .mock-queue .mq-r{display:flex;align-items:center;gap:8px;padding:7px 12px;border-bottom:1px solid #f6f7fb;font-size:10.5px}
.sl-kit .mock-queue .mq-r:last-child{border-bottom:none}
.sl-kit .mock-queue .mq-av{width:18px;height:18px;border-radius:6px;color:#fff;font-size:7.5px;font-weight:500;display:grid;place-items:center;font-family:var(--font-body);flex:none}
.sl-kit .mock-queue .mq-n{font-weight:500;color:var(--ink)}
.sl-kit .mock-queue .mq-s{color:var(--txt-faint);font-size:9.5px}
.sl-kit .mock-queue .mq-t{margin-left:auto;font-size:8px;font-weight:500;letter-spacing:.03em;border-radius:99px;padding:2.5px 7px;white-space:nowrap}
.sl-kit .mock-queue .mq-v{font-family:var(--font-body);font-weight:500;color:var(--ink);font-size:11px;margin-left:9px}
/* ── the hero cockpit performs on load ── */
@keyframes plp-riseIn{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
@keyframes plp-growBar{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes plp-drawH{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes plp-fadeIn{from{opacity:0}to{opacity:1}}
@keyframes plp-chipIn{from{opacity:0;transform:translateY(var(--fy,-20px)) scale(.82) rotate(var(--fr,0deg))}to{opacity:1;transform:translateY(0) scale(1) rotate(var(--fr,0deg))}}
.sl-kit .mock-window{animation:plp-riseIn .7s cubic-bezier(.22,.8,.3,1) both}
.sl-kit .kpi{opacity:0;animation:plp-riseIn .55s cubic-bezier(.22,.8,.3,1) both}
.sl-kit .kpis .kpi:nth-child(1){animation-delay:.35s}
.sl-kit .kpis .kpi:nth-child(2){animation-delay:.5s}
.sl-kit .kpis .kpi:nth-child(3){animation-delay:.65s}
.sl-kit .kpi .t i{transform-origin:left;animation:plp-growBar .9s cubic-bezier(.22,.8,.3,1) both}
.sl-kit .kpis .kpi:nth-child(1) .t i{animation-delay:.85s}
.sl-kit .kpis .kpi:nth-child(2) .t i{animation-delay:1s}
.sl-kit .kpis .kpi:nth-child(3) .t i{animation-delay:1.15s}
.sl-kit .sparkiebar{opacity:0;animation:plp-riseIn .55s cubic-bezier(.22,.8,.3,1) .85s both}
.sl-kit .mock-chart{opacity:0;animation:plp-riseIn .55s cubic-bezier(.22,.8,.3,1) 1.05s both}
.sl-kit .h-line1,.sl-kit .h-line2{stroke-dasharray:1;animation:plp-drawH 1.3s cubic-bezier(.4,0,.2,1) both}
.sl-kit .h-line1{animation-delay:1.3s}
.sl-kit .h-line2{animation-delay:1.5s}
.sl-kit .h-area{opacity:0;animation:plp-fadeIn .8s ease 2.1s both}
.sl-kit .float-alert{--fr:0deg;--fy:-24px}
.sl-kit .float-found{--fr:0deg;--fy:14px}
.sl-kit .float-reorder{--fr:0deg;--fy:22px}
.sl-kit .float-alert{animation:plp-chipIn .65s cubic-bezier(.34,1.56,.64,1) 2s both,plp-bob 6s ease-in-out 2.8s infinite}
.sl-kit .float-found{animation:plp-chipIn .65s cubic-bezier(.34,1.56,.64,1) 2.25s both,plp-bob 7s ease-in-out 3s infinite}
.sl-kit .float-reorder{animation:plp-chipIn .65s cubic-bezier(.34,1.56,.64,1) 2.5s both,plp-bob 6.5s ease-in-out 3.2s infinite}
@keyframes plp-bob{0%,100%{transform:translateY(0) rotate(var(--fr,0deg))}50%{transform:translateY(-7px) rotate(var(--fr,0deg))}}

/* floating chips around the mock */
.sl-kit .float{position:absolute;z-index:4;background:#fff;border-radius:var(--r-sm);box-shadow:var(--e2);font-size:12px;animation:none}
@keyframes plp-bob{50%{transform:translateY(-7px)}}
.sl-kit .float .fh{display:flex;align-items:center;gap:8px;font-weight:500;color:var(--ink)}
.sl-kit .float-alert{top:-34px;right:-58px;padding:11px 15px 10px}
.sl-kit .float-alert .fh i{width:8px;height:8px;border-radius:99px;background:var(--pink);box-shadow:0 0 0 3px rgba(255,2,106,.15)}
.sl-kit .float-alert .fs{margin-top:4px;color:var(--txt-soft);font-size:11px;white-space:nowrap}
.sl-kit .wc{position:relative;width:206px;height:35px}
.sl-kit .wc-item .wc-green{background:#34d399;box-shadow:0 0 0 3px rgba(52,211,153,.16)}
.sl-kit .wc-item .wc-cyan{background:var(--cyan);box-shadow:0 0 0 3px rgba(11,206,252,.16)}
.sl-kit .float-reorder{bottom:-26px;left:-24px;padding:11px 15px 10px}
.sl-kit .float-reorder .badge{font-size:9px;font-weight: 600;letter-spacing:.04em;background:#fff2e2;color:#b45309;border-radius:99px;padding:2.5px 8px}
.sl-kit .float-reorder .badge-rose{background:#fde4e9;color:#c02455}
.sl-kit .float-reorder .badge-violet{background:#efe7ff;color:var(--violet-3)}
.sl-kit .float-reorder .fs{margin-top:4px;color:var(--txt-soft);font-size:11px;white-space:nowrap}
.sl-kit .fc{position:relative;width:290px;height:35px}
.sl-kit .fc-item,.sl-kit .wc-item{position:absolute;inset:0;opacity:0;transform:translateY(10px);transition:opacity .3s ease,transform .3s ease;pointer-events:none}
.sl-kit .fc-item.on,.sl-kit .wc-item.on{opacity:1;transform:none;animation:plp-chipSwap .6s cubic-bezier(.34,1.56,.64,1)}
@keyframes plp-chipSwap{0%{opacity:0;transform:translateY(-20px) scale(.86)}60%{opacity:1;transform:translateY(3px) scale(1.02)}100%{opacity:1;transform:none}}
.sl-kit .float.switching{animation:plp-floatPop .55s cubic-bezier(.34,1.56,.64,1)}
@keyframes plp-floatPop{0%{transform:scale(1) rotate(var(--fr,0deg))}45%{transform:scale(1.05) rotate(var(--fr,0deg))}100%{transform:scale(1) rotate(var(--fr,0deg))}}
.sl-kit .float-found{bottom:38px;right:-66px;padding:12px 15px}
.sl-kit .float-found .fv{font-family:var(--font-body);font-weight: 600;font-size:19px;color:var(--good)}
.sl-kit .float-found .fs{color:var(--txt-soft);font-size:10.5px;margin-top:2px}


/* ── sections ── */
/* ONE rhythm: every section opens on --kit-gap and closes on nothing, so the
   seam between any two is exactly one gap. This used to be `var(--s-7) 0`
   (72px top AND bottom) while `.sl-sec` — which most, but not all, sections
   carry — was `var(--kit-gap) 0 0` (96/0). Two scales meant the seam depended
   on which pair of sections happened to be adjacent: 96px between two
   .sl-secs, 168px whenever a bare section sat above one. That is the
   "sometimes a big gap, sometimes a small gap" this page kept being pulled
   up on, and no amount of tuning individual sections could fix it, because
   the inconsistency was in having two scales at all.

   A section that genuinely needs a tail (a band with a background that has
   to breathe at the bottom) says so itself — see `.ai-band` and `.cta`,
   which carry the gap internally because their background is visible. */
.sl-kit section{padding:var(--kit-gap) 0 0}
.sl-kit #toolkit{background:
  linear-gradient(180deg,#fff 0%,rgba(255,255,255,.92) 10%,rgba(255,255,255,.45) 22%,rgba(255,255,255,0) 36%),
  radial-gradient(74% 46% at 82% 30%,rgba(11,206,252,.16),transparent 74%),
  radial-gradient(72% 44% at 14% 26%,rgba(124,58,237,.16),transparent 74%),
  radial-gradient(64% 38% at 52% 36%,rgba(255,2,106,.11),transparent 74%),
  linear-gradient(0deg,#fff 0%,#fff 14%,rgba(255,255,255,.9) 28%,rgba(255,255,255,.5) 42%,rgba(255,255,255,0) 58%),#fff;
  padding-top:var(--s-7)}
.sl-kit #problem{padding-bottom:var(--s-5)}
.sl-kit #faq{padding-bottom:calc(var(--s-8) + var(--s-5))}
.sl-kit .pillars{padding-top:var(--s-5);padding-bottom:var(--s-5)}
.sl-kit .kicker{font-size:16px;font-weight:500;letter-spacing:-.01em;color:var(--violet);margin-bottom:var(--s-2)}
.sl-kit .kicker.mono{font-family:inherit;font-size:16px;letter-spacing:-.01em;text-transform:none}
.sl-kit h2{font-size:clamp(27px,3vw,39px);font-weight: 600;line-height:1.15}
.sl-kit .lede{margin-top:16px;font-size:16px;line-height:1.6;color:var(--txt-soft);max-width:58ch}
.sl-kit .lede b{color:var(--ink);font-weight:500}
.sl-kit .center{text-align:center}.sl-kit .center .lede{margin-inline:auto}
.sl-kit .center h2{max-width:24ch;margin-inline:auto}
/* Stripe-style section head: left-aligned, one flowing two-tone statement */
.sl-kit .sec-head{max-width:780px}
.sl-kit .statement{margin:var(--s-2) 0 0;font-family:var(--font-display);font-size:clamp(21px,2.4vw,28px);line-height:1.38;letter-spacing:-.02em;font-weight:500;color:var(--ink);text-wrap:pretty}
.sl-kit .rep-faces{display:flex;align-items:center;margin-bottom:22px}
.sl-kit .rep-faces i{width:38px;height:38px;border-radius:99px;border:3px solid #fff;display:grid;place-items:center;font-style:normal;font-family:var(--font-body);font-weight: 600;font-size:12px;color:#fff;margin-right:-11px;box-shadow:0 2px 8px -2px rgba(24,20,60,.28)}
.sl-kit .rep-faces em{margin-left:19px;font-style:normal;font-family:var(--font-body);font-weight: 600;font-size:12px;color:var(--txt-soft)}
/* the faces deal in one at a time on reveal, then breathe */
.sl-kit .rep-faces i{opacity:0;transform:translateX(-10px) scale(.86);transition:opacity .4s ease,transform .5s cubic-bezier(.34,1.4,.64,1)}
.sl-kit .rep-faces em{opacity:0;transition:opacity .4s ease .62s}
.sl-kit .sec-head.in .rep-faces i{opacity:1;transform:none;animation:plp-faceBreathe 5.5s ease-in-out infinite}
.sl-kit .sec-head.in .rep-faces em{opacity:1}
.sl-kit .sec-head.in .rep-faces i:nth-child(1){transition-delay:.06s;animation-delay:1.1s}
.sl-kit .sec-head.in .rep-faces i:nth-child(2){transition-delay:.16s;animation-delay:1.35s}
.sl-kit .sec-head.in .rep-faces i:nth-child(3){transition-delay:.26s;animation-delay:1.6s}
.sl-kit .sec-head.in .rep-faces i:nth-child(4){transition-delay:.36s;animation-delay:1.85s}
.sl-kit .sec-head.in .rep-faces i:nth-child(5){transition-delay:.46s;animation-delay:2.1s}
@keyframes plp-faceBreathe{0%,88%,100%{transform:translateY(0)}94%{transform:translateY(-3px)}}
@media (max-width:560px){.sl-kit .rep-faces i{width:32px;height:32px;font-size:11px;margin-right:-9px}}
.sl-kit .statement span{color:#7e8c9a;font-weight:600}
.sl-kit .ai-band .statement{color:#fff;max-width:700px}
/* on the dark band the accent needs lifting — the light-page violets go muddy
   against navy, so swap to the tints that actually read there. */
.sl-kit .ai-band .accent{background:linear-gradient(92deg,var(--violet-pale) 0%,#e9a5ff 42%,#ff86b8 78%,var(--violet-pale) 100%);background-size:220% 100%;-webkit-background-clip:text;background-clip:text;color:transparent}
.sl-kit .ai-band .statement span{color:#aab2d8}

/* proof strip */
.sl-kit .proof{padding:var(--s-6) 0 0}
.sl-kit .proof p{text-align:center;font-size:13.5px;line-height:1.45;color:var(--txt-soft);max-width:70ch;margin-inline:auto}
.sl-kit .proof b{color:var(--ink)}

/* problem cards */
.sl-kit .probs{margin-top:var(--s-6);display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gut)}
.sl-kit .prob{display:flex;flex-direction:column;background:#fff;border:1px solid #ececf4;border-radius:var(--r-lg);padding:0;position:relative;overflow:hidden;transition:border-color .35s ease,filter .35s ease}
.sl-kit .prob:hover{border-color:#e2ddf6;filter:saturate(1.08)}
.sl-kit .prob h3{padding:26px 26px 0;order:1}
.sl-kit .prob .card-art{order:2;margin:18px 0 0;padding:18px;border:none;border-radius:0;min-height:212px;display:flex;align-items:center;transition:filter .35s ease}
.sl-kit .prob:hover .card-art{filter:saturate(1.1)}
.sl-kit .prob:nth-child(1) .card-art{background:radial-gradient(80% 120% at 12% 0%,rgba(124,58,237,.17),transparent 68%),radial-gradient(75% 110% at 94% 100%,rgba(11,206,252,.15),transparent 70%),#f8f6ff}
.sl-kit .prob:nth-child(2) .card-art{background:radial-gradient(80% 120% at 88% 0%,rgba(255,2,106,.12),transparent 68%),radial-gradient(78% 115% at 8% 100%,rgba(124,58,237,.17),transparent 70%),#f9f5ff}
.sl-kit .prob:nth-child(3) .card-art{background:radial-gradient(80% 120% at 12% 0%,rgba(255,146,67,.15),transparent 68%),radial-gradient(78% 115% at 92% 100%,rgba(124,58,237,.15),transparent 70%),#faf6ff}
.sl-kit .prob .q-lead{padding:18px 26px 0;order:3}
.sl-kit .prob .q{padding:0 26px 10px;order:3}
.sl-kit .prob .a{padding:0 26px 26px;order:4;min-height:0;flex:1}
/* the card's link CTA — pinned to the bottom of .a so three cards of unequal
   copy length still line their CTAs up */
/* the card's link CTA. It's a child of .a, so it already sits inside .a's 26px
   gutter — giving it its own padding-left double-indented it past the copy.
   (`order` here was dead for the same reason: not a flex item of .prob.) */
/* the card art is a picture of the same claim the link makes, so it carries
   the link too — a transparent stretched anchor over the whole mock */
.sl-kit .prob .card-art{position:relative}

.sl-kit .prob-more{display:block;margin-top:16px;padding:0}
.sl-kit .prob .card-art>a.art-link{position:absolute;inset:0;z-index:6;width:auto;
  background:transparent;border:0;box-shadow:none;padding:0;border-radius:inherit}
.sl-kit .prob .card-art>*{width:100%;background:#fff;border:1px solid var(--line-2);border-radius:11px;padding:12px 14px;box-shadow:0 16px 34px -22px rgba(24,20,60,.28),0 2px 6px -2px rgba(24,20,60,.07)}
.sl-kit .prob .chart-wrap{height:118px}

.sl-kit .prob h3{font-size:18px;font-weight:500;letter-spacing:-.02em}

/* ── A four-up variant of the same card ──────────────────────────────────
   `.probs` ships as three columns because that is what the homepage needs.
   /how-it-works has a four-step timeline, and a fourth card is the whole
   difference between reusing this component and building a second one.
   Narrower columns, so the art panel is shorter and the type steps down a
   touch; everything else — the wash, the hover, the bleed — is inherited. */
.sl-kit .probs--4{grid-template-columns:repeat(4,minmax(0,1fr))}
/* ── FOUR CARDS, ONE SET OF ROWS ──────────────────────────────────────────
   Levelling the COPY only lines the cards up at the width I happened to
   check: one title wrapping to three lines at 1100px pushes that card's body
   and drawing down and the row is ragged again.

   Subgrid fixes it structurally. Each card spans three rows of the parent
   grid and inherits their heights, so every title block is as tall as the
   TALLEST title, every body as tall as the tallest body, and all four
   drawings start on the same line at any width. Nothing to re-check when the
   copy changes. */
@media (min-width:961px){
  .sl-kit .probs--4{grid-template-rows:auto auto auto}
  .sl-kit .probs--4 .prob{display:grid;grid-template-rows:subgrid;grid-row:span 3}
}
.sl-kit .probs--4 .prob{display:flex;flex-direction:column}
.sl-kit .probs--4 .prob h3{font-size:17px;padding:24px 22px 0}
/* On its own line. Inline, it pushed the first words of every title
   into a hanging indent — "Go live on the / store you have" — so four
   cards wrapped four different ways. */
.sl-kit .probs--4 .prob h3 .stepno{display:grid;place-items:center;margin:0 0 12px;vertical-align:baseline}
.sl-kit .probs--4 .prob .a{padding:0 22px 22px;font-size:14.5px;line-height:1.55}
/* margin-top:auto pushes every card's art to a shared floor, and the
   fixed height stops one drawing being twice the size of the next */
.sl-kit .probs--4 .prob .card-art{min-height:0;height:186px;padding:16px;margin-top:auto;display:grid;align-content:center}
/* the fourth card needs its own wash — `.probs` only defines three */
.sl-kit .prob:nth-child(4) .card-art{background:radial-gradient(80% 120% at 88% 0%,rgba(15,122,77,.14),transparent 68%),radial-gradient(78% 115% at 8% 100%,rgba(124,58,237,.14),transparent 70%),#f7fbf9}
/* the step number, inline in the heading — it belongs to the sentence, so
   it sits in the h3 rather than floating above it as its own row */
.sl-kit .prob h3 .stepno{display:inline-grid;place-items:center;width:24px;height:24px;margin-right:9px;vertical-align:-4px;border-radius:99px;background:var(--violet);color:#fff;font-family:var(--font-body);font-weight:600;font-size:12.5px;letter-spacing:0}
/* A tinted pill with a coloured numeral, one hue per step, drawn from the
   SparkLayer mark's own four colours. Four identical violet discs said
   nothing about sequence, and a white numeral on a saturated disc at 12px
   is the least legible way to print a single digit. */
.sl-kit .probs--4 .prob h3 .stepno{width:28px;height:28px;font-size:13px;background:#ede9fe;color:var(--violet-3)}
.sl-kit .probs--4 .prob:nth-child(2) h3 .stepno{background:#e0f2fe;color:#0369a1}
.sl-kit .probs--4 .prob:nth-child(3) h3 .stepno{background:#ffedd5;color:#c2410c}
.sl-kit .probs--4 .prob:nth-child(4) h3 .stepno{background:#ffe4ec;color:#be123c}
.sl-kit .prob .q{position:relative;margin-top:0;padding-left:26px;font-weight:500;font-size:15.5px;color:var(--ink);line-height:1.5;letter-spacing:-.005em}
/* a lead-in above the quote — on its own the quote reads as a stray remark;
   "No more of" names it as the thing Pulse ends */
.sl-kit .prob .q-lead{padding-left:26px;margin-bottom:6px;font-size:11px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--txt-soft);opacity:.8}
.sl-kit .prob .q::before{content:"";position:absolute;left:0;top:.28em;bottom:.18em;width:2px;border-radius:2px;background:linear-gradient(180deg,var(--violet-pale),#efe7ff)}
.sl-kit .prob .a{margin-top:0;font-size:14px;line-height:1.45;color:#666}

/* card imagery (problem + pillar cards) */
.sl-kit .card-art{margin-top:16px;background:#fff;border:1px solid var(--line);border-radius:var(--r-md);padding:10px 12px;overflow:hidden}
.sl-kit .prob .chart-wrap{position:relative;height:110px}
.sl-kit .prob .chart-wrap svg{position:absolute;inset:0;width:100%;height:100%}
.sl-kit .chart-note{position:absolute;top:10px;left:4px;font-size:11px;font-weight:500;color:var(--txt-faint)}
.sl-kit .chart-flag{position:absolute;top:26%;right:2px;background:#fde4e9;color:#c02455;font-size:11px;font-weight:500;border-radius:99px;padding:5px 12px}
/* card 1: the story plays — steady line draws, then the break appears, then the flag */
.sl-kit .prob .chart-note{opacity:0;transition:opacity .5s ease .15s}
.sl-kit .prob.in .chart-note{opacity:1}
.sl-kit .prob .plp-draw-line{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.1s cubic-bezier(.4,0,.2,1) .3s}
.sl-kit .prob.in .plp-draw-line{stroke-dashoffset:0}
.sl-kit .prob .fill-area{opacity:0;transition:opacity .7s ease .9s}
.sl-kit .prob.in .fill-area{opacity:1}
.sl-kit .prob .chart-after{opacity:0;transition:opacity .55s ease 1.25s}
.sl-kit .prob.in .chart-after{opacity:1}
.sl-kit .prob .chart-flag{opacity:0;transform:scale(.7);transition:opacity .4s ease 1.5s,transform .45s cubic-bezier(.34,1.56,.64,1) 1.5s}
.sl-kit .prob.in .chart-flag{opacity:1;transform:none}
/* cards 2–3: header, then rows deal in, tags pop */
.sl-kit .prob .mini-head{opacity:0;transform:translateY(6px);transition:opacity .45s ease .2s,transform .45s ease .2s}
.sl-kit .prob.in .mini-head{opacity:1;transform:none}
.sl-kit .prob .card-art .mini-row{opacity:0;transform:translateX(-10px);transition:opacity .5s cubic-bezier(.22,.8,.3,1),transform .5s cubic-bezier(.22,.8,.3,1)}
.sl-kit .prob.in .card-art .mini-row{opacity:1;transform:none}
.sl-kit .prob.in .card-art .mini-row:nth-child(2){transition-delay:.35s}
.sl-kit .prob.in .card-art .mini-row:nth-child(3){transition-delay:.5s}
.sl-kit .prob.in .card-art .mini-row:nth-child(4){transition-delay:.65s}
.sl-kit .prob .card-art .mini-tag{opacity:0;transform:scale(.6);transition:opacity .35s ease,transform .35s cubic-bezier(.34,1.56,.64,1)}
.sl-kit .prob.in .card-art .mini-tag{opacity:1;transform:none}
.sl-kit .prob.in .card-art .mini-row:nth-child(2) .mini-tag{transition-delay:.65s}
.sl-kit .prob.in .card-art .mini-row:nth-child(3) .mini-tag{transition-delay:.8s}
.sl-kit .prob.in .card-art .mini-row:nth-child(4) .mini-tag{transition-delay:.95s}
.sl-kit .prob .mh-r.money{opacity:0;transition:opacity .5s ease 1.05s}
.sl-kit .prob.in .mh-r.money{opacity:1}

.sl-kit .pillar .card-art{background:#f8f8fd}
.sl-kit .mini-head{display:flex;align-items:center;justify-content:space-between;padding:4px 0 9px;border-bottom:1px solid #f0f1f8;font-size:11px;font-weight:500;color:var(--ink)}
.sl-kit .mini-head .mh-r{font-size:10px;font-weight:500;color:var(--txt-faint)}
.sl-kit .mini-head .mh-r.money{color:var(--good);font-weight: 600;font-family:var(--font-body)}
.sl-kit .rank{flex:none;width:18px;height:18px;border-radius:6px;background:#efe7ff;color:var(--violet-3);font-weight: 600;font-size:10px;display:grid;place-items:center;font-family:var(--font-body)}
.sl-kit .mini-row{display:flex;align-items:center;gap:8px;font-size:10.5px;padding:5.5px 0;border-bottom:1px dashed #ecedf6}
.sl-kit .mini-row:last-child{border-bottom:none}
.sl-kit .mini-ava svg{width:10px;height:10px;stroke-width:2.2}
.sl-kit .mini-ava{flex:none;width:18px;height:18px;border-radius:6px;color:#fff;font-size:7.5px;font-weight: 600;display:grid;place-items:center;font-family:var(--font-body)}
.sl-kit .mini-name{font-weight:500;color:var(--ink);font-size:10.5px;line-height:1.25}
.sl-kit .mini-sub{color:var(--txt-faint);font-size:9px;line-height:1.25}
.sl-kit .mini-tag{margin-left:auto;font-size:7.5px;font-weight: 600;border-radius:99px;padding:2.5px 7px;letter-spacing:.04em;white-space:nowrap}
.sl-kit .mini-tag.rose{background:#fde4e9;color:#c02455}.sl-kit .mini-tag.amber{background:#fff2e2;color:#b45309}
.sl-kit .mini-tag.violet{background:#efe7ff;color:var(--violet-3)}.sl-kit .mini-tag.green{background:var(--good-soft);color:var(--good)}
.sl-kit .card-art svg{display:block;width:100%;height:auto}
.sl-kit .ai-card .card-art{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.13);margin-top:14px;padding:14px 16px;height:150px;display:flex;flex-direction:column;justify-content:center}
/* a push notification */
.sl-kit .notif-head{display:flex;align-items:center;gap:7px;font-size:10.5px;font-weight:500;letter-spacing:.02em;color:#8b93bd;text-transform:uppercase}
.sl-kit .notif-head .notif-dot{width:8px;height:8px;border-radius:99px;background:#ff4d94;box-shadow:0 0 0 3px rgba(255,2,106,.2);animation:plp-dotGlow 2.6s ease-in-out infinite}
.sl-kit .notif-head .notif-time{margin-left:auto;text-transform:none;font-weight:500}
.sl-kit .notif-title{margin-top:9px;font-size:14px;font-weight:500;color:#fff;line-height:1.35}
.sl-kit .notif-body{margin-top:4px;font-size:12px;line-height:1.5;color:#aab2d8}
/* an email draft */
.sl-kit .mail-row{display:flex;gap:8px;font-size:11.5px;color:#e6e9fb;padding:4px 0;border-bottom:1px solid rgba(255,255,255,.08)}
.sl-kit .mail-row span{flex:none;width:44px;color:#8b93bd}
.sl-kit .mail-body{padding:8px 0 0;font-size:11.5px;line-height:1.5;color:#aab2d8;font-style:italic}
.sl-kit .mail-foot{margin-top:9px;display:flex;align-items:center;gap:9px}
.sl-kit .mail-send{background:var(--violet);color:#fff;font-size:10.5px;font-weight:500;border-radius:99px;padding:4px 13px}
.sl-kit .mail-note{font-size:10px;color:#8b93bd}
/* action → order trace */
.sl-kit .trace-step{display:flex;align-items:center;gap:10px;font-size:12.5px;color:#e6e9fb}
.sl-kit .trace-step b{color:#fff}
.sl-kit .trace-step .money{color:#7fe7bd}
.sl-kit .trace-dot{flex:none;width:9px;height:9px;border-radius:99px}
.sl-kit .trace-dot.violet{background:var(--violet-soft);box-shadow:0 0 0 3px rgba(167,139,250,.2)}
.sl-kit .trace-dot.green{background:#34d399;box-shadow:0 0 0 3px rgba(52,211,153,.18)}
.sl-kit .trace-dot.cyan{background:#22d3ee;box-shadow:0 0 0 4px rgba(34,211,238,.16)}
.sl-kit .trace-link{width:1.5px;height:16px;margin:3px 0 3px 3.5px;background:linear-gradient(180deg,var(--violet-soft),#34d399);border-radius:2px}
.sl-kit .trace-days{font-size:10px;color:#8b93bd;margin-left:19px}
.sl-kit .mini-dot{flex:none;width:9px;height:9px;border-radius:99px;margin:0 4px}
.sl-kit .mini-dot.rose{background:#ff4d94;box-shadow:0 0 0 4px rgba(255,2,106,.22)}
.sl-kit .mini-dot.green{background:#34d399;box-shadow:0 0 0 4px rgba(52,211,153,.2)}
.sl-kit .mini-dot.violet{background:var(--violet-soft);box-shadow:0 0 0 3.5px rgba(167,139,250,.2)}
.sl-kit .ai-card .mini-tag.rose{background:rgba(255,2,106,.16);color:#ff9dc0}
.sl-kit .ai-card .mini-tag.green{background:rgba(52,211,153,.15);color:#7fe7bd}
.sl-kit .ai-card .mini-tag.violet{background:rgba(167,139,250,.18);color:#cabffd}
.sl-kit .ai-card .mini-row{border-bottom-color:rgba(255,255,255,.1);padding:9px 0;gap:11px}
.sl-kit .ai-card .mini-name{font-size:12.5px;color:#fff}
.sl-kit .ai-card .mini-sub{font-size:11px;color:#aab2d8;margin-top:2px}
.sl-kit .ai-card .mini-tag{font-size:8.5px;padding:3px 9px}
.sl-kit .ai-card .mini-dot{width:10px;height:10px;animation:plp-dotGlow 2.6s ease-in-out infinite}
.sl-kit .ai-card .mini-row:nth-child(2) .mini-dot{animation-delay:1.3s}
@keyframes plp-dotGlow{50%{filter:brightness(1.35)}}
/* rows plp-drift in as the card reveals */
.sl-kit .ai-card .mini-row{opacity:0;transform:translateX(-8px);transition:opacity .5s ease,transform .5s ease}
.sl-kit .ai-card.in .mini-row{opacity:1;transform:none}
.sl-kit .ai-card.in .mini-row:nth-child(1){transition-delay:.15s}
.sl-kit .ai-card.in .mini-row:nth-child(2){transition-delay:.3s}
.sl-kit .ai-card .mini-name{color:#fff}
.sl-kit .ai-card .mini-sub{color:#9ba3c9}

/* Stripe-style bento cards */
/* gorgias-style asymmetry: wide+narrow on row one, narrow+wide on row two, so
   the eye zig-zags rather than scanning equal columns. */
.sl-kit .bento{margin-top:var(--s-6);display:grid;grid-template-columns:repeat(12,1fr);gap:var(--gut)}
.sl-kit .bento>*{grid-column:span 12}
@media (min-width:961px){
  .sl-kit .bento>:nth-child(1){grid-column:span 7}
  .sl-kit .bento>:nth-child(2){grid-column:span 5}
  .sl-kit .bento>:nth-child(3){grid-column:span 5}
  .sl-kit .bento>:nth-child(4){grid-column:span 7}
}
.sl-kit .b-card{position:relative;background:#fff;border:1px solid #ececf4;border-radius:var(--r-lg);overflow:hidden;display:flex;flex-direction:column;transition:border-color .35s ease,filter .35s ease}
/* the art fills whatever room the card has, so a short mock doesn't leave a
   slab of empty wash under it */
/* The mock is inset from the card's side walls rather than running the full
   width — at full bleed it read as a screenshot pasted into the card
   instead of art sitting inside it. Horizontal only: the bottom edge still
   bleeds off, which is what squares the .b-shot's bottom corners. */
.sl-kit .b-card .b-art{flex:1;display:flex;flex-direction:column;justify-content:flex-end;padding-left:clamp(14px,2vw,26px);padding-right:clamp(14px,2vw,26px)}
/* Two kinds of card art. A CROPPED mock bottom-aligns and squares its bottom
   corners so it bleeds off the card. A mock that fits ENTIRELY centres in its
   space and keeps all four corners — bottom-aligning it strands the slack
   above, which reads as a mistake rather than a crop. */
.sl-kit .b-card .b-art--center{justify-content:center;margin:0;padding-top:0}
.sl-kit .b-card .b-art--center .b-shot{border-radius:var(--r-lg)!important}
.sl-kit .b-card .b-shot{display:flex;flex-direction:column}
/* the art is cropped by the card, so rounded bottom corners read as a floating
   panel with a gap under it — square them off and it blends into the wash */
.sl-kit .b-card .b-shot{border-bottom-left-radius:0;border-bottom-right-radius:0}
.sl-kit .b-card:hover{border-color:#e2ddf6}
/* the whole card is a link to the page that goes deeper, with an "Explore more"
   chip that only appears on hover — the card art is the hero, not the CTA */
.sl-kit .b-card .b-link{position:absolute;inset:0;z-index:7;background:transparent}
.sl-kit .b-card .b-link>span{position:absolute;top:28px;right:22px;height:25px;display:inline-flex;align-items:center;gap:6px;
  font-family:var(--font-display);font-size:13px;font-weight:600;color:var(--violet);
  background:rgba(255,255,255,.9);border:1px solid #e6dcff;border-radius:999px;padding:0 13px;white-space:nowrap;
  opacity:0;transform:translateY(-4px);transition:opacity .25s ease,transform .25s ease}
.sl-kit .b-card .b-link>span i{font-style:normal;transition:transform .2s ease}
.sl-kit .b-card:hover .b-link>span,.sl-kit .b-card .b-link:focus-visible>span{opacity:1;transform:none}
.sl-kit .b-card:hover .b-link>span i{transform:translateX(3px)}
@media (max-width:700px){.sl-kit .b-card .b-link>span{display:none}}
/* the same orbiting border arc the toolkit cards run */
.sl-kit .b-card::after{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;z-index:3;
  background:conic-gradient(from var(--plp-orbit),transparent 0deg 306deg,rgba(124,58,237,.42) 338deg,rgba(11,206,252,.55) 351deg,transparent 360deg);
  -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  animation:plp-orbit 8s linear infinite}
.sl-kit .b-card:nth-child(2)::after{animation-delay:-2s}
.sl-kit .b-card:nth-child(3)::after{animation-delay:-4s}
.sl-kit .b-card:nth-child(4)::after{animation-delay:-6s}
.sl-kit .b-card h3{padding:28px 28px 0;font-size:19px;font-weight:500;letter-spacing:-.02em}
.sl-kit .b-card>p{padding:10px 28px 0;font-size:14px;line-height:1.45;color:var(--txt-soft)}
.sl-kit .b-art{position:relative;margin:26px 0 0;padding:26px 26px 0;min-height:250px;flex:1;overflow:hidden;display:flex;align-items:flex-end;justify-content:center;transition:filter .45s ease}
.sl-kit .b-card:hover{filter:saturate(1.08)}
/* the bento wash melts up into the white copy above it — no hard top edge */
.sl-kit .b-card::before{content:"";position:absolute;inset:0;background:linear-gradient(158deg,#fff 0%,rgba(255,255,255,.97) 20%,rgba(255,255,255,.72) 34%,rgba(255,255,255,.2) 52%,rgba(255,255,255,0) 66%);pointer-events:none;z-index:0}
.sl-kit .b-card>*{position:relative;z-index:1}
.sl-kit .b-card:hover .b-art{filter:saturate(1.16)}
.sl-kit .b-shot .rowline{transition:transform .45s cubic-bezier(.22,.8,.3,1)}
.sl-kit .b-card:hover .b-shot .rowline{transform:translateY(-3px)}
.sl-kit .b-card:hover .b-shot .rowline:nth-of-type(1){transition-delay:.06s}
.sl-kit .b-card:hover .b-shot .rowline:nth-of-type(2){transition-delay:.13s}
.sl-kit .b-card:hover .b-shot .rowline:nth-of-type(3){transition-delay:.2s}
/* ── ZOOM AND CROP, don't shrink to fit ───────────────────────────────────
   Every mock was drawn at full size and then asked to live in a 250px-tall
   frame, so it read at about 70% and the detail that makes the point — the
   price, the qty rule, the terms line — went to 9px and became texture.

   `zoom`, not `transform: scale()`. Zoom RE-LAYS-OUT at the new size, so
   px type is genuinely bigger and stays crisp; a transform rasterises the
   same small drawing larger. The frame already clips (`.b-art` is
   overflow:hidden), so the extra width crops off the sides instead of
   forcing the card wider — which is the whole trick: the graphic gets
   closer, and what falls off the edge was never the point of it.

   Dialled back to 1 from 1.16/1.22, via 1.06/1.10: at any of those the mocks
   read as cropped rather than close, and the sides being cut were carrying
   real detail. The zoom hooks stay because the mechanism is still the right
   one if a future mock is drawn too small — it just isn't needed today. */
.sl-kit .b-art{padding:22px 14px 0}
.sl-kit .b-art .b-shot{zoom:1}
.sl-kit .b-art--center .b-shot{zoom:1}
@media (max-width:900px){
  /* one card per row is already close enough — zooming again would crop
     the mock down to a corner of itself */
  .sl-kit .b-art .b-shot,.sl-kit .b-art--center .b-shot{zoom:1}
  .sl-kit .b-art{padding:22px 18px 0}
}
.sl-kit .b-art .b-shot{position:relative;width:100%;background:#fff;border:1px solid var(--line-2);border-bottom:none;border-radius:12px 12px 0 0;overflow:hidden;box-shadow:0 6px 18px -16px rgba(24,20,60,.11),0 1px 2px -1px rgba(24,20,60,.04);transition:transform .5s cubic-bezier(.22,.8,.3,1)}
/* one tint family — the tint sits ONLY behind the graphic, as a soft bloom */
.sl-kit .wash-violet .kit-art{background:radial-gradient(85% 105% at 14% 0%,rgba(124,58,237,.17),transparent 66%),radial-gradient(80% 100% at 92% 100%,rgba(11,206,252,.15),transparent 68%),#f8f6ff}
.sl-kit .b-card.wash-violet{background:radial-gradient(85% 105% at 14% 0%,rgba(124,58,237,.17),transparent 66%),radial-gradient(80% 100% at 92% 100%,rgba(11,206,252,.15),transparent 68%),#f8f6ff}
.sl-kit .wash-pink .kit-art{background:radial-gradient(85% 105% at 88% 0%,rgba(255,2,106,.12),transparent 66%),radial-gradient(82% 100% at 8% 100%,rgba(124,58,237,.17),transparent 68%),#f9f5ff}
.sl-kit .b-card.wash-pink{background:radial-gradient(85% 105% at 88% 0%,rgba(255,2,106,.12),transparent 66%),radial-gradient(82% 100% at 8% 100%,rgba(124,58,237,.17),transparent 68%),#f9f5ff}
.sl-kit .wash-orange .kit-art{background:radial-gradient(85% 105% at 12% 0%,rgba(255,146,67,.15),transparent 66%),radial-gradient(82% 100% at 92% 100%,rgba(124,58,237,.15),transparent 68%),#faf6ff}
.sl-kit .b-card.wash-orange{background:radial-gradient(85% 105% at 12% 0%,rgba(255,146,67,.15),transparent 66%),radial-gradient(82% 100% at 92% 100%,rgba(124,58,237,.15),transparent 68%),#faf6ff}
.sl-kit .wash-mint .kit-art{background:radial-gradient(85% 105% at 88% 0%,rgba(16,185,129,.16),transparent 66%),radial-gradient(80% 100% at 10% 100%,rgba(11,206,252,.15),transparent 68%),#f2fdf8}
.sl-kit .b-card.wash-mint{background:radial-gradient(85% 105% at 88% 0%,rgba(16,185,129,.16),transparent 66%),radial-gradient(80% 100% at 10% 100%,rgba(11,206,252,.15),transparent 68%),#f2fdf8}
.sl-kit .wash-plum .kit-art{background:radial-gradient(85% 105% at 14% 0%,rgba(217,70,239,.13),transparent 66%),radial-gradient(80% 100% at 92% 100%,rgba(99,102,241,.16),transparent 68%),#fbf5ff}
.sl-kit .b-card.wash-plum{background:radial-gradient(85% 105% at 14% 0%,rgba(217,70,239,.13),transparent 66%),radial-gradient(80% 100% at 92% 100%,rgba(99,102,241,.16),transparent 68%),#fbf5ff}
.sl-kit .wash-cyan .kit-art{background:radial-gradient(85% 105% at 14% 0%,rgba(11,206,252,.18),transparent 66%),radial-gradient(80% 100% at 92% 100%,rgba(16,185,129,.14),transparent 68%),#f4fbff}
.sl-kit .b-card.wash-cyan{background:radial-gradient(85% 105% at 14% 0%,rgba(11,206,252,.18),transparent 66%),radial-gradient(80% 100% at 92% 100%,rgba(16,185,129,.14),transparent 68%),#f4fbff}
.sl-kit .b-shot .rowline{font-size:11.5px;padding:10px 14px}
.sl-kit .b-shot .art-head{padding:12px 14px;font-size:12px}
/* gradient aura behind every feature mockup */
.sl-kit .art{position:relative}
/* the product section sits on one continuous brand wash */
.sl-kit #cockpit{background:
  linear-gradient(180deg,#fff 0%,rgba(255,255,255,0) 30%),
  linear-gradient(0deg,#fff 0%,#fff 10%,rgba(255,255,255,.88) 24%,rgba(255,255,255,.55) 40%,rgba(255,255,255,.2) 54%,rgba(255,255,255,0) 66%),
  radial-gradient(58% 38% at 86% 20%,rgba(11,206,252,.20),transparent 68%),
  radial-gradient(52% 42% at 4% 38%,rgba(124,58,237,.18),transparent 68%),
  radial-gradient(56% 42% at 94% 60%,rgba(255,2,106,.13),transparent 68%),
  radial-gradient(52% 42% at 12% 84%,rgba(255,146,67,.16),transparent 68%),
  linear-gradient(180deg,#fdfdff,#ffffff);
  padding-top:var(--s-7);
  padding-bottom:var(--s-7)}
/* pillars */
.sl-kit .pillars{background:#fff}
.sl-kit .pillar-grid{margin-top:var(--s-6);display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gut)}
.sl-kit .pillar{display:flex;flex-direction:column;background:var(--paper-2);border:none;border-radius:var(--r-lg);padding:var(--s-4);box-shadow:var(--e1);transition:box-shadow .25s ease,transform .25s ease}
.sl-kit .pillar h3{min-height:2.5em;display:flex;align-items:flex-start}
.sl-kit .pillar .card-art{height:88px;margin:var(--s-3) 0 var(--s-3);padding:8px 10px}
.sl-kit .pillar p{min-height:5.2em}
.sl-kit .pillar ul{margin-top:auto;padding-top:var(--s-2)}
.sl-kit .pillar .num{font-family:var(--font-mono);font-weight:500;font-size:11px;letter-spacing:.1em;color:var(--violet)}
.sl-kit .pillar h3{margin-top:var(--s-2);font-size:19px;font-weight: 600}
.sl-kit .pillar p{margin-top:0;font-size:14px;line-height:1.65;color:var(--txt-soft)}
.sl-kit .pillar ul{margin-top:14px;display:grid;gap:8px}
.sl-kit .pillar li{list-style:none;display:flex;gap:9px;font-size:13px;line-height:1.45;color:var(--txt)}
.sl-kit .mini-tick{flex:none;margin-top:3px;width:15px;height:15px;border-radius:99px;background:#f1ecff;border:1px solid #e2d8ff;display:grid;place-items:center}
.sl-kit .mini-tick svg path{stroke:var(--violet-3)}
.sl-kit .mini-tick svg{width:8px;height:8px}

/* feature rows */
/* the cockpit section is an accordion: questions left, the matching mock right */
/* Two surfaces, not one: a soft grey gradient carries the questions, and the
   artwork sits on a pastel block. The mocks are mostly white, so on a white
   card they had no ground to sit on and floated on their own shadow. */
.sl-kit .acc{margin-top:var(--s-5);display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:56px;align-items:stretch;overflow:hidden;background:linear-gradient(158deg,#fcfcfd 0%,#f6f6fa 44%,#eeeef5 100%);border:1px solid #e6e6f0;border-radius:24px;padding:40px 0 40px 44px}
/* 12px between the cards — the rows are separate objects now, so they need
   a real gap; flush, three white blocks read as one panel with lines in it. */
.sl-kit .acc-item+.acc-item{margin-top:12px}
/* Each question is its own white card on the section's wash — the row you
   can click looks like a thing you can click, which a line of text between
   two hairlines never did. The open row's BODY stays on the wash below it,
   so the card is the control and the wash is the content. */
.sl-kit .acc-q{width:100%;display:flex;align-items:center;gap:14px;padding:18px 20px;background:#fff;border:0;border-radius:14px;text-align:left;font:inherit;cursor:pointer;transition:box-shadow .2s ease}
.sl-kit .acc-q:hover{box-shadow:0 2px 8px -5px rgba(24,20,60,.22)}
.sl-kit .acc-q h3{flex:1;margin:0;font-size:18px;font-weight:600;letter-spacing:-.02em;line-height:1.25;color:var(--ink);transition:color .2s ease}
.sl-kit .acc-item.is-open .acc-q h3{color:var(--violet)}
.sl-kit .acc-item.is-open .acc-q h3 .accent{-webkit-text-fill-color:currentColor;background:none;color:inherit}
.sl-kit .acc-x{position:relative;flex:none;width:16px;height:16px}
.sl-kit .acc-x::before,.sl-kit .acc-x::after{content:"";position:absolute;left:50%;top:50%;background:var(--violet);border-radius:2px;transform:translate(-50%,-50%);transition:transform .25s cubic-bezier(.2,.9,.3,1),opacity .2s ease}
.sl-kit .acc-x::before{width:14px;height:2px}
.sl-kit .acc-x::after{width:2px;height:14px}
.sl-kit .acc-item.is-open .acc-x::after{transform:translate(-50%,-50%) rotate(90deg);opacity:0}
/* minmax(0, Xfr), not plain Xfr. A grid row's automatic MINIMUM is the
   item's min-content size, so `0fr` still reserved the body's own padding
   — 26px under every closed row, which read as a gap between the tabs. */
.sl-kit .acc-body{display:grid;grid-template-rows:minmax(0,0fr);opacity:0;transition:grid-template-rows .26s cubic-bezier(.2,.9,.3,1),opacity .16s linear}
.sl-kit .acc-item.is-open .acc-body{grid-template-rows:minmax(0,1fr);opacity:1}
.sl-kit .acc-body>div{overflow:hidden;min-height:0}
/* The rows were spaced for a two-line body. With a paragraph, five ticks
   and a link in one panel it read as a wall — the open row needs to breathe
   more than the closed ones, not the same. */
.sl-kit .acc-body .checks{margin-top:22px;gap:14px;margin-bottom:30px}
.sl-kit .acc-body .body{max-width:52ch}
.sl-kit .acc-body>div>*:last-child{margin-bottom:6px}
.sl-kit .acc-body .body{margin-top:0;font-size:15px;line-height:1.45;color:#666}
.sl-kit .acc-body>div{padding:18px 4px 8px}
.sl-kit .acc-body .checks li{font-size:15px;color:#666}
/* Flush right, top and bottom — a pastel panel that IS the card's right
   half, not a tile floating inside it. The card clips the corners, so the
   fill needs no radius of its own. The colour is a variable the kit's JS
   re-points on every row change (a palette, not one purple forever). */
.sl-kit .acc-art{position:relative;display:grid;margin:-40px 0;padding:40px;background:radial-gradient(74% 56% at 50% 44%,rgba(255,255,255,.78),rgba(255,255,255,0) 74%),var(--acc-fill,#e4f2ec);transition:background-color .5s ease}
/* every panel shares one grid area, so a SHORT mock in a panel sized by a
   tall one sat at the top with dead space under it — centre it in the area */
.sl-kit .acc-panel{grid-area:1/1;display:grid;align-content:center;opacity:0;visibility:hidden;transform:translateY(12px) scale(.99);
  transition:opacity .3s ease,transform .38s cubic-bezier(.22,.8,.3,1),visibility .3s}
.sl-kit .acc-panel.is-open{opacity:1;visibility:visible;transform:none}
/* the right-hand mock is shorter than the questions column — give the art a
   floor close to the list height and centre the mock in it, so the two sides
   read as one balanced panel rather than a tall column beside a short card */
/* No min-height: every .acc-panel shares grid-area 1/1 and hidden ones keep
   their box (visibility, not display), so the art column is already a constant
   height = the tallest panel. A floor above that is dead space at the bottom
   of the card, which is what it used to be. */
@media (min-width:961px){.sl-kit .acc-art{align-content:center}}
@media (min-width:961px) and (max-width:1200px){
  .sl-kit .acc{gap:32px;padding:36px 0 36px 36px;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr)}
  .sl-kit .acc-art{margin:-36px 0;padding:30px}
  .sl-kit .acc-q h3{font-size:clamp(15.5px,1.7vw,17px)}
}
@media (min-width:1201px){
  .sl-kit .acc{margin-left:-40px;margin-right:-40px}
}
@media (max-width:960px){
  .sl-kit .acc{grid-template-columns:1fr;gap:22px;padding:0 0 22px;border-radius:var(--r-lg)}
  /* stacked: the fill becomes the card's top band, still flush */
  .sl-kit .acc-art{position:relative;order:-1;min-width:0;top:auto;margin:0;padding:18px}
  .sl-kit .acc-list{padding:0 18px}
  .sl-kit .acc-panel,.sl-kit .acc-panel>*{min-width:0;max-width:100%}
  .sl-kit .acc-panel{position:absolute;inset:0 0 auto 0}
  .sl-kit .acc-panel.is-open{position:relative;inset:auto}
  .sl-kit .acc-q h3{font-size:18px}
}
.sl-kit .feature{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:88px;align-items:center;padding:var(--s-6) 0}
.sl-kit .feature .art{width:100%;max-width:480px;justify-self:center}
@media (min-width:961px){ .sl-kit .feature .art{justify-self:end}.sl-kit .feature.flip .art{justify-self:start}}
.sl-kit .feature .rowline{font-size:13px;padding:13px 18px}
.sl-kit .feature .art-head{padding:15px 18px;font-size:13px}
.sl-kit .feature.flip .art{order:-1}
.sl-kit .feature h3{font-size:24px;font-weight:600;line-height:1.22}
.sl-kit .feature .body{margin-top:18px;font-size:15px;line-height:1.5;color:var(--txt-soft);max-width:54ch}
/* `minmax(0,1fr)`, not the default `auto`: an auto track takes its floor
   from the item's min-content, and a flex row that can't wrap reports its
   whole line as min-content — so one long tick sized the track to 671px
   inside a 479px column and the text ran out of the card. */
.sl-kit .checks{margin-top:26px;display:grid;grid-template-columns:minmax(0,1fr);gap:12px}
/* `white-space: nowrap` used to hold these on one line, which is right for
   a short tick ("100+ B2B features out of the box") and catastrophic for a
   long one — /how-it-works has bullets that ran 1,539px inside a 479px
   column and simply overflowed the card. Wrapping is the correct default;
   the tick stays top-aligned so a two-line item hangs under its own text
   rather than centring against it. */
/* NOT a flex row. A flex container blockifies every child, so the links
   inside a tick ("…such as Brightpearl, Patchworks, Katana…") each became
   their own flex item and the sentence came apart, commas stranded on
   their own lines. A block with a hanging indent keeps the text as text —
   inline links, normal wrapping — and the tick is absolutely placed in the
   indent it leaves. */
.sl-kit .checks li{list-style:none;position:relative;display:block;padding-left:30px;font-size:15px;line-height:1.45;color:var(--txt-soft)}
.sl-kit .checks li .tick{position:absolute;left:0;top:2px;margin-top:0}
.sl-kit .feature .more{display:inline-flex;align-items:center;gap:6px;margin-top:var(--s-4);font-weight:500;font-size:14px;color:var(--violet)}
.sl-kit .feature .more span{transition:transform .2s ease;display:inline-block}
.sl-kit .feature .more:hover span{transform:translateX(3px)}

.sl-kit .art{position:relative}
.sl-kit .pthumb{width:26px;height:26px;border-radius:7px;flex:none;display:grid;place-items:center;overflow:hidden;box-shadow:inset 0 0 0 1px rgba(255,255,255,.35)}
.sl-kit .pthumb svg{width:100%;height:100%}
.sl-kit .art-card .grp{padding:7px 16px 4px;font-size:10px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--txt-faint);background:#fbfbfe;border-top:1px solid #f2f3f8;border-bottom:1px solid #f6f7fb}
.sl-kit .art-card .grp em{font-style:normal;font-weight:500;letter-spacing:.02em;text-transform:none;font-size:10.5px;color:#aab1c4}
.sl-kit .art-card .tag.grey{background:#f1f2f7;color:#6b7280}
.sl-kit .agebar{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;padding:11px 16px 13px}
.sl-kit .agebar i{display:block;font-style:normal}
.sl-kit .agebar b{display:block;font-size:10px;font-weight:500;color:var(--txt-faint)}
.sl-kit .agebar span{display:block;margin-top:1px;font-family:var(--font-body);font-weight: 600;font-size:13px;color:var(--ink)}
.sl-kit .agebar em{display:block;margin-top:5px;height:4px;border-radius:99px;min-width:14%}
.sl-kit .art-card{background:#fff;border-radius:var(--r-sm);border:1px solid #eee;overflow:hidden;position:relative}
@property --plp-orbit{syntax:'<angle>';initial-value:0deg;inherits:false}
.sl-kit .art-card::after,.sl-kit .mock-window::after{content:"";position:absolute;inset:0;border-radius:inherit;padding:1.5px;pointer-events:none;z-index:5;
  background:conic-gradient(from var(--plp-orbit),transparent 0deg 318deg,rgba(124,58,237,.75) 342deg,rgba(11,206,252,.9) 352deg,transparent 360deg);
  -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  animation:plp-orbit 5.5s linear infinite}
.sl-kit .mock-window::after{animation-duration:7s}
@keyframes plp-orbit{to{--plp-orbit:360deg}}

.sl-kit .art-head{display:flex;align-items:center;justify-content:space-between;padding:13px 16px;border-bottom:1px solid var(--line);font-size:12.5px;font-weight:500;color:var(--ink)}
.sl-kit .seg{display:inline-flex;gap:2px;background:#eef0f8;border-radius:var(--r-sm);padding:2px}
.sl-kit .seg i{font-style:normal;font-size:10.5px;font-weight:500;padding:4px 9px;border-radius:6px;color:var(--txt-faint)}
.sl-kit .seg i.on{background:#fff;color:var(--ink);border:1px solid var(--line)}
.sl-kit .rowline{display:flex;align-items:center;gap:11px;padding:11px 16px;border-bottom:1px solid #f0f1f8;font-size:12.5px}
.sl-kit .rowline:last-child{border-bottom:none}
.sl-kit .avatar{flex:none;width:26px;height:26px;border-radius:var(--r-sm);display:grid;place-items:center;color:#fff;font-size:10px;font-weight: 600;font-family:var(--font-body)}
.sl-kit .rowline .rn{font-weight:500;color:var(--ink)}
.sl-kit .rowline .rs{color:var(--txt-faint);font-size:11px;margin-top:1px}
.sl-kit .rowline .tag{margin-left:auto;font-size:9.5px;font-weight:500;letter-spacing:.03em;border-radius:99px;padding:3px 8px;white-space:nowrap}
.sl-kit .tag.rose{background:#fde4e9;color:#c02455}.sl-kit .tag.amber{background:#fff2e2;color:#b45309}.sl-kit .tag.green{background:var(--good-soft);color:var(--good)}.sl-kit .tag.violet{background:#efe7ff;color:var(--violet-3)}
.sl-kit .rowline .val{font-family:var(--font-body);font-weight: 600;color:var(--ink);font-size:13px}
.sl-kit .qty{display:inline-flex;align-items:center;gap:9px;border:1px solid var(--line);border-radius:8px;padding:4px 9px;font-size:11px;color:var(--txt-faint);margin-left:auto;flex:none}
.sl-kit .qty b{color:var(--ink);font-family:var(--font-body);font-weight: 600;font-size:12px}
.sl-kit .cart-cta{display:block;margin:10px 14px 12px;text-align:center;background:var(--violet);color:#fff;font-weight:500;font-size:12.5px;border-radius:9px;padding:9px 0}

/* sparkie chat mock */
.sl-kit .chat{padding:16px;display:grid;gap:11px;background:linear-gradient(180deg,#fbfbfe,#f6f4fe)}
.sl-kit .msg{max-width:86%;font-size:12.5px;line-height:1.45;border-radius:var(--r-md);padding:10px 13px}
.sl-kit .msg.user{justify-self:end;background:var(--ink);color:#fff;border-bottom-right-radius:4px}
.sl-kit .msg.ai{background:#fff;border:1px solid #e6dcff;border-bottom-left-radius:4px;color:var(--txt)}
.sl-kit .msg.ai b{color:var(--ink)}
.sl-kit .actons{display:flex;gap:7px;flex-wrap:wrap;margin-top:9px}
.sl-kit .acton{font-size:10.5px;font-weight:500;color:var(--violet-3);background:#efe7ff;border-radius:99px;padding:4.5px 10px}
.sl-kit .typing{display:inline-flex;gap:4px;padding:4px 2px}
.sl-kit .typing-label{margin-left:9px;font-size:12.5px;color:#8b93b8;vertical-align:1px}
.sl-kit .typing i{width:5px;height:5px;border-radius:99px;background:#b7a5ec;animation:plp-tp 1.2s ease-in-out infinite}
.sl-kit .typing i:nth-child(2){animation-delay:.15s}.sl-kit .typing i:nth-child(3){animation-delay:.3s}
/* ── the conversation plays itself ──────────────────────────────────────────
   Each turn waits its slot, slides in, and holds; the answer reveals line by
   line (a clip-path wipe, so no JS and no layout thrash) and its action pills
   pop after it. One 16s loop, restarted only on reveal. */
.sl-kit .chat{--turn:16s}
.sl-kit .chat .msg{opacity:0;animation:plp-turnIn .38s cubic-bezier(.22,.8,.3,1) forwards}
.sl-kit .chat .msg:nth-child(1){animation-delay:.15s}
.sl-kit .chat .msg:nth-child(2){animation-delay:.85s}
.sl-kit .chat .msg:nth-child(3){animation-delay:3.5s}
.sl-kit .chat .msg:nth-child(4){animation-delay:4.2s}
@keyframes plp-turnIn{from{opacity:0;transform:translateY(10px) scale(.98)}to{opacity:1;transform:none}}
/* the answer body wipes in like it's being written */
.sl-kit .chat .msg.ai .ai-body{display:block;clip-path:inset(0 0 100% 0);animation:plp-write 1.5s steps(26,end) 1.15s forwards}
@keyframes plp-write{to{clip-path:inset(0 0 -2% 0)}}
.sl-kit .chat .actons .acton{opacity:0;transform:translateY(5px);animation:plp-actonIn .35s cubic-bezier(.34,1.56,.64,1) forwards}
.sl-kit .chat .actons .acton:nth-child(1){animation-delay:2.75s}
.sl-kit .chat .actons .acton:nth-child(2){animation-delay:2.88s}
.sl-kit .chat .actons .acton:nth-child(3){animation-delay:3.01s}
@keyframes plp-actonIn{to{opacity:1;transform:none}}
/* the caret blinks while Sparkie is composing */
.sl-kit .chat .msg.ai .ai-body::after{content:"";display:inline-block;width:2px;height:1em;margin-left:2px;vertical-align:-2px;background:var(--violet-soft);animation:plp-caret .5s steps(2) 1.15s 3,plp-caretOut .1s 2.65s forwards}
@keyframes plp-caret{50%{opacity:0}}
@keyframes plp-caretOut{to{opacity:0;width:0;margin:0}}
@keyframes plp-tp{40%{transform:translateY(-4px);opacity:.5}}

/* calendar mock */
.sl-kit .cal{padding:12px}
.sl-kit .cal-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden;background:#fff}
.sl-kit .cal-grid .dh{min-width:0;overflow:hidden;background:#f6f7fb;font-size:8.5px;font-weight: 600;letter-spacing:.08em;color:var(--txt-faint);padding:6px 7px;border-bottom:1px solid var(--line)}
.sl-kit .cal-cell{min-width:0;overflow:hidden;min-height:58px;border-right:1px solid #f0f1f8;border-bottom:1px solid #f0f1f8;padding:5px;font-size:9px;color:var(--txt-faint)}
.sl-kit .cal-cell .chip{margin-top:3px;border-radius:6px;font-size:8.5px;font-weight:500;padding:2.5px 5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sl-kit .chip.rose{background:#fde4e9;color:#c02455}.sl-kit .chip.amber{background:#fff2e2;color:#b45309}.sl-kit .chip.violet{background:#efe7ff;color:var(--violet-3)}
.sl-kit .cal-cell.today{box-shadow:inset 0 0 0 2px rgba(124,58,237,.55);border-radius:2px}
.sl-kit .cal-cell.today b{color:var(--violet)}

/* for sales teams band */
/* the rest-of-the-toolkit grid + the FAQ */
.sl-kit .kit{margin-top:var(--s-6);display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gut)}
.sl-kit .kit-c{position:relative;background:#fff;border:1px solid #ececf4;border-radius:var(--r-lg);overflow:hidden;display:flex;flex-direction:column;transition:border-color .35s ease,filter .35s ease}
.sl-kit .kit-c:hover{border-color:#e2ddf6}
/* the same masked-conic arc the Sparkie cards run, dialled down for white cards
   and staggered so the six never orbit in lockstep */
.sl-kit .kit-c::after{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;z-index:2;
  background:conic-gradient(from var(--plp-orbit),transparent 0deg 306deg,rgba(124,58,237,.42) 338deg,rgba(11,206,252,.55) 351deg,transparent 360deg);
  -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  animation:plp-orbit 7.5s linear infinite}
.sl-kit .kit-c:nth-child(2)::after{animation-delay:-1.25s}
.sl-kit .kit-c:nth-child(3)::after{animation-delay:-2.5s}
.sl-kit .kit-c:nth-child(4)::after{animation-delay:-3.75s}
.sl-kit .kit-c:nth-child(5)::after{animation-delay:-5s}
.sl-kit .kit-c:nth-child(6)::after{animation-delay:-6.25s}
.sl-kit .kit-c .ic{margin:24px 24px 0;width:34px;height:34px;border-radius:9px;background:#f1ecff;border:1px solid #e2d8ff;display:grid;place-items:center;color:var(--violet)}
/* each card's icon takes its own card's tint, so the row reads as a set */
.sl-kit .wash-violet .ic{background:#f1ecff;border-color:#e2d8ff;color:var(--violet-3)}
.sl-kit .wash-pink .ic{background:#fdeaf3;border-color:#fad3e5;color:#c02455}
.sl-kit .wash-orange .ic{background:#fff1e2;border-color:#fbdcbc;color:#b45309}
.sl-kit .wash-mint .ic{background:#e2f8ee;border-color:#c6efdc;color:var(--good)}
.sl-kit .wash-cyan .ic{background:#e2f4fd;border-color:#c4e7fa;color:#0369a1}
.sl-kit .wash-plum .ic{background:#f8e9fd;border-color:#eed2f9;color:#a21caf}
.sl-kit .kit-c .ic svg{width:17px;height:17px}
.sl-kit .kit-c h3{margin:12px 24px 0;font-size:16px;font-weight:500}
.sl-kit .kit-c p{margin:7px 24px 0;font-size:13.5px;line-height:1.45;color:var(--txt-soft)}
/* the mini mock, on the same bloom the bento uses */
.sl-kit .kit-art{position:relative;margin:22px 0 0;padding:20px 20px 0;flex:1;display:flex;align-items:flex-end;justify-content:center;overflow:hidden}
.sl-kit .kit-c:hover{filter:saturate(1.08)}
.sl-kit .kit-shot{width:100%;background:#fff;border:1px solid var(--line-2);border-bottom:none;border-radius:11px 11px 0 0;overflow:hidden;box-shadow:0 16px 34px -20px rgba(24,20,60,.3),0 2px 6px -2px rgba(24,20,60,.08);
  opacity:0;transform:translateY(20px) scale(.97);transition:opacity .6s ease,transform .55s cubic-bezier(.22,.8,.3,1),box-shadow .45s ease}
.sl-kit .kit-c.in .kit-shot{opacity:1;transform:none}
.sl-kit .kit-c.in:hover .kit-shot{transform:scale(1.04);transform-origin:bottom center;box-shadow:0 26px 52px -24px rgba(24,20,60,.38),0 2px 6px -2px rgba(24,20,60,.08)}
.sl-kit .kit-shot .kh{display:flex;align-items:center;gap:6px;padding:9px 12px;border-bottom:1px solid #f2f3f8;font-size:10.5px;font-weight:500;color:var(--txt-faint);letter-spacing:.02em}
.sl-kit .kit-shot .kr{display:flex;align-items:center;gap:8px;padding:8px 12px;border-bottom:1px solid #f6f7fb;font-size:11px;color:var(--ink)}
.sl-kit .kit-shot .kr:last-child{border-bottom:none}
.sl-kit .kit-shot .kr .kn{font-weight:500}
.sl-kit .kit-shot .kr .ks{font-size:10px;color:var(--txt-faint)}
.sl-kit .kit-shot .kt{margin-left:auto;font-size:9px;font-weight:700;letter-spacing:.04em;padding:2px 6px;border-radius:5px;white-space:nowrap}
.sl-kit .kit-shot .kt.violet{background:#efe7ff;color:var(--violet-3)}
.sl-kit .kit-shot .kt.green{background:#e3f6ec;color:var(--good)}
.sl-kit .kit-shot .kt.amber{background:#fff2e2;color:#b45309}
.sl-kit .kit-shot .kt.rose{background:#fde4e9;color:#c02455}
.sl-kit .kit-shot .kt.grey{background:#f1f2f7;color:#6b7280}
/* kanban mini */
.sl-kit .kban{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;padding:10px 12px 12px}
.sl-kit .kban>div{background:#f8f9fd;border:1px solid #f0f1f7;border-radius:7px;padding:6px}
.sl-kit .kban .kbh{font-size:8.5px;font-weight:700;letter-spacing:.03em;color:var(--txt-faint);margin-bottom:5px}
.sl-kit .kban i{display:block;border-radius:5px;background:#fff;border:1px solid #eceef5;margin-bottom:4px;font-style:normal;font-size:8.5px;font-weight:500;color:var(--ink);padding:5px 6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sl-kit .kban i:last-child{margin-bottom:0}
.sl-kit .kban-tall i{padding:9px 8px;font-size:9.5px;margin-bottom:6px}
.sl-kit .kban-tall>div{padding:8px}
.sl-kit .kban-tall .kbh{font-size:9px;margin-bottom:7px}
.sl-kit .kban i.v{background:linear-gradient(90deg,#efe7ff,#fff);border-color:#e4dbfb}
.sl-kit .kban i.g{background:linear-gradient(90deg,#e3f6ec,#fff);border-color:#d5efe0}
/* checkbox tick */
.sl-kit .kit-shot .kbox{width:13px;height:13px;border-radius:4px;border:1.5px solid #d7d9e4;flex:none}
.sl-kit .kit-shot .kbox.on{background:var(--violet);border-color:var(--violet);position:relative}
.sl-kit .kit-shot .kbox.on::after{content:"";position:absolute;left:3.5px;top:1px;width:3.5px;height:7px;border:solid #fff;border-width:0 1.6px 1.6px 0;transform:rotate(42deg)}
.sl-kit .kit-shot .done .kn{color:var(--txt-faint);text-decoration:line-through}
/* meter bar */
.sl-kit .kit-shot .kbar{margin-left:auto;width:52px;height:5px;border-radius:99px;background:#eff0f6;overflow:hidden;flex:none}
.sl-kit .kit-shot .kbar b{display:block;height:100%;border-radius:99px}
/* search field */
.sl-kit .kit-shot .kfind{display:flex;align-items:center;gap:7px;padding:10px 12px;border-bottom:1px solid #f2f3f8;font-size:11px;color:var(--ink)}
.sl-kit .kit-shot .kfind .cursor{width:1.5px;height:12px;background:var(--violet);animation:plp-caret 1.1s steps(1,end) infinite}
.sl-kit .kit-shot .kkbd{margin-left:auto;font-size:8.5px;font-weight:700;color:var(--txt-faint);border:1px solid #e7e9f0;border-radius:4px;padding:1px 5px;background:#fafbfe}
@keyframes plp-caret{0%,50%{opacity:1}51%,100%{opacity:0}}
/* saved-view chips */
.sl-kit .kit-shot .kchips{display:flex;flex-wrap:wrap;gap:5px;padding:10px 12px}
.sl-kit .kit-shot .kchips span{font-size:9.5px;font-weight:500;padding:3px 7px;border-radius:99px;background:#f4f5fa;color:var(--txt-soft);border:1px solid #edeef5}
.sl-kit .kit-shot .kchips span.on{background:#efe7ff;color:var(--violet-3);border-color:#e4dbfb}
/* the FAQ sits on a subtle grey field so it reads as one block (both pages) */
.sl-kit #faq,.sl-kit #faqs{padding-bottom:var(--s-5)}
.sl-kit .faq{margin-top:var(--s-3);display:block;max-width:none}
/* each question is its own soft-grey card on the white section, not a hairline row */
/* No padding on the DETAILS — the summary carries it, so the whole row is
   the click target rather than just the sentence. */
.sl-kit .faq details{background:#f6f7fb;border:0;border-radius:12px;padding:0;margin-bottom:10px;transition:background .2s ease}
.sl-kit .faq details:hover{background:#f1f2f8}
.sl-kit .faq details.is-open{background:#f1f2f8}
.sl-kit .faq summary{list-style:none;cursor:pointer;display:flex;align-items:flex-start;gap:10px;padding:15px 20px;font-size:16.5px;font-weight:500;color:var(--ink)}
.sl-kit .faq summary::-webkit-details-marker{display:none}
.sl-kit .faq summary::after{content:"+";margin-left:auto;color:var(--violet);font-weight:500;font-size:18px;line-height:1;transition:transform .2s ease}
/* minmax(0,Xfr), not plain Xfr: a grid row's automatic minimum is the item's
   min-content, so with padding on the body a closed row still reserved it. */
.sl-kit .faq .faq-body{display:grid;grid-template-rows:minmax(0,0fr);opacity:0;transition:grid-template-rows .2s cubic-bezier(.2,.9,.3,1),opacity .13s linear}
.sl-kit .faq details.is-open .faq-body{grid-template-rows:minmax(0,1fr);opacity:1}
.sl-kit .faq .faq-body>*{overflow:hidden;min-height:0;padding:0 20px 16px}
.sl-kit .faq summary::after{transition:transform .2s cubic-bezier(.2,.9,.3,1)}
.sl-kit .faq details.is-open summary::after{transform:rotate(45deg)}
.sl-kit .faq summary{transition:color .2s ease}
.sl-kit .faq details.is-open summary{color:var(--violet)}
.sl-kit .faq p{margin-top:9px;font-size:15px;line-height:1.5;color:var(--txt-soft);max-width:none;padding-right:44px}
@media (max-width:960px){.sl-kit .kit{grid-template-columns:1fr}}
.sl-kit #cockpit{padding-bottom:calc(var(--s-8) + var(--s-4))}
.sl-kit .team-band{background:#fff;padding-top:calc(var(--s-8) + var(--s-4));padding-bottom:var(--s-6)}
.sl-kit .team-band .feature{border:1px solid #e2e2ed;border-radius:var(--r-lg);padding:40px 44px;margin:var(--s-4) 0}
@media (max-width:960px){.sl-kit .team-band .feature{padding:28px 22px;border-radius:var(--r-lg)}}
.sl-kit .team-grid{margin-top:var(--s-4);display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
.sl-kit .team-card{background:#fff;border:1px solid #e2e2ed;border-radius:var(--r-lg);padding:var(--s-4)}
.sl-kit .team-card .ic{width:36px;height:36px;border-radius:var(--r-sm);background:#f1ecff;border:1px solid #e2d8ff;display:grid;place-items:center;color:var(--violet)}
/* each rep-kit card takes its own tint, matching the toolkit grid */
.sl-kit .team-card:nth-child(1) .ic{background:#f1ecff;border-color:#e2d8ff;color:var(--violet-3)}
.sl-kit .team-card:nth-child(2) .ic{background:#e2f8ee;border-color:#c6efdc;color:var(--good)}
.sl-kit .team-card:nth-child(3) .ic{background:#e2f4fd;border-color:#c4e7fa;color:#0369a1}
.sl-kit .team-card:nth-child(4) .ic{background:#fff1e2;border-color:#fbdcbc;color:#b45309}
.sl-kit .team-card .ic svg{width:18px;height:18px}
.sl-kit .team-card h3{margin-top:12px;font-size:17px;font-weight:600}
.sl-kit .team-card p{margin-top:8px;font-size:13.5px;line-height:1.45;color:var(--txt-soft)}
.sl-kit .commish{display:flex;align-items:center;gap:10px;padding:12px 16px;background:#f4fbf7;border-top:1px solid #dcf0e4;font-size:11.5px;color:var(--good);font-weight:500}
.sl-kit .commish .bar{flex:1;height:6px;border-radius:99px;background:#dcf0e4;overflow:hidden}
.sl-kit .commish .bar i{display:block;height:100%;width:64%;border-radius:99px;background:linear-gradient(90deg,#10b981,var(--good))}

/* dark AI band */
.sl-kit .ai-band{background:
  radial-gradient(820px 420px at 20% 0%,rgba(103,30,243,.4),transparent 60%),
  radial-gradient(660px 400px at 92% 100%,rgba(255,2,106,.16),transparent 55%),
  linear-gradient(180deg,var(--navy),#141a41);
  padding-top:calc(var(--s-8) + var(--s-6));
  padding-bottom:calc(var(--s-8) + var(--s-4))}
.sl-kit .ai-band{position:relative}
.sl-kit .ai-band::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:repeating-radial-gradient(circle at 84% 16%,transparent 0 78px,rgba(255,255,255,.05) 78px 79.5px);
  -webkit-mask:radial-gradient(130% 130% at 84% 16%,#000 0%,rgba(0,0,0,.5) 40%,transparent 72%);
  mask:radial-gradient(130% 130% at 84% 16%,#000 0%,rgba(0,0,0,.5) 40%,transparent 72%)}
/* the two dark bands float as rounded panels inset from the edges — desktop only;
   on phones they run full-bleed with square corners */
.sl-kit .ai-band,.sl-kit .cta{border-radius:32px;margin-left:clamp(10px,2vw,28px);margin-right:clamp(10px,2vw,28px);overflow:hidden}
@media (max-width:960px){.sl-kit .ai-band,.sl-kit .cta{border-radius:0;margin-left:0;margin-right:0}}
.sl-kit .ai-band .wrap{position:relative;z-index:2}
.sl-kit .ai-wm{position:absolute;left:0;right:0;bottom:-3vw;display:flex;justify-content:center;pointer-events:none;z-index:0;
  font-family:var(--font-display);font-weight: 600;font-size:clamp(140px,21vw,330px);
  letter-spacing:-.03em;line-height:1;color:transparent;-webkit-text-stroke:1.5px rgba(255,255,255,.06);
  white-space:nowrap;user-select:none}
.sl-kit .ai-band .kicker{color:var(--cyan)}
.sl-kit .ai-band .sec-head{position:relative;max-width:1000px;padding-right:250px}
.sl-kit .sparkie-hero{position:absolute;top:4px;right:16px;width:190px;height:190px;pointer-events:none;animation:plp-spFloat 7s ease-in-out infinite}
.sl-kit .sparkie-hero .sp-glow{position:absolute;inset:-34%;background:radial-gradient(50% 50% at 50% 50%,rgba(124,58,237,.32),transparent 70%);border-radius:99px}
.sl-kit .sparkie-hero svg{position:relative;width:100%;height:100%;filter:drop-shadow(0 18px 34px rgba(0,0,0,.4))}
.sl-kit .sparkie-hero .sm-eyes{transform-origin:60px 34px;animation:plp-spBlink 4.6s ease-in-out infinite}
@keyframes plp-spFloat{50%{transform:translateY(-12px) rotate(2.5deg)}}
@keyframes plp-spBlink{0%,92%,100%{transform:scaleY(1)}95%{transform:scaleY(.12)}}
@media (max-width:1100px){ .sl-kit .sparkie-hero{display:none}.sl-kit .ai-band .sec-head{max-width:760px;padding-right:0}}
.sl-kit .ai-band h2,.sl-kit .ai-band h3{color:#fff}
.sl-kit .ai-band .lede{color:#b9c0e2}
.sl-kit .ai-grid{margin-top:var(--s-6);display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.sl-kit .ai-card{position:relative;background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.11);border-radius:var(--r-lg);padding:24px 22px;backdrop-filter:blur(4px)}
/* a light arc orbits each card's border — same masked-conic trick as the mockups,
   tuned brighter because it sits on the dark band. Staggered so the three cards
   don't pulse in lockstep. */
.sl-kit .ai-card::after{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;
  background:conic-gradient(from var(--plp-orbit),transparent 0deg 300deg,rgba(167,139,250,.55) 336deg,rgba(11,206,252,.75) 350deg,transparent 360deg);
  -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  animation:plp-orbit 6.5s linear infinite}
.sl-kit .ai-card:nth-child(2)::after{animation-delay:-2.2s}
.sl-kit .ai-card:nth-child(3)::after{animation-delay:-4.4s}
.sl-kit .ai-card .ic{width:38px;height:38px;border-radius:var(--r-sm);background:rgba(167,139,250,.14);border:1px solid rgba(167,139,250,.28);display:grid;place-items:center;color:var(--violet-pale)}
.sl-kit .ai-card .ic svg{width:19px;height:19px}
.sl-kit .ai-card h3{margin-top:14px;font-size:16.5px;font-weight: 600}
.sl-kit .ai-card p{margin-top:13px;font-size:13.5px;line-height:1.45;color:#aeb5d8}

/* dark-mode chat mock inside the ai band */
.sl-kit .ai-band .art-card{background:#12173a;border-color:rgba(255,255,255,.12);box-shadow:0 34px 74px -26px rgba(0,0,0,.65)}
.sl-kit .ai-band .art-head{color:#fff;border-bottom-color:rgba(255,255,255,.1)}
.sl-kit .ai-band .chat{background:linear-gradient(180deg,#10153a,#151b45)}
.sl-kit .ai-band .msg.user{background:linear-gradient(92deg,var(--violet-3),var(--violet-2));color:#fff}
.sl-kit .ai-band .msg.ai{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.14);color:#c9cfeb}
.sl-kit .ai-band .msg.ai b{color:#fff}
.sl-kit .ai-band .acton{background:rgba(167,139,250,.16);color:#cabffd}
.sl-kit .ai-band .typing i{background:#8b7fd9}

/* stats band */
.sl-kit .stats{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s-5);margin-top:var(--s-6)}
.sl-kit .stat{background:transparent;border-radius:0;padding:18px 0 0;text-align:left;border-top:1px solid #d5ddea}
.sl-kit .stat .v{font-family:var(--font-body);font-weight: 600;font-size:38px;letter-spacing:-.03em;color:var(--ink)}
.sl-kit .stat .v em{font-weight:800;font-style:normal;color:var(--violet)}
.sl-kit .stat .k{margin-top:8px;font-size:13.5px;color:var(--txt-soft);line-height:1.45;max-width:26ch}
.sl-kit .stats-note{margin-top:14px;text-align:center;font-size:11.5px;color:var(--txt-faint)}


/* final CTA */
.sl-kit .cta{position:relative;background:
  radial-gradient(760px 400px at 50% -10%,rgba(103,30,243,.5),transparent 65%),
  linear-gradient(180deg,var(--navy),#161c4a);color:#fff;text-align:center;overflow:hidden;
  padding-top:var(--s-8)}
.sl-kit .cta .ribbon{top:auto;bottom:-420px;right:-340px;opacity:.32}
.sl-kit .cta-wm{position:absolute;left:0;right:0;bottom:-0.18em;display:flex;align-items:flex-end;justify-content:center;pointer-events:none;z-index:0;
  font-family:var(--font-display);font-weight: 600;font-size:clamp(140px,23vw,360px);
  letter-spacing:-.03em;line-height:1;color:transparent;-webkit-text-stroke:1.5px rgba(255,255,255,.09);
  white-space:nowrap;user-select:none}
.sl-kit .cta .wrap{position:relative;z-index:2}
.sl-kit .cta-opp{text-align:left;margin-bottom:var(--s-8)}
.sl-kit .cta-opp .statement{color:#fff}
.sl-kit .cta-opp .statement span{color:#aab2d8}
.sl-kit .cta-opp .stat{border-top-color:rgba(255,255,255,.16)}
.sl-kit .cta-opp .stat .v{color:#fff}
.sl-kit .cta-opp .stat .v em{color:var(--violet-soft)}
.sl-kit .cta-opp .stat .k{color:#aab2d8}
.sl-kit .cta h2{color:#fff}
.sl-kit .cta .lede{color:#bdc4e6;margin-inline:auto}
/* one unified field: input + button in a single container, plp-shimmer running the top edge */
.sl-kit .cta-form{position:relative;margin:34px auto 0;display:flex;align-items:center;gap:10px;max-width:540px;
  background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.16);border-radius:16px;
  padding:8px 8px 8px 22px;overflow:hidden;transition:border-color .2s ease,box-shadow .2s ease}
.sl-kit .cta-form::before{content:"";position:absolute;top:0;left:-45%;width:42%;height:1.5px;border-radius:99px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.95),transparent);
  animation:plp-shimmer 3.4s ease-in-out infinite}
@keyframes plp-shimmer{55%,100%{left:103%}}
.sl-kit .cta-form:focus-within{border-color:rgba(167,139,250,.55);box-shadow:0 0 0 4px rgba(124,58,237,.14)}
.sl-kit .cta-form input{flex:1;min-width:0;border:none;background:transparent;color:#fff;font-size:15px;padding:11px 0;font-family:inherit;outline:none}
.sl-kit .cta-form input::placeholder{color:#8b93bd}
.sl-kit .cta-form .btn{border-radius:11px;padding:12px 20px;flex:none}
.sl-kit .cta-sub{margin-top:14px;font-size:12.5px;color:#8f96bd}


/* reveal on scroll */
/* FAIL-OPEN. `.reveal` starts invisible and only `.in` — added by the kit's
   IntersectionObserver — brings it back, so anything that stops that script
   running takes the page's CONTENT with it, not just its animation: a JS
   error, a blocked asset, an old browser, and the visitor gets a blank page
   that looks like an outage. Both rules are therefore gated on `html.kit-js`,
   which sl-kit.js sets the moment it starts. No script, no hiding.
   (`.in` is scoped too, or the gated hide would out-specify it.) */
html.kit-js .sl-kit .reveal{opacity:0;transform:translateY(12px);transition:opacity .55s cubic-bezier(.22,.8,.3,1),transform .55s cubic-bezier(.22,.8,.3,1)}
html.kit-js .sl-kit .reveal.in{opacity:1;transform:none}
/* the mockups perform their own entrance: card rises, rows cascade, tags pop */
.sl-kit .art .art-card{opacity:0;transform:translateY(26px) scale(.975);transition:opacity .6s cubic-bezier(.22,.8,.3,1),transform .6s cubic-bezier(.22,.8,.3,1)}
.sl-kit .art.in .art-card{opacity:1;transform:none}
.sl-kit .art .rowline,.sl-kit .art .cal-cell .chip,.sl-kit .art .commish{opacity:0;transform:translateY(12px);transition:opacity .5s cubic-bezier(.22,.8,.3,1),transform .5s cubic-bezier(.22,.8,.3,1)}
.sl-kit .art.in .rowline,.sl-kit .art.in .cal-cell .chip,.sl-kit .art.in .commish{opacity:1;transform:none}
.sl-kit .art.in .rowline:nth-of-type(1),.sl-kit .art.in .cal-cell .chip{transition-delay:.25s}
.sl-kit .art.in .rowline:nth-of-type(2){transition-delay:.4s}
.sl-kit .art.in .rowline:nth-of-type(3){transition-delay:.55s}
.sl-kit .art.in .rowline:nth-of-type(4),.sl-kit .art.in .commish{transition-delay:.7s}
.sl-kit .art .rowline .tag{opacity:0;transform:scale(.6);transition:opacity .35s ease,transform .35s cubic-bezier(.34,1.56,.64,1)}
.sl-kit .art.in .rowline .tag{opacity:1;transform:none}
.sl-kit .art.in .rowline:nth-of-type(1) .tag{transition-delay:.55s}
.sl-kit .art.in .rowline:nth-of-type(2) .tag{transition-delay:.7s}
.sl-kit .art.in .rowline:nth-of-type(3) .tag{transition-delay:.85s}
.sl-kit .art.in .rowline:nth-of-type(4) .tag{transition-delay:1s}
/* bento shots: the floating panel rises into place on reveal */
.sl-kit .b-card .b-shot{opacity:0;transform:translateY(26px) scale(.97);transition:opacity .6s ease,transform .55s cubic-bezier(.22,.8,.3,1),box-shadow .45s ease}
.sl-kit .b-card.in .b-shot{opacity:1;transform:none}
.sl-kit .b-card.in:hover .b-shot{transform:scale(1.04);transform-origin:bottom center;box-shadow:0 12px 28px -22px rgba(24,20,60,.14),0 1px 2px -1px rgba(24,20,60,.04)}

@media (prefers-reduced-motion:reduce){
  .sl-kit *,.sl-kit{animation:none!important;transition:none!important}
  html.kit-js .sl-kit .reveal,.sl-kit .reveal{opacity:1;transform:none}
  .sl-kit .prob .chart-note,.sl-kit .prob .fill-area,.sl-kit .prob .chart-after,.sl-kit .prob .chart-flag,.sl-kit .prob .mini-head,.sl-kit .prob .card-art .mini-row,.sl-kit .prob .card-art .mini-tag,.sl-kit .prob .mh-r.money{opacity:1;transform:none}
  .sl-kit .prob .plp-draw-line{stroke-dasharray:none;stroke-dashoffset:0}
  .sl-kit .mock-window,.sl-kit .kpi,.sl-kit .sparkiebar,.sl-kit .mock-chart,.sl-kit .h-area,.sl-kit .float,.sl-kit .float-alert,.sl-kit .float-found,.sl-kit .float-reorder{opacity:1;animation:none;transform:none}
  .sl-kit .kpi .t i{transform:none;animation:none}
  .sl-kit .h-line1,.sl-kit .h-line2{stroke-dasharray:none;animation:none}
  .sl-kit .art-card::after,.sl-kit .mock-window::after{display:none}
  .sl-kit .fc-item,.sl-kit .wc-item{transition:none}
  .sl-kit .chat .msg,.sl-kit .chat .actons .acton{opacity:1;transform:none;animation:none}
  .sl-kit .chat .msg.ai .ai-body{clip-path:none;animation:none}
  .sl-kit .chat .msg.ai .ai-body::after{display:none}
}
@media (max-width:960px){
  /* mobile rhythm: flat sections, no diagonal overlap maths, ~half the spacing */
  .sl-kit section{padding:var(--s-6) 0}
  .sl-kit #cockpit,.sl-kit .team-band,.sl-kit .ai-band,.sl-kit .cta{clip-path:none;margin-top:0;padding-top:var(--s-6);padding-bottom:var(--s-6)}
  .sl-kit .ai-band,.sl-kit .cta{padding-top:var(--s-7);padding-bottom:var(--s-7)}
  .sl-kit .feature{padding:36px 0;gap:30px}
  .sl-kit .hero .wrap{grid-template-columns:1fr;padding-bottom:72px}
  .sl-kit .hero-ctas{flex-direction:column;align-items:stretch}
  .sl-kit .hero-ctas .btn-primary{width:100%;justify-content:center}
  .sl-kit .hero-ctas .btn-ghost{justify-content:center}
  .sl-kit .hero-note{display:flex;width:fit-content;max-width:100%;margin-left:auto;margin-right:auto;text-align:left}
  .sl-kit .mock{margin-top:10px;transform:none}
  .sl-kit .hero::after{background:linear-gradient(180deg,rgba(255,255,255,.86) 0%,rgba(255,255,255,.6) 30%,rgba(255,255,255,.15) 58%,rgba(255,255,255,0) 78%)}
  .sl-kit .float-found{right:0}.sl-kit .float-alert{right:0}.sl-kit .float-reorder{left:0}
  .sl-kit .probs,.sl-kit .pillar-grid,.sl-kit .ai-grid,.sl-kit .team-grid,.sl-kit .bento{grid-template-columns:1fr}
  .sl-kit .stats{grid-template-columns:repeat(2,1fr)}
  .sl-kit .feature{grid-template-columns:1fr}
  .sl-kit .feature.flip .art{order:0}
  .sl-kit .nav-links{display:none}
  /* ── mobile sweep ────────────────────────────────────────────────────────
     Measured at 375px: the hero head was overflowing (44px display type +
     nowrap ticks), the mocks were forcing a 385px min-width inside a 375px
     viewport, and the watermarks were painting past the edge. */
  /* TABLET type (700–960). Below 700 the phone tier takes over — one block
     for both was giving a 768 iPad a 31px hero and 20px section headings,
     which read as a phone page stretched wide. */
  .sl-kit .hero h1{font-size:42px;line-height:1.1}
  .sl-kit .statement{font-size:30px;line-height:1.22}
  .sl-kit .feature h3{font-size:24px}
  .sl-kit .b-card h3{font-size:20px}
  .sl-kit .prob h3,.sl-kit .acc-q h3,.sl-kit .spk-card h3{font-size:20px}
  .sl-kit .hero .wrap>:first-child{max-width:100%}
  .sl-kit .hero-ctas{gap:10px}
  .sl-kit .hero-ctas .btn{flex:1 1 auto;justify-content:center}
  /* mocks: scale to the viewport instead of asserting a desktop min-width */
  .sl-kit .mock,.sl-kit .art{width:100%;max-width:100%}
  .sl-kit .art-card,.sl-kit .mock-window{max-width:100%}
  .sl-kit .fc,.sl-kit .wc{width:100%}
  .sl-kit .float{position:static;margin-top:10px;transform:none!important;animation:none!important;width:100%}
  .sl-kit .float .fs{white-space:normal}
  .sl-kit .mock-queue .mq-s,.sl-kit .rowline .rs{font-size:9.5px}
  /* watermarks are decoration — they must never widen the document */
  .sl-kit .hero-wm,.sl-kit .ai-wm,.sl-kit .cta-wm{font-size:26vw;max-width:100vw;overflow:hidden}
  .sl-kit .ribbon{max-width:100vw}
  /* tables/rows keep their shape by wrapping rather than scrolling */
  .sl-kit .rowline{flex-wrap:wrap;row-gap:4px}
  .sl-kit .rowline .val,.sl-kit .rowline .qty{margin-left:auto}
  .sl-kit .ribbon{width:120vw;right:-40vw;top:-480px;opacity:.55}
  .sl-kit .accent-ul{white-space:normal}
  .sl-kit .accent-ul::after{display:none}
}

/* ── site-context adjustments ─────────────────────────────────────────────
   The concept page owned the whole document; here it sits between the site's
   nav and footer, so the hero clears the fixed header and the page supplies
   the base type styles the document reset used to provide. */
.sl-kit{font-family:var(--font-body);-webkit-font-smoothing:antialiased;overflow-x:clip;
  /* the site inherits a PIXEL line-height from an ancestor, which inflates every
     mock row — reset to the browser baseline the concept was designed on; rules
     that want looser leading (ledes, bodies) set their own. */
  line-height:normal;letter-spacing:normal}
.sl-kit .hero .wrap{padding-top:140px}
@media (max-width:960px){.sl-kit .hero .wrap{padding-top:80px}}
/* ── PHONE type (≤700) ─────────────────────────────────────────────────
   Measured at 375: section headings were 20px against 15px body, so a
   heading had no more weight than the paragraph under it.

   700, not 699. Every other phone rule in this file is `max-width:700px`,
   and both are max-widths — not a min/max pair — so at exactly 700px the
   layout went to phone while the type scale stayed on desktop: a one-pixel
   window where two rules disagreed. */
@media (max-width:700px){
  .sl-kit .hero h1{font-size:33px;line-height:1.16}
  .sl-kit .statement{font-size:20px;line-height:1.26}
  /* the supporting clause drops out of the display face into Geist regular —
     at phone size Bricolage at 400 reads as a lighter heading rather than as
     body copy, which is what this line is */
  .sl-kit .statement span{display:block;margin-top:10px;font-family:var(--font-body);font-size:16px;line-height:1.55;font-weight:400;letter-spacing:0}
  .sl-kit .feature h3{font-size:21px}
  .sl-kit .b-card h3,.sl-kit .prob h3,.sl-kit .acc-q h3,.sl-kit .spk-card h3{font-size:16px}
  /* a bare text link is a ~20px tap target — give it real height on touch */
  .sl-kit .hp-more a,.sl-kit .prob-more a,.sl-kit .team-more a{padding:6px 0;display:inline-flex}
  .sl-kit .b-card .b-art{padding-top:18px}
  .sl-kit .b-card .b-art--center{padding-top:18px}
  /* ≤960 wraps these rows so nothing overflows; at phone width that put the
     tag on one line and the money on the next. Truncate the name instead —
     a row that reads as one row is worth more than a full product name. */
  .sl-kit .rowline{flex-wrap:nowrap;gap:8px}
  .sl-kit .rowline>span:not([class]){flex:1;min-width:0}
  .sl-kit .rowline .rn,.sl-kit .rowline .rs{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .sl-kit .rowline .val{margin-left:0}
}
.sl-kit a{color:inherit;text-decoration:none}
/* the shared logos mosaic pulls itself up -50px to overlap the HOMEPAGE hero;
   here it sits between plain sections — page-scoped override (body-qualified so
   it outranks the include's own later-loading rule). */
/* the Log In button is transparent by default, so the hero's colour shows
   through it — give it a solid white fill and leave its violet ink alone */
body header.header-dark .btn.btn-border{background:#fff}
body header.header-dark .btn.btn-border:hover{background:#fff}
body .sl-trusted{margin-top:0}
body .footer-signoff .color-bar{display:none}
body .sl-trusted .sl-trusted-intro{font-size:15px}
/* `#problem` used to zero its top padding here — a per-page tweak that had
   drifted into the shared file, so on /pulse AND /sales-agents (both of which
   open on `#problem`) the first heading butted straight up under the logo
   band, while the homepage kept its 50px. The seam is structural now, set
   once by the `.sl-trusted ~ .sl-kit` rule in the PAGE KIT block below, so
   this override just fought it. Gone. */

/* ═══════════════════════════════════════════════════════════════════════════
   PAGE KIT — reusable on every page that adopts this system.
   Generic only: the section rhythm, the product-mock families, the
   shared-band neutralisers, the CTA treatments. Page-specific styling
   (a hero's own background, a one-off section override) stays in the page.
   See docs/UI-SYSTEM.md before adding to either side.
   ═════════════════════════════════════════════════════════════════════════ */
    /* ── one vertical rhythm for the whole page ──────────────────────
       every section opens on --kit-gap and the tinted/dark bands carry the
       same figure internally, so no seam is bigger or smaller than another */
    /* the shared white bands live OUTSIDE .sl-kit, so the scale is on body */
    body { --kit-gap: 96px; }
    .sl-kit .sl-sec { padding: var(--kit-gap) 0 0; }
    /* the FAQ is a quiet list between two loud sections — it doesn't need the
       full seam above it */
    .sl-kit #faqs { padding-top: calc(var(--kit-gap) - 24px); }
    .sl-kit .team-band { padding: var(--kit-gap) 0 0; }
    /* the two dark rounded panels: the gap is their margin, the same figure inside */
    .sl-kit .ai-band { margin-top: var(--kit-gap); padding-top: var(--kit-gap); padding-bottom: var(--kit-gap); }
    .sl-kit .cta { margin-top: var(--kit-gap); padding-top: var(--kit-gap); padding-bottom: 80px; }
    body .sl-trusted { padding-top: 48px; padding-bottom: 0 !important; }
    body .sl-trusted .sl-trusted-panel { padding: 0 0 2.5rem 0; }
    /* NOTE: `.sl-trusted + .sl-kit` never matched — the include emits a
       `.sl-trusted-cursor` div between the two, so the adjacent-sibling
       combinator silently failed and this seam fell back to --kit-gap.
       `~` is the correct combinator here. */
    /* An EXPLICIT class, not :first-of-type — the page reopens .sl-kit around
       each shared include, so every container had a "first section" and the FAQ
       was silently picking up this seam too.
       The .statement h2's margin-top:12px COLLAPSES up through .sec-head and
       .wrap and lands outside the section, so padding alone under-reports the
       seam. Zeroing it removes 12px; the heading's own leading is the other
       12px — hence 34px of padding for a 46px seam. */
    /* STRUCTURAL, not a class a page has to remember. This used to be
       `.sl-sec--after-logos`, hand-applied — and only the homepage ever
       applied it, so /how-it-works, /pulse and /sales-agents opened on a seam
       twice the homepage's. That is the "these pages should match the
       homepage" gap, and no amount of tuning the sections themselves could
       close it, because the rule simply wasn't reaching them.

       `~ .sl-kit ~ .sl-kit` is the "first following sibling only" idiom: the
       first rule hits every .sl-kit after the band, the second puts the normal
       seam back on all but the first. (A page reopens .sl-kit around each
       shared include, so there are always several.) */
    body .sl-trusted ~ .sl-kit > section:first-child { padding-top: 50px; }
    body .sl-trusted ~ .sl-kit > section:first-child .sec-head .statement { margin-top: 0; }
    body .sl-trusted ~ .sl-kit ~ .sl-kit > section:first-child { padding-top: var(--kit-gap); }
    body .sl-trusted ~ .sl-kit ~ .sl-kit > section:first-child .sec-head .statement { margin-top: var(--s-2); }
    /* the shared band paints its pale-blue var(--paper-2) slab on ::after — THAT is the
       blue, not the section background, so it must be removed outright */
    body .testimonial-slimline::after { display: none !important; content: none !important; }
    body .testimonial-slimline {
        padding-top: var(--kit-gap) !important; padding-bottom: 68px !important;
        /* the /pulse #cockpit wash replaces the shared pale-blue band */
        background:
            linear-gradient(180deg,#fff 0%,rgba(255,255,255,0) 30%),
            linear-gradient(0deg,#fff 0%,#fff 10%,rgba(255,255,255,.88) 24%,rgba(255,255,255,.55) 40%,rgba(255,255,255,.2) 54%,rgba(255,255,255,0) 66%),
            radial-gradient(58% 38% at 86% 20%,rgba(11,206,252,.20),transparent 68%),
            radial-gradient(52% 42% at 4% 38%,rgba(124,58,237,.18),transparent 68%),
            radial-gradient(56% 42% at 94% 60%,rgba(255,2,106,.13),transparent 68%),
            radial-gradient(52% 42% at 12% 84%,rgba(255,146,67,.16),transparent 68%),
            linear-gradient(180deg,#fdfdff,#ffffff) !important;
    }
    body .feature-blog { margin-top: -88px !important; padding-top: 104px !important; padding-bottom: 0 !important; background: #fff !important; }
    /* the include tints each card pale-blue — on this page they're white cards
       with the same hairline every other card on the page carries */
    body .feature-blog .article-listing > article,
    body .feature-blog .article-listing > article > div {
        background: #fff !important;
    }
    body .feature-blog .article-listing > article {
        border: 1px solid #ececf4 !important; border-radius: var(--r-lg); overflow: hidden;
    }
    /* the shared bands centre their headings — everything else on this page is left-aligned */
    body .testimonial-slimline h2, body .testimonial-slimline > p, body .testimonial-slimline .intro,
    body .feature-blog h2, body .feature-blog > .container > p, body .feature-blog .blog-read-more { text-align: left !important; }
    body .testimonial-slimline h2, body .feature-blog h2 {
        font-family:var(--font-display);
        font-size: clamp(21px, 2.4vw, 28px) !important; line-height: 1.38 !important;
        letter-spacing: -.02em !important; font-weight:500 !important; color: var(--ink) !important;
        margin: 0 0 10px !important;
    }
    /* the shared bands gradient-fill their heading <span> in violet. Here the
       span is the supporting clause, so it takes the page's strap-line grey —
       the same shape as every .statement: bold claim, then grey clause. */
    body .testimonial-slimline h2 span, body .feature-blog h2 span {
        background: none !important; -webkit-background-clip: border-box !important;
        background-clip: border-box !important; -webkit-text-fill-color: #7e8c9a !important;
        color: #7e8c9a !important; font-weight:500;
    }
    /* the testimonials strap-line is redundant next to the section above it — drop it,
       and give the heading the breathing room the strap-line used to hold */
    body .testimonial-slimline > p { display: none !important; }
    /* the include's homepage CTA pair duplicates the closing band's — drop it */
    body .testimonial-slimline .testimonial-cta { display: none !important; }
    /* the carousel's Flickity dots are fat 10px circles with an 8px gutter.
       Slimmer bars, and the current one widens rather than just changing
       colour — so position reads at a glance. Neutralised from here; the
       Flickity stylesheet serves pages outside this system. */
    body .testimonial-slimline .flickity-page-dots { display: flex !important; align-items: center; justify-content: center; gap: 7px; right: auto !important; left: 0; width: 100%; bottom: -30px; }
    body .testimonial-slimline .flickity-page-dots .dot {
        width: 8px !important; height: 8px !important; margin: 0 !important;
        background: #c7cddb !important; border-radius: 99px !important;
        transition: width .28s cubic-bezier(.22,.8,.3,1), background .28s ease !important;
    }
    body .testimonial-slimline .flickity-page-dots .dot:hover { background: #b7bdcd !important; }
    body .testimonial-slimline .flickity-page-dots .dot.is-selected { width: 28px !important; background: var(--violet) !important; }
    /* the integrations flow above ends flush, so open this band on the full gap */
    body .testimonial-slimline { margin-top: var(--kit-gap); padding-bottom: 28px !important; }
    /* the read-more is absolutely positioned into this container, so its
       88px margin is pure dead space above the blog band */
    body .testimonial-slimline > .container { margin-top: 0 !important; }
    /* cap the line length like every .sec-head on the page, and give the band
       the same breathing room under its heading */
    /* `body .testimonial-slimline > h2` below sets max-width:1160px to centre the
       band's own gutter — match its specificity or this silently loses */
    body .testimonial-slimline > h2, body .feature-blog .container > h2 { max-width: 820px; }
    body .testimonial-slimline h2 { margin-bottom: 40px !important; }
    /* the blog heading sits straight on the cards with no strap-line — space it off them */
    body .feature-blog h2 { margin-bottom: 40px !important; }
    /* clamp the excerpt so three cards of different-length posts line up */
    body section.article-listing article div p {
        font-size: 15px; line-height: 145%; overflow: hidden; margin: 0;
        display: -webkit-box; -webkit-line-clamp: 7; -webkit-box-orient: vertical;
    }
    /* the include renders its link AFTER the cards; pin it beside the heading,
       which is where every other section on this page puts its CTA */
    body .feature-blog .container { position: relative; }
    body .feature-blog .blog-read-more {
        position: absolute; top: 0; right: 24px; margin: 0 !important;
        display: flex; align-items: center; height: 34px;
    }
    @media (max-width: 700px) {
        body .feature-blog .blog-read-more { position: static; margin-top: 18px !important; height: auto; }
    }
    body .testimonial-slimline > p, body .feature-blog > .container > p { max-width: 640px; margin-left: 0 !important; font-size: 15px; color: #666; }
    body .testimonial-slimline > h2, body .testimonial-slimline > p { max-width: 1160px; margin-left: auto !important; margin-right: auto !important; padding-left: 24px; padding-right: 24px; }
    /* the 1160px rule above centres the BOX; without box-sizing the 24px gutter
       pushed the text off the page's left edge. Match the other sections. */
    body .testimonial-slimline > h2 { box-sizing: border-box; }
    body .feature-blog .container { max-width: 1160px; padding-left: 24px; padding-right: 24px; }
    /* SOURCE ORDER matters here: the rule above sets the band's own 1160px
       gutter at equal specificity, so the heading's own line-length cap has to
       come after it or it silently loses. */
    /* The box must stay 1160px (the page gutter) or `margin: auto` centres a
       narrower box and the heading stops aligning with every other section.
       Cap the MEASURE with padding-right instead — that shortens the line
       without moving the left edge. */
    body .testimonial-slimline > h2 { max-width: 1160px; padding-right: clamp(24px, 20vw, 300px); }
    body .feature-blog .container > h2 { max-width: none; padding-right: clamp(0px, 26vw, 420px); }

    @media (max-width: 960px) {
        body { --kit-gap: 56px; }
        .sl-kit .cta { padding-bottom: 56px; }
        body .sl-trusted { padding-top: 28px; }
        body .sl-trusted ~ .sl-kit > section:first-child { padding-top: 32px; }
        body .sl-trusted ~ .sl-kit ~ .sl-kit > section:first-child { padding-top: var(--kit-gap); }
    }

    /* small helpers */
    .sl-kit .hp-quiet { margin: 22px 0 0; font-size: 13px; color: var(--txt-faint); }
    .sl-kit .hp-quiet a { color: var(--violet); font-weight: 500; }
    /* both rep rows in one panel, split by a hairline */
    .sl-kit .team-band .feature { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 52px 64px; align-items: center; }
    .sl-kit .team-split { grid-column: 1 / -1; height: 1px; background: #ececf4; margin: 4px 0; }
    @media (max-width: 900px) { .sl-kit .team-band .feature { grid-template-columns: 1fr; gap: 30px; } }
    /* the shared .prob puts the art between the title and the copy — on this
       page the two lines of copy belong together, with the graphic below */
    .sl-kit .probs .prob h3 { order: 1; padding-bottom: 10px; }
    .sl-kit .probs .prob .a { order: 2; padding: 0 26px 22px; min-height: 0; flex: 0 0 auto; }
    .sl-kit .probs .prob .card-art { order: 3; margin-top: auto; }
    .sl-kit .team-more { margin-top: 40px; display: flex; align-items: center; justify-content: space-between; gap: 26px; flex-wrap: wrap; }
    .sl-kit .team-more p { margin: 0; font-size: 15px; line-height: 1.55; color: #666; max-width: 46ch; }
    @media (max-width: 700px) { .sl-kit .team-more { flex-direction: column; align-items: flex-start; gap: 18px; } }
    /* ── ONE text-link treatment for the whole page ───────────────────
       15px Bricolage 600, violet, with the sliding arrow. Every "go deeper"
       link renders through it — the loop cards, the section CTAs, and the
       shared includes' own .btn-link (neutralised onto the same look), so a
       text link is the same size and weight everywhere. Wrappers below only
       decide PLACEMENT; they never restate the type.                        */
    .sl-kit .hp-more a,
    .sl-kit .prob-more a,
    body .feature-blog .btn-link,
    body .testimonial-slimline .btn-link {
        display: inline-flex; align-items: center; gap: 6px;
        font-family:var(--font-display);
        font-size: 15px; font-weight:500; letter-spacing: -.01em;
        color: var(--violet); text-decoration: none;
    }
    .sl-kit .hp-more a span,
    .sl-kit .prob-more a span { transition: transform .2s ease; display: inline-block; }
    .sl-kit .hp-more a:hover span,
    .sl-kit .prob-more a:hover span { transform: translateX(3px); }
    /* WRONG EARLIER: I added an ::after arrow to these, but the includes already
       draw one on the inner <span> — so they rendered "→ →". The include's arrow
       stays; we only take over the colour, which was three different values
       (violet / cyan / grey) across the same visual component. */
    /* LITERAL hex, not var(--violet): these bands live OUTSIDE .sl-kit, where
       the token isn't declared — `var()` would resolve to nothing, the whole
       declaration would be dropped, and the link would silently stay grey. */
    body .feature-blog .btn-link, body .feature-blog .btn-link span {
        color: var(--violet) !important;
    }
    /* the story cards are full-bleed photography — violet ink disappears into
       them, so this one reads white on every card */
    body .testimonial-slimline .btn-link, body .testimonial-slimline .btn-link span {
        color: #fff !important;
    }
    body .feature-blog .btn-link span::after,
    body .testimonial-slimline .btn-link span::after { transition: transform .2s ease; display: inline-block; }
    body .feature-blog .btn-link:hover span::after,
    body .testimonial-slimline .btn-link:hover span::after { transform: translateX(3px); }
    .sl-kit .hp-more { margin-top: 30px; }
    /* on the dark bands the violet ink is unreadable — go white, and keep the
       arrow with it */
    .sl-kit .ai-band .hp-more a, .sl-kit .cta .hp-more a { color: #fff; }
    .sl-kit .ai-band .hp-more a:hover, .sl-kit .cta .hp-more a:hover { color: #e9e4ff; }
    /* a CTA that rides in the section HEADER sits close under the strap-line,
       not on the section-foot's 30px — that reads as a stray orphan link */
    .sl-kit .sec-head .hp-more { margin-top: 18px; }
    /* …unless the heading is a single line with no strap — then the CTA rides
       beside it on the same row rather than orphaning under it */
    .sl-kit .sec-head--inline {
        display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap;
        /* .sec-head caps its line length for readability; the inline variant is a
           full-width ROW, so the cap would strand the CTA mid-gutter */
        max-width: none;
    }
    .sl-kit .sec-head--inline .hp-more { margin-top: 0; }
    /* the sales-agent CTA sat tight against the accordion below it */
    .sl-kit .team-band .sec-head .hp-more { margin-bottom: 44px; }
    .sl-kit .sl-sec .sec-head { margin-bottom: 34px; }
    .sl-kit .hp-step {
        display: inline-flex; align-self: flex-start; font-size: 10px; font-weight: 700;
        letter-spacing: .08em; text-transform: uppercase; color: var(--violet-3);
        background: #efe7ff; border-radius: 999px; padding: 4px 10px;
    }
    /* ── the B2B storefront window (the one new mock family) ── */
    .sl-kit .sf {
        background: #fff; border-radius: 14px; overflow: hidden;
        box-shadow: var(--e3); border: 1px solid #e7e9f4;
        font-family:var(--font-body);
    }
    .sl-kit .sf .mock-chrome { position: static; }
    .sl-kit .sf-top {
        display: flex; align-items: center; justify-content: space-between; gap: 10px;
        padding: 11px 14px; border-bottom: 1px solid var(--line-2);
    }
    .sl-kit .sf-top b { font-family:var(--font-body); font-weight: 600; font-size: 12px; letter-spacing: .02em; color: var(--ink); white-space: nowrap; }
    .sl-kit .sf-top b span { color: var(--txt-faint); font-weight: 500; }
    .sl-kit .sf-user { font-size: 10px; color: var(--txt-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .sl-kit .sf-user em { font-style: normal; font-weight: 500; color: var(--violet-3); background: #efe7ff; border-radius: 999px; padding: 2px 8px; margin-left: 4px; }
    .sl-kit .sf-row { display: flex; align-items: center; gap: 10px; padding: 9px 14px; border-top: 1px solid #f4f5fa; }
    .sl-kit .sf-row:first-of-type { border-top: 0; }
    .sl-kit .sf-sw { flex: none; width: 30px; height: 30px; border-radius: 8px; box-shadow: inset 0 0 0 1px rgba(10,37,64,.08); }
    .sl-kit .sf-name { min-width: 0; flex: 1; }
    .sl-kit .sf-name b { display: block; font-size: 11.5px; font-weight: 500; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .sl-kit .sf-name i { display: block; font-style: normal; font-size: 9.5px; color: var(--txt-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .sl-kit .sf-price { flex: none; text-align: right; }
    .sl-kit .sf-price b { display: block; font-family:var(--font-body); font-size: 12px; font-weight: 700; color: var(--ink); }
    .sl-kit .sf-price s { display: block; font-size: 9px; color: #aab1c4; }
    .sl-kit .sf-qty { flex: none; font-size: 10px; font-weight: 500; color: var(--txt); border: 1px solid var(--line); border-radius: 999px; padding: 4px 9px; white-space: nowrap; }
    .sl-kit .sf-add { flex: none; font-size: 10px; font-weight: 500; color: #fff; background: var(--violet); border-radius: 999px; padding: 5px 12px; }
    .sl-kit .sf-cart {
        display: flex; align-items: center; gap: 8px; padding: 10px 14px;
        background: #fbfbfe; border-top: 1px solid #f2f3f8; font-size: 10.5px; color: var(--txt-faint);
    }
    .sl-kit .sf-cart b { font-family:var(--font-body); font-weight: 600; color: var(--ink); font-size: 12px; }
    .sl-kit .sf-terms { margin-left: auto; font-size: 9.5px; font-weight: 500; letter-spacing: .04em; text-transform: uppercase; color: var(--good); background: var(--good-soft); border-radius: 999px; padding: 3px 9px; white-space: nowrap; }
    .sl-kit .sf-strip { display: flex; align-items: center; gap: 8px; padding: 9px 14px; border-top: 1px solid #f2f3f8; font-size: 10.5px; color: #4b4370; background: linear-gradient(92deg, #f6f1ff, #fdf3fa); }
    .sl-kit .sf-strip b { color: var(--violet-3); font-weight: 500; }

    /* quote status chips (accordion: quotes panel) */
    .sl-kit .sf-status { display: flex; align-items: center; gap: 6px; padding: 10px 14px 12px; }
    .sl-kit .sf-status span { font-size: 9px; font-weight: 500; letter-spacing: .05em; text-transform: uppercase; border-radius: 999px; padding: 3px 9px; background: #f1f2f7; color: var(--txt-faint); }
    .sl-kit .sf-status span.on { background: var(--good-soft); color: var(--good); }
    .sl-kit .sf-status i { flex: none; width: 12px; height: 1px; background: var(--line); }
    /* ── the loop: three steps ── */
    .sl-kit .loop { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 22px; }
    .sl-kit .loop-c { display: flex; flex-direction: column; background: #fff; border: 1px solid #e2e2ed; border-radius: 12px; padding: 26px 26px 0; overflow: hidden; transition: border-color .35s ease; }
    .sl-kit .loop-c:hover { border-color: #c9cbe0; }
    .sl-kit .loop-c h3 { margin: 14px 0 6px; font-size: 18px; font-weight: 600; letter-spacing: -.015em; color: var(--ink); }
    .sl-kit .loop-c p { margin: 0; font-size: 14px; line-height: 1.55; color: #666; }
    .sl-kit .loop-art { margin: 22px -26px 0; margin-top: auto; padding: 22px 20px 0; }
    .sl-kit .loop-art .lp-shot { border-radius: 10px 10px 0 0; border-bottom: 0; box-shadow: 0 14px 34px -8px rgba(50,50,93,.16), 0 6px 16px -8px rgba(0,0,0,.14); }
    .sl-kit .loop-art--a { background: linear-gradient(180deg, #f6f8fc, #e9edf8); }
    .sl-kit .loop-art--b { background: linear-gradient(180deg, #f2fbf7, #dff2ea); }
    .sl-kit .loop-art--c { background: linear-gradient(180deg, #f7f2ff, #ece2fd); }
    .sl-kit .lp-shot { background: #fff; border: 1px solid #e4e6f2; overflow: hidden; font-family:var(--font-body); }
    /* ── the compact cockpit mock (hero + band + loop) ── */
    .sl-pb-mock {
        position: relative;
        background: #fff; border: 1px solid #ececf4; border-radius: 14px; overflow: hidden;
        font-family:var(--font-body);
    }
    /* no drop shadow — the same orbiting arc .art-card runs, so all four
       accordion panels carry one treatment */
    .sl-kit .sl-pb-mock::after {
        content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px;
        pointer-events: none; z-index: 5;
        background: conic-gradient(from var(--plp-orbit), transparent 0deg 318deg, rgba(124,58,237,.75) 342deg, rgba(11,206,252,.9) 352deg, transparent 360deg);
        -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
        -webkit-mask-composite: xor; mask-composite: exclude;
        animation: plp-orbit 5.5s linear infinite;
    }
    .sl-pb-mhead {
        display: flex; justify-content: space-between; align-items: center;
        padding: 12px 16px; border-bottom: 1px solid var(--line-2);
        font-weight:500; color: var(--ink); font-size: 13px;
    }
    .sl-pb-mpill { font-size: 10.5px; font-weight: 500; color: var(--violet-3); background: #efe7ff; border-radius: 999px; padding: 3px 10px; }
    .sl-pb-kpis { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; padding: 12px 16px 4px; }
    .sl-pb-kpi { border: 1px solid var(--line); border-radius: 9px; padding: 7px 9px; min-width: 0; }
    .sl-pb-kpi i { display: block; font-style: normal; font-size: 9.5px; font-weight: 500; color: var(--txt-faint); white-space: nowrap; }
    .sl-pb-kpi b { display: block; margin-top: 2px; font-family:var(--font-body); font-size: 14.5px; font-weight: 600; color: var(--ink); white-space: nowrap; }
    .sl-pb-kpi em { font-style: normal; font-size: 9.5px; font-weight: 500; }
    .sl-pb-kpi em.up { color: var(--good); }
    .sl-pb-kpi em.dn { color: #c02455; }
    .sl-pb-mlabel { padding: 9px 16px 6px; font-size: 10px; font-weight: 500; letter-spacing: .07em; text-transform: uppercase; color: var(--txt-faint); background: #fbfbfe; border-top: 1px solid #f2f3f8; border-bottom: 1px solid #f6f7fb; margin-top: 8px; }
    .sl-pb-row { display: flex; align-items: center; gap: 10px; padding: 8px 16px; border-top: 1px solid #f4f5fa; }
    .sl-pb-row:first-of-type { border-top: 0; }
    .sl-pb-av { flex: none; width: 26px; height: 26px; border-radius: 8px; color: #fff; font-size: 10px; font-weight: 700; display: grid; place-items: center; font-family:var(--font-body); }
    .sl-pb-rmain { min-width: 0; }
    .sl-pb-rmain b { display: block; font-size: 12px; font-weight: 500; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .sl-pb-rmain i { display: block; font-style: normal; font-size: 10.5px; color: var(--txt-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .sl-pb-tag { flex: none; margin-left: auto; font-size: 9px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; border-radius: 999px; padding: 3px 8px; }
    .sl-pb-tag--rose { background: #fde4e9; color: #c02455; }
    .sl-pb-tag--violet { background: #efe7ff; color: var(--violet-3); }
    .sl-pb-tag--amber { background: #fff2e2; color: #b45309; }
    .sl-pb-tag--grey { background: #f2f3f9; color: var(--txt-faint); }
    .sl-pb-ask {
        display: flex; align-items: center; gap: 9px; margin-top: 6px;
        padding: 10px 16px; background: linear-gradient(92deg, #f6f1ff, #fdf3fa);
        border-top: 1px solid #eee7fb; font-size: 12px; color: #4b4370;
    }
    .sl-pb-ask b { color: var(--violet-3); font-weight: 500; }
    .sl-pb-spark { color: var(--violet-2); font-size: 14px; }
    /* ── the dark Sparkie band content (rides the shared .ai-band) ── */
    /* 92 / 88 / 84 were three hand-tuned stand-ins for one number, and none of
       them tracked the mobile breakpoint — so this band held a desktop seam on
       a phone while its neighbours halved. One token, three places. */
    .sl-kit .hp-pulse { padding-top: var(--kit-gap); padding-bottom: var(--kit-gap); margin-top: var(--kit-gap); }
    .sl-pb-grid { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0,1.02fr) minmax(0,.98fr); gap: 4rem; align-items: center; }
    .sl-pb-kicker { margin: 0 0 16px; font-size: 12px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--cyan); }
    .sl-pb-grid h2 { margin: 0 0 14px; color: #fff; font-size: clamp(24px, 2.6vw, 31px); font-weight: 500; letter-spacing: -.028em; line-height: 1.25; }
    .sl-pb-grid h2 em {
        font-style: normal;
        background: linear-gradient(92deg, var(--violet-pale) 0%, #e9a5ff 42%, #ff86b8 78%, var(--violet-pale) 100%);
        -webkit-background-clip: text; background-clip: text; color: transparent;
    }
    .sl-pb-lede { margin: 0 0 6px; font-size: 15px; line-height: 1.65; color: #b9b3d6; }
    .sl-pb-ticks { list-style: none; margin: 22px 0 30px; padding: 0; display: grid; gap: 12px; }
    .sl-pb-ticks li { position: relative; padding-left: 30px; margin: 0; font-size: 15px; line-height: 1.45; color: #d9d5f0; font-weight: 400; }
    .sl-pb-ticks li::before {
        content: "\2713"; position: absolute; left: 0; top: 1px; width: 19px; height: 19px;
        border-radius: 99px; background: rgba(196,181,253,.14); border: 1px solid rgba(196,181,253,.25);
        color: var(--violet-pale); font-size: 10px; font-weight: 700; display: grid; place-items: center;
    }
    .sl-pb-ctas { display: flex; align-items: center; gap: 1.4rem; flex-wrap: wrap; }
    .sl-pb-btn {
        background: #fff; color: #10162e; font-size: 15px; font-weight:500; border-radius: 999px;
        padding: 12px 22px; text-decoration: none; transition: transform .2s ease, box-shadow .2s ease;
    }
    .sl-pb-btn:hover { transform: translateY(-1px); box-shadow: 0 14px 30px -14px rgba(0,0,0,.6); color: #10162e; }
    .sl-pb-quiet { color: var(--violet-pale); font-size: 14px; font-weight: 500; text-decoration: none; }
    .sl-pb-quiet:hover { color: #ddd3ff; }
    .sl-pb-mockwrap { position: relative; padding: 0 0 40px 26px; }
    .sl-pb-float {
        position: absolute; left: 0; bottom: 0; z-index: 2; max-width: 310px;
        background: #fff; border: 1px solid #e9d8ff; border-radius: 14px; padding: 14px 16px;
        box-shadow: 0 44px 96px -20px rgba(0,0,0,.55), 0 18px 44px -18px rgba(0,0,0,.45);
        font-family:var(--font-body);
    }
    .spf-head { display: flex; align-items: center; gap: 7px; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--violet-3); }
    .spf-mark { color: var(--violet-2); font-size: 13px; }
    .sl-pb-float p { margin: 7px 0 10px; font-size: 12px; line-height: 1.55; color: #4b4370; }
    .sl-pb-float p b { color: var(--ink); font-weight: 500; }
    .spf-acts { display: flex; gap: 8px; flex-wrap: wrap; }
    .spf-acts span { font-size: 11px; font-weight:500; color: var(--violet-3); background: #efe7ff; border-radius: 999px; padding: 5px 11px; }

    /* ── fits what you run ── */
    .sl-kit .integrates-logos { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 28px; margin: 4px 0 0; }
    .sl-kit .integrates-logos a { display: block; }
    .sl-kit .integrates-logos img { display: block; width: 96px; height: 96px; object-fit: contain; }
    /* ── fits what you run: two-col + connect flow ── */
    .sl-kit .integrates-logos { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 28px; margin: 4px 0 0; }
    .sl-kit .integrates-logos a { display: block; }
    .sl-kit .integrates-logos img { display: block; width: 96px; height: 96px; object-fit: contain; }
    .hpint { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 56px; align-items: center; }
    .hpint .statement { margin-bottom: 0; }
    .hpint .hp-more { margin-top: 22px; }
    .sl-kit .hpint-tiles .integrates-logos { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 14px; margin: 0; }
    @media (max-width: 960px) {
        .hpint { grid-template-columns: 1fr; gap: 30px; }
        .sl-kit .hpint-tiles .integrates-logos { grid-template-columns: repeat(3, minmax(0,1fr)); gap: 10px; }
    }
    .sl-kit .hpint-tiles .integrates-logos a { background: #fff; border: 1px solid #e2e2ed; border-radius: 16px; display: grid; place-items: center; aspect-ratio: 1; padding: 13px; transition: border-color .35s ease; }
    .sl-kit .hpint-tiles .integrates-logos a:hover { border-color: #c9cbe0; }
    .sl-kit .hpint-tiles .integrates-logos img { width: 100%; height: 100%; object-fit: contain; transition: transform .25s cubic-bezier(.22,.8,.3,1); }
    .sl-kit .hpint-tiles .integrates-logos a:hover img { transform: scale(1.12); }
    /* ── The connect strip ────────────────────────────────────────────────
       Three steps, three cards, nothing behind them. It has been a gradient
       rail with a travelling light, and then glass cards over a scrolling
       code wall; both times the decoration was louder than the three
       sentences it was decorating. The code moved to the API band, where a
       code sample is the subject rather than the wallpaper. */
    .sl-kit .codewall { margin-top: 52px; }
    .sl-kit .cwl-steps { --g: 46px; position: relative; display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: var(--g); }

    /* ── The flow ─────────────────────────────────────────────────────────
       Three cards say what the parts are; only movement says the parts talk
       to each other. Packets travel left to right on the violet channel
       (your data going in) and right to left on the cyan one (the trade
       reading back) — which is the actual claim: it's a sync, not a feed.

       The connectors are absolutely positioned inside the grid, so they sit
       in the gaps without occupying a column. Column width is
       (100% - 2 gaps)/3, so gap one starts at exactly one column. */
    .sl-kit .cwl-link { position: absolute; top: 50%; width: var(--g); height: 2px; margin-top: -1px;
        background: #ebe8f6; border-radius: 2px; }
    .sl-kit .cwl-link--1 { left: calc((100% - var(--g) * 2) / 3); }
    .sl-kit .cwl-link--2 { left: calc((100% - var(--g) * 2) / 3 * 2 + var(--g)); }
    .sl-kit .cwl-link i { position: absolute; top: 50%; left: 0; width: 7px; height: 7px; margin-top: -3.5px;
        border-radius: 99px; background: var(--violet-2); box-shadow: 0 0 0 3px rgba(124,58,237,.13);
        animation: cwlIn 2.8s cubic-bezier(.45,0,.55,1) infinite; }
    .sl-kit .cwl-link i:nth-child(2) { background: var(--cyan); box-shadow: 0 0 0 3px rgba(11,206,252,.16);
        animation-name: cwlBack; animation-delay: -1.4s; }
    .sl-kit .cwl-link--2 i { animation-delay: -.7s; }
    .sl-kit .cwl-link--2 i:nth-child(2) { animation-delay: -2.1s; }
    @keyframes cwlIn {
        0% { transform: translateX(-9px); opacity: 0; }
        14%, 82% { opacity: 1; }
        100% { transform: translateX(var(--g)); opacity: 0; }
    }
    @keyframes cwlBack {
        0% { transform: translateX(var(--g)); opacity: 0; }
        14%, 82% { opacity: 1; }
        100% { transform: translateX(-9px); opacity: 0; }
    }
    @media (prefers-reduced-motion: reduce) { .sl-kit .cwl-link i { display: none; } }
    .sl-kit .cwl-step { padding: 22px; border-radius: var(--r-lg); background: #fff; border: 1px solid #ececf4; }
    /* ── The card art ─────────────────────────────────────────────────────
       An icon in a tinted square told you nothing three times over. Each
       card now SHOWS its own half of the sentence: prices landing, the sync
       running, the widget being used. Every animation is opacity/transform
       only, and the section's off-screen pause stops all three. */
    .sl-kit .cwl-viz { position: relative; display: block; height: 74px; margin-bottom: 26px; }

    /* 1 · price rows arriving */
    .sl-kit .cwl-viz--rows { display: grid; gap: 6px; align-content: start; }
    .sl-kit .cwl-viz--rows i {
        display: flex; align-items: center; gap: 10px; padding: 5px 9px;
        border-radius: 8px; background: #faf9fe; border: 1px solid #f0eef8;
        animation: cwlRow 4.2s ease-in-out infinite;
    }
    .sl-kit .cwl-viz--rows i:nth-child(2) { animation-delay: .5s; }
    .sl-kit .cwl-viz--rows i:nth-child(3) { animation-delay: 1s; }
    .sl-kit .cwl-viz--rows s { flex: 1; height: 5px; border-radius: 4px; background: #e6e2f3; text-decoration: none; }
    .sl-kit .cwl-viz--rows b {
        font-family:var(--font-mono);
        font-size: 10.5px; font-weight: 600; color: var(--violet-3);
    }
    @keyframes cwlRow {
        0%, 6%   { opacity: 0; transform: translateY(5px); }
        16%, 78% { opacity: 1; transform: none; }
        92%, 100%{ opacity: 0; transform: translateY(-4px); }
    }

    /* 2 · the mark, with the sync running round it */
    .sl-kit .cwl-viz--sync { display: grid; place-items: center; }
    .sl-kit .cwl-viz--sync em {
        position: absolute; width: 62px; height: 62px; border-radius: 50%;
        border: 2px dashed #ddd6f7; animation: cwlSpin 9s linear infinite;
    }
    .sl-kit .cwl-viz--sync::after {
        content: ""; position: absolute; width: 62px; height: 62px; border-radius: 50%;
        border: 2px solid transparent; border-top-color: var(--violet-2); border-right-color: var(--cyan);
        animation: cwlSpin 2.6s cubic-bezier(.6,.1,.4,.9) infinite;
    }
    .sl-kit .cwl-mark { position: relative; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 14px; background: #fff; }
    .sl-kit .cwl-mark svg { width: 24px; height: 32px; display: block; }
    @keyframes cwlSpin { to { transform: rotate(360deg); } }

    /* 3 · the widgets arriving on a page you already have */
    .sl-kit .cwl-viz--slots { display: grid; place-items: center; }
    .sl-kit .cwl-page { position: relative; width: 138px; height: 68px; border-radius: 9px; background: #fff; border: 1px solid #e9e6f3; overflow: hidden; }
    .sl-kit .cwl-page s { position: absolute; text-decoration: none; border-radius: 3px; }
    .sl-kit .cwl-bar { left: 0; right: 0; top: 0; height: 13px; background: #f4f2fa; border-radius: 0; }
    .sl-kit .cwl-slot { background: var(--violet-3); opacity: 0; transform: translateY(4px); animation: cwlSlot 4.6s ease-in-out infinite; }
    .sl-kit .cwl-slot--a { left: 10px; top: 23px; width: 50px; height: 34px; }
    .sl-kit .cwl-slot--b { left: 68px; top: 23px; width: 58px; height: 13px; background: var(--violet-soft); animation-delay: .35s; }
    .sl-kit .cwl-slot--c { left: 68px; top: 42px; width: 58px; height: 15px; animation-delay: .7s; }
    @keyframes cwlSlot {
        0%, 8%    { opacity: 0; transform: translateY(4px); }
        20%, 78%  { opacity: 1; transform: none; }
        92%, 100% { opacity: 0; transform: translateY(4px); }
    }
    @media (prefers-reduced-motion: reduce) {
        .sl-kit .cwl-viz--rows i, .sl-kit .cwl-viz--sync em, .sl-kit .cwl-viz--sync::after,
        .sl-kit .cwl-slot { animation: none; opacity: 1; transform: none; }
    }
    .sl-kit .codewall h4 { margin: 0 0 6px; font-family:var(--font-display); font-size: 16px; font-weight: 600; letter-spacing: -.015em; color: var(--ink); }
    .sl-kit .codewall p { margin: 0; font-size: 14px; line-height: 1.55; color: #666; }
    @media (max-width: 960px) {
        /* stacked, the gaps are no longer between anything */
        .sl-kit .cwl-steps { grid-template-columns: 1fr; gap: 12px; }
        .sl-kit .cwl-link { display: none; }
        .sl-kit .codewall { margin-top: 34px; }
        .sl-kit .cwl-step { padding: 18px; }
    }
    /* ── the interactive demo: closed until asked for ── */
    /* ── .hp-ov — a section-covering overlay ──────────────────────────
       Dims the section it sits in and floats ONE card over it. Opened by any
       [data-overlay="<id>"], closed by the scrim, the ×, or Escape — the same
       model as the Sparkie dock, so there's one way to open a panel on a page.
       Generic: its host only has to be position:relative (every .sl-sec and
       the hero already are). The homepage uses it for the interactive demo,
       which used to push the hero's whole right column down when it opened. */
    .sl-kit .hp-ov {
        position: absolute; inset: 0; z-index: 30;
        display: grid; place-items: center; padding: 24px;
        opacity: 0; visibility: hidden;
        transition: opacity .28s ease, visibility .28s;
    }
    .sl-kit .hp-ov.is-open { opacity: 1; visibility: visible; }
    .sl-kit .hp-ov::before {
        content: ""; position: absolute; inset: 0;
        background: rgba(6,8,26,.74);
        -webkit-backdrop-filter: blur(7px) saturate(120%); backdrop-filter: blur(7px) saturate(120%);
    }
    .sl-kit .hp-ov-card {
        position: relative; z-index: 1; width: min(490px, 100%);
        background: linear-gradient(168deg, rgba(34,29,78,.94), rgba(15,16,44,.96));
        border: 1px solid rgba(255,255,255,.15); border-radius: var(--r-lg);
        padding: 30px 30px 26px;
        box-shadow: 0 40px 90px -30px rgba(0,0,0,.75);
        transform: translateY(14px) scale(.985);
        transition: transform .34s cubic-bezier(.22,.8,.3,1);
    }
    .sl-kit .hp-ov.is-open .hp-ov-card { transform: none; }
    .sl-kit .hp-ov-x {
        position: absolute; top: 12px; right: 12px; width: 32px; height: 32px; border-radius: 99px;
        display: grid; place-items: center; color: #cfcbe8;
        background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.15);
        transition: background .18s ease, color .18s ease;
    }
    .sl-kit .hp-ov-x:hover { background: rgba(255,255,255,.18); color: #fff; }
    .sl-kit .hp-ov-x svg { width: 15px; height: 15px; }
    .sl-kit .hp-ov-h {
        margin: 0 0 7px; font-family:var(--font-display);
        font-size: 22px; font-weight: 600; letter-spacing: -.02em; color: #fff;
    }
    .sl-kit .hp-ov-sub { margin: 0 0 4px; font-size: 14.5px; line-height: 1.55; color: #b3b8d4; }
    /* the include sizes its launcher for a hero column — in the card it fills */
    .sl-kit .hp-ov .sl-idemo-cta { max-width: 100%; margin-top: 20px; }
    .sl-kit .hp-ov .sl-idemo-cta-label { display: none; }
    @media (max-width: 700px) {
        .sl-kit .hp-ov { padding: 16px; align-items: start; padding-top: 76px; }
        .sl-kit .hp-ov-card { padding: 24px 20px 20px; }
        .sl-kit .hp-ov-h { font-size: 19px; }
    }
    /* the video variant: no padding, a 16:9 frame, and a wider ceiling —
       the iframe's src is only set on open, so YouTube isn't loaded (or
       tracking) on a visit that never presses play */
    /* --full lifts the overlay out of its section and takes the viewport —
       a video pinned inside the hero is a video in a box, and the hero's own
       curve (z-index 31) would sit on top of it */
    /* ── The light hero's overlay ─────────────────────────────────────────
       .hp-ov was drawn for the homepage's DARK hero, where a near-black
       wash over a near-black scene is barely a change. Over /how-it-works'
       light hero the same wash drops a heavy dark sheet over a bright page
       and then lifts it again, which is the bit that reads wrong — the
       transition is the effect, and the effect was "the lights went out".

       Here it frosts instead: the hero stays bright and simply loses focus,
       and the card arrives as a lit object on glass rather than a hole cut
       in a blackout. Exit is faster than entry (.16s vs .3s) — a modal
       should feel dismissed, not slowly withdrawn.

       :not(.hp-ov--full) keeps the VIDEO overlay dark, which a video needs.
       It also has to: this selector out-specifies .hp-ov--full's own rule,
       so without the exclusion it would frost the video too. */
    .sl-kit .hero--light .hp-ov:not(.hp-ov--full) {
        /* FIXED, not absolute. Bounded by the hero it frosted the hero and
           stopped dead at its bottom edge, so the page below stayed sharp and
           the blur ended on a visible straight line across the screen. A
           backdrop has to cover the viewport or it reads as a rectangle
           someone drew over the page. */
        position: fixed; inset: 0; z-index: 9998;
        padding: max(24px, 4vh) 24px; align-items: center;
        transition: opacity .16s ease, visibility .16s;
    }
    .sl-kit .hero--light .hp-ov:not(.hp-ov--full).is-open {
        transition: opacity .3s ease, visibility .3s;
    }
    .sl-kit .hero--light .hp-ov:not(.hp-ov--full)::before {
        background: rgba(250,249,255,.62);
        -webkit-backdrop-filter: blur(22px) saturate(140%); backdrop-filter: blur(22px) saturate(140%);
    }
    .sl-kit .hero--light .hp-ov:not(.hp-ov--full) .hp-ov-card {
        transform: scale(.94);
        box-shadow: 0 50px 100px -34px rgba(24,20,60,.55), 0 0 0 1px rgba(124,58,237,.14), 0 0 60px -12px rgba(124,58,237,.35);
        transition: transform .16s cubic-bezier(.4,0,.6,1);
    }
    .sl-kit .hero--light .hp-ov:not(.hp-ov--full).is-open .hp-ov-card {
        transform: none;
        transition: transform .42s cubic-bezier(.18,.9,.28,1);
    }

    .sl-kit .hp-ov--full { position: fixed; z-index: 9999; padding: max(24px, 4vh) 24px; align-items: center !important; }
    .sl-kit .hp-ov--full::before { background: rgba(4,5,20,.88); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
    .sl-kit .hp-ov-card--video {
        width: min(1180px, 100%); padding: 0; overflow: visible; background: transparent;
        border: 0; box-shadow: none;
    }
    .sl-kit .hp-ov-card--video .hp-ov-video {
        border-radius: 16px; overflow: hidden; background: #000;
        box-shadow: 0 50px 120px -30px rgba(0,0,0,.9);
    }
    .sl-kit .hp-ov-video { position: relative; aspect-ratio: 16 / 9; width: 100%; }
    .sl-kit .hp-ov-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }
    /* the close sits OUTSIDE the frame on a takeover — over the video it
       covers the picture and fights YouTube's own chrome */
    .sl-kit .hp-ov-card--video .hp-ov-x {
        top: -46px; right: 0; width: 36px; height: 36px;
        background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.25); color: #fff;
    }
    .sl-kit .hp-ov-card--video .hp-ov-x:hover { background: rgba(255,255,255,.24); }
    @media (max-width: 700px) { .sl-kit .hp-ov-card--video .hp-ov-x { top: -42px; } }
    /* the pair of quiet links under the hero CTAs */
    .sl-kit .hp-demo-link { display: flex; flex-wrap: wrap; align-items: center; gap: 22px; }
    @media (prefers-reduced-motion: reduce) { .sl-kit .hp-ov-card { transition: none; } }
    .sl-kit .hp-demo-link { margin: 18px 0 0; }
    .sl-kit .hp-demo-link a { display: inline-flex; align-items: center; gap: 10px; font-size: 15.5px; font-weight: 500; color: var(--violet-pale); text-decoration: none; transition: color .18s ease; }
    .sl-kit .hp-demo-link a:hover { color: #ddd3ff; }
    .sl-kit .hp-demo-link a:hover .hp-demo-ic { transform: scale(1.08); }
    .sl-kit .hp-demo-ic { display: inline-flex; transition: transform .18s ease; }
    .sl-kit .hp-demo-ic svg { width: 22px; height: 22px; display: block; }
    /* ── a sub-head INSIDE a dark band ──────────────────────────────────
       A band can carry a second thought (the dashboard band now closes on
       security). `.statement` is the section's voice and would compete, so
       this is a step down from it. */
    .sl-kit .spk-sec-head { margin-top: var(--s-6); margin-bottom: -14px; max-width: 640px; }
    .sl-kit .spk-sec-head h3 {
        margin: 0 0 8px; font-family:var(--font-display);
        font-size: 22px; font-weight: 500; letter-spacing: -.02em; color: #fff;
    }
    .sl-kit .spk-sec-head p { margin: 0; font-size: 15px; line-height: 1.6; color: #b9b3d6; }
    /* `.spk-card` is built for a screenshot at the bottom (`.spk-shot` takes
       the remaining height), so its padding stops short. A card that is only
       icon + copy has to close itself, and its copy has no neighbour to line
       up with — so the 3-line reservation comes off too. */
    .sl-kit .spk-cards--plain .spk-card { padding-bottom: 26px; }
    .sl-kit .spk-cards--plain .spk-card > p { min-height: 0; -webkit-line-clamp: none; margin-bottom: 0; }
    .sl-kit .spk-cards--plain .spk-card h3 { min-height: 0; }

    /* ── the three Sparkie feature cards on the dark band ── */
    .sl-kit .spk-cards { position: relative; z-index: 2; margin-top: 56px; display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: var(--gut); }
    .sl-kit .spk-card {
        display: flex; flex-direction: column; border-radius: 16px; padding: 26px 26px 0;
        background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.03));
        border: 1px solid rgba(255,255,255,.10); overflow: hidden;
        transition: border-color .35s ease, transform .35s ease;
    }
    .sl-kit .spk-card:hover { border-color: rgba(196,181,253,.35); transform: translateY(-2px); }
    /* the orbiting border arc, tuned for the dark band like .ai-card's */
    .sl-kit .spk-card { position: relative; }
    .sl-kit .spk-card::after {
        content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px;
        pointer-events: none; z-index: 4;
        background: conic-gradient(from var(--plp-orbit), transparent 0deg 300deg, rgba(167,139,250,.55) 336deg, rgba(11,206,252,.75) 350deg, transparent 360deg);
        -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
        -webkit-mask-composite: xor; mask-composite: exclude;
        animation: plp-orbit 6.5s linear infinite;
    }
    .sl-kit .spk-card:nth-child(2)::after { animation-delay: -2.2s; }
    .sl-kit .spk-card:nth-child(3)::after { animation-delay: -4.4s; }
    .sl-kit .spk-ic { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; background: rgba(196,181,253,.14); border: 1px solid rgba(196,181,253,.22); color: var(--violet-pale); margin-bottom: 16px; }
    .sl-kit .spk-ic svg { width: 19px; height: 19px; }
    .sl-kit .spk-card h3 { margin: 0 0 8px; font-size: 17px; font-weight: 600; letter-spacing: -.015em; color: #fff; line-height: 1.3;
        /* .spk-shot is flex:1, so it fills whatever the header leaves —
           which means a title that wraps to two lines on one card makes
           THAT shot shorter than its neighbours. Reserve both lines. */
        min-height: calc(2 * 1.3em); }
    /* The copy is pinned to exactly three lines: without it the third card ran
       to four, and the artefact below it started a line lower than the other
       two — three shots that should read as one row instead stepped down.
       min-height reserves the space; the clamp stops a future edit overflowing
       it. The shot then takes the remaining height (flex:1) so all three end
       level as well as start level. */
    .sl-kit .spk-card > p {
        margin: 0 0 22px; font-size: 14px; line-height: 1.6; color: #b9b3d6;
        min-height: calc(3 * 1.6em);
        display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden;
    }
    .sl-kit .spk-shot {
        margin: auto -26px 0; padding: 16px 18px 20px; font-size: 11.5px; line-height: 1.5;
        background: rgba(10,14,38,.5); border-top: 1px solid rgba(255,255,255,.08);
        flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 8px;
    }
    .sl-kit .spk-you { margin-left: auto; width: fit-content; max-width: 90%; background: linear-gradient(120deg,#6d31e6,#8348f0); color: #fff; border-radius: 12px 12px 3px 12px; padding: 7px 11px; }
    .sl-kit .spk-them { margin-top: 8px; max-width: 96%; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.08); color: #d9d5f0; border-radius: 12px 12px 12px 3px; padding: 9px 11px; }
    .sl-kit .spk-them b { color: #fff; font-weight: 500; }
    .sl-kit .spk-mail { display: flex; gap: 10px; padding: 6px 0; border-bottom: 1px solid rgba(255,255,255,.07); color: #d9d5f0; }
    .sl-kit .spk-mail span { width: 22px; color: #8f8ab0; }
    .sl-kit .spk-body { padding: 10px 0 12px; color: #b9b3d6; font-style: italic; }
    .sl-kit .spk-acts { display: flex; gap: 8px; }
    .sl-kit .spk-acts span { border-radius: 999px; padding: 5px 13px; font-size: 11px; font-weight: 500; color: var(--violet-pale); background: rgba(196,181,253,.12); }
    .sl-kit .spk-acts span.on { background: var(--violet); color: #fff; }
    .sl-kit .spk-trace { display: flex; align-items: center; gap: 8px; padding: 6px 0; color: #b9b3d6; flex-wrap: wrap; }
    .sl-kit .spk-trace b { color: #fff; font-weight: 500; }
    .sl-kit .spk-trace em { font-style: normal; color: #6ee7b7; font-weight: 500; }
    .sl-kit .spk-trace i { width: 7px; height: 7px; border-radius: 99px; flex: none; }
    .sl-kit .spk-trace i.d1 { background: var(--violet-soft); } .sl-kit .spk-trace i.d2 { background: var(--cyan); } .sl-kit .spk-trace i.d3 { background: #34d399; }
    .sl-kit .spk-att { margin-left: auto; font-size: 9px; font-weight: 500; letter-spacing: .05em; text-transform: uppercase; color: #6ee7b7; background: rgba(52,211,153,.14); border-radius: 999px; padding: 3px 8px; }
    @media (max-width: 900px) { .sl-kit .spk-cards { grid-template-columns: 1fr; gap: 16px; } }
    /* ── the primary/outline CTA pair, with the circling shimmer ──────
       Written for a DARK ground (both are white-on-dark), which is where
       every page using them puts them: the hero and the closing band.  */
    @property --sl-ang { syntax: '<angle>'; initial-value: 0deg; inherits: false; }
    .sl-kit .hp-cta-primary, .sl-kit .hp-cta-outline {
        display: inline-flex; align-items: center; justify-content: center; gap: 8px;
        font-family:var(--font-display);
        font-weight:500; font-size: 16px; letter-spacing: .01em;
        border-radius: 999px; color: #fff; text-decoration: none;
    }
    .sl-kit .hp-cta-primary {
        position: relative; padding: 15px 32px;
        background: linear-gradient(120deg, #4f24cf 0%, #6d31e6 48%, #8348f0 100%);
        transition: background .18s ease;
    }
    .sl-kit .hp-cta-primary:hover {
        background: linear-gradient(120deg, #5c2ee0 0%, #7b3bf5 48%, #9159f7 100%);
        color: #fff;
    }
    .sl-kit .sl-hero-shimmer::before {
        content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.6px;
        pointer-events: none; z-index: 1;
        background: conic-gradient(from var(--sl-ang), transparent 0 70%, rgba(255,255,255,.45) 80%, #fff 88%, rgba(255,255,255,.65) 95%, transparent 100%);
        -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
        -webkit-mask-composite: xor; mask-composite: exclude;
        animation: sl-hero-flash 3.4s linear infinite;
    }
    @keyframes sl-hero-flash { to { --sl-ang: 360deg; } }
    @media (prefers-reduced-motion: reduce) { .sl-kit .sl-hero-shimmer::before { animation: none; } }
    .sl-kit .hp-cta-outline {
        padding: 14px 30px; border: 1px solid rgba(255,255,255,.28); background: transparent;
        transition: border-color .18s ease, background .18s ease;
    }
    .sl-kit .hp-cta-outline:hover { border-color: rgba(255,255,255,.5); background: rgba(255,255,255,.06); color: #fff; }
    @media (max-width: 600px) {
        .sl-kit .hp-cta-primary, .sl-kit .hp-cta-outline { width: 100%; }
    }
    /* ── the Ask-Sparkie trigger pill (.hp-spk) ───────────────────────
       The frosted pill that opens .hp-dock, floated off an app mock's
       bottom-right. It lived in index.html's page CSS until /pulse wanted
       the same dock on its own hero — two pages, so it belongs here.
       Placement is the PAGE's business (each hero sits it differently);
       everything below is the object itself. */
    /* the frosted "Ask Sparkie" pill, floated off the app graphic's bottom-right */
    .sl-kit .hp-spk {
        position: absolute; right: 2%; bottom: -26px; z-index: 5;
        display: inline-flex; align-items: center; gap: 8px; white-space: nowrap;
        border-radius: 999px; padding: 8px 8px 8px 14px; color: var(--ink);
        background: rgba(255,255,255,.9);
        backdrop-filter: blur(18px) saturate(150%); -webkit-backdrop-filter: blur(18px) saturate(150%);
        border: 1px solid rgba(255,255,255,.55);
        box-shadow: 0 10px 34px -10px rgba(76,29,149,.45);
    }
    /* a slow rainbow sweep around the pill's edge + a coloured halo under it —
       it's the one thing in the hero you can click, so it asks for the click */
    .sl-kit .hp-spk::before {
        content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.7px;
        pointer-events: none; z-index: 1;
        background: conic-gradient(from var(--sl-ang),
            var(--violet) 0deg, var(--cyan) 90deg, var(--orange) 180deg, var(--pink) 270deg, var(--violet) 360deg);
        -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
        -webkit-mask-composite: xor; mask-composite: exclude;
        animation: sl-hero-flash 4.5s linear infinite; opacity: .9;
    }
    /* the halo is masked to a RING too — a filled blur behind a translucent
       pill bleeds its colours up through the glass and muddies the label */
    .sl-kit .hp-spk::after {
        content: ""; position: absolute; inset: -3px; border-radius: 999px; z-index: -1;
        pointer-events: none; filter: blur(7px); opacity: .55; padding: 5px;
        background: conic-gradient(from var(--sl-ang), var(--violet), var(--cyan), var(--orange), var(--pink), var(--violet));
        -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
        -webkit-mask-composite: xor; mask-composite: exclude;
        animation: sl-hero-flash 4.5s linear infinite; transition: opacity .2s ease;
    }
    .sl-kit .hp-spk:hover::after { opacity: .8; }
    @media (prefers-reduced-motion: reduce) {
        .sl-kit .hp-spk::before, .sl-kit .hp-spk::after { animation: none; }
    }
    .sl-kit .spk-mark { display: inline-flex; }
    .sl-kit .spk-mark svg { width: 22px; height: 22px; display: block; }
    .sl-kit .spk-q { font-size: 13px; font-weight: 500; color: var(--ink); white-space: nowrap; }
    .sl-kit .spk-go {
        display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 99px;
        background: var(--line-2); color: #6b7280;
    }
    .sl-kit .spk-go svg { width: 15px; height: 15px; }
    @media (max-width: 960px) {
        /* the mock stacks and shrinks on mobile; a pill floated off its
           corner has nothing to sit against */
        .sl-kit .hp-spk { display: none; }
    }

    /* ── the CTA pair (cta-pair.php) ──────────────────────────────────
       A bare row of the two buttons, droppable into any page's hero or
       closing band. It sets LAYOUT only — the buttons keep the type and
       treatment above, so a pair on a comparison page is the same object
       as the one on the homepage.
       The --light variant exists because .hp-cta-outline is white ink on a
       white border: correct on a dark hero, invisible on a pale one. Same
       shape, dark ink. (This was living in pulse.html's page CSS; every
       light hero needs it, so it belongs here.) */
    .sl-kit.sl-ctapair, .sl-kit .sl-ctapair {
        display: flex; flex-wrap: wrap; align-items: center; gap: 12px;
        margin: 26px 0 0;
    }
    /* .sl-kit paints its own white ground. That is right for a whole page
       and wrong for a two-button row dropped into someone else's hero — it
       renders as a white block behind the buttons. The pair only wants the
       tokens, not the canvas. */
    .sl-kit.sl-ctapair { background: transparent; }
    .sl-ctapair--centre { justify-content: center; }
    .sl-ctapair--light .hp-cta-outline {
        color: #5b36f5; border-color: #c9bcfb; background: #fff;
    }
    .sl-ctapair--light .hp-cta-outline:hover {
        color: #4a2ae0; border-color: #5b36f5; background: #f6f2ff;
    }
    /* ── the Order Builder mock, assembling itself line by line ──────
       Each .ob-row/.ob-sub/.ob-cta sets its own --d delay.  */
    .sl-kit .hp-ob {
        background: #fff; border: 1px solid #e7e9f4; border-radius: 14px; overflow: hidden;
        box-shadow: var(--e3); font-family:var(--font-body);
    }
    /* ── the Order Builder mock, drawn as the REAL SparkLayer cart draws it:
       tabbed header, search bar, product rows (thumb / name+SKU / stock badge /
       qty stepper on its own line, money right-aligned with per-unit + RRP),
       then the grey footer with the discount pill, struck-through sub-total and
       the green Checkout. Sized so nothing clips — the earlier 318px box cut
       every price off at the decimal.                                        */
    .sl-kit .ob-head {
        display: flex; align-items: center; gap: 7px; position: relative;
        padding: 9px 11px; border-bottom: 1px solid var(--line-2); background: #fff;
    }
    .sl-kit .ob-tab {
        display: inline-flex; align-items: center; gap: 5px;
        font-size: 10.5px; font-weight: 500; color: var(--txt-faint);
        padding: 4px 8px; border-radius: 7px;
    }
    .sl-kit .ob-tab svg { width: 12px; height: 12px; }
    .sl-kit .ob-tab.is-on { color: var(--ink); background: #f2f3f9; }
    .sl-kit .ob-avatar {
        margin-left: auto; flex: none; width: 20px; height: 20px; border-radius: 99px;
        display: grid; place-items: center; background: var(--violet); color: #fff;
        font-family:var(--font-body); font-size: 8px; font-weight: 600;
    }
    /* ── the REAL checkout rail, not an abstract dot row. Its state comes from
       the data-ob-step-N attribute the JS stamps on the host, so one rail
       serves all three steps and can never disagree with the one showing. */
    /* the panel is a ONE-CELL grid (all steps stack in 1/1), so a new child with
       no grid-area lands in an implicit second row — i.e. at the bottom. Pin it
       to the same cell, under the header. */
    .sl-kit .ob-rail {
        grid-area: 1/1; align-self: start; z-index: 2; background: #fff;
        margin-top: 74px; width: 100%;
        display: flex; align-items: flex-start; padding: 6px 12px 5px;
        border-bottom: 1px solid var(--line-2);
    }
    .sl-kit .ob-rs {
        flex: 1; position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px;
        font-size: 7.5px; color: var(--txt-mute); text-align: center;
    }
    .sl-kit .ob-rs i {
        font-style: normal; width: 16px; height: 16px; border-radius: 99px; display: grid; place-items: center;
        background: #e6e9f2; color: var(--txt-faint); font-size: 8px; font-weight: 500; position: relative; z-index: 1;
        transition: background .3s ease, color .3s ease;
    }
    /* the connecting rail sits behind the dots */
    .sl-kit .ob-rs::before { content: ""; position: absolute; top: 8px; right: 50%; width: 100%; height: 2px; background: #e6e9f2; transition: background .3s ease; }
    .sl-kit .ob-rs:first-child::before { display: none; }
    /* done + current. Three rail steps, three builder screens — 1:1, so the
       rail can't drift out of step with what's on show. */
    .sl-kit .hp-ob[data-ob-step-1] .r1 i,
    .sl-kit .hp-ob[data-ob-step-2] .r1 i, .sl-kit .hp-ob[data-ob-step-2] .r2 i,
    .sl-kit .hp-ob[data-ob-step-3] .r1 i, .sl-kit .hp-ob[data-ob-step-3] .r2 i,
    .sl-kit .hp-ob[data-ob-step-3] .r3 i {
        background: var(--violet); color: #fff;
    }
    .sl-kit .hp-ob[data-ob-step-2] .r2::before,
    .sl-kit .hp-ob[data-ob-step-3] .r2::before,
    .sl-kit .hp-ob[data-ob-step-3] .r3::before { background: var(--violet); }
    .sl-kit .hp-ob[data-ob-step-1] .r1,
    .sl-kit .hp-ob[data-ob-step-2] .r2,
    .sl-kit .hp-ob[data-ob-step-3] .r3 { color: var(--violet); }
    /* a step already behind you shows a tick rather than its number */
    .sl-kit .hp-ob[data-ob-step-2] .r1 i,
    .sl-kit .hp-ob[data-ob-step-3] .r1 i, .sl-kit .hp-ob[data-ob-step-3] .r2 i { font-size: 0; }
    .sl-kit .hp-ob[data-ob-step-2] .r1 i::after,
    .sl-kit .hp-ob[data-ob-step-3] .r1 i::after,
    .sl-kit .hp-ob[data-ob-step-3] .r2 i::after { content: "\2713"; font-size: 9px; }
    /* the steps clear the header, the search box and the rail above them */
    .sl-kit .ob-step { padding-top: 116px; }

    /* search */
    .sl-kit .ob-search {
        display: flex; align-items: center; gap: 6px; margin: 9px 11px 2px;
        padding: 6px 9px; border: 1px solid var(--line); border-radius: 8px;
        font-size: 10px; color: var(--txt-mute); background: #fff;
    }
    .sl-kit .ob-search svg { width: 11px; height: 11px; flex: none; }
    /* product rows */
    .sl-kit .ob-row { display: flex; align-items: flex-start; gap: 9px; padding: 7px 11px; border-top: 1px solid #f4f5fa; }
    .sl-kit .ob-row:first-of-type { border-top: 0; }
    .sl-kit .ob-sw { flex: none; width: 30px; height: 34px; border-radius: 6px; box-shadow: inset 0 0 0 1px rgba(10,37,64,.08); }
    .sl-kit .ob-name { min-width: 0; flex: 1; display: block; }
    .sl-kit .ob-name b { display: block; font-size: 11px; font-weight: 500; line-height: 1.3; color: var(--ink); }
    .sl-kit .ob-name > i { display: block; font-style: normal; font-size: 8.5px; color: var(--txt-mute); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .sl-kit .ob-stock { display: inline-flex; align-items: center; gap: 4px; margin-top: 4px; font-style: normal; font-size: 8.5px; font-weight: 500; color: var(--good); }
    .sl-kit .ob-stock svg { width: 9px; height: 9px; flex: none; }
    .sl-kit .ob-stock s { text-decoration: none; background: var(--good-soft); border-radius: 99px; padding: 1px 5px; font-size: 7.5px; }
    .sl-kit .ob-step2 { display: flex; align-items: center; gap: 7px; margin-top: 4px; }
    .sl-kit .ob-qty {
        display: inline-flex; align-items: center; gap: 8px; flex: none;
        border: 1px solid var(--line); border-radius: 6px; padding: 2px 7px;
        font-size: 9.5px; color: var(--txt-mute);
    }
    .sl-kit .ob-qty b { font-weight: 500; font-size: 10px; color: var(--ink); }
    .sl-kit .ob-rule { font-style: normal; font-size: 8px; color: var(--txt-mute); }
    .sl-kit .ob-money { flex: none; text-align: right; }
    .sl-kit .ob-money b { display: block; font-family:var(--font-body); font-size: 12px; font-weight: 600; color: var(--ink); }
    .sl-kit .ob-money i { display: block; font-style: normal; font-size: 8px; color: var(--txt-mute); margin-top: 1px; white-space: nowrap; }
    /* the grey footer */
    .sl-kit .ob-foot { margin-top: 2px; padding: 8px 11px 9px; background: #f4f5fa; border-top: 1px solid var(--line-2); }
    .sl-kit .ob-fr { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 7px; }
    .sl-kit .ob-disc { font-size: 9px; color: var(--violet); font-weight: 500; }
    .sl-kit .ob-pill { flex: none; font-size: 7.5px; font-weight: 500; color: #fff; background: #10b981; border-radius: 99px; padding: 2px 7px; }
    .sl-kit .ob-sub { font-size: 10px; font-weight: 500; color: var(--ink); }
    .sl-kit .ob-sub i { font-style: normal; font-weight: 400; color: var(--txt-mute); font-size: 9px; }
    .sl-kit .ob-tot2 { flex: none; display: flex; align-items: baseline; gap: 6px; }
    .sl-kit .ob-tot2 s { font-size: 9.5px; color: var(--txt-mute); }
    .sl-kit .ob-tot2 b { font-family:var(--font-body); font-size: 13.5px; font-weight: 600; color: var(--good); }
    .sl-kit .ob-go {
        margin-top: 2px; border-radius: 7px; background: #10b981; color: #fff;
        text-align: center; padding: 8px; font-size: 11px; font-weight: 500;
    }
    .sl-kit .ob-fine { margin-top: 6px; text-align: center; font-size: 7.5px; color: var(--txt-mute); }
    /* steps without the cart footer supply their own gutter for the button */
    /* Fill the step by GROWING its content block, not by pushing the button
       down with an auto margin — that just moved the dead space above the
       button instead of removing it. The grey totals panel stretches, the
       action sits directly beneath it, and every step ends flush. */
    .sl-kit .ob-step > .ob-go { margin: 6px 11px 9px; }
    .sl-kit .ob-step > .ob-foot { margin-top: auto; }
    .sl-kit .ob-step > .ob-tot { flex: 1 1 auto; display: flex; flex-direction: column; justify-content: center; }
    /* the placed screen centres in whatever room it has */
    .sl-kit .ob-step--done { justify-content: center; }
    .sl-kit .ob-step--done > .ob-note { margin-top: 0; padding: 4px 14px 8px; font-size: 9.5px; }
    /* ── the Order Builder plays its three steps: basket → confirm → placed ──
       All three stack in one grid cell so the mock never changes height mid-
       cycle (a resizing overlay drags the hero around). The step animations
       are keyed off .is-on, so each replays every time it comes round.      */
    .sl-kit .hp-ob[data-ob-cycle] { display: grid; }
    .sl-kit .hp-ob[data-ob-cycle] > .ob-head { grid-area: 1/1; align-self: start; z-index: 3; background: #fff; width: 100%; }
    /* the search is permanent cart chrome, so it joins the header and the rail
       in the overlay stack rather than living inside step 1 */
    .sl-kit .hp-ob[data-ob-cycle] > .ob-search { grid-area: 1/1; align-self: start; z-index: 3; background: #fff; margin-top: 47px; }
    .sl-kit .ob-step {
        grid-area: 1/1;
        /* each step FILLS the cell and pushes its footer/CTA to the bottom, so
           the short steps don't leave a slab of dead white under them */
        display: flex; flex-direction: column;
        opacity: 0; visibility: hidden; transform: translateY(7px);
        transition: opacity .32s ease, transform .4s cubic-bezier(.22,.8,.3,1), visibility .32s;
    }
    .sl-kit .ob-step.is-on { opacity: 1; visibility: visible; transform: none; }
    /* every child with a --d delay animates in, but only while its step is up */
    .sl-kit .ob-step > * { opacity: 0; }
    .sl-kit .ob-step.is-on > * { animation: ob-in .5s cubic-bezier(.22,.8,.3,1) both; animation-delay: var(--d, 0s); }
    /* this keyframe is what the rows/steps animate on — deleting it doesn't
       error, it just leaves every child stuck at the opacity:0 above */
    @keyframes ob-in { from { opacity: 0; transform: translateY(9px); } to { opacity: 1; transform: none; } }
    /* step 2 — the confirm rows */
    .sl-kit .ob-conf { display: flex; align-items: flex-start; gap: 12px; padding: 5px 11px; border-top: 1px solid #f4f5fa; font-size: 11.5px; }
    .sl-kit .ob-conf:first-child { border-top: 0; }
    .sl-kit .ob-ck { flex: none; width: 72px; color: var(--txt-faint); }
    .sl-kit .ob-cv { min-width: 0; flex: 1; color: var(--ink); font-weight: 500; }
    .sl-kit .ob-cv i { display: block; font-style: normal; font-weight: 400; font-size: 10px; color: var(--txt-faint); margin-top: 1px; }
    .sl-kit .ob-tot { margin-top: 2px; padding: 5px 11px; background: #fbfbfe; border-top: 1px solid #f2f3f8; }
    .sl-kit .ob-tl { display: flex; justify-content: space-between; align-items: baseline; font-size: 10.5px; color: var(--txt-faint); padding: 1px 0; }
    .sl-kit .ob-tl--sum { margin-top: 3px; padding-top: 5px; border-top: 1px solid var(--line-2); color: var(--ink); }
    /* the line items that fill the panel — the totals alone left it half empty */
    .sl-kit .ob-tl--item { align-items: flex-start; padding: 2px 0; }
    .sl-kit .ob-tl--item > span:first-child { display: flex; flex-direction: column; line-height: 1.3; min-width: 0; }
    .sl-kit .ob-tl--item b { font-size: 9.5px; color: var(--ink); }
    .sl-kit .ob-tl--item i { font-style: normal; font-size: 8px; color: var(--txt-mute); }
    .sl-kit .ob-tl--item > span:last-child { font-family:var(--font-body); font-size: 10px; font-weight: 600; color: var(--ink); }
    .sl-kit .ob-tl--rule { margin-top: 3px; padding-top: 4px; border-top: 1px solid var(--line-2); }
    .sl-kit .ob-tl--sum span:last-child { font-family:var(--font-body); font-size: 13px; font-weight: 600; }
    /* step 3 — placed */

    .sl-kit .ob-step--done { align-items: center; justify-content: center; }
    .sl-kit .ob-done { text-align: center; padding: 0 18px; }
    .sl-kit .ob-tick {
        display: inline-grid; place-items: center; width: 52px; height: 52px; border-radius: 99px;
        background: var(--good-soft); color: var(--good); margin-bottom: 14px;
    }
    .sl-kit .ob-tick svg { width: 26px; height: 26px; }
    .sl-kit .ob-done b { display: block; font-family:var(--font-display); font-size: 17px; font-weight: 600; color: var(--ink); }
    .sl-kit .ob-done i { display: block; font-style: normal; font-size: 11.5px; color: var(--txt-faint); margin-top: 5px; }
    .sl-kit .ob-done em { display: block; font-style: normal; font-size: 10.5px; color: #a4adbd; margin-top: 14px; }
    .sl-kit .ob-note { padding: 7px 14px 11px; text-align: center; font-size: 10px; color: var(--txt-faint); }
    @media (prefers-reduced-motion: reduce) {
        .sl-kit .ob-step { transition: opacity .2s ease; transform: none; }
        .sl-kit .ob-step.is-on > * { animation: none; opacity: 1; }
    }
    @media (prefers-reduced-motion: reduce) {
        .sl-kit .ob-row, .sl-kit .ob-sub, .sl-kit .ob-cta { animation: none; }
    }
    /* ── bento card art: each card shows the thing it describes ────────
       1 collection→PDP flip, 2 the Order Builder, 3 the quote checkout,
       4 the rep's own book. Drawn small; they read as screenshots.       */
    .sl-kit .b-shot--flush { padding: 0 !important; background: none !important; border: 0 !important; box-shadow: none !important; }
    /* the card crops this panel, so rounded bottom corners leave a visible
       lip against the wash — square them like every other cropped mock */
    .sl-kit .hp-ob--inline {
        position: static; width: 100%;
        box-shadow: 0 14px 30px -18px rgba(20,20,55,.35);
        border-bottom-left-radius: 0; border-bottom-right-radius: 0;
        border-bottom: 0;
    }
    /* the storefront chrome shared by card 1 */
    .sl-kit .sf-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 11px; border-bottom: 1px solid var(--line-2); font-size: 9.5px; color: var(--txt-mute); }
    .sl-kit .sf-brand { display: inline-flex; align-items: center; gap: 6px; font-weight: 500; color: var(--ink); }
    .sl-kit .sf-brand i { width: 12px; height: 12px; border-radius: 4px; background: linear-gradient(135deg,var(--violet),var(--cyan)); flex: none; }
    /* the flip: two faces in one cell, so the card never changes height */
    .sl-kit .sl-flip { display: grid; }
    .sl-kit .sl-flip > .sf-top { grid-area: 1/1; align-self: start; z-index: 2; background: #fff; }
    .sl-kit .sl-face { grid-area: 1/1; padding-top: 33px; opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity .35s ease, transform .45s cubic-bezier(.22,.8,.3,1), visibility .35s; }
    .sl-kit .sl-face.is-on { opacity: 1; visibility: visible; transform: none; }
    /* card 1 — ONE product, three accounts. The card claims each account gets
       its own price, terms and pack rules; a picture of a store doesn't show
       that, so this shows the same tee priced three ways side by side. It's
       the one thing only B2B does, and it proves the whole claim at a glance. */
    .sl-kit .pl-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 11px 12px; border-bottom: 1px solid var(--line-2); }
    .sl-kit .pl-prod { display: flex; align-items: center; gap: 9px; min-width: 0; }
    .sl-kit .pl-prod img { width: 34px; height: 34px; border-radius: 7px; object-fit: cover; flex: none; }
    .sl-kit .pl-prod > span { display: flex; flex-direction: column; line-height: 1.3; min-width: 0; }
    .sl-kit .pl-prod b { font-size: 11.5px; color: var(--ink); }
    .sl-kit .pl-prod i { font-style: normal; font-size: 8.5px; color: var(--txt-mute); }
    .sl-kit .pl-note { flex: none; font-size: 8px; color: var(--violet-3); background: #f4efff; border: 1px solid #e6dcff; border-radius: 99px; padding: 3px 9px; }
    .sl-kit .pl-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 8px; padding: 11px 12px; }
    .sl-kit .pl-col { display: flex; flex-direction: column; border: 1px solid var(--line-2); border-radius: 9px; padding: 9px; background: #fff; }
    .sl-kit .pl-col--best { border-color: #d9c9ff; box-shadow: 0 0 0 2px rgba(103,30,243,.08); }
    .sl-kit .pl-who { display: flex; flex-direction: column; gap: 3px; }
    .sl-kit .pl-tag { align-self: flex-start; font-size: 7px; letter-spacing: .06em; text-transform: uppercase; border-radius: 99px; padding: 2px 7px; }
    .sl-kit .pl-tag--pub { color: #6b7280; background: var(--line-2); }
    .sl-kit .pl-tag--bronze { color: #92580b; background: #fdf0d8; }
    .sl-kit .pl-tag--gold { color: #fff; background: linear-gradient(120deg,var(--violet-2),var(--violet)); }
    .sl-kit .pl-who i { font-style: normal; font-size: 8.5px; color: var(--txt-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .sl-kit .pl-price { margin-top: 8px; display: flex; flex-direction: column; }
    .sl-kit .pl-price em { font-style: normal; font-size: 7px; color: var(--txt-mute); letter-spacing: .04em; text-transform: uppercase; }
    .sl-kit .pl-price b { font-family:var(--font-body); font-size: 18px; font-weight: 600; color: var(--ink); line-height: 1.15; }
    .sl-kit .pl-price s { font-size: 8px; color: var(--txt-mute); }
    .sl-kit .pl-col--best .pl-price b { color: var(--violet); }
    .sl-kit .pl-lock { margin-top: 6px; font-size: 8px; color: var(--txt-faint); background: #f4f5fa; border-radius: 5px; padding: 5px 6px; text-align: center; }
    .sl-kit .pl-terms { margin: 8px 0 0; padding: 0; list-style: none; display: grid; gap: 4px; }
    .sl-kit .pl-terms li { position: relative; padding-left: 12px; font-size: 8.5px; color: var(--ink); line-height: 1.35; }
    .sl-kit .pl-terms li::before { content: ""; position: absolute; left: 0; top: 4px; width: 5px; height: 5px; border-radius: 99px; background: #cbd2e0; }
    .sl-kit .pl-terms li.is-off { color: var(--txt-mute); }
    .sl-kit .pl-terms li.is-off::before { background: #e2e6ef; }
    .sl-kit .pl-terms li.is-muted { color: var(--txt-mute); }
    .sl-kit .pl-terms li.is-win { color: var(--good); }
    .sl-kit .pl-terms li.is-win::before { background: #10b981; }
    .sl-kit .pl-cta { margin-top: auto; padding-top: 9px; }
    .sl-kit .pl-cta::after { content: "Add to Cart"; display: block; border-radius: 5px; background: var(--violet); color: #fff; text-align: center; padding: 5px; font-size: 8px; }
    .sl-kit .pl-cta { font-size: 0; }
    .sl-kit .pl-foot { display: flex; align-items: center; gap: 7px; padding: 9px 12px; border-top: 1px solid var(--line-2); background: #fbfbfe; font-size: 8.5px; color: var(--txt-faint); }
    .sl-kit .pl-dot { width: 6px; height: 6px; border-radius: 99px; background: var(--violet); flex: none; }
    @media (max-width: 620px) {
        .sl-kit .pl-grid { grid-template-columns: 1fr; }
        .sl-kit .pl-head { flex-wrap: wrap; }
        .sl-kit .pl-note { order: 3; width: 100%; text-align: center; }
    }

    /* card 3 — the quote checkout. RESTORED: these rules sat between the card-1
       block and the card-3 flip block, and a wholesale replacement of card 1
       took them out with it — the card rendered as unstyled text. */
    .sl-kit .q-close { font-size: 9px; color: var(--txt-mute); }
    .sl-kit .q-rail { display: flex; align-items: flex-start; padding: 10px 11px 2px; }
    .sl-kit .q-s { flex: 1; position: relative; display: flex; flex-direction: column; align-items: center; gap: 3px; font-size: 7.5px; color: var(--txt-mute); text-align: center; }
    .sl-kit .q-s i { font-style: normal; width: 16px; height: 16px; border-radius: 99px; display: grid; place-items: center; background: #e6e9f2; color: var(--txt-faint); font-size: 8px; font-weight: 500; position: relative; z-index: 1; }
    .sl-kit .q-s.is-done i, .sl-kit .q-s.is-on i { background: var(--violet); color: #fff; }
    .sl-kit .q-s.is-on { color: var(--violet); }
    .sl-kit .q-s::before { content: ""; position: absolute; top: 8px; right: 50%; width: 100%; height: 2px; background: #e6e9f2; }
    .sl-kit .q-s:first-child::before { display: none; }
    .sl-kit .q-s.is-on::before, .sl-kit .q-s.is-done::before { background: var(--violet); }
    .sl-kit .q-body { padding: 8px 11px 11px; }
    .sl-kit .q-note { border-radius: 6px; padding: 5px 7px; font-size: 8px; margin-bottom: 5px; }
    .sl-kit .q-note--who { background: #f4efff; border: 1px solid #e6dcff; color: #4c1d95; }
    .sl-kit .q-note--quote { background: #e6f6fd; border: 1px solid #cdeafa; color: #075f80; }
    .sl-kit .q-l { display: block; margin: 7px 0 3px; font-size: 8px; color: var(--ink); }
    .sl-kit .q-in { display: flex; align-items: center; justify-content: space-between; gap: 6px; border: 1px solid var(--line); border-radius: 6px; padding: 5px 7px; font-size: 8.5px; color: var(--ink); }
    .sl-kit .q-in--ph { color: var(--txt-mute); }
    .sl-kit .q-go { margin-top: 9px; border-radius: 6px; background: #10b981; color: #fff; text-align: center; padding: 7px; font-size: 10px; }

    /* card 3 — the flip to the submitted quote; one cell so no height jump */
    .sl-kit .q-flip { display: grid; }
    .sl-kit .q-flip > .sl-face { grid-area: 1/1; padding-top: 0; }
    .sl-kit .q-body--done { text-align: center; padding: 14px 11px 12px; }
    .sl-kit .q-body--done .ob-tick { width: 34px; height: 34px; margin-bottom: 8px; }
    .sl-kit .q-body--done > b { display: block; font-family:var(--font-display); font-size: 13px; font-weight: 600; color: var(--ink); }
    .sl-kit .q-body--done > i { display: block; font-style: normal; font-size: 9px; color: var(--txt-faint); margin-top: 3px; }
    .sl-kit .q-sum { margin-top: 11px; text-align: left; border: 1px solid var(--line-2); border-radius: 7px; overflow: hidden; }
    .sl-kit .q-sr { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 6px 9px; font-size: 8.5px; color: var(--txt-faint); }
    .sl-kit .q-sr span:last-child { font-family:var(--font-body); font-weight: 600; font-size: 11px; color: var(--ink); }
    .sl-kit .q-sr--w { border-top: 1px solid #f4f5fa; background: #fbfbfe; }
    .sl-kit .q-wait { font-family:var(--font-body); font-size: 7.5px !important; font-weight: 500 !important; color: #92580b !important; background: #fdf0d8; border-radius: 99px; padding: 2px 7px; }
    .sl-kit .q-fine { margin-top: 9px; font-size: 7.5px; color: var(--txt-mute); }

    /* card 4 — the rep's book */
    .sl-kit .ag-top { display: flex; align-items: center; gap: 9px; padding: 10px 11px; border-bottom: 1px solid var(--line-2); }
    .sl-kit .ag-av { flex: none; width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; background: linear-gradient(140deg,var(--violet-2),#a855f7); color: #fff; font-family:var(--font-body); font-size: 10px; font-weight: 600; }
    .sl-kit .ag-main { min-width: 0; flex: 1; display: flex; flex-direction: column; line-height: 1.3; }
    .sl-kit .ag-main b { font-size: 10.5px; font-weight: 500; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .sl-kit .ag-main i { font-style: normal; font-size: 8.5px; color: var(--txt-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .sl-kit .ag-on { flex: none; font-size: 7.5px; font-weight: 500; color: var(--good); background: var(--good-soft); border-radius: 99px; padding: 3px 8px; }
    /* a stat strip so the card carries the rep's day, not just a log */
    .sl-kit .ag-stats { display: grid; grid-template-columns: repeat(3,1fr); gap: 7px; padding: 10px 11px 12px; }
    .sl-kit .ag-stat { border: 1px solid var(--line-2); border-radius: 7px; padding: 6px 8px; }
    .sl-kit .ag-stat i { display: block; font-style: normal; font-size: 7px; color: var(--txt-mute); letter-spacing: .04em; text-transform: uppercase; }
    .sl-kit .ag-stat b { display: block; margin-top: 1px; font-family:var(--font-body); font-size: 14px; font-weight: 600; color: var(--ink); }
    .sl-kit .ag-stat em { display: block; font-style: normal; font-size: 7.5px; color: var(--txt-faint); }
    .sl-kit .ag-ic--cyan { background: #e0f5fd; color: #0b7ea3; }
    .sl-kit .ag-acting {
        display: flex; align-items: center; gap: 6px; padding: 7px 11px;
        background: #f4efff; border-bottom: 1px solid #e6dcff; font-size: 9px; color: #4c1d95;
    }
    .sl-kit .ag-acting b { font-weight: 500; }
    .sl-kit .ag-dot { flex: none; width: 6px; height: 6px; border-radius: 99px; background: var(--violet); }
    .sl-kit .ag-sw { margin-left: auto; flex: none; font-size: 8px; font-weight: 500; color: var(--violet); }
    .sl-kit .ag-feed { padding: 3px 11px 0; flex: 1; }
    .sl-kit .ag-ev { display: flex; align-items: center; gap: 9px; padding: 8px 0; border-bottom: 1px solid #f4f5fa; }
    .sl-kit .ag-ev:last-child { border-bottom: 0; }
    .sl-kit .ag-ic { flex: none; width: 22px; height: 22px; border-radius: 7px; display: grid; place-items: center; }
    .sl-kit .ag-ic svg { width: 11px; height: 11px; }
    .sl-kit .ag-ic--violet { background: #efe7ff; color: var(--violet-3); }
    .sl-kit .ag-ic--amber { background: #fdf0d8; color: #92580b; }
    .sl-kit .ag-ic--green { background: var(--good-soft); color: var(--good); }
    .sl-kit .ag-when { flex: none; font-size: 8px; color: var(--txt-mute); }
    /* the switch home's own bits: a section rule, an account monogram, the
       likely-order value and the Resume / Start pill */
    .sl-kit .ag-sec { display: flex; align-items: center; gap: 6px; padding: 9px 0 5px; font-size: 7.5px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--txt-mute); }
    .sl-kit .ag-sec span { font-family:var(--font-body); font-weight: 600; font-size: 8px; color: var(--txt-faint); background: #f2f3f9; border-radius: 99px; padding: 1px 5px; letter-spacing: 0; }
    .sl-kit .ag-sec::after { content: ""; flex: 1; height: 1px; background: #f2f3f8; }
    .sl-kit .ag-mo { flex: none; width: 22px; height: 22px; border-radius: 6px; display: grid; place-items: center; color: #fff; font-family:var(--font-body); font-size: 8px; font-weight: 600; }
    .sl-kit .ag-val { flex: none; font-family:var(--font-body); font-weight: 600; font-size: 9.5px; color: var(--ink); }
    .sl-kit .ag-go { flex: none; font-size: 8px; font-weight: 500; color: var(--violet); background: #f3eeff; border: 1px solid #e6dcff; border-radius: 99px; padding: 3px 8px; }
    .sl-kit .ag-go--ghost { color: var(--txt-faint); background: #f6f7fb; border-color: var(--line-2); }
    .sl-kit .ag-ev--win .ag-main b { color: var(--good); }
    .sl-kit .ag-foot {
        display: flex; align-items: center; justify-content: space-between; gap: 8px;
        margin-top: 4px; padding: 8px 11px; background: #f6fbf8; border-top: 1px solid #e3f3ea;
        font-size: 8.5px; color: #6b7280;
    }
    .sl-kit .ag-foot b { font-weight: 500; color: var(--good); }
    .sl-kit .ag-comm { color: var(--txt-faint); }
    .sl-kit .ag-comm b { font-family:var(--font-body); font-weight: 600; font-size: 10px; }

    @media (max-width: 620px) {
        .sl-kit .sl-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
        .sl-kit .sl-pdp { position: static; grid-template-columns: 72px minmax(0,1fr); margin-top: 10px; box-shadow: none; }
    }

    /* ── the commission panel: a chart first, the bands as the read-out ──
       The body face is capped at 500 (see the type rule) — these are product-mock
       numerals, so weight comes from Geist on the figures, not faux-bold. */
    .sl-kit .cm-chart { margin: 10px 14px 0; padding: 10px 12px 8px; background: #fbfbfe; border: 1px solid var(--line-2); border-radius: 9px; }
    .sl-kit .cm-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 10px; font-weight: 500; color: var(--ink); }
    .sl-kit .cm-key { display: inline-flex; align-items: center; gap: 5px; font-size: 8.5px; font-weight: 400; color: var(--txt-faint); }
    .sl-kit .cm-key i { width: 7px; height: 7px; border-radius: 2px; display: inline-block; }
    .sl-kit .cm-k1 { background: var(--violet-soft); } .sl-kit .cm-k2 { background: var(--violet); }
    .sl-kit .cm-bars { display: grid; grid-template-columns: repeat(6,1fr); gap: 8px; align-items: end; height: 92px; margin-top: 10px; }
    .sl-kit .cm-b { position: relative; display: flex; flex-direction: column-reverse; align-items: stretch; height: 100%; justify-content: flex-start; }
    .sl-kit .cm-b i { display: block; background: var(--violet-soft); border-radius: 3px 3px 0 0; }
    .sl-kit .cm-b i.b2 { background: var(--violet); border-radius: 0; margin-bottom: 1px; }
    .sl-kit .cm-b em { position: absolute; left: 0; right: 0; bottom: -15px; text-align: center; font-style: normal; font-size: 8px; color: var(--txt-mute); }
    .sl-kit .cm-b.is-on em { color: var(--violet); font-weight: 500; }
    .sl-kit .cm-bars { margin-bottom: 16px; }
    .sl-kit .cm-bands { margin-top: 10px; padding: 0 14px 12px; }
    .sl-kit .cm-band { display: flex; align-items: center; gap: 9px; padding: 8px 0; border-top: 1px solid #f2f3f8; }
    .sl-kit .cm-band:first-child { border-top: 0; }
    .sl-kit .cm-sw { flex: none; width: 9px; height: 9px; border-radius: 3px; }
    .sl-kit .cm-bmain { min-width: 0; flex: 1; display: flex; flex-direction: column; line-height: 1.3; }
    .sl-kit .cm-bmain b { font-size: 11px; font-weight: 500; color: var(--ink); }
    .sl-kit .cm-bmain i { font-style: normal; font-size: 9.5px; color: var(--txt-faint); }
    .sl-kit .cm-v { flex: none; font-family:var(--font-body); font-size: 12px; font-weight: 600; color: var(--ink); }
    .sl-kit .cm-band--sum { border-top: 1px solid var(--line); margin-top: 2px; padding-top: 9px; }
    .sl-kit .cm-v--sum { font-size: 14px; color: var(--violet); }

    /* ── dark CTA extras ── */
    .sl-kit .hp-cta-ctas { display: flex; justify-content: center; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 26px; }
    .sl-kit .hp-cta-ghost { color: #fff; background: rgba(255,255,255,.1); }
    .sl-kit .hp-cta-ghost:hover { background: rgba(255,255,255,.16); color: #fff; }
    .sl-kit .hp-cta-sub { margin-top: 18px; text-align: center; font-size: 13px; color: #8f96c0; }

    @media (max-width: 960px) {
        .sl-kit .acc-art { width: auto; min-width: 0; margin: 0; }
        .sl-kit .acc-art .sf { width: auto; }
        .sl-kit .loop { grid-template-columns: 1fr; gap: 16px; }
        .sl-kit .integrates-logos img { width: 68px; height: 68px; }
        .sl-pb-grid { grid-template-columns: minmax(0,1fr); gap: 2.2rem; }
        .sl-pb-mockwrap { padding: 0; }
        .sl-pb-float { position: static; max-width: none; margin-top: 12px; }
        .sl-pb-kpi { padding: 6px 7px; }
        .sl-pb-kpi b { font-size: 12.5px; }
        .sl-pb-kpi i { font-size: 8.5px; }
        .sl-pb-kpi em { font-size: 8.5px; }
    }
    @media (min-width: 961px) and (max-width: 1120px) {
        .sl-kit .hs-store { width: 66%; }
    }

    /* ── mock "bold", softened ─────────────────────────────────────────
       At 10-12px, body-face 500 reads heavy — and the mock scale uses 400/500
       here (450/500/600 all resolve to the same face), so the step down is 400
       with COLOUR carrying the hierarchy: ink for the thing, grey for its
       detail, which is how the real UI does it. Geist keeps 800 on the money,
       where it reads as data rather than as bold text.
       This has to sit at the END of the kit: the per-component rules below
       are the same specificity, so source order decides. */
    .sl-kit .hp-ob b, .sl-kit .b-shot b, .sl-kit .sl-pb-mock b,
    .sl-kit .mock-window b, .sl-kit .art-card b, .sl-kit .float b,
    .sl-kit .hp-ob .ob-name b, .sl-kit .hp-ob .ob-cv,
    .sl-kit .hp-ob .ob-sub, .sl-kit .ag-main b, .sl-kit .cm-bmain b {
        font-weight: 500; color: var(--ink);
    }
    /* the figures stay heavy — different font, reads as data */
    .sl-kit .hp-ob .ob-money b, .sl-kit .hp-ob .ob-tot2 b,
    .sl-kit .hp-ob .ob-tl--sum span:last-child, .sl-kit .cm-v,
    .sl-kit .sl-price em, .sl-kit .ob-done b, .sl-kit .q-sr span:last-child {
        font-weight: 600;
    }

    /* ── the Sparkie dock ────────────────────────────────────────────
       A light panel that slides up over the hero cockpit graphic, mirroring
       the real Pulse dock docked inside the app. It lives INSIDE .mock and is
       positioned against it. Opened by any [data-sparkie-open]; closed by the
       scrim, the ×, or Escape. Behaviour lives in sl-kit.js.          */
    .sl-kit .hp-dock-scrim {
        position: absolute; inset: 0; z-index: 20; border-radius: var(--r-sm);
        background: rgba(10,14,38,.42);
        backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px);
        opacity: 0; pointer-events: none; transition: opacity .28s ease;
    }
    .sl-kit .hp-dock-scrim.is-open { opacity: 1; pointer-events: auto; }
    /* while the dock is open, the protruding order-builder + pill would float
       undimmed beside it — fade them so the cockpit reads as one dimmed app */
    .sl-kit .mock.mock--dock .hp-store,
    .sl-kit .mock.mock--dock .float,
    .sl-kit .mock.mock--dock .hp-spk { opacity: 0; visibility: hidden; transition: opacity .25s ease, visibility .25s; }
    .sl-kit .hp-dock {
        position: absolute; z-index: 21; left: 50%; bottom: 10px;
        width: min(360px, calc(100% - 20px)); max-height: calc(100% - 20px);
        display: flex; flex-direction: column; overflow: hidden;
        background: #fff; border: 1px solid #e7e9f4; border-radius: 14px;
        box-shadow: 0 22px 44px -16px rgba(20,20,55,.6), 0 4px 14px -8px rgba(20,20,55,.4);
        opacity: 0; transform: translate(-50%, 16px); transform-origin: bottom center;
        pointer-events: none; transition: opacity .3s ease, transform .38s cubic-bezier(.22,.8,.3,1);
    }
    .sl-kit .hp-dock.is-open { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
    /* header */
    .sl-kit .hpd-head { display: flex; align-items: center; gap: 9px; padding: 10px 10px 10px 13px; border-bottom: 1px solid var(--line-2); }
    .sl-kit .hpd-brand { display: flex; align-items: center; gap: 10px; min-width: 0; }
    .sl-kit .hpd-head .spk-mark svg { width: 21px; height: 21px; display: block; }
    .sl-kit .hpd-id { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
    .sl-kit .hpd-id b { font-family:var(--font-display); font-size: 13px; font-weight: 600; color: var(--ink); }
    .sl-kit .hpd-id i { font-style: normal; font-size: 10px; color: var(--txt-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .sl-kit .hpd-x { margin-left: auto; flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 9px; color: #6b7280; background: none; border: 0; cursor: pointer; transition: background .15s ease, color .15s ease; }
    .sl-kit .hpd-x:hover { background: #f2f3f9; color: var(--ink); }
    .sl-kit .hpd-x svg { width: 17px; height: 17px; }
    /* conversation */
    .sl-kit .hpd-body { flex: 1; min-height: 0; overflow-y: auto; padding: 14px 13px; background: linear-gradient(180deg,#fbfbfe,#f7f6fd); }
    .sl-kit .hpd-you { margin: 0 0 10px auto; width: fit-content; max-width: 86%; background: linear-gradient(120deg,#6d31e6,#8348f0); color: #fff; font-size: 12px; line-height: 1.4; border-radius: 12px 12px 4px 12px; padding: 7px 11px; }
    .sl-kit .hpd-them { max-width: 96%; }
    .sl-kit .hpd-them > p { margin: 0 0 8px; font-size: 12px; line-height: 1.45; color: var(--txt); }
    .sl-kit .hpd-them > p:last-child { margin-bottom: 0; }
    .sl-kit .hpd-row { display: flex; align-items: center; gap: 8px; padding: 7px 9px; margin: 0 0 6px; background: #fff; border: 1px solid #eceef4; border-radius: 12px; }
    .sl-kit .hpd-av { flex: none; width: 25px; height: 25px; border-radius: 7px; display: grid; place-items: center; color: #fff; font-size: 9.5px; font-weight: 600; font-family:var(--font-body); }
    .sl-kit .hpd-main { min-width: 0; flex: 1; display: flex; flex-direction: column; line-height: 1.3; }
    .sl-kit .hpd-main b { font-size: 11.5px; font-weight: 500; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .sl-kit .hpd-main i { font-style: normal; font-size: 10px; color: var(--txt-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .sl-kit .hpd-act { flex: none; font-size: 10px; font-weight: 500; color: var(--violet-3); background: #efe7ff; border-radius: 999px; padding: 4px 9px; white-space: nowrap; cursor: pointer; transition: background .15s ease; }
    .sl-kit .hpd-act:hover { background: #e4d7ff; }
    /* the answer streams in on open */
    .sl-kit .hpd-anim { opacity: 0; }
    .sl-kit .hp-dock.is-open .hpd-anim { animation: hpd-in .5s cubic-bezier(.22,.8,.3,1) both; animation-delay: var(--d, 0s); }
    @keyframes hpd-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
    /* footer: chips + composer */
    .sl-kit .hpd-foot { flex: none; border-top: 1px solid var(--line-2); padding: 9px 11px 11px; background: #fff; }
    .sl-kit .hpd-chips { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 9px; }
    .sl-kit .hpd-chip { font-size: 10.5px; font-weight: 500; color: #4c1d95; background: #f4efff; border: 1px solid #e6dcff; border-radius: 999px; padding: 5px 10px; cursor: pointer; transition: background .15s ease, border-color .15s ease; }
    .sl-kit .hpd-chip:hover { background: #ece2ff; border-color: #d6c6ff; }
    .sl-kit .hpd-compose { display: flex; align-items: center; gap: 8px; background: #f4f5fa; border: 1px solid var(--line); border-radius: 11px; padding: 4px 4px 4px 12px; transition: border-color .15s ease, box-shadow .15s ease; }
    .sl-kit .hpd-compose:focus-within { border-color: var(--violet-pale); box-shadow: 0 0 0 3px rgba(124,58,237,.12); background: #fff; }
    .sl-kit .hpd-compose input { flex: 1; min-width: 0; border: 0; background: none; outline: none; font: inherit; font-size: 12px; color: var(--ink); padding: 6px 0; }
    .sl-kit .hpd-send { flex: none; display: grid; place-items: center; width: 29px; height: 29px; border-radius: 8px; border: 0; color: #fff; background: var(--violet); cursor: pointer; transition: filter .15s ease, transform .15s ease; }
    .sl-kit .hpd-send:hover { filter: brightness(1.07); transform: translateY(-1px); }
    .sl-kit .hpd-send svg { width: 14px; height: 14px; }
    .sl-kit .hpd-note { margin: 8px 0 0; font-size: 10.5px; color: var(--txt-faint); text-align: center; }
    .sl-kit .hpd-note a { color: var(--violet); font-weight: 500; }
    @media (prefers-reduced-motion: reduce) {
        .sl-kit .hp-dock, .sl-kit .hp-dock-scrim { transition: opacity .2s ease; }
        .sl-kit .hp-dock.is-open { transform: translate(-50%, 0); }
        .sl-kit .hp-dock.is-open .hpd-anim { animation: none; }
    }

/* ── The order builder, floating in front of the cockpit ──────────────────
   The homepage hero's layered composition; /sales-agents shows the same
   pair (rep dashboard behind, the cart they order in on top), so this sits
   in the kit rather than being copied into a second page's style block. */
.sl-kit .hp-store { position: absolute; left: -78px; bottom: -54px; width: 312px; z-index: 4; }
/* Mirrored: over the RIGHT of the cockpit. Inset rather than negative — the
   mock already bleeds past the wrap's right edge, so a -78px twin would put
   the cart off the viewport. */
.sl-kit .hp-store--right { left: auto; right: 74px; }
@media (max-width: 960px) {
  .sl-kit .hp-store { position: static; width: 100%; margin-top: 14px; }
}

/* ── A hero on a LIGHT ground ─────────────────────────────────────────────
   .hp-demo-link's default ink is pale violet, drawn for the homepage's dark
   hero. Every other page built on the kit so far has a light hero and was
   overriding it in its own <style> — /pulse and /sales-agents had the same
   two rules each. Add .hero--light to the hero instead. */
.sl-kit .hero--light .hp-demo-link a { color: #5b36f5; font-weight: 500; }
.sl-kit .hero--light .hp-demo-link a:hover { color: #4a2ae0; }

/* ── The cockpit's rotating screens ───────────────────────────────────────
   Overview → Orders → Buyers → Sales agents. All four occupy the SAME grid
   cell so the window's height is the tallest screen and never moves during
   the rotation — the same reason the Order Builder's steps are stacked. */
.sl-kit .mock-screens { display: grid; min-width: 0; }
.sl-kit .mock-screens > [data-mock-screen] {
    grid-area: 1 / 1;
    opacity: 0;
    visibility: hidden;
    transform: translateY(6px);
    transition: opacity .5s ease, transform .5s cubic-bezier(.22,.8,.3,1), visibility .5s;
}
.sl-kit .mock-screens > [data-mock-screen].is-on {
    opacity: 1;
    visibility: visible;
    transform: none;
}
@media (prefers-reduced-motion: reduce) {
    .sl-kit .mock-screens > [data-mock-screen] { transition: none; }
}
/* the table cells the rotating screens add */
.sl-kit .mt-tag {
    font-size: 9px; font-weight: 600; letter-spacing: .04em; padding: 2.5px 7px;
    border-radius: 99px; margin-left: auto; white-space: nowrap;
}
.sl-kit .mt-tag--green { background: #e6f7ee; color: var(--good); }
.sl-kit .mt-tag--amber { background: #fff2e2; color: #b45309; }
.sl-kit .mt-tag--violet { background: #efe7ff; color: var(--violet-3); }
.sl-kit .mt-hb {
    margin-left: auto; font-family:var(--font-body); font-weight: 600; font-size: 11px;
    padding: 2px 8px; border-radius: 99px;
}
.sl-kit .mt-hb--good { background: #e6f7ee; color: var(--good); }
.sl-kit .mt-hb--ok   { background: #fff2e2; color: #b45309; }
.sl-kit .mt-hb--bad  { background: #fdeaef; color: #c02455; }
.sl-kit .mt-bar {
    margin-left: auto; width: 74px; height: 5px; border-radius: 99px;
    background: #eef0f8; overflow: hidden; flex: none;
}
.sl-kit .mt-bar i { display: block; height: 100%; border-radius: 99px; background: var(--violet); }
.sl-kit .mt-tag + .mt-v, .sl-kit .mt-hb + .mt-v, .sl-kit .mt-bar + .mt-v { margin-left: 12px; }

/* denser rotating screens — a real Pulse page is a KPI strip over a table,
   and the buyer book is worked through the peek panel, not the list */
.sl-kit .mock-kpis--3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
.sl-kit .mt-filters {
    margin-left: auto; display: inline-flex; gap: 2px; padding: 2px;
    background: #f2f3f9; border-radius: 99px;
}
.sl-kit .mt-filters i {
    font-style: normal; font-size: 9.5px; font-weight: 500; color: var(--txt-soft);
    padding: 3px 9px; border-radius: 99px;
}
.sl-kit .mt-filters i.on { background: #fff; color: var(--ink); box-shadow: 0 1px 2px rgba(20,20,55,.1); }
.sl-kit .mt-row-head {
    display: flex; align-items: center; gap: 10px; padding: 6px 2px 7px;
    border-bottom: 1px solid #f0f1f7; font-size: 9.5px; font-weight: 600;
    letter-spacing: .05em; text-transform: uppercase; color: #9aa0b8;
}
.sl-kit .mt-row-head span:first-child { flex: 1; }
.sl-kit .mt-row-head span:not(:first-child) { width: 74px; text-align: right; }
.sl-kit .mt-when { font-size: 10.5px; color: var(--txt-soft); white-space: nowrap; }
.sl-kit .mt-pct { font-size: 10.5px; font-weight: 500; color: var(--txt-soft); width: 34px; text-align: right; }

/* A real page carries a toolbar over its table and a pager under it — five
   rows floating in white space read as a mock-up, not a screenshot. */
.sl-kit .mt-tools {
    display: flex; align-items: center; gap: 6px; padding: 8px 0 4px;
}
.sl-kit .mt-search {
    flex: 1; min-width: 0; padding: 5px 9px; border: 1px solid #eceef6; border-radius: 7px;
    background: #fafbff; font-size: 10px; color: #9aa0b8;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sl-kit .mt-chip {
    flex: none; padding: 5px 9px; border: 1px solid #eceef6; border-radius: 7px;
    background: #fff; font-size: 10px; color: var(--txt-soft); white-space: nowrap;
}
.sl-kit .mt-chip--ghost { color: var(--violet); border-color: #e4dcff; background: #f8f5ff; }
.sl-kit .mt-foot {
    display: flex; align-items: center; gap: 10px;
    margin-top: 4px; padding: 8px 2px 1px; border-top: 1px solid #f0f1f7;
    font-size: 10px; color: var(--txt-soft);
}
.sl-kit .mt-foot-note { color: #9aa0b8; }
.sl-kit .mt-foot .mt-v, .sl-kit .mt-foot .mt-pager { margin-left: auto; }
.sl-kit .mt-pager { display: inline-flex; gap: 3px; }
.sl-kit .mt-pager i {
    font-style: normal; min-width: 15px; text-align: center; padding: 2px 4px;
    border-radius: 5px; background: #f4f5fa; font-size: 9.5px; line-height: 1.1;
}
.sl-kit .mt-pager i.on { background: var(--violet); color: #fff; }

/* the peek slides over the right of the book */
.sl-kit .mock-buyers { position: relative; }
.sl-kit .mock-buyers .mt-r.is-open { background: #f7f4ff; box-shadow: inset 2px 0 0 var(--violet); }
.sl-kit .mock-peek {
    position: absolute; top: 8px; right: -6px; width: 55%; max-width: 330px;
    background: #fff; border: 1px solid #e9eaf3; border-radius: 12px;
    box-shadow: 0 26px 54px -26px rgba(20,20,55,.42), 0 3px 10px -4px rgba(20,20,55,.1);
    padding: 13px 14px 14px;
}
.sl-kit .mp-head { display: flex; align-items: center; gap: 9px; }
.sl-kit .mp-head b { display: block; font-size: 12.5px; font-weight: 500; color: var(--ink); }
.sl-kit .mp-head i { display: block; font-style: normal; font-size: 10.5px; color: var(--txt-soft); }
.sl-kit .mp-chips { display: flex; gap: 6px; margin: 10px 0 0; }
.sl-kit .mp-chips .mt-hb, .sl-kit .mp-chips .mt-tag { margin-left: 0; }
.sl-kit .mp-kpis { display: grid; grid-template-columns: repeat(3,1fr); gap: 6px; margin: 11px 0 0; }
.sl-kit .mp-kpis > div { background: #fafbff; border: 1px solid #f0f1f7; border-radius: 8px; padding: 7px 8px; }
.sl-kit .mp-kpis b { display: block; font-family:var(--font-body); font-weight: 600; font-size: 13px; color: var(--ink); }
.sl-kit .mp-kpis i { display: block; font-style: normal; font-size: 9px; text-transform: uppercase; letter-spacing: .04em; color: #9aa0b8; margin-top: 1px; }
.sl-kit .mp-note {
    margin: 11px 0 0; padding: 8px 10px; border-radius: 8px;
    background: #fdeaef; color: #8a1738; font-size: 10.5px; line-height: 1.45;
}
.sl-kit .mp-note b { font-weight: 600; }
.sl-kit .mp-rows { margin: 10px 0 0; }
.sl-kit .mp-rows > div {
    display: flex; justify-content: space-between; gap: 10px;
    padding: 5px 0; border-top: 1px solid #f4f5fa; font-size: 10.5px;
}
.sl-kit .mp-rows span:first-child { color: #9aa0b8; }
.sl-kit .mp-rows span:last-child { color: var(--ink); text-align: right; }
.sl-kit .mp-cta {
    margin: 11px 0 0; padding: 8px; border-radius: 99px; background: var(--violet);
    color: #fff; font-size: 11px; font-weight: 500; text-align: center;
}
@media (max-width: 960px) { .sl-kit .mock-peek { display: none; } }

/* ── The ribbon holds still ───────────────────────────────────────────────
   Each ribbon is a ~3.4-megapixel surface under a 60-64px blur, and four
   children were drifting inside it — so the browser re-ran that blur every
   frame, on three ribbons per page, for the whole time the page was open.
   Measured at 12 running drift animations; it was enough to spin a laptop
   fan. Under a blur that heavy the drift is imperceptible anyway, so the
   gradient is now static and the effect is unchanged to look at. */
.sl-kit .ribbon i { animation: none !important; }

/* ── The ribbon costs nothing now ─────────────────────────────────────────
   Stopping the drift wasn't enough: a ~3.4-megapixel surface under a 60-72px
   blur() is re-rasterised by the compositor on any repaint in its stacking
   context, and a Chrome renderer showing this page was measured at 168% CPU
   — nearly two cores, enough to spin a laptop fan.

   A blur that heavy is just a soft gradient, so paint it as one: the bands
   become radial-gradients on the host, which the GPU draws once and caches.
   No filter, no per-frame raster.

   The note here used to say "drive it from --rb-* if you want a palette to
   reach it" — and nobody did, so for two days every hero palette was dead
   code: the `<i>` bands are display:none, the five colours were hard-coded
   BRAND stops, and re-tinting --rb-1..5 changed nothing you could see. Three
   attempts at "make the how-it-works ribbon less purple" edited a palette
   that wasn't being read.

   It reads the tokens now, via color-mix so each stop keeps its own ALPHA —
   that part of the note was right and still is. A version using the solid
   palette hexes at these sizes painted a hard rainbow diagonal instead of a
   wash: the softness is in the transparency, not the geometry.

   Also isolated (contain + its own layer) so a repaint elsewhere on the page
   can't invalidate it. */
.sl-kit .ribbon {
    filter: none !important;
    contain: paint;
    will-change: auto;
    background:
        radial-gradient(46% 20% at 30% 14%, color-mix(in srgb, var(--rb-1) 72%, transparent), transparent 70%),
        radial-gradient(48% 20% at 62% 30%, color-mix(in srgb, var(--rb-2) 66%, transparent), transparent 72%),
        radial-gradient(46% 19% at 40% 48%, color-mix(in srgb, var(--rb-3) 60%, transparent), transparent 72%),
        radial-gradient(44% 18% at 68% 64%, color-mix(in srgb, var(--rb-4) 42%, transparent), transparent 74%),
        radial-gradient(42% 18% at 34% 78%, color-mix(in srgb, var(--rb-5) 34%, transparent), transparent 76%);
}
.sl-kit .ribbon i { display: none !important; }

/* Conic-gradient shimmers repaint every frame because an @property angle
   invalidates the whole gradient. Cheap enough on screen; wasted off it. */
@media (prefers-reduced-motion: no-preference) {
    .sl-kit .spk-card::after,
    .sl-kit .sl-hero-shimmer::before,
    .sl-kit .sl-hero-shimmer::after { will-change: auto; }
}

/* ── Hero graphics on a phone ─────────────────────────────────────────────
   The desktop hero puts a full app window beside the copy. On a phone that
   window has nowhere to go, so it unrolled to its natural height — a ~1000px
   ladder of KPI tiles, chart and tables that the reader has to scroll past
   before reaching anything else, and which reads as a list of pictures
   rather than a product.

   A phone doesn't need the whole window to believe it's real: it needs the
   top of it. So the mock is cropped to a fixed height and faded out at the
   bottom, which says "this continues" without spending the screen. The
   floating chips go — they're positioned relative to a window that is now
   partly off-view, and they landed at odd angles. */
@media (max-width: 960px) {
    .sl-kit .hero .mock {
        position: relative;
        max-height: 340px;
        overflow: hidden;
        margin-top: 26px;
        -webkit-mask-image: linear-gradient(180deg, #000 0, #000 62%, transparent 99%);
        mask-image: linear-gradient(180deg, #000 0, #000 62%, transparent 99%);
    }
    /* let the window run to the edges so it reads as a device, not a card */
    .sl-kit .hero .mock-window {
        width: 112%;
        max-width: none;
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
    }
    .sl-kit .hero .float { display: none; }

    /* the order builder is a story in its own right on /sales-agents, so it
       stays — but below the crop, at full width, not overlapping anything */
    .sl-kit .hero .hp-store {
        position: static;
        width: 100%;
        margin: 18px 0 0;
    }
}
@media (max-width: 620px) {
    .sl-kit .hero .mock { max-height: 280px; }
}

/* ── A section on the coloured wash ───────────────────────────────────────
   `.sa-glow` puts the brand ribbon behind a section; `.sa-ribbon` is the
   clipping host that keeps it there. These lived in /sales-agents' own
   <style> block, so when /how-it-works reused the MARKUP the ribbon had no
   container: it ran 2047px wide, blew out the document, and the whole page
   rendered squeezed into half the viewport. Markup without its CSS is
   exactly the failure this kit exists to prevent, so it lives here now.

   Usage:
     <section class="sl-sec sa-glow">
       <div class="sa-ribbon" aria-hidden="true"><div class="ribbon">…</div></div>
       <div class="wrap">…</div>
     </section>                                                            */
.sl-kit .sa-glow { position: relative; overflow: hidden; }
.sl-kit .sa-glow > .wrap { position: relative; z-index: 1; }
.sl-kit .sa-glow .sa-ribbon {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    /* fade out at both ends so it resolves into the page instead of
       stopping dead at the section edge */
    -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 22%, #000 62%, transparent 96%);
    mask-image: linear-gradient(180deg, transparent 0, #000 22%, #000 62%, transparent 96%);
}
.sl-kit .sa-glow .sa-ribbon .ribbon {
    top: -80px;
    right: -300px;
    opacity: .26;
}

/* ── FAQ answers from the shared includes ────────────────────────────────
   The kit's own FAQ markup puts the answer in a bare <p>; the shared
   faqs/*.php includes wrap theirs in a .panel. `.faq details` already
   insets everything by 20px, so a .panel carrying its own horizontal
   padding indented the answer twice — the question sat at one margin and
   its answer at another, which is what made /sales-agents look unlike the
   homepage. The wrapper is transparent now: vertical rhythm only. */
.sl-kit .faq details .panel { padding: 10px 0 4px; }
.sl-kit .faq details .panel > :first-child { margin-top: 0; }
.sl-kit .faq details .panel > :last-child { margin-bottom: 0; }
.sl-kit .faq details .panel p {
    padding: 0;
    font-size: 15px;
    line-height: 1.6;
    color: var(--txt-soft);
}

/* ── "Perfect for" chips ──────────────────────────────────────────────────
   The three situations a visitor arrives with, named under the hero copy.
   Lived in /sales-agents' own <style> until the masthead made it shared —
   and until it moved here the chips rendered as a bare vertical list on
   /quoting-engine, /forms and /accountancy. Markup without its CSS. */
.sl-kit .sa-uses {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 22px 0 0;
    padding: 0;
    list-style: none;
}
.sl-kit .sa-uses li {
    font-size: 12.5px;
    color: var(--txt-soft);
    padding: 0;
}
.sl-kit .sa-uses li:not(:first-child) {
    padding: 5px 12px;
    border-radius: 20px;
    background: rgba(124, 58, 237, 0.07);
    border: 1px solid rgba(124, 58, 237, 0.14);
    color: #5b21b6;
    font-weight: 500;
}

/* ── The integrations wall ────────────────────────────────────────────────
   Copy on the left, a grid of partner logos on the right that runs off the
   edge of the screen.

   The bleed is deliberate. A grid that stops inside the gutter reads as the
   complete list and invites counting; one that runs off the page reads as a
   sample of something larger — which is true — and the fade states it
   without a line of copy. The whole wall is one horizontal scroller, so on a
   phone it becomes a swipe rather than a wall of tiny marks. */
/* ══ THE PRICE-EDITOR CARD ════════════════════════════════════════════════
   A merchant setting one account's price, with a live caret in the field.
   It began life inside /sales-agents' own <style> block; /how-it-works then
   copied the MARKUP and got an unstyled stack of text, which is the failure
   mode UI-SYSTEM.md calls out. Both pages read it from here now.
   ══════════════════════════════════════════════════════════════════════ */
    /* 2 — the price editor */
    .sl-kit .sa-edit-body { padding: 16px 18px 18px; }
    .sl-kit .sa-prod { display: flex; align-items: center; gap: 11px; }
    .sl-kit .sa-prod b { display: block; font-size: 13.5px; font-weight: 500; color: var(--ink); }
    .sl-kit .sa-prod i { display: block; font-style: normal; font-size: 11.5px; color: var(--txt-soft); margin-top: 2px; }
    .sl-kit .sa-price {
        display: flex;
        align-items: center;
        gap: 14px;
        margin: 16px 0 0;
    }
    .sl-kit .sa-was { font-size: 12.5px; color: var(--txt-soft); }
    .sl-kit .sa-field {
        position: relative;
        flex: 1;
        display: flex;
        align-items: center;
        padding: 11px 14px;
        border: 2px solid var(--violet);
        border-radius: 10px;
        background: #fff;
        font-family:var(--font-body);
        font-weight: 600;
        font-size: 19px;
        color: var(--ink);
        box-shadow: 0 0 0 4px rgba(124, 58, 237, 0.12);
    }
    .sl-kit .sa-field em {
        width: 1.5px;
        height: 19px;
        margin-left: 3px;
        background: var(--violet);
        animation: sa-caret 1.1s steps(1) infinite;
    }
    @keyframes sa-caret { 0%, 49% { opacity: 1 } 50%, 100% { opacity: 0 } }
    .sl-kit .sa-chips { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 14px; }
    .sl-kit .sa-chips span {
        font-size: 11px;
        font-weight: 500;
        padding: 4px 10px;
        border-radius: 99px;
        background: #efe7ff;
        color: var(--violet-3);
    }
    .sl-kit .sa-tot {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-top: 16px;
        padding-top: 14px;
        border-top: 1px solid #eeeaf7;
        font-size: 12.5px;
        color: var(--txt-soft);
    }
    .sl-kit .sa-tot b { font-family:var(--font-body); font-weight: 600; font-size: 17px; color: var(--ink); }

/* ══ THE SHIMMER RING ═══════════════════════════════════════════════
   A travelling highlight around a card's 1px border — the same idiom as the
   hero CTA, the pricing cards and the nav's product tiles, pulled into the
   kit so a section can opt in with one class instead of a fourth copy.

   A conic gradient is rotated by a registered custom property and masked to
   the border box, so it travels the RING rather than washing the card.
   `--shim-ang` MUST be registered at the file root (this is plain CSS, but
   the Sass partials nest it if written inside a rule — see UI-SYSTEM.md).
   Stagger with `--shim-delay` so a grid doesn't pulse in unison. */
@property --shim-ang { syntax: "<angle>"; initial-value: 0deg; inherits: false; }

.sl-kit .shimring { position: relative; }
.sl-kit .shimring::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1px;
    background: conic-gradient(
        from var(--shim-ang),
        transparent 0 58%,
        rgba(124, 58, 237, .38) 72%,
        rgba(196, 181, 253, .92) 80%,
        transparent 92%
    );
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: 0;
    pointer-events: none;
    transition: opacity .35s ease;
    animation: shimSpin 7s linear infinite;
    animation-delay: var(--shim-delay, 0s);
}
/* Idle it stays quiet; it lights on hover, and on the one card a section
   wants to lead with (`.shimring--lit`). Twenty-one cards shimmering at once
   is a light show, not a highlight. */
.sl-kit .shimring:hover::after,
.sl-kit .shimring--lit::after { opacity: 1; }
@keyframes shimSpin { to { --shim-ang: 360deg; } }
@media (prefers-reduced-motion: reduce) {
    .sl-kit .shimring::after { animation: none; }
}

.sl-kit .intg-split {
    display: grid;
    grid-template-columns: minmax(380px, 520px) 1fr;
    gap: 48px;
    align-items: center;
    margin-top: var(--s-5);
}
/* the right column escapes the .wrap gutter and runs to the viewport edge */
.sl-kit .intg-split > .intg-wall {
    margin-right: calc(-1 * max(24px, (100vw - 1160px) / 2));
}

.sl-kit .intg-wall {
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    -webkit-mask-image: linear-gradient(90deg, #000 0, #000 78%, transparent 100%);
    mask-image: linear-gradient(90deg, #000 0, #000 78%, transparent 100%);
}
.sl-kit .intg-wall::-webkit-scrollbar { display: none; }

.sl-kit .intg-grid {
    display: grid;
    grid-auto-flow: column;
    grid-template-rows: repeat(2, 1fr);
    grid-auto-columns: 178px;
    gap: 1px;
    /* the hairlines ARE the background showing through the 1px gap */
    background: #ececf4;
    border: 1px solid #ececf4;
    border-radius: 14px 0 0 14px;
    width: max-content;
    overflow: hidden;
}
.sl-kit .intg-cell {
    display: grid;
    place-items: center;
    height: 112px;
    /* the listing PNGs carry their own whitespace, so the cell adds little */
    padding: 10px 7px;
    background: #fff;
    transition: background .22s ease;
}
.sl-kit .intg-cell img {
    max-width: 164px;
    max-height: 75px;
    width: auto;
    height: auto;
    /* Full colour: the point is a visitor spotting THEIR system, which needs
       it legible. The hairline grid is what makes the wall cohere, not
       desaturation. */
    opacity: .92;
    transition: opacity .22s ease, transform .22s ease;
}
.sl-kit .intg-cell:hover { background: #fbfaff; }
.sl-kit .intg-cell:hover img { opacity: 1; transform: scale(1.05); }

@media (max-width: 1024px) {
    .sl-kit .intg-split { grid-template-columns: 1fr; gap: 26px; }
    .sl-kit .intg-split > .intg-wall {
        margin-right: calc(-1 * max(20px, (100vw - 1160px) / 2));
    }
}
@media (max-width: 700px) {
    .sl-kit .intg-grid { grid-auto-columns: 162px; }
    .sl-kit .intg-cell { height: 100px; padding: 10px 6px; }
    .sl-kit .intg-cell img { max-width: 150px; max-height: 65px; }
}
@media (prefers-reduced-motion: reduce) {
    .sl-kit .intg-cell, .sl-kit .intg-cell img { transition: none; }
}

/* ═══ ONLY ANIMATE WHAT YOU CAN SEE ═══════════════════════════════════════
   Paired with the IntersectionObserver in sl-kit.js, which marks each
   section `.is-onscreen` while it is within a screen of the viewport and
   sets `html.js-anim` to say the mechanism is live.

   The kit's decoration is ambient — ribbons drift, hub nodes bob, flow
   dashes travel, chips rotate. Any one is cheap; a page carries around
   fifty, and each keeps a compositor layer alive for as long as the tab is
   open, on screen or not. That never reads as "slow JS" (a click still
   handles in single-digit milliseconds) — it reads as the whole page being
   heavy, because the compositor never gets an idle frame.

   `animation-play-state` freezes rather than resets, so scrolling back
   resumes mid-stroke instead of restarting. Transitions are untouched, so
   hovers and opens stay instant everywhere.

   FAIL-OPEN: everything here is under `html.js-anim`. No JS, or no
   IntersectionObserver, means the class is never set, this block never
   matches, and the page animates exactly as it did before. */
html.js-anim .sl-kit section:not(.is-onscreen) *,
html.js-anim .sl-kit section:not(.is-onscreen)::before,
html.js-anim .sl-kit section:not(.is-onscreen)::after,
html.js-anim .feature-developers:not(.is-onscreen) *,
html.js-anim .feature-developers:not(.is-onscreen)::after,
html.js-anim .pricing-options:not(.is-onscreen) *,
html.js-anim .plan-comparison:not(.is-onscreen) *,
html.js-anim .basic-plan-strip:not(.is-onscreen),
html.js-anim .basic-plan-strip:not(.is-onscreen) *,
html.js-anim .index-hero:not(.is-onscreen) *,
html.js-anim .index-hero:not(.is-onscreen)::before,
html.js-anim .index-hero:not(.is-onscreen)::after,
html.js-anim .section-how-faqs:not(.is-onscreen) *,
html.js-anim .testimonial-slimline:not(.is-onscreen) *,
html.js-anim .sl-adx-card:not(.is-onscreen),
html.js-anim .sl-adx-card:not(.is-onscreen) *,
html.js-anim .sl-trusted:not(.is-onscreen) * {
    animation-play-state: paused !important;
}