:root{
  --ink:#0d1117;--ink2:#21262d;--ink3:#484f58;--ink4:#8b949e;--ink5:#b1bac4;
  --bg:#ffffff;--bg2:#f6f8fa;--bg3:#eef1f5;
  --border:#d0d7de;--border2:#e0e6ed;
  --blue:#58a6ff;--blue-d:#1f6feb;--blue-l:#a5d6ff;--blue-m:#388bfd;
  --blue-faint:rgba(88,166,255,.14);
  --teal:#3fb950;--amber:#d29922;--red:#f85149;
  --dark:#0d1117;--dark2:#161b22;--dark3:#21262d;--dark4:#30363d;--dark5:#484f58;
  --dark-border:#30363d;
  --navy:#0d1117;--surf:#ffffff;--surf-dark:#161b22;
  --font:'DM Sans',-apple-system,BlinkMacSystemFont,sans-serif;
  --display:'Syne',var(--font);
  --mono:'Geist Mono','SF Mono','Fira Code',monospace;
  --syne:'Syne',var(--font);--body:var(--font);
  --nav-h:68px;--max:1140px;--px:clamp(20px,5vw,72px);
  --ease:cubic-bezier(.16,1,.3,1);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;overflow-x:clip}
body{font-family:var(--font);background:var(--bg);color:var(--ink);-webkit-font-smoothing:antialiased;overflow-x:clip;line-height:1.6;min-width:0}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font-family:var(--font);cursor:pointer;border:none;background:none}
ul{list-style:none}
:target{scroll-margin-top:calc(var(--nav-h) + 18px)}

#site-header{position:fixed;top:0;left:0;right:0;z-index:9000;height:var(--nav-h)}
.nav-shell{height:var(--nav-h);display:flex;align-items:center;border-bottom:1px solid transparent;transition:background .25s var(--ease),border-color .25s,backdrop-filter .25s}
.nav-shell.scrolled{background:rgba(13,17,23,.9);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-bottom-color:var(--dark-border)}
.nav-shell.light-nav{background:rgba(255,255,255,.98);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-bottom-color:var(--border);box-shadow:0 1px 0 var(--border2)}
.nav-shell.light-nav.scrolled{background:rgba(255,255,255,.98)}

