/* Leadaline service page heroes (assets/service-hero.css, 19 Oct 2026). Linked only from the five pages that
   use them (crm, ai-receptionist, website-creation, bespoke-software, and integrations for its band). */
/* Leadaline service page heroes (demo, 18 Oct 2026): a dark card with the service's live diagram beside the
   headline (below it on phones), and a headline animation that fits the topic: the CRM's words build
   themselves, the AI receptionist's are typed like a chat reply, the website's load in from grey bars. */
@media (min-width:1000px){
  .hero.tp .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,460px);gap:56px;align-items:center}
  .hero.tp .hero-in{max-width:none}
}
.tp-stage{position:relative;isolation:isolate;overflow:hidden;display:grid;align-items:center;min-height:250px;padding:30px 26px;border-radius:28px;background:#15122B;box-shadow:0 40px 80px -40px rgba(21,18,43,.55)}
.tp-stage:empty{display:none}
.tp-stage::before{content:"";position:absolute;inset:0;z-index:-2;background:radial-gradient(360px 240px at 90% -10%,rgba(124,92,255,.45),transparent 62%),radial-gradient(320px 220px at -5% 110%,rgba(72,29,201,.35),transparent 60%)}
.tp-stage::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 60% 45%,#000 0%,transparent 75%);mask-image:radial-gradient(ellipse at 60% 45%,#000 0%,transparent 75%)}
@media (max-width:999px){.tp-stage{margin-top:40px}}
.tp-scene{position:relative;display:grid;grid-template-columns:auto auto auto;justify-content:space-between;align-items:center;gap:22px}
.tp-scene.no-mid{grid-template-columns:auto auto;justify-content:space-around}
.tp-col{display:grid;gap:10px;align-content:center}
.tp-from{justify-items:start}
.tp-to{justify-items:end}
.tp-chip{display:inline-flex;align-items:center;gap:9px;padding:6px 13px 6px 6px;border-radius:13px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.15);color:#fff;font:500 13px/1.2 var(--sans);white-space:nowrap}
.tp-ic{width:28px;height:28px;flex:none;border-radius:9px;display:grid;place-items:center;background:linear-gradient(160deg,#fff 10%,#E4DEFF);color:#481DC9}
.tp-ic svg{width:17px;height:17px}
.tp-mini{display:grid;grid-template-columns:repeat(2,42px);gap:10px}
.tp-mini .tp-ic{width:42px;height:42px;border-radius:13px}
.tp-mini .tp-ic svg{width:20px;height:20px}
.tp-tile{width:74px;height:74px;border-radius:21px;display:grid;place-items:center;background:linear-gradient(160deg,#fff 10%,#E4DEFF);color:#481DC9;box-shadow:0 20px 44px -16px rgba(124,92,255,.8),inset 0 1px 0 #fff}
.tp-tile svg{width:32px;height:32px}
.tp-crm{display:grid;justify-items:center;gap:9px;font:600 13px/1.2 var(--sans);color:#fff}
.tp-crm .tp-tile{background:#fff}
.tp-crm .tp-tile img{width:36px;height:36px}
.tp-crm.tp-big .tp-tile{width:96px;height:96px;border-radius:26px}
.tp-crm.tp-big .tp-tile img{width:48px;height:48px}
.tp-tile{position:relative}
.tp-tile::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:0 0 34px 6px rgba(169,155,255,.5);opacity:0;pointer-events:none}
.tp-glow::after{animation:tp-glow .9s cubic-bezier(.22,1,.36,1)}
@keyframes tp-glow{0%,100%{opacity:0}40%{opacity:1}}
.tp-wires{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;z-index:-1}
.tp-wires path{fill:none;stroke:rgba(169,155,255,.5);stroke-width:1.5;stroke-linecap:round}
.tp-wires circle{fill:#D9D1FF;filter:drop-shadow(0 0 5px #A99BFF) drop-shadow(0 0 2px #fff);transition:opacity .3s ease}
@media (max-width:420px){
  .tp-stage{padding:24px 16px}
  .tp-scene{gap:14px}
  .tp-chip{font-size:12px;padding:5px 10px 5px 5px;gap:7px}
  .tp-ic{width:24px;height:24px;border-radius:8px}
  .tp-ic svg{width:15px;height:15px}
  .tp-tile{width:58px;height:58px;border-radius:17px}
  .tp-tile svg{width:26px;height:26px}
  .tp-crm .tp-tile img{width:28px;height:28px}
  .tp-crm.tp-big .tp-tile{width:78px;height:78px}
  .tp-crm.tp-big .tp-tile img{width:38px;height:38px}
  .tp-mini{grid-template-columns:repeat(3,36px);gap:8px}
  .tp-mini .tp-ic{width:36px;height:36px}
}

/* the headline's coloured line waits for its own animation (only when the motion layer is on) */
html.m-pre .hero h1[data-topic] .l.accent{opacity:0;animation:tp-safe 0s 3s forwards}
@keyframes tp-safe{to{opacity:1}}
.tp-typing{position:absolute;display:inline-flex;align-items:center;gap:6px;padding:12px 16px;border-radius:20px 20px 20px 6px;background:#fff;border:1px solid var(--line-2);box-shadow:0 14px 30px -14px rgba(21,18,43,.35)}
.tp-typing i{width:8px;height:8px;border-radius:50%;background:#A99BFF;animation:tp-dot 1s ease-in-out infinite}
.tp-typing i:nth-child(2){animation-delay:.15s}
.tp-typing i:nth-child(3){animation-delay:.3s}
@keyframes tp-dot{0%,60%,100%{transform:translateY(0);opacity:.55}30%{transform:translateY(-5px);opacity:1}}
.tp-caret{position:absolute;width:3px;border-radius:2px;background:#481DC9;animation:tp-blink .9s steps(1) infinite}
@keyframes tp-blink{50%{opacity:0}}
.tp-bar{position:absolute;border-radius:.22em;background:#E4DEFF;overflow:hidden}
.tp-bar::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(244,241,255,0) 0%,#F4F1FF 50%,rgba(244,241,255,0) 100%);transform:translateX(-100%);animation:tp-shimmer 1.1s linear infinite}
@keyframes tp-shimmer{from{transform:translateX(-100%)}to{transform:translateX(100%)}}
.tp-prog{position:absolute;height:3px;border-radius:2px;background:linear-gradient(90deg,#481DC9,#A99BFF);transform-origin:0 50%}
@media (prefers-reduced-motion:reduce){.tp-glow::after,.tp-typing i,.tp-caret,.tp-bar::after{animation:none}}