/* MazalPOS preview 7: preview 4 (Header 2 + Magic Bento + stacking cards), recolored to the bright p5 palette.
   White #FFFFFF base, cool grey #F5F6F8 alternate, panels #F0F2F6 / #ECEFF4, ink #111318, cobalt #5266EB (text #3F52D6).
   The hero keeps its onyx #171721 and hands off to white through a soft gradient. */
@font-face{font-family:'Instrument Sans';font-style:normal;font-weight:400 700;font-display:swap;src:url(/fonts/InstrumentSans-latin.woff2) format('woff2')}

:root{
  --bg:#FFFFFF; --alt:#F5F6F8; --hero:#171721; --s1:#FFFFFF; --s2:#F0F2F6; --s3:#ECEFF4;
  --line:rgba(17,19,24,.10); --line2:rgba(17,19,24,.2);
  --ink:#111318; --ink2:#4B505C; --ink3:#7A7F8C;
  --acc:#5266EB; --acc-hi:#3F52D6; --glow:82,102,235;
  --card-line:rgba(17,19,24,.07); --card-sh:0 1px 2px rgba(16,24,40,.04),0 28px 56px -32px rgba(16,24,40,.24);
  --chip:rgba(17,19,24,.045); --chip-line:rgba(17,19,24,.07);
  --disp:"Instrument Sans","Inter",system-ui,sans-serif; --text:"Inter",system-ui,sans-serif;
  --ease:cubic-bezier(.2,.8,.2,1);
}
html{background:var(--bg)}
body.sub{margin:0;background:var(--bg);color:var(--ink);font-family:var(--text)}
:where(body.sub) a{color:inherit;text-decoration:none}
body.locked{overflow:hidden}