.nav-bar{width:100%;max-width:var(--max);margin:0 auto;padding:0 var(--px);display:flex;align-items:center;gap:16px}
.site-logo{display:flex;align-items:center;margin-right:auto}
.site-logo img{height:32px;width:auto}
.logo-wordmark{font-family:var(--display);font-weight:800;font-size:1.15rem;letter-spacing:-.03em;color:#fff}
.nav-shell.light-nav .logo-wordmark{color:var(--ink)}

.nav-links{display:flex;align-items:center;gap:2px}
.nav-links li{list-style:none}
.nav-links a{display:inline-flex;align-items:center;padding:8px 11px;border-radius:8px;font-size:.87rem;font-weight:500;color:rgba(255,255,255,.72);letter-spacing:-.005em;transition:color .15s,background .15s;white-space:nowrap}
.nav-shell.light-nav .nav-links a{color:var(--ink2)}
.nav-links a:hover{color:#fff;background:rgba(255,255,255,.06)}
.nav-shell.light-nav .nav-links a:hover{color:var(--ink);background:var(--bg2)}
.nav-links .nav-active{color:#fff;background:rgba(88,166,255,.12)}
.nav-shell.light-nav .nav-links .nav-active{color:var(--blue-d);background:var(--blue-faint)}

.nav-right{display:flex;align-items:center;gap:8px;margin-left:auto}
.nav-signin{padding:8px 14px;border-radius:8px;font-size:.9rem;font-weight:500;color:rgba(255,255,255,.72);transition:color .15s,background .15s}
.nav-shell.light-nav .nav-signin{color:var(--ink2)}
.nav-signin:hover{color:#fff;background:rgba(255,255,255,.06)}
.nav-shell.light-nav .nav-signin:hover{color:var(--ink);background:var(--bg2)}
.nav-cta{display:inline-flex;align-items:center;gap:6px;padding:9px 18px;border-radius:8px;font-size:.88rem;font-weight:600;background:var(--blue);color:#fff;box-shadow:0 0 0 1px rgba(88,166,255,.38),0 2px 10px rgba(31,111,235,.25);transition:all .2s var(--ease)}
.nav-cta:hover{background:var(--blue-d);transform:translateY(-1px);box-shadow:0 0 0 1px rgba(88,166,255,.5),0 6px 18px rgba(31,111,235,.35)}

.nav-burger{display:none;width:40px;height:40px;border-radius:8px;flex-direction:column;align-items:center;justify-content:center;gap:5px;margin-left:auto;transition:background .15s}
.nav-burger:hover{background:rgba(255,255,255,.06)}
.nav-shell.light-nav .nav-burger:hover{background:var(--bg2)}
.nav-burger span{display:block;width:20px;height:1.5px;background:#fff;transition:transform .2s var(--ease),opacity .2s}
.nav-shell.light-nav .nav-burger span{background:var(--ink)}
.nav-burger.open span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.nav-burger.open span:nth-child(2){opacity:0}
.nav-burger.open span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}

.nav-mob{position:fixed;top:var(--nav-h);left:0;right:0;background:var(--dark);border-bottom:1px solid var(--dark-border);padding:20px var(--px) 28px;display:none;flex-direction:column;gap:4px;max-height:calc(100vh - var(--nav-h));overflow-y:auto;z-index:8999}
.nav-shell.light-nav + .nav-mob{background:#fff;border-bottom-color:var(--border)}
.nav-mob.open{display:flex}
.nav-mob a{display:block;padding:13px 8px;font-size:1rem;font-weight:500;color:rgba(255,255,255,.8);border-bottom:1px solid var(--dark-border)}
.nav-shell.light-nav + .nav-mob a{color:var(--ink2);border-bottom-color:var(--border2)}
.nav-mob-cta{margin-top:14px;background:var(--blue);color:#fff !important;text-align:center;border-radius:10px;border:0 !important;padding:14px 20px !important}
.nav-mob-signin{padding-top:20px !important;border-bottom:0 !important;color:rgba(255,255,255,.6) !important}
.nav-shell.light-nav + .nav-mob .nav-mob-signin{color:var(--ink3) !important}

@media(max-width:900px){
  .nav-links,.nav-signin{display:none}
  .nav-cta{display:none}
  .nav-burger{display:flex}
  .nav-right{margin-left:0}
}

.wrap{width:100%;max-width:var(--max);margin:0 auto;padding:0 var(--px)}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:11px 20px;border-radius:10px;font-size:.9375rem;font-weight:600;transition:all .2s var(--ease);border:1px solid transparent;white-space:nowrap;cursor:pointer}
.btn-sm{padding:9px 16px;font-size:.86rem}
.btn-lg{padding:13px 24px;font-size:.97rem}
.btn-xl{padding:15px 28px;font-size:1.02rem}

.btn-blue{background:var(--blue);color:#fff;box-shadow:0 1px 2px rgba(0,0,0,.06),inset 0 0 0 1px rgba(255,255,255,.08);transition:transform .15s ease,box-shadow .15s ease,background .15s ease}
.btn-blue:hover{background:var(--blue-d);transform:translateY(-1px);box-shadow:0 4px 12px rgba(31,111,235,.18),inset 0 0 0 1px rgba(255,255,255,.1)}
.btn-dark{background:var(--ink);color:#fff}
.btn-dark:hover{background:#000;transform:translateY(-1px)}
.btn-ghost{background:var(--bg2);color:var(--ink2);border-color:var(--border)}
.btn-ghost:hover{background:var(--bg3);color:var(--ink);border-color:var(--border);transform:translateY(-1px)}
.btn-ghost-w{background:rgba(255,255,255,.06);color:rgba(255,255,255,.82);border-color:rgba(255,255,255,.14)}
.btn-ghost-w:hover{background:rgba(255,255,255,.1);color:#fff;border-color:rgba(255,255,255,.24);transform:translateY(-1px)}

.btn-hero-primary{display:inline-flex;align-items:center;gap:8px;padding:13px 24px;border-radius:10px;font-size:.9375rem;font-weight:600;background:var(--blue);color:#fff;box-shadow:0 0 0 1px rgba(88,166,255,.38),0 4px 20px rgba(31,111,235,.28);transition:all .2s var(--ease)}
.btn-hero-primary:hover{background:var(--blue-d);transform:translateY(-2px);box-shadow:0 0 0 1px rgba(88,166,255,.5),0 8px 28px rgba(31,111,235,.4)}
.btn-hero-ghost{display:inline-flex;align-items:center;gap:8px;padding:12px 22px;border-radius:10px;font-size:.9375rem;font-weight:500;background:rgba(255,255,255,.06);color:rgba(255,255,255,.82);border:1px solid rgba(255,255,255,.14);transition:all .2s var(--ease)}
.btn-hero-ghost:hover{background:rgba(255,255,255,.1);color:#fff;border-color:rgba(255,255,255,.24);transform:translateY(-1px)}

.eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:.72rem;font-weight:600;text-transform:uppercase;letter-spacing:.12em;color:var(--blue-d)}
.eyebrow::before{content:"";width:18px;height:1px;background:var(--blue-d)}
.eyebrow-light{color:rgba(88,166,255,.9)}
.eyebrow-light::before{background:rgba(88,166,255,.9)}

.h2,h2{font-family:var(--display);font-size:clamp(1.9rem,3.6vw,2.8rem);font-weight:800;letter-spacing:-.035em;line-height:1.1;color:var(--ink);margin:14px 0 18px}
.h2-light,.sec-dark h2,.cta-sec h2,.page-hero.dark-hero h2{color:#fff}
.h3,h3{font-family:var(--display);font-size:1.3rem;font-weight:700;letter-spacing:-.025em;line-height:1.25;color:var(--ink)}
.h2 .accent,h2 .accent,.h3 .accent,h3 .accent{color:var(--blue)}
.page-hero.dark-hero .h2 .accent,.page-hero.dark-hero h2 .accent{color:var(--blue)}

.lead{font-size:1.0625rem;line-height:1.72;color:var(--ink3);max-width:640px}
.lead-light{color:rgba(255,255,255,.62)}

.hero{position:relative;padding:calc(var(--nav-h) + 64px) 0 96px;background:var(--dark);overflow:hidden;color:#fff}
.hero::before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse 55% 70% at 20% 40%,rgba(88,166,255,.08) 0%,transparent 70%),radial-gradient(ellipse 40% 50% at 85% 20%,rgba(88,166,255,.05) 0%,transparent 60%);pointer-events:none}
.hero-inner{position:relative;max-width:var(--max);margin:0 auto;padding:0 var(--px);display:grid;grid-template-columns:1.1fr 1fr;gap:56px;align-items:center}
@media(max-width:980px){.hero-inner{grid-template-columns:1fr;gap:48px}}

.h-badge{display:inline-flex;align-items:center;gap:8px;padding:7px 14px;background:rgba(88,166,255,.1);border:1px solid rgba(88,166,255,.22);border-radius:999px;font-size:.78rem;font-weight:500;color:rgba(255,255,255,.88);margin-bottom:26px}
.h-badge-dot{width:6px;height:6px;border-radius:50%;background:var(--teal);box-shadow:0 0 0 3px rgba(63,185,80,.18);animation:pulse 2.4s var(--ease) infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.5}}

.h-title{font-family:var(--display);font-size:clamp(2rem,4.2vw,3.6rem);font-weight:800;letter-spacing:-.04em;line-height:1.05;color:#fff;margin-bottom:22px;max-width:18ch}
.h-title .hi-line{display:block}
.h-title .hi{display:block;background:linear-gradient(135deg,#ffffff 0%,#a5d6ff 25%,#58a6ff 65%,#1f6feb 100%);-webkit-background-clip:text;background-clip:text;color:transparent;padding-bottom:.04em}
.h-sub{font-size:1.0625rem;line-height:1.72;color:rgba(255,255,255,.6);max-width:520px;margin-bottom:32px}
.h-sub strong{color:rgba(255,255,255,.92);font-weight:500}

.h-actions{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:18px}
.h-note{font-size:.82rem;color:rgba(255,255,255,.38)}
.h-trust{display:flex;flex-wrap:wrap;gap:18px;margin-top:22px;padding-top:20px;border-top:1px solid rgba(255,255,255,.08)}
.h-ti{display:inline-flex;align-items:center;gap:7px;font-size:.82rem;font-weight:500;color:rgba(255,255,255,.54)}
.h-ti i{color:var(--blue);font-size:.76rem}

.h-card-wrap{perspective:1200px}
@media(max-width:900px){.h-card-wrap{perspective:none}}
.h-card{background:var(--dark2);border:1px solid var(--dark-border);border-radius:16px;overflow:hidden;box-shadow:0 28px 72px rgba(0,0,0,.55),0 0 0 1px rgba(88,166,255,.09);transform:rotateY(-5deg) rotateX(2deg);transition:transform .4s var(--ease)}
.h-card:hover{transform:rotateY(-1deg) rotateX(1deg)}
@media(max-width:900px){.h-card{transform:none}.h-card:hover{transform:none}}

.hc-bar{display:flex;align-items:center;gap:10px;padding:11px 16px;background:var(--dark3);border-bottom:1px solid var(--dark-border)}
.hc-dots{display:flex;gap:6px}
.hc-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0}
.hc-dot.r{background:#ff5f56}
.hc-dot.y{background:#ffbd2e}
.hc-dot.g{background:#27c93f}
.hc-title-bar{flex:1;font-size:.75rem;color:var(--ink4);font-family:var(--mono);text-align:center;padding-right:44px;letter-spacing:-.01em}
.hc-badge{padding:3px 10px;border-radius:100px;font-size:.67rem;font-weight:600;background:rgba(63,185,80,.14);color:var(--teal);border:1px solid rgba(63,185,80,.28);text-transform:uppercase;letter-spacing:.08em}

.hc-body{padding:20px}
.hc-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:16px}
.hc-stat{background:var(--dark3);border:1px solid var(--dark-border);border-radius:9px;padding:12px}
.hcs-l{font-size:.66rem;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:var(--dark5);margin-bottom:5px}
.hcs-v{font-size:.88rem;font-weight:700;color:var(--ink5);font-family:var(--mono)}
.hcs-v.accent{color:var(--blue)}
.hcs-v.alive{color:var(--teal)}

.hc-bar2{display:flex;justify-content:space-between;font-size:.7rem;color:var(--dark5);margin-bottom:7px;font-family:var(--mono)}
.hc-prog{height:5px;background:var(--dark3);border-radius:100px;overflow:hidden;margin-bottom:16px}
.hc-prog-fill{height:100%;width:0;background:linear-gradient(90deg,var(--blue-d),var(--blue));border-radius:100px;animation:progfill 2s var(--ease) forwards}
@keyframes progfill{from{width:0}to{width:33%}}

.hc-snaps{display:flex;flex-direction:column;gap:6px}
.hc-snap{display:flex;align-items:center;gap:10px;padding:9px 12px;background:var(--dark3);border:1px solid var(--dark-border);border-radius:8px}
.hc-snap-dot{width:6px;height:6px;border-radius:50%;background:var(--teal);box-shadow:0 0 5px var(--teal);flex-shrink:0}
.hc-snap-name{flex:1;font-size:.76rem;color:var(--ink5);font-family:var(--mono);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hc-snap-date{font-size:.7rem;color:var(--dark5);font-family:var(--mono);white-space:nowrap}
.hc-snap-ok{font-size:.66rem;font-weight:600;color:var(--teal);padding:2px 6px;background:rgba(63,185,80,.1);border-radius:4px;white-space:nowrap;text-transform:uppercase;letter-spacing:.05em}

.hc-foot{padding:10px 16px;background:var(--dark3);border-top:1px solid var(--dark-border);font-size:.68rem;color:var(--dark5);display:flex;justify-content:space-between;align-items:center;font-family:var(--mono)}

.page-hero{position:relative;padding:calc(var(--nav-h) + 60px) 0 60px;background:var(--bg2);border-bottom:1px solid var(--border2);overflow:hidden}
.page-hero.dark-hero{background:var(--dark);border-bottom-color:var(--dark-border);color:#fff}
.page-hero.dark-hero::before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse 60% 70% at 20% 40%,rgba(88,166,255,.07) 0%,transparent 70%);pointer-events:none}
.page-hero .wrap{position:relative;z-index:1}
.page-hero h1{font-family:var(--display);font-size:clamp(1.9rem,4vw,2.9rem);font-weight:800;letter-spacing:-.035em;line-height:1.1;color:var(--ink);margin-bottom:18px;max-width:22ch}
.page-hero.dark-hero h1{color:#fff}
.page-hero h1 .accent,.page-hero h1 span.accent{color:var(--blue-d)}
.page-hero.dark-hero h1 .accent{color:var(--blue)}
.page-hero .lead{max-width:640px;margin-bottom:28px}
.page-hero.dark-hero .lead{color:rgba(255,255,255,.62)}
.page-hero.dark-hero .lead a{color:var(--blue);text-decoration:underline;text-decoration-color:rgba(88,166,255,.3);text-underline-offset:3px}
.page-hero.dark-hero .lead a:hover{text-decoration-color:var(--blue)}
.page-hero .hero-actions{display:flex;gap:12px;flex-wrap:wrap}

.breadcrumb{display:flex;align-items:center;gap:8px;font-size:.78rem;color:var(--ink4);margin-bottom:20px}
.page-hero.dark-hero .breadcrumb{color:rgba(255,255,255,.48)}
.breadcrumb a{color:var(--ink4);transition:color .15s}
.page-hero.dark-hero .breadcrumb a{color:rgba(255,255,255,.48)}
.breadcrumb a:hover{color:var(--blue-d)}
.page-hero.dark-hero .breadcrumb a:hover{color:var(--blue)}
.breadcrumb-sep{color:var(--ink5);opacity:.7}
.page-hero.dark-hero .breadcrumb-sep{color:rgba(255,255,255,.3)}

.sec{padding:88px 0;background:var(--bg);position:relative}
.sec-tint{background:var(--bg2)}
.sec-dark{background:var(--dark);color:#fff;position:relative;overflow:hidden}
.sec-dark::before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse 60% 80% at 50% 0%,rgba(88,166,255,.05) 0%,transparent 70%);pointer-events:none}
.sec-dark .wrap{position:relative;z-index:1}
.sec-dark .lead{color:rgba(255,255,255,.62)}
.sec-dark2{background:var(--dark2);color:#fff}
.sec-head{text-align:center;max-width:760px;margin:0 auto 56px}
.sec-head h2,.sec-head .h2{margin:14px 0 16px}
.sec-head .lead{margin:0 auto}

.reveal{opacity:1;transform:none}
.reveal.visible{opacity:1;transform:none}

.g3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.g4{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
@media(max-width:900px){.g3{grid-template-columns:1fr 1fr;gap:16px}.g4{grid-template-columns:1fr 1fr;gap:14px}}
@media(max-width:560px){.g3,.g4{grid-template-columns:1fr}}

.feat{background:var(--bg);border:1px solid var(--border);border-radius:14px;padding:28px 26px;transition:border-color .2s,transform .2s,box-shadow .2s;display:block;text-decoration:none;color:inherit}
.feat:hover{border-color:var(--blue-l);transform:translateY(-3px);box-shadow:0 14px 40px -18px rgba(88,166,255,.25)}
.feat-icon{width:42px;height:42px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:1rem;margin-bottom:16px}
.fi-b{background:var(--blue-faint);color:var(--blue-d)}
.fi-t{background:rgba(63,185,80,.12);color:var(--teal)}
.fi-a{background:rgba(210,153,34,.12);color:var(--amber)}
.fi-r{background:rgba(248,81,73,.12);color:var(--red)}
.fi-n{background:var(--bg2);color:var(--ink3);border:1px solid var(--border)}
.feat-title{font-family:var(--display);font-weight:700;font-size:1.02rem;letter-spacing:-.02em;color:var(--ink);margin-bottom:8px}
.feat-body{font-size:.9rem;color:var(--ink3);line-height:1.65}

.sec-dark .feat{background:var(--dark2);border-color:var(--dark-border)}
.sec-dark .feat:hover{border-color:rgba(88,166,255,.3);box-shadow:0 14px 40px -18px rgba(88,166,255,.3)}
.sec-dark .feat-title{color:#fff}
.sec-dark .feat-body{color:rgba(255,255,255,.62)}
.sec-dark .fi-n{background:var(--dark3);color:var(--ink4);border-color:var(--dark-border)}

.use-case{background:var(--bg);border:1px solid var(--border);border-radius:14px;padding:28px 26px;transition:border-color .2s,transform .2s}
.use-case:hover{border-color:var(--blue-l);transform:translateY(-3px)}
.use-case-head{display:flex;align-items:center;gap:14px;margin-bottom:14px}
.use-case-icon{width:42px;height:42px;border-radius:10px;background:var(--blue-faint);color:var(--blue-d);display:flex;align-items:center;justify-content:center;font-size:1rem;flex-shrink:0}
.use-case-title{font-family:var(--display);font-weight:700;font-size:1.05rem;letter-spacing:-.02em;color:var(--ink)}
.use-case-tag{font-size:.74rem;font-weight:500;color:var(--ink4);font-family:var(--mono);margin-top:3px}
.use-case p{font-size:.9rem;color:var(--ink3);line-height:1.7}

.sec-dark .use-case{background:var(--dark2);border-color:var(--dark-border)}
.sec-dark .use-case:hover{border-color:rgba(88,166,255,.3)}
.sec-dark .use-case-title{color:#fff}
.sec-dark .use-case-icon{background:var(--blue-faint);color:var(--blue)}
.sec-dark .use-case-tag{color:var(--ink4)}
.sec-dark .use-case p{color:rgba(255,255,255,.62)}

.step{background:var(--bg);border:1px solid var(--border);border-radius:14px;padding:28px 26px;position:relative;transition:border-color .2s,transform .2s}
.step:hover{border-color:var(--blue-l);transform:translateY(-3px)}
.step-n{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:8px;background:var(--blue-faint);color:var(--blue-d);font-weight:700;font-size:.82rem;margin-bottom:14px;font-family:var(--mono)}
.step-t{font-family:var(--display);font-weight:700;font-size:1.04rem;letter-spacing:-.02em;color:var(--ink);margin-bottom:7px}
.step-p{font-size:.9rem;color:var(--ink3);line-height:1.68}

.sec-dark .step{background:var(--dark2);border-color:var(--dark-border)}
.sec-dark .step:hover{border-color:rgba(88,166,255,.3)}
.sec-dark .step-n{background:var(--blue-faint);color:var(--blue)}
.sec-dark .step-t{color:#fff}
.sec-dark .step-p{color:rgba(255,255,255,.62)}

.term{background:var(--dark2);border:1px solid var(--dark-border);border-radius:12px;overflow:hidden;font-family:var(--mono);box-shadow:0 16px 48px rgba(0,0,0,.28);max-width:100%}
.term-bar{display:flex;align-items:center;gap:10px;padding:11px 16px;background:var(--dark3);border-bottom:1px solid var(--dark-border)}
.term-bar .td{width:11px;height:11px;border-radius:50%;flex-shrink:0}
.term-bar .td.r{background:#ff5f56}
.term-bar .td.y{background:#ffbd2e}
.term-bar .td.g{background:#27c93f}
.term-dots{display:flex;gap:6px}
.term-t{flex:1;font-size:.74rem;color:var(--dark5);text-align:center;letter-spacing:-.005em;padding-right:42px;font-family:var(--mono)}
.term-body{padding:18px 22px;font-size:.82rem;line-height:1.9;color:var(--ink5);overflow-x:auto}
.term-body > div{white-space:pre-wrap;overflow-wrap:break-word;word-break:break-word}
.term-body a{color:var(--blue);text-decoration:underline;text-decoration-color:rgba(88,166,255,.35);text-underline-offset:3px}
.term-body a:hover{text-decoration-color:var(--blue)}
.term-body .td1{color:var(--dark5);font-style:italic}
.term-body .td2{color:var(--blue);font-weight:600}
.term-body .td3{color:rgba(255,255,255,.78)}
.term-body .td4{color:var(--amber)}
.term-body .td5{color:var(--teal)}
@media(max-width:560px){.term-body{padding:14px 16px;font-size:.76rem;line-height:1.75}}

.timeline-item{position:relative;padding:20px 0 20px 40px;border-left:2px solid var(--border);margin-left:8px}
.timeline-item::before{content:"";position:absolute;left:-7px;top:24px;width:12px;height:12px;border-radius:50%;background:var(--bg);border:2px solid var(--blue)}
.timeline-item:last-child{border-left-color:transparent}
.timeline-t{font-family:var(--display);font-weight:700;font-size:1.02rem;letter-spacing:-.02em;color:var(--ink);margin-bottom:6px}
.timeline-p{font-size:.9rem;color:var(--ink3);line-height:1.68}
.sec-dark .timeline-item{border-left-color:var(--dark-border)}
.sec-dark .timeline-item::before{background:var(--dark2);border-color:var(--blue)}
.sec-dark .timeline-t{color:#fff}
.sec-dark .timeline-p{color:rgba(255,255,255,.62)}

.bench-card{background:var(--bg);border:1px solid var(--border);border-radius:14px;padding:22px 24px}
.sec-dark .bench-card{background:var(--dark2);border-color:var(--dark-border)}
.bench-label{font-size:.74rem;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:var(--ink4);margin-bottom:10px}
.sec-dark .bench-label{color:var(--ink4)}
.bench-value{font-family:var(--font);font-weight:700;font-size:1.25rem;letter-spacing:-.01em;color:var(--ink);line-height:1.25;margin-bottom:8px}
.sec-dark .bench-value{color:#fff}
.bench-desc{font-size:.88rem;color:var(--ink3);line-height:1.6}
.sec-dark .bench-desc{color:rgba(255,255,255,.6)}

.content-block{max-width:760px;margin:0 auto}
.content-block p,.content-block ul,.content-block ol{font-size:.97rem;color:var(--ink2);line-height:1.8;margin-bottom:18px}
.content-block h2{font-family:var(--display);font-size:clamp(1.5rem,2.6vw,1.9rem);font-weight:800;letter-spacing:-.03em;color:var(--ink);margin:46px 0 14px}
.content-block h2:first-child{margin-top:0}
.content-block h3{font-family:var(--display);font-size:1.2rem;font-weight:700;letter-spacing:-.02em;color:var(--ink);margin:34px 0 10px}
.content-block ul,.content-block ol{padding-left:1.2em}
.content-block li{margin-bottom:8px;line-height:1.75}
.content-block li::marker{color:var(--blue-d)}
.content-block strong{color:var(--ink);font-weight:600}
.content-block a{color:var(--blue-d);text-decoration:underline;text-decoration-color:rgba(31,111,235,.3);text-underline-offset:3px;transition:text-decoration-color .15s}
.content-block a:hover{text-decoration-color:var(--blue-d)}
.content-block code{font-family:var(--mono);font-size:.88em;background:var(--bg2);border:1px solid var(--border2);padding:.1em .38em;border-radius:5px;color:var(--ink2)}

.def-list{display:flex;flex-direction:column;gap:14px;margin:22px 0}
.def-list > div,.def-list li{display:grid;grid-template-columns:180px 1fr;gap:20px;padding:14px 0;border-bottom:1px solid var(--border2)}
.def-list > div:last-child,.def-list li:last-child{border-bottom:0}
.def-list strong{font-family:var(--display);font-weight:700;font-size:.92rem;color:var(--ink)}
.def-list span,.def-list > div > div:last-child,.def-list li > div:last-child{font-size:.92rem;color:var(--ink3);line-height:1.7}
@media(max-width:640px){.def-list > div,.def-list li{grid-template-columns:1fr;gap:4px}}

.cmp-highlight{color:var(--blue);font-weight:600}
.cmp-winner{color:var(--teal);font-weight:600}
.cmp-check{color:var(--teal);font-weight:700}
.cmp-x{color:var(--red);opacity:.7;font-weight:600}
.cmp-note{font-size:.82rem;color:var(--ink4);margin-top:12px;font-style:italic}

.content-block table,.content-block .cmp-tbl,table.cmp-tbl{width:100%;border-collapse:collapse;margin:22px 0;font-size:.92rem;background:var(--bg);border:1px solid var(--border);border-radius:10px;overflow:hidden}
.content-block th,.content-block td,table.cmp-tbl th,table.cmp-tbl td{text-align:left;padding:12px 16px;border-bottom:1px solid var(--border2);vertical-align:top;line-height:1.55}
.content-block th,table.cmp-tbl th{background:var(--bg2);font-weight:700;font-size:.85rem;color:var(--ink)}
.content-block tr:last-child td,table.cmp-tbl tr:last-child td{border-bottom:0}
.content-block tbody tr:nth-child(even) td,table.cmp-tbl tbody tr:nth-child(even) td{background:rgba(13,17,23,.018)}
.cmp-wrap{overflow-x:auto;margin:22px 0}
.compare-wrap{margin:22px 0;overflow-x:auto}

.sec-dark .content-block p,.sec-dark .content-block li{color:rgba(255,255,255,.75)}
.sec-dark .content-block h2,.sec-dark .content-block h3,.sec-dark .content-block strong{color:#fff}
.sec-dark .content-block code{background:var(--dark3);border-color:var(--dark-border);color:var(--ink5)}
.sec-dark .content-block a{color:var(--blue)}
.sec-dark .content-block table,.sec-dark .content-block .cmp-tbl{background:var(--dark2);border-color:var(--dark-border)}
.sec-dark .content-block th{background:var(--dark3);color:#fff}
.sec-dark .content-block td{border-bottom-color:var(--dark-border);color:rgba(255,255,255,.72)}
.sec-dark .content-block tbody tr:nth-child(even) td{background:rgba(255,255,255,.02)}

.priv-check{display:flex;align-items:flex-start;gap:10px;padding:10px 0;font-size:.92rem;color:var(--ink2);line-height:1.6}
.priv-check::before{content:"\2714";color:var(--teal);font-weight:700;flex-shrink:0;margin-top:2px;font-size:.82rem}
.sec-dark .priv-check{color:rgba(255,255,255,.78)}

.tech-box{background:var(--bg2);border:1px solid var(--border);border-radius:12px;padding:20px 22px;margin:22px 0}
.tech-box-title{font-family:var(--display);font-weight:700;font-size:.95rem;color:var(--ink);margin-bottom:10px;letter-spacing:-.015em}
.sec-dark .tech-box{background:var(--dark2);border-color:var(--dark-border)}
.sec-dark .tech-box-title{color:#fff}

.oc{display:inline-flex;align-items:center;gap:8px;font-size:.92rem;color:var(--ink3);margin:6px 0}
.oc i{color:var(--blue-d);font-size:.82rem;width:14px}
.sec-dark .oc{color:rgba(255,255,255,.72)}
.sec-dark .oc i{color:var(--blue)}
td.oc,table .oc{display:table-cell;margin:0}

.ci{display:inline-flex;align-items:center;gap:7px;font-size:.86rem;color:var(--ink3);padding:6px 12px;background:var(--bg2);border:1px solid var(--border2);border-radius:100px}
.ci i{color:var(--blue-d);font-size:.78em}
.sec-dark .ci{background:var(--dark2);border-color:var(--dark-border);color:rgba(255,255,255,.72)}
.sec-dark .ci i{color:var(--blue)}
i.fas.ci,i.fa-check.ci,i.fa-xmark.ci,i.fa-xmark.cx{display:inline;padding:0;background:transparent;border:0;border-radius:0}
table.ctable i.ci,table.ctable i.cx{display:inline;padding:0;background:transparent;border:0;border-radius:0}

.vsi{display:flex;align-items:center;gap:8px;font-size:.88rem;color:var(--ink2);padding:8px 0}
.vsi i{color:var(--teal);font-size:.82rem;width:14px}
.vsi.cx i{color:var(--red);opacity:.7}
.sec-dark .vsi{color:rgba(255,255,255,.78)}
.vsep{height:1px;background:var(--border2);margin:12px 0}
.sec-dark .vsep{background:var(--dark-border)}

.arr{display:inline-block;transition:transform .2s var(--ease);color:var(--blue-d)}
a:hover .arr{transform:translateX(3px)}
.sec-dark .arr{color:var(--blue)}

.accent{color:var(--blue)}
.page-hero.dark-hero .accent{color:var(--blue)}

.related-head{text-align:center;max-width:720px;margin:0 auto 38px}
.related-head h2,.related-head .h2{margin:12px 0 12px}
.related-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:12px;max-width:960px;margin:0 auto}
.related-link{display:flex;align-items:center;gap:12px;padding:16px 18px;background:var(--bg);border:1px solid var(--border);border-radius:12px;font-size:.92rem;font-weight:500;color:var(--ink2);transition:border-color .2s,transform .2s,color .15s;text-decoration:none}
.related-link i{color:var(--blue-d);font-size:.92rem;width:16px;flex-shrink:0}
.related-link:hover{border-color:var(--blue);transform:translateY(-2px);color:var(--ink)}
.sec-dark .related-link{background:var(--dark2);border-color:var(--dark-border);color:rgba(255,255,255,.78)}
.sec-dark .related-link i{color:var(--blue)}
.sec-dark .related-link:hover{border-color:var(--blue);color:#fff}

.faq-list{max-width:680px;margin:0 auto;border-top:1px solid var(--border)}
.faq-item{border-bottom:1px solid var(--border)}
.faq-q{width:100%;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:22px 4px;font-family:var(--display);font-weight:700;font-size:1.02rem;letter-spacing:-.015em;color:var(--ink);text-align:left;background:transparent;border:0;cursor:pointer;transition:color .15s}
.faq-q:hover{color:var(--blue-d)}
.faq-icon{width:24px;height:24px;display:inline-flex;align-items:center;justify-content:center;color:var(--ink4);transition:transform .25s var(--ease),color .15s;flex-shrink:0}
.faq-item.open .faq-icon{transform:rotate(45deg);color:var(--blue)}
.faq-body{max-height:0;overflow:hidden;transition:max-height .3s var(--ease)}
.faq-body-inner{padding:0 4px 24px;font-size:.95rem;color:var(--ink2);line-height:1.75;max-width:72ch}
.faq-body-inner a{color:var(--blue-d);text-decoration:underline;text-decoration-color:rgba(31,111,235,.3);text-underline-offset:3px}
.faq-body-inner a:hover{text-decoration-color:var(--blue-d)}
.faq-body-inner code{font-family:var(--mono);background:var(--bg2);padding:.1em .38em;border-radius:5px;font-size:.9em;border:1px solid var(--border2)}

.cta-sec{position:relative;background:var(--dark);color:#fff;padding:80px 0;text-align:center;overflow:hidden}
.cta-sec::before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse 70% 80% at 50% 100%,rgba(88,166,255,.18) 0%,transparent 60%),radial-gradient(ellipse 40% 50% at 15% 0%,rgba(88,166,255,.06) 0%,transparent 60%);pointer-events:none}
.cta-inner{position:relative;max-width:760px;margin:0 auto;padding:0 var(--px);z-index:1}
.cta-sec .eyebrow{color:rgba(88,166,255,.9);margin-bottom:14px}
.cta-sec .eyebrow::before{background:rgba(88,166,255,.9)}
.cta-sec h2,.cta-sec .h2,.cta-sec .h2-light{font-family:var(--display);font-size:clamp(1.8rem,3.6vw,2.7rem);font-weight:800;letter-spacing:-.035em;color:#fff;margin-bottom:20px;line-height:1.1;text-wrap:balance}
.cta-sec .h2-light .accent{color:var(--blue)}
.cta-sec .lead{max-width:520px;margin:0 auto 28px;color:rgba(255,255,255,.62)}
.cta-sec .h-actions{display:flex;justify-content:center;align-items:center;gap:12px;flex-wrap:wrap;margin:0 auto}
.cta-fineprint{font-size:.82rem;color:rgba(255,255,255,.42);margin-top:22px}

.site-footer{background:var(--dark);color:rgba(255,255,255,.7);padding:72px 0 30px;border-top:1px solid var(--dark-border)}
.footer-inner{max-width:var(--max);margin:0 auto;padding:0 var(--px)}
.footer-news{display:flex;flex-direction:column;align-items:center;gap:14px;padding:24px 22px;margin:0 auto 36px;max-width:520px;background:rgba(255,255,255,.015);border:1px solid var(--dark-border);border-radius:10px}
.footer-news-text{text-align:center}
.footer-news-title{font-family:var(--display);font-weight:700;font-size:.92rem;color:#fff;letter-spacing:-.01em;margin-bottom:2px;line-height:1.3}
.footer-news-title #sc-newsletter-rotator{display:inline-block;transition:opacity .35s ease}
.footer-news-sub{font-size:.76rem;color:rgba(255,255,255,.42);line-height:1.4}
.footer-news-form{display:flex;align-items:center;gap:6px;flex-shrink:0}
.footer-news-form input{width:220px;padding:8px 12px;border-radius:7px;border:1px solid var(--dark-border);background:rgba(255,255,255,.04);color:#fff;font-size:.82rem;outline:none;font-family:var(--font);transition:border-color .15s,background .15s}
.footer-news-form input::placeholder{color:rgba(255,255,255,.35)}
.footer-news-form input:focus{border-color:var(--blue);background:rgba(255,255,255,.06)}
.btn-news-submit{display:inline-flex;align-items:center;gap:6px;padding:8px 13px;border-radius:7px;border:0;background:var(--blue);color:#fff;font-family:var(--font);font-size:.8rem;font-weight:600;cursor:pointer;white-space:nowrap;transition:background .15s,transform .15s}
.btn-news-submit i{font-size:.66rem;transition:transform .15s}
.btn-news-submit:hover{background:var(--blue-d);transform:translateY(-1px)}
.btn-news-submit:hover i{transform:translateX(2px)}
.btn-news-submit:disabled{opacity:.7;cursor:wait;transform:none}
.footer-news-msg{width:100%;font-size:.76rem;color:rgba(255,255,255,.5);margin-top:6px}
.footer-news-msg.msg-ok{color:#a7ea8a}
.footer-news-msg.msg-err{color:#ff8c8c}
@media(max-width:720px){.footer-news{flex-direction:column;align-items:stretch;gap:12px;padding:16px}.footer-news-form{width:100%}.footer-news-form input{flex:1;width:auto}}

.footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr 1fr;gap:32px;margin-bottom:48px}
@media(max-width:1040px){.footer-grid{grid-template-columns:1fr 1fr 1fr}}
@media(max-width:600px){.footer-grid{grid-template-columns:1fr 1fr}}

.footer-brand{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.footer-brand img{height:26px;width:auto}
.footer-desc{font-size:.92rem;color:rgba(255,255,255,.6);line-height:1.6;max-width:290px;margin-bottom:18px}
.footer-trust{display:flex;flex-wrap:wrap;gap:6px}
.ft-badge{font-size:.7rem;font-weight:500;padding:4px 10px;border-radius:999px;background:rgba(255,255,255,.04);color:rgba(255,255,255,.62);border:1px solid var(--dark-border)}

.footer-col-title{font-family:var(--display);font-size:.74rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--blue);margin-bottom:15px}
.footer-links{display:flex;flex-direction:column;gap:10px}
.footer-links a{font-size:.9rem;color:rgba(255,255,255,.62);transition:color .15s}
.footer-links a:hover{color:#fff}
.footer-status-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:#3fb950;margin-right:7px;box-shadow:0 0 0 2px rgba(63,185,80,.22);animation:statuspulse 2.4s cubic-bezier(.16,1,.3,1) infinite;vertical-align:middle}
@keyframes statuspulse{0%,100%{opacity:1}50%{opacity:.55}}

.footer-bottom{padding-top:26px;border-top:1px solid var(--dark-border);display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:14px}
.footer-copy{font-size:.82rem;color:rgba(255,255,255,.4)}
.footer-legal{display:flex;gap:20px;flex-wrap:wrap}
.footer-legal a{font-size:.82rem;color:rgba(255,255,255,.4);transition:color .15s}
.footer-legal a:hover{color:rgba(255,255,255,.7)}

.vstrip{contain:paint;overflow:hidden;padding:24px 0;border-top:1px solid var(--border2);border-bottom:1px solid var(--border2);background:var(--bg2)}

.c{color:var(--dark5)}
.active{color:var(--blue-d)}
.alive{color:var(--teal)}

@media print{.site-footer,#site-header,.cta-sec{display:none}body{background:#fff;color:#000}}

.plan-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:52px}
.plan{position:relative;background:var(--bg);border:1px solid var(--border);border-radius:16px;padding:28px 24px;display:flex;flex-direction:column;transition:border-color .2s,transform .2s,box-shadow .2s}
.plan:hover{border-color:var(--blue-l);transform:translateY(-3px);box-shadow:0 14px 40px -18px rgba(88,166,255,.2)}
.plan.hot{border-color:var(--blue);background:linear-gradient(180deg,rgba(88,166,255,.05),var(--bg) 38%);box-shadow:0 0 0 1px rgba(88,166,255,.25),0 14px 40px -16px rgba(88,166,255,.22)}
.plan-pop{position:absolute;top:-11px;left:50%;transform:translateX(-50%);padding:4px 14px;background:var(--blue);color:#fff;font-size:.7rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;border-radius:999px;white-space:nowrap;box-shadow:0 4px 14px rgba(88,166,255,.35)}
.plan-tier{font-family:var(--display);font-weight:700;font-size:1.02rem;color:var(--ink);letter-spacing:-.02em;margin-bottom:8px}
.plan-price{display:flex;align-items:baseline;font-family:var(--display);color:var(--ink);letter-spacing:-.04em;line-height:1}
.plan-price sup{font-size:1.1rem;font-weight:600;margin-right:2px;margin-top:8px}
.plan-price .amt{font-size:2.8rem;font-weight:800}
.plan-price sub{font-size:.85rem;font-weight:500;color:var(--ink4);margin-left:3px}
.plan-desc{font-size:.86rem;color:var(--ink3);margin-top:10px;line-height:1.5;min-height:2.6em}
.plan-hr{height:1px;background:var(--border);margin:20px 0}
.plan-feats{list-style:none;padding:0;margin:0 0 22px;display:flex;flex-direction:column;gap:9px;flex:1}
.plan-feats li{display:flex;align-items:flex-start;gap:9px;font-size:.88rem;color:var(--ink2);line-height:1.55}
.plan-feats li i{color:var(--teal);font-size:.78rem;margin-top:.35em;flex-shrink:0}
.plan-btn{display:flex;align-items:center;justify-content:center;gap:6px;padding:11px 16px;border-radius:10px;font-size:.9rem;font-weight:600;transition:all .2s var(--ease);width:100%}
.pbtn-b{background:var(--blue);color:#fff;box-shadow:0 0 0 1px rgba(88,166,255,.38),0 4px 14px rgba(31,111,235,.25)}
.pbtn-b:hover{background:var(--blue-d);transform:translateY(-2px);box-shadow:0 0 0 1px rgba(88,166,255,.5),0 8px 22px rgba(31,111,235,.35)}
.pbtn-o{background:var(--bg);color:var(--ink);border:1px solid var(--border)}
.pbtn-o:hover{background:var(--ink);color:#fff;border-color:var(--ink);transform:translateY(-2px)}
@media(max-width:1040px){.plan-grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.plan-grid{grid-template-columns:1fr}}

table.ctable{width:100%;border-collapse:collapse;background:transparent;font-size:.9rem;margin:22px 0}
table.ctable th,table.ctable td{text-align:left;padding:14px 16px;border-bottom:1px solid var(--border);color:var(--ink2);vertical-align:middle}
table.ctable th:not(:first-child),table.ctable td:not(:first-child){text-align:center}
table.ctable th{font-family:var(--display);font-weight:700;font-size:.82rem;color:var(--ink);letter-spacing:.02em;padding-bottom:18px}
table.ctable th.ours{color:var(--blue-d)}
table.ctable td:first-child{color:var(--ink3);font-weight:500}
table.ctable td.oc{color:var(--ink);font-weight:500}
table.ctable i.ci{color:var(--teal);font-size:1.05rem}
table.ctable i.cx{color:var(--red);opacity:.55;font-size:1rem}
table.ctable tr:last-child td{border-bottom:0}
.sec-dark table.ctable th,.sec-dark table.ctable td,.sec-dark2 table.ctable th,.sec-dark2 table.ctable td{border-bottom-color:var(--dark-border);color:rgba(255,255,255,.72)}
.sec-dark table.ctable th,.sec-dark2 table.ctable th{color:#fff}
.sec-dark table.ctable th.ours,.sec-dark2 table.ctable th.ours{color:var(--blue)}
.sec-dark table.ctable td:first-child,.sec-dark2 table.ctable td:first-child{color:rgba(255,255,255,.6)}
.sec-dark table.ctable td.oc,.sec-dark2 table.ctable td.oc{color:#fff}
@media(max-width:720px){table.ctable{font-size:.82rem}table.ctable th,table.ctable td{padding:10px 10px}}

.showcase{padding:96px 0;background:var(--bg2)}
.showcase-head{text-align:center;max-width:760px;margin:0 auto 60px}
.showcase-head h2,.showcase-head .h2{margin:12px 0 16px}
.showcase-hero{border-radius:18px;overflow:hidden;border:1px solid var(--border);background:var(--bg);box-shadow:0 28px 72px -28px rgba(13,17,23,.25),0 4px 14px -4px rgba(13,17,23,.08);margin-bottom:42px}
.showcase-hero picture,.showcase-hero img{display:block;width:100%;height:auto}
.showcase-pair{display:grid;grid-template-columns:1fr 1fr;gap:32px;align-items:start}
.showcase-card{border-radius:16px;overflow:hidden;background:var(--bg);border:1px solid var(--border);box-shadow:0 18px 48px -24px rgba(13,17,23,.2)}
.showcase-card picture,.showcase-card img{display:block;width:100%;height:auto}
.showcase-card-body{padding:22px 26px 26px}
.showcase-card-title{font-family:var(--display);font-weight:700;font-size:1.04rem;letter-spacing:-.02em;color:var(--ink);margin-bottom:8px}
.showcase-card-body p{font-size:.92rem;color:var(--ink3);line-height:1.65;margin:0}
.showcase-cta{text-align:center;margin-top:44px;display:flex;justify-content:center;gap:12px;flex-wrap:wrap}
@media(max-width:860px){.showcase-pair{grid-template-columns:1fr;gap:22px}.showcase{padding:72px 0}}

.testi{background:var(--bg);border:1px solid var(--border);border-radius:16px;padding:26px 28px;display:flex;flex-direction:column;gap:16px;transition:border-color .2s,transform .2s}
.testi:hover{border-color:var(--blue-l);transform:translateY(-2px)}
.testi-stars{display:flex;gap:3px;color:var(--amber);font-size:.82rem}
.testi-text{font-size:.95rem;color:var(--ink2);line-height:1.7;font-style:italic}
.testi-text::before{content:"\201C";font-family:Georgia,serif;font-size:2rem;color:var(--blue-d);line-height:0;margin-right:4px;vertical-align:-12px}
.testi-author{display:flex;align-items:center;gap:12px;padding-top:12px;border-top:1px solid var(--border2)}
.testi-av{width:40px;height:40px;border-radius:50%;background:var(--blue-faint);color:var(--blue-d);display:flex;align-items:center;justify-content:center;font-family:var(--display);font-weight:700;font-size:.92rem;flex-shrink:0}
.testi-name{font-family:var(--display);font-weight:700;font-size:.9rem;color:var(--ink);letter-spacing:-.01em}
.testi-role{font-size:.78rem;color:var(--ink4);margin-top:1px}
.sec-dark .testi{background:var(--dark2);border-color:var(--dark-border)}
.sec-dark .testi:hover{border-color:rgba(88,166,255,.3)}
.sec-dark .testi-text{color:rgba(255,255,255,.82)}
.sec-dark .testi-author{border-top-color:var(--dark-border)}
.sec-dark .testi-name{color:#fff}
.sec-dark .testi-role{color:var(--ink4)}

.priv{background:var(--bg);border:1px solid var(--border);border-radius:18px;padding:36px 38px;margin:30px 0}
.priv-inner{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:start}
.priv-left{display:flex;flex-direction:column;gap:14px}
.priv-tag{display:inline-flex;align-items:center;gap:8px;align-self:flex-start;padding:5px 12px;background:var(--blue-faint);color:var(--blue-d);border-radius:999px;font-size:.74rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase}
.priv-title{font-family:var(--display);font-weight:800;font-size:1.4rem;letter-spacing:-.025em;color:var(--ink);line-height:1.2}
.priv-body{font-size:.94rem;color:var(--ink3);line-height:1.7}
.priv-right{display:flex;flex-direction:column;gap:6px}
.priv-checks{display:flex;flex-direction:column;gap:4px}
@media(max-width:860px){.priv{padding:28px 26px}.priv-inner{grid-template-columns:1fr;gap:24px}}
.sec-dark .priv{background:var(--dark2);border-color:var(--dark-border)}
.sec-dark .priv-title{color:#fff}
.sec-dark .priv-body{color:rgba(255,255,255,.72)}
.sec-dark .priv-tag{background:var(--blue-faint);color:var(--blue)}

.clusters{display:grid;grid-template-columns:repeat(4,1fr);gap:36px;margin-top:40px}
.cluster-title{font-family:var(--display);font-weight:700;font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;color:var(--blue-d);margin-bottom:16px;padding-bottom:12px;border-bottom:1px solid var(--border)}
.cluster-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:10px}
.cluster-list li{list-style:none}
.cluster-list a{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:3px 0;font-size:.9rem;color:var(--ink2);transition:color .15s}
.cluster-list a:hover{color:var(--blue-d)}
.cluster-list .arr{color:var(--ink4);transition:transform .15s,color .15s}
.cluster-list a:hover .arr{color:var(--blue-d);transform:translateX(3px)}
@media(max-width:1040px){.clusters{grid-template-columns:repeat(2,1fr)}}
@media(max-width:540px){.clusters{grid-template-columns:1fr}}
.sec-dark .cluster-title{color:var(--blue);border-bottom-color:var(--dark-border)}
.sec-dark .cluster-list a{color:rgba(255,255,255,.72)}
.sec-dark .cluster-list a:hover{color:#fff}
.sec-dark .cluster-list .arr{color:var(--ink4)}
.sec-dark .cluster-list a:hover .arr{color:var(--blue)}

.timeline{display:flex;flex-direction:column;gap:0;margin:28px 0}

.toc-wrap,.toc-list{background:var(--bg);border:1px solid var(--border);border-radius:12px;padding:20px 24px;margin:22px 0}
.toc-title{font-family:var(--display);font-weight:700;font-size:.74rem;text-transform:uppercase;letter-spacing:.1em;color:var(--blue-d);margin-bottom:12px}
.toc-list ul{margin:0;padding:0}
.toc-list a,.toc-wrap a{display:block;padding:6px 0;font-size:.92rem;color:var(--ink2)}
.toc-list a:hover,.toc-wrap a:hover{color:var(--blue-d)}

.bench-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;margin:22px 0}

.h-eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:.72rem;font-weight:600;text-transform:uppercase;letter-spacing:.12em;color:rgba(88,166,255,.9);margin-bottom:18px}
.h-dot{display:inline-block;width:18px;height:1px;background:rgba(88,166,255,.9)}

.hero-bg{position:absolute;inset:0;pointer-events:none;z-index:0}
.hero-lines{position:absolute;inset:0;background-image:linear-gradient(transparent 95%,rgba(255,255,255,.02) 100%);background-size:100% 56px;pointer-events:none;z-index:0}

.hc-alive{color:var(--teal);font-weight:600;font-family:var(--mono)}
.hc-label{font-size:.66rem;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:var(--dark5);margin-bottom:5px}

.use-case-meta{display:flex;flex-direction:column}

.pullquote{border-left:3px solid var(--blue);padding:12px 0 12px 18px;margin:28px 0;font-family:var(--display);font-weight:600;font-size:1.1rem;color:var(--ink);letter-spacing:-.015em;line-height:1.5;font-style:italic}
.sec-dark .pullquote{color:#fff;border-left-color:var(--blue)}

.sub{font-size:.9rem;color:var(--ink3);line-height:1.65}
.sec-dark .sub{color:rgba(255,255,255,.62)}

.split{display:grid;grid-template-columns:1fr 1fr;gap:36px;align-items:start;margin:28px 0}
@media(max-width:860px){.split{grid-template-columns:1fr;gap:24px}}

.tcur{display:inline-flex;align-items:center;gap:5px;padding:4px 10px;background:rgba(88,166,255,.12);color:var(--blue-d);border-radius:100px;font-size:.74rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase;font-family:var(--display)}
.sec-dark .tcur{background:rgba(88,166,255,.16);color:var(--blue)}

.sc-col{display:flex;flex-direction:column;gap:22px}

.vstrip-inner{display:flex;align-items:center;gap:44px;animation:vstrip 40s linear infinite;width:max-content;padding:0 var(--px)}
.vstrip-inner > .vsi{display:inline-flex;align-items:center;gap:8px;font-family:var(--display);font-weight:600;font-size:.88rem;color:var(--ink3);letter-spacing:-.01em;white-space:nowrap;flex-shrink:0}
.vstrip-inner > .vsi i{color:var(--blue-d);font-size:.82em}
.vstrip-inner > .vsep{display:inline-block;width:4px;height:4px;border-radius:50%;background:var(--ink5);flex-shrink:0}
/* Legacy: keep span-based markup working in case any page still uses it */
.vstrip-inner > span:not(.vsep){display:inline-flex;align-items:center;gap:8px;font-family:var(--display);font-weight:600;font-size:.88rem;color:var(--ink3);letter-spacing:-.01em;white-space:nowrap;flex-shrink:0}
.vstrip-inner > span:not(.vsep) i{color:var(--blue-d);font-size:.82em}
@keyframes vstrip{from{transform:translateX(0)}to{transform:translateX(-50%)}}

.portal-inline{display:inline-flex;align-items:center;gap:6px;padding:5px 11px;background:var(--bg2);border:1px solid var(--border);border-radius:100px;font-family:var(--mono);font-size:.78rem;color:var(--ink2);font-weight:500}
.portal-inline i{color:var(--teal);font-size:.72em}

.eyebrow-dark{color:var(--blue);font-weight:600;text-transform:uppercase;letter-spacing:.12em;font-size:.72rem}

.fi-v{background:rgba(88,166,255,.12);color:var(--blue-d)}

.step-body{font-size:.92rem;color:var(--ink3);line-height:1.7;margin-top:4px}

.hero-actions{display:flex;flex-wrap:wrap;gap:12px;align-items:center}

.faq-head{text-align:center;margin:64px 0 42px}
.faq-head h2,.faq-head .h2{margin:12px 0 12px}

.hot{position:relative}

.ours{color:var(--blue) !important}

.cmp-table{width:100%;border-collapse:collapse}

.r{color:var(--red)}
.y{color:var(--amber)}
.g{color:var(--teal)}
/* ===========================================================
   MOBILE FIX PASS - 2026-04-24
   Appended to site.css. Fixes layout breakage on Safari iOS
   and Chrome Android at small viewports.

   Remove this block to revert - nothing above it is touched.
   =========================================================== */

/* -- Global overflow guardrail ------------------------------
   Prevents any child element from forcing horizontal scroll.
   html/body already have overflow-x:clip but iOS Safari sometimes
   honours that less strictly than overflow-x:hidden + max-width. */
@media (max-width: 900px) {
  html, body {
   overflow-x: hidden;
   max-width: 100vw;
  }
}

/* -- Pre/code blocks: the #1 mobile-overflow culprit --------
   Every content article has <pre><code>...</code></pre> blocks
   with long SFTP commands. Without rules they inherit default
   `white-space: pre` and blow past the viewport. */
pre,
pre code,
code {
  font-family: var(--mono);
}
pre {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px 16px;
  margin: 18px 0;
  font-size: .84rem;
  line-height: 1.65;
  color: var(--ink2);
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
}
pre code {
  display: block;
  white-space: pre;   /* keep indentation, allow horizontal scroll inside pre */
  background: transparent;
  padding: 0;
  border: 0;
  color: inherit;
  font-size: inherit;
}
/* Inline <code> in paragraphs */
p code, li code, td code {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 5px;
  padding: 1px 6px;
  font-size: .88em;
  color: var(--blue-d);
  word-break: break-word;   /* let long words wrap in flowing text */
}
.sec-dark pre,
.sec-dark2 pre {
  background: var(--dark2);
  border-color: var(--dark-border);
  color: rgba(255, 255, 255, .84);
}
.sec-dark p code,
.sec-dark li code,
.sec-dark2 p code,
.sec-dark2 li code {
  background: var(--dark2);
  border-color: var(--dark-border);
  color: var(--blue);
}

/* -- Terminal mockups (.term-body with .td1/.td2/.td3/.td4) --
   These are the "preview terminal" blocks on the homepage and
   feature pages. Long SFTP URLs break the viewport. */
.term-body {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
}
.term-body > div {
  white-space: pre;
}
@media (max-width: 640px) {
  .term-body {
   font-size: .78rem;
  }
  .term-body > div {
   white-space: pre-wrap;   /* on very narrow screens, wrap instead of scroll */
   word-break: break-all;
  }
}

/* -- Tables: wrap everything without a wrapper in auto-scroll -
   .ctable and .cmp-tbl and .cmp-table all need overflow handling.
   Because many pages omit a wrapper div, we scope the table itself. */
@media (max-width: 720px) {
  table.ctable,
  table.cmp-tbl,
  table.cmp-table {
   display: block;
   overflow-x: auto;
   -webkit-overflow-scrolling: touch;
   white-space: nowrap;
   max-width: 100%;
  }
  /* Let row content wrap even when the table itself is scrolling,
   so narrow cells (yes/no icons) don't force huge widths */
  table.ctable tbody tr,
  table.cmp-tbl tbody tr,
  table.cmp-table tbody tr {
   white-space: normal;
  }
}

/* -- Hero title: clamp tighter on small viewports -----------
   The h-title uses clamp(2rem, 4.2vw, 3.6rem) which at narrow
   widths collapses to 2rem - fine, but padding around it can
   make it look cramped. Trim padding for space. */
@media (max-width: 560px) {
  .hero {
   padding: calc(var(--nav-h) + 40px) 0 64px;
  }
  .hero-inner {
   gap: 36px;
  }
  .h-title {
   font-size: clamp(1.7rem, 7vw, 2.4rem);
   max-width: none;
  }
  .h-sub {
   font-size: .98rem;
  }
  .h-actions {
   flex-direction: column;
   align-items: stretch;
   width: 100%;
  }
  .h-actions .btn,
  .h-actions .btn-hero-primary,
  .h-actions .btn-hero-ghost {
   width: 100%;
   justify-content: center;
  }
  /* h-card on phone: prevent the perspective wrapper from clipping */
  .h-card {
   border-radius: 12px;
  }
  .hc-body {
   padding: 16px;
  }
}

/* -- Page hero (non-homepage): same treatment ---------------- */
@media (max-width: 560px) {
  .page-hero {
   padding: calc(var(--nav-h) + 32px) 0 40px;
  }
  .page-hero h1 {
   font-size: clamp(1.6rem, 6.5vw, 2.2rem);
  }
  .page-hero .lead {
   font-size: .98rem;
  }
  .page-hero .hero-actions {
   flex-direction: column;
   align-items: stretch;
  }
  .page-hero .hero-actions .btn,
  .page-hero .hero-actions .btn-lg,
  .page-hero .hero-actions .btn-xl {
   width: 100%;
   justify-content: center;
  }
}

/* -- Section padding -----------------------------------------
   88px top/bottom is too much on a phone. */
@media (max-width: 560px) {
  .sec {
   padding: 56px 0;
  }
  .sec-head {
   margin-bottom: 36px;
  }
}

/* -- Plan card polish at narrow widths -----------------------
   Already goes 1-column at 560px (line 484). Just tighten. */
@media (max-width: 560px) {
  .plan {
   padding: 24px 20px;
  }
  .plan-price .amt {
   font-size: 2.4rem;
  }
}

/* -- Nav logo protection -------------------------------------
   Some logos exceed 200px wide. Cap them. */
@media (max-width: 560px) {
  .site-logo img {
   max-height: 28px;
   height: 28px;
  }
}

/* -- Mobile menu: ensure it's actually usable ---------------
   Give it tap-friendly spacing and prevent body scroll when open. */
@media (max-width: 900px) {
  body.nav-open {
   overflow: hidden;
  }
  .nav-mob a {
   padding: 14px 10px;
   font-size: 1.02rem;
  }
}

/* -- Breadcrumb overflow -------------------------------------
   Long breadcrumb trails on article pages wrap weirdly. */
@media (max-width: 560px) {
  .breadcrumb {
   font-size: .72rem;
   gap: 6px;
   flex-wrap: wrap;
  }
}

/* -- Form input iOS zoom prevention -------------------------
   Safari iOS zooms the viewport if a focused input has font-size
   < 16px. Force inputs in the newsletter footer form to 16px on
   mobile so tapping them doesn't re-layout the page. */
@media (max-width: 560px) {
  .footer-news-form input,
  input[type="email"],
  input[type="text"],
  input[type="password"] {
   font-size: 16px;
  }
}

/* -- CTA section padding at narrow widths --------------------- */
@media (max-width: 560px) {
  .cta-sec {
   padding: 56px 0;
  }
  .cta-sec .h-actions {
   flex-direction: column;
   align-items: stretch;
   width: 100%;
  }
  .cta-sec .btn,
  .cta-sec .btn-hero-primary,
  .cta-sec .btn-hero-ghost {
   width: 100%;
   justify-content: center;
  }
}

/* -- Showcase images: prevent jumbo margins on mobile ------ */
@media (max-width: 560px) {
  .showcase {
   padding: 56px 0;
  }
  .showcase-head {
   margin-bottom: 36px;
  }
  .showcase-card-body {
   padding: 18px 20px 22px;
  }
}

/* -- Footer grid: at 420px it still shows 2 cols; make 1 ---- */
@media (max-width: 420px) {
  .footer-grid {
   grid-template-columns: 1fr;
   gap: 28px;
  }
  .footer-bottom {
   flex-direction: column;
   align-items: flex-start;
  }
  .footer-legal {
   gap: 14px;
  }
}

/* -- Privacy callout card padding trim --------------------- */
@media (max-width: 560px) {
  .priv {
   padding: 22px 20px;
  }
  .priv-title {
   font-size: 1.2rem;
  }
}

/* -- Prevent long word / URL / token overflow in paragraphs - */
p, li, dd, .sub, .lead {
  overflow-wrap: anywhere;
}

/* -- Images in article content never exceed viewport -------- */
article img,
.wrap img:not(.site-logo img) {
  max-width: 100%;
  height: auto;
}

/* -- viewport-safe iframe (setup page has none currently,
   but future-proof) ------------------------------------- */
iframe {
  max-width: 100%;
}

/* Announcement banner - relative position so logo stays visible */
#sc-announcement-bar {
  position: relative !important;
  width: 100%;
  z-index: 1000 !important;
  margin: 0 !important;
}
/* Keep nav-shell below the banner if both render */
body > #sc-announcement-bar + #site-header #nav-shell { top: 0; }

/* Code-block copy button (injected by site.js) */
.content-block pre{position:relative}
.pre-copy{
  position:absolute;
  top:8px;
  right:8px;
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:5px 10px;
  font-family:var(--mono);
  font-size:.72rem;
  font-weight:500;
  letter-spacing:.02em;
  color:var(--ink3);
  background:var(--bg);
  border:1px solid var(--border);
  border-radius:6px;
  cursor:pointer;
  opacity:0;
  transform:translateY(-2px);
  transition:opacity .15s,transform .15s,color .15s,background .15s,border-color .15s;
  z-index:2;
}
.content-block pre:hover .pre-copy,
.pre-copy:focus-visible{
  opacity:1;
  transform:translateY(0);
}
.pre-copy:hover{
  color:var(--ink);
  background:var(--bg2);
  border-color:var(--ink4);
}
.pre-copy i{font-size:.85em;line-height:1}
.pre-copy span{line-height:1}
.pre-copy.copied{
  opacity:1;
  color:#fff;
  background:var(--blue);
  border-color:var(--blue);
}
.pre-copy.copied i{color:#fff}
/* Touch devices: always show button (no hover) */
@media (hover:none){
  .pre-copy{opacity:1;transform:none}
}
/* Dark sections */
.sec-dark .pre-copy,
.sec-dark2 .pre-copy{
  color:var(--ink5);
  background:var(--dark3);
  border-color:var(--dark-border);
}
.sec-dark .pre-copy:hover,
.sec-dark2 .pre-copy:hover{
  color:#fff;
  background:var(--dark2);
  border-color:var(--ink4);
}


/* ============================================================
   Bundle H - Click-to-zoom lightbox for portal screenshots
   ============================================================ */

/* Make wrapped images look clickable */
.showcase-hero img,
.showcase-card img,
.portal-inline img,
.setup-screenshot img {
  cursor: zoom-in;
  transition: filter .2s, transform .2s;
}
.showcase-hero img:hover,
.showcase-card img:hover,
.portal-inline img:hover,
.setup-screenshot img:hover {
  filter: brightness(1.04);
}

/* Subtle "click to enlarge" hint on hover (top-right corner) */
.showcase-hero,
.showcase-card,
.portal-inline,
.setup-screenshot {
  position: relative;
}
.showcase-hero::after,
.showcase-card::after,
.portal-inline::after,
.setup-screenshot::after {
  content: "expand click to enlarge";
  position: absolute;
  top: 12px;
  right: 12px;
  padding: 6px 11px;
  font-family: 'Geist Mono', 'SF Mono', monospace;
  font-size: .7rem;
  font-weight: 500;
  letter-spacing: .03em;
  color: rgba(255,255,255,.85);
  background: rgba(13,17,23,.78);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 6px;
  pointer-events: none;
  opacity: 0;
  transform: translateY(-3px);
  transition: opacity .18s, transform .18s;
  z-index: 2;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.showcase-hero:hover::after,
.showcase-card:hover::after,
.portal-inline:hover::after,
.setup-screenshot:hover::after {
  opacity: 1;
  transform: translateY(0);
}
@media (hover: none) {
  /* On touch devices, always show the hint */
  .showcase-hero::after,
  .showcase-card::after,
  .portal-inline::after,
  .setup-screenshot::after {
   opacity: .9;
   transform: none;
  }
}

/* The lightbox overlay */
.sc-lightbox {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.92);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  padding: 24px;
  cursor: zoom-out;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s;
}
.sc-lightbox.is-open {
  opacity: 1;
  pointer-events: auto;
}
.sc-lightbox img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  border-radius: 10px;
  box-shadow: 0 20px 60px rgba(0,0,0,.6);
  object-fit: contain;
  cursor: zoom-out;
  transform: scale(.96);
  transition: transform .22s cubic-bezier(.2,.7,.3,1);
}
.sc-lightbox.is-open img {
  transform: scale(1);
}
.sc-lightbox-close {
  position: fixed;
  top: 18px;
  right: 22px;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 50%;
  color: #fff;
  font-size: 1.2rem;
  cursor: pointer;
  transition: background .15s, transform .15s;
  z-index: 10000;
}
.sc-lightbox-close:hover {
  background: rgba(255,255,255,.16);
  transform: scale(1.06);
}
.sc-lightbox-caption {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  max-width: 80%;
  padding: 8px 16px;
  font-family: 'Geist Mono', 'SF Mono', monospace;
  font-size: .78rem;
  color: rgba(255,255,255,.75);
  background: rgba(0,0,0,.5);
  border-radius: 6px;
  text-align: center;
}

/* Lock body scroll when lightbox open */
body.sc-lightbox-open {
  overflow: hidden;
}

/* ---------- midpage CTA (used on comparison pages) ---------- */
.midpage-cta{
  margin:64px auto;
  max-width:760px;
  padding:48px 40px 44px;
  background:linear-gradient(180deg,rgba(31,111,235,.07) 0%,rgba(31,111,235,.025) 100%);
  border:1px solid rgba(31,111,235,.22);
  border-radius:16px;
  text-align:center;
  box-shadow:0 2px 6px rgba(15,23,42,.04),0 16px 40px -16px rgba(31,111,235,.18);
  position:relative;
  overflow:hidden;
}
.midpage-cta::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:radial-gradient(ellipse 70% 60% at 50% 0%,rgba(31,111,235,.06) 0%,transparent 70%);
}
.midpage-cta > *{ position:relative; z-index:1; }
.midpage-cta-title{
  margin:0 0 10px;
  font-family:var(--font);
  font-size:1.55rem;
  font-weight:700;
  color:var(--ink);
  line-height:1.25;
  letter-spacing:-.018em;
}
.midpage-cta-sub{
  margin:0 0 28px;
  color:var(--ink3);
  font-size:1rem;
  line-height:1.5;
}
.midpage-cta .btn{
  padding:14px 28px;
  font-size:1rem;
  font-weight:600;
  letter-spacing:-.005em;
  box-shadow:0 1px 2px rgba(0,0,0,.06),0 6px 16px rgba(31,111,235,.28),inset 0 0 0 1px rgba(255,255,255,.12);
  transition:transform .15s ease,box-shadow .15s ease,background .15s ease;
}
.midpage-cta .btn:hover{
  transform:translateY(-2px);
  box-shadow:0 2px 4px rgba(0,0,0,.06),0 12px 24px rgba(31,111,235,.35),inset 0 0 0 1px rgba(255,255,255,.14);
}
.midpage-cta .btn::after{
  content:" \2192";
  margin-left:4px;
  display:inline-block;
  transition:transform .15s ease;
}
.midpage-cta .btn:hover::after{
  transform:translateX(3px);
}
.sec-dark .midpage-cta{
  background:linear-gradient(180deg,rgba(88,166,255,.10) 0%,rgba(88,166,255,.035) 100%);
  border-color:rgba(88,166,255,.26);
  box-shadow:0 2px 6px rgba(0,0,0,.2),0 16px 40px -16px rgba(88,166,255,.22);
}
.sec-dark .midpage-cta::before{
  background:radial-gradient(ellipse 70% 60% at 50% 0%,rgba(88,166,255,.10) 0%,transparent 70%);
}
.sec-dark .midpage-cta-title{ color:#fff; }
.sec-dark .midpage-cta-sub{ color:rgba(255,255,255,.7); }


/* ============================================================
   sc-mobile-v1 -- mobile overflow guard rails

   ROOT CAUSE: .h-badge is inline-flex with ~60ch single-line text
   and no wrap rule. On mobile this overflows the viewport, causing
   iOS Safari to expand the effective viewport width -- which
   defeats every existing (max-width: 560px) breakpoint and
   renders desktop sizes on phones.

   FIX: clip body overflow (clip, not hidden -- preserves
   position:sticky), wrap the badge on narrow widths, defensive
   tighter clamps for h-title, stack hero buttons full-width.
   Appended at end of file; wins by cascade.
   ============================================================ */

html, body {
  overflow-x: clip;
}
body {
  overflow-wrap: break-word;
  word-wrap: break-word;
}

@media (max-width: 720px) {
  .h-badge {
   display: flex;
   flex-wrap: wrap;
   line-height: 1.4;
   max-width: 100%;
   box-sizing: border-box;
   align-items: flex-start;
  }
  .h-badge-dot {
   flex-shrink: 0;
   margin-top: 6px;
  }
}

@media (max-width: 480px) {
  .h-title {
   font-size: clamp(1.55rem, 8vw, 2.1rem);
   letter-spacing: -.028em;
   max-width: 100%;
  }
  .h-sub {
   font-size: .94rem;
   line-height: 1.6;
  }
}

@media (max-width: 720px) {
  .hero-actions,
  .h-actions {
   flex-wrap: wrap;
   gap: 10px;
  }
  .hero-actions > *,
  .h-actions > * {
   flex: 1 1 auto;
  }
}

@media (max-width: 380px) {
  :root {
   --px: 16px;
  }
}


/* ============================================================
   sc-mobile-v2 -- collapse hero grid on mobile

   ROOT CAUSE (v1 missed this): .hero-inner is a 2-column grid.
   The right column (.h-card-wrap demo card) carries an implicit
   min-width ~480px, so the grid never collapses on phones.
   overflow-x: clip hides the scroll, but the left text column
   is still line-broken to a width wider than viewport, then
   visually clipped at the edge.

   FIX: force single column at <=900px, kill min-width on the
   card, set min-width:0 on grid children, and finish the
   .h-badge / .h-trust / .h-sub wrap rules v1 only half-applied.
   ============================================================ */

@media (max-width: 900px) {
  .hero-inner {
   display: block !important;
   grid-template-columns: 1fr !important;
  }
  .hero-inner > * {
   min-width: 0;
   max-width: 100%;
  }
  .h-card-wrap {
   min-width: 0 !important;
   max-width: 100% !important;
   margin-top: 32px;
  }
  .h-card {
   min-width: 0 !important;
   max-width: 100% !important;
  }
}

@media (max-width: 720px) {
  .h-badge {
   white-space: normal !important;
   max-width: 100%;
   box-sizing: border-box;
   overflow-wrap: break-word;
  }
  .h-title {
   font-size: clamp(1.5rem, 7vw, 2.4rem) !important;
   line-height: 1.1 !important;
   letter-spacing: -.025em !important;
   max-width: 100%;
   overflow-wrap: break-word;
   hyphens: auto;
  }
  .h-title .hi-line,
  .h-title .hi {
   max-width: 100%;
   overflow-wrap: break-word;
   hyphens: auto;
  }
  .h-sub {
   max-width: 100% !important;
   overflow-wrap: break-word;
   font-size: .95rem;
   line-height: 1.6;
  }
  .h-trust {
   flex-wrap: wrap !important;
   gap: 10px !important;
   max-width: 100%;
  }
  .h-trust .h-ti {
   flex: 0 0 auto;
   max-width: 100%;
  }
  .h-note {
   max-width: 100%;
   overflow-wrap: break-word;
  }
}

@media (max-width: 480px) {
  .h-title {
   font-size: clamp(1.35rem, 8vw, 2rem) !important;
  }
  .h-actions .btn-hero-primary,
  .h-actions .btn-hero-ghost {
   width: 100%;
   text-align: center;
   justify-content: center;
  }
}


/* ============================================================
   sc-mobile-v3 -- drop hyphens, tighten headline scale

   v2 added hyphens:auto as defensive insurance. With the grid
   collapsed the words wrap fine at word boundaries; hyphens
   was actively breaking "ransomware" mid-stem. Also the
   display-face headline at 7-8vw is rendering too tall on
   phones (~7 lines), eating the fold. Tighter clamp.
   ============================================================ */

@media (max-width: 720px) {
  .h-title,
  .h-title .hi-line,
  .h-title .hi {
   hyphens: manual !important;
   -webkit-hyphens: manual !important;
   word-break: normal !important;
   overflow-wrap: break-word;
  }
  .h-title {
   font-size: clamp(1.35rem, 6vw, 2rem) !important;
   line-height: 1.08 !important;
   letter-spacing: -.02em !important;
  }
}

@media (max-width: 480px) {
  .h-title {
   font-size: clamp(1.2rem, 5.6vw, 1.65rem) !important;
   line-height: 1.1 !important;
  }
}


/* ============================================================
   sc-mobile-v4 -- badge + card cleanup

   ISSUE 1: .h-badge renders as a viewport-wide pill on phones,
   dot floating alone, text wrapped awkwardly inside oversized
   border. Redundant with H1 below; hide on mobile.

   ISSUE 2: .h-card has min-height (or .hc-body has flex:1) sized
   to balance the desktop text column. With the grid collapsed,
   that creates phantom empty space inside the card. Kill it.
   ============================================================ */

@media (max-width: 720px) {
  .h-badge {
   display: none !important;
  }
}

@media (max-width: 900px) {
  .h-card-wrap {
   min-height: 0 !important;
   height: auto !important;
  }
  .h-card {
   min-height: 0 !important;
   height: auto !important;
  }
  .h-card .hc-body {
   flex: 0 0 auto !important;
  }
}


/* ============================================================
   sc-mobile-v5 -- badge optimized (restored), card-foot fixed

   BADGE: v4 hid it; restore with mobile-tuned styling.
   - display: inline-flex (content-sized, not block)
   - flex-wrap: nowrap (dot stays inline with first text line,
   not pushed to its own row like v1 did)
   - smaller font/padding for mobile proportion
   - white-space: normal so the long text wraps inside the pill
   - dot gets margin-top to vertically align with first text line

   CARD FOOT: lock <i> was inline next to text; on narrow widths
   the inline layout collided. Force flex with gap so icon and
   wrapped text never overlap.
   ============================================================ */

@media (max-width: 720px) {
  .h-badge {
   display: inline-flex !important;
   flex-wrap: nowrap !important;
   align-items: flex-start !important;
   gap: 8px;
   max-width: 100%;
   box-sizing: border-box;
   white-space: normal !important;
   line-height: 1.4;
   font-size: .78rem;
   padding: 7px 14px;
  }
  .h-badge-dot {
   flex-shrink: 0;
   align-self: flex-start;
   margin-top: 5px;
  }

  .hc-foot {
   display: flex !important;
   align-items: flex-start;
   gap: 10px;
   flex-wrap: nowrap;
  }
  .hc-foot i {
   flex-shrink: 0;
   margin-top: 3px;
  }
}


/* ============================================================
   sc-mobile-v6 -- restore headline to display-grade scale

   v2/v3 progressively shrank .h-title trying to keep it inside
   the viewport before the grid collapse fix had landed. With
   the grid now collapsing properly (v2), the headline can run
   at full display scale without overflow. Restore impact.
   ============================================================ */

@media (max-width: 720px) {
  .h-title {
   font-size: clamp(2.5rem, 10vw, 3.75rem) !important;
   line-height: 1.02 !important;
   letter-spacing: -.028em !important;
  }
}

@media (max-width: 480px) {
  .h-title {
   font-size: clamp(2.25rem, 11vw, 3.25rem) !important;
   line-height: 1.04 !important;
  }
}


/* sc-trust:hero-trust-strip-v1 - hero trust strip */
.hero-trust {
  margin-top: 22px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  font-size: .82rem;
  color: var(--ink3);
  letter-spacing: .01em;
}
.hero-trust .ht-item {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  white-space: nowrap;
}
.hero-trust .ht-item i {
  color: var(--blue);
  font-size: .92em;
  opacity: .9;
}
.hero-trust .ht-dot {
  opacity: .35;
  font-weight: 600;
}
.dark-hero .hero-trust { color: rgba(255,255,255,.7); }
.dark-hero .hero-trust .ht-item i { color: #89c4e1; }
@media (max-width: 560px) {
  .hero-trust { font-size: .76rem; gap: 6px 10px; }
  .hero-trust .ht-dot { display: none; }
}