*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;border-color:var(--border)}
img{max-width:100%}
:root{
  --radius:1rem;--ts:1;--blob:transparent;
  --background:oklch(0.13 0.012 40);--foreground:oklch(0.97 0.01 60);
  --card:oklch(0.17 0.018 40);
  --primary:oklch(0.74 0.19 50);--primary-fg:oklch(0.12 0.01 40);--primary-glow:oklch(0.82 0.18 65);
  --muted-fg:oklch(0.68 0.02 50);--accent:oklch(0.68 0.21 35);
  --border:oklch(0.27 0.025 45 / .6);
  --g-primary:linear-gradient(135deg,oklch(0.74 0.19 50),oklch(0.82 0.18 65));
  --g-ember:linear-gradient(135deg,oklch(0.68 0.21 35),oklch(0.74 0.19 50) 60%,oklch(0.85 0.16 75));
  --g-radial:radial-gradient(circle at 50% 0%,oklch(0.74 0.19 50 / .25),transparent 70%);
  --g-text:linear-gradient(135deg,oklch(0.98 0.01 60),oklch(0.82 0.18 65) 60%,oklch(0.74 0.19 50));
  --s-glow:0 0 60px -10px oklch(0.74 0.19 50 / .55);
  --s-ember:0 20px 60px -20px oklch(0.74 0.19 50 / .45),0 0 0 1px oklch(0.74 0.19 50 / .12) inset;
  --s-glass:0 8px 32px oklch(0 0 0 / .45),inset 0 1px 0 oklch(1 0 0 / .08);
  --glass-a:oklch(1 0 0 / .06);--glass-b:oklch(1 0 0 / .02);--glass-border:oklch(1 0 0 / .08);
  --grid-line:oklch(0.74 0.19 50 / .07);
  --font-d:"Space Grotesk",system-ui,sans-serif;--font-s:"Inter",system-ui,sans-serif;
}
html{color-scheme:dark;scroll-behavior:smooth}
html.light{
  color-scheme:light;--ts:.28;--blob:transparent;
  --background:#fff;--foreground:oklch(0.22 0.025 40);
  --card:oklch(1 0 0 / .88);
  --primary:oklch(0.67 0.19 47);--primary-fg:oklch(0.99 0.004 70);--primary-glow:oklch(0.76 0.17 62);
  --muted-fg:oklch(0.5 0.015 50);--accent:oklch(0.72 0.19 52);
  --border:oklch(0.91 0.01 60 / .85);
  --g-primary:linear-gradient(135deg,oklch(0.64 0.2 43),oklch(0.76 0.17 62));
  --g-ember:linear-gradient(135deg,oklch(0.63 0.2 38),oklch(0.7 0.19 50) 60%,oklch(0.8 0.16 70));
  --g-radial:radial-gradient(circle at 50% 0%,oklch(0.72 0.18 55 / .06),transparent 70%);
  --g-text:linear-gradient(135deg,oklch(0.32 0.075 40),oklch(0.65 0.2 43) 58%,oklch(0.76 0.17 62));
  --s-glow:0 0 40px -14px oklch(0.68 0.19 48 / .18);
  --s-ember:0 16px 40px -24px oklch(0.62 0.18 42 / .22),0 0 0 1px oklch(0.68 0.19 48 / .06) inset;
  --s-glass:0 14px 40px -24px oklch(0.3 0.01 50 / .16),inset 0 1px 0 oklch(1 0 0 / .95);
  --glass-a:oklch(1 0 0 / .82);--glass-b:oklch(0.99 0.003 65 / .75);--glass-border:oklch(0.92 0.008 60 / .85);
  --grid-line:oklch(0.65 0.18 48 / .035);
}
body{background:var(--background);color:var(--foreground);font-family:var(--font-s);-webkit-font-smoothing:antialiased;overflow-x:hidden;line-height:1.5}
h1,h2,h3,h4{font-family:var(--font-d);letter-spacing:-.02em}
a{text-decoration:none;color:inherit}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
svg.i{width:1em;height:1em;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}

/* utilities */
.glass{background:linear-gradient(135deg,var(--glass-a),var(--glass-b));backdrop-filter:blur(20px) saturate(140%);-webkit-backdrop-filter:blur(20px) saturate(140%);border:1px solid var(--glass-border);box-shadow:var(--s-glass)}
.glass-o,.hoverable:hover,details[open].hoverable{background:linear-gradient(135deg,color-mix(in oklab,var(--primary) calc(12% * var(--ts)),transparent),color-mix(in oklab,var(--primary) calc(2% * var(--ts)),transparent));backdrop-filter:blur(20px) saturate(160%);-webkit-backdrop-filter:blur(20px) saturate(160%);border:1px solid color-mix(in oklab,var(--primary) calc(25% * var(--ts)),transparent);box-shadow:0 8px 32px color-mix(in oklab,var(--primary) calc(15% * var(--ts)),transparent)}
.tg{background:var(--g-text);-webkit-background-clip:text;background-clip:text;color:transparent}
.muted{color:var(--muted-fg)}
.wrap{max-width:80rem;margin:0 auto;padding:0 1rem;width:100%}
@media(min-width:640px){.wrap{padding:0 1.5rem}}
.badge{display:inline-flex;align-items:center;gap:.5rem;border-radius:999px;padding:.375rem 1rem;font-size:.75rem;font-weight:500}
.dot{width:6px;height:6px;border-radius:50%;background:var(--primary)}
.pulse{animation:pulse 2s infinite}
.grid-bg{position:absolute;inset:0;background-image:linear-gradient(var(--grid-line) 1px,transparent 1px),linear-gradient(90deg,var(--grid-line) 1px,transparent 1px);background-size:56px 56px;-webkit-mask-image:radial-gradient(ellipse at center,#000 30%,transparent 75%);mask-image:radial-gradient(ellipse at center,#000 30%,transparent 75%)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;font-weight:600;transition:transform .3s,background .3s}
.btn-p{background:var(--g-primary);color:var(--primary-fg);box-shadow:var(--s-ember)}
.btn-p:hover{transform:scale(1.05)}
.blob{position:absolute;border-radius:50%;pointer-events:none}
html.light .blob{opacity:.55}
section{position:relative}
.sec{padding:3.5rem 0}@media(min-width:640px){.sec{padding:5rem 0}}
.head{text-align:center;max-width:42rem;margin:0 auto 4rem}
.head h2,.why h2{font-size:2.25rem;line-height:1.15;font-weight:700}
.head p{margin-top:1.25rem}
@media(min-width:640px){.head h2,.why h2{font-size:3rem}}
@media(min-width:1024px){.head h2{font-size:3.75rem}}
.head .badge{margin-bottom:1.25rem}
.ico{display:grid;place-items:center;flex-shrink:0;aspect-ratio:1/1;background:var(--g-primary);color:var(--primary-fg)}

@keyframes float{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-24px) rotate(3deg)}}
@keyframes glow{0%,100%{opacity:.55;filter:blur(40px)}50%{opacity:.9;filter:blur(60px)}}
@keyframes marquee{to{transform:translateX(-50%)}}
@keyframes fade-up{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:none}}
@keyframes tilt{0%,100%{transform:rotate(-1deg) scale(1)}50%{transform:rotate(1deg) scale(1.02)}}
@keyframes pulse{50%{opacity:.4}}
.float{animation:float 6s ease-in-out infinite}
.gl{animation:glow 3s ease-in-out infinite}

