/* Generated by tools/rtl/make-rtl-css.js from home.css (sha256 b589dfa0ba7b7d997f51c35d860108dc93837b282d9e8bba5637da086608cfbc). Do not edit by hand. */
/* Kaam360 home page and features page (#398). Builds on landing.css for buttons, header, footer and the pricing cards.
   Movement is CSS only (keyframes and transitions on transform and opacity, so phones stay smooth); js/lp-home.js only adds
   the reveal on scroll, the count-up numbers and the accordion, and starts each little demo when it comes into view.
   Under "reduce motion" every animation stops and each demo shows its finished state. */
:root{
  --h-ink:#0b1020; --h-ink2:#1b2440; --h-muted:#4c5a74; --h-line:#e6e9f2; --h-soft:#f5f6fc;
  --h-brand:#4f46e5; --h-brand2:#7c3aed; --h-green:#10b981; --h-amber:#f59e0b; --h-red:#ef4444;
  --h-grad:linear-gradient(100deg,#4f46e5 0%,#7c3aed 45%,#ec4899 100%);
  --h-ease:cubic-bezier(.2,.7,.2,1);
  --h-card-shadow:0 1px 2px rgba(15,23,42,.05),0 24px 48px -28px rgba(40,30,120,.35);
}
html{scroll-padding-top:136px;scroll-behavior:smooth}
.h-center{text-align:center}
/* A clear focus ring for keyboard users on everything else (these pages do not load app.css). */
:where(a,button,summary,select,input):focus-visible{outline:3px solid #6366f1;outline-offset:2px}
:where(.h-dark,.h-final,.h-facts-band,.lp-footer) :where(a,button,summary):focus-visible{outline-color:#c7d2fe}
.h-flip{flex:none}

/* ---- entrances ---- */
/* Hero words arrive with CSS alone (no waiting for a script), and the main heading is never hidden, so it paints at once. */
.h-in{animation:h-up .7s var(--h-ease) both;animation-delay:var(--d,0s)}
@keyframes h-up{from{opacity:0;transform:translateY(14px)}}
/* Further down, things slide in as they scroll into view (only when the script runs, so the page is complete without it). */
.js [data-reveal]{opacity:0;transform:translateY(24px);transition:opacity .7s var(--h-ease),transform .7s var(--h-ease);transition-delay:var(--d,0s)}
.js [data-reveal].in{opacity:1;transform:none}
/* Each little demo waits, paused, until it is on screen (js adds .play), so nothing moves where nobody looks. */
.js [data-play]:not(.play) *,.js [data-play]:not(.play)::before,.js [data-play]:not(.play)::after{animation-play-state:paused}

/* ---- aurora background ---- */
.h-aurora{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.h-aurora i{position:absolute;border-radius:50%;filter:blur(70px);opacity:.5;will-change:transform}
.h-aurora .a1{width:560px;height:560px;right:-120px;top:-160px;background:#818cf8;animation:h-drift1 18s ease-in-out infinite alternate}
.h-aurora .a2{width:520px;height:520px;left:-140px;top:-60px;background:#f0abfc;animation:h-drift2 22s ease-in-out infinite alternate}
.h-aurora .a3{width:480px;height:480px;right:34%;bottom:-260px;background:#67e8f9;opacity:.42;animation:h-drift3 26s ease-in-out infinite alternate}
.h-aurora.dim i{opacity:.28}
@keyframes h-drift1{to{transform:translate(-120px,90px) scale(1.12)}}
@keyframes h-drift2{to{transform:translate(110px,120px) scale(1.08)}}
@keyframes h-drift3{to{transform:translate(-90px,-70px) scale(1.15)}}
.h-dots{position:absolute;inset:0;pointer-events:none;background-image:radial-gradient(rgba(79,70,229,.2) 1.1px,transparent 1.2px);background-size:26px 26px;-webkit-mask-image:radial-gradient(ellipse 70% 60% at 50% 30%,#000 30%,transparent 78%);mask-image:radial-gradient(ellipse 70% 60% at 50% 30%,#000 30%,transparent 78%)}
.h-dots.light{background-image:radial-gradient(rgba(255,255,255,.26) 1.1px,transparent 1.2px)}

/* ---- hero ---- */
.h-hero{position:relative;overflow:hidden;padding:64px 0 84px;background:linear-gradient(-180deg,#f7f8ff 0%,#fff 100%)}
.h-hero-in{position:relative;display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:56px;align-items:center}
.h-pill{display:inline-flex;align-items:center;gap:9px;padding:7px 14px;border-radius:999px;background:rgba(255,255,255,.85);border:1px solid #dfe3f7;box-shadow:0 4px 14px -6px rgba(79,70,229,.3);font-size:13px;font-weight:600;color:#3d3a9e}
.h-pulse{flex:none;width:8px;height:8px;border-radius:50%;background:var(--h-green);box-shadow:0 0 0 0 rgba(16,185,129,.6);animation:h-ping 2s infinite}
@keyframes h-ping{70%{box-shadow:0 0 0 10px rgba(16,185,129,0)}100%{box-shadow:0 0 0 0 rgba(16,185,129,0)}}
.h-hero h1{margin:18px 0 0;font-size:clamp(36px,5.2vw,64px);line-height:1.05;letter-spacing:-.035em;font-weight:800;color:var(--h-ink)}
.h-grad{background:var(--h-grad);-webkit-background-clip:text;background-clip:text;color:transparent;background-size:200% 100%;animation:h-shine 8s linear infinite}
@keyframes h-shine{to{background-position:300% 0}}
.h-lead{margin-top:18px;font-size:clamp(17px,1.6vw,20px);color:var(--h-muted);max-width:540px}
.h-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.h-btn-glow{position:relative;isolation:isolate}
.h-btn-glow::after{content:"";position:absolute;inset:-2px;border-radius:inherit;background:var(--h-grad);filter:blur(14px);opacity:.45;z-index:-1;transition:opacity .3s}
.h-btn-glow:hover::after{opacity:.8}
.lp-btn-primary.h-btn-glow{background:linear-gradient(-100deg,#4f46e5,#7c3aed)}
.lp-btn-light.h-btn-glow::after{background:#fff;opacity:.35}
.lp-btn .h-flip,.h-link .h-flip,.h-link-light .h-flip{transition:transform .25s var(--h-ease)}
.lp-btn:hover .h-flip,.h-link:hover .h-flip,.h-link-light:hover .h-flip{transform:translateX(-4px)}
.lp-btn-outline-light{background:transparent;color:#fff;border-color:rgba(255,255,255,.6)}
.lp-btn-outline-light:hover{background:rgba(255,255,255,.12);border-color:#fff}
.h-assure{list-style:none;display:flex;flex-wrap:wrap;gap:8px 22px;margin:24px 0 0;padding:0;font-size:14px;color:var(--h-muted)}
.h-assure li{display:inline-flex;align-items:center;gap:6px}
.h-assure svg{color:var(--h-green)}

/* ---- the product picture in the hero: one 12-second story on a loop ---- */
.hx-stage{position:relative;padding:28px 18px 40px}
.hx-window{position:relative;border-radius:18px;background:#fff;border:1px solid #e3e6f5;box-shadow:0 40px 80px -30px rgba(40,30,120,.45),0 12px 24px -12px rgba(40,30,120,.2);overflow:hidden;animation:h-rise 1s var(--h-ease) both}
@keyframes h-rise{from{opacity:0;transform:translateY(30px) scale(.98)}}
.m-bar{display:flex;align-items:center;gap:6px;padding:10px 14px;background:#f4f5fb;border-bottom:1px solid #e8eaf5}
.m-bar i{flex:none;width:10px;height:10px;border-radius:50%;background:#d6d9ea}.m-bar i:nth-child(1){background:#ff6058}.m-bar i:nth-child(2){background:#ffbd2e}.m-bar i:nth-child(3){background:#28c940}
.m-bar span{margin-right:12px;flex:1;max-width:240px;padding:3px 12px;border-radius:7px;background:#fff;border:1px solid #e6e8f4;font-size:11px;color:#5f6b85;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hx-app{display:grid;grid-template-columns:50px minmax(0,1fr)}
.m-side{display:flex;flex-direction:column;align-items:center;gap:12px;padding:14px 0;background:#0f1330}
.m-logo{width:26px;height:26px;border-radius:8px;background:var(--h-grad);margin-bottom:6px}
.m-side b{width:24px;height:24px;border-radius:8px;background:rgba(255,255,255,.08)}.m-side b.on{background:rgba(129,140,248,.35);box-shadow:inset 0 0 0 1px rgba(165,180,252,.5)}
.hx-main{padding:14px 16px 16px;min-width:0}
.hx-top{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.hx-top strong{font-size:14px;margin-left:auto}
.m-chip{display:inline-block;font-size:11px;font-weight:700;padding:3px 9px;border-radius:999px;white-space:nowrap;line-height:1.35}
.m-chip.red{background:#fee2e2;color:#b91c1c}.m-chip.amber{background:#fef3c7;color:#92400e}.m-chip.green{background:#dcfce7;color:#166534}.m-chip.violet{background:#ede9fe;color:#5b21b6}
/* The board: three columns; the card that moves lives in the Done column and the animation starts it one column earlier. */
.hx-board{--mv:24px;position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:12px}
.hx-col{padding:8px;border-radius:12px;background:#f5f6fc;min-height:150px}
.hx-col small{display:block;font-size:10.5px;font-weight:700;color:#5f6b85;margin-bottom:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hx-col i{display:block;height:28px;border-radius:8px;background:#fff;border:1px solid #e6e9f4;margin-bottom:6px}.hx-col i.s{height:20px}
.hx-col i.dn{background:#ecfdf5;border-color:#a7f3d0}
.hx-col:nth-child(3){padding-top:62px}
.hx-mover{position:absolute;top:30px;right:calc((100% - 16px) / 3 * 2 + 24px);width:calc((100% - 16px) / 3 - 16px);display:flex;flex-direction:column;gap:6px;padding:7px 8px;border-radius:9px;background:#fff;border:1px solid #a5b4fc;box-shadow:0 12px 22px -10px rgba(79,70,229,.55);font-size:11.5px;animation:hx-move 12s var(--h-ease) infinite}
.hx-mover b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hx-meta{display:flex;align-items:center;justify-content:space-between}
.hx-av{display:grid;place-items:center;width:20px;height:20px;border-radius:50%;background:#b45309;color:#fff;font:700 9px/1 system-ui,sans-serif}
.hx-done{display:grid;place-items:center;width:18px;height:18px;border-radius:50%;background:#10b981;color:#fff;animation:hx-done 12s infinite}
@keyframes hx-move{
  0%,7%{transform:translate(calc(-1*(-100% - var(--mv))),0) rotate(0) scale(1)}
  12%{transform:translate(calc(-1*(-50% - var(--mv) / 2)),-8px) rotate(3deg) scale(1.06)}
  18%,100%{transform:translate(0,0) rotate(0) scale(1)}
}
@keyframes hx-done{0%,17%{opacity:0;transform:scale(.3)}21%{opacity:1;transform:scale(1.25)}24%,100%{opacity:1;transform:scale(1)}}
.hx-kpis{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:10px}
.hx-kpis div{padding:8px 10px;border-radius:11px;background:#f7f8fd;border:1px solid #eceef8;min-width:0}
.hx-kpis small{display:block;font-size:10.5px;color:#5f6b85;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hx-kpis b{font-size:17px;letter-spacing:-.02em;font-variant-numeric:tabular-nums}.hx-kpis b.g{color:#047857}.hx-kpis b.a{color:#b45309}

.hx-float{position:absolute;display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:14px;background:rgba(255,255,255,.96);border:1px solid #e6e8f6;box-shadow:0 18px 36px -14px rgba(40,30,120,.4);font-size:12.5px;max-width:290px;animation:h-bob 6s ease-in-out infinite}
.hx-float>div{min-width:0}
.hx-float b{display:block;font-size:13px;line-height:1.2}.hx-float small{display:block;color:#5f6b85;font-size:11.5px;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fi{flex:none;display:grid;place-items:center;width:30px;height:30px;border-radius:9px}
.fi.pay{background:#dcfce7;color:#15803d}.fi.deal{background:#ede9fe;color:#6d28d9}.fi.wa{background:#dcfce7;color:#15803d}
.hx-inv{right:-6px;top:0;animation-delay:.2s}
.hx-deal{left:-10px;bottom:52px;animation-delay:1.1s}
.hx-msg{right:8%;bottom:0;animation:h-bob 6s ease-in-out .6s infinite,hx-pop 12s var(--h-ease) infinite}
@keyframes h-bob{50%{transform:translateY(-8px)}}
@keyframes hx-pop{0%,58%{opacity:0;translate:0 12px}63%,95%{opacity:1;translate:0 0}100%{opacity:0;translate:0 0}}
/* Two words in one place that swap (Sent → Paid): the old fades out, the new pops in. */
.hx-swap{display:inline-grid;flex:none}
.hx-swap>*{grid-area:1/1;justify-self:start}
.hx-swap .was{opacity:0}
.hx-inv .was{animation:hx-was1 12s infinite}.hx-inv .now{animation:hx-now1 12s infinite}
.hx-deal .was{animation:hx-was2 12s infinite}.hx-deal .now{animation:hx-now2 12s infinite}
@keyframes hx-was1{0%,30%{opacity:1}34%,95%{opacity:0}100%{opacity:1}}
@keyframes hx-now1{0%,31%{opacity:0;transform:scale(.6)}36%{opacity:1;transform:scale(1.15)}40%,95%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(1)}}
@keyframes hx-was2{0%,46%{opacity:1}50%,95%{opacity:0}100%{opacity:1}}
@keyframes hx-now2{0%,47%{opacity:0;transform:scale(.6)}52%{opacity:1;transform:scale(1.15)}56%,95%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(1)}}
.hx-ticks{flex:none;color:#0ea5e9;animation:hx-ticks 12s infinite}
@keyframes hx-ticks{0%,66%{color:#a3acc2;transform:scale(1)}70%{color:#0ea5e9;transform:scale(1.3)}74%,95%{color:#0ea5e9;transform:scale(1)}100%{color:#a3acc2;transform:scale(1)}}
.light{display:inline-block;flex:none;width:11px;height:11px;border-radius:50%}
.light.red{background:#ef4444;animation:h-pulse-red 2s infinite}.light.amber{background:#f59e0b}.light.green{background:#22c55e}
@keyframes h-pulse-red{0%{box-shadow:0 0 0 0 rgba(239,68,68,.55)}70%{box-shadow:0 0 0 8px rgba(239,68,68,0)}100%{box-shadow:0 0 0 0 rgba(239,68,68,0)}}

/* ---- strip: the tools it works with, and quick facts ---- */
.h-strip{padding:30px 0 34px;border-bottom:1px solid var(--h-line);background:#fff}
.h-strip>div>p{text-align:center;font-size:14px;font-weight:600;color:var(--h-muted);margin:0 0 16px}
.h-marquee{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)}
.h-marquee ul{display:flex;gap:14px;width:max-content;margin:0;padding:4px 0;list-style:none;animation:h-marquee 40s linear infinite}
.h-marquee li{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:999px;border:1px solid var(--h-line);background:#fafbff;font-weight:600;font-size:14px;color:#3f4a66;white-space:nowrap}
.h-marquee li svg{color:var(--h-brand)}
.h-marquee:hover ul{animation-play-state:paused}
@keyframes h-marquee{to{transform:translateX(calc(-1*(-50% - 7px)))}}
.h-badges{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 26px;list-style:none;margin:18px 0 0;padding:0;font-size:14px;color:var(--h-muted)}
.h-badges li{display:inline-flex;align-items:center;gap:7px}
.h-badges svg{color:var(--h-brand)}
.h-badges a{color:var(--h-ink2);font-weight:600;text-decoration:none;border-bottom:1px solid rgba(67,56,202,.3)}
.h-badges a:hover{color:var(--h-brand);border-color:var(--h-brand)}

/* ---- sections ---- */
.h-section{position:relative;padding:96px 0;overflow:hidden}
.h-soft{background:var(--h-soft)}
.h-head{max-width:740px;margin:0 auto 48px;text-align:center}
.h-head.left{margin:0 0 28px;text-align:right}
.h-eyebrow{display:inline-block;font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--h-brand)}
.h-head h2,.h-spot h2{margin-top:10px;font-size:clamp(28px,3.8vw,46px);line-height:1.1;letter-spacing:-.03em;font-weight:800;color:var(--h-ink)}
.h-head p{margin-top:14px;font-size:18px;color:var(--h-muted)}
.h-head p a{color:var(--h-brand)}
.h-head.on-dark h2{color:#fff}.h-head.on-dark .h-eyebrow{color:#a5b4fc}.h-head.on-dark p{color:#c3cae3}
.h-more{margin-top:36px}

.h-ico{display:inline-grid;place-items:center;flex:none;width:46px;height:46px;border-radius:14px;color:#fff;box-shadow:0 10px 20px -8px var(--ic)}
.c1{background:linear-gradient(-135deg,#6366f1,#8b5cf6);--ic:rgba(99,102,241,.7)}.c2{background:linear-gradient(-135deg,#10b981,#06b6d4);--ic:rgba(16,185,129,.7)}.c3{background:linear-gradient(-135deg,#f59e0b,#ef4444);--ic:rgba(245,158,11,.7)}
.c4{background:linear-gradient(-135deg,#06b6d4,#3b82f6);--ic:rgba(6,182,212,.7)}.c5{background:linear-gradient(-135deg,#ec4899,#8b5cf6);--ic:rgba(236,72,153,.7)}.c6{background:linear-gradient(-135deg,#0ea5e9,#6366f1);--ic:rgba(14,165,233,.7)}
.c7{background:linear-gradient(-135deg,#14b8a6,#22c55e);--ic:rgba(20,184,166,.7)}.c8{background:linear-gradient(-135deg,#f97316,#ec4899);--ic:rgba(249,115,22,.7)}.c9{background:linear-gradient(-135deg,#64748b,#334155);--ic:rgba(100,116,139,.7)}

/* ---- module tiles ---- */
.h-tiles{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:16px}
.h-tile{position:relative;display:flex;flex-direction:column;padding:22px 20px 50px;border-radius:20px;background:#fff;border:1px solid var(--h-line);color:inherit;text-decoration:none;transition:transform .35s var(--h-ease),box-shadow .35s,border-color .35s}
.h-tile::before{content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1px;background:var(--h-grad);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:0;transition:opacity .35s;pointer-events:none}
.h-tile:hover,.h-tile:focus-visible{transform:translateY(-6px);box-shadow:0 28px 46px -26px rgba(60,50,160,.45);border-color:transparent}
.h-tile:hover::before,.h-tile:focus-visible::before{opacity:1}
.h-tile:focus-visible{outline:3px solid #6366f1;outline-offset:3px}
.h-tile .h-ico{transition:transform .45s var(--h-ease)}
.h-tile:hover .h-ico{transform:rotate(8deg) scale(1.08)}
.h-tile h3{margin:16px 0 6px;font-size:17px;letter-spacing:-.015em;color:var(--h-ink)}
.h-tile p{margin:0;color:var(--h-muted);font-size:14.5px;line-height:1.5}
.h-tile-go{position:absolute;right:20px;bottom:16px;display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:#eef0ff;color:var(--h-brand);transition:transform .35s var(--h-ease),background .35s,color .35s}
.h-tile:hover .h-tile-go{transform:translateX(-6px);background:var(--h-brand);color:#fff}

/* ---- spotlights ---- */
.h-spots{display:grid;gap:104px}
.h-spot{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:64px;align-items:center;scroll-margin-top:96px}
.h-spot.flip .h-spot-copy{order:2}
.h-spot-copy p{margin-top:14px;font-size:18px;color:var(--h-muted);max-width:500px}
.h-checks{list-style:none;margin:20px 0 22px;padding:0;display:grid;gap:10px}
.h-checks li{position:relative;padding-right:30px;font-weight:600;color:var(--h-ink2);font-size:15.5px}
.h-checks li::before{content:"";position:absolute;right:0;top:1px;width:20px;height:20px;border-radius:50%;background:#e0e7ff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234338ca' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center/12px no-repeat}
.h-link{display:inline-flex;align-items:center;gap:6px;color:#4338ca;font-weight:700;text-decoration:none;border-bottom:1px solid rgba(67,56,202,.3);padding-bottom:1px}
.h-link:hover{border-color:#4338ca}
.h-link:focus-visible,.h-badges a:focus-visible{outline:3px solid #6366f1;outline-offset:3px;border-radius:4px}
.h-link-light:focus-visible{outline:3px solid #a5b4fc;outline-offset:3px;border-radius:4px}
.h-spot-art{position:relative;min-width:0}
.h-spot-art::before{content:"";position:absolute;inset:8% 6%;border-radius:40px;background:var(--h-grad);filter:blur(60px);opacity:.18;z-index:0}

.dm{position:relative;z-index:1;padding:22px;border-radius:22px;background:#fff;border:1px solid #e6e8f6;box-shadow:var(--h-card-shadow);font-size:14px;max-width:520px;margin:0 auto}
.dm small{color:#5f6b85}

/* invoice: Pay now is pressed, the invoice turns Paid, then it lands in the books (8 seconds) */
.dm-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding-bottom:12px;margin-bottom:6px;border-bottom:1px solid #eef0f8}
.dm-head b{font-size:16px}
.dm-line{display:flex;justify-content:space-between;gap:12px;padding:8px 0;border-bottom:1px dashed #eceef6}
.dm-line span{color:#3f4a66}
.dm-line b{font-variant-numeric:tabular-nums}
.dm-line.soft span,.dm-line.soft b{color:#5f6b85;font-weight:500}
.dm-line.total{border-bottom:0;font-size:16px}.dm-line.total span{font-weight:700;color:var(--h-ink)}
.dm-pay{display:block;margin-top:12px;padding:11px;border-radius:12px;text-align:center;font-weight:700;color:#fff;background:linear-gradient(-100deg,#4f46e5,#7c3aed);animation:dm-press 8s infinite}
@keyframes dm-press{0%,26%{transform:scale(1)}30%{transform:scale(.94)}34%,100%{transform:scale(1)}}
.dm-inv .was{animation:dm-was 8s infinite}.dm-inv .now{animation:dm-now 8s infinite}
@keyframes dm-was{0%,32%{opacity:1}36%,94%{opacity:0}100%{opacity:1}}
@keyframes dm-now{0%,33%{opacity:0;transform:scale(.6)}38%{opacity:1;transform:scale(1.15)}42%,94%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(1)}}
.dm-stamp{position:absolute;left:34%;top:104px;padding:6px 16px;border:3px solid #059669;border-radius:10px;color:#047857;font-weight:800;font-size:22px;letter-spacing:.08em;text-transform:uppercase;transform:rotate(12deg);background:rgba(236,253,245,.9);animation:dm-stamp 8s var(--h-ease) infinite}
@keyframes dm-stamp{0%,34%{opacity:0;transform:rotate(12deg) scale(1.8)}40%,94%{opacity:1;transform:rotate(12deg) scale(1)}100%{opacity:0;transform:rotate(12deg) scale(1)}}
.dm-sync{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.dm-sync span{display:inline-flex;align-items:center;gap:5px;padding:4px 10px;border-radius:999px;background:#ecfdf5;color:#047857;font-size:12px;font-weight:700;animation:dm-show 8s infinite both}
.dm-sync span:nth-child(2){animation-delay:.35s}.dm-sync span:nth-child(3){animation-delay:.7s}
@keyframes dm-show{0%,46%{opacity:0;transform:translateY(8px)}52%,94%{opacity:1;transform:none}100%{opacity:0;transform:none}}

/* pipeline: a deal walks through the stages to Won while the sequence ticks off (8 seconds) */
.dm-cols{--st:20px;position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.dm-cols>div:not(.dm-deal){position:relative;padding:70px 8px 8px;border-radius:12px;background:#f5f6fc;min-height:150px}
.dm-cols>div:not(.dm-deal)>small{position:absolute;top:8px;right:8px;left:8px;font-size:11px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dm-cols i{display:block;height:24px;border-radius:7px;background:#fff;border:1px solid #e6e9f4;margin-bottom:6px}
.dm-cols>.won{background:#ecfdf5}.dm-cols>.won small{color:#047857}
.dm-deal{position:absolute;top:30px;right:calc((100% - 24px) / 4 * 3 + 30px);width:calc((100% - 24px) / 4 - 12px);padding:6px 8px;border-radius:9px;background:#fff;border:1px solid #6ee7b7;box-shadow:0 12px 22px -10px rgba(16,185,129,.55);animation:dm-walk 8s var(--h-ease) infinite}
.dm-deal b{display:block;font-size:11.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.dm-deal small{display:block;font-size:11px}
.dm-won{position:absolute;left:-7px;top:-7px;display:grid;place-items:center;width:18px;height:18px;border-radius:50%;background:#10b981;color:#fff;animation:dm-won 8s infinite}
@keyframes dm-walk{
  0%,8%{transform:translateX(calc(-1*(-300% - var(--st) * 3)));border-color:#c7d2fe}
  22%,30%{transform:translateX(calc(-1*(-200% - var(--st) * 2)));border-color:#c7d2fe}
  44%,52%{transform:translateX(calc(-1*(-100% - var(--st))));border-color:#c7d2fe}
  66%,100%{transform:translateX(0);border-color:#6ee7b7}
}
@keyframes dm-won{0%,64%{opacity:0;transform:scale(.3)}70%{opacity:1;transform:scale(1.3)}74%,100%{opacity:1;transform:scale(1)}}
.dm-seq{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.dm-seq span{display:inline-flex;align-items:center;gap:5px;padding:5px 11px;border-radius:999px;font-size:12px;font-weight:700;animation:dm-show2 8s infinite both}
.dm-seq .ok{background:#eef2ff;color:#4338ca}.dm-seq .rep{background:#fef3c7;color:#92400e}
.dm-seq span:nth-child(1){animation-delay:.6s}.dm-seq span:nth-child(2){animation-delay:2.2s}.dm-seq span:nth-child(3){animation-delay:3.8s}
@keyframes dm-show2{0%{opacity:0;transform:translateY(8px)}6%,88%{opacity:1;transform:none}96%,100%{opacity:0;transform:none}}

/* live chat: a question, the agent types, the answer arrives inside the response-time goal (8 seconds) */
.dm-chat{display:flex;flex-direction:column;gap:10px}
.dm-chat-top{display:flex;align-items:center;gap:8px;padding-bottom:10px;border-bottom:1px solid #eef0f8}
.dm-online{width:9px;height:9px;border-radius:50%;background:#10b981;box-shadow:0 0 0 3px #d1fae5}
.dm-bub{max-width:82%;padding:10px 14px;border-radius:16px;margin:0;line-height:1.4}
.dm-bub.them{align-self:flex-start;background:#f1f3fa;border-bottom-right-radius:4px;animation:dm-bub1 8s infinite both}
.dm-bub.us{align-self:flex-end;background:linear-gradient(-100deg,#4f46e5,#7c3aed);color:#fff;border-bottom-left-radius:4px;animation:dm-bub2 8s infinite both}
/* The typing dots take no room when hidden, so the answer sits where it will stay. */
.dm-typing{align-self:flex-end;display:flex;gap:4px;height:31px;margin:-41px 0 0;padding:12px 14px;border-radius:16px;background:#eef0ff;opacity:0;animation:dm-typing 8s infinite}
.dm-typing i{width:7px;height:7px;border-radius:50%;background:#818cf8;animation:dm-dot 1s infinite}
.dm-typing i:nth-child(2){animation-delay:.15s}.dm-typing i:nth-child(3){animation-delay:.3s}
.dm-bub.us{position:relative;z-index:1}
@keyframes dm-bub1{0%,4%{opacity:0;transform:translateY(10px)}10%,92%{opacity:1;transform:none}100%{opacity:0;transform:none}}
@keyframes dm-bub2{0%,48%{opacity:0;transform:translateY(10px) scale(.96)}54%,92%{opacity:1;transform:none}100%{opacity:0;transform:none}}
@keyframes dm-typing{0%,16%{opacity:0;transform:translateY(41px)}20%,46%{opacity:1;transform:translateY(41px)}50%,100%{opacity:0;transform:translateY(41px)}}
@keyframes dm-dot{50%{transform:translateY(-4px);opacity:.5}}
.dm-sla{margin-top:6px;padding:10px 12px;border-radius:12px;background:#f7f8fd;border:1px solid #eceef8;font-size:12.5px;font-weight:700}
.dm-sla .was{color:#92400e;animation:dm-was2 8s infinite}.dm-sla .now{color:#047857;animation:dm-now2 8s infinite}
@keyframes dm-was2{0%,50%{opacity:1}54%,94%{opacity:0}100%{opacity:1}}
@keyframes dm-now2{0%,51%{opacity:0}56%,94%{opacity:1}100%{opacity:0}}
.dm-sla-bar{display:block;height:7px;margin-top:8px;border-radius:5px;background:#e6e9f4;overflow:hidden}
.dm-sla-bar i{display:block;height:100%;width:100%;border-radius:5px;background:#10b981;transform-origin:right;transform:scaleX(.42);animation:dm-sla 8s linear infinite}
@keyframes dm-sla{0%{transform:scaleX(0);background:#f59e0b}50%{transform:scaleX(.42);background:#f59e0b}54%,100%{transform:scaleX(.42);background:#10b981}}

/* time and costs: 1h is picked, the day is closed, the cost bar fills past 80% of the budget and the alert arrives (8 seconds) */
.dm-log{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 0;flex-wrap:wrap}
.dm-log>span:first-child{font-weight:600;color:#3f4a66}
.dm-dur{display:flex;gap:6px}
.dm-dur i{font-style:normal;padding:4px 9px;border-radius:8px;border:1px solid #e0e3f0;font-size:12px;font-weight:700;color:#3f4a66}
.dm-dur i.pick{background:#4f46e5;border-color:#4f46e5;color:#fff;animation:dm-pick 8s infinite}
@keyframes dm-pick{0%,14%{background:#fff;border-color:#e0e3f0;color:#3f4a66;transform:scale(1)}18%{transform:scale(.9)}22%,94%{background:#4f46e5;border-color:#4f46e5;color:#fff;transform:scale(1)}100%{background:#fff;border-color:#e0e3f0;color:#3f4a66}}
.dm-close{margin-top:4px;animation:dm-close 8s infinite}
@keyframes dm-close{0%,30%{transform:scale(1)}34%{transform:scale(.94)}38%,100%{transform:scale(1)}}
.dm-cost .was{animation:dm-was3 8s infinite}.dm-cost .now{animation:dm-now3 8s infinite}
@keyframes dm-was3{0%,36%{opacity:1}40%,94%{opacity:0}100%{opacity:1}}
@keyframes dm-now3{0%,37%{opacity:0;transform:scale(.6)}42%{opacity:1;transform:scale(1.15)}46%,94%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(1)}}
.dm-budget{margin:16px 0 6px}
.dm-bl{display:flex;justify-content:space-between;font-weight:600;margin-bottom:6px}
.dm-bbar{position:relative;display:block;height:12px;border-radius:6px;background:#eef0f8;overflow:hidden}
.dm-bbar .fill{display:flex;height:100%;transform-origin:right;animation:dm-fill 8s var(--h-ease) infinite}
.dm-bbar .fill i{display:block;height:100%}
.dm-bbar b{position:absolute;right:80%;top:0;bottom:0;width:2px;background:#b45309}
i.lab{width:62%;background:#6366f1}i.ovh{width:20%;background:#a78bfa}
@keyframes dm-fill{0%,40%{transform:scaleX(.6)}60%,100%{transform:scaleX(1)}}
.dm-legend{display:flex;flex-wrap:wrap;gap:6px 14px;margin-top:8px;font-size:12px;color:#5f6b85}
.dm-legend span{display:inline-flex;align-items:center;gap:6px}.dm-legend i{width:10px;height:10px;border-radius:3px}
.dm-alert{display:inline-flex;align-items:center;gap:6px;margin-top:12px;padding:6px 12px;border-radius:999px;background:#fef3c7;color:#92400e;font-size:12.5px;font-weight:700;animation:dm-show3 8s infinite both}
@keyframes dm-show3{0%,58%{opacity:0;transform:translateY(8px)}64%,94%{opacity:1;transform:none}100%{opacity:0;transform:none}}

/* dashboard: the widgets fill in once as it comes into view */
.dm-dash{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.dm-w{padding:14px;border-radius:14px;background:#f7f8fd;border:1px solid #eceef8;min-width:0}
.dm-w small{display:block;font-size:12px;font-weight:600}
.dm-w b{display:block;font-size:26px;letter-spacing:-.03em;margin-top:2px;font-variant-numeric:tabular-nums}
.dm-w svg{display:block;width:100%;height:32px;margin-top:6px;overflow:visible}
.dm-w.wide{grid-column:1/-1}
.dm-spark{fill:none;stroke:#4f46e5;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:180;stroke-dashoffset:0;animation:dm-draw 1.8s .3s var(--h-ease) both}
@keyframes dm-draw{from{stroke-dashoffset:180}}
@property --dm-p{syntax:"<number>";inherits:false;initial-value:78}
.dm-ring{--dm-p:78;display:grid;place-items:center;width:84px;height:84px;margin:8px auto 0;border-radius:50%;background:conic-gradient(#4f46e5 calc(var(--dm-p) * 1%),#e6e8f6 0);position:relative;animation:dm-ring 1.6s .2s var(--h-ease) both}
.dm-ring::before{content:"";position:absolute;inset:10px;border-radius:50%;background:#f7f8fd}
.dm-ring>span{position:relative;font-weight:800;font-size:18px}
@keyframes dm-ring{from{--dm-p:0}}
.dm-bars{display:flex;align-items:flex-end;gap:10px;height:90px;margin-top:10px}
.dm-bars i{flex:1;height:var(--h);border-radius:7px 7px 3px 3px;background:linear-gradient(-180deg,#818cf8,#c7d2fe);transform-origin:bottom;animation:h-grow 1.1s var(--h-ease) both}
.dm-bars i:nth-child(2){animation-delay:.07s}.dm-bars i:nth-child(3){animation-delay:.14s}.dm-bars i:nth-child(4){animation-delay:.21s}.dm-bars i:nth-child(5){animation-delay:.28s}.dm-bars i:nth-child(6){animation-delay:.35s}.dm-bars i:nth-child(7){animation-delay:.42s}
@keyframes h-grow{from{transform:scaleY(.05)}}
.dm-pbi{position:absolute;left:-10px;top:-14px;display:inline-flex;align-items:center;gap:5px;padding:6px 12px;border-radius:999px;background:#fef3c7;color:#92400e;font-size:12px;font-weight:800;box-shadow:0 10px 20px -10px rgba(146,64,14,.5);animation:h-bob 5s ease-in-out infinite}

/* ---- facts band ---- */
.h-facts-band{position:relative;overflow:hidden;padding:72px 0;background:linear-gradient(-180deg,#0b1020 0%,#151d48 100%);color:#fff}
.h-facts{position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.h-facts div{padding:24px 18px;border-radius:20px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);text-align:center}
.h-facts b{display:block;font-size:clamp(40px,5vw,58px);font-weight:800;letter-spacing:-.04em;line-height:1.1;background:linear-gradient(-120deg,#fff,#a5b4fc);-webkit-background-clip:text;background-clip:text;color:transparent;font-variant-numeric:tabular-nums}
.h-facts small{display:block;margin-top:6px;color:#c3cae3;font-size:14.5px}

/* ---- why: three pillars ---- */
.h-pillars{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.h-pillar{position:relative;padding:28px 26px 24px;border-radius:22px;background:#fff;border:1px solid var(--h-line);transition:transform .35s var(--h-ease),box-shadow .35s,border-color .35s}
.h-pillar:hover{transform:translateY(-6px);box-shadow:0 30px 50px -24px rgba(60,50,160,.35);border-color:#d6dafc}
.h-pillar h3{margin:18px 0 8px;font-size:21px;letter-spacing:-.02em}
.h-pillar p{color:var(--h-muted);font-size:15.5px}
.h-mini{display:flex;align-items:flex-end;gap:10px;height:44px;margin-top:20px}
.h-mini.lights i{width:16px;height:16px;border-radius:50%;margin-bottom:6px}
.h-mini.track{align-items:center;gap:0}
.h-mini.track i{position:relative;width:16px;height:16px;border-radius:50%;background:#e6e8f4;margin-right:46px}
.h-mini.track i::after{content:"";position:absolute;left:16px;top:7px;width:46px;height:2px;background:#e6e8f4}
.h-mini.track i:last-child{margin-right:0}.h-mini.track i:last-child::after{display:none}
.h-mini.track i.on{background:#10b981}.h-mini.track i.on::after{background:#10b981}.h-mini.track i.now{background:#fff;box-shadow:0 0 0 3px #10b981 inset}
.h-mini.bars i{flex:1;height:var(--h);border-radius:6px 6px 2px 2px;background:linear-gradient(180deg,#818cf8,#c7d2fe);transform-origin:bottom;transition:transform .9s var(--h-ease) .2s}
.js .h-pillar:not(.in) .h-mini.bars i{transform:scaleY(.1)}

/* ---- dark sections and trust ---- */
.h-dark{background:linear-gradient(-180deg,#0b1020 0%,#10173a 100%);color:#fff}
.h-trust-grid{position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;list-style:none;margin:0 0 30px;padding:0}
.h-trust-grid li{display:flex;flex-direction:column;gap:12px;padding:22px;border-radius:18px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);color:#e3e7f6;font-weight:600;line-height:1.45}
.h-trust-grid svg{color:#34d399}
.h-trust-links{position:relative;display:flex;flex-wrap:wrap;justify-content:center;gap:12px 28px}
.h-trust-list{display:flex;flex-wrap:wrap;gap:12px 28px;margin:0 0 26px;padding:0;list-style:none}
.h-trust-list li{display:inline-flex;align-items:flex-start;gap:9px;color:#e3e7f6;font-weight:600}
.h-trust-list svg{flex:none;color:#34d399}
.h-trust-list a{color:#c7d2fe;text-decoration:underline;text-underline-offset:3px}.h-trust-list a:hover{color:#fff}
.h-link-light{display:inline-flex;align-items:center;gap:6px;color:#c7d2fe;font-weight:600;text-decoration:none;border-bottom:1px solid rgba(199,210,254,.4)}
.h-link-light:hover{color:#fff;border-color:#fff}

/* ---- pricing polish ---- */
#pricing .lp-plans{gap:22px}
#pricing .lp-plan-card{border-radius:22px;transition:transform .35s var(--h-ease),box-shadow .35s}
#pricing .lp-plan-card:hover{transform:translateY(-6px);box-shadow:0 28px 50px -30px rgba(60,50,160,.45)}
#pricing .lp-plan-card.is-featured{background:linear-gradient(#fff,#fff) padding-box,var(--h-grad) border-box;border:2px solid transparent;box-shadow:0 30px 60px -28px rgba(79,70,229,.55)}

/* ---- questions: an accordion that opens smoothly (js animates the height; without it, plain details) ---- */
.h-faq-wrap{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:56px;align-items:start}
.h-faq details{border:1px solid var(--h-line);background:#fff;border-radius:16px;margin-bottom:12px;padding:0 22px;transition:box-shadow .3s,border-color .3s}
.h-faq details[open]{border-color:#c7cdf6;box-shadow:0 18px 34px -22px rgba(79,70,229,.45)}
.h-faq summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 0;font-weight:700;cursor:pointer;font-size:16.5px}
.h-faq summary::-webkit-details-marker{display:none}
.h-faq summary::after{content:"";flex:none;width:24px;height:24px;border-radius:50%;background:#eef0ff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234f46e5' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M12 6v12M6 12h12'/%3E%3C/svg%3E") center/12px no-repeat;transition:transform .35s var(--h-ease),background-color .35s}
.h-faq details[open] summary::after{transform:rotate(-135deg);background-color:#e0e7ff}
.h-faq-a{overflow:hidden}
.h-faq-a p{padding:0 0 20px;margin:0;color:var(--h-muted)}
.h-faq summary:focus-visible{outline:3px solid #6366f1;outline-offset:2px;border-radius:8px}

/* ---- final call to action ---- */
.h-final{position:relative;overflow:hidden;padding:104px 0;background:linear-gradient(-135deg,#312e81 0%,#4f46e5 45%,#7c3aed 100%);color:#fff;text-align:center}
.h-final .h-aurora i{opacity:.32}
.h-final-in{position:relative}
.h-final h2{font-size:clamp(30px,4.4vw,54px);letter-spacing:-.035em;line-height:1.08;font-weight:800;max-width:760px;margin:0 auto}
.h-final p{margin:16px 0 30px;font-size:19px;color:#eef0ff}
.h-final-cta{display:flex;flex-wrap:wrap;justify-content:center;gap:12px}
.h-final small{display:block;margin-top:22px;color:#eef0ff;font-size:14px}.h-final small a{color:#fff}

/* ---- the features page ---- */
.fx-hero{position:relative;overflow:hidden;padding:60px 0 52px;background:linear-gradient(-180deg,#f7f8ff 0%,#fff 100%);text-align:center}
.fx-hero-in{position:relative}
.fx-crumb{font-size:14px;color:var(--h-muted);margin:0}
.fx-crumb a{color:var(--h-brand);text-decoration:none;font-weight:600}
.fx-hero h1{margin:12px auto 0;max-width:820px;font-size:clamp(34px,5vw,58px);line-height:1.06;letter-spacing:-.035em;font-weight:800;color:var(--h-ink)}
.fx-hero .h-lead{margin:16px auto 0;max-width:640px}
.fx-hero .h-cta{justify-content:center}
.fx-nav{position:sticky;top:68px;z-index:20;background:rgba(255,255,255,.92);-webkit-backdrop-filter:saturate(180%) blur(12px);backdrop-filter:saturate(180%) blur(12px);border-top:1px solid var(--h-line);border-bottom:1px solid var(--h-line)}
.fx-nav ul{display:flex;gap:6px;margin:0;padding:10px 0;list-style:none;overflow-x:auto;scrollbar-width:none}
.fx-nav ul::-webkit-scrollbar{display:none}
.fx-nav a{display:inline-flex;align-items:center;gap:6px;padding:7px 13px;border-radius:999px;color:#3f4a66;font-weight:600;font-size:14px;text-decoration:none;white-space:nowrap;transition:background .25s,color .25s}
.fx-nav a:hover{background:#eef0ff;color:var(--h-brand)}
.fx-nav a.on{background:var(--h-brand);color:#fff}
.fx-nav a:focus-visible{outline:3px solid #6366f1;outline-offset:-1px}
.fx-mod{position:relative;padding:72px 0;border-bottom:1px solid var(--h-line);scroll-margin-top:120px}
.fx-mod:nth-of-type(odd){background:var(--h-soft)}
.fx-mod-in{position:relative;display:grid;grid-template-columns:minmax(0,.62fr) minmax(0,1.38fr);gap:48px;align-items:start}
.fx-mod-head{position:sticky;top:150px}
.fx-mod-head h2{margin:16px 0 8px;font-size:clamp(26px,3vw,36px);letter-spacing:-.03em;line-height:1.1;font-weight:800;color:var(--h-ink)}
.fx-mod-head p{color:var(--h-muted);font-size:17px;margin:0}
.fx-mod-head.on-dark h2{color:#fff}.fx-mod-head.on-dark p{color:#c3cae3}
.fx-points{list-style:none;margin:0 0 18px;padding:22px 24px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 26px;border-radius:20px;background:#fff;border:1px solid var(--h-line)}
.fx-points li{position:relative;padding-right:26px;font-size:15px;color:var(--h-ink2);line-height:1.45}
.fx-points li::before{content:"";position:absolute;right:2px;top:.42em;width:12px;height:7px;border-right:2px solid var(--h-green);border-bottom:2px solid var(--h-green);transform:rotate(45deg)}
.fx-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.fx-card{position:relative;padding:22px;border-radius:20px;background:#fff;border:1px solid var(--h-line);transition:transform .35s var(--h-ease),box-shadow .35s,border-color .35s;scroll-margin-top:150px}
.fx-card:hover{transform:translateY(-4px);box-shadow:0 26px 44px -28px rgba(60,50,160,.45);border-color:#d6dafc}
.fx-card:target{border-color:var(--h-brand);box-shadow:0 0 0 3px #c7d2fe}
.fx-card .h-ico{width:40px;height:40px;border-radius:12px}
.fx-card h3{margin:14px 0 6px;font-size:17px;letter-spacing:-.015em;line-height:1.3;color:var(--h-ink)}
.fx-card p{margin:0 0 8px;color:var(--h-muted);font-size:14.5px;line-height:1.55}
.fx-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.fx-chips span{padding:4px 10px;border-radius:999px;background:#ecfeff;color:#0e7490;font-size:12px;font-weight:700}
.fx-card .fx-links{display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:10px}
.fx-sec{border-bottom:0;overflow:hidden}
.fx-trust{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 26px}
.fx-sec-links{display:flex;flex-wrap:wrap;gap:12px 26px}
.fx-help{padding:64px 0}
.h-mod-help{display:flex;align-items:center;gap:20px;padding:26px 28px;border-radius:22px;background:#fff;border:1px solid var(--h-line);box-shadow:var(--h-card-shadow)}
.h-mod-help div{flex:1}.h-mod-help h2{margin:0 0 4px;font-size:22px;letter-spacing:-.02em}.h-mod-help p{margin:0;color:var(--h-muted)}

/* ---- header polish ---- */
.lp-header{transition:box-shadow .3s,background .3s}
.lp-header.scrolled{box-shadow:0 8px 24px -16px rgba(15,23,42,.35)}

/* ---- responsive ---- */
@media (max-width:1180px){
  .h-tiles{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:1020px){
  .h-hero-in{grid-template-columns:minmax(0,1fr);gap:40px}
  .h-hero{padding-top:40px}
  .hx-stage{max-width:620px;margin:0 auto;width:100%}
  .h-spot,.h-spot.flip{grid-template-columns:minmax(0,1fr);gap:36px}
  .h-spot.flip .h-spot-copy{order:0}
  .h-faq-wrap{grid-template-columns:minmax(0,1fr);gap:12px}
  .h-facts,.h-trust-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .fx-mod-in{grid-template-columns:minmax(0,1fr);gap:24px}
  .fx-mod-head{position:static}
}
@media (max-width:720px){
  html{scroll-padding-top:120px}
  .h-section{padding:68px 0}
  .h-spots{gap:72px}
  .h-tiles{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .h-tile{padding:18px 16px 48px}
  .h-tile h3{font-size:16px}.h-tile p{font-size:14px}
  .h-tile-go{right:16px}
  .h-pillars{grid-template-columns:minmax(0,1fr)}
  .hx-stage{padding:26px 0 50px}
  .hx-inv{right:-2px;top:0}.hx-deal{left:-2px;top:auto;bottom:70px}.hx-msg{right:6px;bottom:0}
  .hx-float{padding:8px 10px;gap:8px;max-width:240px}
  .hx-app{grid-template-columns:36px minmax(0,1fr)}
  .m-side b,.m-logo{width:20px;height:20px}
  .hx-main{padding:12px}
  .hx-board{--mv:20px}
  .hx-col{min-height:132px;padding:6px}
  .hx-col:nth-child(3){padding-top:58px}
  .hx-mover{top:27px;right:calc((100% - 16px) / 3 * 2 + 22px);width:calc((100% - 16px) / 3 - 12px);padding:6px}
  .hx-kpis b{font-size:15px}
  .dm{padding:16px}
  .dm-stamp{left:30%;top:92px;font-size:18px}
  .dm-cols{--st:14px;gap:6px}
  .dm-cols>div:not(.dm-deal){padding:66px 6px 6px}
  .dm-cols>div:not(.dm-deal)>small{right:6px;left:6px}
  .dm-deal{right:calc((100% - 18px) / 4 * 3 + 22px);width:calc((100% - 18px) / 4 - 8px);padding:5px 6px}
  .dm-pbi{left:4px}
  .h-facts{gap:10px}.h-facts div{padding:18px 10px}
  .h-trust-grid{grid-template-columns:minmax(0,1fr);gap:10px}
  .h-trust-grid li{flex-direction:row;align-items:center;padding:16px 18px}
  .h-trust-grid svg{flex:none}
  .fx-points,.fx-cards,.fx-trust{grid-template-columns:minmax(0,1fr)}
  .fx-mod{padding:56px 0}
  .h-mod-help{flex-direction:column;align-items:flex-start}
}

/* ---- motion preferences: everything stands still, and each demo shows its finished state ---- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition-duration:.001ms!important}
  .js [data-reveal]{opacity:1;transform:none}
  .h-marquee ul{flex-wrap:wrap;justify-content:center;width:auto}
  .h-marquee li[aria-hidden]{display:none}
  .h-marquee{-webkit-mask-image:none;mask-image:none}
}
/* The same when "Reduce motion" was chosen in the app (the menu under your name). */
html[data-motion=reduce]{scroll-behavior:auto}
html[data-motion=reduce] *,html[data-motion=reduce] *::before,html[data-motion=reduce] *::after{animation:none!important;transition-duration:.001ms!important}
html[data-motion=reduce].js [data-reveal]{opacity:1;transform:none}
html[data-motion=reduce] .h-marquee ul{flex-wrap:wrap;justify-content:center;width:auto}
html[data-motion=reduce] .h-marquee li[aria-hidden]{display:none}
html[data-motion=reduce] .h-marquee{-webkit-mask-image:none;mask-image:none}