/* Public website v2 — hand-written, no framework runtime.
   Manpower OS palette (brand identity, Route A Keystone + Route C Power-on): Black #0A0A0A,
   White, Signal Red #CC0000 (accent — used sparingly: kicker dots, full stops, live/progress
   marks, the featured-plan badge), Steel #8A8A8A (decorative only — fails AA as text),
   Concrete #F2F2F0 (light sections). Primary CTAs are black on light / white on dark.
   Brand colours are overridable per white-label via :root{--p;--acc} in <head>.
   Motion animates transform/opacity only and is disabled under prefers-reduced-motion. */

:root{
  --p:#0A0A0A; --acc:#CC0000; --steel:#8A8A8A; --concrete:#F2F2F0;
  --p-hov:color-mix(in srgb,var(--p),#fff 14%);
  --acc-hov:color-mix(in srgb,var(--acc),#000 14%);
  --p-s:color-mix(in srgb,var(--p) 8%,transparent);
  --acc-s:color-mix(in srgb,var(--acc) 9%,transparent);
  --bg:#f4f4f2; --sf:#fff; --sf2:#fafaf9; --paper:var(--concrete); --dark:#0A0A0A; --dark2:#141414; --dark3:#1f1f1f;
  --ink:#0A0A0A; --ink2:#474747; --ink3:#666; --ln:#e3e3df; --ln2:#ededea;
  --good:#177245; --good-s:#e9f5ee; --warn:#a16207; --warn-s:#fdf6e3; --bad:#cc0000; --bad-s:#fdecec;
  --r-sm:8px; --r:14px; --r-lg:20px; --r-xl:28px;
  --sh:0 1px 2px rgba(10,12,16,.05);
  --sh-md:0 12px 28px -12px rgba(10,12,16,.18);
  --sh-lg:0 40px 80px -28px rgba(10,12,16,.38),0 12px 24px -12px rgba(10,12,16,.18);
  --ease:cubic-bezier(.22,1,.36,1);
  --font:"Public Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  --wrap:1200px; --gut:16px; --nav-h:64px;
}
@media (min-width:768px){:root{--gut:28px}}

/* ── base ─────────────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--nav-h) + 12px)}
body{margin:0;font-family:var(--font);font-size:16px;line-height:1.6;color:var(--ink);background:#fff;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:clip;text-rendering:optimizeLegibility}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
h1,h2,h3{margin:0;line-height:1.12;text-wrap:balance;font-weight:800;letter-spacing:-.025em}
p{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
figure{margin:0}
button,input,textarea,select{font:inherit;color:inherit}
.num{font-variant-numeric:tabular-nums}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.hidden{display:none!important}
svg.i{width:1.1em;height:1.1em;flex:none;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;vertical-align:-.18em}
:focus-visible{outline:3px solid color-mix(in srgb,var(--p) 55%,transparent);outline-offset:2px;border-radius:6px}
.sec-dark :focus-visible,.hero :focus-visible,.foot :focus-visible,.auth-side :focus-visible,.cta-card :focus-visible{outline-color:rgba(255,255,255,.75)}
.skip{position:absolute;left:12px;top:-60px;z-index:100;background:var(--ink);color:#fff;padding:10px 14px;border-radius:10px;text-decoration:none;font-weight:600;transition:top .2s}
.skip:focus{top:12px}
::selection{background:color-mix(in srgb,var(--acc) 22%,transparent)}

.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 var(--gut)}
.wrap-narrow{max-width:860px}
.sec{position:relative;padding:72px 0}
.sec-tight{padding:40px 0 56px}
@media (min-width:900px){.sec{padding:112px 0}}
.sec-paper{background:var(--paper)}
.sec-dark{background:var(--dark);color:#fff;overflow:hidden}

/* type */
.eyebrow{display:inline-block;font-size:12.5px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;color:var(--ink2)}
.eyebrow .dot{display:inline-block;vertical-align:.12em;margin-right:9px;width:7px;height:7px;border-radius:99px;background:var(--acc);box-shadow:0 0 0 4px var(--acc-s)}
.eyebrow-dark{color:rgba(255,255,255,.72)}
.eyebrow-dark .dot{box-shadow:0 0 0 4px rgba(204,0,0,.3)}
.stop{color:var(--acc)}
h1{font-size:clamp(2.3rem,1.3rem + 4.6vw,4.4rem);letter-spacing:-.04em;line-height:1.03}
h2{font-size:clamp(1.85rem,1.2rem + 2.4vw,3rem);letter-spacing:-.035em}
h3{font-size:1.125rem;letter-spacing:-.015em;line-height:1.3}
.lead{font-size:clamp(1.03rem,.98rem + .3vw,1.2rem);color:var(--ink2);line-height:1.6;max-width:62ch}
.sec-dark .lead,.hero .lead{color:rgba(255,255,255,.72)}
.fine{font-size:13px;color:var(--ink3);margin-top:12px}
.sec-dark .fine{color:rgba(255,255,255,.55)}
.muted{color:var(--ink3);font-weight:400}
.sec-head{max-width:720px;margin-bottom:44px}
.sec-head h2{margin:14px 0 14px}
.sec-head-c{text-align:center;margin-left:auto;margin-right:auto}
.sec-head-c .lead{margin:0 auto}
.center-link,.center-note{text-align:center;margin-top:28px;font-size:15px;color:var(--ink2)}
.center-note{font-size:13px;color:var(--ink3)}
.link-arrow{display:inline-flex;align-items:center;gap:6px;color:var(--p);font-weight:700;text-decoration:none}
.link-arrow svg{transition:transform .25s var(--ease)}
.link-arrow:hover svg{transform:translateX(4px)}
.link-arrow svg{color:var(--acc)}

/* ── buttons ──────────────────────────────────────────────────────────── */
.btn{--mx:0px;--my:0px;position:relative;display:inline-flex;align-items:center;justify-content:center;gap:9px;font-weight:700;font-size:15px;line-height:1.2;padding:12px 20px;border-radius:12px;border:1px solid transparent;text-decoration:none;cursor:pointer;white-space:nowrap;overflow:hidden;isolation:isolate;transform:translate(var(--mx),var(--my));transition:transform .35s var(--ease),background-color .2s,border-color .2s,color .2s,box-shadow .3s var(--ease)}
.btn>*{position:relative;z-index:1}
.btn-sm{font-size:13.5px;padding:8px 14px;border-radius:10px}
.btn-lg{font-size:16px;padding:15px 24px;border-radius:14px}
.btn-block{width:100%}
.btn-acc{background:var(--p);color:#fff;box-shadow:0 8px 22px -12px rgba(10,10,10,.6)}
.btn-acc:hover{background:var(--p-hov);box-shadow:0 14px 30px -14px rgba(10,10,10,.7)}
/* on dark surfaces the primary CTA inverts to white */
.hero .btn-acc,.sec-dark .btn-acc,.cta-card .btn-acc,.foot .btn-acc,.auth-side .btn-acc,.plan-dark .btn-acc,.js .has-dark-hero .nav:not(.is-scrolled) .btn-acc{background:#fff;color:var(--ink);box-shadow:0 10px 28px -14px rgba(0,0,0,.8)}
.hero .btn-acc:hover,.sec-dark .btn-acc:hover,.cta-card .btn-acc:hover,.foot .btn-acc:hover,.auth-side .btn-acc:hover,.plan-dark .btn-acc:hover,.js .has-dark-hero .nav:not(.is-scrolled) .btn-acc:hover{background:var(--concrete)}
.btn-acc::after,.btn-light::after{content:"";position:absolute;inset:0;z-index:0;background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.38) 50%,transparent 70%);transform:translateX(-120%);transition:transform .8s var(--ease)}
.btn-light::after,.hero .btn-acc::after,.sec-dark .btn-acc::after,.cta-card .btn-acc::after,.foot .btn-acc::after,.auth-side .btn-acc::after,.plan-dark .btn-acc::after{background:linear-gradient(105deg,transparent 30%,rgba(10,12,16,.08) 50%,transparent 70%)}
.btn-acc:hover::after,.btn-light:hover::after{transform:translateX(120%)}
.btn-glass{background:rgba(255,255,255,.07);color:#fff;border-color:rgba(255,255,255,.18)}
.btn-glass:hover{background:rgba(255,255,255,.13);border-color:rgba(255,255,255,.3)}
.btn-line{background:#fff;color:var(--ink);border-color:var(--ln)}
.btn-line:hover{border-color:var(--ink);box-shadow:var(--sh-md)}
.btn-light{background:#fff;color:var(--ink)}
.btn-light:hover{box-shadow:0 14px 30px -14px rgba(0,0,0,.6)}
.btn[disabled]{opacity:.5;cursor:not-allowed}
.btn:active{transform:translate(var(--mx),var(--my)) scale(.98)}
.cta-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.cta-row-c{justify-content:center}

/* ── nav ──────────────────────────────────────────────────────────────── */
.nav{position:sticky;top:0;z-index:50;height:var(--nav-h);background:rgba(255,255,255,.82);-webkit-backdrop-filter:saturate(1.5) blur(14px);backdrop-filter:saturate(1.5) blur(14px);border-bottom:1px solid var(--ln2);transition:background-color .3s,border-color .3s,box-shadow .3s}
.nav.is-scrolled{background:rgba(255,255,255,.94);border-bottom-color:var(--ln);box-shadow:0 10px 30px -18px rgba(10,12,16,.35)}
.nav-in{height:100%;display:flex;align-items:center;gap:20px}
.brand{display:inline-flex;align-items:center;gap:10px;text-decoration:none;font-weight:800;letter-spacing:-.02em;font-size:17px;color:var(--ink);transform-origin:left center;transition:transform .35s var(--ease)}
.nav.is-scrolled .brand{transform:scale(.94)}
.brand-mark{position:relative;width:34px;height:34px;border-radius:10px;background:var(--p);color:#fff;display:inline-flex;align-items:center;justify-content:center;font-size:15px;font-weight:800;flex:none}
.brand-mark i{position:absolute;right:-3px;bottom:-3px;width:11px;height:11px;border-radius:99px;background:var(--acc);border:2.5px solid #fff}
.brand-logo{width:34px;height:34px;object-fit:contain;border-radius:8px}
.brand-light{color:#fff}
.brand-light .brand-mark i{border-color:var(--dark)}
.brand-os{gap:0;line-height:0}
.brand-os-img{display:block;height:28px;width:auto}
.brand-os-white:not(.is-only){display:none}
.js .has-dark-hero .nav:not(.is-scrolled) .brand-os-ink{display:none}
.js .has-dark-hero .nav:not(.is-scrolled) .brand-os-white{display:block}
.brand-tag{display:block;font-size:11.5px;font-weight:500;letter-spacing:0;color:rgba(255,255,255,.6)}
.nav-links{display:none;gap:4px;margin-left:12px}
.nav-links a{font-size:14.5px;font-weight:600;color:var(--ink2);text-decoration:none;padding:8px 12px;border-radius:9px;transition:color .2s,background-color .2s}
.nav-links a:hover,.nav-links a[aria-current]{color:var(--ink);background:var(--ln2)}
.nav-cta{margin-left:auto;display:flex;align-items:center;gap:10px}
.nav-signin{display:none;font-size:14.5px;font-weight:600;color:var(--ink);text-decoration:none;padding:8px 10px}
.nav-signin:hover{color:var(--ink);text-decoration:underline;text-underline-offset:4px}
.nav-prog{position:absolute;left:0;right:0;bottom:-1px;height:2px;overflow:hidden;pointer-events:none}
.nav-prog i{display:block;height:100%;background:linear-gradient(90deg,var(--p),var(--acc));transform-origin:0 50%;transform:scaleX(0)}
.mnav{position:relative}
.mnav summary{list-style:none;cursor:pointer;width:42px;height:42px;display:inline-flex;align-items:center;justify-content:center;border-radius:11px;border:1px solid var(--ln);background:#fff;font-size:20px}
.mnav summary::-webkit-details-marker{display:none}
.mnav-panel{position:absolute;right:0;top:52px;width:min(320px,calc(100vw - 2 * var(--gut)));background:#fff;border:1px solid var(--ln);border-radius:16px;box-shadow:var(--sh-lg);padding:10px;display:grid;gap:2px;animation:pop .28s var(--ease)}
.mnav-panel a{padding:11px 12px;border-radius:10px;text-decoration:none;font-weight:600;color:var(--ink)}
.mnav-panel a:not(.btn):hover{background:var(--ln2)}
.mnav-panel .btn{margin-top:8px}
@keyframes pop{from{opacity:0;transform:translateY(-6px) scale(.98)}}
@media (max-width:420px){.nav-cta>.btn{display:none}}
@media (min-width:640px){.nav-signin{display:inline-block}}
@media (min-width:980px){.nav-links{display:flex}.mnav{display:none}}

/* dark-hero variant: transparent nav over the hero until scrolled (JS only) */
.js .has-dark-hero .nav:not(.is-scrolled){background:transparent;border-bottom-color:transparent;-webkit-backdrop-filter:none;backdrop-filter:none}
.js .has-dark-hero .nav:not(.is-scrolled) .brand{color:#fff}
.js .has-dark-hero .nav:not(.is-scrolled) .brand-mark i{border-color:var(--dark)}
.js .has-dark-hero .nav:not(.is-scrolled) .nav-links a,.js .has-dark-hero .nav:not(.is-scrolled) .nav-signin{color:rgba(255,255,255,.78)}
.js .has-dark-hero .nav:not(.is-scrolled) .nav-links a:hover{color:#fff;background:rgba(255,255,255,.08)}
.js .has-dark-hero .nav:not(.is-scrolled) .mnav summary{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.2);color:#fff}
.js .has-dark-hero .nav:not(.is-scrolled) :focus-visible{outline-color:rgba(255,255,255,.75)}

/* ── shared decorative backgrounds ────────────────────────────────────── */
.hero-bg,.phero-bg{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.mesh{position:absolute;display:block;border-radius:50%;will-change:transform}
.mesh.m1{width:70vmax;height:70vmax;left:-22vmax;top:-34vmax;background:radial-gradient(closest-side,rgba(138,138,138,.42),transparent 70%);animation:drift1 22s ease-in-out infinite alternate}
.mesh.m2{width:60vmax;height:60vmax;right:-24vmax;top:-12vmax;background:radial-gradient(closest-side,color-mix(in srgb,var(--acc) 26%,transparent),transparent 70%);animation:drift2 26s ease-in-out infinite alternate}
.mesh.m3{width:50vmax;height:50vmax;left:20%;top:30%;background:radial-gradient(closest-side,rgba(242,242,240,.10),transparent 70%);animation:drift3 30s ease-in-out infinite alternate}
@keyframes drift1{to{transform:translate3d(8vmax,6vmax,0) scale(1.08)}}
@keyframes drift2{to{transform:translate3d(-7vmax,8vmax,0) scale(.94)}}
@keyframes drift3{to{transform:translate3d(-10vmax,-6vmax,0) scale(1.1)}}
.gridlines{position:absolute;inset:0;display:block;background-image:linear-gradient(rgba(255,255,255,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.06) 1px,transparent 1px);background-size:56px 56px;-webkit-mask-image:radial-gradient(ellipse 70% 60% at 50% 30%,#000 30%,transparent 75%);mask-image:radial-gradient(ellipse 70% 60% at 50% 30%,#000 30%,transparent 75%)}
.gridlines-light{background-image:linear-gradient(rgba(10,12,16,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(10,12,16,.055) 1px,transparent 1px)}

/* entry animation used above the fold (CSS only — no JS needed) */
.rise{animation:rise .9s var(--ease) both;animation-delay:var(--d,0ms)}
@keyframes rise{from{opacity:0;transform:translateY(18px)}}

/* ── hero ─────────────────────────────────────────────────────────────── */
.hero{position:relative;background:var(--dark);color:#fff;margin-top:calc(-1 * var(--nav-h));padding-top:calc(var(--nav-h) + 56px);isolation:isolate}
.hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:150px;background:#fff;z-index:-1}
.hero .hero-bg{bottom:150px}
.hero-copy{position:relative;text-align:center;display:flex;flex-direction:column;align-items:center}
.hero h1{margin:20px 0 20px}
.br-md{display:none}
@media (min-width:640px){.br-md{display:inline}}
.hero .lead{margin:0 auto;max-width:58ch}
.hero .cta-row{justify-content:center}
.grad{background:linear-gradient(100deg,#fff 0%,#e4e4e1 45%,#a9a9a6 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.ticks{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 22px;margin-top:22px;font-size:14px;color:var(--ink2)}
.ticks li{display:inline-flex;align-items:center;gap:7px}
.ticks svg{color:var(--ink)}
.ticks-dark{color:rgba(255,255,255,.66)}
.ticks-dark svg{color:#fff}
.hero-stage{position:relative;margin-top:56px;padding-bottom:28px}
.stage{position:relative;max-width:1080px;margin:0 auto;perspective:1600px;animation:stagein 1.2s var(--ease) .25s both}
@keyframes stagein{from{opacity:0;transform:translateY(60px) rotateX(16deg) scale(.96)}}
.tilt{--px:0;--py:0;position:relative;transition:transform .6s var(--ease)}
.browser{position:relative;background:#fff;border-radius:14px;overflow:hidden;box-shadow:var(--sh-lg);border:1px solid rgba(10,12,16,.08)}
.browser-hero{border-color:rgba(255,255,255,.14);box-shadow:0 60px 120px -40px rgba(0,0,0,.7),0 0 0 1px rgba(255,255,255,.06)}
.browser-bar{height:34px;display:flex;align-items:center;gap:6px;padding:0 14px;background:#f2f2f0;border-bottom:1px solid var(--ln)}
.browser-bar i{width:10px;height:10px;border-radius:99px;background:#d6d9de}
.browser-bar i:nth-child(1){background:#f1a1a1}.browser-bar i:nth-child(2){background:#f3d48c}.browser-bar i:nth-child(3){background:#9fd8b0}
.browser-bar span{margin-left:10px;font-size:11.5px;color:var(--ink3);background:#fff;border:1px solid var(--ln);border-radius:7px;padding:2px 10px;font-variant-numeric:tabular-nums;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:60%}
.browser img{width:100%}
.float{--dp:14px;position:absolute;z-index:3;transform:translate3d(calc(var(--px) * var(--dp)),calc(var(--py) * var(--dp)),0);transition:transform .6s var(--ease)}
.fcard{display:flex;align-items:center;gap:11px;background:rgba(255,255,255,.96);color:var(--ink);border:1px solid rgba(10,12,16,.06);border-radius:14px;padding:11px 14px 11px 11px;box-shadow:0 22px 44px -18px rgba(10,12,16,.45);font-size:13.5px;line-height:1.3;white-space:nowrap;animation:fin .9s var(--ease) both var(--d,0ms),bob 7s ease-in-out infinite calc(var(--d,0ms) + .9s)}
.fcard b{font-weight:800}
.fcard small{display:block;font-size:11.5px;color:var(--ink3);margin-top:2px}
.fic{width:34px;height:34px;border-radius:10px;display:inline-flex;align-items:center;justify-content:center;background:var(--p-s);color:var(--p);font-size:17px;flex:none}
.fic.good{background:var(--good-s);color:var(--good)}
@keyframes fin{from{opacity:0;transform:translateY(22px) scale(.92)}}
@keyframes bob{50%{transform:translateY(-8px)}}
.f1{left:-2%;top:16%}
.f2{--dp:20px;right:14%;top:-22px}
.f3{--dp:26px;left:6%;bottom:12%}
.f2 .fcard{animation-duration:.9s,8s}
.f3 .fcard{animation-duration:.9s,9s}
.phone{position:relative;background:#0b0d12;border-radius:30px;padding:7px;box-shadow:0 30px 60px -24px rgba(10,12,16,.55),inset 0 0 0 1.5px rgba(255,255,255,.08)}
.phone img{border-radius:24px;width:100%}
.phone::before{content:"";position:absolute;top:13px;left:50%;width:30%;height:5px;margin-left:-15%;border-radius:99px;background:rgba(255,255,255,.14);z-index:2}
.phone-hero{--dp:22px;position:absolute;z-index:4;right:-1%;bottom:-6%;width:21%;transform:translate3d(calc(var(--px) * var(--dp)),calc(var(--py) * var(--dp)),0);transition:transform .6s var(--ease)}
.phone-hero img{animation:fin 1s var(--ease) both .9s}
@media (max-width:767px){
  .hero{padding-top:calc(var(--nav-h) + 36px)}
  .hero::after{height:70px}.hero .hero-bg{bottom:70px}
  .hero-stage{margin-top:40px;padding-left:10px;padding-right:10px}
  .browser-bar{height:22px;padding:0 9px;gap:4px}.browser-bar i{width:6px;height:6px}.browser-bar span{font-size:9px;padding:0 6px}
  .browser-hero{border-radius:10px}
  .fcard{font-size:11px;padding:7px 10px 7px 7px;gap:7px;border-radius:11px}
  .fcard small{font-size:9.5px}
  .fic{width:24px;height:24px;font-size:13px;border-radius:7px}
  .f1{left:-6px;top:auto;bottom:-24px}
  .f2{display:none}
  .f3{left:auto;right:28%;bottom:auto;top:-22px}
  .phone-hero{width:27%;right:-8px;bottom:-14%}
  .phone{border-radius:18px;padding:4px}.phone img{border-radius:14px}.phone::before{top:8px;height:3px}
}

/* ── capability strip / marquee / stats ───────────────────────────────── */
.caps{padding:56px 0 24px;background:#fff}
@media (min-width:768px){.caps{padding-top:88px}}
.badges{display:flex;flex-wrap:wrap;justify-content:center;gap:10px}
.badges li{display:inline-flex;align-items:center;gap:7px;font-size:13.5px;font-weight:600;color:var(--ink);background:var(--sf2);border:1px solid var(--ln);border-radius:99px;padding:7px 13px}
.badges svg{color:var(--p)}
.marquee{position:relative;overflow:hidden;margin:36px 0 8px;-webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)}
.marquee-track{display:flex;width:max-content;animation:marq 60s linear infinite}
.marquee:hover .marquee-track{animation-play-state:paused}
.marquee-row{display:flex;gap:10px;padding-right:10px}
.marquee-row li{display:inline-flex;align-items:center;gap:8px;white-space:nowrap;font-size:14px;font-weight:600;color:var(--ink2);padding:10px 16px;border-radius:12px;background:var(--bg)}
.marquee-row svg{color:var(--ink3)}
@keyframes marq{to{transform:translateX(-50%)}}
.stats{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin:40px 0 0}
@media (min-width:900px){.stats{grid-template-columns:repeat(4,1fr);gap:16px}}
.stat{display:flex;flex-direction:column-reverse;justify-content:flex-end;padding:20px;border:1px solid var(--ln);border-radius:var(--r-lg);background:#fff}
.stat dd{margin:0;font-size:clamp(2.2rem,1.6rem + 2vw,3.2rem);font-weight:800;letter-spacing:-.04em;line-height:1;color:var(--ink);display:inline-block}
.stat dt{margin-top:8px;font-size:13.5px;color:var(--ink2);line-height:1.4}

/* ── problem → solution ───────────────────────────────────────────────── */
.ps{display:grid;gap:16px;align-items:stretch}
@media (min-width:900px){.ps{grid-template-columns:1fr auto 1fr;gap:20px}}
.ps-card{border-radius:var(--r-lg);padding:26px;border:1px solid var(--ln);background:#fff}
.ps-card h3{display:flex;align-items:center;gap:10px;margin-bottom:18px;font-size:1.15rem}
.ps-before{background:transparent;border-style:dashed;border-color:#d4d6da}
.ps-before h3{color:var(--ink2)}
.ps-before h3 svg{color:var(--warn)}
.ps-after{box-shadow:var(--sh-md);border-color:transparent;outline:1px solid var(--ln)}
.ps-after h3 svg{color:var(--good)}
.ps li{display:flex;gap:11px;align-items:flex-start;padding:10px 0;border-top:1px solid var(--ln2);font-size:15px}
.ps li:first-child{border-top:0}
.ps-before li{color:var(--ink2)}
.ps-before li svg{color:var(--bad);margin-top:3px}
.ps-after li svg{color:var(--good);margin-top:3px}
.ps-note{margin-top:14px;font-size:12.5px;color:var(--ink3)}
.ps-arrow{display:none;align-self:center;width:48px;height:48px;border-radius:99px;background:var(--ink);color:#fff;align-items:center;justify-content:center;font-size:20px}
@media (min-width:900px){.ps-arrow{display:inline-flex}}
.strike{font-style:normal}
.js .ps-before .strike{background:linear-gradient(currentColor,currentColor) 0 58%/0 1px no-repeat;-webkit-box-decoration-break:clone;box-decoration-break:clone;transition:background-size .6s var(--ease) var(--d,0ms)}
.js .ps-before.in .strike{background-size:100% 1px}
.js .ps-after li{opacity:0;transform:translateX(-10px);transition:opacity .5s var(--ease) var(--d,0ms),transform .6s var(--ease) var(--d,0ms)}
.js .ps-after.in li{opacity:1;transform:none}

/* ── feature tabs ─────────────────────────────────────────────────────── */
.tabs-list{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;padding:6px;margin:0 auto 34px;background:var(--bg);border-radius:16px;width:max-content;max-width:100%}
.tabs-list::-webkit-scrollbar{display:none}
.tabs-list [role=tab]{position:relative;flex:none;display:inline-flex;align-items:center;gap:8px;border:0;background:transparent;padding:10px 16px;border-radius:11px;font-size:14.5px;font-weight:700;color:var(--ink2);cursor:pointer;white-space:nowrap;overflow:hidden;transition:color .2s,background-color .25s,box-shadow .25s}
.tabs-list [role=tab]:hover{color:var(--ink)}
.tabs-list [role=tab][aria-selected=true]{background:#fff;color:var(--ink);box-shadow:0 2px 6px rgba(10,12,16,.08)}
.tabs-list [role=tab][aria-selected=true] svg{color:var(--acc)}
.tab-prog{position:absolute;left:12px;right:12px;bottom:4px;height:2px;border-radius:2px;background:var(--acc);transform:scaleX(0);transform-origin:0 50%;opacity:0}
.tabs.is-auto [aria-selected=true] .tab-prog{opacity:.9;animation:tabprog var(--auto,8s) linear forwards}
@keyframes tabprog{to{transform:scaleX(1)}}
html:not(.js) .tabs-list{display:none}
.tab-panels{display:grid}
.tab-panel{display:grid;gap:28px;align-items:center;align-self:start;outline:none}
html:not(.js) .tab-panel+.tab-panel{margin-top:72px}
@media (min-width:980px){.tab-panel{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:56px}}
.js .tab-panel{grid-area:1/1;opacity:0;visibility:hidden;transform:translateY(14px);transition:opacity .45s var(--ease),transform .7s var(--ease),visibility 0s linear .45s}
.js .tab-panel.is-active{opacity:1;visibility:visible;transform:none;transition-delay:0s}
.tp-copy h3{font-size:clamp(1.5rem,1.1rem + 1.4vw,2.1rem);letter-spacing:-.03em;margin:14px 0 12px}
.tp-copy>p{color:var(--ink2)}
.tier{display:inline-flex;align-items:center;font-size:11.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--p);background:var(--p-s);border-radius:99px;padding:4px 10px;white-space:nowrap}
.steps{margin-top:22px;display:grid;gap:4px;counter-reset:s}
.steps li{display:flex;gap:13px;align-items:flex-start;padding:11px 12px;border-radius:12px;transition:background-color .2s;cursor:default}
.steps li b{display:block;font-size:15px}
.steps li span:last-child{font-size:14px;color:var(--ink2);line-height:1.45}
.steps li.is-hot,.steps li:hover{background:var(--bg)}
.step-n{width:26px;height:26px;flex:none;border-radius:99px;background:var(--ink);color:#fff;font-size:12.5px;font-weight:800;display:inline-flex;align-items:center;justify-content:center;margin-top:1px}
.tp-visual{position:relative;min-width:0}
.shot{position:relative}
.hs{position:absolute;left:var(--x);top:var(--y);width:28px;height:28px;margin:-14px 0 0 -14px;border-radius:99px;background:var(--acc);color:#fff;font-size:12.5px;font-weight:800;display:flex;align-items:center;justify-content:center;box-shadow:0 0 0 4px rgba(255,255,255,.9),0 6px 16px -4px rgba(200,16,46,.6);z-index:2;transition:transform .3s var(--ease)}
.hs::after{content:"";position:absolute;inset:-4px;border-radius:inherit;border:2px solid var(--acc);opacity:0;animation:ping 2.4s var(--ease) infinite}
.hs.is-hot{transform:scale(1.25)}
@keyframes ping{0%{opacity:.7;transform:scale(1)}100%{opacity:0;transform:scale(2.1)}}
.js .tab-panel .hs{opacity:0;transform:scale(.4);transition:opacity .4s var(--ease),transform .5s var(--ease)}
.js .tab-panel.is-active .hs{opacity:1;transform:none}
.js .tab-panel.is-active .hs.is-hot{transform:scale(1.25)}
.js .tab-panel.is-active .hs[data-hs="1"]{transition-delay:.25s}.js .tab-panel.is-active .hs[data-hs="2"]{transition-delay:.35s}.js .tab-panel.is-active .hs[data-hs="3"]{transition-delay:.45s}.js .tab-panel.is-active .hs[data-hs="4"]{transition-delay:.55s}
@media (max-width:640px){.hs{width:22px;height:22px;margin:-11px 0 0 -11px;font-size:11px;box-shadow:0 0 0 3px rgba(255,255,255,.9)}}
.att-row{display:grid;grid-template-columns:38% 1fr;gap:18px;align-items:center;margin-top:18px}
.phone-sm{border-radius:24px;padding:6px}.phone-sm img{border-radius:19px}
.evlog{background:#fff;border:1px solid var(--ln);border-radius:16px;box-shadow:var(--sh-md);padding:14px 16px;font-size:13.5px}
.evlog-h{display:flex;align-items:center;gap:8px;font-weight:700;color:var(--ink);padding-bottom:10px;border-bottom:1px solid var(--ln2)}
.evlog li{display:flex;gap:10px;align-items:center;padding:9px 0;border-top:1px solid var(--ln2)}
.evlog li:first-child{border-top:0}
.ev-t{width:44px;flex:none;font-weight:700;color:var(--ink2)}
.tag{font-style:normal;font-size:11.5px;font-weight:700;border-radius:99px;padding:2px 8px;margin-left:4px;white-space:nowrap}
.tag.warn{background:var(--warn-s);color:var(--warn)}.tag.good{background:var(--good-s);color:var(--good)}
.js .tab-panel .evlog li{opacity:0;transform:translateY(8px);transition:opacity .4s,transform .5s var(--ease)}
.js .tab-panel.is-active .evlog li{opacity:1;transform:none}
.js .tab-panel.is-active .evlog li:nth-child(2){transition-delay:.15s}.js .tab-panel.is-active .evlog li:nth-child(3){transition-delay:.3s}.js .tab-panel.is-active .evlog li:nth-child(4){transition-delay:.45s}
@media (max-width:520px){.att-row{grid-template-columns:42% 1fr;gap:10px}.evlog{padding:10px;font-size:12px}.ev-t{width:36px}.evlog .tag{display:none}}
.phone-fan{display:flex;justify-content:center;align-items:flex-end;gap:3%;padding:10px 0}
.phone-fan .phone{width:30%}
.phone-fan .phone:nth-child(2){transform:translateY(-22px)}
.js .tab-panel .phone-fan .phone{opacity:0;translate:0 24px;transition:opacity .5s var(--ease),translate .7s var(--ease)}
.js .tab-panel.is-active .phone-fan .phone{opacity:1;translate:0 0}
.js .tab-panel.is-active .phone-fan .phone:nth-child(2){transition-delay:.1s}.js .tab-panel.is-active .phone-fan .phone:nth-child(3){transition-delay:.2s}

/* ── worker app phones ────────────────────────────────────────────────── */
.phones{display:flex;gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;padding:20px var(--gut) 34px;scrollbar-width:none;max-width:1240px;margin:0 auto}
.phones::-webkit-scrollbar{display:none}
.phone-item{flex:0 0 62%;scroll-snap-align:center;text-align:center}
.phone-item .phone{will-change:transform}
.phone-item figcaption{margin-top:16px;font-size:14px;color:var(--ink2);line-height:1.4}
.phone-item figcaption b{display:block;color:var(--ink);font-size:15.5px}
@media (min-width:640px){.phone-item{flex-basis:38%}}
@media (min-width:1024px){.phones{overflow:visible;justify-content:center;padding-top:30px;padding-bottom:50px}.phone-item{flex:0 0 18%}.phone-item:nth-child(even){margin-top:56px}}
.mini-feats{display:grid;gap:12px;margin-top:20px}
@media (min-width:700px){.mini-feats{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1024px){.mini-feats{grid-template-columns:repeat(4,1fr)}}
.mini-feats li{display:flex;gap:12px;padding:16px;border-radius:var(--r);background:#fff;border:1px solid var(--ln);font-size:13.5px;color:var(--ink2);line-height:1.45}
.mini-feats b{display:block;color:var(--ink);font-size:14.5px}
.mini-feats svg{color:var(--ink);font-size:20px;margin-top:1px}

/* ── WhatsApp demo ────────────────────────────────────────────────────── */
.sec-glow{position:absolute;inset:0;pointer-events:none;background:radial-gradient(60% 50% at 85% 20%,rgba(138,138,138,.22),transparent 70%),radial-gradient(40% 40% at 10% 90%,rgba(37,211,102,.12),transparent 70%)}
.wa-grid{position:relative;display:grid;gap:44px;align-items:center}
@media (min-width:980px){.wa-grid{grid-template-columns:1fr 1fr;gap:72px}}
.wa-copy h2{margin:14px 0 16px}
.checks{display:grid;gap:12px;margin-top:24px}
.checks li{display:flex;gap:11px;align-items:flex-start;font-size:15.5px}
.checks svg{color:#fff;margin-top:3px}
.wa-demo{max-width:430px;width:100%;justify-self:center}
.wa-label{display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.6);margin-bottom:12px}
.chat{border-radius:26px;overflow:hidden;background:#0b141a;box-shadow:0 40px 80px -30px rgba(0,0,0,.8),0 0 0 1px rgba(255,255,255,.08)}
.chat-head{display:flex;align-items:center;gap:11px;padding:14px 16px;background:#1f2c34;color:#e9edef;font-size:14.5px}
.chat-head small{display:block;font-size:12px;color:#8696a0}
.chat-av{width:38px;height:38px;border-radius:99px;background:#0A0A0A;box-shadow:inset 0 0 0 1px rgba(255,255,255,.16);color:#fff;display:inline-flex;align-items:center;justify-content:center;font-weight:800}
.chat-body{display:flex;flex-direction:column;gap:8px;padding:18px 14px 20px;min-height:400px;background-color:#0b141a;background-image:radial-gradient(rgba(255,255,255,.035) 1px,transparent 1px);background-size:18px 18px}
.bub{position:relative;max-width:84%;padding:8px 11px 20px;border-radius:12px;font-size:14px;line-height:1.42;color:#e9edef;box-shadow:0 1px 1px rgba(0,0,0,.3)}
.bub time{position:absolute;right:9px;bottom:4px;font-size:10.5px;color:rgba(233,237,239,.55)}
.bub.me{align-self:flex-end;background:#005c4b;border-top-right-radius:4px}
.bub.bot{align-self:flex-start;background:#202c33;border-top-left-radius:4px}
.bub b{color:#fff}
.bub.typing{align-self:flex-start;background:#202c33;padding:12px 14px;display:flex;gap:4px}
.bub.typing i{width:7px;height:7px;border-radius:99px;background:#8696a0;animation:dots 1.2s infinite}
.bub.typing i:nth-child(2){animation-delay:.15s}.bub.typing i:nth-child(3){animation-delay:.3s}
@keyframes dots{0%,60%,100%{opacity:.35;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}}
.bub.voice{display:flex;align-items:center;gap:9px;min-width:230px;padding-bottom:20px}
.vplay{width:30px;height:30px;border-radius:99px;background:rgba(255,255,255,.14);display:inline-flex;align-items:center;justify-content:center;flex:none}
.wave{display:flex;align-items:center;gap:2px;height:26px;flex:1}
.wave i{display:block;width:3px;height:var(--h);border-radius:2px;background:rgba(233,237,239,.6);transform-origin:50% 50%}
.chat.is-playing .bub.voice.on .wave i{animation:wv .9s ease-in-out infinite alternate;animation-delay:calc(var(--h) * -0.02s)}
@keyframes wv{to{transform:scaleY(.45)}}
.vdur{font-size:11.5px;color:rgba(233,237,239,.7)}
.chip-sys{align-self:center;display:inline-flex;align-items:center;gap:7px;margin-top:4px;font-size:12.5px;font-weight:600;color:#c7f0d8;background:rgba(37,211,102,.12);border:1px solid rgba(37,211,102,.28);border-radius:99px;padding:6px 12px}
/* sequenced reveal (JS adds .seq to start hidden, .on per bubble) */
.chat.seq [data-b]{opacity:0;transform:translateY(10px) scale(.96);transition:opacity .35s var(--ease),transform .45s var(--ease)}
.chat.seq [data-b].on{opacity:1;transform:none}
.chat.seq .bub.typing{display:none}
.chat.seq .bub.typing.on{display:flex}
.chat:not(.seq) .bub.typing{display:none}

/* ── timeline ─────────────────────────────────────────────────────────── */
.day-grid{display:grid;gap:40px}
@media (min-width:980px){.day-grid{grid-template-columns:5fr 7fr;gap:72px}.day-head{position:sticky;top:120px;align-self:start}}
.day-head h2{margin:14px 0 14px}
.tl-wrap{position:relative}
.tl-line{position:absolute;left:21px;top:20px;bottom:20px;width:2px;background:var(--ln);border-radius:2px;overflow:hidden}
.tl-line i{display:block;width:100%;height:100%;background:linear-gradient(180deg,var(--p),var(--acc));transform-origin:50% 0;transform:scaleY(1)}
.js .tl-line i{transform:scaleY(0)}
.tl{display:grid;gap:16px}
.tl-item{position:relative;display:flex;gap:18px;align-items:flex-start}
.tl-dot{position:relative;z-index:1;width:44px;height:44px;flex:none;border-radius:99px;background:#fff;border:2px solid var(--ln);color:var(--ink3);display:inline-flex;align-items:center;justify-content:center;font-size:18px;transition:border-color .4s,color .4s,transform .5s var(--ease),box-shadow .4s}
.tl-item.is-on .tl-dot,html:not(.js) .tl-dot{border-color:var(--acc);color:var(--acc);transform:scale(1.06);box-shadow:0 0 0 6px var(--acc-s)}
.tl-card{flex:1;background:#fff;border:1px solid var(--ln);border-radius:var(--r-lg);padding:16px 18px;transition:box-shadow .4s,border-color .4s}
.tl-item.is-on .tl-card{box-shadow:var(--sh-md);border-color:transparent}
.tl-time{display:inline-block;font-size:12px;font-weight:800;letter-spacing:.06em;color:var(--acc);background:var(--acc-s);border-radius:6px;padding:2px 7px}
.tl-card h3{margin:8px 0 4px}
.tl-card p{font-size:14.5px;color:var(--ink2)}

/* ── compliance ───────────────────────────────────────────────────────── */
.split{display:grid;gap:44px;align-items:center}
@media (min-width:980px){.split{grid-template-columns:1fr 1fr;gap:72px}}
.split h2{margin:14px 0 16px}
.tier-list{display:grid;gap:12px;margin-top:26px}
.tier-list li{display:flex;flex-direction:column;align-items:flex-start;gap:6px;padding:14px 16px;border-radius:var(--r);background:#fff;border:1px solid var(--ln);font-size:14.5px;color:var(--ink)}
.exp{position:relative;background:#fff;border:1px solid var(--ln);border-radius:var(--r-lg);box-shadow:var(--sh-lg);padding:6px 0 10px}
.exp-h{display:flex;align-items:center;gap:9px;padding:14px 20px 12px;border-bottom:1px solid var(--ln2);font-size:14.5px}
.exp-h span{margin-left:auto;font-size:12.5px;color:var(--ink3)}
.exp-h svg{color:var(--ink3)}
.exp li{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) 72px;gap:14px;align-items:center;padding:13px 20px;border-top:1px solid var(--ln2)}
.exp li:first-child{border-top:0}
.exp-who b{display:block;font-size:14.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.exp-who small{font-size:12.5px;color:var(--ink3)}
.exp-bar{height:7px;border-radius:99px;background:var(--ln2);overflow:hidden}
.exp-bar i{display:block;height:100%;border-radius:inherit;transform-origin:0 50%;transform:scaleX(var(--w))}
.exp-bar i.bad{background:var(--bad)}.exp-bar i.warn{background:#d39a1e}.exp-bar i.good{background:var(--good)}
.exp-st{font-size:12.5px;font-weight:700;text-align:right;white-space:nowrap}
.exp-st.bad{color:var(--bad)}.exp-st.warn{color:var(--warn)}.exp-st.good{color:var(--good)}
.js .exp li{opacity:0;transform:translateY(8px);transition:opacity .45s var(--ease) var(--d,0ms),transform .6s var(--ease) var(--d,0ms)}
.js .exp .exp-bar i{transform:scaleX(0);transition:transform 1.1s var(--ease) calc(var(--d,0ms) + 150ms)}
.js .exp.in li{opacity:1;transform:none}
.js .exp.in .exp-bar i{transform:scaleX(var(--w))}
.exp-toast{position:absolute;right:-10px;bottom:-22px;display:inline-flex;align-items:center;gap:8px;background:var(--ink);color:#fff;font-size:13px;font-weight:600;border-radius:12px;padding:10px 14px;box-shadow:var(--sh-lg)}
.exp-toast svg{color:#ffd166}
.js .exp .exp-toast{opacity:0;transform:translateY(12px) scale(.95);transition:opacity .5s var(--ease) 1s,transform .7s var(--ease) 1s}
.js .exp.in .exp-toast{opacity:1;transform:none}
@media (max-width:520px){.exp li{grid-template-columns:minmax(0,1fr) 56px 64px;gap:10px;padding:12px 14px}.exp-h{padding:12px 14px}.exp-toast{right:8px}}

/* ── cards ────────────────────────────────────────────────────────────── */
.card{background:#fff;border:1px solid var(--ln);border-radius:var(--r-lg)}
.cards3{display:grid;gap:14px}
@media (min-width:640px){.cards3{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1000px){.cards3{grid-template-columns:repeat(3,1fr);gap:18px}}
.feat{padding:24px;transition:transform .45s var(--ease),box-shadow .45s var(--ease),border-color .3s}
.feat:hover{transform:translateY(-4px);box-shadow:var(--sh-md);border-color:transparent}
.feat h3{margin:16px 0 6px}
.feat p{font-size:14.5px;color:var(--ink2)}
.feat-ic{width:44px;height:44px;border-radius:12px;display:inline-flex;align-items:center;justify-content:center;background:var(--p-s);color:var(--p);font-size:20px;flex:none}

/* get started steps */
.start3{display:grid;gap:12px;margin-bottom:84px}
@media (min-width:900px){.start3{grid-template-columns:repeat(3,1fr);gap:18px}}
.start3 li{display:flex;gap:14px;padding:20px;border-radius:var(--r-lg);background:#fff;border:1px solid var(--ln);font-size:14px;color:var(--ink2);line-height:1.5}
.start3 b{display:block;color:var(--ink);font-size:16px;margin-bottom:3px}
.start-n{width:34px;height:34px;flex:none;border-radius:99px;background:var(--p);color:#fff;font-weight:800;display:inline-flex;align-items:center;justify-content:center}

/* ── plans ────────────────────────────────────────────────────────────── */
.plans{display:grid;gap:16px;align-items:stretch}
@media (min-width:700px){.plans{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1100px){.plans-3{grid-template-columns:repeat(3,1fr)}.plans-4{grid-template-columns:repeat(4,1fr)}}
.plan{--sx:50%;--sy:0%;position:relative;display:flex;flex-direction:column;background:#fff;border:1px solid var(--ln);border-radius:var(--r-lg);padding:26px 22px 22px;transition:transform .45s var(--ease),box-shadow .45s var(--ease),border-color .3s}
.plan::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:radial-gradient(420px circle at var(--sx) var(--sy),color-mix(in srgb,var(--p) 7%,transparent),transparent 45%);opacity:0;transition:opacity .3s}
.plan:hover{transform:translateY(-6px);box-shadow:var(--sh-lg);border-color:transparent}
.plan:hover::before{opacity:1}
.plan-featured{border:2px solid var(--ink);box-shadow:0 30px 60px -30px rgba(10,10,10,.45)}
@media (min-width:1100px){.plan-featured{transform:translateY(-10px)}.plan-featured:hover{transform:translateY(-16px)}}
.plan-badge{position:absolute;top:-13px;left:50%;transform:translateX(-50%);background:var(--acc);color:#fff;font-size:11.5px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;padding:5px 12px;border-radius:99px;white-space:nowrap;box-shadow:0 6px 16px -6px color-mix(in srgb,var(--acc) 80%,transparent)}
.plan-name{font-size:1.15rem}
.plan-price{margin-top:10px;display:flex;align-items:baseline;gap:4px;font-size:2.5rem;font-weight:800;letter-spacing:-.04em;line-height:1.05}
.plan-price small{font-size:14px;font-weight:600;color:var(--ink3);letter-spacing:0}
.plan-note{margin-top:6px;font-size:12.5px;color:var(--ink3)}
.plan-caps,.plan-list{display:grid;gap:9px;font-size:14px;align-content:start}
.plan-caps{margin-top:20px}
.plan-caps li,.plan-list li{display:flex;gap:9px;align-items:flex-start;line-height:1.4}
.plan-caps svg,.plan-list svg{color:var(--good);margin-top:1px}
.plan-sub{margin:18px 0 10px;padding-top:16px;border-top:1px solid var(--ln2);font-size:11.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--ink3)}
.plan-list{flex:1;color:var(--ink2)}
.plan-cta{margin-top:22px;width:100%}
.plan-dark{background:var(--dark);color:#fff;border-color:var(--dark)}
.plan-dark::before{background:radial-gradient(420px circle at var(--sx) var(--sy),rgba(255,255,255,.08),transparent 45%)}
.plan-dark .plan-note{color:rgba(255,255,255,.55)}
.plan-dark .plan-list{margin-top:20px;color:rgba(255,255,255,.8)}
.plan-dark .plan-list svg{color:#fff}

/* ── final CTA ────────────────────────────────────────────────────────── */
.sec-cta{padding:24px 0 96px;background:var(--paper)}
.cta-card{position:relative;overflow:hidden;isolation:isolate;border-radius:var(--r-xl);background:var(--dark);color:#fff;text-align:center;padding:72px 22px}
.cta-card .hero-bg{z-index:-1}
.cta-in{max-width:680px;margin:0 auto}
.cta-card p{margin-top:14px;color:rgba(255,255,255,.72);font-size:1.08rem}

/* ── footer ───────────────────────────────────────────────────────────── */
.foot{background:var(--dark);color:rgba(255,255,255,.66);font-size:14.5px}
.foot-grid{display:grid;grid-template-columns:1fr 1fr;gap:36px 20px;padding-top:64px;padding-bottom:48px}
.foot-brand{grid-column:1/-1}
@media (min-width:800px){.foot-grid{grid-template-columns:1.6fr 1fr 1fr 1fr}.foot-brand{grid-column:auto}}
.foot-brand p{margin:14px 0 18px;max-width:32ch;color:rgba(255,255,255,.55)}
.foot h2{font-size:12px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.45);margin-bottom:14px}
.foot ul{display:grid;gap:9px}
.foot a:not(.btn):not(.brand){text-decoration:none;color:rgba(255,255,255,.75)}
.foot a:not(.btn):not(.brand):hover{color:#fff}
.foot-base{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px;padding-top:20px;padding-bottom:28px;border-top:1px solid rgba(255,255,255,.09);font-size:12.5px;color:rgba(255,255,255,.45)}

/* ── page heroes (pricing / contact) ──────────────────────────────────── */
.phero{position:relative;isolation:isolate;background:var(--paper);overflow:hidden}
.phero .phero-bg{z-index:-1}
.phero .mesh.m1{opacity:.16}.phero .mesh.m2{opacity:.18}
.phero .gridlines-light{-webkit-mask-image:radial-gradient(ellipse 60% 70% at 50% 0%,#000 20%,transparent 75%);mask-image:radial-gradient(ellipse 60% 70% at 50% 0%,#000 20%,transparent 75%)}
.phero-in{padding:72px var(--gut) 56px;text-align:center;display:flex;flex-direction:column;align-items:center}
.phero-in h1{margin:16px 0 16px;max-width:16ch}
.phero-in .lead{margin:0 auto}
.notice{margin-bottom:18px;background:#fff;border:1px solid var(--ln);border-radius:var(--r);padding:18px;text-align:center;color:var(--ink2)}
.notice a{color:var(--p);font-weight:700}

/* comparison table */
.cmp-wrap{overflow-x:auto;border-radius:var(--r-lg);background:#fff;border:1px solid var(--ln);box-shadow:var(--sh-md)}
.cmp{width:100%;min-width:680px;border-collapse:collapse;font-size:14px}
.cmp th,.cmp td{padding:13px 16px;border-top:1px solid var(--ln2);text-align:center;vertical-align:middle}
.cmp thead th{border-top:0;padding-top:20px;padding-bottom:16px;font-size:15.5px;font-weight:800;color:var(--ink);background:#fff;position:sticky;top:0}
.cmp thead th small{display:block;font-size:10.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--acc);margin-top:3px}
.cmp tbody th{text-align:left;font-weight:600;color:var(--ink)}
.cmp th[scope=row],.cmp thead th:first-child{position:sticky;left:0;background:#fff;z-index:1;min-width:200px}
.cmp td{color:var(--ink2)}
.cmp .is-feat{background:#f7f7f5}
.cmp-group th{text-align:left!important;background:var(--sf2)!important;font-size:11.5px;font-weight:800!important;letter-spacing:.1em;text-transform:uppercase;color:var(--ink3)!important;padding-top:16px;padding-bottom:10px}
.cmp .ck{color:var(--good);font-size:18px}
.cmp .dash{color:#c3c7cd}
.addons{display:grid;gap:14px;margin-top:28px}
@media (min-width:900px){.addons{grid-template-columns:repeat(3,1fr)}}
.addon{display:flex;gap:14px;padding:20px}
.addon h3{font-size:1rem;margin-bottom:4px}
.addon p{font-size:14px;color:var(--ink2)}
.addon a{color:var(--p);font-weight:700}

/* FAQ accordion */
.faq{display:grid;gap:10px}
.faq-item{background:#fff;border:1px solid var(--ln);border-radius:var(--r);transition:box-shadow .3s,border-color .3s}
.faq-item.is-open{box-shadow:var(--sh-md);border-color:transparent}
.faq-item h3{font-size:1rem;margin:0}
.faq-item button{width:100%;display:flex;align-items:center;justify-content:space-between;gap:16px;text-align:left;background:none;border:0;padding:18px 20px;font-weight:700;color:var(--ink);cursor:pointer;border-radius:var(--r)}
.faq-ic{position:relative;width:26px;height:26px;flex:none;border-radius:99px;background:var(--bg);transition:background-color .3s,transform .4s var(--ease)}
.faq-ic::before,.faq-ic::after{content:"";position:absolute;left:50%;top:50%;width:11px;height:2px;margin:-1px 0 0 -5.5px;border-radius:2px;background:var(--ink);transition:transform .4s var(--ease)}
.faq-ic::after{transform:rotate(90deg)}
.faq-item.is-open .faq-ic{background:var(--ink);transform:rotate(180deg)}
.faq-item.is-open .faq-ic::before,.faq-item.is-open .faq-ic::after{background:#fff}
.faq-item.is-open .faq-ic::after{transform:rotate(0)}
.faq-a{display:grid;grid-template-rows:1fr}
.js .faq-a{grid-template-rows:0fr;transition:grid-template-rows .45s var(--ease)}
.js .faq-item.is-open .faq-a{grid-template-rows:1fr}
.faq-a>div{overflow:hidden}
.faq-a p{padding:0 20px 18px;color:var(--ink2);font-size:15px}
.js .faq-a p{opacity:0;transform:translateY(-4px);transition:opacity .3s,transform .4s var(--ease)}
.js .faq-item.is-open .faq-a p{opacity:1;transform:none;transition-delay:.08s}

/* contact */
.phero-contact{padding:0}
.contact-grid{display:grid;gap:36px;padding-top:64px;padding-bottom:96px;align-items:start}
@media (min-width:980px){.contact-grid{grid-template-columns:1fr 1fr;gap:64px;padding-top:96px}}
.contact-copy h1{margin:16px 0 16px}
.contact-list{display:grid;gap:14px;margin-top:30px}
.contact-list li{display:flex;gap:14px;align-items:center;font-size:15px;color:var(--ink)}
.contact-list small{display:block;font-size:12.5px;color:var(--ink3)}
.contact-list a:not(.link-arrow){color:var(--ink);font-weight:700;text-decoration:none}
.contact-list a:not(.link-arrow):hover{color:var(--p)}
.form-card{background:#fff;border:1px solid var(--ln);border-radius:var(--r-xl);box-shadow:var(--sh-lg);padding:28px 22px}
@media (min-width:640px){.form-card{padding:34px}}

/* ── forms ────────────────────────────────────────────────────────────── */
.form{display:grid;gap:16px}
.form-row2{display:grid;gap:16px}
@media (min-width:560px){.form-row2{grid-template-columns:1fr 1fr;gap:12px}}
.field{display:grid;gap:6px;min-width:0;border:0;margin:0;padding:0}
.field label,.field legend{font-size:13px;font-weight:600;color:var(--ink2);padding:0}
.opt{font-weight:400;color:var(--ink3)}
.field input,.field textarea{width:100%;font-size:15px;line-height:1.4;padding:12px 14px;border-radius:11px;border:1px solid #d5d8dd;background:#fff;color:var(--ink);transition:border-color .2s,box-shadow .2s}
.field textarea{resize:vertical;min-height:120px}
.field input::placeholder,.field textarea::placeholder{color:#9aa0a8}
.field input:hover,.field textarea:hover{border-color:#b9bec5}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--p);box-shadow:0 0 0 4px color-mix(in srgb,var(--p) 14%,transparent)}
.label-row{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.label-row a{font-size:13px;font-weight:600;color:var(--p);text-decoration:none}
.label-row a:hover{text-decoration:underline}
.pw{position:relative}
.pw input{padding-right:48px}
.pw button{position:absolute;right:4px;top:50%;transform:translateY(-50%);width:40px;height:40px;border:0;background:none;border-radius:9px;color:var(--ink3);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;font-size:19px}
.pw button:hover{color:var(--ink);background:var(--bg)}
.check{display:inline-flex;align-items:center;gap:9px;font-size:14px;color:var(--ink2);cursor:pointer;user-select:none}
.check input{width:18px;height:18px;accent-color:var(--p)}
.hint{font-size:12.5px;color:var(--ink3);line-height:1.5}
.hint a{color:var(--p);font-weight:600}
.alert{display:flex;gap:10px;align-items:flex-start;border-radius:12px;padding:12px 14px;font-size:14px;margin-bottom:16px;border:1px solid}
.alert svg{margin-top:2px}
.alert-good{background:var(--good-s);color:var(--good);border-color:#bfe3cc}
.alert-bad{background:var(--bad-s);color:#a30000;border-color:#f3c2c2}
.alert-warn{background:var(--warn-s);color:#7a4a05;border-color:#efd9a6}
.plan-pick{gap:8px}
.pick-grid{display:grid;gap:8px}
.pick-2{grid-template-columns:repeat(2,1fr)}.pick-3{grid-template-columns:repeat(3,1fr)}
.pick{position:relative;display:block;cursor:pointer}
.pick-card{position:relative;height:100%;display:flex;flex-direction:column;align-items:center;text-align:center;gap:2px;padding:14px 8px 12px;border-radius:13px;border:1.5px solid var(--ln);background:#fff;transition:border-color .2s,box-shadow .25s,transform .3s var(--ease)}
.pick:hover .pick-card{border-color:#c4c8ce;transform:translateY(-2px)}
.pick input:checked+.pick-card{border-color:var(--ink);box-shadow:0 0 0 4px rgba(10,10,10,.08)}
.pick input:focus-visible+.pick-card{outline:3px solid color-mix(in srgb,var(--p) 55%,transparent);outline-offset:2px}
.pick-name{font-size:14px;font-weight:700;color:var(--ink)}
.pick-price{font-size:17px;font-weight:800;color:var(--ink);letter-spacing:-.02em;margin:2px 0}
.pick-price small{font-size:11px;font-weight:600;color:var(--ink3)}
.pick-meta{font-size:11.5px;color:var(--ink3);line-height:1.35}
.pick-dot{position:absolute;top:7px;right:7px;width:18px;height:18px;border-radius:99px;background:var(--ink);color:#fff;font-size:11px;display:inline-flex;align-items:center;justify-content:center;opacity:0;transform:scale(.5);transition:opacity .2s,transform .3s var(--ease)}
.pick-dot svg{stroke-width:3}
.pick input:checked+.pick-card .pick-dot{opacity:1;transform:none}

/* ── auth pages (signup / shell login) ────────────────────────────────── */
.auth-page{background:var(--bg)}
.auth{min-height:100vh;min-height:100dvh;display:grid;align-content:start}
@media (max-width:1023px){.auth-has-bar{grid-template-rows:auto 1fr}.auth-main{align-items:flex-start;padding-top:32px}}
.auth-mticks{justify-content:flex-start;margin:-8px 0 22px;font-size:13px}
@media (min-width:1024px){.auth-mticks{display:none}.auth{align-content:stretch}}
@media (min-width:1024px){.auth{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.auth-has-bar{grid-template-rows:auto 1fr}.auth-has-bar .auth-bar{grid-column:1/-1}}
.auth-bar{display:flex;align-items:center;justify-content:space-between;gap:16px;height:60px;padding:0 var(--gut);background:#fff;border-bottom:1px solid var(--ln)}
.auth-bar nav{display:flex;align-items:center;gap:20px;font-size:14px;font-weight:600}
.auth-bar nav a{text-decoration:none;color:var(--ink2)}
.auth-bar nav a:hover{color:var(--ink)}
.auth-bar .back{display:inline-flex;align-items:center;gap:6px}
.hide-sm{display:none}
@media (min-width:640px){.hide-sm{display:inline}}
.auth-side{position:relative;isolation:isolate;overflow:hidden;background:var(--dark);color:#fff;display:none;flex-direction:column;justify-content:space-between;padding:48px 56px}
@media (min-width:1024px){.auth-side{display:flex}}
.auth-side .hero-bg{z-index:-1}
.auth-side .mesh.m1{opacity:.75}
.auth-side h1{font-size:clamp(2rem,1.2rem + 1.6vw,2.7rem);margin:40px 0 16px;max-width:17ch}
.auth-side .eyebrow+h1{margin-top:22px}
.auth-lead{color:rgba(255,255,255,.7);font-size:15.5px;max-width:52ch}
.auth-kicker{margin-top:34px;font-size:11.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.45)}
.auth-feats{display:grid;gap:14px;margin-top:18px;max-width:520px}
.auth-side .eyebrow~.auth-feats{margin-top:34px}
.auth-feats li{display:flex;gap:13px;font-size:13.5px;color:rgba(255,255,255,.62);line-height:1.45}
.auth-feats b{display:block;color:#fff;font-size:14.5px}
.af-ic{width:34px;height:34px;flex:none;border-radius:10px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);display:inline-flex;align-items:center;justify-content:center;color:#fff;font-size:16px}
.auth-ticks{justify-content:flex-start;margin-top:40px;font-size:12.5px}
.auth-main{display:flex;align-items:center;justify-content:center;padding:40px var(--gut) 56px}
.auth-box{width:100%;max-width:470px}
.auth-mbrand{margin-bottom:28px}
@media (min-width:1024px){.auth-mbrand{display:none}}
.auth-mlead{font-size:14.5px;color:var(--ink2);margin-bottom:18px}
@media (min-width:1024px){.auth-mlead{display:none}}
.auth-title{font-size:clamp(1.6rem,1.3rem + 1vw,2rem);letter-spacing:-.03em}
.auth-sub{margin:6px 0 24px;color:var(--ink2);font-size:15px}
.auth-foot{margin-top:4px;font-size:12.5px;color:var(--ink3);text-align:center}
.auth-foot a{color:var(--p);font-weight:600;text-decoration:none}
.auth-foot a:hover{text-decoration:underline}
.auth-new{margin:22px 0 18px;display:flex;align-items:center;justify-content:space-between;gap:14px;padding:16px;border-radius:14px;background:#fff;border:1px solid var(--ln)}
.auth-new b{display:block;font-size:14.5px}
.auth-new span{display:block;margin-top:2px;font-size:13px;color:var(--ink2);line-height:1.45}

/* ── legal pages (public layout, v2) ──────────────────────────────────── */
.pub{background:var(--paper)}
.pub-bar{background:var(--dark)}
.pub-bar-in{display:flex;align-items:center;height:68px}
.pub-bar .brand{color:#fff}
.pub-main{padding-top:40px;padding-bottom:40px}
.lg-doc{background:#fff;border:1px solid var(--ln);border-radius:var(--r-xl);box-shadow:var(--sh-md);padding:28px 22px;color:#333;line-height:1.7;font-size:15.5px;display:grid;gap:22px}
@media (min-width:700px){.lg-doc{padding:48px 56px}}
.lg-doc h1{font-size:clamp(1.8rem,1.4rem + 1.4vw,2.4rem);letter-spacing:-.035em;color:var(--ink)}
.lg-doc h2{font-size:1.15rem;letter-spacing:-.015em;color:var(--ink);margin-bottom:8px}
.lg-doc ul{display:grid;gap:8px}
.lg-doc ul li{position:relative;padding-left:20px}
.lg-doc ul li::before{content:"";position:absolute;left:3px;top:.72em;width:6px;height:6px;border-radius:99px;background:var(--ink3)}
.lg-doc a{color:var(--p);font-weight:600;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.lg-doc strong,.lg-b{font-weight:700;color:var(--ink)}
.lg-date{margin-top:6px;font-size:13px;color:var(--ink3)}
.lg-tag{margin-top:6px;font-size:14.5px;font-weight:600;color:var(--ink2)}
.lg-contact{padding-top:22px;border-top:1px solid var(--ln2);font-size:14.5px}
.lg-contact p+p{margin-top:2px}
.pub-foot{text-align:center;padding:12px var(--gut) 40px;font-size:13px;color:var(--ink3);display:grid;gap:8px}
.pub-links{display:flex;flex-wrap:wrap;justify-content:center;gap:4px 18px;font-weight:600}
.pub-links a,.pub-foot a{color:var(--ink2);text-decoration:none}
.pub-links a:hover,.pub-links a[aria-current]{color:var(--p)}
.pub-copy{font-size:12px;color:var(--ink3)}

/* ── scroll reveal (only when JS is running; content is visible without it) ── */
.js [data-rv]{opacity:0;transform:translateY(26px);transition:opacity .8s var(--ease),transform 1s var(--ease);transition-delay:var(--d,0ms)}
.js [data-rv=left]{transform:translateX(-30px)}
.js [data-rv=right]{transform:translateX(30px)}
.js [data-rv=scale]{transform:scale(.95)}
@media (max-width:899px){.js [data-rv=left],.js [data-rv=right]{transform:translateY(26px)}}
.js [data-rv].in{opacity:1;transform:none}
.js .plan[data-rv].in:hover{transform:translateY(-6px)}
@media (min-width:1100px){.js .plan-featured[data-rv].in{transform:translateY(-10px)}.js .plan-featured[data-rv].in:hover{transform:translateY(-16px)}}
.js .feat[data-rv].in:hover{transform:translateY(-4px)}

/* ── reduced motion: no movement, final states shown ──────────────────── */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;animation-delay:0s!important;transition-duration:.001ms!important;transition-delay:0s!important}
  .mesh,.marquee-track,.hs::after,.bub.typing i{animation:none!important}
  .marquee{-webkit-mask-image:none;mask-image:none}
  .marquee-track{width:auto;flex-wrap:wrap;justify-content:center}
  .marquee-row{flex-wrap:wrap;justify-content:center;padding:0 var(--gut)}
  .marquee-row[aria-hidden]{display:none}
  .js [data-rv],.js .ps-after li,.js .exp li,.js .exp .exp-toast{opacity:1!important;transform:none!important}
  .js .ps-before .strike{background-size:100% 1px}
  .js .exp .exp-bar i{transform:scaleX(var(--w))!important}
  .js .tl-line i{transform:scaleY(1)!important}
  .tl-item .tl-dot{border-color:var(--acc);color:var(--acc)}
  .chat.seq [data-b]{opacity:1;transform:none}
  .chat.seq .bub.typing{display:none!important}
  .fcard{animation:none!important}
}