/* navbar */
header{position:fixed;top:0;left:0;right:0;z-index:50;padding:1.25rem 0;transition:padding .5s}
header.sc{padding:.75rem 0}
nav.bar{display:flex;align-items:center;justify-content:space-between;border-radius:1rem;padding:.75rem 1rem;transition:box-shadow .5s}
header.sc nav.bar{box-shadow:var(--s-ember)}
@media(min-width:640px){nav.bar{padding:.75rem 1.5rem}}
.logo{display:inline-flex;align-items:center;text-decoration:none}
.logo-img,img.logo-img{height:48px!important;width:auto!important;max-width:180px!important;max-height:54px!important;object-fit:contain!important;border-radius:0!important;flex-shrink:0!important;box-shadow:none!important;background:transparent;padding:0}
.logo-for-light{display:none!important}
.logo-for-dark{display:block!important}
html.light .logo-for-light{display:block!important}
html.light .logo-for-dark{display:none!important}
footer .logo-img,footer img.logo-img{height:32px!important;max-width:120px!important;max-height:36px!important}
.logo .m{position:relative;width:2.25rem;height:2.25rem}
.logo .m i{position:absolute;inset:0;background:var(--g-primary);border-radius:.75rem;transform:rotate(6deg);box-shadow:var(--s-glow);transition:transform .5s}
.logo:hover .m i{transform:rotate(12deg)}
.logo .m b{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-family:var(--font-d);font-size:1.125rem;color:var(--primary-fg)}
.logo span{font-family:var(--font-d);font-size:1.25rem;font-weight:700;letter-spacing:-.02em}
.links{display:none;gap:.25rem}
.links a{padding:.5rem 1rem;border-radius:.5rem;font-size:.875rem;color:var(--muted-fg);transition:.2s}
.links a:hover{color:var(--foreground);background:color-mix(in oklab,var(--foreground) 5%,transparent)}
.right{display:none;align-items:center;gap:.75rem}
.theme{width:2.5rem;height:2.5rem;border-radius:.75rem;border:1px solid var(--border);background:color-mix(in oklab,var(--background) 50%,transparent);display:grid;place-items:center;font-size:1.1rem}
.theme:hover{background:color-mix(in oklab,var(--primary) calc(10% * var(--ts)),transparent);color:var(--primary)}
.nav-cta{padding:.625rem 1.25rem;border-radius:.75rem;font-size:.875rem}
.burger{width:2.5rem;height:2.5rem;font-size:1.25rem;display:grid;place-items:center;border-radius:.5rem}
@media(min-width:768px){.links,.right{display:flex}.burger{display:none}}
#mob{display:none;margin-top:.5rem;border-radius:1rem;padding:1rem;flex-direction:column;gap:.25rem;animation:fade-up .8s ease-out}
#mob.open{display:flex}
#mob a,#mob button{padding:.75rem 1rem;border-radius:.5rem;font-size:.875rem;text-align:left}
@media(min-width:768px){#mob.open{display:none}}

/* hero */
.hero{min-height:100vh;display:flex;align-items:center;padding:8rem 0 7rem;overflow:hidden}
.hero .bg{position:absolute;inset:0;z-index:-1}
.hero .bg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hb-d{opacity:.4}.hb-l{display:none}
html.light .hb-d{display:none}html.light .hb-l{display:block}
.hero .ov{position:absolute;inset:0;background:linear-gradient(to bottom,color-mix(in oklab,var(--background) 60%,transparent),color-mix(in oklab,var(--background) 80%,transparent),var(--background))}
.hgrid{display:grid;gap:3rem;align-items:center}
@media(min-width:1024px){.hgrid{grid-template-columns:1.1fr 1fr;gap:2rem}}
.hero h1{font-size:3rem;line-height:1.05;font-weight:700;letter-spacing:-.02em}
@media(min-width:640px){.hero h1{font-size:3.75rem}}
@media(min-width:1024px){.hero h1{font-size:4.5rem}}
.hero .lead{margin-top:1.5rem;font-size:1.125rem;max-width:36rem;line-height:1.7}
.hero .copy{position:relative;z-index:10;animation:fade-up .8s ease-out both}
.hero .badge{margin-bottom:1.5rem}
.cta-row{margin-top:2rem;display:flex;flex-wrap:wrap;align-items:center;gap:1rem}
.cta-row .btn-p{padding:1rem 1.75rem;border-radius:1rem}
.cta-row .btn-p svg{transition:transform .3s}.cta-row .btn-p:hover svg{transform:translateX(4px)}
.demo{display:inline-flex;align-items:center;gap:.5rem;padding:1rem 1.5rem 1rem 1.5rem;border-radius:1rem;font-size:.875rem;font-weight:500;transition:.3s}
.demo span{width:2rem;height:2rem;border-radius:50%;display:grid;place-items:center;background:var(--g-primary);box-shadow:var(--s-glow);color:var(--primary-fg);font-size:.8rem}
.demo svg{fill:currentColor;margin-left:2px}
.stats{margin-top:3rem;display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;max-width:28rem}
.stats b{display:block;font-family:var(--font-d);font-size:1.5rem}
@media(min-width:640px){.stats b{font-size:1.875rem}}
.stats small{display:block;font-size:.75rem;margin-top:.25rem}
.visual{position:relative;height:420px;display:flex;align-items:center;justify-content:center;perspective:1200px}
@media(min-width:640px){.visual{height:520px}}@media(min-width:1024px){.visual{height:600px}}
.tilt3d{position:relative;width:100%;height:100%;display:flex;align-items:center;justify-content:center;transform:translate3d(var(--mx,0),var(--my,0),0) rotateX(var(--rx,0)) rotateY(var(--ry,0));transition:transform .2s ease-out}
.visual .halo{position:absolute;inset:2.5rem;background:var(--g-primary);opacity:.08;filter:blur(80px);border-radius:50%}
html.light .visual .halo{animation:none;opacity:.07;filter:blur(90px)}
.orb{position:relative;z-index:2;display:block;width:115%;max-width:640px;height:auto;aspect-ratio:1/1;object-fit:contain;filter:drop-shadow(0 0 40px rgba(240,120,32,.14)) drop-shadow(0 20px 40px rgba(0,0,0,.45))}
.orb-l{display:none}
html.light .orb-d{display:none}html.light .orb-l{display:block;filter:drop-shadow(0 24px 40px rgba(160,60,10,.08))}
@media(max-width:768px){.orb{max-width:300px;width:90%}.visual{height:340px!important}}
.chip{position:absolute;border-radius:.75rem;padding:.5rem .75rem;font-size:.75rem;z-index:5}
.chip small{display:block;font-size:10px;color:var(--muted-fg)}
.c1{top:5rem;left:0}.c1 .v{color:var(--primary);font-family:var(--font-d);font-weight:500}
.c2{bottom:7rem;right:.25rem}.c2 div{display:flex;align-items:center;gap:.5rem;font-weight:500}
.c2 i{width:8px;height:8px;border-radius:50%;background:var(--primary);box-shadow:var(--s-glow)}
.marq{position:absolute;bottom:0;left:0;right:0;overflow:hidden;border-top:1px solid color-mix(in oklab,var(--border) 40%,transparent);border-bottom:1px solid color-mix(in oklab,var(--border) 40%,transparent);padding:1rem 0;background:color-mix(in oklab,var(--background) 40%,transparent);backdrop-filter:blur(12px)}
.marq div{display:flex;width:max-content;gap:3rem;white-space:nowrap;font-size:.875rem;text-transform:uppercase;letter-spacing:.3em;color:color-mix(in oklab,var(--muted-fg) 70%,transparent);animation:marquee 30s linear infinite}
.marq .st{color:var(--primary)}

/* features */
.fgrid{display:grid;gap:1.25rem}
/* platform bento */
.bento{display:grid;gap:1rem;grid-template-columns:1fr;grid-auto-flow:dense}
@media(min-width:700px){.bento{grid-template-columns:repeat(2,1fr)}}
@media(min-width:700px) and (max-width:1023px){.bt.w2{grid-column:span 2}}
@media(min-width:1024px){.bento{grid-template-columns:repeat(4,1fr);grid-template-areas:"w w a a" "s p a a" "m f f d" "n n c c";grid-auto-rows:minmax(14.5rem,auto)}.bt{grid-area:var(--ga)}}
.bt{position:relative;display:flex;flex-direction:column;padding:1.5rem;border-radius:1.75rem;overflow:hidden;transition:transform .4s,border-color .4s}
.bt::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .4s;background:radial-gradient(380px circle at var(--x,50%) var(--y,0%),color-mix(in oklab,var(--primary) calc(20% * var(--ts)),transparent),transparent 45%)}
.bt:hover{transform:translateY(-4px);border-color:color-mix(in oklab,var(--primary) calc(55% * var(--ts)),var(--border))}
.bt:hover::before{opacity:1}
.bt>*{position:relative;z-index:1}
.bt .top{display:flex;align-items:center;gap:.75rem}
.bt .ico{width:2.5rem;height:2.5rem;border-radius:.85rem;font-size:1.1rem;box-shadow:var(--s-ember)}
.bt h3{font-size:1.15rem;font-weight:600}
.bt p{margin-top:.75rem;font-size:.875rem;line-height:1.65;max-width:32rem}
.bt .viz{margin-top:auto;padding-top:1.25rem;display:flex;flex-direction:column;gap:.6rem}
.av5{display:flex;flex-wrap:nowrap;align-items:center}.av5 i{width:2.1rem;height:2.1rem;border-radius:50%;display:grid;place-items:center;font-style:normal;font-size:.65rem;font-weight:600;background:var(--g-primary);color:var(--primary-fg);border:2px solid var(--background);margin-left:-.3rem}
.av5 i:first-child{margin-left:0}.av5 i.xtra{width:auto;padding:0 .55rem;border-radius:999px;margin-left:.35rem;background:color-mix(in oklab,var(--primary) calc(14% * var(--ts)),var(--background));color:var(--primary)}
.vs{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap}.vs small{font-size:.72rem}
.tagp{display:inline-flex;font-size:.7rem;font-weight:600;padding:.2rem .6rem;border-radius:999px;background:color-mix(in oklab,var(--primary) calc(14% * var(--ts)),transparent);color:var(--primary)}
.pl div{display:flex;align-items:center;gap:.6rem;font-size:.72rem;margin-top:.45rem}.pl em{font-style:normal;width:4.2rem;color:var(--muted-fg)}
.pl b{flex:1;height:6px;border-radius:9px;background:color-mix(in oklab,var(--primary) calc(14% * var(--ts)),transparent);overflow:hidden}.pl b i{display:block;height:100%;width:var(--w);background:var(--g-primary);border-radius:inherit}
.fl2{display:flex;align-items:center;gap:.4rem;color:var(--muted-fg);font-size:.8rem}
.fl2 span{padding:.3rem .65rem;border-radius:.6rem;border:1px solid var(--border);font-size:.72rem;font-weight:600;color:var(--foreground);background:color-mix(in oklab,var(--primary) calc(6% * var(--ts)),transparent);transition:.3s}
.bt:hover .fl2 span{border-color:color-mix(in oklab,var(--primary) calc(50% * var(--ts)),var(--border))}
.stpr{display:flex;align-items:center;justify-content:space-between;gap:.75rem;flex-wrap:wrap}
.stp{transform:rotate(-5deg);border:2px solid var(--primary);color:var(--primary);padding:.2rem .6rem;border-radius:.4rem;font-weight:700;font-size:.7rem;letter-spacing:.05em}
.bc{display:flex;align-items:flex-end;gap:.35rem;height:3.5rem}.bc i{flex:1;height:var(--h);border-radius:.3rem .3rem 0 0;background:var(--g-primary);opacity:.85;transform-origin:bottom;transition:transform .4s}
.bt:hover .bc i{transform:scaleY(1.12)}.bt:hover .bc i:nth-child(even){transform:scaleY(.9)}
.bb{font-size:.78rem;line-height:1.4;padding:.5rem .8rem;border-radius:1rem;max-width:88%}
.bb.u{align-self:flex-end;background:var(--g-primary);color:var(--primary-fg);border-bottom-right-radius:.3rem}
.bb.a{background:color-mix(in oklab,var(--primary) calc(9% * var(--ts)),transparent);border:1px solid var(--border);border-bottom-left-radius:.3rem}
.bt.btai{color:#fff6ee;border-color:rgba(255,150,60,.4);background:radial-gradient(120% 70% at 100% 0%,rgba(255,140,40,.38),transparent 60%),linear-gradient(160deg,#2e1409,#150905)}
.bt.btai::after{content:"";position:absolute;z-index:0;right:-5rem;top:20%;width:24rem;height:24rem;border-radius:50%;pointer-events:none;background:repeating-radial-gradient(circle,rgba(255,170,80,.22) 0 1px,transparent 1px 24px);-webkit-mask:radial-gradient(circle,#000 10%,transparent 68%);mask:radial-gradient(circle,#000 10%,transparent 68%)}
.bt.btai h3{font-size:1.6rem;line-height:1.1}.bt.btai p{color:rgba(255,236,220,.74)}.bt.btai .ico{width:3rem;height:3rem;font-size:1.3rem}
.bt.btai .bb.a{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.14);color:#fff6ee}
.bt.btai .tagp{background:rgba(255,160,70,.18);color:#ffb870}
.dots{display:flex;gap:.25rem;padding:.35rem 0 0 .3rem}.dots i{width:6px;height:6px;border-radius:50%;background:#ffb870;animation:bl 1.2s infinite}.dots i:nth-child(2){animation-delay:.2s}.dots i:nth-child(3){animation-delay:.4s}

/* Light mode overrides for Theka AI bento card */
html.light .bt.btai,
.light .bt.btai{color:var(--foreground);border-color:rgba(246,129,4,.22);background:radial-gradient(120% 70% at 100% 0%,rgba(246,129,4,.08),transparent 60%),linear-gradient(160deg,#ffffff,#fffaf5);box-shadow:var(--s-glass),0 14px 34px -18px rgba(246,129,4,.16)}
html.light .bt.btai:hover,
.light .bt.btai:hover{border-color:rgba(246,129,4,.45);box-shadow:var(--s-glass),0 20px 42px -16px rgba(246,129,4,.25)}
html.light .bt.btai::after,
.light .bt.btai::after{background:repeating-radial-gradient(circle,rgba(234,88,12,.14) 0 1px,transparent 1px 24px);-webkit-mask:radial-gradient(circle,#000 10%,transparent 68%);mask:radial-gradient(circle,#000 10%,transparent 68%)}
html.light .bt.btai h3,
.light .bt.btai h3{color:var(--foreground)}
html.light .bt.btai p,
.light .bt.btai p{color:var(--muted-fg)}
html.light .bt.btai .bb.a,
.light .bt.btai .bb.a{background:#ffffff;border-color:oklch(0.9 0.01 60 / .9);color:var(--foreground);box-shadow:0 4px 14px -3px rgba(15,23,42,.07)}
html.light .bt.btai .tagp,
.light .bt.btai .tagp{background:rgba(246,129,4,.12);color:#b45309}
html.light .dots i,
.light .dots i{background:var(--primary)}
@keyframes bl{0%,80%,100%{opacity:.25}40%{opacity:1}}
@media(prefers-reduced-motion:reduce){.dots i{animation:none}.bt,.bc i{transition:none}}

@media(min-width:640px){.fgrid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1024px){.fgrid{grid-template-columns:repeat(3,1fr)}}
.fc{position:relative;border-radius:1.5rem;padding:1.5rem;overflow:hidden;transition:all .5s}
.fc .hv{position:absolute;inset:-1px;border-radius:1.5rem;opacity:0;transition:opacity .5s;pointer-events:none;background:radial-gradient(400px circle at var(--x,50%) var(--y,50%),color-mix(in oklab,var(--primary) calc(18% * var(--ts)),transparent),transparent 40%)}
.fc:hover .hv{opacity:1}
.fc .row{position:relative;display:flex;gap:1rem;align-items:flex-start}
.fc .ico{width:3rem;height:3rem;border-radius:1rem;font-size:1.25rem;box-shadow:var(--s-ember);transition:transform .5s}
.fc:hover .ico{transform:scale(1.1) rotate(6deg)}
.fc h3{font-size:1.125rem;font-weight:600}
.fc p{margin-top:.375rem;font-size:.875rem;line-height:1.6}
.fc .cd{position:absolute;top:.75rem;right:.75rem;width:6px;height:6px;border-radius:50%;background:color-mix(in oklab,var(--primary) calc(40% * var(--ts)),transparent);transition:.3s}
.fc:hover .cd{background:var(--primary);box-shadow:var(--s-glow)}

/* why */
.why-grid{display:grid;gap:3rem;align-items:center}
@media(min-width:1024px){.why-grid{grid-template-columns:1fr 1.1fr;gap:4rem}}
.dash-wrap{position:relative}
.dash{border-radius:1.5rem;padding:4px;background:var(--g-ember);box-shadow:var(--s-ember)}
.dash>div{border-radius:1.4rem;background:var(--card);padding:1.5rem;overflow:hidden}
@media(min-width:640px){.dash>div{padding:2rem}}
.dash .top{display:flex;justify-content:space-between;align-items:center;margin-bottom:1.5rem}
.dash .top small{font-size:.75rem;text-transform:uppercase;letter-spacing:.1em}
.dash .top h4{font-size:1.5rem;font-weight:700;margin-top:.25rem}
.live{padding:.25rem .75rem;font-size:.75rem;font-weight:600;color:var(--primary);border-radius:999px}
.mgrid{display:grid;grid-template-columns:1fr 1fr;gap:.75rem;margin-bottom:1.25rem}
.m{border-radius:1rem;padding:1rem}
.m small{font-size:10px;text-transform:uppercase;letter-spacing:.05em;display:block}
.m b{display:block;font-family:var(--font-d);font-size:1.5rem;margin-top:.25rem}
.m em{font-style:normal;font-size:10px;color:var(--primary)}
.chart{border-radius:1rem;padding:1rem}
.bars{display:flex;align-items:flex-end;justify-content:space-between;gap:6px;height:6rem}
.bars i{flex:1;border-radius:6px 6px 0 0;background:linear-gradient(to top,color-mix(in oklab,var(--primary) calc(30% * var(--ts)),transparent),var(--primary));box-shadow:var(--s-glow);animation:fade-up .6s ease-out both}
.days{display:flex;justify-content:space-between;margin-top:.5rem;font-size:10px}
.insight{position:absolute;bottom:-1.5rem;left:-1.5rem;border-radius:1rem;padding:1rem;display:none;animation:float 6s ease-in-out infinite}
.insight small{font-size:.75rem}.insight div{font-size:.875rem;font-weight:500;margin-top:.25rem}
@media(min-width:640px){.insight{display:block}}
.why .badge{margin-bottom:1.25rem}
.why .lead{margin-top:1.25rem;font-size:1.125rem}
.sgrid{margin-top:2.5rem;display:grid;gap:1rem}
@media(min-width:640px){.sgrid{grid-template-columns:1fr 1fr}}
.sc-card{border-radius:1rem;padding:1.25rem;transition:.3s}
.sc-card .ico{width:2.5rem;height:2.5rem;border-radius:.75rem;box-shadow:var(--s-glow);margin-bottom:.75rem}
.sc-card b{font-family:var(--font-d);font-weight:600;display:block}
.sc-card p{font-size:.875rem;margin-top:.25rem}

/* pricing */
.pgrid{display:grid;gap:1.5rem;align-items:stretch}
@media(min-width:768px){.pgrid{grid-template-columns:repeat(3,1fr)}}
.plan{position:relative;border-radius:1.5rem;padding:2rem;display:flex;flex-direction:column;transition:.5s}
.hl{position:relative}
.hl .glow{position:absolute;inset:-2px;background:var(--g-ember);border-radius:1.5rem;filter:blur(6px);opacity:.7;transition:opacity .3s;animation:tilt 8s ease-in-out infinite}
.hl:hover .glow{opacity:1}
.hl .o{position:relative;border-radius:1.5rem;background:var(--card);padding:4px;box-shadow:var(--s-ember);height:100%}
.hl .plan{border-radius:1.4rem;background:var(--card);height:100%}
.badge-pop{position:absolute;top:-.75rem;left:50%;transform:translateX(-50%);background:var(--g-primary);color:var(--primary-fg);font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.1em;padding:.25rem .75rem;border-radius:999px;box-shadow:var(--s-glow);white-space:nowrap}
.plan .ph{display:flex;align-items:center;gap:.75rem;margin-bottom:1.25rem}
.plan .pi{flex-shrink:0;width:2.75rem;height:2.75rem;border-radius:1rem;font-size:1.25rem;display:grid;place-items:center;color:var(--primary)}
.hl .pi{background:var(--g-primary);color:var(--primary-fg);box-shadow:var(--s-glow)}
.plan .pn{font-family:var(--font-d);font-size:1.25rem;font-weight:700}
.plan .pd{font-size:.875rem;min-height:2.5rem}
.price{margin-top:1.5rem;display:flex;align-items:baseline;gap:.25rem}
.price b{font-family:var(--font-d);font-size:3rem;font-weight:700;line-height:1.1}
.price span{font-size:.875rem}
.sep{margin:1.5rem 0;height:1px;background:linear-gradient(to right,transparent,var(--border),transparent)}
.plan ul{list-style:none;flex:1;display:flex;flex-direction:column;gap:.75rem}
.plan li{display:flex;gap:.75rem;font-size:.875rem;align-items:flex-start}
.plan li i{margin-top:2px;width:1.25rem;height:1.25rem;border-radius:50%;display:grid;place-items:center;background:color-mix(in oklab,var(--primary) calc(15% * var(--ts)),transparent);color:var(--primary);font-size:.75rem}
.plan li i svg{stroke-width:3}
.hl li i{background:var(--g-primary);color:var(--primary-fg);box-shadow:var(--s-glow)}
.plan .pb{margin-top:2rem;padding:.875rem 1.25rem;border-radius:1rem;font-size:.875rem;font-weight:600}
.hl .pb{background:var(--g-primary);color:var(--primary-fg);box-shadow:var(--s-ember)}
.hl .pb:hover{transform:scale(1.03)}
.note{margin-top:3rem;text-align:center;font-size:.75rem}

/* faq */
.faq{max-width:56rem;margin:0 auto;padding:0 1rem;position:relative}
details{border-radius:1rem;margin-bottom:1rem;overflow:hidden;transition:.5s}
details[open].hoverable{box-shadow:var(--s-ember)}
summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1.25rem 1.25rem;font-family:var(--font-d);font-weight:600;font-size:1rem}
@media(min-width:640px){summary{padding:1.25rem 1.5rem;font-size:1.125rem}}
summary::-webkit-details-marker{display:none}
summary .q{display:flex;align-items:center;gap:1rem}
summary .n{width:2rem;height:2rem;border-radius:.5rem;display:grid;place-items:center;font-size:.75rem;font-family:ui-monospace,monospace;color:var(--primary);flex-shrink:0;background:color-mix(in oklab,var(--primary) calc(12% * var(--ts)),transparent);border:1px solid color-mix(in oklab,var(--primary) calc(25% * var(--ts)),transparent)}
summary svg{color:var(--primary);font-size:1.25rem;transition:transform .3s}
details[open] summary svg{transform:rotate(180deg)}
details p{padding:0 1.5rem 1.5rem 4.25rem;font-size:.9rem;line-height:1.7}
.more{margin-top:3rem;text-align:center;font-size:.875rem}
.more a{color:var(--primary);font-weight:500}

/* cta */
.cta-o{max-width:64rem;margin:0 auto;padding:0 1rem}
.cta-b{border-radius:2rem;padding:4px;background:var(--g-ember);box-shadow:var(--s-ember)}
.cta-i{position:relative;border-radius:1.85rem;background:var(--card);padding:2.5rem 1.5rem;text-align:center;overflow:hidden}
@media(min-width:640px){.cta-i{padding:4rem}}
html.light .cta-i{background:#FEF5EE}
.cta-i h2{font-size:2.25rem;line-height:1.15;font-weight:700}
@media(min-width:640px){.cta-i h2{font-size:3rem}}@media(min-width:1024px){.cta-i h2{font-size:3.75rem}}
.cta-i p.l{margin:1.25rem auto 0;max-width:36rem}
form{margin:2rem auto 0;display:flex;flex-direction:column;gap:.75rem;max-width:28rem}
@media(min-width:640px){form{flex-direction:row}}
form input{flex:1;padding:1rem 1.25rem;border-radius:1rem;outline:none;font:inherit;font-size:.875rem;color:var(--foreground);transition:.3s}
form input::placeholder{color:var(--muted-fg)}
form input:focus{border-color:color-mix(in oklab,var(--primary) calc(50% * var(--ts)),transparent)}
form button{padding:1rem 1.5rem;border-radius:1rem}
.trust{margin-top:1.5rem;font-size:.75rem}

footer{border-top:1px solid color-mix(in oklab,var(--border) 40%,transparent);padding:2.5rem 0}
footer .wrap{display:flex;flex-direction:column;align-items:center;justify-content:space-between;gap:1rem}
@media(min-width:640px){footer .wrap{flex-direction:row}}
footer .l{display:flex;align-items:center;gap:.5rem}
footer .l i{width:1.75rem;height:1.75rem;background:var(--g-primary);border-radius:.5rem;box-shadow:var(--s-glow)}
footer .l b{font-family:var(--font-d)}
footer .l small{font-size:.75rem;margin-left:.5rem}
footer .r{display:flex;gap:1.5rem;font-size:.75rem}
footer .r a:hover{color:var(--foreground)}
@media(prefers-reduced-motion:reduce){*{animation:none!important}}

/* v2 additions */
.hero h1{font-size:2.9rem}@media(min-width:640px){.hero h1{font-size:3.75rem}}@media(min-width:1024px){.hero h1{font-size:4.25rem}}
.hero .fine{margin-top:1rem;font-size:.8rem}
.glance{margin-top:2.25rem;display:grid;gap:.75rem;max-width:38rem}
@media(min-width:640px){.glance{grid-template-columns:repeat(3,1fr)}}
.glance div{border-radius:1rem;padding:.9rem 1rem}
.glance b{display:block;font-family:var(--font-d);font-size:.95rem}
.glance small{display:block;margin-top:.2rem;font-size:.75rem;line-height:1.45}
.fc.acc{background:var(--g-ember);border:0;color:var(--primary-fg);box-shadow:var(--s-ember)}
.fc.acc h3{font-size:1.25rem;line-height:1.3}.fc.acc p{color:inherit;opacity:.9}
@media(min-width:1024px){.fc.span2{grid-column:span 2}}
.cmp{border-radius:1.5rem;overflow:hidden}
.cmp .r{display:grid;grid-template-columns:1fr 1fr;gap:1rem;padding:.7rem 1.25rem;border-top:1px solid var(--border);font-size:.85rem;align-items:center}
.cmp .r.h{border:0;font-size:.7rem;text-transform:uppercase;letter-spacing:.12em;font-weight:600;padding-top:1.1rem;color:var(--muted-fg)}
.cmp .r.h span:last-child{color:var(--primary)}
.cmp .r span:first-child{color:var(--muted-fg)}
.cmp .r span:last-child{font-weight:500;display:flex;gap:.5rem;align-items:center}
.cmp .r span:last-child i,.ck i{width:1.25rem;height:1.25rem;border-radius:50%;display:grid;place-items:center;background:var(--g-primary);color:var(--primary-fg);font-size:.7rem;flex-shrink:0}
.cmp .r span:last-child svg,.ck svg{stroke-width:3}
.checks{margin-top:2rem;display:grid;gap:.6rem}
@media(min-width:640px){.checks{grid-template-columns:1fr 1fr}}
.ck{display:flex;gap:.65rem;align-items:center;padding:.7rem .9rem;border-radius:.9rem;font-size:.85rem;font-weight:500}
.steps{display:grid;gap:1.25rem}
@media(min-width:640px){.steps{grid-template-columns:1fr 1fr}}@media(min-width:1024px){.steps{grid-template-columns:repeat(4,1fr)}}
.step{position:relative;border-radius:1.5rem;padding:1.75rem;overflow:hidden}
.step .num{font-family:var(--font-d);font-size:3.5rem;font-weight:700;line-height:1;margin-bottom:.75rem;opacity:.95}
.step h3{font-size:1.1rem;font-weight:600}.step p{margin-top:.5rem;font-size:.875rem;line-height:1.6}
.mobc{margin-top:1.5rem;border-radius:1.75rem;padding:2rem;display:grid;gap:1.5rem;align-items:center}
@media(min-width:1024px){.mobc{grid-template-columns:1fr 1.3fr;padding:2.5rem}}
.mobc h3{font-size:1.75rem;line-height:1.2;font-weight:700}
.mobc p{margin-top:.75rem;font-size:.95rem}
.pills{display:flex;flex-wrap:wrap;gap:.5rem}
.pill{display:inline-flex;align-items:center;gap:.4rem;padding:.45rem .85rem;border-radius:999px;font-size:.8rem;font-weight:500}
.pill i{color:var(--primary);display:grid}
.ai{display:grid;gap:2.5rem;align-items:center}
@media(min-width:1024px){.ai{grid-template-columns:1fr 1.05fr;gap:4rem}}
.chatw{border-radius:1.75rem;padding:4px;background:var(--g-ember);box-shadow:var(--s-ember)}
.chatw>div{border-radius:1.65rem;background:var(--card);padding:1.25rem}
.chatw .th{display:flex;align-items:center;gap:.75rem;padding-bottom:1rem;border-bottom:1px solid var(--border)}
.chatw .th .ico{width:2.5rem;height:2.5rem;border-radius:.8rem;font-size:1.1rem}
.chatw .th b{font-family:var(--font-d)}.chatw .th small{display:flex;align-items:center;gap:.35rem;font-size:.7rem;color:var(--muted-fg)}
.msgs{display:flex;flex-direction:column;gap:.75rem;padding:1.25rem 0}
.bub{padding:.75rem 1rem;border-radius:1rem;font-size:.85rem;max-width:88%;line-height:1.55}
.bub.u{align-self:flex-end;background:var(--g-primary);color:var(--primary-fg);border-bottom-right-radius:.3rem;font-weight:500}
.bub.a{border-bottom-left-radius:.3rem}
.prompts{display:flex;flex-wrap:wrap;gap:.5rem;padding-top:1rem;border-top:1px solid var(--border)}
.prompts button{padding:.45rem .8rem;border-radius:999px;font-size:.75rem;transition:.2s}
.prompts button:hover{border-color:var(--primary);color:var(--primary)}
.tagl{margin-top:1.5rem;font-family:var(--font-d);font-size:1.25rem;font-weight:600}
.bill{display:inline-flex;padding:4px;border-radius:999px;margin-top:1.75rem}
.bill button{padding:.5rem 1.2rem;border-radius:999px;font-size:.85rem;font-weight:600;color:var(--muted-fg);transition:.3s}
.bill button.on{background:var(--g-primary);color:var(--primary-fg);box-shadow:var(--s-glow)}
.bill em{font-style:normal;font-size:.7rem;margin-left:.35rem;opacity:.85}
.price small{display:block;font-size:.7rem;color:var(--primary);font-weight:600;margin-left:.4rem}
.plan .pd{min-height:3.75rem}.plan .pt{font-size:.7rem;text-transform:uppercase;letter-spacing:.1em;font-weight:600;color:var(--primary);margin-top:.35rem}
.hl .plan{overflow:visible}
.cta-btns{margin-top:2rem;display:flex;flex-wrap:wrap;gap:1rem;justify-content:center}
.cta-btns .btn{padding:1rem 1.75rem;border-radius:1rem}
.cta-btns .demo{padding:1rem 1.75rem}
.csteps{margin:2.5rem auto 0;max-width:52rem;display:grid;gap:.75rem;text-align:left}
@media(min-width:768px){.csteps{grid-template-columns:repeat(3,1fr)}}
.csteps div{display:flex;gap:.75rem;align-items:flex-start;padding:1rem;border-radius:1rem;font-size:.85rem}
.csteps b{width:1.75rem;height:1.75rem;border-radius:50%;display:grid;place-items:center;background:var(--g-primary);color:var(--primary-fg);font-size:.8rem;flex-shrink:0}
.fq-note{margin-top:1.5rem;text-align:center;font-size:.75rem}

.why-grid.two{align-items:start}
.why-grid.two .checks{margin-top:0}

/* excel -> intelligence: transformation stage */
.xsec{position:relative;overflow:hidden;padding:3.5rem 0}
@media(min-width:640px){.xsec{padding:5rem 0}}
.xsec .wrap{max-width:84rem}
.sx{display:grid;gap:1.5rem}
@media(min-width:1024px){.sx{grid-template-columns:minmax(0,.78fr) minmax(0,1.4fr);gap:2.25rem}}
.sl{display:flex;gap:.6rem;overflow-x:auto;padding:.25rem .25rem .6rem;scrollbar-width:none}
.sl::-webkit-scrollbar{display:none}
@media(min-width:1024px){.sl{flex-direction:column;overflow:visible;gap:.5rem;padding:0;justify-content:space-between}}
.si{position:relative;flex-shrink:0;display:flex;align-items:center;gap:.9rem;padding:.9rem 1.1rem;border-radius:1rem;text-align:left;border:1px solid var(--border);background:color-mix(in oklab,var(--card) 55%,transparent);transition:all .4s;overflow:hidden;min-width:14rem}
@media(min-width:1024px){.si{min-width:0;flex:1}}
.si .n{font-family:ui-monospace,monospace;font-size:.7rem;color:var(--muted-fg);width:1.5rem;flex-shrink:0}
.si .t{font-size:.95rem;color:var(--muted-fg);text-decoration:line-through;text-decoration-color:color-mix(in oklab,var(--muted-fg) 50%,transparent);transition:.3s}
.si:hover{border-color:color-mix(in oklab,var(--primary) calc(40% * var(--ts)),transparent)}
.si .ar{margin-left:auto;color:var(--primary);opacity:0;transition:.3s;font-size:1rem;display:grid}
.si .pgb{position:absolute;left:0;bottom:0;height:2px;width:0;background:var(--g-primary)}
.si.on{background:linear-gradient(135deg,color-mix(in oklab,var(--primary) calc(16% * var(--ts)),transparent),color-mix(in oklab,var(--primary) calc(3% * var(--ts)),transparent));border-color:color-mix(in oklab,var(--primary) calc(45% * var(--ts)),transparent);box-shadow:0 10px 30px -14px color-mix(in oklab,var(--primary) calc(55% * var(--ts)),transparent)}
@media(min-width:1024px){.si.on{transform:translateX(8px)}}
.si.on .t{color:var(--foreground)}.si.on .n{color:var(--primary)}.si.on .ar{opacity:1}
.si.on .pgb{animation:fillbar 5s linear forwards}
.sx:hover .si.on .pgb{animation-play-state:paused}
@keyframes fillbar{to{width:100%}}
.sf{display:flex;border-radius:1.9rem;padding:4px;background:var(--g-ember);box-shadow:var(--s-ember)}
.sg{flex:1;position:relative;border-radius:1.8rem;background:var(--card);padding:1.5rem;min-height:31rem;overflow:hidden}
@media(min-width:640px){.sg{padding:2.25rem}}
.sg .wm{position:absolute;right:1.5rem;top:-.25rem;font-family:var(--font-d);font-size:9rem;font-weight:700;line-height:1;color:color-mix(in oklab,var(--primary) calc(10% * var(--ts)),transparent);pointer-events:none}
.sg .inn{position:relative;animation:fade-up .55s ease-out both}
.mv{display:flex;align-items:center;gap:.7rem;flex-wrap:wrap}
.paper{display:inline-block;padding:.4rem .85rem;border-radius:.4rem;font-size:.85rem;color:var(--muted-fg);text-decoration:line-through;background:color-mix(in oklab,var(--foreground) 5%,transparent);border:1px dashed color-mix(in oklab,var(--muted-fg) 50%,transparent);animation:crumple .9s ease-out both}
@keyframes crumple{from{transform:rotate(0);opacity:1}to{transform:rotate(-4deg) translateX(-3px) scale(.96);opacity:.55}}
.mv .go{width:1.9rem;height:1.9rem;border-radius:50%;display:grid;place-items:center;background:var(--g-primary);color:var(--primary-fg);box-shadow:var(--s-glow);font-size:.85rem}
.mv .go svg{stroke-width:2.6}
.mv .lab{font-size:.65rem;letter-spacing:.16em;text-transform:uppercase;font-weight:700;color:var(--primary)}
.sg h3{margin-top:1.1rem;font-size:1.9rem;line-height:1.12;font-weight:700;max-width:82%}
@media(min-width:640px){.sg h3{font-size:2.5rem}}
.mock{margin-top:1.75rem;border-radius:1.25rem;padding:1.1rem 1.2rem}
.mrow{display:flex;align-items:center;gap:.75rem;padding:.65rem .2rem;font-size:.82rem}
.mrow+.mrow{border-top:1px solid var(--border)}
.av{width:2.1rem;height:2.1rem;border-radius:50%;display:grid;place-items:center;background:var(--g-primary);color:var(--primary-fg);font-size:.7rem;font-weight:700;flex-shrink:0}
.mrow small{display:block;font-size:.68rem;color:var(--muted-fg)}
.tag{margin-left:auto;display:inline-flex;gap:.3rem;align-items:center;font-size:.68rem;font-weight:600;color:var(--primary);padding:.22rem .6rem;border-radius:999px;background:color-mix(in oklab,var(--primary) calc(12% * var(--ts)),transparent);white-space:nowrap}
.kp{display:grid;grid-template-columns:repeat(3,1fr);gap:.6rem;margin-bottom:1rem}
.kp div{padding:.7rem;border-radius:.8rem;background:color-mix(in oklab,var(--foreground) 5%,transparent)}
.kp small{font-size:.58rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted-fg);display:block}
.kp b{font-family:var(--font-d);font-size:1.2rem}
.fileb{display:flex;align-items:center;gap:.8rem;padding:.8rem;border-radius:.9rem;background:color-mix(in oklab,var(--foreground) 5%,transparent);font-size:.82rem}
.fileb+.fileb{margin-top:.6rem}
.fileb .ico{width:2.3rem;height:2.3rem;border-radius:.7rem;font-size:1rem}
.pb2{display:flex;align-items:center;gap:.75rem;font-size:.8rem;padding:.55rem 0}
.pb2 span:first-child{width:6.5rem;flex-shrink:0}
.pbar{height:7px;border-radius:99px;background:color-mix(in oklab,var(--foreground) 10%,transparent);overflow:hidden;flex:1}
.pbar i{display:block;height:100%;background:var(--g-primary);border-radius:99px;transform-origin:left;animation:grow 1.1s ease-out both}
@keyframes grow{from{transform:scaleX(0)}}
.flow{display:flex;align-items:center;gap:.4rem;flex-wrap:wrap;justify-content:center;padding:1.25rem 0}
.fl{padding:.7rem 1rem;border-radius:.9rem;font-family:var(--font-d);font-weight:700;font-size:.9rem;background:var(--g-primary);color:var(--primary-fg);box-shadow:var(--s-glow);animation:fade-up .5s ease-out both}
.fa{color:var(--primary);display:grid;animation:fade-up .5s ease-out both}
.stamp{display:inline-flex;transform:rotate(-6deg);border:2px solid var(--primary);color:var(--primary);padding:.3rem .8rem;border-radius:.5rem;font-weight:700;letter-spacing:.12em;font-size:.78rem;margin-left:auto}
.xband{margin-top:3rem;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:.75rem 1.5rem;text-align:center}
.xband .tg{font-family:var(--font-d);font-size:1.6rem;font-weight:700}
@media(min-width:640px){.xband .tg{font-size:2rem}}

/* how it works: rising floors */
.stair{position:relative}
.sg4{position:relative;display:grid;gap:2.25rem 1.25rem}
@media(min-width:640px){.sg4{grid-template-columns:1fr 1fr}}
@media(min-width:1024px){.sg4{grid-template-columns:repeat(4,1fr);align-items:end;height:30rem}}
.fl4{position:relative;display:flex;flex-direction:column;gap:1rem;border-radius:1.6rem;padding:2.2rem 1.4rem 1.5rem;opacity:0;transform:translateY(46px);transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1),box-shadow .4s;transition-delay:calc(var(--d)*.18s)}
.stair.in .fl4{opacity:1;transform:none}
.stair.in .fl4:hover{transform:translateY(-6px);transition-delay:0s}
@media(min-width:1024px){.fl4{height:var(--h)}}
.fl4 .node{position:absolute;top:0;left:50%;transform:translate(-50%,-50%);width:3.1rem;height:3.1rem;border-radius:50%;display:grid;place-items:center;font-family:var(--font-d);font-weight:700;font-size:1rem;background:var(--g-primary);color:var(--primary-fg);box-shadow:0 0 0 6px color-mix(in oklab,var(--primary) calc(18% * var(--ts)),transparent),var(--s-glow)}
.fl4 .node::after{content:"";position:absolute;inset:-6px;border-radius:50%;border:1px solid var(--primary);opacity:0;animation:ping 2.6s ease-out infinite;animation-delay:calc(var(--d)*.6s)}
@keyframes ping{0%{transform:scale(.9);opacity:.7}100%{transform:scale(1.5);opacity:0}}
.fl4 .vis{flex:1;display:flex;flex-direction:column;justify-content:center;gap:.45rem;min-height:5rem}
.fl4 h3{font-size:1.15rem;font-weight:700;line-height:1.25}
.fl4 p{font-size:.85rem;line-height:1.6;margin-top:.35rem}
.fl4 .fno{font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;font-weight:700;color:var(--primary)}
.tp{display:inline-flex;align-items:center;gap:.4rem;align-self:flex-start;padding:.38rem .7rem;border-radius:.6rem;font-size:.72rem;font-weight:600;background:color-mix(in oklab,var(--foreground) 6%,transparent);border:1px solid var(--border)}
.tp svg{color:var(--primary)}
.tp.i1{margin-left:1.1rem}.tp.i2{margin-left:2.2rem}
.tp.hot{background:color-mix(in oklab,var(--primary) calc(14% * var(--ts)),transparent);border-color:color-mix(in oklab,var(--primary) calc(35% * var(--ts)),transparent);color:var(--primary)}
.imp{display:flex;align-items:center;gap:.6rem}
.imp .ar{color:var(--primary);display:grid}
.avs{display:flex}.avs i{width:1.9rem;height:1.9rem;border-radius:50%;display:grid;place-items:center;background:var(--g-primary);color:var(--primary-fg);font-style:normal;font-size:.62rem;font-weight:700;border:2px solid var(--card);margin-left:-.5rem}.avs i:first-child{margin-left:0}
.tgs{display:flex;flex-wrap:wrap;gap:.3rem}.tgs span{font-size:.62rem;padding:.2rem .5rem;border-radius:999px;border:1px solid var(--border);color:var(--muted-fg)}
.feed{display:flex;align-items:center;gap:.55rem;font-size:.74rem;padding:.4rem .6rem;border-radius:.7rem;background:color-mix(in oklab,var(--foreground) 5%,transparent)}
.feed i{width:1.1rem;height:1.1rem;border-radius:50%;display:grid;place-items:center;background:var(--g-primary);color:var(--primary-fg);font-size:.6rem;flex-shrink:0}
.feed i svg{stroke-width:3}
.feed em{margin-left:auto;font-style:normal;font-size:.62rem;color:var(--muted-fg)}
.mbars{display:flex;align-items:flex-end;gap:5px;height:3.6rem}
.mbars i{flex:1;border-radius:4px 4px 0 0;background:linear-gradient(to top,color-mix(in oklab,var(--primary) calc(25% * var(--ts)),transparent),var(--primary));transform-origin:bottom;transform:scaleY(0);transition:transform .9s cubic-bezier(.2,.7,.2,1);transition-delay:calc(.6s + var(--k)*.07s)}
.stair.in .mbars i{transform:none}
.trk{display:none}
@media(min-width:1024px){.trk{display:block;position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}}
.trk path{fill:none;stroke:var(--primary);stroke-width:2;stroke-dasharray:6 8;vector-effect:non-scaling-stroke;opacity:.55;animation:dashmove 1.4s linear infinite}
.trk path.g{stroke-width:6;opacity:.14;filter:blur(3px);animation:none}
@keyframes dashmove{to{stroke-dashoffset:-28}}
.ground{margin-top:0;height:12px;border-radius:99px;background:repeating-linear-gradient(135deg,var(--primary) 0 7px,transparent 7px 14px);opacity:.45;-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.gl2{display:flex;justify-content:space-between;margin-top:.8rem;font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;font-weight:600;color:var(--muted-fg)}
.gl2 span:last-child{color:var(--primary)}

/* ===================== v3 MOTION LAYER ===================== */
html{scroll-padding-top:6rem}
:focus{outline:none}
a:focus-visible,button:focus-visible,summary:focus-visible{outline:2px solid var(--primary);outline-offset:3px}

@keyframes rvIn{from{opacity:0;transform:translateY(34px) scale(.97)}}
@keyframes lineIn{from{opacity:0;transform:translateY(42px) skewY(3deg);filter:blur(8px)}}
@keyframes orbIn{from{opacity:0;transform:scale(.82) translateY(40px)}}
@keyframes hdrIn{from{opacity:0;transform:translateY(-100%)}}
@keyframes shimmer{from{background-position:0% 50%}to{background-position:100% 50%}}
@keyframes shine{0%{transform:translateX(-160%) skewX(-20deg)}60%,100%{transform:translateX(280%) skewX(-20deg)}}
@keyframes gridmove{to{background-position:56px 56px,56px 56px}}
@keyframes ctaGlow{
  0%,100%{box-shadow:0 20px 60px -20px color-mix(in oklab,var(--primary) calc(45% * var(--ts)),transparent),0 0 0 1px color-mix(in oklab,var(--primary) calc(12% * var(--ts)),transparent) inset}
  50%{box-shadow:0 20px 70px -10px color-mix(in oklab,var(--primary) calc(78% * var(--ts)),transparent),0 0 0 1px color-mix(in oklab,var(--primary) calc(12% * var(--ts)),transparent) inset}
}
@keyframes rpl{from{transform:scale(0);opacity:.35}to{transform:scale(1);opacity:0}}
@keyframes growY{from{transform:scaleY(0)}}
@keyframes pop{0%{transform:scale(0) rotate(-40deg)}70%{transform:scale(1.25) rotate(8deg)}100%{transform:none}}
@keyframes bubIn{from{opacity:0;transform:translateY(12px) scale(.92)}}
@keyframes faqIn{from{opacity:0;transform:translateY(-10px)}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes pricePop{from{opacity:0;transform:translateY(12px) scale(.9)}}

/* ---- page load: header + hero ---- */
header{animation:hdrIn .9s cubic-bezier(.2,.7,.2,1) backwards}
.hero .copy{animation:none}
.hero .copy>*{animation:fade-up .9s cubic-bezier(.2,.7,.2,1) backwards}
.hero .copy>:nth-child(1){animation-delay:.1s}
.hero .copy>:nth-child(2){animation:none}
.hero .copy>:nth-child(3){animation-delay:.55s}
.hero .copy>:nth-child(4){animation-delay:.7s}
.hero .copy>:nth-child(5){animation-delay:.85s}
.hero .copy>:nth-child(6){animation-delay:1s}
.hero h1 .ln{display:inline-block;animation:lineIn .9s cubic-bezier(.2,.7,.2,1) backwards;animation-delay:calc(.2s + var(--l,0)*.14s)}
.visual{animation:orbIn 1.3s cubic-bezier(.2,.7,.2,1) .3s backwards;will-change:transform}

/* ---- ambient ---- */
.grid-bg{animation:gridmove 24s linear infinite}
.hero h1 .tg,.head h2 .tg,.why h2 .tg,.cta-i h2 .tg{background-size:220% auto;animation:shimmer 6s ease-in-out infinite alternate}
.marq:hover div{animation-play-state:paused}
.m b{font-variant-numeric:tabular-nums}

/* scroll progress bar */
#sp{position:fixed;top:0;left:0;right:0;height:3px;z-index:60;pointer-events:none;background:var(--g-ember);transform-origin:left;transform:scaleX(0);box-shadow:0 0 12px color-mix(in oklab,var(--primary) calc(70% * var(--ts)),transparent)}
/* cursor glow */
#cg{position:fixed;top:0;left:0;width:600px;height:600px;border-radius:50%;pointer-events:none;z-index:0;will-change:transform;background:radial-gradient(circle,color-mix(in oklab,var(--primary) calc(13% * var(--ts)),transparent),transparent 65%)}

/* ---- scroll reveal ---- */
html.js .rv:not(.in){opacity:0}
.rv.in{opacity:1;animation:rvIn .85s cubic-bezier(.2,.7,.2,1) backwards;animation-delay:var(--rd,0s)}
.swap{animation:rvIn .55s cubic-bezier(.2,.7,.2,1) backwards;animation-delay:var(--sd,0s)}
.swap .price b{animation:pricePop .6s cubic-bezier(.2,.7,.2,1) .15s backwards}

/* ---- card inner animations (play when card scrolls into view) ---- */
.bt.in .pl b i{transform-origin:left;animation:grow 1.2s cubic-bezier(.2,.7,.2,1) .35s backwards}
.bt.in .bc i{animation:growY .9s cubic-bezier(.2,.7,.2,1) backwards;animation-delay:calc(.3s + var(--k,0)*.06s)}
.bt.in .av5 i{animation:pop .55s cubic-bezier(.2,.8,.2,1) backwards;animation-delay:calc(.3s + var(--k,0)*.07s)}
.ck.in i{animation:pop .55s cubic-bezier(.2,.8,.2,1) backwards;animation-delay:calc(var(--rd,0s) + .25s)}
.dash-wrap:not(.in) .bars i{animation-play-state:paused}
.bt .ico,.plan .pi{transition:transform .45s cubic-bezier(.2,.8,.2,1)}
.bt .stp{transition:transform .4s}
.ck{transition:transform .3s,border-color .3s,box-shadow .3s,background .3s}
.ck i{transition:transform .3s}
.pill,.csteps div,.glance div,.m{transition:transform .3s,border-color .3s,box-shadow .3s,background .3s}
.hl{transition:transform .5s cubic-bezier(.2,.7,.2,1)}
summary .n{transition:.3s}
details[open] p{animation:faqIn .45s ease backwards}

/* ---- chat bubbles ---- */
.msgs .bub.u{transform-origin:100% 100%;animation:bubIn .5s cubic-bezier(.2,.8,.2,1) backwards}
.msgs .bub.a{transform-origin:0 100%;animation:bubIn .55s cubic-bezier(.2,.8,.2,1) .55s backwards}

/* ---- navbar ---- */
.links a{position:relative}
.links a::after{content:"";position:absolute;left:1rem;right:1rem;bottom:.3rem;height:2px;border-radius:2px;background:var(--g-primary);transform:scaleX(0);transform-origin:left;transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.links a:hover::after,.links a.act::after{transform:scaleX(1)}
.links a.act{color:var(--foreground)}
.theme{transition:.3s}
.theme svg{transition:transform .4s}
#tg.spin svg,#tg2.spin svg{animation:spin .6s ease}
footer .r a{position:relative}
footer .r a::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .3s}
footer .r a:hover::after{transform:scaleX(1)}

/* ---- buttons ---- */
.btn,.demo,.prompts button,.bill button{position:relative;overflow:hidden}
.btn{transition:transform .3s,background .3s,box-shadow .3s,border-color .3s,color .3s}
.btn-p::after,.hl .pb::after{content:"";position:absolute;top:0;bottom:0;left:0;width:60%;pointer-events:none;background:linear-gradient(105deg,transparent,rgba(255,255,255,.5),transparent);transform:translateX(-160%) skewX(-20deg)}
.btn-p:hover::after,.hl .pb:hover::after{animation:shine .9s ease}
.hero .cta-row .btn-p{animation:ctaGlow 3s ease-in-out infinite}
.hero .cta-row .btn-p::after{animation:shine 4.5s ease-in-out 2.2s infinite}
.demo span{transition:transform .3s}
.prompts button{transition:.25s}
.btn-p:active,.hl .pb:active{transform:scale(.97)}
.demo:active,.prompts button:active,.bill button:active{transform:scale(.96)}
ripple-fx{position:absolute;display:block;pointer-events:none;border-radius:50%;background:currentColor;width:var(--s);height:var(--s);left:var(--x);top:var(--y);margin:calc(var(--s)/-2) 0 0 calc(var(--s)/-2);animation:rpl .65s ease-out forwards}
.btn-p ripple-fx,.hl .pb ripple-fx{background:#fff}

/* ---- hover effects (mouse devices only) ---- */
@media(hover:hover){
  .btn-p:hover{transform:translateY(-2px) scale(1.04);box-shadow:0 18px 50px -12px color-mix(in oklab,var(--primary) calc(75% * var(--ts)),transparent),0 0 0 1px color-mix(in oklab,var(--primary) calc(20% * var(--ts)),transparent) inset}
  .hl .pb:hover{transform:translateY(-2px) scale(1.04)}
  .btn.pb.hoverable:hover,.prompts button:hover{transform:translateY(-2px)}
  .demo:hover{transform:translateY(-3px);border-color:color-mix(in oklab,var(--primary) calc(40% * var(--ts)),transparent);box-shadow:var(--s-ember)}
  .demo:hover span{transform:scale(1.15)}
  .theme:hover svg{transform:rotate(25deg)}
  .fc:hover{transform:translateY(-6px);box-shadow:0 22px 50px -24px color-mix(in oklab,var(--primary) calc(55% * var(--ts)),transparent)}
  .bt:hover .ico{transform:rotate(-8deg) scale(1.12)}
  .bt:hover .stp{transform:rotate(-2deg) scale(1.1)}
  .bt:hover .av5 i:nth-child(odd){transform:translateY(-3px)}
  .av5 i{transition:transform .3s}
  .plan.hoverable:hover,.hl:hover{transform:translateY(-8px)}
  .plan:hover .pi{transform:rotate(-8deg) scale(1.12)}
  .ck:hover{transform:translateX(6px);border-color:color-mix(in oklab,var(--primary) calc(40% * var(--ts)),transparent)}
  .ck:hover i{transform:scale(1.2) rotate(8deg)}
  .pill:hover,.csteps div:hover,.glance div:hover,.m:hover{transform:translateY(-4px);border-color:color-mix(in oklab,var(--primary) calc(35% * var(--ts)),transparent)}
  .m:hover{box-shadow:0 14px 30px -16px color-mix(in oklab,var(--primary) calc(55% * var(--ts)),transparent)}
  details:hover summary .n,details[open] summary .n{background:var(--g-primary);color:var(--primary-fg);transform:scale(1.08)}
  .bill button:not(.on):hover{color:var(--foreground)}
}
@media(hover:hover) and (min-width:1024px){.si:not(.on):hover{transform:translateX(5px)}}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  html.js .rv:not(.in){opacity:1}
  #cg{display:none}
}

/* ====================================================================
   WORKFORCE PAGE  (workforce.html)  — all rules scoped to body.wf / wf-* 
   ==================================================================== */
body.wf{--ok:oklch(0.78 0.17 150);--bad:oklch(0.68 0.22 25)}
html.light body.wf{--ok:oklch(0.52 0.15 150);--bad:oklch(0.56 0.22 25)}
body.wf .mrow small,.xr small,.wk small,.ec small,.bft small,.ecb small{display:block;font-size:.7rem;color:var(--muted-fg);font-weight:400}
.tag.ok{color:var(--ok);background:color-mix(in oklab,var(--ok) 14%,transparent)}
.tag.bad{color:var(--bad);background:color-mix(in oklab,var(--bad) 14%,transparent)}
.hz{height:.6rem;border-radius:2px;opacity:.75;background:repeating-linear-gradient(-45deg,var(--primary) 0 10px,transparent 10px 20px);-webkit-mask-image:linear-gradient(90deg,transparent,#000 15%,#000 85%,transparent);mask-image:linear-gradient(90deg,transparent,#000 15%,#000 85%,transparent)}
.wc{display:inline-flex;align-items:center;gap:.35rem;padding:.38rem .8rem;border-radius:999px;font-size:.75rem;font-weight:500;border:1px solid var(--border);background:color-mix(in oklab,var(--foreground) 3%,transparent);transition:.25s}
.wc svg{color:var(--ok)}
button.wc:hover{border-color:color-mix(in oklab,var(--primary) calc(50% * var(--ts)),transparent)}
.wc.on{background:var(--g-primary);color:var(--primary-fg);border-color:transparent;box-shadow:var(--s-ember)}
.wc em{font-style:normal;opacity:.7;font-variant-numeric:tabular-nums}

/* ---------- hero: swinging site-pass on a lanyard ---------- */
body.wf .visual{height:auto!important;min-height:31rem;padding:6rem 0 1rem;align-items:flex-start}
body.wf .tilt3d{height:auto;align-items:flex-start}
.wfb{position:relative;width:min(100%,17.5rem);perspective:1100px;transform-origin:50% -6rem;animation:wfSwing 7s ease-in-out infinite;z-index:3}
@keyframes wfSwing{0%,100%{transform:rotate(-2.4deg)}50%{transform:rotate(2.4deg)}}
.wfb:hover{animation-play-state:paused}
.strap{position:absolute;left:50%;bottom:calc(100% + .9rem);width:5.5rem;height:8rem;transform:translateX(-50%);display:flex;justify-content:space-between;pointer-events:none}
.strap i{width:1.05rem;height:100%;background:var(--g-ember);box-shadow:0 0 18px -4px color-mix(in oklab,var(--primary) calc(60% * var(--ts)),transparent)}
.strap i:first-child{transform:skewX(-13deg);transform-origin:bottom}.strap i:last-child{transform:skewX(13deg);transform-origin:bottom}
.clip{position:absolute;top:-1.1rem;left:50%;width:2.6rem;height:1.5rem;transform:translateX(-50%);border-radius:.55rem .55rem .25rem .25rem;background:linear-gradient(#d6d9de,#80858d);box-shadow:0 4px 10px rgba(0,0,0,.35);z-index:4}
.clip::after{content:"";position:absolute;left:50%;bottom:-.35rem;width:.9rem;height:.5rem;transform:translateX(-50%);border-radius:0 0 .5rem .5rem;background:#5b6068}
.bd{position:relative;aspect-ratio:10/16;transform-style:preserve-3d;transition:transform .9s cubic-bezier(.2,.8,.2,1);cursor:pointer;outline-offset:6px;border-radius:1.5rem}
.bd.flip{transform:rotateY(180deg)}
.face{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;padding:1.1rem 1.25rem;border-radius:1.5rem;overflow:hidden;backface-visibility:hidden;-webkit-backface-visibility:hidden;border:1px solid color-mix(in oklab,var(--primary) calc(35% * var(--ts)),var(--border));background:linear-gradient(165deg,color-mix(in oklab,var(--background) 88%,var(--primary)),color-mix(in oklab,var(--background) 96%,var(--primary)));box-shadow:var(--s-ember),0 40px 70px -28px rgba(0,0,0,.55)}
.face::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(115deg,transparent 35%,rgba(255,255,255,.13) 48%,transparent 60%);background-size:260% 100%;animation:wfHolo 6s linear infinite}
@keyframes wfHolo{from{background-position:140% 0}to{background-position:-60% 0}}
.face.bk{transform:rotateY(180deg)}
.bh{display:flex;align-items:center;gap:.6rem;width:100%;font-size:.8rem}
.bh b{font-family:var(--font-d);display:block;line-height:1.1}.bh small{font-size:.65rem}
.bh .tag{margin-left:auto}
.lm{width:2rem;height:2rem;border-radius:.65rem;background:var(--g-primary);color:var(--primary-fg);display:grid;place-items:center;font:700 .95rem var(--font-d);transform:rotate(6deg);box-shadow:var(--s-glow)}
.stripe{align-self:stretch;height:.5rem;margin:.8rem -1.25rem .9rem;background:repeating-linear-gradient(-45deg,var(--primary) 0 9px,color-mix(in oklab,var(--primary-fg) 65%,transparent) 9px 18px)}
.ring{padding:3px;border-radius:50%;background:conic-gradient(var(--primary),var(--accent),var(--primary-glow),var(--primary));box-shadow:var(--s-glow)}
.pho{width:4.9rem;height:4.9rem;border-radius:50%;display:grid;place-items:center;background:color-mix(in oklab,var(--background) 80%,var(--primary));font:700 1.7rem var(--font-d);color:var(--primary)}
.face h3{margin-top:.8rem;font-size:1.3rem;line-height:1.15;text-align:center}
.face .rl{font-size:.8rem;margin-top:.15rem}
.bid{margin-top:.8rem;align-self:stretch;text-align:center;padding:.5rem .6rem;border-radius:.75rem;font:600 .78rem var(--font-d);letter-spacing:.07em;color:var(--primary);background:color-mix(in oklab,var(--primary) calc(11% * var(--ts)),transparent);border:1px dashed color-mix(in oklab,var(--primary) calc(45% * var(--ts)),transparent)}
.vf{display:flex;gap:.3rem;justify-content:center;flex-wrap:wrap;margin-top:.7rem}.vf .wc{padding:.25rem .55rem;font-size:.66rem}
.bft{margin-top:auto;align-self:stretch;display:flex;justify-content:space-between;padding-top:.7rem;border-top:1px solid var(--border);font-size:.78rem}
.bft b{font-family:var(--font-d)}
.face.bk h4{font-size:.95rem;margin-top:.1rem}
.qr{display:grid;grid-template-columns:repeat(11,1fr);width:7.6rem;aspect-ratio:1;margin:.9rem 0;padding:.4rem;border-radius:.7rem;background:#fff}
.qr i{background:#111}.qr i.o{background:transparent}
.ecb{align-self:stretch;margin-top:.55rem;padding:.55rem .75rem;border-radius:.8rem;border:1px solid var(--border);font-size:.78rem}
.ecb b{display:block;font-family:var(--font-d)}
.hint{text-align:center;font-size:.72rem;margin-top:1.1rem}
@media(max-width:480px){.wfb{width:15rem}.c1{left:-.5rem!important}.c2{right:-.5rem!important}}

/* ---------- profile explorer ---------- */
.wfx{display:grid;gap:1.1rem}
@media(min-width:1024px){.wfx{grid-template-columns:19.5rem 1fr;gap:2rem;align-items:start}}
.wft{display:flex;gap:.6rem;overflow-x:auto;padding:.25rem .1rem .8rem;scroll-snap-type:x mandatory;scrollbar-width:none}
.wft::-webkit-scrollbar{display:none}
@media(min-width:1024px){.wft{flex-direction:column;overflow:visible;padding:0;position:sticky;top:6.5rem}}
.wft button{display:flex;align-items:center;gap:.8rem;text-align:left;flex:0 0 auto;min-width:15.5rem;scroll-snap-align:start;padding:.8rem .95rem;border-radius:1.1rem;border:1px solid var(--glass-border);background:linear-gradient(135deg,var(--glass-a),var(--glass-b));transition:.3s}
@media(min-width:1024px){.wft button{min-width:0}.wft button:not(.on):hover{transform:translateX(5px)}}
.wft .ico{width:2.4rem;height:2.4rem;border-radius:.8rem;font-size:1.05rem;opacity:.5;filter:grayscale(.7);transition:.3s}
.wft b{display:block;font:600 .93rem var(--font-d)}.wft small{font-size:.72rem;color:var(--muted-fg);line-height:1.3;display:block}
.wft button.on{border-color:color-mix(in oklab,var(--primary) calc(50% * var(--ts)),transparent);box-shadow:var(--s-ember);background:linear-gradient(135deg,color-mix(in oklab,var(--primary) calc(15% * var(--ts)),transparent),transparent)}
.wft button.on .ico{opacity:1;filter:none;transform:rotate(-6deg)}
.wfp{border-radius:1.75rem;padding:1.25rem;min-height:30rem;overflow:hidden}
@media(min-width:640px){.wfp{padding:2rem}}
.wfp .pn{animation:rvIn .55s cubic-bezier(.2,.7,.2,1) backwards}
.pth{font-size:1.5rem;font-weight:700}.ptd{margin-top:.4rem;font-size:.9rem;max-width:34rem}
.wfp .mock{margin-top:1.25rem}
.wst{display:grid;grid-template-columns:repeat(4,1fr);gap:.3rem;margin:1.4rem 0 1.25rem}
.wsi{position:relative;text-align:center;font-size:.68rem;color:var(--muted-fg)}
.wsi i{position:relative;z-index:1;display:grid;place-items:center;width:2rem;height:2rem;margin:0 auto .4rem;border-radius:50%;font:600 .75rem var(--font-d);font-style:normal;border:2px solid var(--border);background:var(--background)}
.wsi+.wsi::before{content:"";position:absolute;top:.95rem;left:-50%;width:100%;height:2px;background:var(--border)}
.wsi.done,.wsi.now{color:var(--foreground)}
.wsi.done i{background:var(--g-primary);color:var(--primary-fg);border-color:transparent}
.wsi.now i{border-color:var(--primary);color:var(--primary);animation:pulse 2s infinite}
.wsi.done::before,.wsi.now::before{background:var(--primary)}
.gen{display:grid;gap:.8rem;padding:1.1rem;border-radius:1.25rem}
.fld{width:100%;padding:.8rem 1rem;border-radius:.9rem;border:1px solid var(--border);background:color-mix(in oklab,var(--background) 55%,transparent);color:var(--foreground);font:inherit;outline:0;transition:.25s}
.fld:focus{border-color:var(--primary);box-shadow:0 0 0 3px color-mix(in oklab,var(--primary) calc(20% * var(--ts)),transparent)}
.seg{display:inline-flex;justify-self:start;padding:.25rem;border-radius:999px;border:1px solid var(--border)}
.seg button{padding:.45rem 1rem;border-radius:999px;font-size:.8rem;font-weight:600;color:var(--muted-fg);transition:.25s}
.seg button.on{background:var(--g-primary);color:var(--primary-fg);box-shadow:var(--s-ember)}
.genrow{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.9rem}
.genid{font:700 clamp(1.3rem,5.2vw,2.1rem) var(--font-d);letter-spacing:.04em;font-variant-numeric:tabular-nums}
.genrow .btn{padding:.8rem 1.25rem;border-radius:.95rem;font-size:.85rem}
.drop{margin-top:.9rem;display:flex;align-items:center;gap:.6rem;padding:.9rem 1rem;border-radius:1rem;border:1.5px dashed color-mix(in oklab,var(--primary) calc(40% * var(--ts)),transparent);font-size:.8rem;color:var(--muted-fg)}
.tl{position:relative;margin:1.5rem 0 1.1rem;padding-left:1.7rem}
.tl::before{content:"";position:absolute;left:.42rem;top:.4rem;bottom:.6rem;width:2px;background:linear-gradient(var(--primary),transparent)}
.tl>div{position:relative;padding-bottom:1.2rem;font-size:.9rem}
.tl>div::before{content:"";position:absolute;left:-1.58rem;top:.35rem;width:.75rem;height:.75rem;border-radius:50%;background:var(--background);border:2px solid var(--primary)}
.tl>div:first-child::before{background:var(--primary);box-shadow:var(--s-glow)}
.tl small{display:block;font-size:.74rem;color:var(--muted-fg)}
.chips{display:flex;flex-wrap:wrap;gap:.45rem;margin-top:.9rem}
.tsb{display:flex;height:.7rem;border-radius:99px;overflow:hidden;gap:2px;margin:1.3rem 0 .9rem}
.tsb i{display:block;background:var(--g-primary);transition:opacity .35s}
.tsb i:nth-child(even){filter:hue-rotate(-14deg) brightness(.9)}
.tinfo{font-size:.9rem;margin:.9rem 0 1rem;min-height:1.4rem}
.dps{display:grid;gap:.6rem;grid-template-columns:repeat(2,1fr)}
@media(min-width:640px){.dps{grid-template-columns:repeat(4,1fr)}}
.dp{padding:.8rem;border-radius:1rem;border:1px solid var(--border);font-size:.78rem}
.dp b{display:block;font:600 .85rem var(--font-d);margin-bottom:.4rem}
.dp span{display:block;padding:.18rem .45rem;border-radius:.5rem;color:var(--muted-fg);transition:.25s}
.dp span.hit{background:var(--g-primary);color:var(--primary-fg);font-weight:600}
.sr{display:grid;grid-template-columns:6.2rem 1fr 5rem;gap:.7rem;align-items:center;font-size:.82rem;margin:.7rem 0}
@media(min-width:640px){.sr{grid-template-columns:8rem 1fr 6rem}}
.sr b{text-align:right;font-variant-numeric:tabular-nums}
.sb{height:.6rem;border-radius:99px;background:color-mix(in oklab,var(--foreground) 8%,transparent);overflow:hidden}
.sb i{display:block;height:100%;width:var(--w,0%);border-radius:inherit;background:var(--g-primary);transition:width .9s cubic-bezier(.2,.7,.2,1)}
.sb i.neg{background:linear-gradient(90deg,var(--bad),oklch(0.72 0.19 40))}
.net{margin-top:1.1rem;padding:1rem 1.25rem;border-radius:1.1rem;display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:.4rem}
.net b{font:700 2rem var(--font-d)}
.ecs{display:grid;gap:.8rem;margin-top:1.3rem}
@media(min-width:640px){.ecs{grid-template-columns:repeat(2,1fr)}}
.ec{display:flex;align-items:center;gap:.8rem;padding:1rem;border-radius:1.2rem;font-size:.88rem}
.ec b{font-family:var(--font-d)}
.ec .call{margin-left:auto;width:2.3rem;height:2.3rem;border-radius:50%;display:grid;place-items:center;background:var(--g-primary);color:var(--primary-fg);box-shadow:var(--s-glow)}

/* ---------- site transfer board ---------- */
.wfs-board{display:grid;gap:1rem}
@media(min-width:900px){.wfs-board{grid-template-columns:repeat(3,1fr)}}
.wsc{border-radius:1.5rem;padding:1.1rem;min-height:14rem}
.wsc h4{display:flex;align-items:center;justify-content:space-between;font-size:1.05rem}
.wsc h4 em{font:600 .72rem var(--font-s);font-style:normal;padding:.2rem .6rem;border-radius:99px;color:var(--primary);background:color-mix(in oklab,var(--primary) calc(12% * var(--ts)),transparent);font-variant-numeric:tabular-nums}
.wsc>small{font-size:.74rem;color:var(--muted-fg)}
.wk{display:flex;align-items:center;gap:.7rem;width:100%;text-align:left;padding:.6rem .75rem;border-radius:1rem;margin-top:.55rem;border:1px solid var(--glass-border);background:linear-gradient(135deg,var(--glass-a),var(--glass-b));transition:border-color .3s,box-shadow .3s}
.wk .go{margin-left:.5rem;opacity:.45;transition:.3s}
.wk:hover{border-color:color-mix(in oklab,var(--primary) calc(45% * var(--ts)),transparent);box-shadow:var(--s-ember)}.wk:hover .go{opacity:1;color:var(--primary);transform:translateX(3px)}
.wk .ty{margin-left:auto;font-size:.62rem;font-weight:700;padding:.1rem .4rem;border-radius:.4rem;border:1px solid var(--border);color:var(--muted-fg)}
.wlog{margin-top:1rem;padding:.9rem 1.1rem;border-radius:1.1rem;font-size:.82rem;min-height:5.2rem}
.wlog div{padding:.18rem 0;animation:bubIn .5s cubic-bezier(.2,.8,.2,1) backwards}
.wlog div:first-child{color:var(--foreground)}.wlog div+div{color:var(--muted-fg)}
.wlog b{color:var(--primary)}

/* ---------- document expiry ---------- */
.wfd{display:grid;gap:1.25rem}
@media(min-width:1024px){.wfd{grid-template-columns:1.35fr 1fr;align-items:start}}
.xr{padding:.9rem 1rem;border-radius:1.15rem;margin-bottom:.65rem}
.xt{display:flex;align-items:center;gap:.75rem;font-size:.86rem}
.xt b{font-weight:600}
.dl{margin-left:auto;font:700 .78rem var(--font-d);white-space:nowrap;font-variant-numeric:tabular-nums}
.xr.u .dl{color:var(--bad)}.xr.s .dl{color:var(--primary)}.xr.ok .dl{color:var(--ok)}
.xr.sent .dl::after{content:" ✓";color:var(--ok)}
.xb{height:.45rem;border-radius:99px;margin-top:.7rem;background:color-mix(in oklab,var(--foreground) 8%,transparent);overflow:hidden}
.xb i{display:block;height:100%;width:0;border-radius:inherit;transition:width 1.1s cubic-bezier(.2,.7,.2,1) .25s;background:var(--g-primary)}
.xr.in .xb i{width:var(--w)}
.xr.u .xb i{background:linear-gradient(90deg,var(--bad),oklch(0.72 0.19 40))}.xr.ok .xb i{background:linear-gradient(90deg,var(--ok),oklch(0.85 0.15 130))}
.wph{border-radius:2rem;padding:1.1rem;display:flex;flex-direction:column;gap:.9rem}
@media(min-width:1024px){.wph{position:sticky;top:6.5rem}}
.wph-h{display:flex;align-items:center;gap:.7rem;padding-bottom:.8rem;border-bottom:1px solid var(--border);font-size:.9rem}
.wph-h b{font-family:var(--font-d)}.wph-h small{display:block;font-size:.7rem}
.wph-b{display:flex;flex-direction:column;gap:.55rem;min-height:15rem}
.wb{max-width:88%;padding:.65rem .85rem;border-radius:1rem 1rem 1rem .25rem;font-size:.8rem;line-height:1.5;border:1px solid var(--glass-border);background:linear-gradient(135deg,var(--glass-a),var(--glass-b));animation:bubIn .5s cubic-bezier(.2,.8,.2,1) backwards}
.wb b{color:var(--primary)}
.wb.me{align-self:flex-end;border-radius:1rem 1rem .25rem 1rem;background:linear-gradient(135deg,color-mix(in oklab,var(--primary) calc(16% * var(--ts)),transparent),color-mix(in oklab,var(--primary) calc(4% * var(--ts)),transparent));border-color:color-mix(in oklab,var(--primary) calc(30% * var(--ts)),transparent)}
.wph .btn{padding:.85rem 1.2rem;border-radius:1rem;font-size:.85rem}

/* ---------- capabilities ---------- */
.wfc-grid{display:grid;gap:.85rem;grid-template-columns:1fr}
@media(min-width:560px){.wfc-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1100px){.wfc-grid{grid-template-columns:repeat(4,1fr)}}
.wcp{position:relative;overflow:hidden;display:flex;flex-direction:column;gap:.9rem;min-height:9.5rem;padding:1.25rem;border-radius:1.4rem;font:600 .98rem/1.3 var(--font-d);transition:transform .4s,border-color .4s}
.wcp::before{content:"";position:absolute;inset:0;opacity:0;transition:opacity .4s;pointer-events:none;background:radial-gradient(280px circle at var(--x,50%) var(--y,0),color-mix(in oklab,var(--primary) calc(22% * var(--ts)),transparent),transparent 50%)}
.wcp:hover{transform:translateY(-5px);border-color:color-mix(in oklab,var(--primary) calc(50% * var(--ts)),var(--border))}.wcp:hover::before{opacity:1}
.wcp .ico{width:2.5rem;height:2.5rem;border-radius:.85rem;font-size:1.1rem;box-shadow:var(--s-ember);transition:transform .45s cubic-bezier(.2,.8,.2,1)}
.wcp:hover .ico{transform:rotate(-8deg) scale(1.12)}
.wcp>*{position:relative}
.wcp .ck2{position:absolute;right:1rem;top:1rem;color:var(--ok);font-size:1rem}
@media(prefers-reduced-motion:reduce){.wfb{animation:none}.face::after{animation:none}}

/* light mode: solid pale panels inside gradient-border frames (no orange bleed-through) */
html.light .sg,html.light .dash>div,html.light .chatw>div,html.light .hl .o,html.light .hl .plan{background:#FEF5EE}

/* ===== Capabilities: worker journey ===== */
.jr{position:relative;--jg:1.25rem}
.jr-top{display:flex;flex-wrap:wrap;justify-content:center;gap:.6rem;margin-bottom:2.5rem}
.jr-top span{display:inline-flex;align-items:baseline;gap:.4rem;padding:.5rem 1rem;border:1px solid var(--border);border-radius:999px;background:var(--card);font-size:.8rem;color:var(--muted-fg)}
.jr-top b{font-family:var(--font-d);font-size:1.05rem;font-weight:600;color:var(--foreground)}
.jr-flow{display:grid;grid-template-columns:1fr;gap:0}
.jr-st{position:relative;display:grid;grid-template-columns:2.75rem 1fr;column-gap:1rem;padding-bottom:1.25rem}
.jr-st:last-child{padding-bottom:0}
.jr-nd{position:relative;display:flex;flex-direction:column;align-items:center}
.jr-n{flex:none;position:relative;z-index:1;width:2.75rem;height:2.75rem;border-radius:50%;display:grid;place-items:center;font:600 .82rem var(--font-d);color:var(--primary-fg);background:var(--g-primary);box-shadow:0 0 0 5px var(--background),0 0 0 6px var(--border),0 12px 24px -10px rgba(234,88,12,.55)}
.jr-ln{flex:1;width:2px;margin-top:.5rem;border-radius:2px;background:linear-gradient(var(--border),var(--border))}
.jr-st:last-child .jr-ln{display:none}
.jr-ln::after{content:"";display:block;width:100%;height:36%;border-radius:2px;background:linear-gradient(180deg,transparent,#F97316,transparent);animation:jrV 3.2s ease-in-out infinite}
@keyframes jrV{0%{transform:translateY(-100%)}100%{transform:translateY(300%)}}
.jr-ln{overflow:hidden}
.jr-c{position:relative;overflow:hidden;border:1px solid var(--border);border-radius:1.5rem;background:var(--card);padding:1.4rem 1.25rem .6rem;transition:transform .45s cubic-bezier(.2,.7,.2,1),box-shadow .45s,border-color .45s;box-shadow:0 24px 50px -40px oklch(0.3 0.02 50 / .35)}
html.light .jr-c{background:#fff}
.jr-c:hover{transform:translateY(-5px);border-color:rgba(249,115,22,.4);box-shadow:0 34px 60px -36px rgba(234,88,12,.35)}
.jr-big{position:absolute;right:1rem;top:.35rem;font:700 4.6rem/1 var(--font-d);letter-spacing:-.04em;color:transparent;-webkit-text-stroke:1px color-mix(in oklab,var(--primary) 30%,var(--border));opacity:.55;pointer-events:none;user-select:none}
.jr-h{position:relative;margin-bottom:.9rem}
.jr-h b{display:block;font:600 1.3rem/1.2 var(--font-d);letter-spacing:-.015em;color:var(--foreground)}
.jr-h small{display:block;margin-top:.25rem;font-size:.8rem;color:var(--muted-fg)}
.jr-l{position:relative;list-style:none;margin:0;padding:0}
.jr-r{display:grid;grid-template-columns:auto 1fr;gap:.85rem;align-items:center;padding:.85rem 0;border-top:1px dashed var(--border)}
.jr-i{width:2.5rem;height:2.5rem;border-radius:.8rem;display:grid;place-items:center;color:var(--primary);background:color-mix(in oklab,var(--primary) 9%,transparent);transition:transform .35s,background .35s,color .35s,box-shadow .35s}
html.light .jr-i{background:#FEF5EE}
.jr-i svg{width:1.15rem;height:1.15rem;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.jr-r:hover .jr-i{background:var(--g-primary);color:var(--primary-fg);transform:rotate(-6deg) scale(1.06);box-shadow:0 12px 22px -10px rgba(234,88,12,.55)}
.jr-r b{display:block;font:500 .95rem/1.3 var(--font-d);color:var(--foreground)}
.jr-r small{display:block;margin-top:.15rem;font-size:.78rem;line-height:1.4;color:var(--muted-fg)}
.jr-end .jr-c{border-color:rgba(249,115,22,.3)}
html.light .jr-end .jr-c{background:linear-gradient(#FEF5EE,#fff 60%)}
.jr-cta{margin-top:2rem;display:flex;flex-direction:column;align-items:stretch;gap:1rem;padding:1.25rem;border:1px solid var(--border);border-radius:1.5rem;background:var(--card)}
html.light .jr-cta{background:#FEF5EE;border-color:transparent}
.jr-cta p{margin:0;font:500 1.05rem/1.4 var(--font-d);color:var(--muted-fg)}
.jr-cta p b{font-weight:600;color:var(--foreground)}
.jr-cta .btn{padding:.95rem 1.6rem;border-radius:1rem}
@media(min-width:640px){
  .jr-l{display:grid;grid-template-columns:repeat(3,1fr);column-gap:1.25rem}
  .jr-r{grid-template-columns:1fr;gap:.7rem;align-items:start;padding:1rem 0 .85rem;border-top:1px dashed var(--border)}
  .jr-c{padding:1.6rem 1.6rem 1rem}
  .jr-cta{flex-direction:row;align-items:center;justify-content:space-between;padding:1.25rem 1.75rem}
}
@media(min-width:1100px){
  .jr-flow{grid-template-columns:repeat(4,1fr);column-gap:var(--jg)}
  .jr-st{display:block;padding-bottom:0}
  .jr-nd{flex-direction:row;margin-bottom:1.5rem}
  .jr-ln{flex:1;width:auto;height:2px;margin:0 -.5rem 0 .75rem}
  .jr-ln::after{width:36%;height:100%;background:linear-gradient(90deg,transparent,#F97316,transparent);animation-name:jrH}
  .jr-st:nth-child(2) .jr-ln::after{animation-delay:.8s}.jr-st:nth-child(3) .jr-ln::after{animation-delay:1.6s}
  .jr-l{display:block}
  .jr-r{grid-template-columns:auto 1fr;gap:.85rem;align-items:center;padding:.85rem 0}
  .jr-c{padding:1.5rem 1.35rem .6rem;height:calc(100% - 4.25rem)}
}
@keyframes jrH{0%{transform:translateX(-100%)}100%{transform:translateX(300%)}}
.jr .rv{animation:jrIn .7s cubic-bezier(.2,.7,.2,1) both;animation-delay:calc(var(--d,0) * 100ms)}
@keyframes jrIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.jr .rv,.jr-ln::after{animation:none}.jr-c,.jr-i{transition:none}}

/* ID card: dark orange header band */
.face .bh{width:calc(100% + 2.5rem);margin:-1.1rem -1.25rem 0;padding:1.1rem 1.25rem .95rem;color:#fff;background:#F68104}
.face .bh small,.face .bh small.muted{color:rgba(255,255,255,.82)!important}
.face .bh .lm{background:#fff;color:#F68104;box-shadow:0 6px 14px -6px rgba(0,0,0,.25)}
.face .bh .tag{color:#fff;background:rgba(255,255,255,.2);box-shadow:inset 0 0 0 1px rgba(255,255,255,.28)}
.face .stripe{margin-top:0}

/* ID card: white body in light mode */
html.light .face{background:#fff}
html.light .pho{background:#fff}
html.light .bid{background:#fff}

/* ID card: dark orange footer band */
.face .bft{width:calc(100% + 2.5rem);margin:auto -1.25rem -1.1rem;padding:.95rem 1.25rem 1rem;border-top:0;color:#fff;background:#F68104}
body.wf .face .bft small{color:rgba(255,255,255,.8)}
.face .bft b{color:#fff}

/* ID card: #F68104 border and stripe */
.face{border:2px solid #F68104}
.face .stripe{background:repeating-linear-gradient(-45deg,#F68104 0 9px,#fff 9px 18px)}

/* ====================================================================
   MANPOWER PAGE  (manpower.html) — scoped to body.mp / mp* classes
   ==================================================================== */
body.mp{--ok:oklch(0.78 0.17 150);--bad:oklch(0.68 0.22 25)}
html.light body.mp{--ok:oklch(0.52 0.15 150);--bad:oklch(0.56 0.22 25)}
body.mp .visual{height:auto!important;padding:1rem 0 1.5rem}
body.mp .tilt3d{height:auto;flex-direction:column;gap:1.25rem}

/* hero: trade rings */
.mrw{position:relative;z-index:2;width:min(100%,21.5rem);aspect-ratio:1;display:grid;place-items:center}
.mrw svg{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg);overflow:visible}
.mrw circle{fill:none;stroke-width:14;stroke-linecap:round}
.mrw .t{stroke:color-mix(in oklab,var(--foreground) 9%,transparent)}
.mrw .v{stroke-dasharray:var(--c);stroke-dashoffset:var(--c);animation:mrIn 1.6s cubic-bezier(.2,.7,.2,1) forwards;animation-delay:calc(.6s + var(--k)*.14s);transition:opacity .3s}
.mrw.f .v:not(.on){opacity:.22}
@keyframes mrIn{to{stroke-dashoffset:var(--o)}}
.mrc{position:relative;text-align:center;display:grid;gap:.1rem;max-width:8rem}
.mrc b{font:700 3.4rem/1 var(--font-d);letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.mrc small,.mrc em{font-size:.75rem;font-style:normal}
.mrc em{color:var(--muted-fg)}
.mrl{position:relative;z-index:3;display:flex;flex-wrap:wrap;justify-content:center;gap:.45rem;max-width:26rem}
body.mp .chip.c1{top:1rem;left:0}body.mp .chip.c2{bottom:4.5rem;right:0}
@media(max-width:480px){body.mp .chip.c1{left:-.25rem}body.mp .chip.c2{right:-.25rem}}

/* live dashboard */
.mpd{border-radius:1.75rem;padding:1.1rem}
@media(min-width:640px){.mpd{padding:2rem}}
.mph{display:flex;flex-wrap:wrap;gap:1rem 2rem;align-items:center;justify-content:space-between}
.mps{display:flex;flex-wrap:wrap;gap:.5rem}
.mpr{flex:1 1 15rem;max-width:22rem}
.mpr label{display:flex;justify-content:space-between;align-items:baseline;font-size:.8rem;color:var(--muted-fg);margin-bottom:.4rem}
.mpr b{font:700 1.35rem var(--font-d);font-variant-numeric:tabular-nums}
.mpr input{width:100%;accent-color:var(--primary);cursor:pointer;height:1.5rem}
.mpk{display:grid;grid-template-columns:repeat(2,1fr);gap:.7rem;margin:1.4rem 0}
.mpk>div:last-child{grid-column:1/-1}
@media(min-width:900px){.mpk{grid-template-columns:repeat(5,1fr)}.mpk>div:last-child{grid-column:auto}}
.mpk>div{border:1px solid var(--border);border-radius:1.1rem;padding:1rem;background:color-mix(in oklab,var(--foreground) 3%,transparent)}
.mpk small{display:block;font-size:.75rem}
.mpk b{display:block;font:700 2rem/1.15 var(--font-d);font-variant-numeric:tabular-nums;margin:.15rem 0}
.mpk em{font-style:normal;font-size:.72rem;color:var(--muted-fg)}
.mpk>div:nth-child(1) em{color:var(--ok)}.mpk>div:nth-child(2) em{color:var(--bad)}
.mpg{display:grid;gap:1rem}
@media(min-width:900px){.mpg{grid-template-columns:1.35fr 1fr}}
.mpp{border:1px solid var(--border);border-radius:1.25rem;padding:1.15rem}
.mpp h4{font-size:.95rem;margin-bottom:.9rem}
.tb{display:grid;grid-template-columns:5.6rem 1fr 3.8rem;gap:.7rem;align-items:center;font-size:.8rem;margin:.65rem 0}
.tb span:last-child{text-align:right;color:var(--muted-fg);font-variant-numeric:tabular-nums}
.tb s{display:block;height:.65rem;border-radius:9px;background:var(--border);position:relative;overflow:hidden}
.tb s i{position:absolute;inset:0 auto 0 0;width:var(--w,0%);background:var(--g-primary);border-radius:9px;transition:width .5s cubic-bezier(.2,.7,.2,1)}
.cb{display:flex;gap:3px;height:1.3rem;border-radius:9px;overflow:hidden;margin-bottom:1rem}
.cb i{flex:1 1 0;min-width:0;transition:flex-grow .5s cubic-bezier(.2,.7,.2,1)}
.cb i:nth-child(1),.cl li:nth-child(1) i{background:var(--primary)}
.cb i:nth-child(2),.cl li:nth-child(2) i{background:color-mix(in oklab,var(--primary) 68%,transparent)}
.cb i:nth-child(3),.cl li:nth-child(3) i{background:color-mix(in oklab,var(--primary) 42%,transparent)}
.cb i:nth-child(4),.cl li:nth-child(4) i{background:color-mix(in oklab,var(--foreground) 26%,transparent)}
.cl{list-style:none;display:grid;gap:.55rem}
.cl li{display:grid;grid-template-columns:auto 1fr auto;gap:.6rem;align-items:center;font-size:.85rem}
.cl li i{width:.7rem;height:.7rem;border-radius:3px}
.cl li b{font-variant-numeric:tabular-nums}

/* capabilities */
.mcg{display:grid;gap:.9rem;grid-template-columns:1fr}
@media(min-width:560px){.mcg{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1024px){.mcg{grid-template-columns:repeat(5,1fr)}}
.mpc{display:flex;flex-direction:column;gap:.75rem;padding:1.25rem;border-radius:1.4rem;transition:transform .35s,border-color .35s,box-shadow .35s}
.mpc .ico{width:2.6rem;height:2.6rem;border-radius:.9rem;font-size:1.1rem;box-shadow:var(--s-ember)}
.mpc b{font:600 1rem/1.25 var(--font-d)}
.mpc small{font-size:.8rem;line-height:1.5;color:var(--muted-fg)}
@media(hover:hover){.mpc:hover{transform:translateY(-5px);border-color:color-mix(in oklab,var(--primary) calc(45% * var(--ts)),transparent)}.mpc:hover .ico{transform:rotate(-8deg)}}
.mpc .ico{transition:transform .35s}
@media(prefers-reduced-motion:reduce){.mrw .v{animation:none;stroke-dashoffset:var(--o)}}

/* ====================================================================
   ATTENDANCE PAGE  (attendance.html) — scoped to body.at / a* classes
   ==================================================================== */
body.at{--ok:oklch(0.78 0.17 150);--bad:oklch(0.68 0.22 25)}
html.light body.at{--ok:oklch(0.52 0.15 150);--bad:oklch(0.56 0.22 25)}
body.at .visual{height:auto!important;padding:1rem 0 1.5rem}
body.at .tilt3d{height:auto}

/* check-in simulator */
.atw{position:relative;z-index:2;width:min(100%,27rem);border-radius:1.75rem;padding:1.1rem;display:grid;gap:.9rem}
.atw .mps{gap:.4rem}
.atm{position:relative;height:9.5rem;border-radius:1.1rem;overflow:hidden;border:1px solid var(--border);background-color:color-mix(in oklab,var(--foreground) 3%,transparent);background-image:linear-gradient(var(--grid-line) 1px,transparent 1px),linear-gradient(90deg,var(--grid-line) 1px,transparent 1px);background-size:22px 22px}
.atf{position:absolute;left:50%;top:50%;width:7rem;height:7rem;margin:-3.5rem 0 0 -3.5rem;border-radius:50%;border:2px dashed var(--primary);background:color-mix(in oklab,var(--primary) 10%,transparent);display:grid;place-items:center;animation:atP 2.6s ease-in-out infinite}
.atf small{font-size:.65rem;color:var(--primary);font-weight:600}
@keyframes atP{50%{box-shadow:0 0 0 12px color-mix(in oklab,var(--primary) 8%,transparent)}}
.atp{position:absolute;left:var(--px,58%);top:var(--py,48%);width:.95rem;height:.95rem;margin:-.48rem;border-radius:50%;background:var(--ok);box-shadow:0 0 0 6px color-mix(in oklab,var(--ok) 25%,transparent);transition:left .9s cubic-bezier(.2,.7,.2,1),top .9s cubic-bezier(.2,.7,.2,1),background .3s,box-shadow .3s}
.atp.bad{background:var(--bad);box-shadow:0 0 0 6px color-mix(in oklab,var(--bad) 25%,transparent)}
.ats{display:grid;gap:.45rem}
.alr{display:grid;grid-template-columns:auto 1fr auto;gap:.75rem;align-items:center;padding:.6rem .75rem;border-radius:.95rem;border:1px solid var(--border);transition:.35s}
.alr .ico{width:2rem;height:2rem;border-radius:.65rem;font-size:.9rem;background:color-mix(in oklab,var(--foreground) 10%,transparent);color:var(--muted-fg);transition:.35s}
.alr b{display:block;font:600 .85rem var(--font-d)}
.alr small{font-size:.7rem;color:var(--muted-fg)}
.atg{font-size:.7rem;font-weight:600;color:var(--muted-fg);padding:.2rem .6rem;border-radius:999px}
.alr.ok{border-color:color-mix(in oklab,var(--ok) 45%,transparent)}
.alr.ok .ico{background:var(--ok);color:var(--background)}
.alr.ok .atg{color:var(--ok);background:color-mix(in oklab,var(--ok) 14%,transparent)}
.alr.no{border-color:color-mix(in oklab,var(--bad) 55%,transparent)}
.alr.no .ico{background:var(--bad);color:var(--background)}
.alr.no .atg{color:var(--bad);background:color-mix(in oklab,var(--bad) 14%,transparent)}
.alr.sk{opacity:.45}
.atx{display:flex;flex-wrap:wrap;justify-content:space-between;gap:.2rem .75rem;align-items:center;padding:.8rem 1rem;border-radius:1rem;border:1px dashed var(--border);font-size:.85rem;font-weight:600;min-height:3.2rem;transition:.35s}
.atx small{font-weight:400;font-size:.75rem;color:var(--muted-fg)}
.atx.ok{border:1px solid var(--ok);color:var(--ok);background:color-mix(in oklab,var(--ok) 10%,transparent)}
.atx.no{border:1px solid var(--bad);color:var(--bad);background:color-mix(in oklab,var(--bad) 10%,transparent)}

/* capability ledger */
.atcols{display:grid;gap:1rem}
@media(min-width:900px){.atcols{grid-template-columns:1.1fr 1fr}}
.atl{border-radius:1.75rem;padding:1.4rem 1.25rem .5rem}
@media(min-width:640px){.atl{padding:1.8rem 2rem .8rem}}
.atl h3{font-size:1.3rem;margin-bottom:.6rem}
.atc{display:grid;grid-template-columns:auto 1fr;gap:.9rem;align-items:center;padding:.9rem 0;border-top:1px dashed var(--border);transition:transform .3s}
.atc .ico{width:2.4rem;height:2.4rem;border-radius:.8rem;font-size:1rem;box-shadow:var(--s-ember);transition:transform .3s}
.atc b{display:block;font:600 .95rem/1.3 var(--font-d)}
.atc small{font-size:.78rem;color:var(--muted-fg);line-height:1.45}
@media(hover:hover){.atc:hover{transform:translateX(5px)}.atc:hover .ico{transform:rotate(-8deg)}}

/* reports */
.arp{border-radius:1.75rem;padding:1.1rem;max-width:52rem;margin:0 auto}
@media(min-width:640px){.arp{padding:2rem}}
.atT{margin-top:1.25rem;overflow-x:auto;border:1px solid var(--border);border-radius:1.1rem}
.atT table{width:100%;border-collapse:collapse;font-size:.85rem;min-width:24rem;animation:rvIn .5s cubic-bezier(.2,.7,.2,1) backwards}
.atT th{text-align:left;font:600 .75rem var(--font-d);color:var(--muted-fg);padding:.8rem 1rem;background:color-mix(in oklab,var(--foreground) 4%,transparent)}
.atT td{padding:.8rem 1rem;border-top:1px solid var(--border);font-variant-numeric:tabular-nums}
.atT td:first-child{font-weight:600}
@media(prefers-reduced-motion:reduce){.atf{animation:none}}

/* ====================================================================
   SITE OPERATIONS PAGE  (operations.html) — scoped to body.so / s* classes
   ==================================================================== */
body.so{--ok:oklch(0.78 0.17 150);--bad:oklch(0.68 0.22 25)}
html.light body.so{--ok:oklch(0.52 0.15 150);--bad:oklch(0.56 0.22 25)}
body.so .visual{height:auto!important;padding:1rem 0 1.5rem}
body.so .tilt3d{height:auto}
.up{color:var(--ok)}.dn{color:var(--bad)}

/* hero: live DPR sheet */
.sow{position:relative;z-index:2;width:min(100%,27rem);border-radius:1.75rem;padding:1.15rem;display:grid;gap:.9rem}
.sow .mps{gap:.4rem}
.soh{display:flex;justify-content:space-between;align-items:flex-start;gap:.75rem}
.soh small{font-size:.72rem;display:block}
.soh b{font:700 1.25rem var(--font-d)}
.sot{display:inline-flex;align-items:center;gap:.35rem;font-size:.72rem;font-weight:600;color:var(--primary);border:1px solid color-mix(in oklab,var(--primary) 40%,transparent);border-radius:999px;padding:.3rem .65rem;white-space:nowrap}
.sot i{display:inline-flex;width:.85rem;height:.85rem}.sot i svg{width:100%;height:100%}
.ssr{display:grid;gap:.45rem}
.srw{display:grid;grid-template-columns:auto 1fr auto;gap:.75rem;align-items:center;padding:.6rem .75rem;border-radius:.95rem;border:1px solid var(--border);animation:soIn .55s cubic-bezier(.2,.7,.2,1) backwards;animation-delay:calc(var(--d)*.09s)}
@keyframes soIn{from{opacity:0;transform:translateX(18px)}}
.srw .ico{width:2rem;height:2rem;border-radius:.65rem;font-size:.9rem}
.srw small{display:block;font-size:.68rem;color:var(--muted-fg)}
.srw b{display:block;font:600 .84rem/1.3 var(--font-d)}
.srw em{font-style:normal;font-size:.7rem;color:var(--muted-fg);font-variant-numeric:tabular-nums}
.spb{border-top:1px dashed var(--border);padding-top:.9rem}
.spl{display:flex;justify-content:space-between;align-items:baseline;font-size:.8rem;margin-bottom:.55rem}
.spl b{font-size:.8rem}
.spt{position:relative;height:.8rem;border-radius:9px;background:var(--border);overflow:hidden}
.spt i{position:absolute;inset:0 auto 0 0;width:var(--a,0%);background:var(--g-primary);border-radius:9px;transition:width .8s cubic-bezier(.2,.7,.2,1)}
.spt u{position:absolute;top:0;bottom:0;left:var(--p,0%);width:3px;background:var(--foreground);border-radius:2px;transition:left .8s cubic-bezier(.2,.7,.2,1)}
.spn{display:flex;justify-content:space-between;font-size:.72rem;color:var(--muted-fg);margin-top:.4rem}

/* day timeline */
.stl{position:relative;max-width:50rem;margin:0 auto;padding-left:2.6rem}
.stl::before{content:"";position:absolute;left:.85rem;top:.5rem;bottom:.5rem;width:2px;background:linear-gradient(var(--primary),color-mix(in oklab,var(--primary) 8%,transparent))}
.sti{position:relative;padding-bottom:1rem}
.sti::before{content:"";position:absolute;left:-2.08rem;top:1.55rem;width:.9rem;height:.9rem;border-radius:50%;background:var(--background);border:3px solid var(--primary);box-shadow:0 0 0 5px color-mix(in oklab,var(--primary) 16%,transparent)}
.sti .c{display:grid;grid-template-columns:auto 1fr auto;gap:1rem;align-items:center;padding:1rem 1.2rem;border-radius:1.35rem;transition:transform .35s,border-color .35s}
.sti .ico{width:2.6rem;height:2.6rem;border-radius:.9rem;font-size:1.1rem;box-shadow:var(--s-ember);transition:transform .35s}
.sti b{display:block;font:600 1rem/1.3 var(--font-d)}
.sti small{font-size:.8rem;color:var(--muted-fg);line-height:1.45}
.sti .tm{font:600 .75rem var(--font-d);color:var(--primary);white-space:nowrap}
@media(max-width:520px){.sti .c{grid-template-columns:auto 1fr}.sti .tm{grid-column:2}}
@media(hover:hover){.sti .c:hover{transform:translateX(6px);border-color:color-mix(in oklab,var(--primary) calc(45% * var(--ts)),transparent)}.sti .c:hover .ico{transform:rotate(-8deg)}}

/* progress vs plan */
.spp{border-radius:1.75rem;padding:1.1rem;max-width:50rem;margin:0 auto}
@media(min-width:640px){.spp{padding:2rem}}
.tb u{position:absolute;top:0;bottom:0;left:var(--p,0%);width:3px;background:var(--foreground);border-radius:2px;transition:left .5s cubic-bezier(.2,.7,.2,1)}
.spo{margin-top:1.1rem;padding:.8rem 1rem;border-radius:1rem;border:1px solid var(--border);font-size:.85rem;font-weight:600;display:flex;justify-content:space-between;gap:.5rem;flex-wrap:wrap}
@media(prefers-reduced-motion:reduce){.srw{animation:none}}

/* ====================================================================
   PROCUREMENT PAGE  (procurement.html) — scoped to body.pr / p*, q* classes
   ==================================================================== */
body.pr{--ok:oklch(0.78 0.17 150)}
html.light body.pr{--ok:oklch(0.52 0.15 150)}
body.pr .visual{height:auto!important;padding:1rem 0 1.5rem}
body.pr .tilt3d{height:auto}

/* hero: purchase journey */
.prw{position:relative;z-index:2;width:min(100%,27rem);border-radius:1.75rem;padding:1.15rem;display:grid;gap:.85rem}
.prw .mps{gap:.4rem}
.prh{display:flex;justify-content:space-between;align-items:center;font-size:.75rem}
.prs{font-weight:600;color:var(--primary);font-variant-numeric:tabular-nums}
.prl{display:grid;gap:.4rem}
.prr{display:grid;grid-template-columns:auto 1fr auto;gap:.75rem;align-items:center;padding:.55rem .75rem;border-radius:.95rem;border:1px solid var(--border);opacity:.5;transition:opacity .4s,border-color .4s,box-shadow .4s}
.prr .ico{width:2rem;height:2rem;border-radius:.65rem;font-size:.9rem;background:color-mix(in oklab,var(--foreground) 10%,transparent);color:var(--muted-fg);transition:.4s}
.prr b{display:block;font:600 .84rem var(--font-d)}
.prr small{display:block;font-size:.7rem;color:var(--muted-fg);line-height:1.35}
.prr .pt{font-size:.68rem;font-weight:600;color:var(--muted-fg)}
.prr.done{opacity:1}
.prr.done .ico{background:var(--ok);color:var(--background)}
.prr.done .pt{color:var(--ok)}
.prr.now{opacity:1;border-color:var(--primary);box-shadow:var(--s-ember)}
.prr.now .ico{background:var(--g-primary);color:var(--primary-fg,#fff)}
.prr.now .pt{color:var(--primary)}
.prb{height:.4rem;border-radius:9px;background:var(--border);overflow:hidden}
.prb i{display:block;height:100%;width:0;background:var(--g-primary);border-radius:9px;transition:width .6s cubic-bezier(.2,.7,.2,1)}

/* quotation comparison */
.qg{display:grid;gap:1.1rem;max-width:62rem;margin:0 auto}
@media(min-width:760px){.qg{grid-template-columns:repeat(3,1fr)}}
.qc{position:relative;border-radius:1.6rem;padding:1.4rem;display:grid;gap:.7rem;align-content:start;transition:transform .45s cubic-bezier(.2,.7,.2,1),border-color .4s,box-shadow .4s}
.qc h4{font:600 1.05rem var(--font-d)}
.qc .qp{font:700 2.1rem/1.1 var(--font-d);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.qc .r{display:flex;justify-content:space-between;gap:.5rem;font-size:.85rem;padding:.5rem .7rem;border-radius:.7rem;color:var(--muted-fg);transition:.35s}
.qc .r.hl{background:color-mix(in oklab,var(--primary) 15%,transparent);color:var(--foreground);font-weight:600}
.qs{height:.5rem;border-radius:9px;background:var(--border);position:relative;overflow:hidden}
.qs i{position:absolute;inset:0 auto 0 0;width:var(--w);background:var(--g-primary);border-radius:9px}
.qb{position:absolute;top:-.75rem;right:1.2rem;padding:.25rem .7rem;border-radius:999px;font-size:.7rem;font-weight:700;background:var(--g-primary);color:var(--primary-fg,#fff);opacity:0;transform:translateY(6px);transition:.4s}
.qc.win{border-color:var(--primary);box-shadow:var(--s-ember)}
.qc.win .qb{opacity:1;transform:none}
@media(min-width:760px){.qc.win{transform:translateY(-8px)}}

/* suite columns */
.pcg{display:grid;gap:1rem}
@media(min-width:700px){.pcg{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1100px){.pcg{grid-template-columns:repeat(4,1fr)}}
.pcl{border-radius:1.6rem;padding:1.3rem 1.2rem .4rem;align-self:start}
.pcl h3{font-size:1.15rem}
.pcl .pk{display:block;font-size:.7rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--primary);margin-bottom:.15rem}
.pcl .atc{padding:.85rem 0}

/* ====================================================================
   MATERIALS PAGE  (materials.html) — scoped to body.mt / mt*, lg* classes
   ==================================================================== */
body.mt{--ok:oklch(0.78 0.17 150);--bad:oklch(0.68 0.22 25);--warn:oklch(0.82 0.16 80)}
html.light body.mt{--ok:oklch(0.52 0.15 150);--bad:oklch(0.56 0.22 25);--warn:oklch(0.6 0.15 70)}
body.mt .visual{height:auto!important;padding:1rem 0 1.5rem}
body.mt .tilt3d{height:auto}
body.mt .chip.c1{top:.2rem;right:0}
@media(max-width:480px){body.mt .chip.c1{right:-.25rem;top:-.6rem}}

/* hero: stock tank */
.mtw{position:relative;z-index:2;width:min(100%,27rem);border-radius:1.75rem;padding:1.15rem;display:grid;gap:1rem}
.mtw .mps{gap:.4rem}
.mtb{display:grid;grid-template-columns:auto 1fr;gap:1.4rem;align-items:center}
.mtk{position:relative;width:5.4rem;height:12.5rem;border-radius:1.3rem;border:1px solid var(--border);overflow:hidden;background:color-mix(in oklab,var(--foreground) 4%,transparent)}
.mtf{position:absolute;inset:auto 0 0 0;height:var(--h,50%);background:linear-gradient(180deg,var(--primary-glow),var(--primary));transition:height .8s cubic-bezier(.2,.7,.2,1),background .4s}
.mtk.near .mtf{background:linear-gradient(180deg,var(--warn),color-mix(in oklab,var(--warn) 70%,var(--primary)))}
.mtk.low .mtf{background:linear-gradient(180deg,var(--bad),color-mix(in oklab,var(--bad) 70%,var(--primary)))}
.mtr{position:absolute;left:0;right:0;bottom:var(--r,30%);border-top:2px dashed var(--foreground);transition:bottom .6s}
.mtr small{position:absolute;right:.4rem;bottom:.1rem;font-size:.6rem;font-weight:700;color:var(--foreground);mix-blend-mode:normal;text-shadow:0 0 6px var(--background)}
.mtn{display:grid;gap:.75rem}
.mtn small{display:block;font-size:.72rem}
.mtn b{font:700 1.15rem var(--font-d);font-variant-numeric:tabular-nums}
.mtn div:first-child b{font-size:2rem;line-height:1.1}
.mta{display:flex;gap:.5rem;flex-wrap:wrap}
.mta .wc{flex:1 1 0;justify-content:center}
.mtx{display:flex;align-items:center;gap:.6rem;padding:.8rem 1rem;border-radius:1rem;font-size:.82rem;font-weight:600;border:1px solid var(--ok);color:var(--ok);background:color-mix(in oklab,var(--ok) 10%,transparent);transition:.4s;min-height:3.2rem}
.mtx i{display:inline-flex;width:1.1rem;height:1.1rem;flex:none}.mtx i svg{width:100%;height:100%}
.mtx.warn{border-color:var(--warn);color:var(--warn);background:color-mix(in oklab,var(--warn) 10%,transparent)}
.mtx.low{border-color:var(--bad);color:var(--bad);background:color-mix(in oklab,var(--bad) 10%,transparent)}

/* accounted-for ledger */
.lgd{border-radius:1.75rem;padding:1.1rem;max-width:52rem;margin:0 auto}
@media(min-width:640px){.lgd{padding:2rem}}
.lgk{display:grid;grid-template-columns:1fr 1fr;gap:.75rem;margin:1.4rem 0}
.lgk>div{border:1px solid var(--border);border-radius:1.1rem;padding:1rem;background:color-mix(in oklab,var(--foreground) 3%,transparent)}
.lgk small{display:block;font-size:.75rem}
.lgk b{font:700 2.1rem/1.15 var(--font-d);font-variant-numeric:tabular-nums}
.lgb{display:flex;gap:3px;height:2.1rem;border-radius:10px;overflow:hidden}
.lgb i{flex:1 1 0;min-width:0;transition:flex-grow .7s cubic-bezier(.2,.7,.2,1)}
.s0{background:var(--primary)}
.s1{background:color-mix(in oklab,var(--primary) 62%,transparent)}
.s2{background:color-mix(in oklab,var(--primary) 34%,transparent)}
.s3{background:var(--warn)}
.s4{background:repeating-linear-gradient(135deg,var(--bad) 0 6px,color-mix(in oklab,var(--bad) 55%,transparent) 6px 12px)}
.lgl{list-style:none;display:grid;gap:.55rem;margin-top:1.1rem;grid-template-columns:1fr}
@media(min-width:560px){.lgl{grid-template-columns:repeat(2,1fr);column-gap:2rem}}
.lgl li{display:grid;grid-template-columns:auto 1fr auto;gap:.6rem;align-items:center;font-size:.85rem}
.lgl li i{width:.75rem;height:.75rem;border-radius:3px}
.lgl li b{font-variant-numeric:tabular-nums}

/* capability filter grid */
.mcg2{display:grid;gap:.9rem;grid-template-columns:1fr}
@media(min-width:560px){.mcg2{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1024px){.mcg2{grid-template-columns:repeat(4,1fr)}}
.mtc{display:flex;flex-direction:column;gap:.7rem;padding:1.25rem;border-radius:1.4rem;transition:opacity .4s,transform .4s,border-color .35s}
.mtc .ico{width:2.6rem;height:2.6rem;border-radius:.9rem;font-size:1.1rem;box-shadow:var(--s-ember)}
.mtc em{font-style:normal;font-size:.65rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--primary)}
.mtc b{font:600 1rem/1.25 var(--font-d)}
.mtc small{font-size:.8rem;line-height:1.5;color:var(--muted-fg)}
.mtc.dim{opacity:.2;transform:scale(.96)}
@media(hover:hover){.mtc:not(.dim):hover{transform:translateY(-5px);border-color:color-mix(in oklab,var(--primary) calc(45% * var(--ts)),transparent)}}

/* ====================================================================
   MACHINERY PAGE  (machinery.html) — scoped to body.mc / mc*, md* classes
   ==================================================================== */
body.mc{--ok:oklch(0.78 0.17 150);--bad:oklch(0.68 0.22 25)}
html.light body.mc{--ok:oklch(0.52 0.15 150);--bad:oklch(0.56 0.22 25)}
body.mc .visual{height:auto!important;padding:1rem 0 1.5rem}
body.mc .tilt3d{height:auto}

/* hero: fleet day strip */
.mcf{position:relative;z-index:2;width:min(100%,29rem);border-radius:1.75rem;padding:1.15rem;display:grid;gap:.8rem}
.mch small{display:block;font-size:.72rem}
.mch b{font:700 1.3rem var(--font-d)}
.mcl{display:flex;flex-wrap:wrap;gap:.4rem 1rem;font-size:.72rem;color:var(--muted-fg)}
.mcl span{display:inline-flex;align-items:center;gap:.4rem}
.mcl i{width:.7rem;height:.7rem;border-radius:3px}
.mcl .w,.mct .w{background:var(--g-primary)}
.mcl .i,.mct .i{background:color-mix(in oklab,var(--foreground) 22%,transparent)}
.mcl .b,.mct .b{background:repeating-linear-gradient(135deg,var(--bad) 0 5px,color-mix(in oklab,var(--bad) 55%,transparent) 5px 10px)}
#mcr{display:grid;gap:.45rem}
.mcr{display:grid;grid-template-columns:5.4rem 1fr;gap:.75rem;align-items:center;text-align:left;width:100%;padding:.4rem .5rem;border-radius:.9rem;border:1px solid transparent;color:inherit;transition:.3s}
.mcr b{display:block;font:600 .8rem var(--font-d)}
.mcr small{display:block;font-size:.66rem;color:var(--muted-fg)}
.mct{position:relative;height:1.55rem;border-radius:.6rem;background:var(--border);overflow:hidden}
.mct i{position:absolute;top:0;bottom:0;left:var(--l);width:var(--w);transform-origin:left;animation:mcg .7s cubic-bezier(.2,.7,.2,1) backwards;animation-delay:calc(var(--k)*.05s)}
@keyframes mcg{from{transform:scaleX(0)}}
.mcr.on{border-color:var(--primary);background:color-mix(in oklab,var(--primary) 8%,transparent)}
@media(hover:hover){.mcr:hover{border-color:color-mix(in oklab,var(--primary) 50%,transparent)}}
.mcx{display:flex;justify-content:space-between;margin-left:6.4rem;font-size:.65rem;color:var(--muted-fg)}
.mcd{display:grid;grid-template-columns:repeat(4,1fr);gap:.45rem;border-top:1px dashed var(--border);padding-top:.8rem}
.mcd div{text-align:center}
.mcd b{display:block;font:700 1.1rem var(--font-d);font-variant-numeric:tabular-nums}
.mcd small{font-size:.65rem;color:var(--muted-fg)}
@media(max-width:380px){.mcr{grid-template-columns:4.4rem 1fr}.mcx{margin-left:5.4rem}}

/* diesel theft chart */
.mdg{border-radius:1.75rem;padding:1.1rem;max-width:52rem;margin:0 auto}
@media(min-width:640px){.mdg{padding:2rem}}
.mdk{display:grid;grid-template-columns:1fr 1fr;gap:.75rem;margin:1.4rem 0 1rem}
.mdk>div{border:1px solid var(--border);border-radius:1.1rem;padding:1rem;background:color-mix(in oklab,var(--foreground) 3%,transparent);transition:.4s}
.mdk small{display:block;font-size:.75rem;color:var(--muted-fg)}
.mdk b{font:700 1.9rem/1.15 var(--font-d);font-variant-numeric:tabular-nums}
.mdk .bad{border-color:var(--bad)}.mdk .bad b{color:var(--bad)}
.mdc svg{width:100%;height:auto;display:block}
.mdc text{fill:var(--muted-fg);font-size:11px;font-family:var(--font-b,inherit)}
.mdc .gl{stroke:var(--border)}
.mdc path{fill:none;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.mdc .exp{stroke:var(--primary);transition:stroke .4s}
.mdc.on .exp{stroke:var(--muted-fg);stroke-dasharray:6 6;stroke-width:2}
.mdc .act{stroke:var(--primary);opacity:0;transition:opacity .5s}
.mdc .flag{opacity:0;transition:opacity .5s}
.mdc.on .act,.mdc.on .flag{opacity:1}
.mdc .flag circle{fill:var(--bad)}
.mdc .flag .pl{fill:var(--bad);opacity:.3;animation:mdp 1.6s ease-out infinite;transform-origin:center;transform-box:fill-box}
@keyframes mdp{to{transform:scale(2.6);opacity:0}}
.mdc .flag text{fill:var(--bad);font-weight:700;font-size:11.5px}
.mdn{margin-top:1rem;padding:.85rem 1rem;border-radius:1rem;border:1px solid var(--border);font-size:.85rem;font-weight:600;color:var(--muted-fg);transition:.4s}
.mdn.bad{border-color:var(--bad);color:var(--bad);background:color-mix(in oklab,var(--bad) 10%,transparent)}

/* capability accordion */
.mac-w{max-width:52rem;margin:0 auto;display:grid;gap:.8rem}
.mac{border-radius:1.5rem;overflow:hidden}
.mah{display:flex;align-items:center;gap:.9rem;width:100%;padding:1.1rem 1.3rem;text-align:left;color:inherit;font:600 1.05rem var(--font-d)}
.mah span{flex:1}
.mah em{font-style:normal;font-size:.72rem;font-weight:600;color:var(--primary);border:1px solid color-mix(in oklab,var(--primary) 40%,transparent);border-radius:999px;padding:.2rem .6rem}
.mah svg{width:1.2rem;height:1.2rem;transition:transform .35s}
.mac.open .mah svg{transform:rotate(180deg)}
.mab{display:grid;grid-template-rows:0fr;transition:grid-template-rows .45s cubic-bezier(.2,.7,.2,1)}
.mac.open .mab{grid-template-rows:1fr}
.mab>div{overflow:hidden;padding:0 1.3rem}
.mab .atc:last-child{padding-bottom:1.2rem}
@media(prefers-reduced-motion:reduce){.mct i,.mdc .flag .pl{animation:none}}

/* ====================================================================
   ASSETS PAGE  (assets.html) — scoped to body.as / as*, al*, ab* classes
   ==================================================================== */
body.as{--ok:oklch(0.78 0.17 150);--warn:oklch(0.82 0.16 80)}
html.light body.as{--ok:oklch(0.52 0.15 150);--warn:oklch(0.6 0.15 70)}
body.as .visual{height:auto!important;padding:1rem 0 1.5rem}
body.as .tilt3d{height:auto}

/* hero: scannable tag */
.asw{position:relative;z-index:2;width:min(100%,27rem);border-radius:1.75rem;padding:1.15rem;display:grid;gap:.9rem}
.asw .mps{gap:.4rem}
.ash{display:grid;grid-template-columns:auto 1fr;gap:1.1rem;align-items:center}
.asq{position:relative;width:8.2rem;height:8.2rem;padding:.5rem;border-radius:1rem;background:#fff;overflow:hidden;box-shadow:var(--s-ember)}
.asq svg{display:block;width:100%;height:100%}
.asq::after{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:var(--primary);box-shadow:0 0 14px 4px var(--primary);opacity:0}
.asq.scan::after{animation:asS 1.1s ease-in-out}
@keyframes asS{0%{top:0;opacity:1}100%{top:100%;opacity:1}}
.asi small{display:block;font-size:.72rem}
.asi>b{display:block;font:700 1.2rem/1.2 var(--font-d);margin:.1rem 0 .5rem}
.ass{display:inline-block;font-size:.7rem;font-weight:700;padding:.25rem .65rem;border-radius:999px;color:var(--ok);background:color-mix(in oklab,var(--ok) 14%,transparent);border:1px solid color-mix(in oklab,var(--ok) 40%,transparent)}
.ass.st-w{color:var(--warn);background:color-mix(in oklab,var(--warn) 14%,transparent);border-color:color-mix(in oklab,var(--warn) 40%,transparent)}
.ass.st-n{color:var(--primary);background:color-mix(in oklab,var(--primary) 12%,transparent);border-color:color-mix(in oklab,var(--primary) 40%,transparent)}
.aso{display:grid;grid-template-columns:1fr 1fr;gap:.6rem;margin-top:.7rem}
.aso b{display:block;font:600 .8rem/1.3 var(--font-d)}
.asl{display:grid;gap:.1rem;border-top:1px dashed var(--border);padding-top:.8rem;min-height:11rem}
.asr{position:relative;display:grid;grid-template-columns:1fr auto;gap:.6rem;padding:.4rem 0 .4rem 1.4rem;font-size:.82rem;animation:soIn .5s cubic-bezier(.2,.7,.2,1) backwards;animation-delay:calc(var(--d)*.12s)}
.asr::before{content:"";position:absolute;left:.2rem;top:.75rem;width:.55rem;height:.55rem;border-radius:50%;background:var(--primary)}
.asr::after{content:"";position:absolute;left:.4rem;top:1.3rem;bottom:-.3rem;width:1px;background:var(--border)}
.asr:last-child::after{display:none}
.asr b{font-weight:600}
.asr em{font-style:normal;font-size:.7rem;color:var(--muted-fg);font-variant-numeric:tabular-nums}
@media(max-width:400px){.ash{grid-template-columns:1fr;justify-items:start}}

/* asset life */
.alf{border-radius:1.75rem;padding:1.1rem;max-width:52rem;margin:0 auto}
@media(min-width:640px){.alf{padding:2rem}}
.alk{display:grid;grid-template-columns:1fr;gap:.7rem;margin:1.4rem 0 1rem}
@media(min-width:640px){.alk{grid-template-columns:repeat(3,1fr)}}
.alk>div{border:1px solid var(--border);border-radius:1.1rem;padding:1rem;background:color-mix(in oklab,var(--foreground) 3%,transparent)}
.alk small{display:block;font-size:.75rem;color:var(--muted-fg)}
.alk b{font:700 1.45rem/1.2 var(--font-d);font-variant-numeric:tabular-nums}
.alk .ok b{color:var(--ok)}.alk .wn b{color:var(--warn)}
.alc svg{width:100%;height:auto;display:block}
.alc text{fill:var(--muted-fg);font-size:11px}
.alc .gl{stroke:var(--border)}
.alc .wb{fill:color-mix(in oklab,var(--primary) 12%,transparent)}
.alc .wt{fill:var(--primary);font-weight:700}
.alc .cv{fill:none;stroke:var(--primary);stroke-width:3;stroke-linecap:round}
.alc .sv{fill:var(--warn)}
.alc .cu{stroke:var(--foreground);stroke-width:1.5;stroke-dasharray:4 4}
.alc .cd{fill:var(--primary);stroke:var(--background);stroke-width:3}
.alf .mpr{margin-top:1rem}

/* capability bento */
.abg{display:grid;gap:.9rem}
@media(min-width:900px){.abg{grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(3,auto)}.abb{grid-column:1/3;grid-row:1/4}}
.abc,.abb{border-radius:1.5rem;padding:1.3rem;display:flex;flex-direction:column;gap:.7rem;transition:transform .35s,border-color .35s}
@media(min-width:900px){.abc{grid-column:span 2}}
.abc .ico{width:2.6rem;height:2.6rem;border-radius:.9rem;font-size:1.1rem;box-shadow:var(--s-ember)}
.abc b{font:600 1rem/1.25 var(--font-d)}
.abc small,.abb small{font-size:.82rem;line-height:1.5;color:var(--muted-fg)}
.abb{align-items:flex-start;justify-content:space-between;padding:1.6rem}
.abb h3{font-size:1.5rem;margin:.2rem 0}
.abq{width:min(100%,13rem);aspect-ratio:1;padding:.7rem;border-radius:1.2rem;background:#fff;box-shadow:var(--s-ember);align-self:center;margin:.6rem 0;transition:transform .5s}
.abq svg{display:block;width:100%;height:100%}
@media(hover:hover){.abc:hover{transform:translateY(-5px);border-color:color-mix(in oklab,var(--primary) calc(45% * var(--ts)),transparent)}.abb:hover .abq{transform:rotate(-4deg) scale(1.04)}}
@media(prefers-reduced-motion:reduce){.asq.scan::after,.asr{animation:none}}

/* ====================================================================
   PAYMENTS PAGE  (payments.html) — scoped to body.pm / pm*, bg*, pv* classes
   ==================================================================== */
body.pm{--ok:oklch(0.78 0.17 150);--bad:oklch(0.68 0.22 25)}
html.light body.pm{--ok:oklch(0.52 0.15 150);--bad:oklch(0.56 0.22 25)}
body.pm .visual{height:auto!important;padding:1rem 0 1.5rem}
body.pm .tilt3d{height:auto}

/* hero: approval relay */
.pmw{position:relative;z-index:2;width:min(100%,27rem);border-radius:1.75rem;padding:1.15rem;display:grid;gap:.9rem}
.pmh{display:flex;justify-content:space-between;align-items:flex-start;gap:.75rem}
.pmh small{display:block;font-size:.7rem}
.pmh b{font:600 .95rem/1.3 var(--font-d)}
.pms{font-size:.7rem;font-weight:700;padding:.3rem .7rem;border-radius:999px;white-space:nowrap;color:var(--primary);border:1px solid color-mix(in oklab,var(--primary) 45%,transparent);background:color-mix(in oklab,var(--primary) 10%,transparent);transition:.4s}
.pms.ok{color:var(--ok);border-color:color-mix(in oklab,var(--ok) 50%,transparent);background:color-mix(in oklab,var(--ok) 12%,transparent)}
.pma{font:700 2.5rem/1 var(--font-d);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.pmc{display:flex;flex-wrap:wrap;gap:.4rem}
.pmc span{display:inline-flex;align-items:center;gap:.35rem;font-size:.72rem;padding:.3rem .65rem;border-radius:999px;border:1px solid var(--border);color:var(--muted-fg)}
.pmc i{display:inline-flex;width:.85rem;height:.85rem}.pmc i svg{width:100%;height:100%}
.pmn{display:grid;grid-template-columns:repeat(4,1fr);gap:.3rem;position:relative}
.pnd{display:grid;justify-items:center;gap:.3rem;text-align:center}
.pnd u{width:2.6rem;height:2.6rem;border-radius:50%;display:grid;place-items:center;text-decoration:none;font:700 .8rem var(--font-d);background:color-mix(in oklab,var(--foreground) 9%,transparent);color:var(--muted-fg);border:2px solid transparent;transition:.4s}
.pnd u svg{width:1.1rem;height:1.1rem}
.pnd small{font-size:.65rem;line-height:1.25;color:var(--muted-fg)}
.pnd b{display:block;font:600 .72rem var(--font-d)}
.pnd.done u{background:var(--ok);color:var(--background)}
.pnd.now u{border-color:var(--primary);color:var(--primary);box-shadow:0 0 0 5px color-mix(in oklab,var(--primary) 18%,transparent);animation:pmP 1.8s ease-in-out infinite}
@keyframes pmP{50%{box-shadow:0 0 0 9px color-mix(in oklab,var(--primary) 6%,transparent)}}
.pmb{height:.4rem;border-radius:9px;background:var(--border);overflow:hidden}
.pmb i{display:block;height:100%;width:0;background:var(--g-primary);border-radius:9px;transition:width .6s cubic-bezier(.2,.7,.2,1)}
.pmu{min-height:2.7rem;display:flex;align-items:center;gap:.6rem;padding:.65rem .9rem;border-radius:.95rem;border:1px dashed var(--border);font-size:.78rem;color:var(--muted-fg);transition:.4s}
.pmu.ok{border:1px solid var(--ok);color:var(--ok);background:color-mix(in oklab,var(--ok) 10%,transparent);font-weight:600}
.pmu b{font-variant-numeric:tabular-nums;letter-spacing:.04em}

/* budget guard */
.bgd{border-radius:1.75rem;padding:1.1rem;max-width:52rem;margin:0 auto}
@media(min-width:640px){.bgd{padding:2rem}}
.bgk{display:grid;grid-template-columns:1fr;gap:.7rem;margin:1.4rem 0 1.2rem}
@media(min-width:640px){.bgk{grid-template-columns:repeat(3,1fr)}}
.bgk>div{border:1px solid var(--border);border-radius:1.1rem;padding:1rem;background:color-mix(in oklab,var(--foreground) 3%,transparent);transition:.4s}
.bgk small{display:block;font-size:.75rem;color:var(--muted-fg)}
.bgk b{font:700 1.6rem/1.2 var(--font-d);font-variant-numeric:tabular-nums}
.bgk .ov{border-color:var(--bad)}.bgk .ov b{color:var(--bad)}
.bgt{position:relative;display:flex;height:1.9rem;border-radius:10px;background:var(--border);overflow:hidden}
.bgt i{height:100%;width:0;transition:width .6s cubic-bezier(.2,.7,.2,1),background .4s}
.bgt .p,.bgl .p{background:var(--primary)}
.bgt .q,.bgl .q{background:repeating-linear-gradient(135deg,color-mix(in oklab,var(--primary) 60%,transparent) 0 5px,color-mix(in oklab,var(--primary) 25%,transparent) 5px 10px)}
.bgt .r,.bgl .r{background:var(--ok)}
.bgt.ov .r{background:var(--bad)}
.bgt u{position:absolute;top:0;bottom:0;left:80%;width:3px;background:var(--foreground);text-decoration:none}
.bgl{display:flex;flex-wrap:wrap;gap:.4rem 1rem;margin-top:.7rem;font-size:.72rem;color:var(--muted-fg)}
.bgl span{display:inline-flex;align-items:center;gap:.4rem}.bgl i{width:.7rem;height:.7rem;border-radius:3px}
.bgn{margin-top:1rem;padding:.85rem 1rem;border-radius:1rem;border:1px solid var(--ok);color:var(--ok);background:color-mix(in oklab,var(--ok) 10%,transparent);font-size:.85rem;font-weight:600;transition:.4s}
.bgn.ov{border-color:var(--bad);color:var(--bad);background:color-mix(in oklab,var(--bad) 10%,transparent)}

/* payment voucher */
.pvc{position:relative;max-width:56rem;margin:0 auto;border-radius:1.75rem;padding:1.4rem 1.25rem 2.2rem;overflow:hidden}
@media(min-width:640px){.pvc{padding:2rem 2.4rem 2.6rem}}
.pvc::before,.pvc::after{content:"";position:absolute;top:0;bottom:0;width:10px;background:radial-gradient(circle at center,var(--background) 4px,transparent 5px) 0 0/10px 20px repeat-y}
.pvc::before{left:-5px}.pvc::after{right:-5px}
.pvh{display:flex;justify-content:space-between;align-items:baseline;gap:.5rem;flex-wrap:wrap;padding-bottom:.9rem;border-bottom:2px dashed var(--border)}
.pvh b{font:700 1.2rem var(--font-d)}
.pvg{display:grid;column-gap:2.4rem}
@media(min-width:760px){.pvg{grid-template-columns:1fr 1fr}}
.pvr{display:grid;grid-template-columns:auto 1fr auto;gap:.9rem;align-items:center;padding:.9rem 0;border-bottom:1px dotted var(--border);transition:transform .3s}
.pvr .ico{width:2.3rem;height:2.3rem;border-radius:.8rem;font-size:1rem;box-shadow:var(--s-ember)}
.pvr b{display:block;font:600 .95rem/1.3 var(--font-d)}
.pvr small{font-size:.78rem;line-height:1.45;color:var(--muted-fg)}
.pvr em{display:grid;place-items:center;width:1.5rem;height:1.5rem;border-radius:50%;background:color-mix(in oklab,var(--ok) 18%,transparent);color:var(--ok)}
.pvr em svg{width:.9rem;height:.9rem}
@media(hover:hover){.pvr:hover{transform:translateX(5px)}}
.pvs{position:absolute;right:1.6rem;bottom:.9rem;padding:.25rem .9rem;border:3px solid var(--ok);color:var(--ok);border-radius:.5rem;font:800 1.15rem var(--font-d);letter-spacing:.14em;text-transform:uppercase;transform:rotate(-8deg) scale(1.6);opacity:0;transition:transform .5s cubic-bezier(.2,.9,.3,1.3),opacity .3s .1s;background:color-mix(in oklab,var(--ok) 8%,transparent)}
.pvs.in{opacity:.92;transform:rotate(-8deg) scale(1)}
@media(prefers-reduced-motion:reduce){.pnd.now u{animation:none}}

/* ====================================================================
   HR PAGE  (hr.html) — scoped to body.hr / hr*, hc*, hs*, hl* classes
   ==================================================================== */
body.hr{--ok:oklch(0.78 0.17 150);--bad:oklch(0.68 0.22 25)}
html.light body.hr{--ok:oklch(0.52 0.15 150);--bad:oklch(0.56 0.22 25)}
body.hr .visual{height:auto!important;padding:1rem 0 1.5rem}
body.hr .tilt3d{height:auto}

/* hero: leave calendar */
.hrw{position:relative;z-index:2;width:min(100%,27rem);border-radius:1.75rem;padding:1.15rem;display:grid;gap:.8rem}
.hrw .mps{gap:.4rem}
.hrh{display:flex;justify-content:space-between;align-items:flex-end}
.hrh small{display:block;font-size:.72rem}
.hrh b{font:700 1.3rem var(--font-d)}
.hrt{font-size:.7rem}
.hcg{display:grid;grid-template-columns:repeat(7,1fr);gap:.3rem}
.hcg .wd{text-align:center;font-size:.66rem;font-weight:600;color:var(--muted-fg);padding-bottom:.2rem}
.hcd{position:relative;aspect-ratio:1;display:grid;place-items:center;border-radius:.7rem;font:600 .82rem var(--font-d);color:inherit;border:1px solid transparent;font-variant-numeric:tabular-nums;transition:background .25s,border-color .25s,transform .2s}
.hcd.e{visibility:hidden}
.hcd.sun{color:var(--muted-fg);background:color-mix(in oklab,var(--foreground) 5%,transparent)}
.hcd.hol::after{content:"";position:absolute;bottom:.28rem;width:.35rem;height:.35rem;border-radius:50%;background:var(--primary)}
.hcd.hol{background:color-mix(in oklab,var(--primary) 14%,transparent)}
.hcd.td{border-color:var(--foreground)}
.hcd.in{background:color-mix(in oklab,var(--primary) 26%,transparent);border-color:color-mix(in oklab,var(--primary) 50%,transparent)}
.hcd.st{background:var(--g-primary);color:var(--primary-fg,#fff);border-color:transparent}
.hcd.ls{background:var(--ok);color:var(--background)}
@media(hover:hover){.hcd:not(.e):hover{transform:scale(1.08);border-color:var(--primary)}}
.hcl{display:flex;flex-wrap:wrap;gap:.3rem .9rem;font-size:.68rem;color:var(--muted-fg)}
.hcl span{display:inline-flex;align-items:center;gap:.35rem}.hcl i{width:.65rem;height:.65rem;border-radius:3px}
.hcl .h{background:color-mix(in oklab,var(--primary) 40%,transparent)}.hcl .s{background:color-mix(in oklab,var(--foreground) 18%,transparent)}.hcl .l{background:var(--ok)}.hcl .x{background:var(--primary)}
.hrn{font-size:.8rem;color:var(--muted-fg);min-height:2.4rem;line-height:1.45}
.hrn.bad{color:var(--bad)}
.hrx{min-height:2.7rem;display:flex;align-items:center;gap:.6rem;padding:.65rem .9rem;border-radius:.95rem;border:1px dashed var(--border);font-size:.78rem;color:var(--muted-fg);transition:.4s}
.hrx.ok{border:1px solid var(--ok);color:var(--ok);background:color-mix(in oklab,var(--ok) 10%,transparent);font-weight:600}
#hra[disabled]{opacity:.45;pointer-events:none}

/* salary and increments */
.hsd{border-radius:1.75rem;padding:1.1rem;max-width:52rem;margin:0 auto}
@media(min-width:640px){.hsd{padding:2rem}}
.hsk{display:grid;grid-template-columns:1fr 1fr;gap:.7rem;margin-bottom:1rem}
.hsk>div{border:1px solid var(--border);border-radius:1.1rem;padding:1rem;background:color-mix(in oklab,var(--foreground) 3%,transparent)}
.hsk small{display:block;font-size:.75rem;color:var(--muted-fg)}
.hsk b{font:700 1.55rem/1.2 var(--font-d);font-variant-numeric:tabular-nums}
.hsc svg{width:100%;height:auto;display:block}
.hsc text{fill:var(--muted-fg);font-size:11px}
.hsc .hl{fill:none;stroke:var(--primary);stroke-width:3;stroke-linejoin:round;stroke-linecap:round}
.hsc .hp{fill:none;stroke:var(--primary);stroke-width:3;stroke-dasharray:6 6;stroke-linecap:round}
.hsc .hd{fill:var(--primary);stroke:var(--background);stroke-width:3}
.hsc .hn{fill:var(--background);stroke:var(--primary);stroke-width:3}
.hsc .pc{fill:var(--ok);font-weight:700}
.hsc .gl{stroke:var(--border)}
.hsd .lgb{height:1.7rem}

/* lifecycle lanes */
.hlp{position:relative;display:grid;gap:1.4rem}
@media(min-width:1000px){.hlp{grid-template-columns:repeat(4,1fr);gap:1rem;padding-top:2.2rem}.hlp::before{content:"";position:absolute;top:.55rem;left:4%;right:4%;height:2px;background:linear-gradient(90deg,var(--primary),color-mix(in oklab,var(--primary) 10%,transparent))}}
.hlc{position:relative;border-radius:1.6rem;padding:1.3rem 1.2rem .4rem;align-self:start}
@media(min-width:1000px){.hlc::before{content:"";position:absolute;top:-2.05rem;left:1.4rem;width:.95rem;height:.95rem;border-radius:50%;background:var(--background);border:3px solid var(--primary);box-shadow:0 0 0 5px color-mix(in oklab,var(--primary) 16%,transparent)}}
.hlc .pk{display:block;font-size:.7rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--primary)}
.hlc h3{font-size:1.15rem;margin-bottom:.3rem}
.hlc .atc{padding:.85rem 0}

/* ====================================================================
   SUBCONTRACTORS PAGE  (subcontractors.html) — scoped to body.sc / sd*, sl*, sc* classes
   ==================================================================== */
body.sc{--ok:oklch(0.78 0.17 150);--warn:oklch(0.82 0.16 80)}
html.light body.sc{--ok:oklch(0.52 0.15 150);--warn:oklch(0.6 0.15 70)}
body.sc .visual{height:auto!important;padding:1rem 0 1.5rem}
body.sc .tilt3d{height:auto}

/* hero: contractor deck */
.sdw{position:relative;z-index:2;width:min(100%,25rem);display:grid;gap:.9rem}
.sdk{position:relative;height:21.5rem}
.scd{position:absolute;inset:0 0 auto 0;height:19rem;border-radius:1.75rem;padding:1.1rem;display:grid;align-content:start;gap:.7rem;cursor:pointer;text-align:left;transition:transform .6s cubic-bezier(.2,.8,.2,1),opacity .5s,filter .5s;transform-origin:50% 0;background:var(--card,color-mix(in oklab,var(--background) 82%,var(--foreground)));border:1px solid var(--border);backdrop-filter:blur(14px)}
.scd[data-p="0"]{transform:none;z-index:3;box-shadow:var(--s-ember)}
.scd[data-p="1"]{transform:translateY(1.25rem) scale(.95);z-index:2;opacity:.85;filter:saturate(.7)}
.scd[data-p="2"]{transform:translateY(2.5rem) scale(.9);z-index:1;opacity:.6;filter:saturate(.5)}
.scd[data-p="1"]>*:not(.sct),.scd[data-p="2"]>*:not(.sct){opacity:0}
.sct{display:flex;align-items:center;gap:.8rem}
.sct .av{width:2.7rem;height:2.7rem;border-radius:.9rem;display:grid;place-items:center;background:var(--g-primary);color:var(--primary-fg,#fff);font:700 .95rem var(--font-d)}
.sct b{display:block;font:700 1.05rem var(--font-d)}
.sct small{font-size:.72rem;color:var(--primary);font-weight:600}
.sct .rt{margin-left:auto;font-size:.8rem;font-weight:700;color:var(--warn)}
.scr{display:flex;justify-content:space-between;gap:.5rem;font-size:.78rem;color:var(--muted-fg)}
.scr b{color:var(--foreground);font:600 .85rem var(--font-d);text-align:right}
.scv{font:700 2rem/1 var(--font-d);letter-spacing:-.02em}
.scb{height:.55rem;border-radius:9px;background:var(--border);overflow:hidden}
.scb i{display:block;height:100%;background:var(--g-primary);border-radius:9px}
.scb.l i{background:var(--ok)}
.sdc{display:flex;align-items:center;justify-content:space-between;gap:1rem}
.sdd{display:flex;gap:.4rem}
.sdd i{width:.5rem;height:.5rem;border-radius:50%;background:var(--border);transition:.4s}
.sdd i.on{background:var(--primary);width:1.3rem;border-radius:9px}

/* running bills */
.sld{border-radius:1.75rem;padding:1.1rem;max-width:52rem;margin:0 auto}
@media(min-width:640px){.sld{padding:2rem}}
.slh{display:flex;justify-content:space-between;align-items:center;gap:1rem}
.slh small{display:block;font-size:.75rem}.slh b{font:700 1.2rem var(--font-d)}
.slk{display:grid;grid-template-columns:1fr;gap:.7rem;margin:1.3rem 0 1.1rem}
@media(min-width:640px){.slk{grid-template-columns:repeat(3,1fr)}}
.slk>div{border:1px solid var(--border);border-radius:1.1rem;padding:1rem;background:color-mix(in oklab,var(--foreground) 3%,transparent);transition:.4s}
.slk small{display:block;font-size:.75rem;color:var(--muted-fg)}
.slk b{font:700 1.6rem/1.2 var(--font-d);font-variant-numeric:tabular-nums}
.slk .ok{border-color:var(--ok)}.slk .ok b{color:var(--ok)}
.slb{display:flex;height:1.7rem;border-radius:10px;background:var(--border);overflow:hidden}
.slb i{height:100%;width:0;transition:width .6s cubic-bezier(.2,.7,.2,1)}
.slb .p,.sll .p{background:var(--ok)}
.slb .q,.sll .q{background:repeating-linear-gradient(135deg,color-mix(in oklab,var(--primary) 70%,transparent) 0 5px,color-mix(in oklab,var(--primary) 28%,transparent) 5px 10px)}
.sll .t{background:var(--border)}
.sll{display:flex;flex-wrap:wrap;gap:.4rem 1rem;margin-top:.7rem;font-size:.72rem;color:var(--muted-fg)}
.sll span{display:inline-flex;align-items:center;gap:.4rem}.sll i{width:.7rem;height:.7rem;border-radius:3px}
.slx{display:grid;gap:.5rem;margin-top:1.2rem}
.slr{display:grid;grid-template-columns:1fr auto auto;gap:.8rem;align-items:center;padding:.7rem .9rem;border-radius:1rem;border:1px solid var(--border);transition:.35s}
.slr b{font:600 .9rem var(--font-d)}
.slr small{display:block;font-size:.72rem;color:var(--muted-fg)}
.slr .cp{font-size:.7rem;font-weight:700;padding:.25rem .65rem;border-radius:999px;color:var(--primary);border:1px solid color-mix(in oklab,var(--primary) 40%,transparent)}
.slr .cp.a{color:var(--warn);border-color:color-mix(in oklab,var(--warn) 45%,transparent)}
.slr .cp.d{color:var(--ok);border-color:color-mix(in oklab,var(--ok) 45%,transparent);background:color-mix(in oklab,var(--ok) 12%,transparent)}
.slr button{min-width:5.2rem;justify-content:center}
.slr.d{opacity:.75}
@media(max-width:480px){.slr{grid-template-columns:1fr auto}.slr .cp{grid-row:2;justify-self:start}.slr button{grid-row:1/3;grid-column:2}}
.sln{margin-top:1rem;padding:.85rem 1rem;border-radius:1rem;border:1px solid var(--border);font-size:.85rem;font-weight:600;color:var(--muted-fg);transition:.4s}
.sln.ok{border-color:var(--ok);color:var(--ok);background:color-mix(in oklab,var(--ok) 10%,transparent)}

/* contractor file explorer */
.scx{display:grid;gap:1rem;max-width:62rem;margin:0 auto}
@media(min-width:860px){.scx{grid-template-columns:19rem 1fr;align-items:start}}
.scl{display:flex;gap:.5rem;overflow-x:auto;padding-bottom:.4rem;scrollbar-width:none}
.scl::-webkit-scrollbar{display:none}
@media(min-width:860px){.scl{flex-direction:column;overflow:visible}}
.scl button{flex:none;display:flex;align-items:center;gap:.7rem;padding:.7rem .9rem;border-radius:1rem;border:1px solid var(--border);color:inherit;font:600 .85rem var(--font-d);text-align:left;white-space:nowrap;transition:.3s}
.scl button .ico{width:1.9rem;height:1.9rem;border-radius:.6rem;font-size:.85rem}
.scl button.on{border-color:var(--primary);background:color-mix(in oklab,var(--primary) 10%,transparent)}
@media(hover:hover){.scl button:not(.on):hover{border-color:color-mix(in oklab,var(--primary) 45%,transparent)}}
.scp{border-radius:1.75rem;padding:1.5rem;min-height:18rem;display:grid;align-content:start;gap:1rem}
@media(min-width:640px){.scp{padding:2rem}}
.scp .pw{animation:rvIn .5s cubic-bezier(.2,.7,.2,1) backwards;display:grid;gap:1rem}
.scp h3{font-size:1.4rem}
.scp .pd{color:var(--muted-fg);font-size:.9rem;line-height:1.55}
.pv{border:1px dashed var(--border);border-radius:1.2rem;padding:1.1rem;display:grid;gap:.6rem}
.pv .row{display:flex;justify-content:space-between;gap:.6rem;font-size:.85rem;color:var(--muted-fg)}
.pv .row b{color:var(--foreground);font:600 .88rem var(--font-d)}
.pv .big{font:700 2.2rem/1 var(--font-d);letter-spacing:-.02em}
.pv .chips{display:flex;flex-wrap:wrap;gap:.4rem}
.pv .chips span{font-size:.75rem;font-weight:600;padding:.3rem .7rem;border-radius:999px;border:1px solid var(--border)}
.pv .chips span.on{color:var(--primary);border-color:var(--primary);background:color-mix(in oklab,var(--primary) 10%,transparent)}
.pv .okc{color:var(--ok)}
@media(prefers-reduced-motion:reduce){.scd{transition:none}.scp .pw{animation:none}}

/* ====================================================================
   DOCUMENTS PAGE  (documents.html) — scoped to body.dc / dcw, ds*, df*, dz*, dv*, da*, dk* classes
   ==================================================================== */
body.dc{--ok:oklch(0.78 0.17 150);--warn:oklch(0.82 0.16 80);--bad:oklch(0.68 0.22 25)}
html.light body.dc{--ok:oklch(0.52 0.15 150);--warn:oklch(0.6 0.15 70);--bad:oklch(0.56 0.22 25)}
body.dc .visual{height:auto!important;padding:1rem 0 1.5rem}
body.dc .tilt3d{height:auto}

/* hero: searchable vault */
.dcw{position:relative;z-index:2;width:min(100%,28rem);border-radius:1.75rem;padding:1.1rem;display:grid;gap:.8rem}
.dcw .mps{gap:.4rem}
.dsi{display:flex;align-items:center;gap:.6rem;padding:.7rem .95rem;border-radius:1rem;border:1px solid var(--border);background:color-mix(in oklab,var(--foreground) 4%,transparent);transition:border-color .3s,box-shadow .3s}
.dsi:focus-within{border-color:var(--primary);box-shadow:0 0 0 4px color-mix(in oklab,var(--primary) 15%,transparent)}
.dsi>span{display:inline-flex;width:1.1rem;height:1.1rem;color:var(--primary);flex:none}.dsi>span svg{width:100%;height:100%}
.dsi input{flex:1;min-width:0;background:none;border:0;outline:0;color:inherit;font:500 .9rem var(--font-b,inherit)}
.dfl{display:grid;gap:.4rem;max-height:15.5rem;overflow-y:auto;padding-right:.2rem;scrollbar-width:thin}
.dfr{display:grid;grid-template-columns:auto 1fr auto;gap:.7rem;align-items:center;padding:.55rem .7rem;border-radius:.9rem;border:1px solid var(--border);animation:soIn .45s cubic-bezier(.2,.7,.2,1) backwards;animation-delay:calc(var(--d,0)*.04s)}
.dfr.nw{border-color:var(--ok);background:color-mix(in oklab,var(--ok) 8%,transparent)}
.dfb{width:2.2rem;height:2.2rem;border-radius:.65rem;display:grid;place-items:center;font:800 .62rem var(--font-d);letter-spacing:.03em;color:var(--primary);background:color-mix(in oklab,var(--primary) 14%,transparent)}
.dfb.x{color:var(--ok);background:color-mix(in oklab,var(--ok) 14%,transparent)}
.dfb.d{color:var(--warn);background:color-mix(in oklab,var(--warn) 16%,transparent)}
.dfb.i{color:var(--foreground);background:color-mix(in oklab,var(--foreground) 12%,transparent)}
.dfr b{display:block;font:600 .82rem/1.3 var(--font-d);word-break:break-all}
.dfr small{display:block;font-size:.68rem;color:var(--muted-fg)}
.dfr mark{background:color-mix(in oklab,var(--primary) 30%,transparent);color:inherit;border-radius:3px;padding:0 1px}
.dfr .vc{display:grid;gap:.25rem;justify-items:end}
.dfr .vc span{font-size:.66rem;font-weight:700;padding:.15rem .5rem;border-radius:999px;border:1px solid var(--border);color:var(--muted-fg)}
.dfr .vc span.w{color:var(--warn);border-color:color-mix(in oklab,var(--warn) 50%,transparent)}
.dfc{font-size:.72rem;min-height:1rem}
.dzn{display:grid;justify-items:center;gap:.15rem;text-align:center;padding:.9rem;border-radius:1.1rem;border:2px dashed color-mix(in oklab,var(--primary) 45%,transparent);cursor:pointer;transition:.3s;background:color-mix(in oklab,var(--primary) 5%,transparent)}
.dzn>span{display:inline-flex;width:1.4rem;height:1.4rem;color:var(--primary)}.dzn>span svg{width:100%;height:100%}
.dzn b{font:600 .85rem var(--font-d)}.dzn small{font-size:.7rem;color:var(--muted-fg)}
.dzn input{display:none}
.dzn.ov{border-color:var(--primary);background:color-mix(in oklab,var(--primary) 14%,transparent);transform:scale(1.02)}

/* version history */
.dvw{display:grid;gap:1rem;max-width:56rem;margin:0 auto;border-radius:1.75rem;padding:1.1rem}
@media(min-width:760px){.dvw{grid-template-columns:13rem 1fr;padding:1.8rem;gap:1.8rem}}
.dvl{display:flex;gap:.5rem;overflow-x:auto;scrollbar-width:none}.dvl::-webkit-scrollbar{display:none}
@media(min-width:760px){.dvl{flex-direction:column;overflow:visible;position:relative;padding-left:1.4rem}.dvl::before{content:"";position:absolute;left:.4rem;top:.9rem;bottom:.9rem;width:2px;background:linear-gradient(var(--primary),color-mix(in oklab,var(--primary) 10%,transparent))}}
.dvl button{position:relative;flex:none;display:flex;justify-content:space-between;align-items:center;gap:.8rem;padding:.65rem .9rem;border-radius:.95rem;border:1px solid var(--border);color:inherit;min-width:5.6rem;transition:.3s}
.dvl button b{font:700 .9rem var(--font-d)}.dvl button small{font-size:.7rem;color:var(--muted-fg)}
.dvl button.on{border-color:var(--primary);background:color-mix(in oklab,var(--primary) 10%,transparent)}
@media(min-width:760px){.dvl button::before{content:"";position:absolute;left:-1.45rem;top:50%;margin-top:-.4rem;width:.8rem;height:.8rem;border-radius:50%;background:var(--background);border:3px solid var(--primary)}}
.dvp{display:grid;gap:.9rem;align-content:start;animation:rvIn .45s cubic-bezier(.2,.7,.2,1) backwards}
.dvp h3{font-size:1.25rem;word-break:break-all}
.dvp .meta{display:flex;flex-wrap:wrap;gap:.4rem 1.2rem;font-size:.8rem;color:var(--muted-fg)}
.dvp .meta b{color:var(--foreground);font-weight:600}
.dvp .nt{padding:.9rem 1rem;border-radius:1rem;border:1px dashed var(--border);font-size:.88rem}
.dst{display:inline-block;width:max-content;font-size:.72rem;font-weight:700;padding:.3rem .8rem;border-radius:999px;border:1px solid var(--border);color:var(--muted-fg)}
.dst.a{color:var(--warn);border-color:color-mix(in oklab,var(--warn) 50%,transparent);background:color-mix(in oklab,var(--warn) 12%,transparent)}
.dst.o{color:var(--ok);border-color:color-mix(in oklab,var(--ok) 50%,transparent);background:color-mix(in oklab,var(--ok) 12%,transparent)}
.dwf{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem;font-size:.75rem;color:var(--muted-fg)}
.dwf span{padding:.25rem .65rem;border-radius:999px;border:1px solid var(--border)}
.dwf span.y{color:var(--ok);border-color:color-mix(in oklab,var(--ok) 50%,transparent)}
.dvp .ac{display:flex;gap:.6rem;flex-wrap:wrap}
.dvp .ac button[disabled]{opacity:.5;pointer-events:none}

/* access matrix */
.dac{border-radius:1.75rem;padding:1.1rem;max-width:56rem;margin:0 auto}
@media(min-width:640px){.dac{padding:2rem}}
.dat{display:grid;grid-template-columns:repeat(2,1fr);gap:.7rem;margin-top:1.4rem}
@media(min-width:760px){.dat{grid-template-columns:repeat(4,1fr)}}
.dtl{position:relative;display:grid;gap:.5rem;justify-items:start;padding:1rem;border-radius:1.2rem;border:1px solid var(--border);overflow:hidden;transition:.45s}
.dtl .ico{width:2.3rem;height:2.3rem;border-radius:.8rem;font-size:1rem}
.dtl b{font:600 .85rem/1.25 var(--font-d)}
.dtl small{font-size:.7rem;font-weight:600;color:var(--ok)}
.dtl.lk{background:color-mix(in oklab,var(--foreground) 4%,transparent)}
.dtl.lk>*{filter:blur(2.2px) grayscale(1);opacity:.5}
.dtl.lk::after{content:"";position:absolute;top:.8rem;right:.8rem;width:1.3rem;height:1.3rem;background:var(--bad);-webkit-mask:var(--lk) center/contain no-repeat;mask:var(--lk) center/contain no-repeat}
.dtl.lk small{color:var(--bad)}
.dan{margin-top:1rem;padding:.85rem 1rem;border-radius:1rem;border:1px solid var(--border);font-size:.85rem;font-weight:600;color:var(--muted-fg)}

/* library + features */
.dkx{display:grid;gap:1rem;max-width:62rem;margin:0 auto}
@media(min-width:900px){.dkx{grid-template-columns:1.1fr 1fr;align-items:start}}
.dkg{display:grid;grid-template-columns:repeat(2,1fr);gap:.8rem}
@media(min-width:560px){.dkg{grid-template-columns:repeat(3,1fr)}}
.dkc{position:relative;display:grid;gap:.6rem;align-content:space-between;min-height:8.2rem;padding:1rem;border-radius:1.2rem 2rem 1.2rem 1.2rem;border:1px solid var(--border);background:color-mix(in oklab,var(--foreground) 3%,transparent);transition:transform .35s,border-color .35s;overflow:hidden}
.dkc::after{content:"";position:absolute;top:0;right:0;width:1.6rem;height:1.6rem;background:linear-gradient(225deg,var(--background) 50%,color-mix(in oklab,var(--primary) 30%,transparent) 50%);border-bottom-left-radius:.5rem}
.dkc .ico{width:2.3rem;height:2.3rem;border-radius:.8rem;font-size:1rem;box-shadow:var(--s-ember)}
.dkc b{font:600 .82rem/1.3 var(--font-d)}
@media(hover:hover){.dkc:hover{transform:translateY(-5px) rotate(-1deg);border-color:color-mix(in oklab,var(--primary) calc(45% * var(--ts)),transparent)}}
.dkl{border-radius:1.6rem;padding:1.3rem 1.3rem .4rem}
.dkl h3{font-size:1.15rem;margin-bottom:.3rem}
@media(prefers-reduced-motion:reduce){.dfr,.dvp{animation:none}}

/* ====================================================================
   COMMUNICATION PAGE  (communication.html) — scoped to body.cm / cm*, cv*, cf*, cp*, cmt2 classes
   ==================================================================== */
body.cm{--ok:oklch(0.78 0.17 150);--warn:oklch(0.82 0.16 80)}
html.light body.cm{--ok:oklch(0.52 0.15 150);--warn:oklch(0.6 0.15 70)}
body.cm .visual{height:auto!important;padding:1rem 0 1.5rem}
body.cm .tilt3d{height:auto}

/* hero: plan-aware chat */
.cmw{position:relative;z-index:2;width:min(100%,27.5rem);border-radius:1.75rem;padding:1.05rem;display:grid;gap:.75rem}
.cmh small{display:block;font-size:.7rem;margin-bottom:.4rem}
.cmw .mps{gap:.35rem}
.cmc{display:flex;gap:.4rem;overflow-x:auto;scrollbar-width:none;padding-bottom:.1rem}.cmc::-webkit-scrollbar{display:none}
.cmc button{flex:none;display:inline-flex;align-items:center;gap:.45rem;padding:.45rem .8rem;border-radius:999px;border:1px solid var(--border);color:inherit;font:600 .76rem var(--font-d);white-space:nowrap;transition:.3s}
.cmc button i{display:inline-flex;width:.9rem;height:.9rem}.cmc button i svg{width:100%;height:100%}
.cmc button.on{border-color:var(--primary);background:color-mix(in oklab,var(--primary) 12%,transparent)}
.cmc button.lk{opacity:.6}
.cmc button em{font-style:normal;font-size:.62rem;font-weight:700;color:var(--warn)}
.cmp{height:19rem;overflow-y:auto;display:flex;flex-direction:column;gap:.5rem;padding:.8rem;border-radius:1.1rem;border:1px solid var(--border);background:color-mix(in oklab,var(--foreground) 3%,transparent);scrollbar-width:thin}
.cmm{max-width:84%;padding:.55rem .75rem;border-radius:1rem 1rem 1rem .3rem;background:color-mix(in oklab,var(--foreground) 9%,transparent);font-size:.82rem;line-height:1.45;animation:soIn .45s cubic-bezier(.2,.7,.2,1) backwards;animation-delay:calc(var(--d,0)*.12s)}
.cmm.me{align-self:flex-end;border-radius:1rem 1rem .3rem 1rem;background:color-mix(in oklab,var(--primary) 22%,transparent)}
.cmm.st{animation:none}
.cmm .w{display:block;font:700 .68rem var(--font-d);color:var(--primary);margin-bottom:.15rem}
.cmm.me .w{display:none}
.cmm em{font-style:normal;font-weight:700;color:var(--primary);background:color-mix(in oklab,var(--primary) 14%,transparent);border-radius:4px;padding:0 .2rem}
.cmm .tk{display:block;text-align:right;font-size:.66rem;margin-top:.15rem;color:var(--muted-fg);letter-spacing:-.1em}
.cmm .tk.r{color:var(--primary)}
.cvn{display:flex;align-items:center;gap:.6rem;min-width:11rem}
.cvn button{width:1.9rem;height:1.9rem;border-radius:50%;display:grid;place-items:center;background:var(--g-primary);color:var(--primary-fg,#fff);flex:none}
.cvn button svg{width:.8rem;height:.8rem}
.cvn .wv{display:flex;align-items:center;gap:2px;height:1.6rem;flex:1}
.cvn .wv i{width:3px;border-radius:2px;background:color-mix(in oklab,var(--foreground) 40%,transparent);height:var(--h)}
.cvn.pl .wv i{background:var(--primary);animation:cvW .7s ease-in-out infinite alternate;animation-delay:calc(var(--k)*.05s)}
@keyframes cvW{to{transform:scaleY(.35)}}
.cvn small{font-size:.68rem;color:var(--muted-fg);font-variant-numeric:tabular-nums}
.cfl{display:flex;align-items:center;gap:.6rem}
.cfl>i{width:2rem;height:2rem;border-radius:.6rem;display:grid;place-items:center;background:color-mix(in oklab,var(--primary) 16%,transparent);color:var(--primary);flex:none}
.cfl>i svg{width:1rem;height:1rem}
.cfl b{display:block;font:600 .78rem var(--font-d);word-break:break-all}.cfl small{font-size:.66rem;color:var(--muted-fg)}
.cfi{width:11rem;height:5.5rem;border-radius:.7rem;margin-bottom:.35rem;background:linear-gradient(135deg,color-mix(in oklab,var(--primary) 45%,transparent),color-mix(in oklab,var(--foreground) 14%,transparent)),repeating-linear-gradient(90deg,transparent 0 12px,color-mix(in oklab,var(--foreground) 12%,transparent) 12px 14px)}
.ctk{display:grid;gap:.1rem;border-left:3px solid var(--primary);padding-left:.6rem}
.ctk small{font-size:.62rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--primary)}
.ctk b{font:600 .82rem var(--font-d)}.ctk span{font-size:.7rem;color:var(--muted-fg)}
.cml{margin:auto;text-align:center;display:grid;gap:.7rem;justify-items:center;max-width:16rem;animation:rvIn .45s cubic-bezier(.2,.7,.2,1) backwards}
.cml>i{display:grid;place-items:center;width:2.8rem;height:2.8rem;border-radius:50%;background:color-mix(in oklab,var(--warn) 16%,transparent);color:var(--warn)}
.cml>i svg{width:1.3rem;height:1.3rem}
.cml p{font-size:.85rem;line-height:1.5}
.cmx{display:flex;gap:.5rem}
.cmx input{flex:1;min-width:0;padding:.65rem .9rem;border-radius:.95rem;border:1px solid var(--border);background:color-mix(in oklab,var(--foreground) 4%,transparent);color:inherit;font:500 .85rem var(--font-b,inherit);outline:0;transition:.3s}
.cmx input:focus{border-color:var(--primary)}
.cmx input:disabled{opacity:.5}
.cmx button{padding:.65rem .9rem;min-width:0}.cmx button svg{width:1.1rem;height:1.1rem}
.cmx button:disabled{opacity:.45;pointer-events:none}

/* chat by plan */
.cpg{display:grid;gap:1rem;max-width:62rem;margin:0 auto}
@media(min-width:780px){.cpg{grid-template-columns:repeat(3,1fr)}}
.cpl{position:relative;border-radius:1.6rem;padding:1.4rem 1.3rem;display:grid;gap:.2rem;align-content:start;transition:transform .45s cubic-bezier(.2,.7,.2,1),border-color .4s,box-shadow .4s}
.cpl.on{border-color:var(--primary);box-shadow:var(--s-ember)}
@media(min-width:780px){.cpl.on{transform:translateY(-8px)}}
.cpl h3{font-size:1.35rem;margin-bottom:.5rem}
.cpl .cu{position:absolute;top:-.75rem;right:1.2rem;padding:.25rem .7rem;border-radius:999px;font-size:.7rem;font-weight:700;background:var(--g-primary);color:var(--primary-fg,#fff);opacity:0;transform:translateY(6px);transition:.4s}
.cpl.on .cu{opacity:1;transform:none}
.cpr{display:grid;gap:.15rem;padding:.7rem 0;border-top:1px dashed var(--border);font-size:.82rem}
.cpr small{color:var(--muted-fg);font-size:.72rem}
.cpr b{display:flex;align-items:center;gap:.45rem;font:600 .88rem var(--font-d)}
.cpr b i{display:inline-flex;width:1rem;height:1rem}.cpr b i svg{width:100%;height:100%}
.cpr b.y{color:var(--ok)}.cpr b.n{color:var(--muted-fg);font-weight:500}
.cps{height:.5rem;border-radius:9px;background:var(--border);overflow:hidden;margin-top:.3rem}
.cps i{display:block;height:100%;background:var(--g-primary);border-radius:9px;transition:width .6s}

/* feature thread */
.cmt2{display:grid;gap:.8rem;max-width:54rem;margin:0 auto}
.cmb{display:grid;grid-template-columns:auto 1fr;gap:1rem;align-items:start;padding:1.1rem 1.25rem;border-radius:1.4rem 1.4rem 1.4rem .4rem;max-width:36rem;transition:transform .35s,border-color .35s}
@media(min-width:760px){.cmb:nth-child(even){justify-self:end;border-radius:1.4rem 1.4rem .4rem 1.4rem}}
.cmb .ico{width:2.6rem;height:2.6rem;border-radius:.9rem;font-size:1.1rem;box-shadow:var(--s-ember)}
.cmb b{display:block;font:600 1rem/1.3 var(--font-d)}
.cmb small{display:block;font-size:.82rem;line-height:1.5;color:var(--muted-fg);margin:.15rem 0 .5rem}
.cmb .pt{display:inline-block;font-size:.66rem;font-weight:700;letter-spacing:.04em;padding:.2rem .6rem;border-radius:999px;color:var(--primary);border:1px solid color-mix(in oklab,var(--primary) 40%,transparent)}
@media(hover:hover){.cmb:hover{transform:translateY(-4px);border-color:color-mix(in oklab,var(--primary) calc(45% * var(--ts)),transparent)}}
@media(prefers-reduced-motion:reduce){.cmm,.cml{animation:none}.cvn.pl .wv i{animation:none}}

/* ====================================================================
   REPORTS PAGE  (reports.html) — scoped to body.rp / rp*, gg*, rb*, rs* classes
   ==================================================================== */
body.rp{--ok:oklch(0.78 0.17 150);--warn:oklch(0.82 0.16 80);--bad:oklch(0.68 0.22 25)}
html.light body.rp{--ok:oklch(0.52 0.15 150);--warn:oklch(0.6 0.15 70);--bad:oklch(0.56 0.22 25)}
body.rp .visual{height:auto!important;padding:1rem 0 1.5rem}
body.rp .tilt3d{height:auto}
.wnr{color:var(--warn)}

/* hero: dashboard gauges */
.rpw{position:relative;z-index:2;width:min(100%,28rem);border-radius:1.75rem;padding:1.1rem;display:grid;gap:.9rem}
.rpw .mps{gap:.4rem}
.ggs{display:grid;grid-template-columns:repeat(3,1fr);gap:.4rem;padding:.6rem .3rem .2rem;border-radius:1.2rem;border:1px solid var(--border);background:color-mix(in oklab,var(--foreground) 3%,transparent)}
.gg{text-align:center}
.gg svg{width:100%;height:auto;display:block}
.gg .gt{fill:none;stroke:var(--border);stroke-width:11;stroke-linecap:round}
.gg .gv{fill:none;stroke:var(--ok);stroke-width:11;stroke-linecap:round;stroke-dasharray:100;stroke-dashoffset:100;transition:stroke-dashoffset 1s cubic-bezier(.2,.8,.2,1),stroke .4s}
.gg.wn .gv{stroke:var(--warn)}.gg.bd .gv{stroke:var(--bad)}
.gg .nd{transform-origin:70px 76px;transform:rotate(-90deg);transition:transform 1s cubic-bezier(.3,1.35,.5,1)}
.gg .nd line{stroke:var(--foreground);stroke-width:3;stroke-linecap:round}
.gg .nd circle{fill:var(--foreground)}
.gg b{display:block;font:700 1.35rem/1 var(--font-d);font-variant-numeric:tabular-nums;margin-top:-.4rem}
.gg small{display:block;font-size:.66rem;color:var(--muted-fg);margin:.2rem 0 .3rem}
.rpl{display:grid;gap:.4rem}
.rpl div{display:flex;align-items:center;gap:.65rem;padding:.5rem .75rem;border-radius:.9rem;border:1px solid var(--border);font-size:.78rem;font-weight:600;transition:.4s}
.rpl i{width:.7rem;height:.7rem;border-radius:50%;background:var(--ok);box-shadow:0 0 0 4px color-mix(in oklab,var(--ok) 20%,transparent);flex:none;transition:.4s}
.rpl .wn i{background:var(--warn);box-shadow:0 0 0 4px color-mix(in oklab,var(--warn) 22%,transparent);animation:rpB 1.6s ease-in-out infinite}
.rpl .bd i{background:var(--bad);box-shadow:0 0 0 4px color-mix(in oklab,var(--bad) 22%,transparent);animation:rpB 1s ease-in-out infinite}
.rpl .wn{border-color:color-mix(in oklab,var(--warn) 45%,transparent)}.rpl .bd{border-color:color-mix(in oklab,var(--bad) 55%,transparent)}
.rpl small{margin-left:auto;font-weight:500;font-size:.68rem;color:var(--muted-fg)}
@keyframes rpB{50%{opacity:.35}}
.rps{font-size:.8rem;color:var(--muted-fg);min-height:2.4rem;line-height:1.45}

/* budget vs actual */
.rbd{border-radius:1.75rem;padding:1.1rem;max-width:52rem;margin:0 auto}
@media(min-width:640px){.rbd{padding:2rem}}
.rbn{margin:1.2rem 0;padding:.85rem 1rem;border-radius:1rem;border:1px solid var(--ok);color:var(--ok);background:color-mix(in oklab,var(--ok) 10%,transparent);font-size:.85rem;font-weight:600;transition:.4s}
.rbn.wn{border-color:var(--warn);color:var(--warn);background:color-mix(in oklab,var(--warn) 10%,transparent)}
.rbn.bd{border-color:var(--bad);color:var(--bad);background:color-mix(in oklab,var(--bad) 10%,transparent)}
.rbd .tb{grid-template-columns:6.8rem 1fr 5.8rem}
.rbd .tb.wn s i{background:var(--warn)}.rbd .tb.bd s i{background:var(--bad)}
.rbd .tb span:last-child{font-size:.75rem}
@media(max-width:480px){.rbd .tb{grid-template-columns:5.2rem 1fr 4.6rem;gap:.45rem;font-size:.72rem}}

/* report pack builder */
.rpk{display:grid;gap:1rem;max-width:62rem;margin:0 auto}
@media(min-width:900px){.rpk{grid-template-columns:1.15fr 1fr;align-items:start}}
.rpc,.rpm{border-radius:1.75rem;padding:1.3rem}
@media(min-width:640px){.rpc,.rpm{padding:1.7rem}}
.rpc h3,.rpm h3{font-size:1.15rem;margin-bottom:.7rem}
.rpi{display:grid;grid-template-columns:auto 1fr;gap:.75rem;align-items:center;width:100%;text-align:left;padding:.6rem .5rem;border-radius:.9rem;color:inherit;border:1px solid transparent;font:500 .86rem var(--font-b,inherit);transition:.3s}
.rpi u{width:1.3rem;height:1.3rem;border-radius:.4rem;border:2px solid var(--border);display:grid;place-items:center;text-decoration:none;color:transparent;transition:.25s}
.rpi u svg{width:.8rem;height:.8rem}
.rpi.on{background:color-mix(in oklab,var(--primary) 8%,transparent)}
.rpi.on u{background:var(--g-primary);border-color:transparent;color:var(--primary-fg,#fff)}
@media(hover:hover){.rpi:hover{border-color:color-mix(in oklab,var(--primary) 40%,transparent)}}
.rpm small{display:block;font-size:.72rem;margin:.9rem 0 .4rem}
.rpm .mps{gap:.4rem}
.rpe{margin:1.1rem 0;border:1px solid var(--border);border-radius:1.1rem;padding:1rem;display:grid;gap:.5rem;background:color-mix(in oklab,var(--foreground) 3%,transparent)}
.rpe .r{display:flex;justify-content:space-between;gap:.6rem;font-size:.8rem;color:var(--muted-fg)}
.rpe .r b{color:var(--foreground);font:600 .84rem var(--font-d);text-align:right}
.rpe .at{display:flex;flex-wrap:wrap;gap:.35rem;margin-top:.2rem}
.rpe .at span{font-size:.68rem;font-weight:600;padding:.25rem .6rem;border-radius:999px;border:1px solid var(--border);display:inline-flex;gap:.3rem;align-items:center}
.rpe .at i{font-style:normal;font-size:.6rem;font-weight:800;color:var(--primary)}
.rpb[disabled],#rpb[disabled]{opacity:.45;pointer-events:none}
.rpx{margin-top:.8rem;min-height:2.6rem;padding:.7rem .9rem;border-radius:.95rem;border:1px dashed var(--border);font-size:.78rem;color:var(--muted-fg);transition:.4s}
.rpx.ok{border:1px solid var(--ok);color:var(--ok);background:color-mix(in oklab,var(--ok) 10%,transparent);font-weight:600}
@media(prefers-reduced-motion:reduce){.rpl .wn i,.rpl .bd i{animation:none}}

/* ====================================================================
   LOGIN PAGE  (login.html) — scoped to body.lg / lg* classes
   ==================================================================== */
body.lg{--ok:oklch(0.78 0.17 150);--bad:oklch(0.68 0.22 25);min-height:100vh;min-height:100svh;display:flex;flex-direction:column}
html.light body.lg{--ok:oklch(0.52 0.15 150);--bad:oklch(0.56 0.22 25)}
body.lg main{flex:1;display:flex;align-items:center;position:relative;overflow:hidden;padding:2rem 0}
@media(min-width:1024px){body.lg main{padding:3rem 0}}
body.lg main>.wrap{position:relative;z-index:1}
.lg-bg{position:absolute;inset:0;pointer-events:none;background:var(--g-radial)}
.lgb1{top:-6rem;left:-6rem;width:26rem;height:26rem;background:var(--blob);filter:blur(120px)}
.lgb2{bottom:-8rem;right:-4rem;width:30rem;height:30rem;background:var(--blob);filter:blur(140px);animation-delay:1.5s}

.lg-grid{display:grid;gap:1.25rem;align-items:center;width:100%}
@media(min-width:1024px){.lg-grid{grid-template-columns:minmax(0,1.1fr) minmax(0,29rem);gap:4.5rem}}
.lg-gate{display:grid;gap:1.25rem;min-width:0;justify-items:start}
@media(min-width:1024px){.lg-gate{gap:1.6rem}}
.lg-hero,.lg-lead,.lg-away{display:none}
@media(min-width:1024px){
  .lg-hero{display:block;font:700 clamp(2.2rem,3.7vw,3.3rem)/1.06 var(--font-d);letter-spacing:-.02em}
  .lg-lead{display:block;max-width:30rem;font-size:1.05rem;line-height:1.65}
  .lg-away{display:grid}
}
.lg-hero .tg{background-size:220% auto;animation:shimmer 6s ease-in-out infinite alternate}

/* ---------- the pass (the one memorable thing) ---------- */
.lgp-wrap{position:relative;width:min(100%,27rem);perspective:1100px}
.lgp-wrap::before{content:"";position:absolute;inset:12% 6% -6%;background:var(--g-primary);opacity:.28;filter:blur(60px);border-radius:50%}
html.light .lgp-wrap::before{opacity:.12}
.lgp{--rx:0deg;--ry:0deg;position:relative;border-radius:1.5rem;overflow:hidden;border:2px solid #F68104;
  background:linear-gradient(165deg,color-mix(in oklab,var(--background) 88%,var(--primary)),color-mix(in oklab,var(--background) 96%,var(--primary)));
  box-shadow:var(--s-ember),0 40px 70px -28px rgba(0,0,0,.55);
  transform:rotateX(var(--rx)) rotateY(var(--ry));transition:transform .25s ease-out;
  animation:lgDrop 1.1s cubic-bezier(.2,.8,.2,1) .15s backwards}
html.light .lgp{background:#fff;box-shadow:var(--s-ember),0 30px 50px -30px rgba(160,60,10,.22)}
@keyframes lgDrop{from{opacity:0;transform:translateY(-34px) rotate(-3deg)}60%{opacity:1;transform:translateY(6px) rotate(.8deg)}}
.lgp::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(115deg,transparent 35%,rgba(255,255,255,.13) 48%,transparent 60%);background-size:260% 100%;animation:wfHolo 6s linear infinite}
.lgp-band{display:flex;align-items:center;gap:.65rem;padding:.8rem 1.1rem;background:#F68104;color:#fff}
.lgp-mk{width:1.9rem;height:1.9rem;border-radius:.6rem;background:#fff;color:#F68104;display:grid;place-items:center;font:700 .95rem var(--font-d);transform:rotate(6deg);box-shadow:0 6px 14px -6px rgba(0,0,0,.25)}
.lgp-band b{display:block;font:700 .95rem/1.1 var(--font-d)}
.lgp-band small{display:block;font-size:.68rem;color:rgba(255,255,255,.85)}
.lgp-tag{margin-left:auto;font-size:.7rem;font-weight:600;padding:.25rem .7rem;border-radius:999px;white-space:nowrap;background:rgba(255,255,255,.2);box-shadow:inset 0 0 0 1px rgba(255,255,255,.28);transition:background .3s,color .3s}
.lgp[data-state="ok"] .lgp-tag{background:#fff;color:#15803d}
.lgp[data-state="err"] .lgp-tag{background:#fff;color:#c2410c}
.lgp-stripe{height:.45rem;background:repeating-linear-gradient(-45deg,#F68104 0 9px,#fff 9px 18px)}
.lgp-body{display:grid;grid-template-columns:auto 1fr;gap:1.1rem;align-items:center;padding:1.15rem 1.25rem .9rem}
.lgp-ring{padding:3px;border-radius:50%;background:conic-gradient(var(--primary),var(--accent),var(--primary-glow),var(--primary));box-shadow:var(--s-glow);transition:transform .4s}
.lgp[data-state="ok"] .lgp-ring{background:conic-gradient(var(--ok),var(--primary-glow),var(--ok));transform:scale(1.06)}
.lgp-av{width:4.4rem;height:4.4rem;border-radius:50%;display:grid;place-items:center;overflow:hidden;background:color-mix(in oklab,var(--background) 80%,var(--primary));font:700 1.5rem var(--font-d);color:var(--primary)}
html.light .lgp-av{background:#fff}
.lgp-av svg{width:1.7rem;height:1.7rem}
.lgp-info{min-width:0}
.lgp-info h3{font-size:1.25rem;line-height:1.15;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lgp-info p{margin-top:.15rem;font-size:.78rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lgp-code{display:inline-block;margin-top:.55rem;padding:.3rem .65rem;border-radius:.65rem;font:600 .78rem var(--font-d);letter-spacing:.07em;color:var(--primary);background:color-mix(in oklab,var(--primary) calc(11% * var(--ts)),transparent);border:1px dashed color-mix(in oklab,var(--primary) calc(45% * var(--ts)),transparent)}
.lgp-chips{display:flex;gap:.4rem;flex-wrap:wrap;padding:0 1.25rem 1rem}
.lgc{display:inline-flex;align-items:center;gap:.35rem;padding:.28rem .65rem;border-radius:999px;font-size:.7rem;font-weight:600;color:var(--muted-fg);border:1px solid var(--border);transition:.3s}
.lgc svg{width:.8rem;height:.8rem;opacity:.45}
.lgc.on{color:var(--ok);border-color:color-mix(in oklab,var(--ok) 45%,transparent);background:color-mix(in oklab,var(--ok) 10%,transparent)}
.lgc.on svg{opacity:1;stroke-width:3}
.lgp-foot{display:flex;justify-content:space-between;gap:1rem;padding:.7rem 1.25rem .8rem;background:#F68104;color:#fff}
.lgp-foot small{display:block;font-size:.65rem;color:rgba(255,255,255,.8)}
.lgp-foot b{font:600 .85rem var(--font-d);font-variant-numeric:tabular-nums}
.lgp-scan{position:absolute;left:0;right:0;top:0;height:3px;opacity:0;pointer-events:none;background:var(--primary-glow);box-shadow:0 0 18px 6px color-mix(in oklab,var(--primary) 55%,transparent)}
.lgp[data-state="verify"] .lgp-scan{opacity:1;animation:lgScan 1.1s ease-in-out infinite alternate}
@keyframes lgScan{from{top:0}to{top:100%}}
.lgp-stamp{position:absolute;right:1rem;bottom:5.2rem;padding:.2rem .7rem;border:3px solid var(--ok);color:var(--ok);border-radius:.55rem;font:800 .88rem var(--font-d);letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;background:color-mix(in oklab,var(--background) 70%,var(--ok));transform:rotate(-8deg) scale(1.7);opacity:0;pointer-events:none;transition:transform .5s cubic-bezier(.2,.9,.3,1.3),opacity .3s .05s}
html.light .lgp-stamp{background:#fff}
.lgp[data-state="ok"] .lgp-stamp{opacity:.95;transform:rotate(-8deg) scale(1)}

/* "Inside your dashboard" feed (reuses .feed rows) */
.lg-away{gap:.5rem;padding:1rem;border-radius:1.25rem;width:min(100%,27rem)}
.lg-away>small{font-size:.75rem;margin-bottom:.1rem}

/* small screens: the pass becomes a compact strip above the form */
@media(max-width:1023px){
  .lgp-wrap{width:100%}
  .lgp-wrap::before{display:none}
  .lgp-band{padding:.55rem .9rem}
  .lgp-band small,.lgp-foot,.lgp-chips{display:none}
  .lgp-body{padding:.85rem 1rem;gap:.85rem}
  .lgp-av{width:3.2rem;height:3.2rem;font-size:1.2rem}
  .lgp-av svg{width:1.4rem;height:1.4rem}
  .lgp-info h3{font-size:1.05rem}
  .lgp-code{margin-top:.35rem}
  .lgp-stamp{display:none}
}

/* ---------- the sign-in card ---------- */
.lg-frame{width:100%;max-width:30rem;justify-self:center;border-radius:1.9rem;padding:4px;background:var(--g-ember);box-shadow:var(--s-ember);animation:lgIn .9s cubic-bezier(.2,.7,.2,1) .35s backwards}
@media(min-width:1024px){.lg-frame{justify-self:end}}
@keyframes lgIn{from{opacity:0;transform:translateY(28px)}}
.lg-frame.shake{animation:lgShake .45s}
@keyframes lgShake{20%,60%{transform:translateX(-7px)}40%,80%{transform:translateX(7px)}}
.lg-card{display:grid;gap:1.1rem;border-radius:1.75rem;background:var(--card);padding:1.35rem 1.1rem}
@media(min-width:480px){.lg-card{padding:2rem 1.9rem}}
html.light .lg-card{background:#FEF5EE}
.lg-head h1{font-size:1.75rem;line-height:1.15;font-weight:700}
.lg-head p{margin-top:.35rem;font-size:.9rem}

/* method switch */
.lg-tabs{position:relative;display:grid;grid-template-columns:1fr 1fr;padding:4px;border-radius:999px}
.lg-ind{position:absolute;top:4px;bottom:4px;left:4px;width:calc(50% - 4px);border-radius:999px;background:var(--g-primary);box-shadow:var(--s-glow);transform:translateX(calc(var(--i,0) * 100%));transition:transform .45s cubic-bezier(.2,.8,.2,1)}
.lg-tabs button{position:relative;z-index:1;display:flex;align-items:center;justify-content:center;gap:.45rem;padding:.65rem .75rem;border-radius:999px;font-size:.85rem;font-weight:600;color:var(--muted-fg);transition:color .3s;white-space:nowrap}
.lg-tabs button span{display:grid;font-size:1rem}
.lg-tabs button[aria-selected="true"]{color:var(--primary-fg)}
.lg-panel{display:grid;gap:1rem;animation:lgPanel .45s cubic-bezier(.2,.7,.2,1) backwards}
.lg-panel[hidden],.lgf[hidden],.lg-alert[hidden],.lgi-hint[hidden]{display:none}
@keyframes lgPanel{from{opacity:0;transform:translateY(10px)}}

/* forms: neutralise the global form{} / form input{} rules from the CTA section */
.lgf{margin:0;max-width:none;display:grid;gap:1rem}
.lgfld{display:grid}
.lgi{position:relative}
.lgi input{width:100%;padding:1.45rem 3rem .5rem 2.9rem;border-radius:1rem;border:1px solid var(--border);background:color-mix(in oklab,var(--background) 55%,transparent);color:var(--foreground);font:inherit;font-size:.95rem;outline:0;transition:border-color .25s,box-shadow .25s}
.lgi input:focus{border-color:var(--primary);box-shadow:0 0 0 4px color-mix(in oklab,var(--primary) calc(18% * var(--ts)),transparent)}
.lgi label{position:absolute;left:2.9rem;right:3rem;top:50%;transform:translateY(-50%);font-size:.92rem;color:var(--muted-fg);pointer-events:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:top .2s,transform .2s,font-size .2s,color .2s}
.lgi input:focus+label,.lgi input:not(:placeholder-shown)+label{top:.5rem;transform:none;font-size:.68rem;color:var(--primary)}
.lgi-ic{position:absolute;left:1rem;top:50%;transform:translateY(-50%);display:grid;font-size:1.1rem;color:var(--muted-fg);transition:color .25s;pointer-events:none}
.lgi:focus-within .lgi-ic{color:var(--primary)}
.lgi .lgi-eye{position:absolute;right:.45rem;top:50%;transform:translateY(-50%);width:2.4rem;height:2.4rem;padding:0;border-radius:.75rem;display:grid;place-items:center;font-size:1.1rem;color:var(--muted-fg);transition:color .2s,background .2s}
.lgi .lgi-eye:hover{color:var(--primary);background:color-mix(in oklab,var(--primary) calc(10% * var(--ts)),transparent)}
.lgi-m{display:none;margin:.4rem .25rem 0;font-size:.75rem;color:var(--bad)}
.lgfld.err .lgi-m{display:block}
.lgfld.err .lgi input{border-color:var(--bad)}
.lgfld.err .lgi input:focus{box-shadow:0 0 0 4px color-mix(in oklab,var(--bad) 18%,transparent)}
.lgi-hint{margin:.4rem .25rem 0;font-size:.75rem;color:var(--primary)}

.lg-row{display:flex;align-items:center;justify-content:space-between;gap:.6rem 1rem;flex-wrap:wrap;font-size:.85rem}
.lg-row a{color:var(--primary);font-weight:600}
.lg-row a:hover,.lg-sign a:hover{text-decoration:underline;text-underline-offset:3px}
.lgck{position:relative;display:inline-flex;align-items:center;gap:.6rem;cursor:pointer;user-select:none;color:var(--muted-fg)}
.lgck input{position:absolute;opacity:0;width:1px;height:1px;padding:0;margin:0}
.lgck-b{position:relative;width:1.2rem;height:1.2rem;flex-shrink:0;border-radius:.4rem;border:1.5px solid color-mix(in oklab,var(--muted-fg) 55%,transparent);transition:.25s}
.lgck-b::after{content:"";position:absolute;left:.36rem;top:.14rem;width:.3rem;height:.6rem;border:solid var(--primary-fg);border-width:0 2px 2px 0;transform:rotate(45deg) scale(0);transition:transform .2s}
.lgck input:checked+.lgck-b{background:var(--g-primary);border-color:transparent;box-shadow:var(--s-glow)}
.lgck input:checked+.lgck-b::after{transform:rotate(45deg) scale(1)}
.lgck:hover,.lgck:has(input:checked){color:var(--foreground)}
.lgck input:focus-visible+.lgck-b{outline:2px solid var(--primary);outline-offset:3px}

.lg-alert{display:flex;gap:.6rem;align-items:flex-start;padding:.75rem .9rem;border-radius:.95rem;border:1px solid var(--bad);color:var(--bad);background:color-mix(in oklab,var(--bad) 10%,transparent);font-size:.82rem;font-weight:500;line-height:1.4}
.lg-alert [data-i]{display:grid;font-size:1rem;margin-top:.05rem}

.lgf .lg-sub{width:100%;padding:.95rem 1.25rem;border-radius:1rem;font-size:.95rem;gap:.6rem}
.lg-spin{display:none;width:1.1rem;height:1.1rem;border-radius:50%;border:2px solid color-mix(in oklab,var(--primary-fg) 30%,transparent);border-top-color:var(--primary-fg);animation:spin .7s linear infinite}
.lg-sub.busy .lg-spin{display:block}
.lg-sub.busy{pointer-events:none}
.lg-sub[disabled]{opacity:.9}
@media(hover:hover){.lgf .lg-sub:hover{transform:translateY(-2px)}}

.lg-or{display:flex;align-items:center;gap:1rem;font-size:.8rem;color:var(--muted-fg)}
.lg-or::before,.lg-or::after{content:"";flex:1;height:1px;background:linear-gradient(to right,transparent,var(--border))}
.lg-or::after{background:linear-gradient(to left,transparent,var(--border))}
.lg-g{width:100%;padding:.9rem 1.25rem;border-radius:1rem;font-size:.9rem;gap:.7rem}
.lg-g svg{width:1.25rem;height:1.25rem}
@media(hover:hover){.lg-g:hover{transform:translateY(-2px);border-color:color-mix(in oklab,var(--primary) calc(40% * var(--ts)),transparent);box-shadow:var(--s-ember)}}
.lg-g:active{transform:scale(.97)}
.lg-sign{text-align:center;font-size:.88rem}
.lg-sign a{color:var(--primary);font-weight:600}
.lg-sec{display:flex;align-items:center;justify-content:center;gap:.45rem;text-align:center;font-size:.74rem;line-height:1.4}
.lg-sec span{display:grid;color:var(--primary);font-size:.95rem}

/* WhatsApp OTP */
.lg-wa{display:grid;grid-template-columns:auto 1fr;gap:.9rem;align-items:center;padding:.9rem 1rem;border-radius:1.15rem}
.lg-wa .ico{width:2.7rem;height:2.7rem;border-radius:.9rem;font-size:1.25rem;box-shadow:var(--s-ember)}
.lg-wa b{display:block;font:600 1rem/1.25 var(--font-d)}
.lg-wa small{display:block;margin-top:.15rem;font-size:.8rem;line-height:1.45}
.lg-sent{display:flex;justify-content:space-between;align-items:center;gap:.5rem .75rem;flex-wrap:wrap;font-size:.82rem}
.lgf .lg-link{padding:0;border-radius:.3rem;color:var(--primary);font-size:.82rem;font-weight:600}
.lgf .lg-link:hover{text-decoration:underline;text-underline-offset:3px}
.lgf .lg-link[disabled]{color:var(--muted-fg);font-weight:500;pointer-events:none}
.lg-bub{display:flex;gap:.6rem;align-items:flex-start;justify-self:start;max-width:94%;padding:.65rem .85rem;border-radius:.3rem 1rem 1rem 1rem;font-size:.82rem;line-height:1.45;border:1px solid var(--glass-border);background:linear-gradient(135deg,var(--glass-a),var(--glass-b))}
.lg-bub-i{display:grid;font-size:1.1rem;color:var(--ok);margin-top:.1rem}
.lg-bub b{color:var(--primary);letter-spacing:.12em}
.lg-bub small{display:block;text-align:right;margin-top:.15rem;font-size:.65rem;color:var(--muted-fg)}
.lg-otp{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:.45rem}
@media(min-width:480px){.lg-otp{gap:.6rem}}
.lg-otp input{width:100%;aspect-ratio:1/1.2;padding:0;text-align:center;border-radius:.9rem;border:1px solid var(--border);background:color-mix(in oklab,var(--background) 55%,transparent);color:var(--foreground);font:700 1.45rem var(--font-d);outline:0;caret-color:var(--primary);transition:border-color .25s,box-shadow .25s,transform .25s}
.lg-otp input.f{border-color:color-mix(in oklab,var(--primary) 60%,transparent)}
.lg-otp input:focus{border-color:var(--primary);box-shadow:0 0 0 4px color-mix(in oklab,var(--primary) calc(18% * var(--ts)),transparent);transform:translateY(-2px)}
.lg-otp.err input{border-color:var(--bad);animation:lgShake .4s}

.lg-toast{position:fixed;left:50%;bottom:1.5rem;z-index:70;max-width:calc(100vw - 2rem);padding:.7rem 1.1rem;border-radius:1rem;font-size:.85rem;opacity:0;pointer-events:none;transform:translate(-50%,20px);transition:opacity .35s,transform .35s cubic-bezier(.2,.7,.2,1)}
.lg-toast.on{opacity:1;transform:translate(-50%,0)}

@media(prefers-reduced-motion:reduce){.lgp{animation:none;transition:none}.lg-frame{animation:none}.lg-ind{transition:none}}

/* ====================================================================
   REGISTER PAGE  (register.html) — scoped to body.rg / rg* classes
   Reuses the login card family (.lg-frame .lg-card .lgi .lg-otp ...)
   ==================================================================== */
body.rg{--ok:oklch(0.78 0.17 150);--bad:oklch(0.68 0.22 25);min-height:100vh;min-height:100svh;display:flex;flex-direction:column}
html.light body.rg{--ok:oklch(0.52 0.15 150);--bad:oklch(0.56 0.22 25)}
body.rg main{flex:1;display:flex;align-items:center;position:relative;overflow:hidden;padding:2rem 0}
@media(min-width:1024px){body.rg main{padding:3rem 0}}
body.rg main>.wrap{position:relative;z-index:1}
body.rg [hidden]{display:none!important}
#rgFrame{scroll-margin-top:6rem}
.rg-grid{display:grid;gap:1.25rem;align-items:center;width:100%}
@media(min-width:1024px){.rg-grid{grid-template-columns:minmax(0,1fr) minmax(0,31rem);gap:4rem}}
.rg-grid .lg-frame{max-width:32rem}

/* ---- left: the site under construction ---- */
.rg-site{display:grid;gap:1.25rem;min-width:0;justify-items:start}
.rg-hero,.rg-lead{display:none}
@media(min-width:1024px){
  .rg-hero{display:block;font:700 clamp(2.2rem,3.7vw,3.3rem)/1.06 var(--font-d);letter-spacing:-.02em}
  .rg-lead{display:block;max-width:30rem;font-size:1.05rem;line-height:1.65}
  .rg-site{gap:1.6rem}
}
.rg-hero .tg{background-size:220% auto;animation:shimmer 6s ease-in-out infinite alternate}
.rg-sc{display:flex;align-items:center;gap:1.1rem;width:100%}
@media(min-width:1024px){.rg-sc{gap:2.2rem;align-items:flex-end}}
.rgs-wrap{position:relative;flex:none;width:8rem;height:10rem}
@media(min-width:1024px){.rgs-wrap{width:16rem;height:20rem}}
.rgs{position:absolute;left:0;top:0;width:16rem;height:20rem;transform:scale(.5);transform-origin:0 0}
@media(min-width:1024px){.rgs{transform:none}}
.rgs-cr{position:absolute;inset:0;width:100%;height:100%;color:var(--primary);opacity:.75;overflow:visible}
.rgs-cr .hk,.rgs-cr .cb{animation:rgHook 4.6s ease-in-out infinite alternate}
.rgs-cr .cb{transform-box:fill-box;transform-origin:50% 0;animation-name:rgCable}
@keyframes rgHook{to{transform:translateY(10px)}}
@keyframes rgCable{to{transform:scaleY(1.625)}}
.rgs-bd{position:absolute;left:0;bottom:0;width:11.5rem;display:flex;flex-direction:column-reverse}
.rgs-base{height:.9rem;margin:0 -.7rem;border-radius:.3rem;background:repeating-linear-gradient(-45deg,#F68104 0 9px,#fff 9px 18px)}
.rgs-f{position:relative;height:2.9rem;margin-top:-1.5px;display:flex;align-items:center;gap:.55rem;padding:0 .8rem;border:1.5px dashed color-mix(in oklab,var(--primary) 45%,transparent);color:var(--muted-fg);font:600 .78rem var(--font-d);opacity:.55;transform-origin:bottom;transition:opacity .4s,color .4s,background .4s,border-color .4s}
.rgs-f>span{display:grid;font-size:1rem}
.rgs-f::after{content:"";margin-left:auto;width:3.1rem;height:1.2rem;border-radius:2px;background:repeating-linear-gradient(90deg,currentColor 0 .55rem,transparent .55rem .85rem);opacity:.4}
.rgs-f.on{opacity:1;border:1.5px solid #F68104;color:var(--primary-fg);background:var(--g-primary);box-shadow:var(--s-glow);animation:rgRise .75s cubic-bezier(.2,.8,.2,1)}
.rgs-f.on::after{opacity:.8}
@keyframes rgRise{from{opacity:0;transform:translateY(-34px) scaleY(.35)}60%{transform:translateY(3px)}}
.rgs-roof{position:relative;height:3rem;display:flex;align-items:center;justify-content:center;gap:.45rem;border:1.5px dashed color-mix(in oklab,var(--primary) 45%,transparent);border-bottom:0;border-radius:1.4rem 1.4rem 0 0;color:var(--muted-fg);opacity:.55;font:700 .74rem var(--font-d);letter-spacing:.06em;text-transform:uppercase;transition:.45s}
.rgs-roof>span{display:grid;font-size:.95rem}
.rgs-roof.on{opacity:1;color:var(--primary);border-style:solid;border-color:var(--primary);background:linear-gradient(180deg,color-mix(in oklab,var(--primary) calc(24% * var(--ts)),transparent),transparent);box-shadow:var(--s-glow)}
.rgs-pen{position:absolute;right:.7rem;bottom:calc(100% + .35rem);padding:.15rem .55rem;border-radius:.4rem;font:800 .66rem var(--font-d);letter-spacing:.04em;color:var(--primary-fg);background:var(--g-primary);box-shadow:var(--s-glow);opacity:0;transform:translateY(8px) scale(.8);transition:.45s cubic-bezier(.2,.9,.3,1.3);text-transform:none}
.rg-site[data-bonus] .rgs-pen{opacity:1;transform:none}
.rgs-stamp{position:absolute;left:.2rem;top:42%;padding:.2rem .7rem;border:3px solid var(--ok);color:var(--ok);border-radius:.55rem;font:800 .9rem var(--font-d);letter-spacing:.1em;text-transform:uppercase;white-space:nowrap;background:color-mix(in oklab,var(--background) 70%,var(--ok));transform:rotate(-8deg) scale(1.7);opacity:0;pointer-events:none;transition:transform .5s cubic-bezier(.2,.9,.3,1.3),opacity .3s .05s}
html.light .rgs-stamp{background:#fff}
.rg-site[data-done] .rgs-stamp{opacity:.95;transform:rotate(-8deg) scale(1)}

.rg-info{display:grid;gap:.75rem;min-width:0;flex:1;align-content:center}
.rgs-sign{position:relative;padding:.8rem 1rem .8rem 1.25rem;border-radius:1.1rem;overflow:hidden}
.rgs-sign::before{content:"";position:absolute;left:0;top:0;bottom:0;width:.4rem;background:repeating-linear-gradient(-45deg,#F68104 0 6px,#fff 6px 12px)}
.rgs-sign small{display:block;font-size:.64rem;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:var(--primary)}
.rgs-sign b{display:block;margin-top:.1rem;font:700 1.2rem/1.2 var(--font-d);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rgs-sign em{display:block;font-style:normal;font-size:.76rem;color:var(--muted-fg);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media(min-width:1024px){.rgs-sign b{font-size:1.5rem}}
.rg-fl{font-size:.8rem;color:var(--muted-fg)}
.rg-fl b{color:var(--primary);font-variant-numeric:tabular-nums}
.rg-ck{display:none;flex-wrap:wrap;gap:.4rem}
@media(min-width:1024px){.rg-ck{display:flex}}
.rg-bonus{display:none;align-items:center;gap:.45rem;width:max-content;max-width:100%;padding:.4rem .8rem;border-radius:999px;font-size:.74rem;font-weight:600;color:var(--muted-fg);border:1px dashed var(--border);transition:.35s}
.rg-bonus span{display:grid;font-size:.95rem}
@media(min-width:1024px){.rg-bonus{display:inline-flex}}
.rg-site[data-bonus] .rg-bonus{color:var(--primary);border:1px solid color-mix(in oklab,var(--primary) 45%,transparent);background:color-mix(in oklab,var(--primary) calc(10% * var(--ts)),transparent)}

/* ---- step rail ---- */
.rg-steps{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);margin:.2rem 0 .1rem}
.rg-steps li{position:relative;text-align:center;font-size:.72rem;font-weight:600;color:var(--muted-fg);transition:color .3s}
.rg-steps li i{position:relative;z-index:1;display:grid;place-items:center;width:2rem;height:2rem;margin:0 auto .35rem;border-radius:50%;font:600 .78rem var(--font-d);font-style:normal;border:2px solid var(--border);background:var(--card);transition:.35s}
html.light .rg-steps li i{background:#FEF5EE}
.rg-steps li+li::before{content:"";position:absolute;top:.9rem;left:-50%;width:100%;height:4px;border-radius:4px;background:var(--border);transition:.4s}
.rg-steps li.done+li::before,.rg-steps li.now::before{background:repeating-linear-gradient(-45deg,var(--primary) 0 6px,color-mix(in oklab,var(--primary) 30%,transparent) 6px 12px)}
.rg-steps li.now,.rg-steps li.done{color:var(--foreground)}
.rg-steps li.now i{border-color:var(--primary);color:var(--primary);box-shadow:0 0 0 5px color-mix(in oklab,var(--primary) calc(16% * var(--ts)),transparent)}
.rg-steps li.done i{background:var(--g-primary);border-color:transparent;color:var(--primary-fg);font-size:0}
.rg-steps li.done i::after{content:"";width:.32rem;height:.62rem;margin-top:-.12rem;border:solid var(--primary-fg);border-width:0 2.5px 2.5px 0;transform:rotate(45deg)}

/* ---- panes ---- */
.rg-pane{display:grid;gap:1rem;animation:lgPanel .45s cubic-bezier(.2,.7,.2,1) backwards}
.rg-form .lgi input{font-size:1rem}
.lgi.act input{padding-right:7rem}.lgi.act label{right:7rem}
.lgi .rg-send{position:absolute;right:.4rem;top:50%;transform:translateY(-50%);display:inline-flex;align-items:center;gap:.4rem;padding:.6rem .85rem;border-radius:.8rem;font-size:.78rem;font-weight:600;color:var(--primary-fg);background:var(--g-primary);box-shadow:var(--s-glow);transition:filter .2s,opacity .2s}
.lgi .rg-send:hover{filter:brightness(1.08)}
.lgi .rg-send:active{transform:translateY(-50%) scale(.96)}
.rg-send.busy{pointer-events:none;opacity:.85}
.rg-send.busy .lg-spin{display:block;width:.9rem;height:.9rem}
.lgi input[readonly]{opacity:.7}
.rg-opt{display:grid;gap:.9rem}
.rg-em{display:grid;gap:.9rem}
.rg-em .to{display:block;margin-top:.2rem;font:600 .86rem var(--font-d);color:var(--foreground);word-break:break-all}
.rg-otpb{display:grid;gap:.9rem;padding:1rem;border-radius:1.2rem;border:1px dashed color-mix(in oklab,var(--primary) 45%,transparent);animation:lgPanel .45s cubic-bezier(.2,.7,.2,1) backwards}
.lg-otp.busy{opacity:.55;pointer-events:none}
.rg-ver{display:flex;align-items:center;gap:.7rem;padding:.8rem .95rem;border-radius:1rem;border:1px solid var(--ok);color:var(--ok);background:color-mix(in oklab,var(--ok) 10%,transparent);font-size:.85rem;font-weight:600;animation:lgPanel .45s cubic-bezier(.2,.7,.2,1) backwards}
.rg-ver>i{display:grid;place-items:center;width:1.6rem;height:1.6rem;border-radius:50%;background:var(--ok);color:var(--background);flex:none}
.rg-ver>i svg{width:.9rem;height:.9rem;stroke-width:3}
.rg-ver span{flex:1;min-width:0}
.rg-ver .lg-link{color:var(--ok)}

/* password strength */
.rg-str{display:flex;align-items:center;gap:.4rem;margin:.55rem .25rem 0}
.rg-str i{flex:1;height:.4rem;border-radius:9px;background:var(--border);transition:background .3s}
.rg-str[data-s="1"] i:nth-child(-n+1){background:var(--bad)}
.rg-str[data-s="2"] i:nth-child(-n+2){background:oklch(0.78 0.16 70)}
.rg-str[data-s="3"] i:nth-child(-n+3){background:var(--primary)}
.rg-str[data-s="4"] i{background:var(--ok)}
.rg-str small{min-width:3.2rem;text-align:right;font-size:.7rem;color:var(--muted-fg)}
.rg-tip{margin:.4rem .25rem 0;font-size:.74rem;color:var(--muted-fg)}
.rg-tip b{color:var(--primary)}
.rg-terms{font-size:.8rem;line-height:1.4}
.rg-terms a{color:var(--primary);font-weight:600}

/* nav row */
.rg-nav{display:grid;grid-template-columns:1fr;gap:.7rem}
.rg-nav:has(#rgBack:not([hidden])){grid-template-columns:auto 1fr}
.lgf .rg-back{display:inline-flex;align-items:center;gap:.5rem;padding:.95rem 1.2rem;border-radius:1rem;font-size:.9rem;font-weight:600}
.rg-back span{display:grid}
@media(hover:hover){.lgf .rg-back:hover{transform:translateX(-3px);border-color:color-mix(in oklab,var(--primary) calc(40% * var(--ts)),transparent)}}

/* success */
.rg-done{display:grid;gap:1rem;justify-items:center;text-align:center;padding:.5rem 0;animation:lgPanel .6s cubic-bezier(.2,.7,.2,1) backwards}
.rg-done .ring{padding:3px;border-radius:50%;background:conic-gradient(var(--ok),var(--primary-glow),var(--ok));box-shadow:var(--s-glow)}
.rg-done .ring i{display:grid;place-items:center;width:4.4rem;height:4.4rem;border-radius:50%;font-size:1.9rem;color:var(--ok);background:var(--card)}
html.light .rg-done .ring i{background:#fff}
.rg-done .ring svg{stroke-width:3}
.rg-done h2{font-size:1.6rem;line-height:1.2}
.rg-done .btn{width:100%;padding:.95rem 1.25rem;border-radius:1rem;font-size:.95rem}
.rg-done .pts{display:inline-flex;align-items:center;gap:.4rem;font-size:.8rem;font-weight:700;color:var(--primary);padding:.35rem .8rem;border-radius:999px;border:1px dashed color-mix(in oklab,var(--primary) 50%,transparent)}
.rg-done .pts span{display:grid}
@media(prefers-reduced-motion:reduce){.rgs-cr .hk,.rgs-cr .cb,.rgs-f.on,.rg-pane,.rg-done{animation:none}}

/* ===== tighter section spacing (home page only: <body> without a class) ===== */
body:not([class]) .sec,body:not([class]) .xsec{padding:3.75rem 0}
@media(min-width:640px){body:not([class]) .sec,body:not([class]) .xsec{padding:5rem 0}}
body:not([class]) .head{margin-bottom:3rem}
body:not([class]) .hero{padding-bottom:6rem}

/* ====================================================================
   PRICING v4 — per-user plans, user stepper, locked/unlocked features
   ==================================================================== */
#pricing{--ok:oklch(0.78 0.17 150)}
html.light #pricing{--ok:oklch(0.5 0.15 150)}
.pctl{margin-top:2rem;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:1rem 1.25rem}
.pu{display:inline-flex;align-items:center;gap:.3rem;padding:4px 4px 4px 1.15rem;border-radius:999px;transition:border-color .3s,box-shadow .3s}
.pu:focus-within{border-color:color-mix(in oklab,var(--primary) calc(55% * var(--ts)),var(--glass-border));box-shadow:0 0 0 4px color-mix(in oklab,var(--primary) calc(14% * var(--ts)),transparent)}
.pu label{font-size:.85rem;font-weight:600;color:var(--muted-fg);margin-right:.2rem}
.pu input{width:3.2rem;text-align:center;background:transparent;border:0;outline:0;color:var(--foreground);font:700 1.1rem var(--font-d);padding:.45rem 0;-moz-appearance:textfield;appearance:textfield;font-variant-numeric:tabular-nums}
.pu input::-webkit-outer-spin-button,.pu input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.pu button{width:2.2rem;height:2.2rem;border-radius:50%;display:grid;place-items:center;font-size:1.2rem;font-weight:600;line-height:1;background:color-mix(in oklab,var(--foreground) 8%,transparent);transition:background .25s,color .25s,transform .2s}
.pu button:hover{background:var(--g-primary);color:var(--primary-fg)}
.pu button:active{transform:scale(.9)}
.pctl .bill{position:relative;margin-top:0;overflow:visible}
.save{position:absolute;top:-.85rem;right:-.7rem;padding:.18rem .6rem;border-radius:999px;font:700 .65rem var(--font-s);letter-spacing:.02em;white-space:nowrap;color:oklch(0.2 0.05 150);background:var(--ok);transform:rotate(8deg);box-shadow:0 6px 16px -4px color-mix(in oklab,var(--ok) 70%,transparent);pointer-events:none}
.pnh{margin-top:1rem;font-size:.82rem;min-height:1.3rem;transition:color .3s}
.pnh.on{color:var(--ok);font-weight:600}

.pgrid{padding-top:.9rem;gap:1.25rem}
@media(min-width:1024px){.pgrid{gap:1.75rem}}
.plan{padding:1.75rem 1.4rem;overflow:hidden}
@media(min-width:640px){.plan{padding:2.25rem 2rem}}
.plan::before{content:"";position:absolute;inset:0 0 auto 0;height:10rem;border-radius:inherit;pointer-events:none;background:radial-gradient(70% 100% at 50% 0%,color-mix(in oklab,var(--primary) calc(15% * var(--ts)),transparent),transparent)}
.plan>*:not(.badge-pop){position:relative}
.plan .ph{margin-bottom:1rem}
.plan .pt{margin-top:.1rem}
.plan .pd{min-height:3.4rem}
.price{margin-top:1.1rem;align-items:baseline;gap:.3rem}
.price sup{align-self:flex-start;margin-top:.45rem;font:700 1.4rem var(--font-d);color:var(--muted-fg)}
.price b{font-size:3.2rem;line-height:1;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.ptot{margin-top:1.1rem;display:flex;justify-content:space-between;align-items:center;gap:.75rem;padding:.7rem .9rem;border-radius:.95rem;font-size:.78rem;color:var(--muted-fg);background:color-mix(in oklab,var(--foreground) 4%,transparent);border:1px dashed var(--border)}
.ptot b{font:700 1.05rem var(--font-d);color:var(--foreground);font-variant-numeric:tabular-nums;white-space:nowrap}
.ptot em{font:500 .72rem var(--font-s);font-style:normal;color:var(--muted-fg);margin-left:.15rem}
.plan .sep{margin:1.4rem 0}
.plan ul{gap:.8rem}
.plan li>div{flex:1;min-width:0}
.plan li small{display:block;margin-top:.15rem;font-size:.72rem;color:var(--primary)}
.plan li.lk span{text-decoration:line-through;color:var(--muted-fg);text-decoration-color:color-mix(in oklab,var(--muted-fg) 70%,transparent)}
.plan li.lk i{opacity:.55}
.plan li.un small{color:var(--ok);font-weight:600}
.plan li.un i{box-shadow:0 0 14px -2px color-mix(in oklab,var(--ok) 60%,transparent)}
.plan .pb{width:100%;margin-top:2rem}
.hl .plan{overflow:visible}

@media(max-width:767px){
  .pgrid{max-width:28rem;margin:0 auto}
  .pgrid>.hl{order:-1}
  .plan .pd{min-height:0}
  .price b{font-size:2.9rem}
}
@media(max-width:480px){
  .pctl{flex-direction:column;gap:1.25rem}
  .pctl>*{max-width:100%}
  .pu{padding-left:1rem}
  .bill button{padding:.5rem 1.1rem}
  .ptot{flex-direction:column;align-items:flex-start;gap:.15rem}
}

/* Save badge: readable in light theme */
html.light .save{color:#fff;background:oklch(0.5 0.15 150);box-shadow:0 6px 16px -4px oklch(0.5 0.15 150 / .45)}

/* Register page: remove the orange background glow / blobs */
body.rg .lg-bg,body.rg .blob,body.rg #cg,body.rg .lgb1,body.rg .lgb2{display:none!important}
body.rg main{background:none}

/* ===== Login pass: refined dark-theme look (light theme keeps the solid orange pass) ===== */
html:not(.light) .lgp{border:1px solid color-mix(in oklab,var(--primary) 32%,var(--border));background:linear-gradient(170deg,oklch(0.19 0.02 45),oklch(0.145 0.012 40));box-shadow:0 30px 70px -30px rgba(0,0,0,.8),0 0 0 1px oklch(1 0 0 / .03) inset,0 0 50px -24px color-mix(in oklab,var(--primary) 45%,transparent)}
html:not(.light) .lgp::after{background:linear-gradient(115deg,transparent 38%,rgba(255,255,255,.05) 48%,transparent 58%);background-size:260% 100%}
html:not(.light) .lgp-band{background:linear-gradient(135deg,color-mix(in oklab,var(--primary) 20%,oklch(0.18 0.02 45)),color-mix(in oklab,var(--primary) 4%,oklch(0.16 0.015 42)));color:var(--foreground);border-bottom:1px solid color-mix(in oklab,var(--primary) 22%,transparent)}
html:not(.light) .lgp-mk{background:var(--g-primary);color:var(--primary-fg);box-shadow:var(--s-glow)}
html:not(.light) .lgp-band small{color:var(--muted-fg)}
html:not(.light) .lgp-tag{background:color-mix(in oklab,var(--primary) 14%,transparent);color:var(--primary-glow);box-shadow:inset 0 0 0 1px color-mix(in oklab,var(--primary) 38%,transparent)}
html:not(.light) .lgp[data-state="ok"] .lgp-tag{background:color-mix(in oklab,var(--ok) 16%,transparent);color:var(--ok);box-shadow:inset 0 0 0 1px color-mix(in oklab,var(--ok) 45%,transparent)}
html:not(.light) .lgp[data-state="err"] .lgp-tag{background:color-mix(in oklab,var(--bad) 16%,transparent);color:var(--bad);box-shadow:inset 0 0 0 1px color-mix(in oklab,var(--bad) 45%,transparent)}
html:not(.light) .lgp-stripe{height:2px;background:linear-gradient(90deg,transparent,var(--primary),var(--primary-glow),transparent);opacity:.8}
html:not(.light) .lgp-foot{background:color-mix(in oklab,var(--foreground) 3%,transparent);border-top:1px solid var(--border);color:var(--foreground)}
html:not(.light) .lgp-foot small{color:var(--muted-fg)}
html:not(.light) .lgp-stamp{background:color-mix(in oklab,var(--background) 80%,var(--ok))}
html:not(.light) .lgp-wrap::before{opacity:.12}

/* ===== Login pass: refined light-theme look ===== */
html.light .lgp{border:1px solid oklch(0.9 0.03 55);background:linear-gradient(170deg,#fff,#FEF7F1);box-shadow:0 34px 60px -36px rgba(160,60,10,.3),0 1px 0 #fff inset,0 0 0 1px rgba(246,129,4,.04)}
html.light .lgp::after{background:linear-gradient(115deg,transparent 38%,rgba(255,255,255,.55) 48%,transparent 58%);background-size:260% 100%}
html.light .lgp-band{background:linear-gradient(135deg,#FFEBDB,#FFF8F2);color:var(--foreground);border-bottom:1px solid oklch(0.92 0.035 55)}
html.light .lgp-mk{background:var(--g-primary);color:#fff;box-shadow:0 8px 16px -8px rgba(234,88,12,.6)}
html.light .lgp-band small{color:var(--muted-fg)}
html.light .lgp-tag{background:rgba(246,129,4,.12);color:#B45309;box-shadow:inset 0 0 0 1px rgba(246,129,4,.32)}
html.light .lgp[data-state="ok"] .lgp-tag{background:rgba(21,128,61,.1);color:#15803d;box-shadow:inset 0 0 0 1px rgba(21,128,61,.35)}
html.light .lgp[data-state="err"] .lgp-tag{background:rgba(194,65,12,.1);color:#c2410c;box-shadow:inset 0 0 0 1px rgba(194,65,12,.35)}
html.light .lgp-stripe{height:2px;background:linear-gradient(90deg,transparent,#F68104,#FDBA74,transparent)}
html.light .lgp-foot{background:linear-gradient(135deg,#FFF8F2,#FFEFE2);border-top:1px solid oklch(0.92 0.035 55);color:var(--foreground)}
html.light .lgp-foot small{color:var(--muted-fg)}
html.light .lgp-wrap::before{opacity:.06}

/* ===== Register: simple single-page form ===== */
.rg-form{gap:1rem}
.rgf label{display:block;margin-bottom:.45rem;font-size:.85rem;font-weight:600}
.rgf label small{margin-left:.3rem;font-size:.72rem;font-weight:400;color:var(--muted-fg)}
.rgf .req{color:var(--primary)}
.rgi{width:100%;min-width:0;padding:.85rem 1rem;border-radius:.9rem;border:1px solid var(--border);background:color-mix(in oklab,var(--background) 55%,transparent);color:var(--foreground);font:inherit;font-size:.95rem;outline:0;transition:border-color .25s,box-shadow .25s}
.rgi::placeholder{color:var(--muted-fg);opacity:.75}
.rgi:focus{border-color:var(--primary);box-shadow:0 0 0 4px color-mix(in oklab,var(--primary) calc(18% * var(--ts)),transparent)}
.rgi[readonly]{opacity:.7}
.lgfld.err .rgi{border-color:var(--bad)}
.rgrow{display:flex;gap:.6rem}
.rgrow .rgi{flex:1}
.rgsend{flex:none;padding:0 1rem;border-radius:.9rem;font-size:.82rem;font-weight:600;white-space:nowrap;color:var(--primary);border:1px solid color-mix(in oklab,var(--primary) 45%,transparent);background:color-mix(in oklab,var(--primary) calc(12% * var(--ts)),transparent);transition:background .2s,opacity .2s}
.rgsend:hover{background:color-mix(in oklab,var(--primary) calc(22% * var(--ts)),transparent)}
.rgsend:disabled{opacity:.6;pointer-events:none}
.rgotp{text-align:center;letter-spacing:.3em;font-family:var(--font-d);font-weight:700}
.rgotp::placeholder{letter-spacing:.14em;font-size:.88rem;font-weight:600}
.rg-hint{margin-top:.4rem;font-size:.74rem;color:var(--muted-fg)}
.rg-hint.ok{color:var(--ok);font-weight:600}
.rgcc{flex:none;display:inline-flex;align-items:center;gap:.4rem;padding:0 .9rem;border-radius:.9rem;border:1px solid var(--border);background:color-mix(in oklab,var(--foreground) 4%,transparent);font:600 .9rem var(--font-d)}
.rgcc small{margin:0;font-size:.62rem;font-weight:800;color:var(--muted-fg)}
.rgref{letter-spacing:.06em;text-transform:uppercase}
.rgref::placeholder{text-transform:uppercase}

/* register: two-column layout */
.rg-form{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:.8rem;row-gap:.9rem}
.rg-form>*{grid-column:1/-1}
.rg-form>.rgf.half{grid-column:auto}
.rg-form.wa>.rgf-m{grid-column:1/-1}
.rg-form .rgi{padding:.75rem .85rem}
.rg-form .rgcc{padding:0 .6rem}
@media(max-width:520px){.rg-form>.rgf.half{grid-column:1/-1}}

/* register: field order per verification method */
.rg-form>.o-co{order:1}.rg-form>.o-ad{order:2}.rg-form>.o-em{order:3}.rg-form>.o-ot{order:4}
.rg-form>.o-mo{order:5}.rg-form>.o-rf{order:6}.rg-form>.o-p1{order:7}.rg-form>.o-p2{order:8}
.rg-form>.lg-alert{order:9}.rg-form>.rg-nav{order:10}
.rg-form.wa>.o-mo{order:3}.rg-form.wa>.o-ot{order:4}.rg-form.wa>.o-em{order:5}

/* WhatsApp mode: Email (optional) and Referral share one row */
.rg-form.wa>.o-em{grid-column:auto}
@media(max-width:520px){.rg-form.wa>.o-em{grid-column:1/-1}}

/* register: lift the left panel toward the top of the card */
@media(min-width:1024px){.rg-site{align-self:start;padding-top:1.5rem}}

/* ===== Brochure lead popup ===== */
.bm{position:fixed;inset:0;z-index:100;display:grid;place-items:center;padding:1rem;visibility:hidden;opacity:0;transition:opacity .35s,visibility 0s .35s}
.bm.open{visibility:visible;opacity:1;transition:opacity .35s,visibility 0s}
.bm-bd{position:absolute;inset:0;background:color-mix(in oklab,var(--background) 55%,transparent);backdrop-filter:blur(14px) saturate(130%);-webkit-backdrop-filter:blur(14px) saturate(130%)}
html:not(.light) .bm-bd{background:oklch(0.08 0.01 40 / .72)}
.bm-card{position:relative;width:min(100%,56rem);max-height:calc(100dvh - 2rem);overflow:auto;overscroll-behavior:contain;border-radius:1.75rem;padding:1px;background:var(--g-ember);box-shadow:0 40px 120px -30px oklch(0 0 0 / .55),var(--s-glow);transform:translateY(24px) scale(.96);transition:transform .45s cubic-bezier(.2,.9,.25,1.05)}
html.light .bm-card{box-shadow:0 40px 100px -40px oklch(0.3 0.02 50 / .35),0 0 0 1px oklch(0.9 0.01 60)}
.bm.open .bm-card{transform:none}
.bm-in{position:relative;display:grid;grid-template-columns:1fr;border-radius:calc(1.75rem - 1px);overflow:hidden;background:color-mix(in oklab,var(--background) 94%,var(--primary))}
html.light .bm-in{background:#fff}

/* left showcase */
.bm-side{display:none;position:relative;overflow:hidden;padding:2.25rem 2rem;flex-direction:column;justify-content:space-between;gap:1.5rem;border-right:1px solid var(--border);background:radial-gradient(circle at 15% 0%,color-mix(in oklab,var(--primary) calc(24% * var(--ts)),transparent),transparent 62%),color-mix(in oklab,var(--primary) calc(5% * var(--ts)),var(--background))}
.bm-side .grid-bg{opacity:.7}
.bm-side>*{position:relative}
.bm-side h4{font-size:.8rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--muted-fg);margin-bottom:.9rem}
.bm-list{list-style:none;display:grid;gap:.7rem}
.bm-list li{display:flex;align-items:center;gap:.7rem;font-size:.875rem}
.bm-list i{width:1.5rem;height:1.5rem;border-radius:50%;display:grid;place-items:center;flex-shrink:0;font-size:.75rem;background:color-mix(in oklab,var(--primary) calc(15% * var(--ts) + 6%),transparent);color:var(--primary)}

/* form side */
.bm-main{position:relative;padding:2rem 1.25rem 1.5rem}
.bm-x{position:absolute;top:.9rem;right:.9rem;width:2.25rem;height:2.25rem;border-radius:.7rem;display:grid;place-items:center;font-size:1.1rem;border:1px solid var(--border);color:var(--muted-fg);transition:.2s;z-index:2}
.bm-x:hover{color:var(--primary);border-color:color-mix(in oklab,var(--primary) 45%,var(--border));background:color-mix(in oklab,var(--primary) 8%,transparent)}
.bm-ico{width:3rem;height:3rem;border-radius:1rem;font-size:1.25rem;box-shadow:var(--s-ember);margin-bottom:1rem}
.bm-main h3{font-size:1.65rem;line-height:1.15;font-weight:700;padding-right:2.5rem}
.bm-main .bm-sub{margin-top:.5rem;font-size:.9rem}
.bm-form{margin-top:1.4rem;display:grid;gap:1rem}
.bm-f label{display:block;font-size:.78rem;font-weight:600;margin-bottom:.4rem}
.bm-f label em{font-style:normal;color:var(--primary)}
.bm-w{position:relative;display:flex;align-items:center;border-radius:.95rem;border:1px solid var(--border);background:color-mix(in oklab,var(--foreground) 4%,transparent);transition:border-color .2s,box-shadow .2s,background .2s}
html.light .bm-w{background:#fff;border-color:oklch(0.88 0.01 60)}
.bm-w:hover{border-color:color-mix(in oklab,var(--primary) 40%,var(--border))}
.bm-w:focus-within{border-color:var(--primary);box-shadow:0 0 0 4px color-mix(in oklab,var(--primary) 18%,transparent);background:color-mix(in oklab,var(--primary) 4%,var(--background))}
html.light .bm-w:focus-within{background:#fff}
.bm-w>svg.i{margin-left:.9rem;font-size:1.05rem;color:var(--muted-fg);transition:color .2s}
.bm-w:focus-within>svg.i{color:var(--primary)}
.bm-w input{flex:1;min-width:0;height:3rem;padding:0 .9rem .0 .7rem;background:none;border:0;outline:0;color:var(--foreground);font:inherit;font-size:16px}
.bm-w input::placeholder{color:color-mix(in oklab,var(--muted-fg) 70%,transparent)}
.bm-cc{align-self:stretch;display:flex;align-items:center;margin-left:.6rem;padding:0 .7rem;font-size:.85rem;font-weight:600;border-right:1px solid var(--border);color:var(--foreground)}
.bm-f.err .bm-w{border-color:oklch(0.63 0.22 25);box-shadow:0 0 0 4px oklch(0.63 0.22 25 / .14)}
.bm-e{display:none;margin-top:.4rem;font-size:.75rem;color:oklch(0.6 0.22 25)}
.bm-f.err .bm-e{display:block}
.bm-hp{position:absolute!important;left:-9999px;width:1px;height:1px;opacity:0}
.bm-go{width:100%;padding:1rem 1.5rem;border-radius:1rem;font-size:1rem;margin-top:.25rem;position:relative}
.bm-go svg{transition:transform .3s}.bm-go:hover svg{transform:translateY(2px)}
.bm-go:disabled{cursor:progress;opacity:.85;transform:none}
.bm-go.busy span,.bm-go.busy svg{opacity:0}
.bm-go.busy::after{content:"";position:absolute;width:1.3rem;height:1.3rem;border-radius:50%;border:2.5px solid color-mix(in oklab,var(--primary-fg) 30%,transparent);border-top-color:var(--primary-fg);animation:bmspin .7s linear infinite}
@keyframes bmspin{to{transform:rotate(360deg)}}
.bm-note{display:flex;gap:.5rem;align-items:flex-start;font-size:.72rem;line-height:1.5}
.bm-note svg{margin-top:.15rem;color:var(--primary)}
.bm-alert{display:none;padding:.7rem .9rem;border-radius:.8rem;font-size:.8rem;border:1px solid oklch(0.63 0.22 25 / .4);background:oklch(0.63 0.22 25 / .08);color:oklch(0.6 0.22 25)}
.bm-alert.on{display:block}

/* success */
.bm-ok{display:none;text-align:center;padding:1.5rem .5rem 1rem}
.bm.done .bm-form,.bm.done .bm-head{display:none}
.bm.done .bm-ok{display:block}
.bm-tick{width:4.5rem;height:4.5rem;margin:0 auto 1.25rem;border-radius:50%;display:grid;place-items:center;font-size:2rem;background:var(--g-primary);color:var(--primary-fg);box-shadow:var(--s-glow),0 0 0 8px color-mix(in oklab,var(--primary) 12%,transparent);animation:bmpop .6s cubic-bezier(.2,1.4,.4,1) both}
@keyframes bmpop{from{transform:scale(.4);opacity:0}to{transform:none;opacity:1}}
.bm-ok h3{padding:0}
.bm-ok p{margin-top:.6rem;font-size:.92rem}
.bm-ok .bm-acts{display:grid;gap:.7rem;margin-top:1.5rem}
.bm-ok .bm-acts a{padding:.9rem 1.25rem;border-radius:1rem}
.bm-ok .bm-acts .glass{display:flex;align-items:center;justify-content:center;gap:.5rem;font-weight:600;font-size:.9rem}
.bm-ok .bm-acts a:hover{transform:translateY(-1px)}

/* crane scene (popup) */
.bm-sc{position:relative;width:16rem;height:17rem;margin:0 auto;flex:none}
.bm-cr{position:absolute;inset:0;width:100%;height:100%;color:var(--primary);opacity:.8;overflow:visible}
.bm-cb,.bm-hk{animation:bmHook 1.4s ease-in-out infinite alternate}
.bm-cb{transform-box:fill-box;transform-origin:50% 0;animation-name:bmCable}
@keyframes bmHook{to{transform:translateY(40px)}}
@keyframes bmCable{to{transform:scaleY(3.22)}}
.bm-bdg{position:absolute;left:.6rem;bottom:0;width:9.6rem;display:flex;flex-direction:column-reverse}
.bm-base{height:.75rem;margin:0 -.6rem;border-radius:.3rem;background:repeating-linear-gradient(-45deg,#F68104 0 8px,#fff 8px 16px)}
.bm-fl{position:relative;height:2.125rem;margin-top:-1.5px;display:flex;align-items:center;gap:.5rem;padding:0 .7rem;border:1.5px dashed;font:600 .72rem var(--font-d);white-space:nowrap;color:var(--muted-fg);border-color:color-mix(in oklab,var(--primary) 45%,transparent);background-color:transparent;box-shadow:0 0 0 transparent;opacity:.6}
.bm-fl>span{display:grid;font-size:.9rem}
.bm-fl::after{content:"";margin-left:auto;width:2.2rem;height:.9rem;border-radius:2px;background:repeating-linear-gradient(90deg,currentColor 0 .45rem,transparent .45rem .7rem);opacity:.4}
.bm-rf{border-radius:1.1rem 1.1rem 0 0;border-bottom:0;justify-content:center;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.bm-rf::after{display:none}
.bm-fl.f0{animation:bmF0 14s linear infinite}.bm-fl.f1{animation:bmF1 14s linear infinite}.bm-fl.f2{animation:bmF2 14s linear infinite}.bm-fl.f3{animation:bmF3 14s linear infinite}
@keyframes bmF0{0%,8%{color:var(--muted-fg);border-color:color-mix(in oklab,var(--primary) 45%,transparent);background-color:transparent;box-shadow:0 0 0 transparent;opacity:.6}12%,92%{color:var(--primary-fg);border-color:#F68104;background-color:var(--primary);box-shadow:var(--s-glow);opacity:1}96%,100%{color:var(--muted-fg);border-color:color-mix(in oklab,var(--primary) 45%,transparent);background-color:transparent;box-shadow:0 0 0 transparent;opacity:.6}}
@keyframes bmF1{0%,28%{color:var(--muted-fg);border-color:color-mix(in oklab,var(--primary) 45%,transparent);background-color:transparent;box-shadow:0 0 0 transparent;opacity:.6}32%,92%{color:var(--primary-fg);border-color:#F68104;background-color:var(--primary);box-shadow:var(--s-glow);opacity:1}96%,100%{color:var(--muted-fg);border-color:color-mix(in oklab,var(--primary) 45%,transparent);background-color:transparent;box-shadow:0 0 0 transparent;opacity:.6}}
@keyframes bmF2{0%,48%{color:var(--muted-fg);border-color:color-mix(in oklab,var(--primary) 45%,transparent);background-color:transparent;box-shadow:0 0 0 transparent;opacity:.6}52%,92%{color:var(--primary-fg);border-color:#F68104;background-color:var(--primary);box-shadow:var(--s-glow);opacity:1}96%,100%{color:var(--muted-fg);border-color:color-mix(in oklab,var(--primary) 45%,transparent);background-color:transparent;box-shadow:0 0 0 transparent;opacity:.6}}
@keyframes bmF3{0%,68%{color:var(--muted-fg);border-color:color-mix(in oklab,var(--primary) 45%,transparent);background-color:transparent;box-shadow:0 0 0 transparent;opacity:.6}72%,92%{color:var(--primary-fg);border-color:#F68104;background-color:var(--primary);box-shadow:var(--s-glow);opacity:1}96%,100%{color:var(--muted-fg);border-color:color-mix(in oklab,var(--primary) 45%,transparent);background-color:transparent;box-shadow:0 0 0 transparent;opacity:.6}}
.bm:not(.open) .bm-sc *{animation-play-state:paused}
@media(prefers-reduced-motion:reduce){.bm-cb,.bm-hk,.bm-fl{animation:none!important}.bm-fl{color:var(--primary-fg);border-color:#F68104;background-color:var(--primary);box-shadow:var(--s-glow);opacity:1}}

body.bm-lock{overflow:hidden}

@media(min-width:820px){
  .bm-in{grid-template-columns:.88fr 1.12fr}
  .bm-side{display:flex}
  .bm-main{padding:2.5rem 2.25rem 2rem}
  .bm-main h3{font-size:1.9rem}
}
/* mobile: bottom sheet */
@media(max-width:640px){
  .bm{padding:0;align-items:end}
  .bm-card{width:100%;max-height:92dvh;border-radius:1.6rem 1.6rem 0 0;transform:translateY(100%);padding-bottom:0;transition:transform .5s cubic-bezier(.2,.9,.25,1)}
  .bm-in{border-radius:calc(1.6rem - 1px) calc(1.6rem - 1px) 0 0}
  .bm-main{padding:1.75rem 1.25rem calc(1.25rem + env(safe-area-inset-bottom))}
  .bm-main::before{content:"";position:absolute;top:.55rem;left:50%;width:2.5rem;height:4px;border-radius:9px;transform:translateX(-50%);background:var(--border)}
  .bm-main h3{font-size:1.45rem}
}
@media(prefers-reduced-motion:reduce){.bm,.bm-card{transition:none}}

/* ===== Login: slightly tighter form (scoped to body.lg so register is unaffected) ===== */
body.lg .lg-frame{max-width:28rem;padding:3px;border-radius:1.75rem}
body.lg .lg-card{gap:1rem;padding:1.25rem 1.05rem;border-radius:calc(1.75rem - 3px)}
@media(min-width:480px){body.lg .lg-card{padding:1.75rem 1.7rem 1.5rem}}
body.lg .lg-head h1{font-size:1.6rem}
body.lg .lg-head p{margin-top:.3rem;font-size:.88rem}
body.lg .lg-tabs button{padding:.6rem .7rem;font-size:.85rem}
body.lg .lg-panel,body.lg .lgf{gap:.9rem}
body.lg .lgi input{padding:1.3rem 3rem .45rem 2.8rem;border-radius:.95rem;font-size:.93rem}
body.lg .lgi label{left:2.8rem;right:3rem;font-size:.9rem}
body.lg .lgi input:focus+label,body.lg .lgi input:not(:placeholder-shown)+label{top:.45rem;font-size:.66rem}
body.lg .lgi-ic{left:.95rem;font-size:1.05rem}
body.lg .lgi .lgi-eye{width:2.3rem;height:2.3rem;font-size:1.05rem}
body.lg .lgf .lg-sub{padding:.85rem 1.15rem;border-radius:.95rem;font-size:.93rem}
body.lg .lg-g{padding:.8rem 1.15rem;border-radius:.95rem}
body.lg .lg-sign{font-size:.86rem}
body.lg .lg-sec{font-size:.72rem}
body.lg .lg-wa{padding:.8rem .95rem;gap:.8rem}
body.lg .lg-wa .ico{width:2.5rem;height:2.5rem;font-size:1.2rem}
body.lg .lg-wa b{font-size:.95rem}
body.lg .lg-wa small{font-size:.78rem}
body.lg .lg-otp input{aspect-ratio:1/1.15;border-radius:.85rem;font-size:1.35rem}

/* ===== Login: slightly tighter site pass (scoped to body.lg) ===== */
body.lg .lg-gate{gap:1rem}
body.lg .lgp-wrap{width:min(100%,24.5rem)}
body.lg .lgp{border-radius:1.25rem}
body.lg .lgp-band{padding:.55rem .9rem;gap:.55rem}
body.lg .lgp-mk{width:1.65rem;height:1.65rem;font-size:.85rem;border-radius:.5rem}
body.lg .lgp-band b{font-size:.88rem}
body.lg .lgp-band small{font-size:.64rem}
body.lg .lgp-tag{font-size:.66rem;padding:.2rem .6rem}
body.lg .lgp-stripe{height:.35rem}
body.lg .lgp-body{gap:.9rem;padding:.85rem 1rem .6rem}
body.lg .lgp-av{width:3.5rem;height:3.5rem}
body.lg .lgp-av svg{width:1.4rem;height:1.4rem}
body.lg .lgp-info h3{font-size:1.1rem}
body.lg .lgp-info p{font-size:.74rem}
body.lg .lgp-code{margin-top:.4rem;padding:.22rem .55rem;font-size:.72rem}
body.lg .lgp-chips{padding:0 1rem .75rem}
body.lg .lgc{padding:.2rem .55rem;font-size:.66rem}
body.lg .lgp-foot{padding:.5rem 1rem .55rem}
body.lg .lgp-foot small{font-size:.6rem}
body.lg .lgp-foot b{font-size:.8rem}
body.lg .lgp-stamp{right:.8rem;bottom:4rem;font-size:.78rem;padding:.15rem .6rem}

/* login: quiet helper line under the WhatsApp tab (replaces the highlighted banner) */
body.lg .lg-wa-note{font-size:.82rem;line-height:1.45;margin:-.1rem .1rem 0}

/* ===== Register: compact form pass (scoped to body.rg — login/other pages untouched) ===== */
body.rg .lg-card{gap:.8rem;padding:1.2rem 1rem}
@media(min-width:480px){body.rg .lg-card{padding:1.45rem 1.5rem 1.25rem}}
body.rg .lg-head h1{font-size:1.5rem}
body.rg .lg-head p{margin-top:.25rem;font-size:.84rem}
body.rg .lg-tabs{padding:3px}
body.rg .lg-tabs button{padding:.5rem .65rem;font-size:.8rem}
body.rg .rg-form{column-gap:.7rem;row-gap:.65rem}
body.rg .rgf label{margin-bottom:.28rem;font-size:.8rem}
body.rg .rgf label small{font-size:.68rem}
body.rg .rg-form .rgi{padding:.55rem .75rem;border-radius:.75rem;font-size:.88rem}
body.rg .rg-form .rgcc{padding:0 .55rem;border-radius:.75rem;font-size:.84rem}
body.rg .rgsend{padding:0 .85rem;border-radius:.75rem;font-size:.78rem}
body.rg .rgrow{gap:.5rem}
body.rg .rg-hint{margin-top:.3rem;font-size:.7rem}
body.rg .lgi-m{margin:.25rem .2rem 0;font-size:.7rem}
body.rg .lg-alert{padding:.55rem .75rem;font-size:.78rem}
body.rg .rg-form .lg-sub{padding:.7rem 1.1rem;border-radius:.85rem;font-size:.9rem}
body.rg .lg-sign{font-size:.82rem}
body.rg .lg-sec{font-size:.7rem}
body.rg .lg-frame{padding:3px}
@media(max-width:520px){body.rg .rg-form{row-gap:.6rem}}

/* ===== Assign To Multi-Select Component (Prevent Transparent Dropdown) ===== */
.custom-assign-container {
    background: #ffffff;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
}
.custom-assign-dropdown {
    background: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 8px !important;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.15), 0 8px 10px -6px rgba(0, 0, 0, 0.1) !important;
    z-index: 99999 !important;
}
.custom-assign-option {
    background: #ffffff !important;
    color: #1e293b !important;
}
.custom-assign-option:hover,
.custom-assign-option.is-selected {
    background: #f8fafc !important;
    color: var(--primary, #f07820) !important;
}
.custom-assign-empty {
    background: #ffffff !important;
    color: #64748b !important;
}