/* Qovox OCR - interaction and polish layer. Loaded after site.css / auth.css. Everything here is additive and respects prefers-reduced-motion. */
@property --fx-a{syntax:'<angle>';inherits:false;initial-value:0deg}
:root{
  --fx-red:#e50914;--fx-red2:#ff3b30;--fx-soft:#ff8a82;
  --fx-glow:0 0 0 1px #e5091433,0 18px 50px -22px #e50914;
  --fx-ease:cubic-bezier(.22,.8,.24,1);
}
::selection{background:#e5091466;color:#fff}
html{scrollbar-width:thin;scrollbar-color:#e5091488 #0f0f11}
::-webkit-scrollbar{width:10px;height:10px}::-webkit-scrollbar-track{background:#0f0f11}
::-webkit-scrollbar-thumb{background:linear-gradient(#e50914,#8c050c);border-radius:8px;border:2px solid #0f0f11}

/* ---- atmosphere: drifting red aurora + a faint hammer watermark, both tied to the logo ---- */
body{position:relative;overflow-x:hidden}
body::before{content:'';position:fixed;inset:-20vmax;z-index:-2;pointer-events:none;
  background:radial-gradient(34vmax 34vmax at 18% 12%,#e5091430,transparent 62%),radial-gradient(30vmax 30vmax at 88% 8%,#ff3b3024,transparent 60%),radial-gradient(40vmax 40vmax at 70% 95%,#9d070f26,transparent 65%);
  animation:fx-drift 26s ease-in-out infinite alternate}
body::after{content:'';position:fixed;right:-60px;bottom:-40px;width:min(46vw,520px);aspect-ratio:1;z-index:-1;pointer-events:none;opacity:.025;
  background:url(logo-mark.png) center/contain no-repeat;transform:rotate(-12deg)}
@keyframes fx-drift{to{transform:translate3d(3vmax,2vmax,0) scale(1.08)}}
html.fx main{animation:fx-page .6s var(--fx-ease) both}
@keyframes fx-page{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* ---- progress + back to top (hammer inside a progress ring) ---- */
#fx-bar{position:fixed;left:0;top:0;height:3px;width:100%;transform-origin:0 50%;transform:scaleX(var(--p,0));z-index:300;pointer-events:none;
  background:linear-gradient(90deg,#8c050c,#e50914,#ff8a82);box-shadow:0 0 14px #ff3b30aa}
#fx-top{position:fixed;right:18px;bottom:18px;width:52px;height:52px;border-radius:50%;border:0;z-index:90;padding:0;cursor:pointer;display:grid;place-items:center;
  background:conic-gradient(#ff3b30 calc(var(--p,0)*1turn),#ffffff1a 0);opacity:0;transform:translateY(14px) scale(.9);pointer-events:none;transition:opacity .3s,transform .3s var(--fx-ease),filter .2s}
#fx-top::before{content:'';position:absolute;inset:3px;border-radius:50%;background:#131316}
#fx-top img{position:relative;width:26px;height:26px;transition:transform .35s var(--fx-ease)}
#fx-top.on{opacity:1;transform:none;pointer-events:auto}
#fx-top:hover{filter:drop-shadow(0 0 12px #e50914aa)}#fx-top:hover img{transform:rotate(-24deg) translateY(-1px)}
#fx-top:active img{transform:rotate(18deg) scale(.9)}

/* ---- header: logo strike on load, hover glow, animated nav underline, compact on scroll ---- */
.hdr{transition:background .25s,box-shadow .25s,border-color .25s}
.hdr .in{transition:height .25s var(--fx-ease)}
.hdr.scrolled{background:#0b0b0dd9;border-bottom-color:#e5091433;box-shadow:0 10px 40px -24px #000}
.hdr.scrolled .in{height:56px}
.logo img{transform-origin:20% 70%;animation:fx-strike 1s .15s var(--fx-ease) both;transition:filter .25s,transform .25s var(--fx-ease)}
.logo:hover img{filter:drop-shadow(0 0 12px #e5091499);transform:translateY(-1px)}
@keyframes fx-strike{0%{transform:rotate(-26deg) translateY(-6px);opacity:0}55%{transform:rotate(9deg)}78%{transform:rotate(-3deg)}100%{transform:none;opacity:1}}
.nav a{position:relative;overflow:hidden}
.nav a::after{content:'';position:absolute;left:.8rem;right:.8rem;bottom:.22rem;height:2px;border-radius:2px;background:linear-gradient(90deg,#e50914,#ff8a82);transform:scaleX(0);transform-origin:0 50%;transition:transform .3s var(--fx-ease)}
.nav a:hover::after,.nav a[aria-current=page]::after{transform:scaleX(1)}
.nav a:hover{transform:translateY(-1px)}

/* ---- buttons: sheen, press, ripple ---- */
.btn{position:relative;overflow:hidden;isolation:isolate;transition:transform .2s var(--fx-ease),box-shadow .25s,background .2s,border-color .2s,color .2s}
.btn-primary::before{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(115deg,transparent 30%,#ffffff55 50%,transparent 70%);transform:translateX(-120%);transition:transform .7s var(--fx-ease)}
.btn-primary:hover::before{transform:translateX(120%)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 16px 34px -12px #e50914}
.btn:active{transform:translateY(0) scale(.97)}
.btn-ghost:hover{border-color:#e5091488;color:#fff;box-shadow:0 0 0 3px #e509141a}
.fx-ripple{position:absolute;border-radius:50%;background:#ffffff59;transform:scale(0);animation:fx-rip .6s ease-out forwards;pointer-events:none;z-index:-1}
@keyframes fx-rip{to{transform:scale(1);opacity:0}}

/* ---- headings and hero ---- */
.grad{background:linear-gradient(100deg,#e50914,#ff3b30 35%,#ff9a92 55%,#ff3b30 75%,#e50914);background-size:220% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:fx-shimmer 7s linear infinite}
@keyframes fx-shimmer{to{background-position:-220% 0}}
.eyebrow{position:relative;padding-left:1.1rem}
.eyebrow::before{content:'';position:absolute;left:0;top:50%;width:.55rem;height:.55rem;margin-top:-.28rem;border-radius:2px;background:var(--fx-red);transform:rotate(45deg);box-shadow:0 0 10px #e50914}
section h2{position:relative}
.hero{position:relative}
.hero::before{content:'';position:absolute;inset:-10% -5% auto auto;width:min(60vw,640px);aspect-ratio:1;z-index:-1;pointer-events:none;
  background:radial-gradient(closest-side,#e5091440,transparent 70%);transform:translate(calc(var(--px,0)*28px),calc(var(--py,0)*22px));transition:transform .4s ease-out}
.chip{transition:border-color .2s,transform .2s var(--fx-ease),background .2s}
.chip:hover{border-color:#e5091488;transform:translateY(-2px);background:#e509140f}

/* ---- cards: lift + cursor spotlight + gradient edge ---- */
.card,.kpi,.metric,.keyrow{position:relative;transition:transform .3s var(--fx-ease),border-color .3s,box-shadow .3s,background .3s}
.card::after,.kpi::after,.metric::after{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .3s;
  background:radial-gradient(260px circle at var(--mx,50%) var(--my,0),#e5091426,transparent 60%)}
.card:hover::after,.kpi:hover::after,.metric:hover::after{opacity:1}
.card:hover,.kpi:hover{transform:translateY(-4px);border-color:#e5091455;box-shadow:var(--fx-glow)}
.metric:hover{transform:translateY(-2px);border-color:#e5091444}
.card .ico{transition:transform .35s var(--fx-ease),background .25s,box-shadow .25s}
.card:hover .ico{transform:rotate(-8deg) scale(1.08);background:#e5091433;box-shadow:0 0 22px -4px #e50914}
.plan.pop{border-color:transparent}
.plan.pop::before{content:'';position:absolute;inset:-1px;border-radius:inherit;padding:1.5px;pointer-events:none;
  background:conic-gradient(from var(--fx-a),#e50914,#ff8a82,#9d070f,#ff3b30,#e50914);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);animation:fx-spin 7s linear infinite}
@keyframes fx-spin{to{--fx-a:360deg}}
.plan:hover{transform:translateY(-6px)}
.price{background:linear-gradient(180deg,#fff,#ffb3ad);-webkit-background-clip:text;background-clip:text;color:transparent}
.price small{-webkit-text-fill-color:var(--muted)}
.plan li{transition:transform .2s var(--fx-ease),color .2s}.plan li:hover{transform:translateX(4px);color:#fff}

/* ---- the drop zone wears the camera-guide corners from the scanner ---- */
.drop{background-image:
  linear-gradient(#ff3b30,#ff3b30),linear-gradient(#ff3b30,#ff3b30),linear-gradient(#ff3b30,#ff3b30),linear-gradient(#ff3b30,#ff3b30),
  linear-gradient(#ff3b30,#ff3b30),linear-gradient(#ff3b30,#ff3b30),linear-gradient(#ff3b30,#ff3b30),linear-gradient(#ff3b30,#ff3b30);
  background-repeat:no-repeat;background-size:26px 3px,3px 26px,26px 3px,3px 26px,26px 3px,3px 26px,26px 3px,3px 26px;
  background-position:12px 12px,12px 12px,calc(100% - 12px) 12px,calc(100% - 12px) 12px,12px calc(100% - 12px),12px calc(100% - 12px),calc(100% - 12px) calc(100% - 12px),calc(100% - 12px) calc(100% - 12px);
  transition:border-color .25s,background-color .25s,box-shadow .25s,transform .25s var(--fx-ease)}
.drop:hover{border-color:#e5091499;background-color:#e509140a;box-shadow:inset 0 0 60px -30px #e50914}
.drop.over{transform:scale(1.015);box-shadow:0 0 0 4px #e509142e,inset 0 0 80px -30px #e50914}
.drop .ph svg{transition:transform .4s var(--fx-ease)}.drop:hover .ph svg{transform:translateY(-4px) scale(1.08)}
.tabs button{position:relative;transition:color .2s}.tabs button:hover{color:var(--text)}
.tabs button[aria-selected=true]{text-shadow:0 0 18px #e5091488}
.out,.fields dl>div{transition:border-color .2s,transform .2s var(--fx-ease)}
.fields dl>div:hover{border-color:#e5091455;transform:translateY(-2px)}
.samples .btn{transition:transform .2s var(--fx-ease),background .2s,border-color .2s}

/* ---- forms ---- */
.sel,.inp,input[type=text],input[type=email],input[type=password],textarea{transition:border-color .2s,box-shadow .2s,background .2s}
.sel:focus,.inp:focus,input:focus,textarea:focus{border-color:#ff3b30!important;box-shadow:0 0 0 4px #e5091426;background:#101014}
.seg button{transition:background .2s,color .2s,box-shadow .2s}
:focus-visible{outline:2px solid #ff3b30;outline-offset:3px;border-radius:6px}
input[type=range]{cursor:pointer}

/* ---- details / faq ---- */
details{transition:border-color .25s,background .25s,box-shadow .25s}
details:hover{border-color:#e5091455}
details[open]{border-color:#e5091488;background:linear-gradient(180deg,#1b1315,#18181c);box-shadow:0 14px 40px -26px #e50914}
summary{transition:color .2s}summary:hover{color:#ffb3ad}
summary::after{transition:transform .3s var(--fx-ease);display:inline-block}details[open] summary::after{transform:rotate(180deg)}
details[open] p{animation:fx-down .35s var(--fx-ease)}
@keyframes fx-down{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

/* ---- tables, docs, code ---- */
tbody tr{transition:background .15s}tbody tr:hover{background:#e509140c}
.docs aside a{position:relative;transition:color .2s,background .2s,padding .2s var(--fx-ease)}
.docs aside a:hover,.docs aside a.on{padding-left:1rem;color:#fff;background:#e509141a}
.docs aside a.on::before{content:'';position:absolute;left:0;top:20%;bottom:20%;width:3px;border-radius:3px;background:var(--fx-red)}
pre{position:relative;transition:border-color .2s,box-shadow .2s}pre:hover{border-color:#e5091444;box-shadow:0 0 0 1px #e5091422}
.codewrap .btn{opacity:.85;transition:opacity .2s}.codewrap:hover .btn{opacity:1}
.prose .callout{transition:transform .25s var(--fx-ease)}.prose .callout:hover{transform:translateX(4px)}

/* ---- footer, social, toast, modal ---- */
.ftr{position:relative}
.ftr::before{content:'';position:absolute;left:0;right:0;top:-1px;height:2px;background:linear-gradient(90deg,transparent,#e50914,#ff8a82,#e50914,transparent);opacity:.7}
.ftr li a{display:inline-block;transition:color .2s,transform .2s var(--fx-ease)}.ftr li a:hover{transform:translateX(4px)}
.soc a{transition:transform .25s var(--fx-ease),color .2s,border-color .2s,background .2s,box-shadow .25s}
.soc a:hover{transform:translateY(-4px) rotate(-6deg);box-shadow:0 10px 24px -10px #e50914}
.toast{animation:fx-toast .35s var(--fx-ease)}
@keyframes fx-toast{from{opacity:0;transform:translate(-50%,16px)}to{opacity:1;transform:translate(-50%,0)}}
.modal.open .box{animation:fx-pop .3s var(--fx-ease)}.modal{backdrop-filter:blur(6px)}
@keyframes fx-pop{from{opacity:0;transform:translateY(14px) scale(.97)}to{opacity:1;transform:none}}
.umenu{animation:fx-pop .22s var(--fx-ease);transform-origin:90% 0}
.avatar{transition:box-shadow .2s,transform .2s var(--fx-ease)}.avatar:hover{transform:scale(1.06)}
.badge{transition:transform .2s var(--fx-ease)}.badge:hover{transform:scale(1.06)}
.pipe li{transition:border-color .25s,background .25s,color .25s,transform .25s var(--fx-ease)}.pipe li.ok{transform:translateX(2px)}
.bar i{background:linear-gradient(90deg,#8c050c,#e50914,#ff8a82);background-size:200% 100%;animation:fx-shimmer 2.4s linear infinite}

/* ---- scroll reveal (only when JS marked the page; content is never hidden without it) ---- */
html.fx .fx-hide{opacity:0;transform:translateY(22px) scale(.985);transition:opacity .7s var(--fx-ease),transform .7s var(--fx-ease);transition-delay:calc(var(--i,0)*70ms)}
html.fx .fx-hide.fx-show{opacity:1;transform:none}
html.fx .card.fx-hide.fx-show:hover,html.fx .plan.fx-hide.fx-show:hover{transform:translateY(-5px)}

@media (hover:none){.card:hover,.kpi:hover,.plan:hover{transform:none}.card::after,.kpi::after,.metric::after{display:none}}
@media (max-width:600px){#fx-top{right:12px;bottom:12px;width:46px;height:46px}body::after{opacity:.025}}
@media (prefers-reduced-motion:reduce){
  body::before,.grad,.logo img,html.fx main,.plan.pop::before,.bar i{animation:none!important}
  html.fx .fx-hide{opacity:1;transform:none;transition:none}
}

/* ===== Calm, professional pass =====
   The logo and the header never animate or resize. Nothing moves on its own; cards and buttons answer the pointer with a small, quiet change. */
.logo img,.logo-img,.brand img,.logo:hover img,.logo-img:hover,.brand:hover img{animation:none!important;transform:none!important;filter:none!important;opacity:1!important;transition:none!important}
.hdr.scrolled .in{height:64px}
body::before{animation:none}
body::after{display:none}
html.fx main{animation:fx-fade .35s ease both}
@keyframes fx-fade{from{opacity:0}to{opacity:1}}
.nav a:hover{transform:none}
.btn-primary::before,.fx-ripple{display:none}
.btn:active{transform:none}
.btn-primary:hover{transform:translateY(-1px)}
.grad,.grad-text{animation:none!important;background-size:100% 100%}
.card:hover,.kpi:hover,.bento-card:hover,.pricing-teaser-card:hover,.promo-card:hover,.step:hover,.plan:hover{transform:translateY(-2px)}
.card:hover .ico,.card:hover .ic,.bento-card:hover .ic,.bento-card:hover .ico{transform:none;box-shadow:none}
.plan.pop::before,.plan.featured::before,.plan.popular::before{animation:none!important}
.plan li:hover{transform:none;color:inherit}
.soc a:hover{transform:translateY(-2px)}
#fx-top:hover img,#fx-top:active img{transform:none}
.badge:hover,.avatar:hover,.qx-avatar:hover,.chip:hover{transform:none}
.drop:hover .ph svg{transform:none}.drop.over{transform:none}
.bar i{animation:none!important}
.ftr li a:hover,.qx-footer li a:hover,.site-footer li a:hover{transform:none}
.card:hover::after,.kpi:hover::after,.metric:hover::after{opacity:.7}
html.fx .fx-hide{transform:translateY(10px);transition-duration:.5s;transition-delay:calc(var(--i,0)*45ms)}
html.fx .card.fx-hide.fx-show:hover,html.fx .plan.fx-hide.fx-show:hover{transform:translateY(-2px)}

/* type and surface polish */
body{text-rendering:optimizeLegibility;font-feature-settings:"kern","liga","calt";-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
h1,h2,h3{text-wrap:balance}p,.lede,li{text-wrap:pretty}
.price,.kpi b,.metric b,table,.mono{font-variant-numeric:tabular-nums}
.card,.plan,.kpi,.bento-card{box-shadow:inset 0 1px 0 #ffffff0a}
.card:hover,.kpi:hover,.bento-card:hover,.plan:hover{box-shadow:inset 0 1px 0 #ffffff0f,0 14px 36px -22px #e50914}
.hdr,header.nav,.site-nav{border-bottom:1px solid #ffffff14}
.btn{letter-spacing:.005em}

/* ===== Responsive pass: phones, tablets, laptops, very wide screens ===== */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
html,body{overflow-x:clip}
img,video,canvas,svg,iframe{max-width:100%}
img,video{height:auto}
pre{max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
.demo>*,.grid>*,.calc>*,.sc-grid>*,.hero-grid>*,.bento>*,.plans>*,.vs>*,.metrics>*,.kpis>*{min-width:0}
code{overflow-wrap:anywhere}
@media (max-width:900px){
  table{display:block;max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
}
@media (max-width:760px){
  .samples,.cta,.outbar,.chips{flex-wrap:wrap}
  .btn{min-height:44px}
  .btn-sm{min-height:40px}
  h1,h2{overflow-wrap:break-word}
  section,.section{padding-top:clamp(40px,10vw,64px);padding-bottom:clamp(40px,10vw,64px)}
  .wrap,.narrow,.container{width:calc(100% - 28px);padding-inline:0}
  input,select,textarea,.inp,.sel{font-size:16px}              /* iOS does not zoom the page when a field is focused */
  .tabs{overflow-x:auto;white-space:nowrap;-webkit-overflow-scrolling:touch}
  .tabs button{flex:none}
  .metrics,.kpis{grid-template-columns:1fr 1fr}
}
@media (max-width:420px){
  .metrics,.kpis{grid-template-columns:1fr}
  .btn-lg{width:100%}
  .hero .cta .btn{width:100%}
}
@media (min-width:1600px){
  .wrap,.container{width:min(1280px,100% - 64px)}
}
@media (max-height:480px) and (orientation:landscape){.hdr,.qxh,.site-nav,header.nav{position:static}}

/* docs: the "on this page" list becomes a scrolling strip on small screens (it used to be hidden by a rule that a later rule overrode, and it overflowed the page) */
@media (max-width:900px){
  .docs{gap:1rem;padding:24px 0}
  .docs aside{position:static;display:flex;overflow-x:auto;gap:.3rem;padding:.2rem 0 .7rem;border-bottom:1px solid var(--line);margin-bottom:.4rem;-webkit-overflow-scrolling:touch;scrollbar-width:thin}
  .docs aside a{white-space:nowrap;flex:none;border:1px solid var(--line);padding:.45rem .8rem}
  .docs aside a:hover,.docs aside a.on{padding-left:.8rem}
  .docs aside a.on::before{display:none}
}
@media (max-width:760px){.drop{min-height:240px;padding:1rem}.drop .pv{max-height:300px}.demo{gap:.8rem}}

@media (max-width:900px){.docs{grid-template-columns:minmax(0,1fr)}}
.docs>*,.docs article{min-width:0}
.docs article{overflow-wrap:break-word}

/* OCR header on phones: logo keeps its size, the call to action gets compact, the status dot makes room */
@media (max-width:640px){
  .hdr .in{gap:.6rem;height:60px}
  .hdr .logo{flex:none}.hdr .logo img{height:22px;width:auto}
  .hdr .authbtns .btn{padding:.4rem .7rem;font-size:.8rem;min-height:40px}
  .hdr .burger{min-width:44px;min-height:44px;display:grid;place-items:center}
  .hdr .nav{top:60px}
  .hdr .nav a{padding:.8rem .9rem;font-size:1rem;min-height:44px;display:flex;align-items:center}
}
@media (max-width:480px){.hdr .status{display:none}}