/* Leadaline Bespoke software page styles (assets/bespoke.css, 18 Oct 2026). Linked only from bespoke-software.html
   and integrations.html (its flagship band), so other pages don't download them: the "whole system" diagram, the
   headline that assembles itself, How it works with its line, the band, and the links in the examples.
   Only transform and opacity animate (plus colours on hover and as the steps light up). */

/* the whole system: six tools around one core */
.tp-whole{grid-template-columns:auto auto auto;justify-content:space-between}
.tp-whole .tp-from{justify-items:start}
.tp-whole .tp-to{justify-items:end}
.tp-whole .tp-chip{transition:border-color .4s ease,background-color .4s ease}
.tp-whole .tp-chip.tp-r{flex-direction:row-reverse;padding:6px 6px 6px 13px}
.tp-whole .tp-chip.tp-hot{border-color:rgba(169,155,255,.9);background:rgba(169,155,255,.22)}
.tp-core{position:relative;display:grid;justify-items:center;gap:10px;font:600 13px/1.2 var(--sans);color:#fff;text-align:center;white-space:nowrap}
.tp-core .tp-tile{position:relative;z-index:1;width:92px;height:92px;border-radius:26px;background:#fff}
.tp-core .tp-tile img{width:46px;height:46px}
.tp-ring,.tp-orbit{position:absolute;left:50%;pointer-events:none}
.tp-ring{top:0;width:92px;height:92px;margin-left:-46px;border-radius:26px;border:1.5px solid rgba(169,155,255,.85);opacity:0}
.tp-orbit{top:46px;width:156px;height:156px;margin:-78px 0 0 -78px;border-radius:50%;border:1px dashed rgba(169,155,255,.3);animation:tp-spin 40s linear infinite}
.tp-orbit::before{content:"";position:absolute;top:-3px;left:50%;width:6px;height:6px;margin-left:-3px;border-radius:50%;background:#D9D1FF;box-shadow:0 0 8px 2px rgba(169,155,255,.8)}
@keyframes tp-spin{to{transform:rotate(360deg)}}
.tp-whole.tp-wait .tp-chip,.tp-whole.tp-wait .tp-core{opacity:0}
.tp-whole .tp-wires path{transition:stroke .45s ease}
.tp-whole .tp-wires path.tp-hot{stroke:rgba(217,209,255,.95)}
@media (max-width:420px){
  .tp-whole .tp-chip.tp-r{padding:5px 5px 5px 10px}
  .tp-core{font-size:12px}
  .tp-core .tp-tile{width:68px;height:68px;border-radius:20px}
  .tp-core .tp-tile img{width:34px;height:34px}
  .tp-ring{width:68px;height:68px;margin-left:-34px;border-radius:20px}
  .tp-orbit{top:34px;width:112px;height:112px;margin:-56px 0 0 -56px}
}

/* the headline that assembles itself: a line joins its words once they have landed */
.hero.tp{overflow-x:clip}
.tp-join{position:absolute;height:3px;border-radius:3px;pointer-events:none;background:linear-gradient(90deg,rgba(124,92,255,0),#7C5CFF 18%,#A99BFF 50%,#7C5CFF 82%,rgba(124,92,255,0))}

/* How it works: four steps, and a line that runs through them as you scroll */
.steps-w{position:relative;margin-top:56px}
.steps{list-style:none;display:grid;gap:36px}
.steps li{position:relative;padding-left:70px}
.steps h3{font-size:22px;line-height:1.25;color:#fff}
.steps p{margin-top:8px;font-size:16.5px;line-height:1.6;color:var(--on-ink-muted);max-width:34ch}
.steps p a{color:#fff;text-decoration:underline;text-decoration-color:rgba(255,255,255,.45);text-underline-offset:3px}
.steps p a:hover{text-decoration-color:currentColor}
.st-n{position:absolute;left:0;top:-8px;z-index:1;width:46px;height:46px;border-radius:50%;display:grid;place-items:center;font:600 14px/1 var(--sans);letter-spacing:.04em;color:#15122B;background:#fff;box-shadow:0 0 0 6px rgba(169,155,255,.16)}
.st-track{display:none;position:absolute;z-index:0;border-radius:2px;background:rgba(255,255,255,.14);overflow:hidden}
.steps-w.st-ready .st-track{display:block}
.st-fill{position:absolute;inset:0;background:linear-gradient(90deg,#7C5CFF,#A99BFF)}
.st-v .st-fill{background:linear-gradient(180deg,#7C5CFF,#A99BFF)}
.steps-w.st-live .st-n{color:rgba(255,255,255,.72);background:#231E47;box-shadow:inset 0 0 0 1px rgba(255,255,255,.18);transition:background-color .45s ease,color .45s ease,box-shadow .45s ease,transform .5s cubic-bezier(.34,1.56,.64,1)}
.steps-w.st-live li.on .st-n{color:#15122B;background:#fff;box-shadow:0 0 0 6px rgba(169,155,255,.18),0 0 30px 4px rgba(169,155,255,.55);transform:scale(1.1)}
@media (min-width:1000px){
  .steps{grid-template-columns:repeat(4,minmax(0,1fr));gap:40px}
  .steps li{padding:78px 0 0}
  .st-n{top:0}
}

/* the flagship band at the top of Integrations */
.fl{padding-top:0}
.fl-card{position:relative;isolation:isolate;overflow:hidden;display:grid;gap:40px;padding:44px 26px;border-radius:32px;background:#15122B;color:var(--on-ink-muted);box-shadow:0 50px 100px -50px rgba(21,18,43,.6)}
.fl-card::before{content:"";position:absolute;inset:0;z-index:-2;background:radial-gradient(520px 320px at 92% -10%,rgba(124,92,255,.45),transparent 62%),radial-gradient(420px 300px at -5% 115%,rgba(72,29,201,.35),transparent 60%)}
.fl-card::after{content:"";position:absolute;inset:0;z-index:-1;background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);background-size:32px 32px;-webkit-mask-image:radial-gradient(ellipse at 75% 45%,#000 0%,transparent 75%);mask-image:radial-gradient(ellipse at 75% 45%,#000 0%,transparent 75%)}
.fl-card .kicker{color:var(--lav-2)}
.fl-card h2{color:#fff;font-size:clamp(34px,3.5vw,50px);line-height:1.04;max-width:none}
.fl-card h2 .l{display:block}
.fl-p{margin-top:20px;font-size:clamp(17px,1.5vw,19px);line-height:1.55;max-width:38ch}
.fl-card .btn{margin-top:30px}
.fl-card .tp-stage{background:none;box-shadow:none;padding:0;min-height:0;margin:0;border-radius:0;overflow:visible}
.fl-card .tp-stage::before,.fl-card .tp-stage::after{display:none}
@media (min-width:1000px){.fl-card{grid-template-columns:minmax(0,1fr) minmax(0,440px);align-items:center;gap:64px;padding:64px}}

/* links inside the examples */
.wb a{color:inherit;text-decoration:underline;text-decoration-color:var(--lav-2);text-decoration-thickness:1.5px;text-underline-offset:3px}
.wb a:hover{color:var(--violet);text-decoration-color:currentColor}
@media (prefers-reduced-motion:reduce){.tp-orbit{animation:none}}