/* ---------------- HEADER 2: glass card nav ---------------- */
body.sub header.nav{position:fixed;top:0;left:0;right:0;z-index:60;display:flex;align-items:center;transition:transform .45s cubic-bezier(.22,.8,.26,1),background .35s ease;will-change:transform}
body.sub header.nav.hide{transform:translateY(-101%)}
header.nav{height:auto;padding:24px;background:transparent;border-bottom:0;font-family:var(--text);-webkit-font-smoothing:antialiased}
header.nav.solid{background:rgba(255,255,255,.78);-webkit-backdrop-filter:blur(20px) saturate(160%);backdrop-filter:blur(20px) saturate(160%);border-bottom:1px solid rgba(17,19,24,.07);padding-block:12px}
header.nav.menu-open{transform:none}
@media(min-width:640px){header.nav{padding-inline:40px}}
.nv{position:relative;display:flex;align-items:center;justify-content:space-between;width:100%;max-width:1600px;margin:0 auto}
.nv-brand{display:flex;align-items:center;gap:12px;color:#fff;cursor:pointer}
.nv-logo{display:grid;place-items:center;padding:10px;border-radius:12px;background:rgba(255,255,255,.10);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.10);transition:background .3s ease}
.nv-brand:hover .nv-logo{background:rgba(255,255,255,.20)}
.nv-logo img{width:20px;height:20px;object-fit:contain;display:block;transform:scale(1.32)}
.nv-name{font-family:var(--disp);font-size:18px;line-height:28px;font-weight:500;letter-spacing:-.025em;color:#fff}
.nv-pill{position:absolute;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:4px;padding:6px 8px;border-radius:999px;background:rgba(24,24,27,.30);-webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px);border:1px solid rgba(255,255,255,.10);box-shadow:0 10px 15px -3px rgba(0,0,0,.05),0 4px 6px -4px rgba(0,0,0,.05)}
.nv-link{display:inline-flex;align-items:center;gap:6px;padding:8px 20px;font:400 14px/20px var(--text);color:rgba(255,255,255,.8);background:transparent;border:0;border-radius:999px;cursor:pointer;transition:all .3s ease;white-space:nowrap}
.nv-link:hover,.nv-link[aria-expanded=true],.nv-link.on{color:#fff;background:rgba(255,255,255,.10)}
.nv-link svg{width:14px;height:14px;transition:transform .3s var(--ease);opacity:.7}
.nv-link[aria-expanded=true] svg{transform:rotate(180deg)}
.nv-end{display:flex;align-items:center;gap:12px}
.nv-icon{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;color:#fff;background:rgba(255,255,255,.05);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.10);transition:all .3s ease}
.nv-icon:hover{background:rgba(255,255,255,.20)}
.nv-icon svg{width:16px;height:16px}
.nv-cta{display:flex;align-items:center;gap:12px;background:#fff;padding:6px 6px 6px 20px;border-radius:999px;transition:transform .3s var(--ease),box-shadow .3s ease}
.nv-cta:hover{transform:scale(1.05);box-shadow:0 20px 25px -5px rgba(255,255,255,.10),0 8px 10px -6px rgba(255,255,255,.10)}
.nv-cta:active{transform:scale(.98)}
.nv-cta span{font:500 14px/20px var(--text);color:#18181b;white-space:nowrap}
.nv-cta i{width:32px;height:32px;border-radius:50%;background:#18181b;display:grid;place-items:center;color:#fff;transition:background .3s}
.nv-cta:hover i{background:#27272a}
.nv-cta i svg{width:16px;height:16px}
.nv-burger{display:none;place-items:center;width:48px;height:48px;padding:0;border:0;border-radius:50%;color:#fff;background:rgba(255,255,255,.10);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);cursor:pointer;transition:background .3s}
.nv-burger:hover{background:rgba(255,255,255,.20)}
.nv-burger svg{width:24px;height:24px}
header.nav :focus-visible,.sheet :focus-visible,.x :focus-visible,footer.ft :focus-visible{outline:2px solid var(--acc-hi);outline-offset:3px}
@media(max-width:1099px){.nv-pill{position:static;transform:none}.nv-link{padding:8px 14px}}
@media(max-width:959px){.nv-name{display:none}}
@media(max-width:819px){.nv-pill,.nv-end{display:none}.nv-burger{display:grid}.nv-name{display:inline}}

/* mega menus */
.nv-drop{position:absolute;top:calc(100% + 14px);left:50%;width:min(780px,calc(100vw - 48px));padding:10px;border-radius:28px;
  background:rgba(255,255,255,.94);-webkit-backdrop-filter:blur(30px) saturate(170%);backdrop-filter:blur(30px) saturate(170%);
  border:1px solid rgba(17,19,24,.08);box-shadow:0 40px 90px -30px rgba(16,24,40,.35),0 2px 6px rgba(16,24,40,.05);
  opacity:0;visibility:hidden;transform:translate(-50%,-8px) scale(.985);transform-origin:top center;
  transition:opacity .22s ease,transform .35s var(--ease),visibility 0s linear .35s}
.nv-drop.open{opacity:1;visibility:visible;transform:translate(-50%,0) scale(1);transition:opacity .22s ease,transform .35s var(--ease),visibility 0s}
.nv-drop[data-drop=industries]{width:min(660px,calc(100vw - 48px))}
.dd-grid{display:grid;grid-template-columns:1fr 1fr;gap:2px}
.dd-item{display:flex;gap:14px;align-items:flex-start;padding:14px;border-radius:18px;transition:background .2s ease}
.dd-item:hover{background:rgba(17,19,24,.045)}
.dd-ic{flex:none;width:40px;height:40px;border-radius:12px;display:grid;place-items:center;color:#3F52D6;background:rgba(var(--glow),.09);border:1px solid rgba(var(--glow),.22);transition:background .2s,color .2s}
.dd-item:hover .dd-ic{background:var(--acc);color:#fff;border-color:var(--acc)}
.dd-ic svg{width:19px;height:19px}
.dd-t{display:block;font:500 15px/20px var(--text);color:var(--ink)}
.dd-d{display:block;font:400 13px/18px var(--text);color:#6B7080;margin-top:3px}
.dd-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:6px;padding:14px 16px;border-radius:18px;background:rgba(17,19,24,.035);font:400 13px/18px var(--text);color:var(--ink2)}
.dd-foot a{color:var(--acc-hi);font-weight:500;display:inline-flex;align-items:center;gap:6px}
.dd-foot a svg{width:14px;height:14px;transition:transform .25s var(--ease)}
.dd-foot a:hover svg{transform:translateX(3px)}

/* mobile glass sheet */
.sheet{position:fixed;inset:0;z-index:90;overflow-y:auto;overscroll-behavior:contain;padding:24px 24px 40px;font-family:var(--text);-webkit-font-smoothing:antialiased;
  background:rgba(250,251,252,.92);-webkit-backdrop-filter:blur(30px) saturate(160%);backdrop-filter:blur(30px) saturate(160%);
  opacity:0;visibility:hidden;transition:opacity .3s ease,visibility 0s linear .3s}
.sheet.open{opacity:1;visibility:visible;transition:opacity .3s ease,visibility 0s}
.sh-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:24px}
.sh-group{opacity:0;transform:translateY(14px);transition:opacity .45s ease,transform .5s var(--ease)}
.sheet.open .sh-group{opacity:1;transform:none}
.sheet.open .sh-group:nth-child(3){transition-delay:.05s}.sheet.open .sh-group:nth-child(4){transition-delay:.1s}.sheet.open .sh-group:nth-child(5){transition-delay:.15s}.sheet.open .sh-group:nth-child(6){transition-delay:.2s}
.sh-h{font:500 13px/18px var(--text);color:var(--ink3);margin:22px 4px 8px}
.sh-list{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.sh-list a{display:flex;align-items:center;gap:10px;padding:12px;border-radius:16px;background:#FFFFFF;border:1px solid rgba(17,19,24,.07);box-shadow:0 1px 2px rgba(16,24,40,.04);font:500 14px/18px var(--text);color:var(--ink);min-height:48px}
.sh-list a .dd-ic{width:30px;height:30px;border-radius:9px}
.sh-list a .dd-ic svg{width:15px;height:15px}
.sh-rows a{display:flex;justify-content:space-between;align-items:center;padding:16px 4px;border-bottom:1px solid var(--line);font:500 20px/24px var(--disp);letter-spacing:-.02em;color:var(--ink)}
.sh-rows a svg{width:18px;height:18px;color:var(--ink3)}
.sh-cta{margin-top:28px;display:flex;flex-direction:column;gap:12px}
.sh-cta .b{justify-content:space-between}
.sh-cta .fine{text-align:center;margin:4px 0 0}

/* ---------------- shared content system ---------------- */
.x{font-family:var(--text);color:var(--ink);font-size:17px;line-height:1.47;-webkit-font-smoothing:antialiased;background:var(--bg);overflow-x:clip}
.x section{position:relative;padding-block:clamp(72px,8.5vw,120px);scroll-margin-top:24px}
.w{width:100%;max-width:1200px;margin-inline:auto;padding-inline:clamp(20px,4vw,40px);box-sizing:border-box}
.x *,.x *::before,.x *::after,.sheet *,header.nav *,footer.ft *{box-sizing:border-box}
.eb{display:block;font:600 17px/1.2 var(--disp);letter-spacing:-.01em;color:var(--acc-hi);margin:0 0 14px}
.d1,.d2,.d3{font-family:var(--disp);font-weight:600;color:var(--ink);margin:0;text-wrap:balance}
.d1{font-size:clamp(46px,7vw,96px);line-height:1;letter-spacing:-.045em}
.d2{font-size:clamp(40px,5.4vw,76px);line-height:1.02;letter-spacing:-.04em}
.d3{font-size:clamp(26px,2.5vw,34px);line-height:1.1;letter-spacing:-.03em}
.g{color:#7A7F8C}
.lead{font-size:clamp(19px,1.55vw,22px);line-height:1.38;font-weight:500;letter-spacing:-.012em;color:var(--ink2);max-width:36ch;margin:22px 0 0;text-wrap:pretty}
.head{margin-bottom:clamp(44px,5vw,72px)}
.head.c{text-align:center}.head.c .lead{margin-inline:auto}
.fine{font-size:14px;line-height:1.4;color:var(--ink3);margin:16px 0 0}
.cta-row{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:32px}
.head.c .cta-row{justify-content:center}

.b{display:inline-flex;align-items:center;gap:12px;border-radius:999px;font:500 15px/20px var(--text);white-space:nowrap;cursor:pointer;border:0;text-decoration:none;
  transition:transform .3s var(--ease),background .25s ease,box-shadow .3s ease,border-color .25s ease}
.b:active{transform:scale(.97)!important}
.b-w{background:#111318;color:#fff;padding:6px 6px 6px 22px}
.b-w i{width:34px;height:34px;border-radius:50%;background:#fff;color:#111318;display:grid;place-items:center;transition:background .25s}
.b-w i svg{width:16px;height:16px;transition:transform .3s var(--ease)}
.b-w:hover{transform:scale(1.04);background:#2B2E36;box-shadow:0 20px 30px -12px rgba(16,24,40,.35)}
.b-w:hover i svg{transform:translateX(2px)}
.b-g{background:rgba(255,255,255,.7);border:1px solid rgba(17,19,24,.16);color:var(--ink);padding:13px 24px;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.b-g:hover{background:#111318;border-color:#111318;color:#fff}
.lnk{display:inline-flex;align-items:center;gap:6px;color:var(--acc-hi);font-weight:500;font-size:17px}
.lnk svg{width:15px;height:15px;transition:transform .3s var(--ease)}
.lnk:hover svg,a:hover>.lnk svg{transform:translateX(3px)}
.ic{width:20px;height:20px;flex:none}

/* reveal */
[data-r]{opacity:0;transform:translateY(28px);transition:opacity .9s var(--ease),transform 1s var(--ease);transition-delay:var(--d,0ms)}
[data-r].in{opacity:1;transform:none}

/* ---------------- MAGIC BENTO card ---------------- */
.mb{position:relative;overflow:hidden;display:block;background:var(--s1);border:1px solid var(--card-line);border-radius:28px;color:var(--ink);isolation:isolate;box-shadow:var(--card-sh);transition:border-color .3s ease,box-shadow .3s ease}
.mb:hover{border-color:rgba(var(--glow),.3);box-shadow:0 1px 2px rgba(16,24,40,.04),0 34px 64px -30px rgba(var(--glow),.32)}
.mb::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;opacity:0;transition:opacity .3s ease;
  background:radial-gradient(var(--sr,300px) circle at var(--mx,50%) var(--my,50%),rgba(var(--glow),.09),transparent 80%)}
.mb::after{content:"";position:absolute;inset:0;z-index:6;pointer-events:none;border-radius:inherit;padding:1px;opacity:0;transition:opacity .3s ease;
  background:radial-gradient(var(--sr,300px) circle at var(--mx,50%) var(--my,50%),rgba(var(--glow),.75),transparent 40%);
  -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask-composite:exclude}
.mb:hover::before,.mb:hover::after{opacity:1}
.mb>*{position:relative;z-index:2}
.mb>.pt{position:absolute;z-index:5;width:4px;height:4px;margin:-2px 0 0 -2px;pointer-events:none}
.mb>.pt i{display:block;width:4px;height:4px;border-radius:50%;background:rgba(var(--glow),.85);box-shadow:0 0 6px rgba(var(--glow),.45)}
.mb>.rp{position:absolute;z-index:7;width:10px;height:10px;margin:-5px 0 0 -5px;border-radius:50%;background:rgba(var(--glow),.22);pointer-events:none}
.mb>.go{position:absolute;z-index:3;top:22px;right:22px;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:rgba(17,19,24,.06);color:var(--ink);transition:background .3s ease,color .3s ease,transform .3s var(--ease)}
.mb>.go svg{width:16px;height:16px}
a.mb:hover>.go{background:var(--acc);color:#fff;transform:rotate(-45deg)}
.tin{padding:clamp(26px,2.8vw,40px)}
.tl{display:block;font:600 14px/18px var(--disp);letter-spacing:-.005em;color:var(--acc-hi)}
.tt{display:block;font:600 clamp(24px,2.3vw,32px)/1.08 var(--disp);letter-spacing:-.032em;color:var(--ink);margin-top:10px;text-wrap:balance}
.td{display:block;font-size:16px;line-height:1.45;color:var(--ink2);margin-top:10px;max-width:36ch;text-wrap:pretty}

/* ---------------- HOME: trust strip ---------------- */
.x section.trust{padding-block:clamp(56px,7vw,96px) clamp(16px,3vw,40px);text-align:center}
.trust p{font:500 15px/1.4 var(--text);color:var(--ink3);margin:0}
.trust-row{display:flex;justify-content:center;align-items:center;gap:clamp(24px,5vw,72px);margin-top:22px;flex-wrap:wrap}
.trust-n{display:flex;flex-direction:column;align-items:center;gap:4px}
.trust-n b{font:600 clamp(24px,2.6vw,32px)/1.1 var(--disp);letter-spacing:-.035em;color:var(--ink)}
.trust-n span{font-size:14px;color:var(--ink3)}
.trust-dot{width:6px;height:6px;border-radius:50%;background:var(--acc);margin-bottom:22px}

/* promises */
.pr-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.pr{min-height:440px;display:flex;flex-direction:column}
.pr .tin{display:flex;flex-direction:column;height:100%;flex:1}
.pr .vis{flex:1;display:flex;align-items:flex-end;margin-top:28px}
.big{font:600 clamp(64px,7vw,104px)/.9 var(--disp);letter-spacing:-.06em;color:var(--ink);background:linear-gradient(180deg,#111318 30%,#5266EB);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;padding-bottom:.06em}
.big small{font-size:.42em;letter-spacing:-.03em;margin-left:.08em}
.chat{display:flex;flex-direction:column;gap:10px;width:100%}
.bub{max-width:86%;padding:12px 16px;border-radius:20px;font-size:15px;line-height:1.35}
.bub.me{align-self:flex-end;background:var(--acc);color:#fff;border-bottom-right-radius:6px}
.bub.us{align-self:flex-start;background:var(--s2);color:var(--ink);border-bottom-left-radius:6px}
.bub.us b{display:flex;align-items:center;gap:6px;font-size:12px;font-weight:500;color:var(--acc-hi);margin-bottom:4px}
.bub.us b svg{width:13px;height:13px}
.pr .ln{display:flex;align-items:center;gap:8px;margin-top:14px;font-size:15px;color:var(--ink2)}
.pr .ln i{width:8px;height:8px;border-radius:50%;background:var(--acc);box-shadow:0 0 0 4px rgba(var(--glow),.2)}

/* features bento */
.bento{display:grid;gap:16px;grid-template-columns:repeat(12,minmax(0,1fr));
  grid-template-areas:"reg reg reg reg reg reg reg reg web web web web" "reg reg reg reg reg reg reg reg inv inv inv inv" "stf stf stf stf pay pay pay pay rep rep rep rep" "stf stf stf stf cus cus cus cus rep rep rep rep" "swi swi swi swi swi swi swi swi swi swi swi swi";
  grid-template-rows:minmax(300px,auto) minmax(300px,auto) minmax(290px,auto) minmax(290px,auto) auto}
.bento .vis{display:flex;flex-direction:column;justify-content:flex-end}
.t-stf .vis{min-height:300px}
.t-reg{grid-area:reg}.t-web{grid-area:web}.t-inv{grid-area:inv}.t-stf{grid-area:stf}.t-pay{grid-area:pay}.t-rep{grid-area:rep}.t-cus{grid-area:cus}.t-swi{grid-area:swi}
.bento .mb{display:flex;flex-direction:column}
.bento .vis{flex:1;min-height:0;position:relative}
.t-reg .vis{position:absolute;left:clamp(26px,2.8vw,40px);right:0;bottom:0;height:62%}
.t-swi{display:grid!important;grid-template-columns:1fr 1.1fr;align-items:center}
.t-swi>.go{display:none}
.t-swi .lnk{margin-top:22px}
@media(max-width:1023px){
  .bento{grid-template-columns:1fr 1fr;grid-template-areas:"reg reg" "web inv" "stf pay" "stf cus" "rep rep" "swi swi";grid-template-rows:520px 320px 300px 300px auto auto}
  .t-rep{min-height:420px}
}
@media(max-width:639px){
  .bento{grid-template-columns:1fr;grid-template-areas:"reg" "web" "inv" "stf" "pay" "cus" "rep" "swi";grid-template-rows:none}
  .t-reg{min-height:460px}.t-web,.t-inv,.t-pay,.t-cus{min-height:320px}.t-stf{min-height:560px}.t-rep{min-height:440px}
  .t-swi{grid-template-columns:1fr}
  .pr-grid{grid-template-columns:1fr}.pr{min-height:360px}
}
@media(min-width:640px) and (max-width:1023px){.pr-grid{grid-template-columns:1fr 1fr}.pr:last-child{grid-column:1/-1;min-height:300px}}

/* visuals */
.v-reg{position:absolute;inset:0;border-radius:18px 0 0 0;overflow:hidden;box-shadow:0 -20px 50px -24px rgba(16,24,40,.28);border:1px solid rgba(17,19,24,.08);border-right:0;border-bottom:0}
.v-reg img{display:block;width:113.3%;max-width:none;margin:-9.25% 0 0 -6.6%}
.v-reg.solo{position:relative;inset:auto;border-radius:22px;border:1px solid rgba(17,19,24,.08);aspect-ratio:1060/700}
.glass{background:#F5F6F8;border:1px solid rgba(17,19,24,.06);border-radius:18px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.v-web{position:relative;margin:4px clamp(26px,2.8vw,40px) -14px;border-radius:16px 16px 0 0;overflow:hidden;background:#F5F6F8;border:1px solid rgba(17,19,24,.08)}
.v-web .bar{display:flex;align-items:center;gap:6px;padding:9px 12px;border-bottom:1px solid var(--line)}
.v-web .bar i{width:8px;height:8px;border-radius:50%;background:rgba(17,19,24,.14)}
.v-web .bar span{margin-left:8px;flex:1;text-align:center;font-size:11px;color:var(--ink3);background:#FFFFFF;border-radius:6px;padding:2px 0}
.v-web .row{display:flex;gap:12px;align-items:center;padding:14px 14px 26px}
.thumb{flex:none;width:52px;height:52px;border-radius:12px;background:radial-gradient(circle at 50% 35%,rgba(var(--glow),.55),rgba(var(--glow),.12) 60%,transparent 70%),#E8E9FD;position:relative}
.thumb::after{content:"";position:absolute;left:50%;top:13px;width:12px;height:26px;margin-left:-6px;border-radius:3px 3px 4px 4px;background:linear-gradient(#FFFFFF,#C9CEE0);box-shadow:0 1px 2px rgba(16,24,40,.12)}
.v-web .nm{font-size:14px;font-weight:500;color:var(--ink)}
.v-web .meta{font-size:12px;color:var(--ink2);margin-top:2px;white-space:nowrap}
.v-web .row>div{min-width:0}
.v-web .meta b{color:var(--ink);font-weight:600;display:inline-block}
.v-web .add{margin-left:auto;flex:none;width:30px;height:30px;border-radius:50%;background:#111318;color:#fff;display:grid;place-items:center}
.v-web .add svg{width:15px;height:15px}
.tick{animation:tick .5s var(--ease)}
@keyframes tick{0%{transform:translateY(-6px);opacity:0}100%{transform:none;opacity:1}}

.v-inv{position:relative;margin:16px clamp(26px,2.8vw,40px) clamp(22px,2.4vw,32px);display:flex;align-items:flex-end;justify-content:space-between;gap:12px}
.v-inv .num{font:600 64px/0.9 var(--disp);letter-spacing:-.05em;font-variant-numeric:tabular-nums;color:var(--ink);display:inline-block}
.v-inv .cap{font-size:13px;color:var(--ink2);margin-top:8px}
.v-inv .side{display:flex;flex-direction:column;align-items:flex-end;gap:8px;min-width:0}
.chip{display:inline-flex;align-items:center;gap:6px;padding:6px 11px;border-radius:999px;font-size:12px;font-weight:500;line-height:16px;background:var(--chip);border:1px solid var(--chip-line);color:var(--ink);white-space:nowrap}
.chip.acc{background:rgba(var(--glow),.09);border-color:rgba(var(--glow),.3);color:#3F52D6}
.chip svg{width:13px;height:13px}
.meter{width:120px;height:6px;border-radius:6px;background:rgba(17,19,24,.08);overflow:hidden}
.meter i{display:block;height:100%;width:100%;background:var(--acc);border-radius:6px;transform-origin:left;transition:transform .6s var(--ease)}
.v-inv .ev{transition:opacity .3s}
.low{opacity:0;transition:opacity .3s}.low.on{opacity:1}

.v-stf{position:absolute;left:0;right:0;bottom:-90px;display:flex;justify-content:center}
.phone{--ink:#f5f5f7;--ink2:#a4a4b3;--ink3:#71717f;--line:rgba(255,255,255,.08);width:248px;height:500px;border-radius:44px;padding:10px;background:#0C0E14;border:1px solid rgba(17,19,24,.5);box-shadow:0 40px 80px -30px rgba(16,24,40,.55),inset 0 0 0 2px #23232e}
.scr{position:relative;height:100%;border-radius:35px;background:linear-gradient(180deg,#1b1b27,#14141d);overflow:hidden;padding:44px 16px 16px;text-align:left}
.scr::before{content:"";position:absolute;top:11px;left:50%;width:78px;height:22px;margin-left:-39px;border-radius:12px;background:#000}
.scr .sb{position:absolute;top:13px;left:22px;font-size:11px;font-weight:600;color:#fff}
.scr .hi{font:600 18px/1.15 var(--disp);letter-spacing:-.02em;color:#fff}
.scr .sm{font-size:11px;color:var(--ink2);margin-top:2px}
.scr .card{margin-top:12px;padding:12px;border-radius:16px;background:rgba(255,255,255,.06)}
.scr .k{font-size:10px;color:var(--ink2)}
.scr .v{font:600 22px/1.1 var(--disp);letter-spacing:-.03em;color:#fff;margin-top:2px}
.scr .two{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.scr .clock{display:flex;align-items:center;justify-content:space-between}
.scr .dot{display:inline-flex;align-items:center;gap:6px;font-size:11px;color:#fff}
.scr .dot::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--acc);box-shadow:0 0 0 3px rgba(var(--glow),.3)}
.scr .goal{height:6px;border-radius:6px;background:rgba(255,255,255,.08);margin-top:8px;overflow:hidden}
.scr .goal i{display:block;height:100%;width:74%;background:var(--acc);border-radius:6px}
.scr .tabs{position:absolute;left:10px;right:10px;bottom:10px;display:grid;grid-template-columns:repeat(4,1fr);padding:8px 4px;border-radius:20px;background:rgba(255,255,255,.07)}
.scr .tabs span{display:flex;flex-direction:column;align-items:center;gap:3px;font-size:9px;color:var(--ink3)}
.scr .tabs span.on{color:#fff}
.scr .tabs svg{width:15px;height:15px}

.v-pay{position:relative;margin:16px clamp(26px,2.8vw,40px) clamp(22px,2.4vw,32px);display:flex;flex-wrap:wrap;gap:8px}
.v-pay .chip{padding:8px 13px;font-size:13px;transition:background .4s ease,border-color .4s ease,color .4s ease}
.v-pay .chip.on{background:var(--acc);border-color:var(--acc);color:#fff}

.v-rep{position:relative;margin:16px clamp(26px,2.8vw,40px) clamp(22px,2.4vw,32px)}
.v-rep .tot{font:600 44px/1 var(--disp);letter-spacing:-.045em;color:var(--ink)}
.v-rep .dl{display:flex;align-items:center;gap:8px;margin-top:8px;font-size:13px;color:var(--ink2)}
.v-rep .dl b{color:#3F52D6;font-weight:600}
.bars{display:grid;grid-template-columns:repeat(7,1fr);gap:8px;align-items:end;height:150px;margin-top:22px}
.bars div{display:flex;flex-direction:column;align-items:center;gap:8px;height:100%;justify-content:flex-end}
.bars i{display:block;width:100%;border-radius:8px 8px 4px 4px;background:linear-gradient(180deg,rgba(var(--glow),.30),rgba(var(--glow),.10));transform-origin:bottom;transform:scaleY(.04);transition:transform 1s var(--ease)}
.bars i.hl{background:linear-gradient(180deg,#7486FF,var(--acc))}
.bars span{font-size:11px;color:var(--ink3)}
.on-view .bars i{transform:scaleY(1)}
.v-rep .rows{margin-top:18px;border-top:1px solid var(--line)}
.v-rep .rows div{display:flex;justify-content:space-between;padding:10px 0;border-bottom:1px solid var(--line);font-size:13px;color:var(--ink2)}
.v-rep .rows b{color:var(--ink);font-weight:500}

.v-cus{position:relative;margin:16px clamp(26px,2.8vw,40px) clamp(22px,2.4vw,32px);padding:14px;display:flex;flex-direction:column;gap:10px}
.v-cus .who{display:flex;align-items:center;gap:12px}
.av{flex:none;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;font:600 14px/1 var(--disp);color:#fff;background:linear-gradient(135deg,#7385ff,#3b4bc4)}
.v-cus .nm{font-size:14px;font-weight:500}
.v-cus .sm{font-size:12px;color:var(--ink2)}
.v-cus .kv{display:flex;gap:8px;flex-wrap:wrap}

.v-swi{padding:clamp(26px,2.8vw,40px);padding-left:0}
.mig{padding:22px}
.mig-top{display:flex;align-items:center;gap:12px;margin-bottom:18px;flex-wrap:wrap}
.app{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border-radius:12px;background:#FFFFFF;border:1px solid rgba(17,19,24,.07);font-size:13px;font-weight:500;color:var(--ink2)}
.app.us{background:rgba(var(--glow),.09);color:#3F52D6;border:1px solid rgba(var(--glow),.3)}
.app img{width:16px;height:16px;object-fit:contain;transform:scale(1.3)}
.mig-arrow{color:var(--ink3);width:18px;height:18px}
.mig-list{display:grid;grid-template-columns:1fr 1fr;gap:8px 24px}
.mi{display:flex;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid var(--line);font-size:14px;color:var(--ink2)}
.mi .ck{flex:none;width:20px;height:20px;border-radius:50%;display:grid;place-items:center;border:1.5px solid rgba(17,19,24,.2);color:transparent;transition:background .35s ease,border-color .35s ease,color .35s ease}
.mi .ck svg{width:12px;height:12px}
.mi.done{color:var(--ink)}
.mi.done .ck{background:var(--acc);border-color:var(--acc);color:#fff}
.mi b{margin-left:auto;font-weight:500;color:var(--ink);font-variant-numeric:tabular-nums}
.mig-bar{height:6px;border-radius:6px;background:rgba(17,19,24,.08);margin-top:18px;overflow:hidden}
.mig-bar i{display:block;height:100%;background:var(--acc);transform-origin:left;transform:scaleX(0);transition:transform 2.6s cubic-bezier(.4,.1,.2,1)}
.on-view .mig-bar i{transform:scaleX(1)}
.mig-foot{display:flex;justify-content:space-between;margin-top:10px;font-size:12px;color:var(--ink3)}
@media(max-width:639px){.v-swi{padding:0 22px 22px}.mig-list{grid-template-columns:1fr}}

/* ticket (industries) */
.ticket{width:100%;max-width:380px;padding:22px;border-radius:24px;background:rgba(255,255,255,.92);border:1px solid rgba(17,19,24,.07);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);box-shadow:0 1px 2px rgba(16,24,40,.04),0 40px 70px -34px rgba(16,24,40,.3)}
.ticket .th{display:flex;justify-content:space-between;align-items:center;font-size:13px;color:var(--ink2);padding-bottom:12px;border-bottom:1px solid var(--line)}
.ticket .th b{font:600 16px/1 var(--disp);letter-spacing:-.02em;color:var(--ink)}
.ticket .li{display:flex;justify-content:space-between;gap:12px;padding:12px 0;border-bottom:1px solid var(--line);font-size:15px;color:var(--ink)}
.ticket .li span:last-child{font-variant-numeric:tabular-nums;color:var(--ink2)}
.ticket .tot{display:flex;justify-content:space-between;align-items:baseline;padding:14px 0 16px;font:600 22px/1 var(--disp);letter-spacing:-.03em}
.ticket .pay{display:flex;align-items:center;justify-content:center;height:46px;border-radius:14px;background:var(--acc);color:#fff;font-size:15px;font-weight:500}

/* industries: stacking cards */
.stack{position:relative;display:flex;flex-direction:column;gap:28px}
.sc{position:sticky;top:calc(88px + var(--i) * 12px);height:min(560px,calc(100vh - 170px));min-height:400px;border-radius:32px;overflow:hidden;display:grid;grid-template-columns:1.05fr .95fr;align-items:center;gap:40px;padding:clamp(28px,3.6vw,56px) clamp(28px,4.4vw,64px);
  background:var(--card,var(--s1));border:1px solid var(--card-line);color:var(--ink);transform-origin:50% 0;transform:scale(var(--s,1));will-change:transform;box-shadow:0 1px 2px rgba(16,24,40,.04),0 -24px 56px -32px rgba(16,24,40,.22)}
.sc::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(70% 90% at var(--gx,85%) var(--gy,30%),rgba(var(--glow),.13),transparent 62%)}
.sc::after{content:"";position:absolute;inset:0;pointer-events:none;background:#E6E9EF;opacity:var(--dim,0);border-radius:inherit;z-index:4}
.sc>*{position:relative;z-index:2}
.sc .eb{display:flex;align-items:center;gap:10px}
.sc .ic-big{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;background:rgba(var(--glow),.09);border:1px solid rgba(var(--glow),.22);color:#3F52D6}
.sc .ic-big svg{width:16px;height:16px}
.sc .d3{font-size:clamp(34px,4vw,56px);letter-spacing:-.04em;line-height:1.02}
.sc .lead{font-size:clamp(17px,1.35vw,19px);margin-top:16px;max-width:40ch}
.sc .pts{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}
.sc .lnk{margin-top:24px}
.sc .vis{display:flex;justify-content:center}
@media(max-width:819px){
  .sc{grid-template-columns:1fr;align-content:start;gap:24px;height:auto;min-height:0;top:calc(80px + var(--i) * 10px)}
  .sc .vis{justify-content:flex-start}
  .sc .ticket{max-width:none}
}

/* pricing */
.seg{position:relative;display:inline-grid;grid-template-columns:1fr 1fr;padding:4px;border-radius:999px;background:rgba(17,19,24,.045);border:1px solid rgba(17,19,24,.08)}
.seg button{position:relative;z-index:1;display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:10px 22px;border:0;border-radius:999px;background:none;color:var(--ink2);font:500 15px/20px var(--text);cursor:pointer;transition:color .35s ease;white-space:nowrap}
.seg button:hover{color:var(--ink)}
.seg button[aria-selected=true]{color:#fff}
.seg .th{position:absolute;z-index:0;top:4px;bottom:4px;left:4px;width:calc(50% - 4px);border-radius:999px;background:#111318;box-shadow:0 6px 16px -6px rgba(16,24,40,.45);transition:transform .5s cubic-bezier(.3,1.25,.4,1)}
.seg[data-v="1"] .th{transform:translateX(100%)}
.badge{display:inline-flex;align-items:center;padding:3px 9px;border-radius:999px;font:600 11px/14px var(--text);background:var(--acc);color:#fff;letter-spacing:.005em}
.pricing-top{display:flex;justify-content:center;margin-bottom:40px}
.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;align-items:stretch}
.pc{display:flex;flex-direction:column;padding:clamp(28px,2.8vw,40px)}
.pc.pop{border-color:rgba(var(--glow),.45);background:radial-gradient(120% 60% at 50% 0%,rgba(var(--glow),.08),transparent 60%),var(--s1)}
.pc .ptop{display:flex;justify-content:space-between;align-items:center;gap:12px;min-height:28px}
.pc .pn{font:600 26px/1 var(--disp);letter-spacing:-.03em}
.pc .pf{font-size:15px;color:var(--ink2);margin-top:10px;min-height:44px}
.pc .pp{display:flex;align-items:flex-end;gap:8px;margin-top:26px;height:64px}
.pc .amt{font:600 64px/1 var(--disp);letter-spacing:-.05em;font-variant-numeric:tabular-nums;display:inline-block}
.pc .amt.talk{font-size:56px}
.pc .per{font-size:15px;color:var(--ink2);line-height:1.3}
.pc .bill{font-size:14px;color:var(--ink3);margin-top:8px;min-height:20px}
.pc .b{margin-top:26px;justify-content:space-between;width:100%}
.pc .b-g{justify-content:center;padding:12px 24px}
.pc ul{list-style:none;margin:28px 0 0;padding:24px 0 0;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:12px}
.pc li{display:flex;gap:12px;font-size:15px;line-height:1.4;color:var(--ink)}
.pc li svg{flex:none;width:18px;height:18px;color:var(--acc-hi);margin-top:1px}
.pc li.ev{color:var(--ink2)}
.plans-note{text-align:center;color:var(--ink2);font-size:15px;margin:32px auto 0;max-width:62ch}
.plans-more{display:flex;justify-content:center;margin-top:18px}
@media(max-width:959px){.plans{grid-template-columns:1fr;max-width:520px;margin-inline:auto}.pc .pf{min-height:0}}

/* reviews + support */
.rv{display:grid;gap:16px;grid-template-columns:repeat(12,minmax(0,1fr));grid-template-areas:"r1 r1 r1 r1 r1 r1 r1 sp sp sp sp sp" "r2 r2 r2 r2 r2 r2 r2 sp sp sp sp sp"}
.rv .r1{grid-area:r1}.rv .r2{grid-area:r2}.rv .sp{grid-area:sp}
.rq .tin{display:flex;flex-direction:column;height:100%}
.stars{display:flex;gap:4px;color:var(--acc)}
.stars svg{width:18px;height:18px}
.rq blockquote{margin:22px 0 0;font:500 clamp(22px,2.1vw,28px)/1.25 var(--disp);letter-spacing:-.022em;color:var(--ink);text-wrap:pretty}
.rq .by{display:flex;align-items:center;gap:14px;margin-top:auto;padding-top:28px}
.rq .by .av{width:44px;height:44px;font-size:15px}
.rq .by b{display:block;font-size:15px;font-weight:500}
.rq .by span{font-size:14px;color:var(--ink2)}
.sp .tin{display:flex;flex-direction:column;height:100%}
.sp .d3{font-size:clamp(32px,3.4vw,46px);letter-spacing:-.04em;line-height:1.02;margin-top:10px}
.sp ul{list-style:none;margin:28px 0 0;padding:0;display:flex;flex-direction:column}
.sp li{display:flex;gap:14px;align-items:flex-start;padding:16px 0;border-top:1px solid var(--line);font-size:16px;line-height:1.4}
.sp li:last-child{border-bottom:1px solid var(--line)}
.sp li .dd-ic{width:32px;height:32px;border-radius:10px}
.sp li .dd-ic svg{width:16px;height:16px}
.sp .cta-row{margin-top:auto;padding-top:28px}
@media(max-width:899px){.rv{grid-template-columns:1fr;grid-template-areas:"r1" "r2" "sp"}}

/* final CTA + forms */
.x section.start{overflow:hidden}
.orb{position:absolute;border-radius:50%;filter:blur(90px);pointer-events:none;opacity:.2}
.orb.a{width:520px;height:520px;left:50%;top:22%;margin-left:-560px;background:radial-gradient(circle,rgba(var(--glow),.75),transparent 70%);animation:drift 14s ease-in-out infinite alternate}
.orb.b{width:440px;height:440px;left:50%;top:44%;margin-left:120px;background:radial-gradient(circle,rgba(115,133,255,.55),transparent 70%);animation:drift 17s ease-in-out infinite alternate-reverse}
@keyframes drift{to{transform:translate3d(60px,-40px,0) scale(1.08)}}
.gcard2{position:relative;max-width:820px;margin:0 auto;padding:clamp(22px,3.4vw,44px);border-radius:32px;background:rgba(255,255,255,.82);border:1px solid rgba(17,19,24,.07);
  -webkit-backdrop-filter:blur(30px) saturate(160%);backdrop-filter:blur(30px) saturate(160%);box-shadow:0 1px 2px rgba(16,24,40,.04),0 50px 100px -48px rgba(16,24,40,.32)}
.gcard2 .seg{display:grid;width:100%;max-width:400px;margin:0 auto 30px}
.fm{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.fm[hidden]{display:none}
.fd{display:flex;flex-direction:column;gap:8px;min-width:0}
.fd.full{grid-column:1/-1}
.fd label{font-size:14px;font-weight:500;color:var(--ink2)}
.fd input,.fd select{width:100%;height:52px;padding:0 16px;border-radius:14px;border:1px solid rgba(17,19,24,.16);background:#FFFFFF;color:var(--ink);font:400 16px/1 var(--text);color-scheme:light;outline:none;transition:border-color .2s ease,box-shadow .2s ease,background .2s ease;-webkit-appearance:none;appearance:none}
.fd input::placeholder{color:rgba(17,19,24,.38)}
.fd input:hover,.fd select:hover{border-color:rgba(17,19,24,.3)}
.fd input:focus,.fd select:focus{border-color:var(--acc);box-shadow:0 0 0 4px rgba(var(--glow),.18);background:#FFFFFF}
.fd select{padding-right:44px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237A7F8C' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 16px center;background-size:16px;cursor:pointer}
.fd select:invalid{color:rgba(17,19,24,.42)}
.fd select option{color:#111318;background:#FFFFFF}
.fd input[type=date]{display:block;line-height:52px}
.fd input[type=date]::-webkit-date-and-time-value{text-align:left}
.fd input[type=date]::-webkit-calendar-picker-indicator{opacity:.55;cursor:pointer}
.fm-foot{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:10px;flex-wrap:wrap}
.fm-foot .fine{margin:0}
.hp{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}
.ok{display:flex;flex-direction:column;align-items:center;text-align:center;padding:40px 0 24px;animation:okin .6s var(--ease)}
@keyframes okin{from{opacity:0;transform:translateY(12px) scale(.98)}to{opacity:1;transform:none}}
.ok svg{width:76px;height:76px}
.ok circle{stroke:var(--acc);stroke-width:3;fill:rgba(var(--glow),.14);stroke-dasharray:226;stroke-dashoffset:226;animation:draw .7s var(--ease) forwards}
.ok path{stroke:#3F52D6;stroke-width:4;fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:50;stroke-dashoffset:50;animation:draw .45s var(--ease) .45s forwards}
@keyframes draw{to{stroke-dashoffset:0}}
.ok h3{font:600 30px/1.1 var(--disp);letter-spacing:-.03em;margin:24px 0 0;max-width:20ch;text-wrap:balance}
.ok p{color:var(--ink2);margin:10px 0 0}
@media(max-width:639px){.fm{grid-template-columns:1fr}.fm-foot .b{width:100%;justify-content:space-between}.orb.a{margin-left:-380px}.orb.b{margin-left:-40px}}

/* CTA band (sub pages) */
.band{position:relative;overflow:hidden;text-align:center;padding:clamp(48px,7vw,96px) clamp(24px,4vw,64px)}
.band::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:radial-gradient(60% 90% at 50% 120%,rgba(var(--glow),.14),transparent 70%)}
.band .lead{margin-inline:auto}
.band .cta-row{justify-content:center}

/* sub page hero */
.x section.ph{padding-top:clamp(150px,16vw,200px);padding-bottom:clamp(56px,7vw,96px);text-align:center}
.ph .lead{margin-inline:auto;max-width:42ch}
.ph .cta-row{justify-content:center}
.ph-vis{margin-top:clamp(48px,6vw,80px)}
.ph-vis .mb{max-width:980px;margin:0 auto;min-height:420px;display:flex;align-items:center;justify-content:center;padding:clamp(24px,4vw,56px);
  background:radial-gradient(80% 70% at 50% 100%,rgba(var(--glow),.10),transparent 70%),var(--s1)}
.ph-vis .mb>.stage{position:relative;width:100%;max-width:520px;min-height:340px}
.ph-vis .mb>.stage.wide{max-width:760px}
.x section.tight{padding-top:0}
.bens{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.ben{min-height:240px}
.ben .tin{display:flex;flex-direction:column;height:100%}
.ben .dd-ic{width:46px;height:46px;border-radius:14px;margin-bottom:auto}
.ben .dd-ic svg{width:21px;height:21px}
.ben .tt{margin-top:40px;font-size:clamp(22px,2vw,28px)}
.more{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.more .mb{border-radius:22px}
.more .tin{padding:22px;display:flex;flex-direction:column;gap:14px;min-height:150px}
.more .tt{font-size:19px;margin-top:auto}
.more .dd-ic{width:38px;height:38px}
@media(max-width:959px){.more{grid-template-columns:1fr 1fr}}
@media(max-width:639px){.bens{grid-template-columns:1fr}.ben{min-height:200px}}

.ph-vis .stage{display:flex;flex-direction:column;justify-content:center}
.ph-vis .stage .v-web{margin:0;border-radius:16px}
.ph-vis .stage .v-inv,.ph-vis .stage .v-pay,.ph-vis .stage .v-rep,.ph-vis .stage .v-cus{margin:0}
.ph-vis .stage .v-pay{justify-content:center}
.ph-vis .stage .v-stf{position:relative;bottom:auto}
.ph-vis .mb.vis-staff-payroll{padding-bottom:0;align-items:flex-end;overflow:hidden}
.ph-vis .mb.vis-staff-payroll .v-stf{margin-bottom:-120px}
/* compare table + FAQ (pricing.html) */
.cmp{border-radius:28px;background:var(--s1);border:1px solid var(--card-line);box-shadow:var(--card-sh);overflow:hidden}
.cmp table{width:100%;border-collapse:collapse;font-size:15px}
.cmp th,.cmp td{padding:16px 20px;text-align:center;border-bottom:1px solid var(--line)}
.cmp th:first-child,.cmp td:first-child{text-align:left;color:var(--ink)}
.cmp thead th{font:600 18px/1.1 var(--disp);letter-spacing:-.02em;color:var(--ink);padding-top:24px;padding-bottom:20px;background:#F5F6F8}
.cmp thead th span{display:block;font:400 13px/1.3 var(--text);color:var(--ink2);margin-top:4px;letter-spacing:0}
.cmp thead th.pop{color:#3F52D6}
.cmp .grp td{font:600 13px/1 var(--text);color:var(--ink3);padding-top:24px;background:transparent}
.cmp td svg{width:18px;height:18px;color:var(--acc-hi);vertical-align:middle}
.cmp td .no{display:inline-block;width:12px;height:1.5px;background:rgba(17,19,24,.22);vertical-align:middle}
.cmp tr:last-child td{border-bottom:0}
.cmp tbody tr:not(.grp):hover td{background:rgba(17,19,24,.025)}
@media(max-width:639px){.cmp th,.cmp td{padding:12px 8px;font-size:13px}.cmp th:first-child,.cmp td:first-child{padding-left:16px}.cmp thead th{font-size:14px}.cmp thead th span{display:none}}
.faq{max-width:820px;margin:0 auto;border-top:1px solid var(--line)}
.qa{border-bottom:1px solid var(--line)}
.qa button{display:flex;width:100%;align-items:center;justify-content:space-between;gap:20px;padding:24px 4px;border:0;background:none;color:var(--ink);font:600 clamp(18px,1.7vw,22px)/1.3 var(--disp);letter-spacing:-.02em;text-align:left;cursor:pointer;transition:color .2s}
.qa button:hover{color:#3F52D6}
.qa button i{flex:none;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;background:rgba(17,19,24,.06);transition:transform .4s var(--ease),background .3s,color .3s}
.qa button i svg{width:15px;height:15px}
.qa.open button i{transform:rotate(45deg);background:var(--acc);color:#fff}
.qa .ans{display:grid;grid-template-rows:0fr;transition:grid-template-rows .45s var(--ease)}
.qa.open .ans{grid-template-rows:1fr}
.qa .ans>div{overflow:hidden}
.qa .ans p{padding:0 56px 26px 4px;margin:0;color:var(--ink2);font-size:17px;line-height:1.5;opacity:0;transform:translateY(-6px);transition:opacity .35s ease,transform .45s var(--ease)}
.qa.open .ans p{opacity:1;transform:none}

/* footer */
footer.ft{border-top:1px solid var(--line);padding:72px 0 40px;color:var(--ink2);background:var(--alt);font-family:var(--text);font-size:14px;-webkit-font-smoothing:antialiased}
.ft-grid{display:grid;grid-template-columns:1.4fr repeat(4,1fr);gap:40px}
.ft-brand{display:flex;align-items:center;gap:12px;color:var(--ink)}
.ft-brand .nv-logo img{width:22px;height:22px}
.ft-brand b{font:600 20px/1 var(--disp);letter-spacing:-.03em}
.ft-tag{margin:16px 0 0;max-width:30ch;line-height:1.5}
.ft-col b{display:block;color:var(--ink);font-weight:500;font-size:14px;margin-bottom:14px}
.ft-col a{display:block;padding:5px 0;color:var(--ink2);transition:color .2s}
.ft-col a:hover{color:var(--ink)}
.ft-note{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:56px;padding-top:22px;border-top:1px solid var(--line);font-size:13px;color:var(--ink3)}
@media(max-width:959px){.ft-grid{grid-template-columns:1fr 1fr 1fr}.ft-first{grid-column:1/-1}}
@media(max-width:639px){.ft-grid{grid-template-columns:1fr 1fr;gap:32px 20px}}

@media (prefers-reduced-motion: reduce){
  [data-r]{opacity:1;transform:none;transition:none}
  .orb{animation:none}
  .bars i,.mig-bar i{transition:none}
  .sc{transform:none!important}
  .nv-drop,.sheet,.sh-group,.seg .th,.qa .ans,.qa .ans p{transition:none!important}
  .tick,.ok,.ok circle,.ok path{animation:none;stroke-dashoffset:0}
}
@media(max-width:639px){
  .seg button{padding:10px 12px;font-size:14px;gap:6px}
  .seg .badge{padding:3px 7px;font-size:10.5px}
  .sc .vis{display:none}
  .sc{padding:28px 24px 30px}
}

/* ---------------- p7: bright palette, light states ---------------- */
/* header: light glass when solid (scrolling up) and always on the template pages */
header.nav.solid .nv-brand,body.sub header.nav .nv-brand,header.nav.solid .nv-name,body.sub header.nav .nv-name{color:#111318}
header.nav.solid .nv-logo,body.sub header.nav .nv-logo,.sheet .nv-logo,.ft-brand .nv-logo{background:rgba(17,19,24,.04);border-color:rgba(17,19,24,.09)}
header.nav.solid .nv-brand:hover .nv-logo,body.sub header.nav .nv-brand:hover .nv-logo{background:rgba(17,19,24,.08)}
header.nav.solid .nv-pill,body.sub header.nav .nv-pill{background:rgba(255,255,255,.6);border-color:rgba(17,19,24,.08);box-shadow:0 1px 2px rgba(16,24,40,.04),0 10px 24px -12px rgba(16,24,40,.12)}
header.nav.solid .nv-link,body.sub header.nav .nv-link{color:#4B505C}
header.nav.solid .nv-link:hover,header.nav.solid .nv-link[aria-expanded=true],header.nav.solid .nv-link.on,
body.sub header.nav .nv-link:hover,body.sub header.nav .nv-link[aria-expanded=true],body.sub header.nav .nv-link.on{color:#111318;background:rgba(17,19,24,.06)}
header.nav.solid .nv-icon,body.sub header.nav .nv-icon{color:#111318;background:rgba(17,19,24,.04);border-color:rgba(17,19,24,.09)}
header.nav.solid .nv-icon:hover,body.sub header.nav .nv-icon:hover{background:rgba(17,19,24,.09)}
header.nav.solid .nv-cta,body.sub header.nav .nv-cta{background:#111318}
header.nav.solid .nv-cta span,body.sub header.nav .nv-cta span{color:#fff}
header.nav.solid .nv-cta i,body.sub header.nav .nv-cta i{background:#fff;color:#111318}
header.nav.solid .nv-cta:hover,body.sub header.nav .nv-cta:hover{box-shadow:0 20px 25px -10px rgba(16,24,40,.3)}
header.nav.solid .nv-cta:hover i,body.sub header.nav .nv-cta:hover i{background:#E8EAF0}
header.nav.solid .nv-burger,body.sub header.nav .nv-burger,.sheet .nv-burger{color:#111318;background:rgba(17,19,24,.06)}
header.nav.solid .nv-burger:hover,body.sub header.nav .nv-burger:hover,.sheet .nv-burger:hover{background:rgba(17,19,24,.11)}
.sheet .nv-brand,.sheet .nv-name{color:#111318}
header.nav.solid :focus-visible,body.sub header.nav :focus-visible,.nv-drop :focus-visible{outline-color:#3F52D6}

/* section rhythm: white base, cool grey alternates */
.x section#why,.x section#industries,.x section#reviews{background:var(--alt)}
/* hero (onyx) hands off to the white page through a soft gradient */
.x section.trust{--f:var(--hero);--fd:clamp(150px,22vh,240px);padding-top:calc(var(--fd) + clamp(32px,4vw,56px));
  background:linear-gradient(180deg,var(--f) 0,color-mix(in oklab,var(--f) 74%,#fff) calc(var(--fd)*.16),color-mix(in oklab,var(--f) 42%,#fff) calc(var(--fd)*.38),color-mix(in oklab,var(--f) 16%,#fff) calc(var(--fd)*.64),color-mix(in oklab,var(--f) 4%,#fff) calc(var(--fd)*.86),#fff var(--fd))}
.rq .by .av{color:#fff}
header.nav.past::before{opacity:0}
.ok h3{color:var(--ink)}

/* Living background (owner, 2026-10-12): the card hover dots, a few, drifting behind every
   section after the hero. isolation keeps the layer above the section colour, below its content. */
.x section,.ft{isolation:isolate}
.bgd{position:absolute;inset:0;z-index:-1;overflow:hidden;pointer-events:none}
.bgd i{position:absolute;width:4px;height:4px;margin:-2px 0 0 -2px;border-radius:50%;background:rgba(var(--glow),.7);box-shadow:0 0 6px rgba(var(--glow),.4);opacity:0}
.bgd i.big{width:7px;height:7px;margin:-3.5px 0 0 -3.5px;box-shadow:0 0 10px rgba(var(--glow),.45)}
.bgd i.tiny{width:2.5px;height:2.5px;margin:-1.25px 0 0 -1.25px;box-shadow:none}
/* The trust strip is gone (owner, 2026-10-12): the hero's white fade flows straight into Why,
   whose grey starts white and settles into the section colour, so there is no seam. */
main.x>section#why:first-of-type{--f:var(--hero);--fd:clamp(150px,22vh,240px);padding-top:calc(var(--fd) + clamp(24px,3vw,40px));
  background:linear-gradient(180deg,var(--f) 0,color-mix(in oklab,var(--f) 74%,var(--alt)) calc(var(--fd)*.16),color-mix(in oklab,var(--f) 42%,var(--alt)) calc(var(--fd)*.38),color-mix(in oklab,var(--f) 16%,var(--alt)) calc(var(--fd)*.64),color-mix(in oklab,var(--f) 4%,var(--alt)) calc(var(--fd)*.86),var(--alt) var(--fd))}
main.x>section#why:first-of-type .why-head{padding-top:0}
/* Every section head centred and symmetric (owner, 2026-10-12: "the text is always in the
   middle ... sharp, clean, and minimal"): eyebrow between two hairlines, the second line in brand
   blue, the lede centred under it. Same on the template pages (.ph heads, bands). */
.x .head,.x .band{text-align:center}
.x .head .lead,.x .ph .lead,.x .band .lead{margin-inline:auto!important;max-width:40ch}
.x .head .cta-row,.x .ph .cta-row,.x .band .cta-row{justify-content:center}
.x .head .eb,.x .ph .eb,.x .band .eb{display:flex;align-items:center;justify-content:center;gap:16px}
.x .head .eb::before,.x .head .eb::after,.x .ph .eb::before,.x .ph .eb::after,.x .band .eb::before,.x .band .eb::after{content:"";width:clamp(28px,5vw,64px);height:1px;background:linear-gradient(90deg,transparent,rgba(var(--glow),.55))}
.x .head .eb::after,.x .ph .eb::after,.x .band .eb::after{transform:scaleX(-1)}
.x .head .d1,.x .ph .d1{font-size:clamp(52px,9.4vw,140px);line-height:.96;letter-spacing:-.05em}
.x .head .g,.x .ph .g,.x .band .g{background:linear-gradient(90deg,var(--acc-hi),var(--acc) 50%,#8E9BF3);-webkit-background-clip:text;background-clip:text;color:transparent;padding-bottom:.06em}
.x .head .lead,.x .ph .lead{margin-top:28px}
.why-head{padding-top:clamp(24px,4vw,56px)}
/* Hero headline in the Why colours (owner, 2026-10-12): ink first line, brand-blue gradient second.
   The hero markup stays untouched; p4.js wraps the line after the <br>. */
.hero .hero-copy h1{color:#fff;letter-spacing:-.03em}
.hero .hero-copy h1 .g{background:linear-gradient(90deg,var(--acc-hi),var(--acc) 50%,#8E9BF3);-webkit-background-clip:text;background-clip:text;color:transparent;padding-bottom:.06em;text-shadow:none}
/* Features as six equal squares, three over three (owner, 2026-10-12), Switch band under them.
   ponytail: Customers left the grid to keep six; it stays in the Features menu and footer. */
.bento{grid-template-columns:repeat(3,minmax(0,1fr));grid-template-areas:"reg web inv" "stf pay rep" "swi swi swi";grid-template-rows:auto}
.bento .t-cus{display:none}
.bento .mb:not(.t-swi){aspect-ratio:1;min-height:0;overflow:hidden}
.bento .mb:not(.t-swi) .tin{padding:26px}
.bento .mb:not(.t-swi) .tt{font-size:clamp(22px,1.9vw,28px)}
.bento .mb:not(.t-swi) .td{font-size:14px}
.t-reg .vis{left:26px;height:50%}
.t-stf .vis{min-height:0}
@media(max-width:1023px){
  .bento{grid-template-columns:1fr 1fr;grid-template-areas:"reg web" "inv stf" "pay rep" "swi swi";grid-template-rows:auto}
  .t-rep,.t-reg,.t-web,.t-inv,.t-pay,.t-stf{min-height:0}
}
@media(max-width:639px){
  .bento{grid-template-columns:1fr;grid-template-areas:"reg" "web" "inv" "stf" "pay" "rep" "swi"}
}
.bento .mb:not(.t-swi) .vis{overflow:hidden;justify-content:flex-start}
.bento .t-stf .v-stf{top:4px;bottom:auto}
.bento .t-stf .phone{transform:scale(.72);transform-origin:top center}
.bento .t-rep .vis>*{transform:scale(.74);transform-origin:top center;margin:0 26px}
/* Real app screenshots in the six squares (owner, 2026-10-12: real photos, never made-up UI). */
.bento .vis.real,.bento .t-reg .vis.real{position:relative;left:auto;right:auto;bottom:auto;height:auto;flex:1;min-height:0;margin-top:4px}
.vis.real .tshot{position:absolute;left:26px;right:-1px;top:0;bottom:-1px;overflow:hidden;border-radius:14px 0 0 0;border:1px solid var(--card-line);background:#fff;box-shadow:0 18px 40px -22px rgba(16,24,40,.35)}
.vis.real .tshot img{display:block;width:165%;max-width:none;height:auto}
.t-web .vis.real .tshot img{width:125%}
.vis.real .phn{position:absolute;left:50%;top:0;width:min(58%,230px);transform:translateX(-50%);padding:6px 6px 0;border-radius:30px 30px 0 0;background:#0C0E14;box-shadow:0 30px 60px -28px rgba(16,24,40,.55),inset 0 0 0 2px #23232e}
.vis.real .phn img{display:block;width:100%;border-radius:24px 24px 0 0}
.vis.real.duo .phn{width:min(46%,190px)}
.vis.real.duo .phn.a{left:31%;z-index:1}
.vis.real.duo .phn.b{left:69%;top:22px;z-index:2}
.t-reg .vis.real .tshot img{position:absolute;right:0;bottom:0;width:auto;height:100%}
/* Pricing (owner, 2026-10-12, ref p1 pricing): side plans in deep navy, Growth white, raised and
   larger in the middle; every line centred; plain buttons with the label in the middle. */
.plans{grid-template-columns:1fr 1.14fr 1fr;align-items:center;gap:20px;max-width:1160px;margin-inline:auto}
.pc{text-align:center;align-items:center}
.pc .ptop{flex-direction:column;justify-content:center;gap:12px;min-height:0}
.pc .pf{max-width:30ch;margin-inline:auto}
.pc .pp{justify-content:center}
.pc .per{text-align:left}
.pc .b,.pc .b-g{justify-content:center;width:100%;padding:15px 24px}
.pc .b>i{display:none}
.pc ul{align-items:center;width:100%}
.pc li{justify-content:center;text-align:left}
.pc:not([data-plan=growth]){background:radial-gradient(120% 70% at 50% 0%,rgba(var(--glow),.22),transparent 62%),var(--hero);border-color:rgba(255,255,255,.08);color:#F4F5FA;box-shadow:0 30px 60px -36px rgba(16,24,40,.6)}
.pc:not([data-plan=growth]) .pf,.pc:not([data-plan=growth]) .per,.pc:not([data-plan=growth]) .bill,.pc:not([data-plan=growth]) li.ev{color:rgba(244,245,250,.68)}
.pc:not([data-plan=growth]) li{color:#F4F5FA}
.pc:not([data-plan=growth]) li svg{color:#8E9BF3}
.pc:not([data-plan=growth]) ul{border-top-color:rgba(255,255,255,.1)}
.pc:not([data-plan=growth]) .b-w{background:#fff;color:var(--ink)}
.pc:not([data-plan=growth]) .b-g{background:rgba(255,255,255,.08);color:#fff;border:1px solid rgba(255,255,255,.16)}
.pc[data-plan=growth]{padding:clamp(40px,3.6vw,56px) clamp(32px,3vw,44px);background:#fff;border-color:rgba(var(--glow),.35);box-shadow:0 50px 90px -40px rgba(var(--glow),.55),0 2px 6px rgba(16,24,40,.06);z-index:1}
.pc[data-plan=growth] .amt{font-size:76px}
@media(max-width:959px){.plans{grid-template-columns:1fr}.pc[data-plan=growth] .amt{font-size:64px}}
.plans{align-items:stretch;padding-block:28px}
.pc[data-plan=growth]{margin-block:-28px}
.pc .ptop .badge{position:absolute;top:18px;left:50%;transform:translateX(-50%)}
.pc .ptop{position:static}
@media(max-width:959px){.plans{padding-block:0}.pc[data-plan=growth]{margin-block:0}.pc .ptop .badge{position:static;transform:none}}
@media(min-width:960px){.pc:not([data-plan=growth]){padding-top:62px}}
/* Footer wordmark (owner, 2026-10-12, inspired by p1): the whole name, edge to edge, in brand blue
   fading into the footer grey. Never cropped at the top: line-height leaves room for the cap height. */
.ft-mark{margin-top:56px;overflow:hidden;line-height:1}
.ft-mark span{display:block;width:max-content;font:700 100px/1.02 var(--disp);letter-spacing:-.05em;padding:.04em .02em 0;white-space:nowrap;
  background:linear-gradient(180deg,rgba(var(--glow),.30) 0%,rgba(var(--glow),.10) 55%,rgba(var(--glow),0) 100%);-webkit-background-clip:text;background-clip:text;color:transparent;user-select:none}
.ft-mark+.ft-note{margin-top:8px}
/* Header (owner, 2026-10-12): the logo fills its whole tile; Start free trial is a plain pill with
   the label centred, no arrow circle. */
header.nav .nv-logo{padding:0;width:44px;height:44px;overflow:hidden}
header.nav .nv-logo img{width:100%;height:100%;object-fit:cover;transform:none}
.nv-cta{justify-content:center;padding:0 22px;height:44px}
.nv-cta i{display:none}
/* Brand blue gradient (owner, 2026-10-12: the "Per location." blue, fading lighter) replaces the navy
   and black: side plans, the billing toggle, Growth's button, the scrolled header button. */
:root{--blu:linear-gradient(90deg,var(--acc-hi),var(--acc) 50%,#8E9BF3)}
.pc:not([data-plan=growth]){background:linear-gradient(135deg,var(--acc-hi) 0%,var(--acc) 50%,#8E9BF3 100%);border-color:rgba(255,255,255,.18);box-shadow:0 34px 64px -34px rgba(var(--glow),.7)}
.pc:not([data-plan=growth]) .pf,.pc:not([data-plan=growth]) .per,.pc:not([data-plan=growth]) .bill,.pc:not([data-plan=growth]) li.ev{color:rgba(255,255,255,.82)}
.pc:not([data-plan=growth]) li svg{color:#fff}
.pc:not([data-plan=growth]) ul{border-top-color:rgba(255,255,255,.28)}
.pc:not([data-plan=growth]) .b-w{color:var(--acc-hi)}
.pc:not([data-plan=growth]) .b-g{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.34)}
.pc .badge{background:#fff;color:var(--acc-hi)}
.pc[data-plan=growth] .b-w{background:var(--blu);color:#fff}
.seg .th{background:var(--blu);box-shadow:0 8px 18px -8px rgba(var(--glow),.7)}
header.nav.solid .nv-cta,body.sub header.nav .nv-cta{background:var(--blu)}
/* lists under the line start from the left; only the top half is centred */
.pc ul{align-items:stretch;text-align:left}
.pc li{justify-content:flex-start}
/* the three plan buttons sit on one line and share one height */
.pc .b,.pc .b-g{height:50px;padding-block:0;box-sizing:border-box}
@media(min-width:960px){.pc[data-plan=growth] .b{margin-top:64px}}
.pc:not([data-plan=growth]) .b-g{background:#fff;color:var(--acc-hi);border-color:#fff}
/* the logo fills its tile everywhere (menu sheet and footer too), and the sheet's trial button matches the header */
.nv-logo{padding:0!important;overflow:hidden}
.nv-logo img{width:100%!important;height:100%!important;object-fit:cover;transform:none!important}
.sheet .nv-logo,.ft-brand .nv-logo{width:44px;height:44px}
.sheet .b-w{justify-content:center;padding:15px 24px;background:var(--blu)}
.sheet .b-w>i{display:none}
.sh-cta .b,.sh-cta .b-g{justify-content:center;text-align:center}
/* Why cards in the p1 order (owner, 2026-10-12): big word, small label, then title + body at the foot */
.pr .big{margin:0}
.pr .big+.tl{margin-top:14px;text-transform:uppercase;letter-spacing:.16em;font-size:12px}
.pr .big+.tl+.tt{margin-top:auto;padding-top:48px}
.pr{min-height:420px}
@media(max-width:959px){.pr{min-height:0}.pr .big+.tl+.tt{padding-top:32px}}
.pr .big{background:var(--blu);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
/* Every Start free trial button (owner, 2026-10-12): no arrow circle, label centred */
.b-w{justify-content:center;text-align:center;padding:0 26px;min-height:46px}
.b-w>i{display:none!important}

/* ---------------- Journal + FAQ (2026-10-12) ---------------- */
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:0 0 22px;padding:0;list-style:none;font:500 14px/20px var(--text);color:var(--ink3)}
.crumbs.c{justify-content:center}
.crumbs li+li::before{content:"/";margin-right:6px;color:rgba(17,19,24,.25)}
.crumbs a{transition:color .2s}.crumbs a:hover{color:var(--acc-hi)}
.crumbs [aria-current]{color:var(--ink2);max-width:46ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cats{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:34px}
.cat{display:inline-flex;align-items:center;height:42px;padding:0 18px;border-radius:12px;font:500 15px/1 var(--text);color:var(--ink2);background:var(--s1);border:1px solid var(--line);transition:all .25s ease}
.cat:hover{color:var(--ink);border-color:var(--line2)}
.cat.on{background:var(--blu);border-color:transparent;color:#fff}
/* covers: our blue gradient with a real app screen inside */
.jcv{position:relative;overflow:hidden;aspect-ratio:16/10;background:linear-gradient(135deg,var(--acc-hi),var(--acc) 50%,#8E9BF3)}
.jcv{padding:10px;display:flex;gap:10px}
.jcv img{flex:1;min-width:0;width:100%;height:100%;object-fit:cover;object-position:center;border-radius:15px;display:block;background:#fff}
.jcv.phn img{object-position:center top}
.jc{border-radius:24px}
.jc-in{display:flex;flex-direction:column;height:100%}
.jcb{display:flex;flex-direction:column;flex:1;padding:24px 26px 26px}
.jct{font:600 clamp(21px,1.7vw,24px)/1.15 var(--disp);letter-spacing:-.025em;color:var(--ink);margin:10px 0 0;text-wrap:balance}
.jcd{font-size:16px;line-height:1.5;color:var(--ink2);margin:10px 0 0;text-wrap:pretty}
.jcm{font-size:13.5px;color:var(--ink3);margin-top:auto;padding-top:20px}
.jcr{display:inline-flex;align-items:center;gap:8px;margin-top:10px;font:600 15px/1 var(--disp);color:var(--acc-hi)}
.jcr svg{width:16px;height:16px;transition:transform .3s var(--ease)}
.jc-in:hover .jcr svg{transform:translateX(4px)}
.jc-in:hover .jct,.jc-in:hover .jft{color:var(--acc-hi)}
.jgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.jf2{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.jf .jcv{aspect-ratio:16/9}
.jf .jcb{padding:clamp(26px,3vw,40px)}
.jft{font:600 clamp(26px,2.5vw,36px)/1.08 var(--disp);letter-spacing:-.035em;color:var(--ink);margin:12px 0 0;text-wrap:balance}
.jf .jcd{font-size:clamp(17px,1.3vw,19px)}
.jrel-hd{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:32px}
.jrel-hd .d2{font-size:clamp(34px,4vw,56px)}
.jall{display:inline-flex;align-items:center;gap:8px;font:600 15px/1 var(--disp);color:var(--acc-hi);white-space:nowrap;padding-bottom:8px}
.jall svg{width:16px;height:16px}
.x section.jfeat{padding-bottom:clamp(56px,7vw,96px)}
/* article */
.x section.art-hd{padding-top:clamp(130px,14vw,170px);padding-bottom:0}
.art-cat{display:inline-flex;font:600 14px/18px var(--disp);color:var(--acc-hi);margin-bottom:14px}
.art-hd h1{font:600 clamp(36px,4.8vw,64px)/1.03 var(--disp);letter-spacing:-.04em;color:var(--ink);margin:0;max-width:20ch;text-wrap:balance}
.art-dek{font-size:clamp(19px,1.55vw,22px);line-height:1.4;font-weight:500;letter-spacing:-.012em;color:var(--ink2);max-width:52ch;margin:20px 0 0;text-wrap:pretty}
.art-meta{display:flex;flex-wrap:wrap;gap:6px 18px;margin:22px 0 0;font-size:14.5px;color:var(--ink3)}
.art-meta a{color:var(--ink);font-weight:500}
.art-hd .jcv{margin-top:clamp(32px,4vw,48px);border-radius:28px;aspect-ratio:21/9}
.art-hd .jcv{padding:12px;gap:12px}.art-hd .jcv img{border-radius:18px}
.x section.art-wrap{padding-top:clamp(48px,6vw,80px)}
.art-grid{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:clamp(40px,6vw,88px);align-items:start}
.prose{max-width:720px;font-size:18px;line-height:1.7;color:#2C3039}
.prose>p{margin:0 0 22px}
.prose h2{font:600 clamp(26px,2.4vw,32px)/1.15 var(--disp);letter-spacing:-.03em;color:var(--ink);margin:56px 0 18px;scroll-margin-top:100px;text-wrap:balance}
.prose a{color:var(--acc-hi);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;text-decoration-color:rgba(63,82,214,.35);transition:text-decoration-color .2s}
.prose a:hover{text-decoration-color:currentColor}
.prose strong{color:var(--ink);font-weight:600}
.prose ul,.prose ol{margin:0 0 24px;padding-left:24px}
.prose li{margin:0 0 10px;padding-left:4px}
.prose ul li::marker{color:var(--acc)}
.prose ol li::marker{color:var(--acc-hi);font-weight:600}
.kt{background:var(--alt);border:1px solid var(--card-line);border-radius:22px;padding:26px 28px 14px;margin:0 0 36px}
.kt-h{font:600 15px/1 var(--disp);color:var(--acc-hi);margin:0 0 14px}
.kt ul{margin:0;font-size:17px;line-height:1.55;color:var(--ink)}
.prose .faq{max-width:none;margin:0}
.qa h3{margin:0;font:inherit}
.art-by{display:flex;gap:16px;align-items:flex-start;margin-top:44px;padding:24px;border-radius:22px;border:1px solid var(--line);font-size:16px;line-height:1.55;color:var(--ink2)}
.art-by .nv-logo{flex:none;width:44px;height:44px;border-radius:12px;overflow:hidden;padding:0}
.art-by .nv-logo img{width:100%;height:100%;object-fit:cover}
.art-by p{margin:0}.art-by b{color:var(--ink)}
.art-side{position:sticky;top:96px;display:flex;flex-direction:column;gap:20px}
.side-h{font:600 13px/1 var(--text);letter-spacing:.08em;text-transform:uppercase;color:var(--ink3);margin:0 0 12px}
.toc ol,.toc-m ol{list-style:none;margin:0;padding:0;border-left:1px solid var(--line)}
.toc a,.toc-m a{display:block;padding:7px 0 7px 16px;margin-left:-1px;border-left:2px solid transparent;font-size:14.5px;line-height:1.35;color:var(--ink2);text-decoration:none;transition:all .2s}
.toc a:hover,.toc a.on{color:var(--acc-hi);border-left-color:var(--acc)}
.side-cta{padding:24px;border-radius:22px;color:#fff;background:linear-gradient(135deg,var(--acc-hi),var(--acc) 50%,#8E9BF3)}
.side-cta p{margin:0 0 16px;font-size:15px;line-height:1.5;color:rgba(255,255,255,.88)}
.side-cta .side-t{font:600 22px/1.15 var(--disp);letter-spacing:-.02em;color:#fff;margin-bottom:8px}
.side-cta .b-w{width:100%;background:#fff;color:var(--acc-hi)}
.side-links{display:flex;flex-direction:column}
.side-links a{display:flex;justify-content:space-between;align-items:center;padding:12px 2px;border-bottom:1px solid var(--line);font:500 15px/1.2 var(--text);color:var(--ink);transition:color .2s}
.side-links a:hover{color:var(--acc-hi)}
.side-links a span{color:var(--ink3);font-size:18px}
.toc-m{display:none;margin:0 0 28px;border:1px solid var(--line);border-radius:18px;padding:0 18px}
.toc-m summary{cursor:pointer;padding:16px 0;font:600 16px/1 var(--disp);color:var(--ink);list-style:none;display:flex;justify-content:space-between}
.toc-m summary::after{content:"+";color:var(--acc-hi);font-size:20px;line-height:16px}
.toc-m[open] summary::after{content:"–"}
.toc-m ol{margin-bottom:16px}
/* FAQ page */
.fsearch{position:relative;display:flex;align-items:center;max-width:560px;margin:34px auto 0}
.fsearch svg{position:absolute;left:20px;width:20px;height:20px;color:var(--ink3)}
.fsearch input{width:100%;height:56px;padding:0 20px 0 52px;border-radius:16px;border:1px solid var(--line2);background:var(--s1);font:500 17px/1 var(--text);color:var(--ink);box-shadow:var(--card-sh);outline:none;transition:border-color .2s,box-shadow .2s}
.fsearch input:focus{border-color:var(--acc);box-shadow:0 0 0 4px rgba(var(--glow),.15)}
.fgrid{display:grid;grid-template-columns:240px minmax(0,1fr);gap:clamp(40px,6vw,80px);align-items:start}
.fnav{position:sticky;top:96px;display:flex;flex-direction:column}
.fnav a{padding:9px 0 9px 16px;border-left:2px solid var(--line);font-size:15px;color:var(--ink2);transition:all .2s}
.fnav a:hover{color:var(--acc-hi);border-left-color:var(--acc)}
.fgroup{scroll-margin-top:100px}
.fgroup+.fgroup{margin-top:64px}
.fgroup .d3{margin-bottom:18px}
.fbody .faq{max-width:none;margin:0}
.fnone,.fmore{font-size:17px;color:var(--ink2);margin:48px 0 0}
.fnone a,.fmore a,.qa .ans a{color:var(--acc-hi);font-weight:500}
@media(max-width:1023px){
  .jgrid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .art-grid{grid-template-columns:1fr}
  .art-side{position:static;display:grid;grid-template-columns:1fr 1fr;gap:20px}
  .art-side .toc{display:none}
  .side-cta{grid-column:1/-1}
  .toc-m{display:block}
  .fgrid{grid-template-columns:1fr}
  .fnav{position:static;flex-direction:row;flex-wrap:nowrap;overflow-x:auto;gap:8px;margin:0 calc(-1*clamp(20px,4vw,40px));padding:0 clamp(20px,4vw,40px) 4px;scrollbar-width:none}
  .fnav .side-h{display:none}
  .fnav a{flex:none;border:1px solid var(--line);border-radius:12px;padding:10px 14px;white-space:nowrap}
}
@media(max-width:767px){
  .jgrid{grid-template-columns:1fr}
  .jf2{grid-template-columns:1fr}
  .jf .jcv{aspect-ratio:16/10}
  .jrel-hd{flex-direction:column;align-items:flex-start;gap:12px}
  .cats{flex-wrap:nowrap;overflow-x:auto;justify-content:flex-start;margin-inline:-20px;padding:0 20px 4px;scrollbar-width:none}
  .cat{flex:none}
  .art-hd .jcv{aspect-ratio:16/11;border-radius:22px}
  .art-hd .jcv{padding:8px;gap:8px}.art-hd .jcv img,.jcv img{border-radius:14px}.jcv{padding:8px;gap:8px}
  .art-side{grid-template-columns:1fr}
  .prose{font-size:17px}
  .kt{padding:22px 20px 10px}
  .crumbs [aria-current]{max-width:100%}
}
.x section.fgroup{padding-block:0}
.art-wrap .bgd,.fgroup .bgd{display:none}
@media(max-width:767px){.art-hd .crumbs [aria-current]{display:none}.fgrid{gap:28px}}
.art-src{margin-top:44px;padding-top:24px;border-top:1px solid var(--line)}
.art-src ul{margin:0;padding-left:20px;font-size:15px;line-height:1.6}
.jcv img[src*="stock-count"]{object-position:center top}
/* covers: blue edge on top and sides only, photo flush with the card body */
.jcv{padding:10px 10px 0;gap:0}
.jcv img{border-radius:14px 14px 0 0;object-fit:cover;object-position:center}
.art-hd .jcv{padding:12px 12px 0}.art-hd .jcv img{border-radius:18px 18px 0 0}
.art-hd .jcv{border-radius:28px 28px 0 0;overflow:hidden}
.x section.jhd,.x section.fhd{padding-top:clamp(112px,11vw,140px)}
@media(max-width:767px){.jcv,.art-hd .jcv{padding:8px 8px 0}.jcv img,.art-hd .jcv img{border-radius:12px 12px 0 0}.art-hd .jcv{aspect-ratio:21/9;border-radius:20px 20px 0 0}.x section.jhd,.x section.fhd{padding-top:104px}}
.jcv picture{display:block;width:100%;height:100%}@media(max-width:767px){.art-hd .jcv{aspect-ratio:16/10}}
.jcv{background:linear-gradient(180deg,var(--acc-hi) 0,var(--acc) 35%,#AEB8F6 100%)}
.fm .fine.err{color:#C2412D}
/* 2026-10-12 owner: centered card heads (why + features on every size), mobile-only industries/support centering, compact mobile footer */
.pr .tin{align-items:center;text-align:center}.pr .td{margin-inline:auto}
.bento .tin{text-align:center}.bento .td{margin-inline:auto}
.rq .by span:only-child{font-size:15px}
@media(max-width:767px){
  .sc .eb{justify-content:center}.sc .d3,.sc .lead{text-align:center;margin-inline:auto}
  .sp .tl,.sp .d3{text-align:center}.sp .cta-row{justify-content:center}
  .ft-grid{grid-template-columns:auto auto auto;justify-content:space-between;gap:28px 14px}
  .ft-first{grid-column:1/3;grid-row:1}.ft-grid>.ft-col:last-child{grid-column:3;grid-row:1}
  .ft-col a{font-size:14px;white-space:nowrap}
  .ft-mark{margin-top:28px}
}