/* Landing page. Same look as the dashboard: grey canvas, white 24px cards, one orange accent.
   Illustrations are inline one-colour SVG (currentColor = --art); every animation is CSS (CSP: no script, no inline style). */
.lp{--pg:#f4f4f5;--card:#fff;--ink:#0f172a;--mut:#475569;--line:#e4e4e7;--acc:#155da8;--pill:#1f74cc;--pill-h:#155da8;--on-pill:#fff;--soft:#eaf2fb;--art:#0096e6;--rc:24px;--pad:56px;background:var(--pg);color:var(--ink);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased}
.lp h1,.lp h2,.lp h3{margin:0;font-weight:700;letter-spacing:-.03em;line-height:1.1;text-wrap:balance}
.lp ::selection{background:#cfe0f5;color:var(--ink)}
.lp p{margin:0;text-wrap:pretty}.lp a{color:inherit}.lp ul,.lp ol{margin:0;padding:0;list-style:none}.lp li{background:none}
.lp-w{width:100%;max-width:1640px;margin:0 auto;padding:0 24px}
.lp-sec{padding:8px 0}
.lp-card,.lp li.lp-card{background:var(--card);border:0;border-radius:var(--rc)}
.lp-head{padding:72px var(--pad) 28px}
.lp-eyebrow{font-size:13.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--acc);margin-bottom:12px}
.lp-h2{font-size:clamp(40px,2.8vw,46px);max-width:24ch}
.lp-lead{font-size:18.5px;color:var(--mut);max-width:54ch}
.lp-acc{color:var(--pill);background:linear-gradient(90deg,#1f74cc,#0a3cbf);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.lp-ico{display:grid;place-items:center;width:48px;height:48px;border-radius:50%;background:var(--soft);color:var(--pill);margin-bottom:20px}
.lp-ico .i{width:22px;height:22px}

/* Buttons: pills, like the dashboard's primary action */
.lp-btn{display:inline-flex;align-items:center;justify-content:center;height:42px;padding:0 20px;border-radius:999px;font-weight:600;font-size:15px;text-decoration:none!important;white-space:nowrap;border:1.5px solid transparent;transition:background .15s,border-color .15s,color .15s,transform .15s}
.lp-btn .i{width:18px;height:18px;margin:0 -6px 0 10px;transition:transform .2s}
.lp-btn:hover .i{transform:translateX(3px)}
.lp-btn.big{height:52px;padding:0 28px;font-size:16px}
.lp-btn.solid{background:var(--pill);color:var(--on-pill)!important}
.lp-btn.solid:hover{background:var(--pill-h);transform:translateY(-1px)}
.lp-btn.outline{border-color:#d4d4d8;color:var(--ink)!important;background:var(--card)}
.lp-btn.outline:hover{border-color:var(--pill);color:var(--acc)!important}
.lp-btn.light{background:#fff;color:var(--acc)!important}
.lp-btn.light:hover{background:var(--soft);transform:translateY(-1px)}
.lp-btn.ghost-light{border-color:rgba(255,255,255,.6);color:#fff!important}
.lp-btn.ghost-light:hover{background:rgba(255,255,255,.12)}
.lp a:focus-visible,.lp summary:focus-visible{outline:3px solid var(--pill);outline-offset:3px;border-radius:8px}
.lp-end a:focus-visible{outline-color:#8cc0f2}

/* Header: floating white bar */
.lp-top{position:sticky;top:0;z-index:20;padding:16px 0 8px;background:linear-gradient(var(--pg) 70%,rgba(244,244,245,0))}
.lp-top-in{display:flex;align-items:center;gap:36px;height:68px;padding:0 14px 0 24px;background:var(--card);border-radius:var(--rc)}
@supports (animation-timeline:scroll()){.lp-top-in{animation:lp-lift linear both;animation-timeline:scroll();animation-range:0 160px}@keyframes lp-lift{to{box-shadow:0 12px 32px -14px rgba(15,23,42,.22)}}}
.lp-name{display:inline-flex;align-items:center;gap:10px;font-weight:700;font-size:19px;letter-spacing:-.02em;text-decoration:none}
.lp-mark{display:grid;place-items:center;width:34px;height:34px;border-radius:10px;background:linear-gradient(135deg,#3a8ade,#155da8);color:#fff;box-shadow:0 0 16px rgba(31,116,204,.35)}
.lp-mark .i{width:18px;height:18px;stroke-width:2.2}
.lp-top nav{display:flex;gap:4px;flex:1;font-size:15px;font-weight:500;color:var(--mut)}
.lp-top nav a{text-decoration:none;padding:8px 14px;border-radius:999px}
.lp-top nav a{transition:background .15s,color .15s}.lp-top nav a:hover{background:var(--pg);color:var(--ink)}
.lp-top-act{display:flex;align-items:center;gap:8px}
.lp-login{font-weight:600;font-size:15px;text-decoration:none;padding:8px 14px;border-radius:999px}
.lp-login:hover{background:var(--pg)}

/* Hero */
.lp-hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.12fr);gap:32px;align-items:center;padding:64px 32px 64px var(--pad);overflow:hidden}
.lp-hero-art{width:100%;max-width:820px;justify-self:center}
.lp-pill{display:inline-flex;align-items:center;gap:10px;padding:6px 14px;border-radius:999px;background:var(--soft);color:var(--acc);font-size:13.5px;font-weight:600;margin-bottom:24px}
.lp-pulse{width:8px;height:8px;border-radius:50%;background:#1f74cc;box-shadow:0 0 8px #1f74cc}
.lp-hero h1{font-size:clamp(50px,3.6vw,56px);line-height:1.05;margin-bottom:22px}
.lp .lp-cta-row{display:flex;flex-wrap:wrap;gap:12px;margin:32px 0 14px}
.lp-small{font-size:14.5px;color:var(--mut)}

/* Channels */
.lp-chan{display:flex;align-items:center;justify-content:space-between;gap:16px 24px;padding:18px 18px 18px var(--pad);flex-wrap:wrap}
.lp-chan-t{font-weight:600;font-size:15px}
.lp-chan ul{display:flex;gap:8px;flex-wrap:wrap}
.lp-chan li{display:flex;align-items:center;gap:9px;padding:8px 10px 8px 16px;border-radius:999px;background:var(--pg);font-size:14.5px}
.st{font-size:12px;font-weight:700;padding:1px 9px;border-radius:999px;background:#e4e4e7;color:#52525b}
.st.on{background:#ecfdf5;color:#065f46}
.st.on::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:currentColor;margin-right:5px;vertical-align:1px}

/* Feature rows: copy + illustration on a tinted panel */
.lp-feat .lp-card+.lp-card{margin-top:16px}
.lp-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:56px;align-items:center;padding:16px 16px 16px var(--pad)}
.lp-row.flip{padding:16px var(--pad) 16px 16px}
.lp-row.flip .lp-copy{order:2}
.lp-copy .lp-tag{display:flex;align-items:center;gap:12px;margin-bottom:22px;max-width:none;font-size:14px;font-weight:600;color:var(--acc)}
.lp-tag .lp-ico{margin:0;width:40px;height:40px}.lp-tag .lp-ico .i{width:19px;height:19px}
.lp-copy h3{font-size:clamp(30px,2.2vw,34px);margin-bottom:14px;max-width:18ch}
.lp-copy p{color:var(--mut);font-size:17.5px;max-width:50ch}
.lp-art{background:radial-gradient(closest-side at 50% 50%,rgba(31,116,204,.08),rgba(31,116,204,0)) center/90% 90% no-repeat,#f6f8fb;border:1px solid #edf0f4;border-radius:18px;padding:32px 24px}
.lp-art .art{max-width:680px;margin:0 auto}

/* Cards */
.lp-cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.lp-cards li{padding:28px;transition:transform .2s,box-shadow .2s}
.lp-cards li:hover{box-shadow:0 18px 36px -24px rgba(15,23,42,.35)}
.lp-cards h3{font-size:19px;margin-bottom:8px;letter-spacing:-.02em}.lp-cards p{color:var(--mut);font-size:16px}

/* Developers */
.lp-dev{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:56px;align-items:center;padding:var(--pad)}
.lp-dev .lp-h2{margin-bottom:16px}
.lp .lp-ticks{margin:24px 0 32px;display:grid;gap:12px;font-weight:500}
.lp-ticks li{padding-left:34px;position:relative}
.lp-ticks li::before{content:"";position:absolute;left:0;top:3px;width:22px;height:22px;border-radius:50%;background:var(--soft)}
.lp-ticks li::after{content:"";position:absolute;left:8px;top:8px;width:5px;height:9px;border:solid var(--pill);border-width:0 2px 2px 0;transform:rotate(45deg)}
.lp-code-wrap{background:#0b172d;box-shadow:0 24px 60px -30px rgba(10,60,191,.6);border-radius:18px;overflow:hidden}
.lp-code-bar{display:flex;align-items:center;gap:7px;padding:14px 18px;border-bottom:1px solid #16264a;color:#64748b;font-size:12.5px}
.lp-code-bar i{width:10px;height:10px;border-radius:50%;border:1.5px solid #1f74cc}
.lp-code-bar span{margin-left:8px}
.lp-code-bar b{margin-left:auto;font-size:11.5px;font-weight:600;color:#8cc0f2;background:rgba(106,169,236,.16);padding:2px 10px;border-radius:999px}
.lp .lp-code{margin:0;padding:22px 24px 26px;background:none;border:0;color:#94a3b8;overflow-x:auto;font-size:14px;line-height:1.75}
.lp-code .m,.lp-code .ok{color:#6aa9ec;font-weight:700}.lp-code .k{color:#8cc8ff}.lp-code .s{color:#f1f5f9}.lp-code .n{color:#6aa9ec}
.lp-code code{background:none;border:0;padding:0;color:inherit;font-size:inherit;white-space:pre}

/* Steps */
.lp-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.lp .lp-steps li{position:relative;display:block;padding:28px;border:0}
.lp-steps li:not(:last-child)::after{content:"";position:absolute;top:47px;left:84px;right:-16px;border-top:2px dashed #9cc3ec}
.lp-steps li::before{content:none}
.lp-steps .n{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--pill);color:var(--on-pill);font-weight:700;margin-bottom:20px}
.lp-steps h3{font-size:20px;margin-bottom:8px}.lp-steps p{color:var(--mut)}

/* FAQ */
.lp-faq-card{margin-top:56px;padding:48px var(--pad);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:40px}
.lp .lp-faq{max-width:none;margin:0}
#api .lp-dev{margin-top:56px}
.lp .lp-faq{display:block}
.lp .lp-faq details{border:0;border-bottom:1px solid var(--line);padding:18px 0;background:none;border-radius:0;box-shadow:none}
.lp .lp-faq details:first-child{padding-top:0}
.lp .lp-faq details:last-child{border-bottom:0}
.lp-faq summary{transition:color .15s;cursor:pointer;font-weight:600;font-size:18px;list-style:none;display:flex;justify-content:space-between;gap:16px;align-items:center}
.lp-faq summary::-webkit-details-marker{display:none}
.lp-faq summary::after{content:"+";display:grid;place-items:center;flex:none;width:30px;height:30px;border-radius:50%;background:var(--pg);font-size:20px;font-weight:400;color:var(--acc);line-height:1}
.lp-faq summary:hover{color:var(--acc)}
.lp-faq details[open] summary::after{content:"\2212";background:var(--soft)}
.lp-faq p{margin-top:10px;color:var(--mut);max-width:64ch}

/* Closing call to action: the one solid-orange surface */
.lp-end{position:relative;overflow:hidden;margin-top:16px;padding:88px 24px;border-radius:var(--rc);background:radial-gradient(60% 90% at 50% 45%,#0a3cbf 0%,#062367 45%,#0b172d 100%);color:#fff;text-align:center}
.lp-end h2{position:relative;font-size:48px;margin-bottom:14px}
.lp-end .lp-lead{position:relative;margin:0 auto;color:#bfe3ff}
.lp-end h2 span{color:#8cc0f2;text-shadow:0 0 24px rgba(106,169,236,.5)}
.lp-end .lp-cta-row{position:relative;justify-content:center}
.lp-end-art{position:absolute;width:560px;right:-160px;top:50%;transform:translateY(-50%);color:#8cc0f2;opacity:.35;pointer-events:none}
.lp-end-art.l{right:auto;left:-220px;opacity:.18}

.lp-foot{padding:40px 0 48px;font-size:14.5px;color:var(--mut)}
.lp-foot-in{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 24px;padding:0 var(--pad) 24px}
.lp-foot .lp-mark{width:28px;height:28px;border-radius:8px}.lp-foot .lp-mark .i{width:15px;height:15px}.lp-foot .lp-name{font-size:16px;color:var(--ink)}
.lp-foot nav{display:flex;flex-wrap:wrap;gap:8px 24px}.lp-foot nav a{text-decoration:none}.lp-foot nav a:hover{color:var(--ink)}
.lp .lp-foot-note{margin:0 var(--pad);padding-top:20px;border-top:1px solid #e4e4e7;font-size:13.5px}

/* ---------- One-colour line art ---------- */
/* Every illustration: ink outlines with one accent per part (each SVG sets its parts' colours through the `color` attribute) */
.art{display:block;width:100%;height:auto;color:#1e293b;overflow:visible;filter:drop-shadow(0 10px 24px rgba(15,23,42,.08))}
.art .halo{opacity:.8}
.art .grid{opacity:.28}
.art .pp{fill:#fff}
.art .tt{fill:currentColor;fill-opacity:.1}
.art .ss{fill:currentColor;stroke:none}
.art .fa{stroke-opacity:.38}
.art .tk{stroke-opacity:.2}
.art .ln{stroke-width:6;stroke-opacity:.18}
.art .ln.s{stroke-opacity:.6}
.art .flow{stroke-dasharray:2 9}
.art text{fill:#1e293b;stroke:none;font-family:inherit;font-weight:500}
/* Accent text, darkened from each accent so small labels stay readable */
.art text.w{fill:#fff}.art text.nv{fill:#0b172d}.art .ok{fill:#047857}.art .v{fill:#6d28d9}.art .am{fill:#b45309}.art .cr{fill:#c0262d}.art .bl{fill:#1f74cc}.art .tc{fill:#0f766e}
.art .b{font-weight:700}
.art .mono{font-family:ui-monospace,"SF Mono",SFMono-Regular,Menlo,Consolas,monospace}
/* Still frame (also the reduced-motion frame): no dots in flight, the code already arrived */
.art .dot,.art .ring,.art .ah-typ,.aq-m2{opacity:0}
.art .af-x{opacity:.8}

@media (prefers-reduced-motion:no-preference){
  html{scroll-behavior:smooth}
  .lp-pulse{animation:lp-pulse 2s ease-in-out infinite}
  @keyframes lp-pulse{0%,100%{box-shadow:0 0 0 0 rgba(31,116,204,.45)}60%{box-shadow:0 0 0 7px rgba(31,116,204,0)}}

  /* Shared motifs */
  .art .flow{animation:art-dash 1s linear infinite}
  .art .flow.rev{animation-direction:reverse}
  @keyframes art-dash{to{stroke-dashoffset:-22}}
  .art .ring,.lp-end-art .ring{transform-box:fill-box;transform-origin:center;animation:art-ring 3.2s ease-out infinite}
  .art .ring.r2,.lp-end-art .ring.r2{animation-delay:1.6s}
  @keyframes art-ring{0%{transform:scale(1);opacity:.55}100%{transform:scale(1.6);opacity:0}}
  .art .spin{transform-box:fill-box;transform-origin:center;animation:art-spin 16s linear infinite}
  @keyframes art-spin{to{transform:rotate(360deg)}}
  .art .wave{animation:art-wave 1.8s ease-in-out infinite}
  .art .wave.w2{animation-delay:.35s}
  @keyframes art-wave{0%,100%{opacity:.2}50%{opacity:1}}
  .art .float{animation:art-float 6s ease-in-out infinite}
  @keyframes art-float{50%{transform:translateY(-6px)}}
  .art .spark{stroke-dasharray:90;animation:art-draw 6s ease-out infinite}
  @keyframes art-draw{0%{stroke-dashoffset:90}30%,100%{stroke-dashoffset:0}}

  /* Hero: request -> hub -> carriers -> phone, 6s loop */
  .ah-d1{animation:ah-d1 6s ease-in-out infinite}
  @keyframes ah-d1{0%{opacity:0;transform:translate(0,0)}4%{opacity:1}22%{transform:translate(80px,0)}32%{opacity:1;transform:translate(80px,38px)}36%,100%{opacity:0;transform:translate(80px,38px)}}
  .ah-core{transform-box:fill-box;transform-origin:center;animation:ah-core 6s ease-in-out infinite}
  .art .halo{transform-box:fill-box;transform-origin:center;animation:ah-halo 6s ease-in-out infinite}
  @keyframes ah-halo{0%,24%,60%,100%{opacity:.6;transform:scale(.92)}38%{opacity:1;transform:scale(1.06)}}
  @keyframes ah-core{0%,28%,48%,100%{transform:scale(1)}36%{transform:scale(1.08)}}
  .ah-ta{animation:ah-ta 6s ease-in-out infinite}
  .ah-tb{animation:ah-tb 6s ease-in-out infinite}
  @keyframes ah-ta{0%,34%{opacity:0;transform:translate(0,0)}38%{opacity:1}43%{transform:translate(0,28px)}54%{transform:translate(-94px,28px)}58%{opacity:1;transform:translate(-94px,40px)}62%,100%{opacity:0;transform:translate(-94px,40px)}}
  @keyframes ah-tb{0%,34%{opacity:0;transform:translate(0,0)}38%{opacity:1}43%{transform:translate(0,28px)}54%{transform:translate(94px,28px)}58%{opacity:1;transform:translate(94px,40px)}62%,100%{opacity:0;transform:translate(94px,40px)}}
  .ah-ph{animation:ah-ph 6s ease-in-out infinite}
  @keyframes ah-ph{0%,56%{opacity:0;transform:translate(0,0)}60%{opacity:1}72%{opacity:1;transform:translate(80px,0)}75%,100%{opacity:0;transform:translate(80px,0)}}
  .ah-typ{animation:ah-typ 6s infinite}
  @keyframes ah-typ{0%,62%{opacity:0}65%,77%{opacity:1}79%,100%{opacity:0}}
  .ah-msg{animation:ah-msg 6s cubic-bezier(.2,.8,.2,1) infinite}
  @keyframes ah-msg{0%,77%{opacity:0;transform:translateY(8px)}81%,96%{opacity:1;transform:none}100%{opacity:0}}
  .ah-tick{animation:ah-tick 6s infinite}
  @keyframes ah-tick{0%,84%{opacity:0}88%,96%{opacity:1}100%{opacity:0}}
  .ah-chip{animation:ah-chip 6s infinite}
  @keyframes ah-chip{0%,30%{opacity:0}34%,96%{opacity:1}100%{opacity:0}}

  /* Delivery: three stages light up in turn, 6s loop */
  .ad-d1{animation:ad-d1 6s ease-in-out infinite}
  @keyframes ad-d1{0%,10%{opacity:0;transform:translate(0,0)}13%{opacity:1}30%{opacity:1;transform:translate(110px,0)}33%,100%{opacity:0;transform:translate(110px,0)}}
  .ad-d2{animation:ad-d2 6s ease-in-out infinite}
  @keyframes ad-d2{0%,40%{opacity:0;transform:translate(0,0)}43%{opacity:1}60%{opacity:1;transform:translate(110px,0)}63%,100%{opacity:0;transform:translate(110px,0)}}
  .ad-n1{animation:ad-n1 6s infinite}.ad-n2{animation:ad-n2 6s infinite}.ad-n3{animation:ad-n3 6s infinite}
  @keyframes ad-n1{0%,100%{fill-opacity:.1}3%,12%{fill-opacity:.32}}
  @keyframes ad-n2{0%,30%,46%,100%{fill-opacity:.1}33%,42%{fill-opacity:.32}}
  @keyframes ad-n3{0%,60%,100%{fill-opacity:.1}64%,92%{fill-opacity:.32}}
  .art .ad-r1,.art .ad-r2,.art .ad-r3{animation-duration:6s}
  .art .ad-r1{animation-name:ad-r1}.art .ad-r2{animation-name:ad-r2}.art .ad-r3{animation-name:ad-r3}
  @keyframes ad-r1{0%{transform:scale(1);opacity:.55}14%,100%{transform:scale(1.45);opacity:0}}
  @keyframes ad-r2{0%,30%{transform:scale(1);opacity:0}31%{opacity:.55}44%,100%{transform:scale(1.45);opacity:0}}
  @keyframes ad-r3{0%,60%{transform:scale(1);opacity:0}61%{opacity:.55}74%,100%{transform:scale(1.45);opacity:0}}
  .ad-chk{stroke-dasharray:44;animation:ad-chk 6s ease-out infinite}
  @keyframes ad-chk{0%,62%{stroke-dashoffset:44}72%,96%{stroke-dashoffset:0}100%{stroke-dashoffset:44}}
  .ad-sig{animation:ad-sig 6s infinite}
  @keyframes ad-sig{0%,74%{opacity:.25}80%,96%{opacity:1}100%{opacity:.25}}

  /* Spending: bars rise and stop at the cap, gauge fills, 7s loop */
  .as-bars rect{transform-box:fill-box;transform-origin:50% 100%;animation:as-grow 7s cubic-bezier(.2,.8,.2,1) infinite}
  .as-bars rect:nth-child(2){animation-delay:.08s}.as-bars rect:nth-child(3){animation-delay:.16s}.as-bars rect:nth-child(4){animation-delay:.24s}.as-bars rect:nth-child(5){animation-delay:.32s}.as-bars rect:nth-child(6){animation-delay:.4s}.as-bars rect:nth-child(7){animation-delay:.48s}.as-bars rect:nth-child(8){animation-delay:.56s}.as-bars rect:nth-child(9){animation-delay:.64s}
  @keyframes as-grow{0%{transform:scaleY(0)}20%,90%{transform:scaleY(1)}100%{transform:scaleY(0)}}
  .as-g{stroke-dasharray:62 100;animation:as-g 7s cubic-bezier(.2,.8,.2,1) infinite}
  @keyframes as-g{0%{stroke-dasharray:0 100}28%,90%{stroke-dasharray:62 100}100%{stroke-dasharray:0 100}}
  .as-over,.as-shield{transform-box:fill-box;transform-origin:50% 100%}
  .as-over{animation:as-over 7s infinite}
  @keyframes as-over{0%,24%{opacity:0}30%,86%{opacity:1}92%,100%{opacity:0}}
  .as-shield{animation:as-shield 7s cubic-bezier(.3,1.6,.5,1) infinite}
  @keyframes as-shield{0%,26%{opacity:0;transform:scale(.4)}32%,86%{opacity:1;transform:scale(1)}92%,100%{opacity:0;transform:scale(.4)}}
  .as-live{animation:art-wave 2s ease-in-out infinite}

  /* Quiet hours: dial sweeps, held mail waits, codes flow, STOP is honoured */
  .aq-hand{transform-box:view-box;transform-origin:180px 200px;animation:art-spin 12s linear infinite}
  .aq-held>g{animation:art-float 3s ease-in-out infinite}
  .aq-held>g:nth-child(2){animation-delay:.25s}.aq-held>g:nth-child(3){animation-delay:.5s}.aq-held>g:nth-child(4){animation-delay:.75s}
  .aq-mv{animation:aq-mv 3s linear infinite}
  .aq-m2{animation-delay:-1.5s}
  @keyframes aq-mv{0%{opacity:0;transform:translateX(0)}10%,82%{opacity:1}96%,100%{opacity:0;transform:translateX(136px)}}
  .aq-ok{transform-box:fill-box;transform-origin:center;animation:aq-ok 4s cubic-bezier(.3,1.6,.5,1) infinite}
  @keyframes aq-ok{0%,30%{opacity:0;transform:scale(.4)}40%,92%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(.4)}}

  /* Failover: a message tries carrier A, bounces, and goes via carrier B, 5s loop */
  .af-blink{animation:art-wave 1.6s ease-in-out infinite}
  .af-d1{animation:af-d1 5s ease-in-out infinite}
  @keyframes af-d1{0%{opacity:0;transform:translate(0,0)}4%{opacity:1}24%{opacity:1;transform:translate(70px,0)}27%,100%{opacity:0;transform:translate(70px,0)}}
  .af-da{animation:af-da 5s ease-in-out infinite}
  @keyframes af-da{0%,28%{opacity:0;transform:translate(0,0)}31%{opacity:1}44%{opacity:1;transform:translate(64px,-39px)}50%,100%{opacity:0;transform:translate(48px,-29px)}}
  .art .af-x{animation:af-x 5s infinite}
  @keyframes af-x{0%,40%,70%,100%{opacity:.35}46%,58%{opacity:1}}
  .af-db{animation:af-db 5s ease-in-out infinite}
  @keyframes af-db{0%,50%{opacity:0;transform:translate(0,0)}53%{opacity:1}82%{opacity:1;transform:translate(128px,64px)}86%,100%{opacity:0;transform:translate(128px,64px)}}
  .af-ok{transform-box:fill-box;transform-origin:center;animation:af-ok 5s cubic-bezier(.3,1.6,.5,1) infinite}
  @keyframes af-ok{0%,80%,100%{transform:scale(1)}86%{transform:scale(1.3)}}

  .lp{interpolate-size:allow-keywords}
  .lp-faq details::details-content{block-size:0;overflow:hidden;transition:block-size .3s ease,content-visibility .3s allow-discrete}
  .lp-faq details[open]::details-content{block-size:auto}

  /* Cards rise into place as they scroll in, where the browser supports scroll-driven animation */
  @supports (animation-timeline:view()){
    .lp-reveal{animation:lp-rise linear both;animation-timeline:view();animation-range:entry 0% entry 40%}
    @keyframes lp-rise{from{opacity:0;transform:translateY(32px)}to{opacity:1;transform:none}}
  }
}

@media (max-width:1060px){
  .lp-w{padding:0 20px}
  .lp{--pad:32px}
  .lp-hero-art{max-width:600px;width:100%;justify-self:center;margin:0}
  .lp-top nav{display:none}.lp-top-in{justify-content:space-between}
  .lp-hero,.lp-row,.lp-row.flip,.lp-dev,.lp-faq-card{grid-template-columns:minmax(0,1fr);gap:32px}
  .lp-hero{padding:48px var(--pad)}
  .lp-steps li:not(:last-child)::after{content:none}
  .lp-row,.lp-row.flip{padding:32px var(--pad) 16px}
  .lp-row.flip .lp-copy{order:0}
  .lp-row .lp-art{margin:0 -16px}
  .lp-hero h1{font-size:46px}.lp-h2{font-size:36px}
  .lp-cards{grid-template-columns:repeat(2,minmax(0,1fr))}
  .lp-steps{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:560px){
  .lp-w{padding:0 12px}
  .lp{--rc:20px;--pad:20px}
  .lp-top{padding-top:12px}.lp-top-in{height:60px;padding:0 10px 0 16px}
  .lp-hero{padding:36px 20px 24px}.lp-hero h1{font-size:36px}.lp-lead{font-size:17px}
  .lp-head{padding:48px var(--pad) 20px}
  .lp-row,.lp-row.flip{padding:28px var(--pad) 12px}.lp-row .lp-art{margin:0 -8px;padding:16px 8px}
  .lp-copy h3{font-size:26px}.lp-copy p{font-size:16.5px}
  .lp-dev,.lp-faq-card{padding-top:32px;padding-bottom:32px}
  .lp-chan{padding:18px var(--pad)}
  .lp-h2{font-size:30px}.lp-end h2{font-size:34px}.lp-end{padding:56px 20px}
  .lp-cards{grid-template-columns:minmax(0,1fr)}
  .lp-login{display:none}.lp-btn .i{width:18px;height:18px;margin:0 -6px 0 10px;transition:transform .2s}
.lp-btn:hover .i{transform:translateX(3px)}
.lp-btn.big{width:100%}
  .lp-foot nav{gap:8px 18px}
  .lp-end-art{width:420px;right:-250px;opacity:.14}.lp-end-art.l{display:none}
  .lp-faq summary{font-size:16.5px}
}