/* TaxEye Design System — custom styles layered on Bootstrap 5.3 */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
:root{
  --navy:#0a0f1e;--navy-2:#0f172a;--navy-3:#111c34;
  --bg:#ffffff;--bg-soft:#f5f7fb;--bg-soft-2:#eef2f9;--surface:#ffffff;
  --border:#e6eaf2;--border-2:#d3dbe8;
  --text:#0b1220;--text-2:#475069;--text-3:#6b7690;--text-faint:#94a0b8;
  --blue:#4f46e5;--blue-d:#4338ca;--blue-l:#6366f1;--blue-pale:#eae8ff;--blue-glow:rgba(79,70,229,.16);
  --green:#0ea371;--green-l:#10b981;--green-pale:#dff5ec;
  --amber:#e08a00;--amber-l:#f59e0b;--amber-pale:#fdf1d8;
  --purple:#7c3aed;--purple-l:#a78bfa;--purple-pale:#efe9ff;
  --teal:#0d9488;--teal-pale:#d6f3ef;
  --pink:#db2777;--pink-pale:#fbe3ef;
  --red:#e11d48;--red-pale:#fde4ea;
  --on-dark:#eaf0fb;--on-dark-2:#9fb0cc;--on-dark-3:#6d7f9e;--dark-border:rgba(255,255,255,.1);
  --r-sm:8px;--r-md:12px;--r-lg:16px;--r-xl:22px;--r-2xl:28px;--r-full:9999px;
  --sh-sm:0 1px 3px rgba(11,18,32,.06),0 1px 2px rgba(11,18,32,.04);
  --sh-md:0 6px 20px rgba(11,18,32,.08);
  --sh-lg:0 20px 44px -14px rgba(11,18,32,.16);
  --sh-blue:0 10px 30px -8px rgba(37,99,235,.4);
  --disp:'Sora','Inter',system-ui,sans-serif;--sans:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  --maxw:1180px;
}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#080d18;--bg-soft:#0c1322;--bg-soft-2:#0f1728;--surface:#101a2e;
  --border:#1d2942;--border-2:#293755;
  --text:#eef2fa;--text-2:#b7c3da;--text-3:#8b99b6;--text-faint:#64748b;
  --blue:#818cf8;--blue-d:#6366f1;--blue-l:#a5b4fc;--blue-pale:rgba(129,140,248,.16);--blue-glow:rgba(129,140,248,.26);
  --green:#10b981;--green-pale:rgba(16,185,129,.15);
  --amber:#f59e0b;--amber-pale:rgba(245,158,11,.15);
  --purple:#a78bfa;--purple-pale:rgba(124,58,237,.18);
  --teal:#2dd4bf;--teal-pale:rgba(13,148,136,.18);
  --pink:#f472b6;--pink-pale:rgba(219,39,119,.18);
  --red:#fb7185;--red-pale:rgba(225,29,72,.18);
  --border:#1d2942;--border-2:#293755;
  --sh-sm:0 1px 3px rgba(0,0,0,.4);--sh-md:0 6px 22px rgba(0,0,0,.45);--sh-lg:0 22px 48px -16px rgba(0,0,0,.6);
}}
:root[data-theme="dark"]{
  --bg:#080d18;--bg-soft:#0c1322;--bg-soft-2:#0f1728;--surface:#101a2e;
  --border:#1d2942;--border-2:#293755;
  --text:#eef2fa;--text-2:#b7c3da;--text-3:#8b99b6;--text-faint:#64748b;
  --blue:#818cf8;--blue-d:#6366f1;--blue-l:#a5b4fc;--blue-pale:rgba(129,140,248,.16);--blue-glow:rgba(129,140,248,.26);
  --green:#10b981;--green-pale:rgba(16,185,129,.15);
  --amber:#f59e0b;--amber-pale:rgba(245,158,11,.15);
  --purple:#a78bfa;--purple-pale:rgba(124,58,237,.18);
  --teal:#2dd4bf;--teal-pale:rgba(13,148,136,.18);
  --pink:#f472b6;--pink-pale:rgba(219,39,119,.18);
  --red:#fb7185;--red-pale:rgba(225,29,72,.18);
  --sh-sm:0 1px 3px rgba(0,0,0,.4);--sh-md:0 6px 22px rgba(0,0,0,.45);--sh-lg:0 22px 48px -16px rgba(0,0,0,.6);
}
html{scroll-behavior:smooth}
body{font-family:var(--sans);background:var(--bg);color:var(--text);line-height:1.6;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
img{max-width:100%}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
.disp{font-family:var(--disp)}
h1,h2,h3,h4{font-family:var(--disp);font-weight:700;letter-spacing:-.02em;line-height:1.12;text-wrap:balance}
::selection{background:var(--blue);color:#fff}

/* ===== MOTION ===== */
.rv{opacity:0;transform:translateY(24px);transition:opacity .7s cubic-bezier(.16,1,.3,1),transform .7s cubic-bezier(.16,1,.3,1)}
.rv.in{opacity:1;transform:none}
/* hero entrance sequence — each element lifts in behind the one above it */
.seq{opacity:0;transform:translateY(20px);transition:opacity .75s cubic-bezier(.16,1,.3,1),transform .75s cubic-bezier(.16,1,.3,1)}
.seq.in{opacity:1;transform:none}
/* interactive polish */
.pillar,.feat,.aud,.secc,.mod-c,.postc,.relc,.intg,.wy,.stp2,.pain{will-change:transform}
.pillar .pi,.feat .fi,.aud .ai,.mod-c .mi,.relc .ri,.intg .ii{transition:transform .3s cubic-bezier(.16,1,.3,1)}
.pillar:hover .pi,.feat:hover .fi,.aud:hover .ai,.mod-c:hover .mi,.relc:hover .ri,.intg:hover .ii{transform:scale(1.08) rotate(-3deg)}
.btn-primary,.btn-white,.btn-light{transition:transform .25s cubic-bezier(.16,1,.3,1),box-shadow .25s,background .25s}
.btn i.bi-arrow-right{transition:transform .25s cubic-bezier(.16,1,.3,1)}
.btn:hover i.bi-arrow-right{transform:translateX(4px)}
@media(prefers-reduced-motion:reduce){
  .rv,.seq{opacity:1!important;transform:none!important;transition:none!important}
  *{animation:none!important;transition-duration:.01ms!important}
}

/* ===== NAV ===== */
.nav{position:fixed;top:0;left:0;right:0;z-index:900;transition:all .35s cubic-bezier(.16,1,.3,1)}
.nav-in{max-width:var(--maxw);margin:0 auto;padding:16px 24px;display:flex;align-items:center;gap:8px}
.nav.scr{background:color-mix(in srgb,var(--bg) 86%,transparent);backdrop-filter:blur(16px) saturate(160%);-webkit-backdrop-filter:blur(16px) saturate(160%);border-bottom:1px solid var(--border)}
.nav.scr .nav-in{padding:11px 24px}
.brand{display:flex;align-items:center;gap:10px;cursor:pointer}
.logo{width:36px;height:36px;border-radius:10px;background:linear-gradient(135deg,var(--blue-l),var(--blue-d));position:relative;flex-shrink:0;box-shadow:0 4px 12px var(--blue-glow)}
.logo::after{content:'';position:absolute;width:14px;height:14px;border:2.5px solid #fff;border-radius:50%;top:50%;left:50%;transform:translate(-50%,-50%)}
.logo::before{content:'';position:absolute;width:5px;height:5px;background:#fff;border-radius:50%;top:50%;left:50%;transform:translate(-50%,-50%);z-index:2}
.brand b{font-family:var(--disp);font-size:21px;font-weight:800;letter-spacing:-.5px;color:var(--nav-ink,#fff)}
.nav.scr .brand b{color:var(--text)}
.nav-links{display:flex;align-items:center;gap:2px;margin-left:22px}
.nav-item{position:relative}
.nlink{display:flex;align-items:center;gap:5px;font-size:14.5px;font-weight:500;padding:8px 13px;border-radius:9px;cursor:pointer;color:var(--nav-ink,rgba(255,255,255,.86));transition:all .2s}
.nlink:hover{background:rgba(255,255,255,.1);color:#fff}
.nav.scr .nlink{color:var(--text-2)}
.nav.scr .nlink:hover{background:var(--bg-soft);color:var(--text)}
.nlink svg{width:14px;height:14px;transition:transform .25s}
.nav-item:hover .nlink svg{transform:rotate(180deg)}
.dd{position:absolute;top:calc(100% + 6px);left:0;min-width:280px;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);padding:8px;box-shadow:var(--sh-lg);opacity:0;visibility:hidden;transform:translateY(8px);transition:all .22s cubic-bezier(.16,1,.3,1);z-index:100}
.nav-item:hover .dd{opacity:1;visibility:visible;transform:none}
.dd a{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:10px;transition:background .15s}
.dd a:hover{background:var(--bg-soft)}
.dd .dd-i{width:38px;height:38px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:18px;flex-shrink:0}
.dd .dd-t{font-size:14px;font-weight:600;color:var(--text)}
.dd .dd-s{font-size:12px;color:var(--text-3)}
.nav-right{margin-left:auto;display:flex;align-items:center;gap:10px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:inherit;font-weight:600;cursor:pointer;border:none;border-radius:var(--r-full);transition:all .25s;white-space:nowrap}
.btn-sm{font-size:13px;padding:7px 15px}
.btn-md{font-size:13.5px;padding:9px 18px}
.btn-lg{font-size:14.5px;padding:11px 22px}
.btn-primary{background:var(--blue);color:#fff;box-shadow:var(--sh-blue)}
.btn-primary:hover{background:var(--blue-d);transform:translateY(-2px);box-shadow:0 14px 34px -8px rgba(37,99,235,.55)}
.btn-ghost{background:transparent;color:var(--nav-ink,#fff);border:1.5px solid rgba(255,255,255,.2)}
.nav.scr .btn-ghost{color:var(--text-2);border-color:var(--border-2)}
.btn-ghost:hover{border-color:currentColor}
.btn-light{background:var(--surface);color:var(--text);border:1.5px solid var(--border-2)}
.btn-light:hover{border-color:var(--blue);color:var(--blue);transform:translateY(-2px)}
.btn-white{background:#fff;color:var(--navy)}
.btn-white:hover{transform:translateY(-2px);box-shadow:0 14px 30px rgba(0,0,0,.25)}
.nav-tog{display:none;width:42px;height:42px;border-radius:10px;border:1px solid var(--nav-ink,rgba(255,255,255,.2));background:transparent;cursor:pointer;flex-direction:column;gap:4px;align-items:center;justify-content:center}
.nav-tog span{width:20px;height:2px;background:var(--nav-ink,#fff);border-radius:2px}
.nav.scr .nav-tog span{background:var(--text)}
.nav.scr .nav-tog{border-color:var(--border-2)}
.themebtn{width:40px;height:40px;border-radius:var(--r-full);border:1.5px solid var(--nav-ink,rgba(255,255,255,.2));background:transparent;color:var(--nav-ink,#fff);cursor:pointer;font-size:16px}
.nav.scr .themebtn{border-color:var(--border-2);color:var(--text-2)}

/* mobile drawer */
.drawer{position:fixed;inset:0;z-index:1000;background:var(--navy);transform:translateX(100%);transition:transform .4s cubic-bezier(.16,1,.3,1);padding:88px 28px 28px;overflow-y:auto;display:flex;flex-direction:column;gap:2px}
.drawer.open{transform:none}
.drawer a{color:var(--on-dark-2);font-size:16px;font-weight:500;padding:14px 0;border-bottom:1px solid var(--dark-border)}
.drawer a:hover{color:#fff}
.drawer .btn{margin-top:18px}
.drawer-x{position:absolute;top:24px;right:24px;width:44px;height:44px;border-radius:50%;border:1px solid var(--dark-border);background:rgba(255,255,255,.05);color:#fff;font-size:18px;cursor:pointer}

/* ===== SECTIONS ===== */
.sec{padding:96px 0}
/* Anchor links (e.g. footer "Platform tour" -> #platform) land a section's
   top flush with the viewport top — but .nav is fixed, so its heading was
   rendering hidden behind the header. This clears space for it. */
section[id]{scroll-margin-top:100px}
.sec-sm{padding:72px 0}
.dark{background:var(--navy);color:var(--on-dark)}
.dark h1,.dark h2,.dark h3,.dark h4{color:#fff}
.soft{background:var(--bg-soft)}
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;font-weight:700;text-transform:uppercase;letter-spacing:.09em;color:var(--blue);background:var(--blue-pale);padding:7px 15px;border-radius:var(--r-full);margin-bottom:18px}
.dark .eyebrow{background:rgba(59,130,246,.14);color:var(--blue-l)}
.sec-head{max-width:680px;margin:0 auto 60px;text-align:center}
.sec-head.left{margin-left:0;text-align:left}
.sec-title{font-size:clamp(30px,4.4vw,46px);margin-bottom:16px}
.sec-sub{font-size:18px;color:var(--text-2);line-height:1.65}
.dark .sec-sub{color:var(--on-dark-2)}

/* ===== HERO ===== */
.hero{position:relative;background:var(--navy);color:#fff;overflow:hidden;padding:150px 0 110px}
.hero-bg{position:absolute;inset:0;overflow:hidden}
.orb{position:absolute;border-radius:50%;filter:blur(110px)}
.orb1{width:620px;height:620px;background:radial-gradient(circle,rgba(37,99,235,.34),transparent 70%);top:-180px;right:-120px;animation:float1 24s ease-in-out infinite}
.orb2{width:480px;height:480px;background:radial-gradient(circle,rgba(124,58,237,.26),transparent 70%);bottom:-160px;left:-120px;animation:float2 30s ease-in-out infinite}
.orb3{width:360px;height:360px;background:radial-gradient(circle,rgba(16,185,129,.18),transparent 70%);top:40%;left:44%;animation:float1 26s ease-in-out infinite}
@keyframes float1{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(50px,-60px) scale(1.08)}}
@keyframes float2{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-60px,40px) scale(.94)}}
.grid-mask{position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px);background-size:64px 64px;mask-image:radial-gradient(ellipse 75% 65% at 50% 35%,#000 15%,transparent 72%)}
.hero-in{position:relative;z-index:2;display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center}
.hero-badge{display:inline-flex;align-items:center;gap:9px;padding:7px 16px 7px 7px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:var(--r-full);margin-bottom:24px;font-size:13px;font-weight:600;color:var(--on-dark)}
.hero-badge .hb-dot{width:26px;height:26px;font-size:12px;border-radius:50%;background:linear-gradient(135deg,var(--blue-l),var(--purple));display:flex;align-items:center;justify-content:center;font-size:12px}
.hero h1{font-size:clamp(38px,5.6vw,64px);font-weight:800;margin-bottom:22px}
.grad{background:linear-gradient(120deg,var(--blue-l),var(--purple-l) 45%,var(--green-l));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.grad2{background:linear-gradient(120deg,var(--blue),var(--purple));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.hero p.lead{font-size:19px;color:var(--on-dark-2);max-width:540px;margin-bottom:32px;line-height:1.65}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:34px}
.hero-trust{display:flex;gap:26px;flex-wrap:wrap;font-size:13px;color:var(--on-dark-3)}
.hero-trust b{color:#fff;font-family:var(--disp)}
.hero-syncs{margin-top:24px;display:flex;align-items:center;gap:9px;flex-wrap:wrap;font-size:10.5px;font-weight:700;letter-spacing:.1em;color:var(--on-dark-3)}
.hero-syncs span{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);color:var(--on-dark);padding:5px 12px;border-radius:99px;letter-spacing:.01em;font-weight:600;font-size:12px}
.pshow{max-width:1000px;margin:0 auto}
.pshow-tabs{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-bottom:24px}
.pshow-tab{border:1px solid var(--border-2);background:var(--surface);font-family:inherit;font-size:13.5px;font-weight:600;color:var(--text-2);padding:9px 18px;border-radius:99px;cursor:pointer;transition:all .2s}
.pshow-tab.on{background:var(--blue);color:#fff;border-color:var(--blue);box-shadow:var(--sh-blue)}
.pshow-tab:hover:not(.on){border-color:var(--blue);color:var(--blue)}
.pshow-frame{border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--sh-lg);border:1px solid var(--border)}
/* ===== CONSTELLATION ===== */
.cst{display:grid;grid-template-columns:auto auto auto;justify-content:center;gap:26px 64px;align-items:center;max-width:1180px;margin:0 auto;position:relative}
.cst-col,.cst-core{position:relative;z-index:1}
.cst-links{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;overflow:visible}
.cst .branch{transform:none!important}
.cst-links path{fill:none;stroke:var(--blue);stroke-width:2;stroke-linecap:round;stroke-dasharray:4 8;opacity:.5;animation:cflow 1.3s linear infinite}
.cst-links circle{fill:var(--blue);opacity:.75;animation:cpulse 2.4s ease-in-out infinite}
.cst-links .mover{fill:var(--blue-l);opacity:1;filter:drop-shadow(0 0 5px var(--blue));animation:none}
@keyframes cflow{to{stroke-dashoffset:-28}}
@keyframes cpulse{0%,100%{opacity:.45}50%{opacity:1}}
.cst-col{display:flex;flex-direction:column;gap:16px}
.branch{background:transparent;border:none;padding:4px 2px}
.cst-tile{width:74px;display:flex;flex-direction:column;align-items:center;gap:6px}
.cst-tile .ti{width:52px;height:52px;border-radius:14px;background:var(--surface);border:1px solid var(--border);box-shadow:var(--sh-sm);display:flex;align-items:center;justify-content:center;font-size:20px;color:var(--blue);transition:all .2s}
.cst-tile:hover .ti{border-color:var(--blue);transform:translateY(-3px);box-shadow:var(--sh-md)}
.cst-tile .tl{font-size:9.5px;font-weight:600;color:var(--text-3);text-align:center;line-height:1.2;letter-spacing:.01em}
.branch-label{font-size:10.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--blue);margin-bottom:11px;display:flex;align-items:center;gap:8px}
.branch-label::before{content:'';width:7px;height:7px;border-radius:50%;background:var(--blue);box-shadow:0 0 0 4px var(--blue-pale)}
.chips-row{display:flex;flex-wrap:wrap;gap:12px}
.cst-chip{display:flex;align-items:center;gap:7px;font-size:12.5px;font-weight:600;color:var(--text-2);background:var(--bg-soft);border:1px solid var(--border);border-radius:99px;padding:6px 12px;transition:all .2s;cursor:default}
.cst-chip:hover{border-color:var(--blue);color:var(--blue);background:var(--blue-pale)}
.cst-core{display:flex;flex-direction:column;align-items:center;gap:12px;padding:0 8px}
.orb-node{width:124px;height:124px;border-radius:30px;background:var(--surface);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;padding:16px;box-shadow:0 24px 60px -14px var(--blue-glow),0 2px 10px rgba(11,18,32,.06);position:relative;animation:corePulse 4s ease-in-out infinite}
.orb-node img{width:100%;height:100%;object-fit:contain;display:block}
@keyframes corePulse{0%,100%{transform:scale(1);box-shadow:0 24px 60px -14px var(--blue-glow),0 0 0 0 rgba(59,130,246,.4)}50%{transform:scale(1.045);box-shadow:0 24px 60px -14px var(--blue-glow),0 0 0 20px rgba(59,130,246,0)}}


.cst-core .cn{font-family:var(--disp);font-weight:800;font-size:16px;color:var(--text)}
.cst-core .cns{font-size:12px;color:var(--text-3);margin-top:-6px}
@media(max-width:900px){.cst{grid-template-columns:1fr;gap:16px}.cst-core{order:-1;margin-bottom:6px}.cst-links{display:none}}
/* ===== PILLARS ===== */
.pillars{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.pillar{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-xl);padding:28px;transition:all .3s}
.pillar:hover{box-shadow:var(--sh-lg);transform:translateY(-4px);border-color:var(--border-2)}
.pillar .pi{width:52px;height:52px;border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:24px;margin-bottom:16px}
.pillar h4{font-size:17px;margin-bottom:8px}
.pillar p{font-size:14px;color:var(--text-2);line-height:1.6}
@media(max-width:900px){.pillars{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.pillars{grid-template-columns:1fr}}
/* ===== ANIM BAND ===== */
.anim-band{background:var(--navy);text-align:center;padding:clamp(70px,11vw,120px) 0;overflow:hidden}
.anim-band .al{font-family:var(--disp);font-weight:800;font-size:clamp(28px,5.2vw,56px);line-height:1.14;color:#fff;opacity:0;transform:translateY(24px);transition:opacity .7s cubic-bezier(.16,1,.3,1),transform .7s cubic-bezier(.16,1,.3,1)}
.anim-band.in .al{opacity:1;transform:none}
.anim-band.in .al:nth-child(2){transition-delay:.28s}
.anim-band.in .al:nth-child(3){transition-delay:.56s}
.anim-band .al.b{color:var(--blue-l)}.anim-band .al.g{color:var(--green-l)}
.anim-band p{color:var(--on-dark-2);font-size:17px;margin-top:22px;opacity:0;transition:opacity .7s .85s}
.anim-band.in p{opacity:1}
/* ===== BEFORE / AFTER ===== */
.baw{max-width:900px;margin:0 auto;border:1px solid var(--border);border-radius:var(--r-xl);overflow:hidden;background:var(--surface);box-shadow:var(--sh-md)}
.baw-row{display:grid;grid-template-columns:1.05fr 1fr 1fr;border-bottom:1px solid var(--border)}
.baw-row:last-child{border:none}
.baw-row>div{padding:15px 18px;font-size:14px;display:flex;align-items:center;gap:9px}
.baw-head>div{font-family:var(--disp);font-weight:700;font-size:13px;background:var(--bg-soft)}
.baw-cat{font-weight:600;color:var(--text)}
.baw-before{color:var(--text-3)}
.baw-after{color:var(--text);font-weight:600;background:var(--blue-pale)}
.baw-head .baw-after{color:var(--blue)}
.baw-after svg,.baw-before svg{width:16px;height:16px;flex-shrink:0}
.baw-after svg{color:var(--green-l)}.baw-before svg{color:var(--red)}
@media(max-width:640px){.baw-row{grid-template-columns:1fr}.baw-row>div{padding:11px 15px}}
/* hero dashboard mock */
.mock{background:linear-gradient(160deg,#0e1830,#0a1122);border:1px solid rgba(255,255,255,.09);border-radius:var(--r-xl);box-shadow:0 40px 80px -30px rgba(0,0,0,.7);overflow:hidden}
.mock-bar{display:flex;align-items:center;gap:7px;padding:13px 16px;border-bottom:1px solid rgba(255,255,255,.07)}
.mock-bar i{width:11px;height:11px;border-radius:50%;display:block}
.mock-url{margin-left:12px;font-size:12px;color:var(--on-dark-3);background:rgba(255,255,255,.05);padding:5px 12px;border-radius:6px;flex:1}
.mock-body{padding:18px}
.mock-h{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.mock-h b{color:#fff;font-family:var(--disp);font-size:15px}
.mini-pill{font-size:10.5px;font-weight:700;padding:4px 9px;border-radius:var(--r-full)}
.mock-grid{display:grid;grid-template-columns:1fr 1fr;gap:11px}
.mcard{background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.07);border-radius:12px;padding:13px}
.mcard .tag{font-size:9.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;padding:3px 7px;border-radius:5px;display:inline-block;margin-bottom:9px}
.mcard .tt{color:#dfe7f5;font-size:12.5px;font-weight:600;margin-bottom:3px}
.mcard .mt{font-size:11px;color:var(--on-dark-3)}
.mcard .barline{height:4px;border-radius:3px;background:rgba(255,255,255,.08);margin-top:9px;overflow:hidden}
.mcard .barline i{display:block;height:100%;border-radius:3px}

/* ===== STATS ===== */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.stat{text-align:center;padding:14px}
.stat .n{font-family:var(--disp);font-size:clamp(30px,4vw,44px);font-weight:800;background:linear-gradient(120deg,var(--blue),var(--purple));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;line-height:1}
.stat .l{font-size:14px;color:var(--text-3);margin-top:8px;font-weight:500}

/* ===== MODULE CARDS ===== */
.mod-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.mod-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-xl);padding:30px;cursor:pointer;transition:all .3s;position:relative;overflow:hidden}
.mod-card:hover{border-color:transparent;box-shadow:var(--sh-lg);transform:translateY(-5px)}
.mod-card::before{content:'';position:absolute;inset:0;border-radius:var(--r-xl);padding:1.5px;background:linear-gradient(135deg,var(--mc,var(--blue)),transparent 60%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:0;transition:opacity .3s}
.mod-card:hover::before{opacity:1}
.mod-ic{width:56px;height:56px;border-radius:15px;display:flex;align-items:center;justify-content:center;font-size:27px;margin-bottom:18px}
.mod-card h3{font-size:19px;margin-bottom:9px}
.mod-card p{font-size:14.5px;color:var(--text-2);line-height:1.6;margin-bottom:16px}
.mod-more{font-size:13.5px;font-weight:700;color:var(--mc,var(--blue));display:flex;align-items:center;gap:6px}
.mod-more svg{width:15px;height:15px;flex-shrink:0}
.btn svg{width:15px;height:15px;flex-shrink:0}
.mod-card:hover .mod-more{gap:10px}

/* ===== WHY (numbered) ===== */
.why-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px 40px;max-width:960px;margin:0 auto}
.why{display:flex;gap:18px;padding:20px 0;border-bottom:1px solid var(--border)}
.why .wn{font-family:var(--disp);font-size:19px;font-weight:800;color:var(--blue);background:var(--blue-pale);width:44px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.why h4{font-size:16.5px;margin-bottom:5px}
.why p{font-size:14px;color:var(--text-2);line-height:1.55}

/* ===== FEATURE (alternating) split ===== */
.split{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;margin-bottom:44px}
.split:nth-child(even) .split-media{order:-1}
.split-media{background:var(--bg-soft);border:1px solid var(--border);border-radius:var(--r-xl);padding:26px;min-height:280px;box-shadow:var(--sh-md)}
.split h3{font-size:26px;margin-bottom:14px}
.split p{font-size:16px;color:var(--text-2);margin-bottom:18px}
.tick{display:flex;gap:11px;margin-bottom:11px;font-size:14.5px;color:var(--text-2)}
.tick svg{width:20px;height:20px;color:var(--green-l);flex-shrink:0;margin-top:1px}

/* ===== PRODUCT SHOWCASE (module) ===== */
.showcase{display:grid;grid-template-columns:1fr 1.05fr;gap:48px;align-items:center}
.showcase .txt h2{font-size:28px;margin-bottom:14px}
.showcase .txt p{font-size:16px;color:var(--text-2);margin-bottom:20px}
.app{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);box-shadow:var(--sh-lg);overflow:hidden}
.app-bar{display:flex;align-items:center;gap:6px;padding:11px 14px;border-bottom:1px solid var(--border);background:var(--bg-soft)}
.app-bar i{width:10px;height:10px;border-radius:50%;display:block}
.app-url{margin-left:10px;font-size:11px;color:var(--text-3);background:var(--surface);border:1px solid var(--border);padding:4px 10px;border-radius:6px;flex:1}
.app-body{display:flex;min-height:290px}
.app-side{width:54px;background:var(--bg-soft);border-right:1px solid var(--border);display:flex;flex-direction:column;align-items:center;gap:9px;padding:14px 0;flex-shrink:0}
.app-side .s{width:34px;height:34px;border-radius:9px;display:flex;align-items:center;justify-content:center;font-size:15px;color:var(--text-3);background:transparent}
.app-side .s.on{color:#fff}
.app-main{flex:1;padding:16px 18px;min-width:0}
.app-h{font-family:var(--disp);font-weight:700;font-size:14px;margin-bottom:13px;display:flex;justify-content:space-between;align-items:center}
.app-h .live{font-size:10px;font-weight:700;padding:3px 9px;border-radius:99px;background:var(--green-pale);color:var(--green)}
.app-kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin-bottom:14px}
.kpi{background:var(--bg-soft);border:1px solid var(--border);border-radius:10px;padding:11px}
.kpi .v{font-family:var(--disp);font-weight:800;font-size:19px;line-height:1}
.kpi .l{font-size:10px;color:var(--text-3);margin-top:4px}
.app-row{display:flex;align-items:center;gap:10px;padding:10px 11px;border:1px solid var(--border);border-radius:9px;margin-bottom:7px}
.app-row .dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.app-row .rt{font-weight:600;font-size:12px}.app-row .rs{color:var(--text-3);font-size:10.5px}
.app-row .pill{margin-left:auto;font-size:9.5px;font-weight:700;padding:3px 8px;border-radius:99px;text-transform:uppercase;white-space:nowrap}
@media(max-width:860px){.showcase{grid-template-columns:1fr;gap:30px}}

/* ===== TESTIMONIALS ===== */
.tst-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.tst{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-xl);padding:28px}
.tst .stars{color:var(--amber-l);margin-bottom:12px;letter-spacing:2px}
.tst p{font-size:15px;color:var(--text);line-height:1.7;margin-bottom:20px;font-style:italic}
.tst .who{display:flex;align-items:center;gap:12px;border-top:1px solid var(--border);padding-top:16px}
.tst .av{width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;color:#fff;font-family:var(--disp)}
.tst .nm{font-size:14px;font-weight:700}
.tst .rl{font-size:12.5px;color:var(--text-3)}

/* ===== MODULE DETAIL ===== */
.mhero{padding:150px 0 70px;position:relative;overflow:hidden;color:#fff}
.mhero .wrap{position:relative;z-index:2}
.mhero .crumb{font-size:13.5px;margin-bottom:18px;color:rgba(255,255,255,.7);display:flex;gap:8px;align-items:center}
.mhero .crumb span{cursor:pointer}.mhero .crumb span:hover{color:#fff}
.mhero-ic{width:70px;height:70px;border-radius:19px;background:rgba(255,255,255,.14);display:flex;align-items:center;justify-content:center;font-size:34px;margin-bottom:22px;border:1px solid rgba(255,255,255,.18)}
.mhero h1{font-size:clamp(34px,5vw,52px);font-weight:800;margin-bottom:16px;max-width:760px}
.mhero p{font-size:19px;color:rgba(255,255,255,.85);max-width:620px;line-height:1.6}
.feat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.feat{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);padding:26px;transition:all .3s}
.feat:hover{box-shadow:var(--sh-md);transform:translateY(-4px);border-color:var(--border-2)}
.feat .fi{width:48px;height:48px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:22px;margin-bottom:15px}
.feat h4{font-size:16.5px;margin-bottom:8px}
.feat p{font-size:14px;color:var(--text-2);line-height:1.6}
.steps-h{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;counter-reset:st}
.stp{position:relative;padding-top:20px}
.stp .sn{font-family:var(--disp);font-size:15px;font-weight:800;color:#fff;width:38px;height:38px;border-radius:11px;background:linear-gradient(135deg,var(--blue),var(--blue-d));display:flex;align-items:center;justify-content:center;margin-bottom:14px;box-shadow:var(--sh-blue)}
.stp h4{font-size:16px;margin-bottom:7px}
.stp p{font-size:13.5px;color:var(--text-2);line-height:1.55}
.ben-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px 40px;max-width:920px;margin:0 auto}
.ben{display:flex;gap:13px;font-size:15.5px;color:var(--text);align-items:flex-start}
.ben svg{width:22px;height:22px;color:var(--green-l);flex-shrink:0;margin-top:2px}

/* ===== PRICING ===== */
.pri-tog{display:inline-flex;background:var(--bg-soft);border:1px solid var(--border);border-radius:var(--r-full);padding:5px;margin:0 auto 44px;position:relative}
.pri-tog button{border:none;background:none;font-family:inherit;font-size:14px;font-weight:600;color:var(--text-3);padding:10px 22px;border-radius:var(--r-full);cursor:pointer;transition:all .2s;position:relative;z-index:2}
.pri-tog button.on{color:#fff}
.pri-tog .glider{position:absolute;top:5px;bottom:5px;border-radius:var(--r-full);background:var(--blue);transition:all .3s cubic-bezier(.16,1,.3,1);z-index:1}
.save-tag{font-size:11px;font-weight:700;color:var(--green);background:var(--green-pale);padding:2px 8px;border-radius:var(--r-full);margin-left:6px}
.pri-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;align-items:stretch}
.plan{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-xl);padding:32px;display:flex;flex-direction:column;position:relative;transition:all .3s}
.plan:hover{box-shadow:var(--sh-md);transform:translateY(-4px)}
.plan.pop{border-color:var(--blue);box-shadow:var(--sh-lg)}
.plan.pop::before{content:'Most Popular';position:absolute;top:-13px;left:50%;transform:translateX(-50%);background:var(--blue);color:#fff;font-size:11.5px;font-weight:700;padding:5px 16px;border-radius:var(--r-full)}
.plan .pn{font-family:var(--disp);font-size:18px;font-weight:700;margin-bottom:6px}
.plan .pd{font-size:13.5px;color:var(--text-3);margin-bottom:20px;min-height:38px}
.plan .price{font-family:var(--disp);font-size:42px;font-weight:800;line-height:1}
.plan .price small{font-size:15px;color:var(--text-3);font-weight:500}
.plan .per{font-size:13px;color:var(--text-3);margin:6px 0 22px}
.plan ul{list-style:none;display:flex;flex-direction:column;gap:12px;margin-bottom:26px;flex:1}
.plan li{display:flex;gap:10px;font-size:14px;color:var(--text-2)}
.plan li svg{width:18px;height:18px;color:var(--green-l);flex-shrink:0;margin-top:1px}

/* ===== FORMS ===== */
.fg{margin-bottom:18px}
.fg label{display:block;font-size:13px;font-weight:600;margin-bottom:6px}
.fg label .r{color:var(--red)}
.ctl{width:100%;padding:13px 15px;border:1px solid var(--border-2);border-radius:var(--r-sm);font-family:inherit;font-size:14.5px;color:var(--text);background:var(--surface);transition:all .2s;outline:none}
.ctl:focus{border-color:var(--blue);box-shadow:0 0 0 3px var(--blue-glow)}
.ctl::placeholder{color:var(--text-faint)}
select.ctl{appearance:none;cursor:pointer;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b7690' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 13px center;padding-right:40px}
textarea.ctl{min-height:90px;resize:vertical}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.err{border-color:var(--red)!important;box-shadow:0 0 0 3px var(--red-pale)!important}

/* ===== BOOKING WIZARD ===== */
.wiz{max-width:840px;margin:0 auto}
.steps{display:flex;align-items:center;justify-content:center;margin-bottom:36px}
.stpi{display:flex;flex-direction:column;align-items:center;gap:8px}
.stpi .c{width:48px;height:48px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:var(--disp);font-weight:700;font-size:16px;border:2.5px solid var(--border-2);color:var(--text-3);background:var(--surface);transition:all .4s cubic-bezier(.16,1,.3,1)}
.stpi.active .c{border-color:var(--blue);background:linear-gradient(135deg,var(--blue),var(--blue-d));color:#fff;box-shadow:var(--sh-blue);transform:scale(1.07)}
.stpi.done .c{border-color:var(--green-l);background:linear-gradient(135deg,var(--green-l),var(--green));color:#fff}
.stpi .t{font-size:12.5px;font-weight:600;color:var(--text-3)}
.stpi.active .t{color:var(--blue)}.stpi.done .t{color:var(--green)}
.stpbar{flex:1;height:3px;max-width:100px;background:var(--border-2);margin:0 8px 26px;border-radius:2px;transition:background .4s}
.stpbar.done{background:var(--green-l)}
.wcard{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-2xl);box-shadow:var(--sh-md);overflow:hidden;position:relative}
.wcard::before{content:'';position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,var(--blue),var(--purple),var(--green-l))}
.wbody{padding:40px}
.wpanel{display:none}.wpanel.active{display:block;animation:pop .35s ease}
@keyframes pop{from{opacity:0;transform:scale(.98)}to{opacity:1;transform:none}}
.wpanel h3{font-size:23px;margin-bottom:5px}
.wpanel .ws{color:var(--text-3);font-size:14.5px;margin-bottom:26px}
.wact{display:flex;gap:12px;margin-top:28px}
.cal-h{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}
.cal-m{font-family:var(--disp);font-weight:700;font-size:17px}
.cal-nav{width:38px;height:38px;border-radius:var(--r-sm);border:1px solid var(--border-2);background:var(--surface);cursor:pointer;color:var(--text-2);font-size:16px;transition:all .2s}
.cal-nav:hover{border-color:var(--blue);color:var(--blue)}
.cal-g{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;margin-bottom:22px}
.wp2-split{display:flex;gap:32px;align-items:flex-start}
.wp2-cal{flex:1.1;min-width:0}
.wp2-slots{flex:1;min-width:0}
.wp2-slots .slots{grid-template-columns:repeat(2,1fr)}
@media(max-width:760px){
  .wp2-split{flex-direction:column;gap:8px}
  .wp2-cal,.wp2-slots{width:100%}
}
.cal-dl{text-align:center;font-size:11px;font-weight:700;color:var(--text-faint);text-transform:uppercase;padding:6px 0}
.cal-d{text-align:center;padding:11px 2px;border-radius:var(--r-sm);font-size:14px;font-weight:500;cursor:pointer;border:2px solid transparent;transition:all .15s}
.cal-d:hover:not(.dis):not(.sel){background:var(--blue-pale);color:var(--blue)}
.cal-d.today{font-weight:700;color:var(--blue)}
.cal-d.sel{background:linear-gradient(135deg,var(--blue),var(--blue-d));color:#fff;box-shadow:var(--sh-blue);font-weight:700}
.cal-d.dis{color:var(--border-2);cursor:default;pointer-events:none}
.cal-d.empty{visibility:hidden}
.slotlab{font-size:13.5px;font-weight:700;margin-bottom:12px;display:flex;align-items:center;gap:7px}
.slotlab svg{color:var(--blue)}
.slots{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.slot{padding:12px 6px;text-align:center;border:1.5px solid var(--border-2);border-radius:var(--r-sm);font-size:13.5px;font-weight:600;color:var(--text-2);cursor:pointer;background:var(--surface);transition:all .15s}
.slot:hover:not(.sel){border-color:var(--blue);color:var(--blue)}
.slot.sel{background:linear-gradient(135deg,var(--blue),var(--blue-d));color:#fff;border-color:var(--blue);box-shadow:var(--sh-blue)}
.slot.dis,.slot:disabled{cursor:not-allowed;opacity:.5;background:var(--bg-2,#f3f4f6);text-decoration:line-through}
.slot.dis:hover,.slot:disabled:hover{border-color:var(--border-2);color:var(--text-2)}
.slot.dis small,.slot:disabled small{display:block;font-size:10px;font-weight:600;text-decoration:none;text-transform:uppercase;letter-spacing:.03em;margin-top:2px}
.tz{font-size:11.5px;color:var(--text-faint);margin-top:11px}
.confirm{text-align:center;padding:6px 0}
.chk{width:76px;height:76px;border-radius:50%;background:linear-gradient(135deg,var(--green-l),var(--green));display:flex;align-items:center;justify-content:center;margin:0 auto 20px;box-shadow:0 8px 28px var(--green-pale);animation:cpop .6s cubic-bezier(.16,1,.3,1)}
@keyframes cpop{0%{transform:scale(0)}60%{transform:scale(1.18)}100%{transform:scale(1)}}
.chk svg{width:38px;height:38px;color:#fff}
.summary{background:var(--bg-soft);border:1px solid var(--border);border-radius:var(--r-lg);padding:22px;text-align:left;margin:0 0 22px}
.summary .st{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--text-3);margin-bottom:12px}
.srow{display:flex;justify-content:space-between;padding:9px 0;border-bottom:1px solid var(--border);font-size:14px}
.srow:last-child{border:none}.srow .k{color:var(--text-3)}.srow .v{font-weight:700;text-align:right}
.after{background:linear-gradient(135deg,var(--navy),var(--navy-3));border-radius:var(--r-lg);padding:22px;text-align:left;color:#fff;position:relative;overflow:hidden}
.after h4{color:#fff;font-size:15px;margin-bottom:6px}
.after p{font-size:12.5px;color:var(--on-dark-2);margin-bottom:15px;line-height:1.5}
.chips{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px}
.chip{font-size:11.5px;font-weight:600;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);padding:5px 11px;border-radius:var(--r-full);color:#e2e8f0}
/* automation */
.auto-flow{display:flex;gap:0;flex-wrap:wrap;justify-content:center;margin-bottom:40px}
.afn{flex:1;min-width:150px;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);padding:16px 14px;text-align:center;box-shadow:var(--sh-sm)}
.afn .i{width:42px;height:42px;border-radius:11px;display:flex;align-items:center;justify-content:center;font-size:19px;margin:0 auto 9px}
.afn h4{font-size:13px;margin-bottom:3px}.afn p{font-size:11px;color:var(--text-3)}
.afa{display:flex;align-items:center;color:var(--border-2);font-size:20px;padding:0 6px}
.crm{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--sh-sm);margin-bottom:14px}
.crm-top{display:flex;align-items:center;gap:11px;padding:14px 18px;border-bottom:1px solid var(--border);background:var(--bg-soft)}
.crm-logo{font-family:var(--disp);font-weight:800;font-size:13px;color:#e42527;background:#fff;border:1px solid var(--border);padding:4px 9px;border-radius:6px}
.crm-top .status{margin-left:auto;font-size:11px;font-weight:700;color:var(--green);background:var(--green-pale);padding:4px 11px;border-radius:var(--r-full)}
.maprow{display:grid;grid-template-columns:1fr auto 1.2fr;gap:12px;align-items:center;padding:11px 18px;border-bottom:1px solid var(--border);font-size:13px}
.maprow:last-child{border:none}
.maprow .src{color:var(--text-3);font-family:ui-monospace,monospace;font-size:12px}
.maprow .arr{color:var(--blue);font-weight:700}
.maprow .fn{font-size:10.5px;color:var(--text-faint);font-family:ui-monospace,monospace}
.maprow .fv{font-weight:600}
.tl{display:flex;flex-direction:column;gap:0}
.tli{display:flex;gap:15px;position:relative;padding-bottom:14px}
.tli:not(:last-child)::before{content:'';position:absolute;left:20px;top:44px;bottom:-2px;width:2px;background:var(--border)}
.tln{width:42px;height:42px;border-radius:12px;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:18px;z-index:2}
.tlb{flex:1;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-md);padding:14px 16px;cursor:pointer;transition:all .2s;box-shadow:var(--sh-sm)}
.tlb:hover{border-color:var(--blue);box-shadow:var(--sh-md);transform:translateX(2px)}
.tlt{display:flex;align-items:center;gap:10px;margin-bottom:3px;flex-wrap:wrap}
.tlt .nm{font-weight:700;font-size:14px}
.tlt .bdg{font-size:10px;font-weight:700;text-transform:uppercase;padding:3px 8px;border-radius:var(--r-full)}
.b-sent{color:var(--green);background:var(--green-pale)}.b-sched{color:var(--amber);background:var(--amber-pale)}
.tl-tr{font-size:12px;color:var(--text-3);font-family:ui-monospace,monospace}
.tl-su{font-size:12.5px;color:var(--text-2);margin-top:5px}


/* ============================================================================
   AUTH PAGES — sign in / sign up
   ============================================================================ */
.auth{min-height:100vh;display:grid;grid-template-columns:1.04fr .96fr}
.auth-side{position:relative;overflow:hidden;background:var(--navy);color:#fff;
  display:flex;align-items:center;padding:56px 4vw}
.auth-side .orb{opacity:.65}
.auth-side-in{position:relative;z-index:2;width:100%;max-width:520px;margin-left:auto;margin-right:auto}
.auth-side .brand{display:inline-block;margin-bottom:34px}
.auth-side .brand img{height:32px}
.auth-side h1{font-size:clamp(28px,3vw,38px);line-height:1.14;color:#fff;margin-bottom:14px}
.auth-lead{font-size:16px;color:var(--on-dark-2);line-height:1.65;margin-bottom:30px;max-width:440px}

.auth-pts{list-style:none;padding:0;margin:0 0 34px;display:flex;flex-direction:column;gap:16px}
.auth-pts li{display:flex;gap:14px;align-items:flex-start}
.auth-pt-i{width:38px;height:38px;border-radius:11px;flex-shrink:0;display:flex;align-items:center;justify-content:center;
  font-size:16px;color:var(--blue-l);background:rgba(59,130,246,.14);border:1px solid rgba(59,130,246,.24)}
.auth-pts b{display:block;font-family:var(--disp);font-size:14.5px;color:#fff;margin-bottom:2px}
.auth-pts span span,.auth-pts li>span:last-child{font-size:13px;color:var(--on-dark-3);line-height:1.5}

.auth-shot{border-radius:var(--r-lg);overflow:hidden;box-shadow:0 30px 70px -26px rgba(0,0,0,.85);
  border:1px solid rgba(255,255,255,.1);margin-bottom:28px;animation:pvFloat 9s ease-in-out infinite}
.auth-shot .app{border:none;box-shadow:none;border-radius:0;background:transparent}
.auth-shot .app-bar{background:rgba(255,255,255,.06);border-bottom:1px solid rgba(255,255,255,.09)}
.auth-shot .app-url{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.1);color:rgba(255,255,255,.55)}
.auth-shot img{display:block;width:100%;height:auto}

/* trust chips — each stays on one line, unlike the old wrapping stat strip */
.auth-trust{display:flex;gap:8px;flex-wrap:wrap}
.auth-chip{display:inline-flex;align-items:center;gap:7px;font-size:11.5px;font-weight:600;white-space:nowrap;
  padding:7px 13px;border-radius:var(--r-full);background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12);color:var(--on-dark-2)}
.auth-chip i{font-size:12px;color:var(--blue-l)}

/* right column */
.auth-main{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:16px;padding:56px 5vw;background:var(--bg)}
.auth-back{position:absolute;top:26px;right:32px;display:inline-flex;align-items:center;gap:7px;
  font-size:13px;font-weight:600;color:var(--text-3);transition:color .2s}
.auth-back:hover{color:var(--blue)}
.auth-card{width:100%;max-width:420px;background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r-2xl);padding:38px 34px;box-shadow:var(--sh-lg)}
.auth-card-wide{max-width:520px}
.auth-logo-sm{display:none;margin-bottom:22px}
.auth-logo-sm img{width:168px;height:auto}
.auth-card h2{font-size:24px;margin-bottom:7px}
.auth-sub{font-size:14px;color:var(--text-3);margin-bottom:26px;line-height:1.6}

/* inputs with a leading icon */
.inp{position:relative;display:block}
.inp>i{position:absolute;left:14px;top:50%;transform:translateY(-50%);font-size:15px;color:var(--text-faint);pointer-events:none;z-index:2}
.inp .ctl{padding-left:42px}
.inp select.ctl{padding-left:42px}
.inp-eye{position:absolute;right:6px;top:50%;transform:translateY(-50%);width:34px;height:34px;border:none;
  background:none;color:var(--text-faint);cursor:pointer;border-radius:8px;font-size:15px;transition:color .2s}
.inp-eye:hover{color:var(--blue);background:var(--bg-soft)}

.auth-row{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:22px}
.auth-check{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:400;color:var(--text-2);cursor:pointer;margin:0}
.auth-check input{width:16px;height:16px;accent-color:var(--blue);cursor:pointer}
.auth-link{font-size:13px;font-weight:600;color:var(--blue)}
.auth-link:hover{text-decoration:underline}
.auth-msg{display:none;margin-top:15px;padding:12px 14px;border-radius:var(--r-sm);background:var(--blue-pale);
  font-size:13px;color:var(--text-2);line-height:1.55;text-align:center}
.auth-msg.on{display:block}
.auth-msg a{color:var(--blue);font-weight:600}
.auth-note{font-size:12px;color:var(--text-faint);text-align:center;margin:14px 0 0;line-height:1.55}
.auth-or{display:flex;align-items:center;gap:14px;margin:24px 0;color:var(--text-faint);font-size:12.5px}
.auth-or::before,.auth-or::after{content:'';flex:1;height:1px;background:var(--border)}
.auth-foot{text-align:center;margin:24px 0 0;font-size:14px;color:var(--text-3)}
.auth-foot a{color:var(--blue);font-weight:600}
.auth-foot a:hover{text-decoration:underline}
.auth-legal{display:flex;align-items:center;gap:8px;justify-content:center;font-size:12px;color:var(--text-faint);
  margin:0;text-align:center;flex-wrap:wrap}
.auth-legal i{font-size:13px}
.auth-legal a{color:var(--text-3);text-decoration:underline;text-underline-offset:2px}
.auth-legal a:hover{color:var(--blue)}
.auth-done-i{width:62px;height:62px;border-radius:50%;background:linear-gradient(135deg,var(--green-l),var(--green));
  display:flex;align-items:center;justify-content:center;font-size:29px;color:#fff;margin:0 auto 20px;
  animation:cpop .55s cubic-bezier(.16,1,.3,1)}

@media(max-width:1000px){
  .auth{grid-template-columns:1fr}
  .auth-side{display:none}
  .auth-main{min-height:100vh;padding:80px 24px 40px}
  .auth-logo-sm{display:block}
  .auth-back{top:22px;left:22px;right:auto}
}
@media(max-width:520px){
  .auth-card{padding:28px 22px;border:none;box-shadow:none;background:transparent}
}

/* legacy login layout — superseded by .auth above */
.login-wrap{min-height:100vh;display:grid;grid-template-columns:1fr 1fr}
.login-side{background:var(--navy);color:#fff;padding:60px;display:flex;flex-direction:column;justify-content:center;position:relative;overflow:hidden}
.login-side .orb{opacity:.7}
.login-side .in{position:relative;z-index:2;max-width:420px}
.login-side h2{color:#fff;font-size:34px;margin-bottom:18px}
.login-side p{color:var(--on-dark-2);font-size:16px;margin-bottom:30px}
.login-side .lt{display:flex;gap:12px;margin-bottom:16px;font-size:15px;color:var(--on-dark)}
.login-side .lt svg{width:22px;height:22px;color:var(--green-l);flex-shrink:0}
.login-peek{margin-top:28px;max-width:380px;border-radius:12px;overflow:hidden;box-shadow:0 26px 54px -18px rgba(0,0,0,.7);border:1px solid rgba(255,255,255,.1);animation:lfloat 7s ease-in-out infinite}
@keyframes lfloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
.login-peek .app{border:none;box-shadow:none}
.login-stats{display:flex;gap:24px;margin-top:26px;font-size:13px;color:var(--on-dark-3)}
.login-stats b{color:#fff;font-family:var(--disp);font-size:16px}
.login-main{display:flex;align-items:center;justify-content:center;padding:50px 40px;background:var(--bg)}
.login-card{width:100%;max-width:400px}
.login-card h2{font-size:28px;margin-bottom:8px}
.login-card .sub{color:var(--text-3);margin-bottom:30px}
.login-alt{display:flex;align-items:center;gap:12px;margin:22px 0;color:var(--text-faint);font-size:12.5px}
.login-alt::before,.login-alt::after{content:'';flex:1;height:1px;background:var(--border)}

/* footer */
.footer{background:var(--navy);color:var(--on-dark-2);padding:70px 0 34px}
.foot-grid{display:grid;grid-template-columns:1.7fr repeat(4,1fr);gap:34px;margin-bottom:44px;align-items:start}
.footer h5{color:#fff;font-family:var(--disp);font-size:14px;margin-bottom:18px;letter-spacing:.02em}
.footer .fcol a{display:block;font-size:14px;color:var(--on-dark-2);padding:6px 0;cursor:pointer}
.footer .fcol a:hover{color:#fff}
.footer .fbrand p{font-size:14px;line-height:1.7;max-width:300px;margin:16px 0 0}
.foot-bot{border-top:1px solid var(--dark-border);padding-top:26px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:14px;font-size:13px;color:var(--on-dark-3)}

/* CTA band */
.ctaband{background:linear-gradient(135deg,var(--navy),#0d1730 55%,var(--navy-2));border-radius:var(--r-2xl);padding:64px;text-align:center;position:relative;overflow:hidden}
.ctaband h2{color:#fff;font-size:clamp(28px,4vw,42px);margin-bottom:14px;position:relative;z-index:2}
.ctaband p{color:var(--on-dark-2);font-size:18px;margin-bottom:30px;position:relative;z-index:2}
.ctaband .row{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;position:relative;z-index:2}

/* prototype ribbon */
.ribbon{position:fixed;bottom:16px;right:16px;z-index:800;background:var(--surface);border:1px solid var(--border);box-shadow:var(--sh-lg);border-radius:var(--r-full);padding:8px 8px 8px 16px;display:flex;align-items:center;gap:10px;font-size:12.5px;color:var(--text-2)}
.ribbon b{color:var(--text)}
.ribbon .x{width:24px;height:24px;border-radius:50%;border:none;background:var(--bg-soft);cursor:pointer;color:var(--text-3)}

/* toast */
.toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(20px);z-index:1300;background:var(--navy-2);color:#fff;font-size:13.5px;padding:12px 20px;border-radius:var(--r-full);box-shadow:var(--sh-lg);opacity:0;transition:all .35s;pointer-events:none;border:1px solid var(--dark-border)}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.toast b{color:var(--green-l)}

@media(max-width:960px){
  .nav-links{display:none}.nav-tog{display:flex}
  .hero-in{grid-template-columns:1fr;gap:40px}.hero .mock{max-width:520px}
  .mod-grid,.feat-grid,.tst-grid,.pri-grid,.steps-h{grid-template-columns:1fr 1fr}
  .stats{grid-template-columns:1fr 1fr}
  .why-grid{grid-template-columns:1fr}
  .split{grid-template-columns:1fr;gap:28px}.split:nth-child(even) .split-media{order:0}
  .foot-grid{grid-template-columns:1fr 1fr}
  .login-wrap{grid-template-columns:1fr}.login-side{display:none}
  .ctaband{padding:44px 24px}
}
@media(max-width:600px){
  .mod-grid,.feat-grid,.tst-grid,.pri-grid,.steps-h,.grid2,.ben-grid{grid-template-columns:1fr}
  .stats{grid-template-columns:1fr 1fr}
  .wbody{padding:26px 20px}.slots{grid-template-columns:repeat(3,1fr)}.wp2-slots .slots{grid-template-columns:repeat(3,1fr)}
  .sec{padding:64px 0}.foot-grid{grid-template-columns:1fr}
  .maprow{grid-template-columns:1fr}.maprow .arr{display:none}
}

/* ===== BOOTSTRAP HARMONY + 1260 CONTAINER ===== */
.container,.container-fluid,.container-xl,.container-lg,.container-md,.container-sm{max-width:1560px;padding-left:40px;padding-right:40px}
.wrap{max-width:1560px}
:root{--maxw:1560px}
body{font-family:var(--sans)}
/* keep bootstrap buttons from clashing with our .btn */
.btn{--bs-btn-padding-x:0;--bs-btn-padding-y:0;--bs-btn-border-radius:var(--r-full)}
a{ -webkit-tap-highlight-color:transparent }
/* skeleton loader */
.skeleton{position:relative;overflow:hidden;background:var(--bg-soft-2);border-radius:var(--r-md)}
.skeleton::after{content:'';position:absolute;inset:0;transform:translateX(-100%);background:linear-gradient(90deg,transparent,rgba(255,255,255,.25),transparent);animation:sk 1.4s infinite}
@keyframes sk{100%{transform:translateX(100%)}}

/* ===== page helpers ===== */
.row-cta{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;position:relative;z-index:2}
.page-top{padding-top:130px}
.feat.h-100{height:100%}

/* ===== FIX: icon-font parity with the svg rules above =====
   Markup uses Bootstrap Icons (<i class="bi ...">), not inline <svg>, so the
   svg-only colour/size rules never applied. These mirror them for <i>. */
.baw-after i,.baw-before i{font-size:16px;flex-shrink:0;line-height:1}
.baw-after i{color:var(--green-l)}
.baw-before i{color:var(--red)}
.tick i{font-size:19px;color:var(--green-l);flex-shrink:0;line-height:1.2}
.ben i{font-size:20px;color:var(--green-l);flex-shrink:0;line-height:1.2}
.plan li i{font-size:17px;color:var(--green-l);flex-shrink:0;line-height:1.35}
.login-side .lt i{font-size:20px;color:var(--green-l);flex-shrink:0;line-height:1.2}

/* ===== FIX: solid nav on light-background pages =====
   The nav paints white text for dark heroes. Pages that open on a light
   background (data-nav="solid") get the scrolled treatment from the start,
   otherwise the logo, links and Login button are invisible until you scroll. */
body[data-nav="solid"] .nav{background:var(--bg);border-bottom:1px solid var(--border)}
body[data-nav="solid"] .nav .nav-in{padding:11px 24px}
body[data-nav="solid"] .nav .brand b{color:var(--text)}
body[data-nav="solid"] .nav .nlink{color:var(--text-2)}
body[data-nav="solid"] .nav .nlink:hover{background:var(--bg-soft);color:var(--text)}
body[data-nav="solid"] .nav .btn-ghost{color:var(--text-2);border-color:var(--border-2)}
body[data-nav="solid"] .nav .themebtn{border-color:var(--border-2);color:var(--text-2)}
body[data-nav="solid"] .nav .nav-tog{border-color:var(--border-2)}
body[data-nav="solid"] .nav .nav-tog span{background:var(--text)}

/* ===== legal pages ===== */
.legal{max-width:760px;margin:0 auto}
.legal h2{font-size:20px;margin:34px 0 14px}
.legal p{font-size:15.5px;color:var(--text-2);line-height:1.75}
.legal ul{padding-left:0;list-style:none;display:flex;flex-direction:column;gap:12px}
.legal li{font-size:15px;color:var(--text-2);line-height:1.65;padding-left:26px;position:relative}
.legal li::before{content:'\F26E';font-family:'bootstrap-icons';position:absolute;left:0;top:0;color:var(--blue);font-size:14px}
.legal li b{color:var(--text)}
.legal-meta{font-size:13.5px;color:var(--text-3)}
.legal-meta a{color:var(--blue);font-weight:600;text-decoration:underline;text-underline-offset:3px}
.legal-draft{display:flex;gap:14px;align-items:flex-start;background:var(--amber-pale);border:1px solid var(--amber);border-radius:var(--r-md);padding:18px 20px;margin:26px 0 8px;font-size:14px;color:var(--text-2);line-height:1.6}
.legal-draft i{color:var(--amber);font-size:19px;flex-shrink:0;margin-top:1px}
.legal-draft b{color:var(--text)}

/* ===== consent checkbox ===== */
.consent label{display:flex;gap:10px;align-items:flex-start;font-size:13px;font-weight:400;color:var(--text-2);line-height:1.55;cursor:pointer}
.consent input[type=checkbox]{width:17px;height:17px;flex-shrink:0;margin-top:2px;accent-color:var(--blue);cursor:pointer}
.consent a{color:var(--blue);font-weight:600;text-decoration:underline;text-underline-offset:2px}

/* ===== submit states ===== */
.spin{display:inline-block;width:14px;height:14px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:spin .6s linear infinite;vertical-align:-2px}
@keyframes spin{to{transform:rotate(360deg)}}
.btn:disabled{opacity:.72;cursor:not-allowed;transform:none!important}
.form-err{display:none;gap:11px;align-items:flex-start;background:var(--red-pale);border:1px solid var(--red);border-radius:var(--r-sm);padding:13px 15px;margin-bottom:18px;font-size:13.5px;color:var(--text);line-height:1.55}
.form-err.on{display:flex}
.form-err i{color:var(--red);font-size:17px;flex-shrink:0;margin-top:1px}
/* honeypot — visually and audibly hidden, still fillable by bots */
.hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}

/* ===== inline field errors ===== */
.fe{display:none;font-size:12.5px;font-weight:500;color:var(--red);margin-top:6px}
.fe.on{display:block}
.fe::before{content:'\26A0';margin-right:5px}

/* ===== booking: keyboard-reachable date & slot controls ===== */
.cal-d,.slot{font-family:inherit}
.cal-d{background:transparent;border:2px solid transparent;color:var(--text);width:100%}
.cal-d:not(.dis){cursor:pointer}
.cal-d:disabled{color:var(--border-2);cursor:default}
.cal-d:focus-visible,.slot:focus-visible,.pshow-tab:focus-visible,.cal-nav:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.nlink:focus-visible,.btn:focus-visible,.ctl:focus-visible,.drawer a:focus-visible,.footer a:focus-visible{outline:2px solid var(--blue);outline-offset:2px}

/* ===== NAV v2: multi-dropdown, keyboard-accessible ===== */
.skip{position:absolute;left:-9999px;top:0;z-index:1400;background:var(--blue);color:#fff;padding:12px 20px;border-radius:0 0 var(--r-sm) 0;font-size:14px;font-weight:600}
.skip:focus{left:0}
.nav-links .nav-item .nlink{background:none;border:none;font-family:inherit;cursor:pointer}
.nav-links .nlink i.bi-chevron-down{font-size:11px;transition:transform .25s}
.nav-item.open .nlink i.bi-chevron-down,.nav-item:hover .nlink i.bi-chevron-down{transform:rotate(180deg)}
.nav-item:hover .dd,.nav-item.open .dd{opacity:1;visibility:visible;transform:none}
.dd-wide{min-width:376px}
.dd a{align-items:flex-start}
.dd .dd-i{display:flex;align-items:center;justify-content:center}
.dd .dd-i i{font-size:17px}
.dd .dd-t,.dd .dd-s{display:block}
.dd-all{border-top:1px solid var(--border);margin-top:6px;padding-top:12px!important;justify-content:space-between}
.dd-all .dd-t{color:var(--blue)}
.dd-all i{color:var(--blue);font-size:13px}
.nlink-plain{font-size:14px}
.nav-links a.cur{color:var(--blue)!important;background:var(--blue-pale)}
.nav.scr .nav-links a.cur,body[data-nav="solid"] .nav .nav-links a.cur{color:var(--blue)!important;background:var(--blue-pale)}
.themebtn{display:flex;align-items:center;justify-content:center}
.themebtn i{font-size:15px}
.drawer-h{font-family:var(--disp);font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--on-dark-3);margin:22px 0 4px;padding-bottom:6px}
.drawer-h:first-of-type{margin-top:0}
.drawer a.cur{color:#fff}
body[data-nav="solid"] .nav .nav-item .nlink{color:var(--text-2)}
body[data-nav="solid"] .nav .nav-item .nlink:hover{background:var(--bg-soft);color:var(--text)}
.nav.scr .nav-item .nlink{color:var(--text-2)}
.nav.scr .nav-item .nlink:hover{background:var(--bg-soft);color:var(--text)}
@media(max-width:1100px){.dd-wide{min-width:330px}}

/* ===== footer additions ===== */
.foot-contact{display:flex;flex-direction:column;gap:8px;margin-top:18px}
.foot-contact a{font-size:13.5px;color:var(--on-dark-2);display:flex;align-items:center;gap:9px}
.foot-contact a:hover{color:#fff}
.foot-contact i{font-size:15px;color:var(--blue-l)}
@media(max-width:1150px){.foot-grid{grid-template-columns:1.4fr repeat(2,1fr);row-gap:34px}}
@media(max-width:760px){.foot-grid{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.foot-grid{grid-template-columns:1fr}}

/* ===== breadcrumb ===== */
.crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:9px;font-size:13px;color:rgba(255,255,255,.62);margin-bottom:20px}
.crumbs a{color:rgba(255,255,255,.82);text-decoration:underline;text-underline-offset:2px}
.crumbs a:hover{color:#fff}
.crumbs i{font-size:10px;opacity:.5}
.crumbs [aria-current]{color:#fff;font-weight:600}

/* ===== PRODUCT PAGE COMPONENTS ===== */
.mhero-cta{margin-top:26px;display:flex;gap:12px;flex-wrap:wrap}
.mhero-trust{margin-top:24px;display:flex;gap:22px;flex-wrap:wrap;font-size:13px;color:rgba(255,255,255,.72)}
.mhero-trust i{color:var(--green-l);margin-right:6px}
.mhero-ic i{font-size:32px}
.pillar .pi i,.aud .ai i,.feat .fi i{font-size:22px;line-height:1}

/* pain points */
.pain{background:var(--surface);border:1px solid var(--border);border-left:3px solid var(--red);border-radius:var(--r-lg);padding:26px;transition:all .3s}
.pain:hover{box-shadow:var(--sh-md);transform:translateY(-3px)}
.pain>i{font-size:22px;color:var(--red);display:block;margin-bottom:14px}
.pain h4{font-size:16.5px;margin-bottom:9px}
.pain p{font-size:14px;color:var(--text-2);line-height:1.65;margin:0}

/* numbered steps */
.stp2{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);padding:24px;transition:all .3s}
.stp2:hover{box-shadow:var(--sh-md);border-color:var(--border-2);transform:translateY(-3px)}
.stp2 .sn{font-family:var(--disp);font-size:14px;font-weight:800;color:#fff;width:34px;height:34px;border-radius:10px;
  background:linear-gradient(135deg,var(--blue),var(--blue-d));display:flex;align-items:center;justify-content:center;margin-bottom:14px;box-shadow:var(--sh-blue)}
.stp2 h4{font-size:16px;margin-bottom:7px}
.stp2 p{font-size:13.5px;color:var(--text-2);line-height:1.6;margin:0}

/* data table */
.dtable{max-width:900px;margin:0 auto;border:1px solid var(--border);border-radius:var(--r-lg);overflow-x:auto;background:var(--surface);box-shadow:var(--sh-sm)}
.dtable table{width:100%;border-collapse:collapse;min-width:560px}
.dtable th{font-family:var(--disp);font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--text-3);
  text-align:left;padding:14px 18px;background:var(--bg-soft);border-bottom:1px solid var(--border);white-space:nowrap}
.dtable td{padding:13px 18px;border-bottom:1px solid var(--border);font-size:14px;color:var(--text-2);vertical-align:top}
.dtable tr:last-child td{border-bottom:none}
.dtable .tk{font-weight:700;color:var(--text);white-space:nowrap}
.dtable .tt{white-space:nowrap;color:var(--text-3);font-size:13.5px}
.tbl-note{max-width:900px;margin:18px auto 0;font-size:13px;color:var(--text-faint);line-height:1.6;text-align:center}

/* related modules */
.relgrid{display:grid;grid-template-columns:1fr 1fr;gap:16px;max-width:860px;margin:0 auto}
.relc{display:flex;align-items:center;gap:15px;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);padding:20px 22px;transition:all .25s}
.relc:hover{border-color:var(--blue);box-shadow:var(--sh-md);transform:translateY(-3px)}
.relc .ri{width:46px;height:46px;border-radius:13px;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:20px}
.relc .rn{display:block;font-family:var(--disp);font-weight:700;font-size:15.5px;color:var(--text)}
.relc .rs{display:block;font-size:13px;color:var(--text-3);margin-top:2px}
.relc .ra{margin-left:auto;color:var(--blue);font-size:15px;transition:transform .25s}
.relc:hover .ra{transform:translateX(4px)}
@media(max-width:700px){.relgrid{grid-template-columns:1fr}}

/* accordion harmony */
.accordion-item{border:1px solid var(--border);background:var(--surface);border-radius:var(--r-md)!important;margin-bottom:10px;overflow:hidden}
.accordion-button{font-family:var(--disp);font-weight:600;font-size:15.5px;color:var(--text);background:var(--surface);padding:18px 20px}
.accordion-button:not(.collapsed){color:var(--blue);background:var(--blue-pale);box-shadow:none}
.accordion-button:focus{box-shadow:0 0 0 3px var(--blue-glow);border-color:var(--blue)}
.accordion-body{font-size:14.5px;color:var(--text-2);line-height:1.7;padding:4px 20px 20px}
.accordion-header{margin:0}

/* ============================================================================
   HEADER v3 — matches turia.in: a solid light bar, always. Logo left,
   menu optically centred, Login + Start Free Trial right.
   Replaces the transparent-white-over-dark-hero treatment entirely.
   ============================================================================ */
.nav{position:fixed;top:0;left:0;right:0;z-index:900;
  background:var(--surface);border-bottom:1px solid var(--border);
  transition:box-shadow .3s ease}
.nav.scr{background:var(--surface);border-bottom:1px solid var(--border);box-shadow:0 1px 12px rgba(11,18,32,.06);backdrop-filter:none;-webkit-backdrop-filter:none}
.nav-in{width:100%;max-width:1560px;margin:0 auto;padding:0 40px;height:76px;
  display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:24px}
.nav.scr .nav-in{padding:0 40px}

/* ===== OFFICIAL BRAND LOGO =====
   Both lockups are the client's own, supplied 07 Sep:
     taxeye-logo.png        light ground (dark "Tax") — header, light theme
     taxeye-logo-white.png  dark  ground (white "Tax") — footer, dark theme
   Each is tagline-cropped for on-site use, because no header renders the mark
   tall enough for a ~5px tagline to be legible; the footer prints the tagline
   as real text instead, and the full lockups live in Assets/Brand for print.

   Sized by HEIGHT, not width. The two lockups have different proportions
   (6.4:1 light vs 5.7:1 dark), so a fixed width made the mark jump from 33px
   to 37px tall whenever the visitor switched theme. */
.brand img{display:block;width:auto;max-width:100%}
.nav .brand img{height:34px}
.footer .brand img{height:34px}
.login-side .brand img{height:34px}
@media(max-width:960px){
  .nav .brand img{height:28px}
  .footer .brand img{height:30px}
  .login-side .brand img{height:30px}
}
/* The phone header rules live at the end of this file — they have to come after
   the @media(max-width:960px) block below, which re-declares .nav-in. */
/* Theme-aware mark. The colour lockup sets "Tax" in near-black, which vanishes
   on a dark header — so dark grounds get the white lockup instead. */
.brand .lg-dark{display:none}
.brand .lg-light{display:block}
@media(prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .brand .lg-light{display:none}
  :root:not([data-theme="light"]) .brand .lg-dark{display:block}
}
:root[data-theme="dark"] .brand .lg-light{display:none}
:root[data-theme="dark"] .brand .lg-dark{display:block}

/* centred menu. No `display` here on purpose: the 960px query above hides this
   menu in favour of the hamburger, and re-declaring display:flex after it beat
   the hide — the links then overflowed and pushed .nav-right out of the bar. */
.nav-links{align-items:center;justify-content:center;gap:6px;margin:0}
.nav-links .nlink,.nav.scr .nav-links .nlink,
body[data-nav="solid"] .nav .nav-links .nlink{
  color:var(--text-2);font-size:15px;font-weight:500;padding:9px 15px;border-radius:8px;background:none}
.nav-links .nlink:hover,.nav.scr .nav-links .nlink:hover,
body[data-nav="solid"] .nav .nav-links .nlink:hover{background:var(--bg-soft);color:var(--text)}
.nav-links a.cur,.nav.scr .nav-links a.cur{color:var(--blue)!important;background:var(--blue-pale)}

/* right actions */
.nav-right{margin-left:0;display:flex;align-items:center;gap:12px}
.nav-right .nlink-plain,.nav.scr .nav-right .nlink-plain{color:var(--text-2);font-size:15px;font-weight:500;padding:8px 6px;background:none}
.nav-right .nlink-plain:hover{color:var(--text);background:none}
.nav .themebtn,.nav.scr .themebtn{border-color:var(--border-2);color:var(--text-3);width:38px;height:38px}
.nav .btn-ghost,.nav.scr .btn-ghost{color:var(--text-2);border-color:var(--border-2)}
.nav .btn-primary{background:linear-gradient(135deg,var(--blue-l),var(--blue-d));padding:10px 20px;font-size:14px}
.nav .nav-tog,.nav.scr .nav-tog{border-color:var(--border-2)}
.nav .nav-tog span,.nav.scr .nav-tog span{background:var(--text)}

/* every page now opens below a solid bar, so nothing needs the old
   dark-hero padding compensation */
.hero{padding-top:136px}
.mhero{padding-top:132px}
.page-top{padding-top:116px}
@media(max-width:960px){
  .nav-in{grid-template-columns:auto auto;padding:0 24px;height:64px}
  .hero{padding-top:104px}.mhero{padding-top:100px}.page-top{padding-top:92px}
}

/* drawer module grid, for mobile */
.drawer-rail{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:6px}
.drawer-rail a{display:flex!important;flex-direction:column;align-items:center;gap:5px;padding:12px 4px!important;
  border:1px solid var(--dark-border);border-radius:10px;color:var(--on-dark-2);font-size:9.5px;font-weight:700;text-align:center;line-height:1.15}
.drawer-rail a:hover{background:rgba(255,255,255,.07);color:#fff}
.drawer-rail a i{font-size:17px}

/* ===== PLATFORM TOUR v2 — left icon rail + large stage ===== */
.pshow{max-width:100%}
/* Compact icon-first tabs — small icon above a tiny label, so the screenshot
   gets the width instead. Rail narrowed 232px -> 96px. */
/* single column: the module picker moved inside the drawn app frame, so the
   old 104px rail column would have squeezed the stage to nothing */
.ptour{display:block}
/* 15 modules — the rail scrolls internally rather than running past the screen */
.ptour-cap{text-align:center;font-size:14.5px;color:var(--text-3);margin:20px auto 0;max-width:640px;line-height:1.6}

/* the tour section runs wider than the text sections so the screen is bigger */
#platform .container,#tourSection .container{max-width:1560px}

/* rail becomes a horizontal scroller on narrow screens — never wraps to an
   orphaned second row the way the old pill layout did */
@media(max-width:900px){
  .ptour{display:block}
}

/* ============================================================================
   BEFORE vs AFTER — three-column ledger: old way | workflow | TaxEye way
   ============================================================================ */
.vsw{max-width:1000px;margin:0 auto;display:flex;flex-direction:column;gap:11px}
.vsw-head{display:grid;grid-template-columns:1fr 96px 1fr;align-items:stretch;border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--sh-md)}
.vsw-b,.vsw-a{display:flex;align-items:center;gap:13px;padding:16px 22px}
.vsw-b{background:var(--navy-2)}
.vsw-a{background:linear-gradient(120deg,var(--blue),var(--purple))}
.vsw-b b,.vsw-a b{display:block;font-family:var(--disp);font-size:15px;font-weight:700;color:#fff;line-height:1.2}
.vsw-b small,.vsw-a small{display:block;font-size:10.5px;font-weight:600;letter-spacing:.05em;color:rgba(255,255,255,.62);margin-top:3px}
.vsw-dot{width:26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:12px;color:#fff}
.vsw-b .vsw-dot{background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.24)}
.vsw-a .vsw-dot{background:rgba(255,255,255,.22);border:1px solid rgba(255,255,255,.34)}
.vsw-mid{background:var(--navy-3);display:flex;align-items:center;justify-content:center}
.vsw-vs{width:40px;height:40px;border-radius:50%;background:linear-gradient(135deg,var(--blue-l),var(--purple));
  display:flex;align-items:center;justify-content:center;font-family:var(--disp);font-size:12px;font-weight:800;color:#fff;
  box-shadow:0 0 0 5px rgba(255,255,255,.09)}

.vsw-row{display:grid;grid-template-columns:1fr 96px 1fr;align-items:stretch;gap:0}
.vsw-old,.vsw-new{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-md);
  padding:16px 20px;font-size:13.5px;line-height:1.55;display:flex;align-items:center;gap:12px;transition:all .28s cubic-bezier(.16,1,.3,1)}
.vsw-old{border-left:3px solid var(--red);color:var(--text-3);font-style:italic;text-align:right;justify-content:flex-end}
.vsw-new{border-right:3px solid var(--green-l);color:var(--text);font-weight:500}
.vsw-new i{color:var(--green-l);font-size:17px;flex-shrink:0;margin-left:auto}
.vsw-lbl{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;
  font-size:8.5px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--text-3);text-align:center;line-height:1.25}
.vsw-ic{width:34px;height:34px;border-radius:50%;background:linear-gradient(135deg,var(--blue),var(--purple));
  display:flex;align-items:center;justify-content:center;color:#fff;font-size:14px;transition:transform .3s cubic-bezier(.16,1,.3,1)}
.vsw-row:hover .vsw-ic{transform:scale(1.14) rotate(-6deg)}
.vsw-row:hover .vsw-old{border-color:var(--red);border-left-color:var(--red);box-shadow:var(--sh-sm);opacity:.75}
.vsw-row:hover .vsw-new{border-color:var(--green-l);box-shadow:var(--sh-md);transform:translateX(3px)}
.vsw-cta{text-align:center;margin-top:34px}
@media(max-width:820px){
  .vsw-head{grid-template-columns:1fr 64px 1fr}
  .vsw-row{grid-template-columns:1fr 64px 1fr}
  .vsw-old,.vsw-new{padding:13px 14px;font-size:12.5px}
  .vsw-b,.vsw-a{padding:13px 15px}
  .vsw-b b,.vsw-a b{font-size:13px}.vsw-b small,.vsw-a small{font-size:9px}
  .vsw-lbl{font-size:7.5px}.vsw-ic{width:28px;height:28px;font-size:12px}
}
@media(max-width:560px){
  .vsw-head{grid-template-columns:1fr 44px 1fr}
  .vsw-row{grid-template-columns:1fr;gap:0;border:1px solid var(--border);border-radius:var(--r-md);overflow:hidden;background:var(--surface)}
  .vsw-old,.vsw-new{border:none;border-radius:0;text-align:left;justify-content:flex-start}
  .vsw-old{border-left:3px solid var(--red);order:2}
  .vsw-new{border-left:3px solid var(--green-l);border-right:none;order:3}
  .vsw-lbl{order:1;flex-direction:row;gap:9px;justify-content:flex-start;padding:12px 16px 4px;font-size:10px;background:var(--bg-soft)}
  .vsw-lbl br{display:none}
  .vsw-mid{display:none}
  .vsw-head{grid-template-columns:1fr 1fr}
}

/* ============================================================================
   THE THREE PRODUCTS
   ============================================================================ */
:root{--p-notice:var(--blue);--p-notice-pale:var(--blue-pale);
      --p-compliance:var(--green);--p-compliance-pale:var(--green-pale);
      --p-litigation:var(--purple);--p-litigation-pale:var(--purple-pale)}

.prodgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;align-items:stretch}
@media(max-width:1050px){.prodgrid{grid-template-columns:1fr;max-width:620px;margin:0 auto}}
.prod{position:relative;display:flex;flex-direction:column;background:var(--surface);
  border:1px solid var(--border);border-radius:var(--r-2xl);padding:34px 30px;overflow:hidden;transition:all .35s cubic-bezier(.16,1,.3,1)}
.prod::before{content:'';position:absolute;top:0;left:0;right:0;height:4px;background:var(--pc,var(--blue));transform:scaleX(0);transform-origin:left;transition:transform .45s cubic-bezier(.16,1,.3,1)}
.prod:hover::before{transform:scaleX(1)}
.prod:hover{border-color:var(--pc,var(--blue));box-shadow:var(--sh-lg);transform:translateY(-6px)}
.prod.pop{border-color:var(--pc);box-shadow:var(--sh-lg)}
.prod.pop::before{transform:scaleX(1)}
.p-notice{--pc:var(--p-notice);--pp:var(--p-notice-pale)}
.p-compliance{--pc:var(--p-compliance);--pp:var(--p-compliance-pale)}
.p-litigation{--pc:var(--p-litigation);--pp:var(--p-litigation-pale)}
.prod-badge{position:absolute;top:18px;right:18px;font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;
  background:var(--pc);color:#fff;padding:5px 12px;border-radius:var(--r-full)}
.prod-step{font-family:var(--mono,ui-monospace,monospace);font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--pc);margin-bottom:16px}
.prod-ic{width:60px;height:60px;border-radius:17px;background:var(--pp);color:var(--pc);display:flex;align-items:center;justify-content:center;font-size:27px;margin-bottom:20px;transition:transform .35s cubic-bezier(.16,1,.3,1)}
.prod:hover .prod-ic{transform:scale(1.09) rotate(-4deg)}
.prod h2{font-size:23px;margin-bottom:11px}
.prod>p{font-size:14.5px;color:var(--text-2);line-height:1.65;margin-bottom:20px}
.prod ul{list-style:none;padding:0;margin:0 0 22px;display:flex;flex-direction:column;gap:10px}
.prod li{display:flex;gap:10px;align-items:flex-start;font-size:14px;color:var(--text-2)}
.prod li i{color:var(--pc);font-size:16px;flex-shrink:0;line-height:1.45}
.prod-n{font-size:12.5px;color:var(--text-3);padding-top:16px;border-top:1px solid var(--border);margin-top:auto}
.prod-n b{font-family:var(--disp);font-size:19px;color:var(--pc);margin-right:5px}
.prod-go{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:700;color:var(--pc);margin-top:16px;transition:gap .25s}
.prod:hover .prod-go{gap:13px}

.mhero-step{display:inline-block;font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(255,255,255,.7);background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.18);padding:5px 13px;border-radius:var(--r-full);margin-bottom:18px}

.inherit{display:flex;align-items:center;gap:18px;flex-wrap:wrap;max-width:900px;margin:0 auto;
  background:var(--bg-soft);border:1px solid var(--border);border-left:3px solid var(--blue);border-radius:var(--r-lg);padding:22px 26px}
.inherit>i{font-size:26px;color:var(--blue);flex-shrink:0}
.inherit b{display:block;font-family:var(--disp);font-size:16px;margin-bottom:4px}
.inherit span{display:block;font-size:14px;color:var(--text-2);line-height:1.6}
.inherit .btn{margin-left:auto;flex-shrink:0}
@media(max-width:700px){.inherit .btn{margin-left:0;width:100%;justify-content:center}}

/* ============================================================================
   PRODUCT HERO — copy left, live visual right (the right half used to be empty)
   ============================================================================ */
.mhero-in{position:relative;z-index:2;display:grid;grid-template-columns:1.02fr .98fr;gap:56px;align-items:center}
.mhero-copy h1{max-width:none}
.mhero-copy p{max-width:520px}
@media(max-width:1100px){
  .mhero-in{grid-template-columns:1fr;gap:44px}
  .mhero-vis{max-width:560px}
}

.pv{position:relative;padding:8px}
.pv-card{background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.14);border-radius:var(--r-xl);
  padding:20px;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  box-shadow:0 30px 70px -28px rgba(0,0,0,.75);animation:pvFloat 8s ease-in-out infinite}
@keyframes pvFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
.pv-top{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-bottom:14px;margin-bottom:14px;
  border-bottom:1px solid rgba(255,255,255,.12)}
.pv-ttl{display:flex;align-items:center;gap:9px;font-family:var(--disp);font-weight:700;font-size:14px;color:#fff}
.pv-ttl i{color:var(--blue-l);font-size:15px}
.pv-live{display:inline-flex;align-items:center;gap:6px;font-size:10.5px;font-weight:700;letter-spacing:.03em;
  padding:4px 10px;border-radius:var(--r-full);background:rgba(59,130,246,.18);color:#9dc0ff;white-space:nowrap}
.pv-live-g{background:rgba(16,185,129,.18);color:#6ee7c0}
.pv-live-p{background:rgba(167,139,250,.2);color:#c9b6ff}

/* rows slide in one after another */
.pv-rows{display:flex;flex-direction:column;gap:8px}
.pv-r{display:flex;align-items:center;gap:11px;padding:11px 12px;border-radius:11px;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);
  opacity:0;transform:translateX(14px);animation:pvIn .6s cubic-bezier(.16,1,.3,1) forwards;animation-delay:var(--d)}
@keyframes pvIn{to{opacity:1;transform:none}}
.pv-sec{font-family:ui-monospace,monospace;font-size:10.5px;font-weight:700;padding:4px 8px;border-radius:6px;
  background:rgba(255,255,255,.1);color:#dbe6ff;white-space:nowrap;flex-shrink:0}
.pv-cl{flex:1;min-width:0;font-size:12.5px;font-weight:600;color:#eaf0fb;line-height:1.3}
.pv-cl small{display:block;font-size:10.5px;font-weight:500;color:rgba(255,255,255,.5);margin-top:2px}
.pv-due{font-size:10px;font-weight:800;letter-spacing:.03em;padding:4px 9px;border-radius:var(--r-full);white-space:nowrap;flex-shrink:0}
.pv-red{background:rgba(244,63,94,.22);color:#ffa5b3;animation:pvPulse 2s ease-in-out infinite}
.pv-amb{background:rgba(245,158,11,.22);color:#fbd38d}
.pv-grn{background:rgba(16,185,129,.2);color:#6ee7c0}
@keyframes pvPulse{0%,100%{opacity:1}50%{opacity:.55}}
.pv-foot{display:flex;align-items:center;gap:10px;margin-top:14px;padding-top:13px;border-top:1px solid rgba(255,255,255,.12);
  font-size:11.5px;color:rgba(255,255,255,.62)}
.pv-tick{width:20px;height:20px;border-radius:50%;background:rgba(16,185,129,.22);color:#6ee7c0;
  display:flex;align-items:center;justify-content:center;font-size:11px;flex-shrink:0}
.pv-tick-p{background:rgba(167,139,250,.22);color:#c9b6ff}

/* floating chips around the card */
.pv-chip{position:absolute;display:inline-flex;align-items:center;gap:7px;font-size:11px;font-weight:700;
  padding:8px 13px;border-radius:var(--r-full);background:rgba(12,20,38,.92);border:1px solid rgba(255,255,255,.16);
  color:#eaf0fb;box-shadow:0 12px 30px -10px rgba(0,0,0,.7);white-space:nowrap;z-index:3}
.pv-chip i{font-size:12px;color:var(--blue-l)}
.pv-c1{top:-6px;right:2px;animation:pvFloat 7s ease-in-out infinite}
.pv-c2{bottom:-6px;left:-4px;animation:pvFloat 9s ease-in-out .8s infinite}
.pv-ai{background:linear-gradient(120deg,var(--blue-d),var(--purple));border-color:transparent}
.pv-ai i{color:#fff}

/* Compliance — the reconciliation ledger */
.pv-reco{display:grid;grid-template-columns:1fr 44px 1fr;gap:8px;align-items:start}
.pv-ch{display:block;font-size:9.5px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;
  color:rgba(255,255,255,.45);margin-bottom:9px;text-align:center}
.pv-col{display:flex;flex-direction:column;gap:8px}
.pv-v{font-family:ui-monospace,monospace;font-size:12px;font-weight:600;color:#eaf0fb;text-align:center;
  padding:9px 6px;border-radius:9px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);
  opacity:0;animation:pvIn .55s cubic-bezier(.16,1,.3,1) forwards;animation-delay:var(--d)}
.pv-x{color:#ffa5b3;border-color:rgba(244,63,94,.4);background:rgba(244,63,94,.12)}
.pv-mid{display:flex;flex-direction:column;gap:8px;padding-top:27px}
.pv-m{width:26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px;
  margin:5px auto 0;opacity:0;animation:pvPop .5s cubic-bezier(.34,1.56,.64,1) forwards;animation-delay:var(--d)}
@keyframes pvPop{from{opacity:0;transform:scale(0)}to{opacity:1;transform:scale(1)}}
.pv-m.ok{background:rgba(16,185,129,.22);color:#6ee7c0}
.pv-m.gap{background:rgba(245,158,11,.24);color:#fbd38d;animation:pvPop .5s cubic-bezier(.34,1.56,.64,1) forwards,pvPulse 2s 1s ease-in-out infinite}
.pv-gap{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:15px;padding:12px 14px;border-radius:11px;
  background:rgba(245,158,11,.13);border:1px solid rgba(245,158,11,.3)}
.pv-gl{font-size:11px;font-weight:700;color:#fbd38d}
.pv-gv{font-family:var(--disp);font-size:16px;font-weight:800;color:#fff}
.pv-gp{margin-left:auto;font-size:10px;font-weight:700;padding:4px 9px;border-radius:var(--r-full);
  background:rgba(255,255,255,.1);color:#eaf0fb;white-space:nowrap}

/* Litigation — the forum ladder */
.pv-forum{display:flex;flex-direction:column;gap:0;position:relative}
.pv-f{display:flex;align-items:center;gap:13px;padding:9px 0;position:relative;
  opacity:0;transform:translateX(14px);animation:pvIn .6s cubic-bezier(.16,1,.3,1) forwards;animation-delay:var(--d)}
.pv-f:not(:last-child)::before{content:'';position:absolute;left:7px;top:29px;bottom:-6px;width:2px;background:rgba(255,255,255,.14)}
.pv-f.done:not(:last-child)::before{background:rgba(167,139,250,.55)}
.pv-fd{width:16px;height:16px;border-radius:50%;border:2px solid rgba(255,255,255,.28);flex-shrink:0;z-index:2;background:var(--navy-2)}
.pv-f.done .pv-fd{background:var(--purple-l);border-color:var(--purple-l)}
.pv-f.now .pv-fd{background:#fff;border-color:var(--purple-l);box-shadow:0 0 0 5px rgba(167,139,250,.25);animation:pvRing 2.2s ease-in-out infinite}
@keyframes pvRing{0%,100%{box-shadow:0 0 0 5px rgba(167,139,250,.25)}50%{box-shadow:0 0 0 10px rgba(167,139,250,0)}}
.pv-fn{flex:1;min-width:0;font-size:12.5px;font-weight:600;color:#eaf0fb;line-height:1.3}
.pv-fn small{display:block;font-size:10.5px;font-weight:500;color:rgba(255,255,255,.48);margin-top:2px}
.pv-f:not(.done):not(.now) .pv-fn{color:rgba(255,255,255,.42)}
.pv-fb{font-size:9px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;padding:4px 9px;
  border-radius:var(--r-full);background:var(--purple);color:#fff;white-space:nowrap;flex-shrink:0}

@media(max-width:520px){
  .pv-chip{position:static;display:inline-flex;margin:10px 6px 0 0;animation:none}
  .pv{padding:0}
}
@media(prefers-reduced-motion:reduce){
  .pv-card,.pv-chip{animation:none}
  .pv-r,.pv-v,.pv-m,.pv-f{opacity:1;transform:none;animation:none}
}

/* ===== AI BADGE — the differentiator, so it gets to shine ===== */
.ai-tag{display:inline-flex;align-items:center;gap:5px;font-size:9.5px;font-weight:800;letter-spacing:.07em;
  text-transform:uppercase;padding:3px 9px;border-radius:var(--r-full);vertical-align:middle;
  background:linear-gradient(120deg,var(--purple),var(--blue));color:#fff;white-space:nowrap}
.ai-tag i{font-size:10px}
.ai-tag-c{position:absolute;top:16px;right:16px;font-size:9px;padding:4px 10px;z-index:2}

/* ===== FEATURE CARDS ===== */
.fcard{position:relative;overflow:hidden;background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r-xl);padding:28px 26px 26px;transition:all .35s cubic-bezier(.16,1,.3,1)}
.fcard:hover{border-color:var(--fc,var(--blue));box-shadow:var(--sh-lg);transform:translateY(-6px)}
.fcard-n{position:absolute;top:18px;right:20px;font-family:var(--disp);font-size:30px;font-weight:800;
  color:var(--fp,var(--blue-pale));line-height:1;transition:all .35s cubic-bezier(.16,1,.3,1);z-index:1}
.fcard:hover .fcard-n{transform:scale(1.14);opacity:.75}
.fcard-i{position:relative;z-index:2;width:52px;height:52px;border-radius:15px;background:var(--fp,var(--blue-pale));
  color:var(--fc,var(--blue));display:flex;align-items:center;justify-content:center;font-size:23px;margin-bottom:18px;
  transition:transform .35s cubic-bezier(.16,1,.3,1)}
.fcard:hover .fcard-i{transform:scale(1.1) rotate(-6deg)}
.fcard h4{position:relative;z-index:2;font-size:16.5px;margin-bottom:9px}
.fcard p{position:relative;z-index:2;font-size:13.8px;color:var(--text-2);line-height:1.65;margin:0}
.fcard-glow{position:absolute;inset:auto -40% -60% -40%;height:150px;border-radius:50%;
  background:radial-gradient(circle,var(--fp,var(--blue-pale)),transparent 70%);
  opacity:0;transition:opacity .45s;pointer-events:none}
.fcard:hover .fcard-glow{opacity:.9}
/* the AI cards get a moving gradient edge */
.fcard-ai{--fc:var(--purple);--fp:var(--purple-pale);border-color:transparent;
  background:linear-gradient(var(--surface),var(--surface)) padding-box,
             linear-gradient(120deg,var(--blue),var(--purple),var(--blue)) border-box;
  border:1.5px solid transparent;background-size:100% 100%,220% 100%;animation:aiEdge 7s linear infinite}
@keyframes aiEdge{0%{background-position:0 0,0% 0}100%{background-position:0 0,200% 0}}
.fcard-ai .fcard-i{background:linear-gradient(120deg,var(--blue),var(--purple));color:#fff}
.fcard-ai:hover{transform:translateY(-6px);box-shadow:0 22px 50px -18px rgba(124,58,237,.45)}

/* ===== THREE-TIER LADDER ===== */
.ladder{display:flex;align-items:stretch;justify-content:center;gap:10px;flex-wrap:wrap;max-width:1120px;margin:0 auto}
.rung{position:relative;flex:1 1 300px;min-width:280px;background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r-xl);overflow:hidden;transition:all .35s cubic-bezier(.16,1,.3,1)}
.rung-bar{display:block;height:4px;background:var(--rc);transform:scaleX(.25);transform-origin:left;transition:transform .55s cubic-bezier(.16,1,.3,1)}
.rung-in{display:flex;align-items:center;gap:14px;padding:20px 22px}
.r-notice{--rc:var(--blue)}.r-compliance{--rc:var(--green)}.r-litigation{--rc:var(--purple)}
.rung-i{width:44px;height:44px;border-radius:13px;display:flex;align-items:center;justify-content:center;
  font-size:19px;background:color-mix(in srgb,var(--rc) 14%,transparent);color:var(--rc);flex-shrink:0;transition:transform .35s}
.rung-t{flex:1;min-width:0}
.rung-t b{display:block;font-family:var(--disp);font-size:16px;color:var(--text);line-height:1.25}
.rung-t small{display:block;font-size:12.5px;color:var(--text-3);margin-top:3px;line-height:1.4}
.rung-c{font-family:var(--disp);font-size:26px;font-weight:800;color:var(--rc);line-height:1;flex-shrink:0}
.rung:hover{border-color:var(--rc);box-shadow:var(--sh-lg);transform:translateY(-4px)}
.rung:hover .rung-bar{transform:scaleX(1)}
.rung:hover .rung-i{transform:scale(1.1) rotate(-6deg)}
.rung-plus{display:flex;align-items:center;justify-content:center;color:var(--text-faint);font-size:15px;padding:0 2px}
/* the tier you are currently reading about */
.ladder[data-active="notice-management"] .r-notice,
.ladder[data-active="compliance"] .r-compliance,
.ladder[data-active="litigation"] .r-litigation{border-color:var(--rc);box-shadow:var(--sh-lg)}
.ladder[data-active="notice-management"] .r-notice .rung-bar,
.ladder[data-active="compliance"] .r-compliance .rung-bar,
.ladder[data-active="litigation"] .r-litigation .rung-bar{transform:scaleX(1)}
.ladder[data-active="notice-management"] .r-notice::after,
.ladder[data-active="compliance"] .r-compliance::after,
.ladder[data-active="litigation"] .r-litigation::after{
  content:'You are here';position:absolute;bottom:0;left:0;right:0;text-align:center;
  font-size:9.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:#fff;background:var(--rc);padding:4px}
.ladder[data-active] .rung{padding-bottom:0}
.ladder[data-active="notice-management"] .r-notice .rung-in,
.ladder[data-active="compliance"] .r-compliance .rung-in,
.ladder[data-active="litigation"] .r-litigation .rung-in{padding-bottom:28px}
@media(max-width:960px){.ladder{flex-direction:column}.rung-plus{transform:rotate(0);padding:2px 0}}

/* ===== FEATURE MATRIX ===== */
.fmatrix{max-width:1000px;margin:0 auto}
.fmatrix-legend{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-bottom:26px}
.fmatrix-pill{display:inline-flex;align-items:center;gap:8px;font-family:inherit;font-size:13.5px;font-weight:600;
  color:var(--text-2);background:var(--surface);border:1.5px solid var(--border-2);border-radius:var(--r-full);
  padding:9px 17px;cursor:pointer;transition:all .22s cubic-bezier(.16,1,.3,1)}
.fmatrix-pill i{font-size:15px}
.fmatrix-pill:hover{transform:translateY(-2px);box-shadow:var(--sh-sm)}
.fmatrix-pill .fmatrix-c{font-family:var(--disp);font-weight:800;font-size:12px;background:var(--bg-soft);color:var(--text-3);
  padding:2px 8px;border-radius:var(--r-full);min-width:24px;text-align:center}
.fmatrix-pill.p-notice.on{background:var(--p-notice);border-color:var(--p-notice);color:#fff}
.fmatrix-pill.p-compliance.on{background:var(--p-compliance);border-color:var(--p-compliance);color:#fff}
.fmatrix-pill.p-litigation.on{background:var(--p-litigation);border-color:var(--p-litigation);color:#fff}
.fmatrix-pill[data-p="all"].on{background:var(--text);border-color:var(--text);color:var(--bg)}
.fmatrix-pill.on .fmatrix-c{background:rgba(255,255,255,.22);color:#fff}
.fmatrix-pill[data-p="all"].on .fmatrix-c{background:rgba(0,0,0,.15)}

.fmatrix-scroll{overflow-x:auto;border:1px solid var(--border);border-radius:var(--r-lg);background:var(--surface);box-shadow:var(--sh-sm)}
.fmatrix-table{width:100%;border-collapse:collapse;min-width:660px}
.fmatrix-table thead th{background:var(--bg-soft);border-bottom:1px solid var(--border);padding:0;text-align:center;
  transition:background .25s}
.fmatrix-table thead th a{display:flex;flex-direction:column;align-items:center;gap:5px;padding:16px 14px;
  font-family:var(--disp);font-size:13px;font-weight:700;color:var(--text);transition:color .2s}
.fmatrix-table thead th a i{font-size:18px;transition:transform .25s}
.fmatrix-table thead th:hover a i{transform:translateY(-2px) scale(1.12)}
.fmatrix-table thead th[data-p="notice"] a i{color:var(--p-notice)}
.fmatrix-table thead th[data-p="compliance"] a i{color:var(--p-compliance)}
.fmatrix-table thead th[data-p="litigation"] a i{color:var(--p-litigation)}
.fmatrix-corner{text-align:left!important;font-family:var(--disp);font-size:12px;font-weight:700;text-transform:uppercase;
  letter-spacing:.07em;color:var(--text-3);padding:16px 20px!important;width:44%}
.fmatrix-table tbody th{text-align:left;padding:14px 20px;border-bottom:1px solid var(--border);font-weight:400}
.fmatrix-f{display:flex;align-items:center;gap:9px;flex-wrap:wrap;font-family:var(--disp);font-weight:700;font-size:14.5px;color:var(--text)}
.fmatrix-f i.bi{color:var(--blue);font-size:15px;flex-shrink:0}
.fmatrix-d{display:block;font-size:12.5px;color:var(--text-3);line-height:1.5;margin-top:3px}
.fmatrix-table tbody td{text-align:center;border-bottom:1px solid var(--border);padding:14px 10px;transition:background .25s,opacity .3s}
.fmatrix-row:last-child th,.fmatrix-row:last-child td{border-bottom:none}
.fmatrix-row{transition:opacity .3s}
.fmatrix-tick{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:50%;
  background:var(--green-pale);color:var(--green);font-size:14px;
  transition:transform .4s cubic-bezier(.34,1.56,.64,1),opacity .3s}
/* hidden only once JS has taken charge, so a failed script still shows ticks */
.fmatrix.will-draw .fmatrix-tick{transform:scale(0);opacity:0}
.fmatrix.will-draw .fmatrix-row.drawn .fmatrix-tick{transform:scale(1);opacity:1}
.fmatrix-dash{color:var(--border-2);font-size:15px}
.fmatrix-row:hover th,.fmatrix-row:hover td{background:var(--bg-soft)}
/* focus / dim states */
.fmatrix td.dim,.fmatrix thead th.dim{opacity:.28}
.fmatrix td.lit{background:var(--bg-soft)}
.fmatrix-row.off{opacity:.34}
.fmatrix.hover-notice td[data-p="notice"],.fmatrix.hover-compliance td[data-p="compliance"],.fmatrix.hover-litigation td[data-p="litigation"]{background:var(--bg-soft)}
.fmatrix-note{text-align:center;font-size:13.5px;color:var(--text-3);margin:20px auto 0;max-width:640px;line-height:1.6}
@media(max-width:700px){
  .fmatrix-corner{width:auto}
  .fmatrix-d{display:none}
  .fmatrix-table thead th a span{font-size:11px}
}
.drawer-prod a{border-color:rgba(255,255,255,.25)!important}


/* ===== floating WhatsApp ===== */
.wa-float{position:fixed;right:22px;bottom:22px;z-index:850;width:56px;height:56px;border-radius:50%;
  background:#25d366;color:#fff;display:flex;align-items:center;justify-content:center;font-size:27px;
  box-shadow:0 8px 26px -6px rgba(37,211,102,.6);transition:transform .25s,box-shadow .25s}
.wa-float:hover{transform:scale(1.07);box-shadow:0 12px 32px -6px rgba(37,211,102,.75);color:#fff}
.wa-float::after{content:'';position:absolute;inset:0;border-radius:50%;border:2px solid #25d366;animation:waPulse 2.4s ease-out infinite}
@keyframes waPulse{0%{transform:scale(1);opacity:.7}100%{transform:scale(1.5);opacity:0}}
@media(max-width:600px){.wa-float{width:50px;height:50px;font-size:24px;right:16px;bottom:16px}}

/* ===== wide-canvas guards (1800px container) ===== */





.sec-head{max-width:760px}


@media(max-width:1100px){.container,.container-fluid{padding-left:24px;padding-right:24px}}

/* ===== module cards (features hub) ===== */
.mod-c{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-xl);padding:28px;transition:all .3s}
.mod-c:hover{border-color:var(--blue);box-shadow:var(--sh-lg);transform:translateY(-5px)}
.mod-c .mi{width:54px;height:54px;border-radius:15px;display:flex;align-items:center;justify-content:center;font-size:24px;margin-bottom:17px}
.mod-c h3{font-size:19px;margin-bottom:10px}
.mod-c p{font-size:14.5px;color:var(--text-2);line-height:1.65;margin-bottom:18px;flex:1}
.mod-c .ml{font-size:13.5px;font-weight:700;color:var(--blue);display:flex;align-items:center;gap:7px;transition:gap .25s}
.mod-c:hover .ml{gap:11px}

/* ===== integrations ===== */
.intg{display:flex;gap:16px;align-items:flex-start;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);padding:24px;transition:all .3s}
.intg:hover{box-shadow:var(--sh-md);border-color:var(--border-2);transform:translateY(-3px)}
.intg .ii{width:46px;height:46px;border-radius:13px;display:flex;align-items:center;justify-content:center;font-size:21px;flex-shrink:0}
.intg h4{font-size:15.5px;margin-bottom:7px;display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.intg p{font-size:13.5px;color:var(--text-2);line-height:1.6;margin:0}
.intg .st{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;padding:3px 8px;border-radius:var(--r-full);font-family:var(--sans)}
.intg .st.on{background:var(--green-pale);color:var(--green)}
.intg .st.soon{background:var(--amber-pale);color:var(--amber)}

/* ===== long-form prose ===== */
.prose{max-width:720px;margin:0 auto}
.prose p{font-size:16.5px;color:var(--text-2);line-height:1.8;margin-bottom:20px}
.prose h2{font-size:24px;margin:38px 0 16px}
.prose h3{font-size:19px;margin:32px 0 12px}
.prose b,.prose strong{color:var(--text);font-weight:700}
.prose i,.prose em{font-style:italic}
.prose a{color:var(--blue);font-weight:600;text-decoration:underline;text-underline-offset:3px}
.prose-list{list-style:none;padding:0;margin:0 0 22px;display:flex;flex-direction:column;gap:13px}
.prose-list li{font-size:16px;color:var(--text-2);line-height:1.7;padding-left:28px;position:relative}
.prose-list li::before{content:'\F26E';font-family:'bootstrap-icons';position:absolute;left:0;top:1px;color:var(--blue);font-size:15px}
.prose-steps{list-style:none;counter-reset:ps;padding:0;margin:0 0 22px;display:flex;flex-direction:column;gap:15px}
.prose-steps li{counter-increment:ps;font-size:16px;color:var(--text-2);line-height:1.7;padding-left:40px;position:relative}
.prose-steps li::before{content:counter(ps);position:absolute;left:0;top:2px;width:27px;height:27px;border-radius:8px;background:var(--blue-pale);color:var(--blue);
  font-family:var(--disp);font-size:13px;font-weight:800;display:flex;align-items:center;justify-content:center}
.prose-note{display:flex;gap:14px;align-items:flex-start;background:var(--bg-soft);border:1px solid var(--border);border-left:3px solid var(--blue);
  border-radius:0 var(--r-sm) var(--r-sm) 0;padding:18px 20px;margin:30px 0 0;font-size:14px;color:var(--text-2);line-height:1.65}
.prose-note i{color:var(--blue);font-size:18px;flex-shrink:0;margin-top:1px}

/* ===== blog ===== */
.crumbs-light{color:var(--text-3)}
.crumbs-light a{color:var(--text-2)}
.crumbs-light a:hover{color:var(--blue)}
.crumbs-light [aria-current]{color:var(--text)}
.post{max-width:720px;margin:0 auto}
.post-kick{display:inline-block;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.09em;color:var(--blue);background:var(--blue-pale);padding:6px 14px;border-radius:var(--r-full);margin-bottom:18px}
.post h1{font-size:clamp(28px,4.2vw,42px);line-height:1.15;margin-bottom:20px}
.post-meta{display:flex;gap:22px;flex-wrap:wrap;font-size:13.5px;color:var(--text-3);padding-bottom:26px;margin-bottom:32px;border-bottom:1px solid var(--border)}
.post-meta span{display:flex;align-items:center;gap:7px}
.post-meta i{font-size:14px;color:var(--text-faint)}
.post-cta{margin-top:44px;padding:30px;background:var(--bg-soft);border:1px solid var(--border);border-radius:var(--r-xl)}
.post-cta h3{font-size:20px;margin-bottom:8px}
.post-cta p{font-size:15px;color:var(--text-2);margin-bottom:20px}
.postgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(310px,1fr));gap:22px}
.postc{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-xl);padding:28px;transition:all .3s}
.postc:hover{border-color:var(--blue);box-shadow:var(--sh-lg);transform:translateY(-5px)}
.postc .pk{align-self:flex-start;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;padding:4px 11px;border-radius:var(--r-full);margin-bottom:15px}
.postc h3{font-size:18.5px;line-height:1.3;margin-bottom:11px}
.postc p{font-size:14.5px;color:var(--text-2);line-height:1.65;margin-bottom:18px;flex:1}
.postc .pm{font-size:12.5px;color:var(--text-3);font-weight:600;display:flex;align-items:center;gap:8px}
.postc:hover .pm{color:var(--blue)}

/* ===== homepage pricing preview ===== */
.ppv{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-xl);padding:32px;display:flex;flex-direction:column;position:relative;transition:all .3s}
.ppv:hover{box-shadow:var(--sh-md);transform:translateY(-4px)}
.ppv.pop{border-color:var(--blue);box-shadow:var(--sh-lg)}
.ppv.pop::before{content:'Most Popular';position:absolute;top:-13px;left:50%;transform:translateX(-50%);background:var(--blue);color:#fff;font-size:11.5px;font-weight:700;padding:5px 16px;border-radius:var(--r-full)}
.ppv .pn{font-family:var(--disp);font-size:18px;font-weight:700;margin-bottom:5px}
.ppv .pd{font-size:13.5px;color:var(--text-3);margin-bottom:18px}
.ppv .price{font-family:var(--disp);font-size:38px;font-weight:800;line-height:1}
.ppv .price small{font-size:15px;color:var(--text-3);font-weight:500}
.ppv .per{font-size:13px;color:var(--text-3);margin:6px 0 20px}
.ppv ul{list-style:none;padding:0;margin:0 0 24px;display:flex;flex-direction:column;gap:11px;flex:1}
.ppv li{display:flex;gap:10px;font-size:14px;color:var(--text-2);align-items:flex-start}
.ppv li i{color:var(--green-l);font-size:16px;flex-shrink:0;line-height:1.4}

/* ===== 404 ===== */
.e404{font-family:var(--disp);font-size:clamp(80px,16vw,150px);font-weight:800;line-height:1;
  background:linear-gradient(120deg,var(--blue),var(--purple));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;margin-bottom:8px}

/* ===== hero trust ticks ===== */
.hero-trust i{color:var(--green-l);margin-right:6px}
.hero-trust span{display:inline-flex;align-items:center}

/* ===== pre-launch credibility bar ===== */
.cred-bar{background:var(--bg);border-bottom:1px solid var(--border);padding:26px 0}
.cred-in{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.cred{display:flex;gap:13px;align-items:flex-start}
.cred i{font-size:20px;color:var(--blue);flex-shrink:0;margin-top:2px}
.cred b{display:block;font-size:14px;font-weight:700;color:var(--text);line-height:1.35}
.cred small{display:block;font-size:12.5px;color:var(--text-3);line-height:1.45;margin-top:2px}
@media(max-width:860px){.cred-in{grid-template-columns:1fr;gap:14px}}

/* ===== pillar icons (icon font, not emoji) ===== */
.pillar .pi i,.aud .ai i{font-size:24px;line-height:1}

/* ===== WHY — numbered differentiators ===== */
.wy-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px 44px;max-width:1040px;margin:0 auto}
.wy{display:flex;gap:18px;padding:22px 0;border-bottom:1px solid var(--border);align-items:flex-start}
.wy-n{font-family:var(--disp);font-size:13px;font-weight:800;letter-spacing:.04em;color:var(--blue);background:var(--blue-pale);min-width:38px;height:38px;border-radius:11px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.wy h4{font-size:16.5px;margin-bottom:6px}
.wy p{font-size:14px;color:var(--text-2);line-height:1.6;margin:0}
@media(max-width:860px){.wy-grid{grid-template-columns:1fr;gap:0}}

/* ===== audience cards ===== */
.aud{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-xl);padding:30px;transition:all .3s}
.aud:hover{box-shadow:var(--sh-lg);transform:translateY(-4px);border-color:var(--border-2)}
.aud.aud-pop{border-color:var(--purple)}
.aud .ai{width:54px;height:54px;border-radius:15px;display:flex;align-items:center;justify-content:center;margin-bottom:17px}
.aud h4{font-size:18px;margin-bottom:10px}
.aud p{font-size:14.5px;color:var(--text-2);line-height:1.6;margin-bottom:16px}
.aud ul{list-style:none;display:flex;flex-direction:column;gap:9px;padding:0;margin:0;border-top:1px solid var(--border);padding-top:16px}
.aud li{font-size:13.5px;color:var(--text-2);display:flex;gap:9px;align-items:flex-start}
.aud li::before{content:'\F26E';font-family:'bootstrap-icons';color:var(--green-l);font-size:14px;flex-shrink:0;line-height:1.45}

/* ===== security cards ===== */
.secc{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);padding:26px;transition:all .3s}
.secc:hover{box-shadow:var(--sh-md);border-color:var(--border-2);transform:translateY(-3px)}
.secc i{font-size:24px;color:var(--blue);display:block;margin-bottom:14px}
.secc h4{font-size:16px;margin-bottom:8px}
.secc p{font-size:13.5px;color:var(--text-2);line-height:1.6;margin:0}
.sec-note{text-align:center;font-size:14.5px;color:var(--text-3);margin:38px 0 0}
.sec-note a{color:var(--blue);font-weight:600;text-decoration:underline;text-underline-offset:3px}

/* ============================================================================
   ABOUT PAGE
   ============================================================================ */
.ab-hero-in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:56px;align-items:center}
.ab-h1{font-size:clamp(30px,4.4vw,46px);line-height:1.12;margin-bottom:18px}
.ab-lead{font-size:17.5px;color:var(--text-2);line-height:1.7;max-width:520px;margin:0 0 30px}
.ab-facts{display:flex;gap:34px;flex-wrap:wrap;padding-top:24px;border-top:1px solid var(--border)}
.ab-facts b{display:block;font-family:var(--disp);font-size:20px;font-weight:800;color:var(--blue);line-height:1.15}
.ab-facts small{display:block;font-size:12px;color:var(--text-3);margin-top:3px}
.ab-hero-shot .app{box-shadow:var(--sh-lg)}
@media(max-width:960px){.ab-hero-in{grid-template-columns:1fr;gap:36px}.ab-lead{max-width:none}}

.ab-quote{display:flex;gap:20px;align-items:flex-start;max-width:900px;margin:40px auto 0;
  background:var(--surface);border:1px solid var(--border);border-left:3px solid var(--blue);
  border-radius:0 var(--r-lg) var(--r-lg) 0;padding:26px 30px}
.ab-quote > i{font-size:30px;color:var(--blue);flex-shrink:0;line-height:1}
.ab-quote p{font-size:16.5px;line-height:1.75;color:var(--text);margin:0;font-weight:500}
@media(max-width:600px){.ab-quote{padding:20px 22px;gap:14px}.ab-quote p{font-size:15px}}

.ab-beliefs{display:grid;grid-template-columns:1fr 1fr;gap:6px 44px;max-width:1000px;margin:0 auto}
.ab-belief{display:flex;gap:20px;align-items:flex-start;padding:24px 0;border-bottom:1px solid var(--border)}
.ab-bn{font-family:var(--disp);font-size:13px;font-weight:800;letter-spacing:.05em;color:var(--blue);
  background:var(--blue-pale);min-width:40px;height:40px;border-radius:12px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.ab-belief h4{font-size:17px;margin-bottom:7px}
.ab-belief p{font-size:14.5px;color:var(--text-2);line-height:1.68;margin:0}
@media(max-width:860px){.ab-beliefs{grid-template-columns:1fr;gap:0}}

.ab-co{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:48px;align-items:start;max-width:1020px;margin:0 auto}
.ab-co-l p{font-size:16px;color:var(--text-2);line-height:1.78;margin-bottom:16px}
.ab-co-l b{color:var(--text)}
.ab-co-r{background:var(--bg-soft);border:1px solid var(--border);border-radius:var(--r-lg);padding:8px 22px}
.ab-fact{display:flex;justify-content:space-between;align-items:baseline;gap:18px;padding:14px 0;border-bottom:1px solid var(--border)}
.ab-fact:last-child{border-bottom:none}
.ab-fact span{font-size:11.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--text-faint);flex-shrink:0}
.ab-fact b{font-size:13.5px;color:var(--text);text-align:right;font-weight:600;line-height:1.45}
.ab-fact b a{color:var(--blue)}
@media(max-width:900px){.ab-co{grid-template-columns:1fr;gap:32px}}
@media(max-width:520px){.ab-fact{flex-direction:column;gap:4px}.ab-fact b{text-align:left}}

/* ============================================================================
   FOOTER v2 — brand + info cards, then five link columns
   ============================================================================ */
.foot2{position:relative;overflow:hidden;background:var(--navy);color:var(--on-dark-2);padding:64px 0 30px;isolation:isolate}
.foot2-bg{position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(ellipse 60% 70% at 12% 0%, color-mix(in srgb,var(--blue) 26%,transparent), transparent 68%),
    radial-gradient(ellipse 55% 65% at 88% 8%, color-mix(in srgb,var(--purple) 22%,transparent), transparent 66%),
    linear-gradient(175deg, var(--navy-3), var(--navy) 62%)}
.foot2 .container{position:relative;z-index:1}

/* --- top band --- */
.foot2-top{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.32fr);gap:52px;align-items:start;
  padding-bottom:40px;border-bottom:1px solid rgba(255,255,255,.1)}
.foot2-brand .brand{display:inline-block;margin-bottom:20px}
.foot2-brand .brand img{height:36px}
.foot2-brand p{font-size:14px;line-height:1.7;color:var(--on-dark-2);max-width:420px;margin:0 0 22px}
.foot2-social{display:flex;gap:9px}
.foot2-social a{width:38px;height:38px;border-radius:10px;display:flex;align-items:center;justify-content:center;
  font-size:16px;color:var(--on-dark-2);background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);transition:all .22s}
.foot2-social a:hover{background:var(--blue);border-color:var(--blue);color:#fff;transform:translateY(-2px)}

/* --- info cards --- */
.foot2-cards{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.fcard2{display:block;background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.11);
  border-radius:var(--r-md);padding:16px 18px;transition:all .22s cubic-bezier(.16,1,.3,1)}
a.fcard2:hover{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.22);transform:translateY(-2px)}
.fcard2-h{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:9px}
.fcard2-h span{font-size:10px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--on-dark-3)}
.fcard2-h i{font-size:14px;color:var(--blue-l);flex-shrink:0}
.fcard2 b{display:block;font-family:var(--disp);font-size:14.5px;font-weight:700;color:#fff;line-height:1.35;margin-bottom:3px}
.fcard2 small{display:block;font-size:11.5px;color:var(--on-dark-3);line-height:1.5}

/* --- link columns --- */
.foot2-cols{display:grid;grid-template-columns:repeat(5,1fr);gap:32px;padding:38px 0 34px}
.fcol2 h5{display:flex;align-items:center;gap:8px;font-family:var(--disp);font-size:13.5px;font-weight:700;
  color:#fff;margin:0 0 16px}
.fcol2 h5 i{font-size:14px;color:var(--blue-l)}
.fcol2 a{display:block;font-size:13.5px;color:var(--on-dark-2);padding:6px 0;transition:color .18s,transform .18s}
.fcol2 a:hover{color:#fff;transform:translateX(3px)}

/* --- bottom bar --- */
.foot2-bot{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:16px;
  padding-top:24px;border-top:1px solid rgba(255,255,255,.1);font-size:12.5px;color:var(--on-dark-3)}
.foot2-cta{display:flex;gap:10px}
.foot2-cta a{font-size:12.5px;font-weight:600;color:#fff;background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.16);padding:7px 15px;border-radius:var(--r-full);transition:all .2s}
.foot2-cta a:first-child{background:var(--blue);border-color:var(--blue)}
.foot2-cta a:hover{transform:translateY(-2px)}

@media(max-width:1080px){
  .foot2-cols{grid-template-columns:repeat(3,1fr);gap:28px}
}
@media(max-width:900px){
  .foot2-top{grid-template-columns:1fr;gap:34px}
  .foot2-brand p{max-width:none}
}
@media(max-width:640px){
  .foot2{padding-top:48px}
  .foot2-cards{grid-template-columns:1fr}
  .foot2-cols{grid-template-columns:1fr 1fr;gap:22px}
  .foot2-bot{flex-direction:column;align-items:flex-start}
}

/* ============================================================================
   ACCENT COLOURS
   The whole design system reads its accent from the --blue token family, so an
   accent choice only has to redefine those five values. Each accent needs three
   blocks: light, system-dark (guarded so an explicit light choice still wins),
   and explicit dark.
   Blue is the TaxEye brand accent and the default; the rest are alternates.
   ============================================================================ */
:root[data-accent="blue"]{--blue:#2563eb;--blue-d:#1d4ed8;--blue-l:#3b82f6;--blue-pale:#e6efff;--blue-glow:rgba(37,99,235,.16)}
:root[data-accent="violet"]{--blue:#7c3aed;--blue-d:#6d28d9;--blue-l:#8b5cf6;--blue-pale:#f1e9ff;--blue-glow:rgba(124,58,237,.16)}
:root[data-accent="teal"]  {--blue:#0d9488;--blue-d:#0f766e;--blue-l:#14b8a6;--blue-pale:#d8f4f1;--blue-glow:rgba(13,148,136,.16)}
:root[data-accent="cyan"]  {--blue:#0891b2;--blue-d:#0e7490;--blue-l:#06b6d4;--blue-pale:#d7f2f8;--blue-glow:rgba(8,145,178,.16)}
:root[data-accent="emerald"]{--blue:#059669;--blue-d:#047857;--blue-l:#10b981;--blue-pale:#d6f5e6;--blue-glow:rgba(5,150,105,.16)}

@media(prefers-color-scheme:dark){
  :root[data-accent="blue"]:not([data-theme="light"]){--blue:#3b82f6;--blue-d:#2563eb;--blue-l:#60a5fa;--blue-pale:rgba(59,130,246,.16);--blue-glow:rgba(59,130,246,.26)}
  :root[data-accent="violet"]:not([data-theme="light"]){--blue:#a78bfa;--blue-d:#8b5cf6;--blue-l:#c4b5fd;--blue-pale:rgba(167,139,250,.16);--blue-glow:rgba(167,139,250,.26)}
  :root[data-accent="teal"]:not([data-theme="light"])  {--blue:#2dd4bf;--blue-d:#14b8a6;--blue-l:#5eead4;--blue-pale:rgba(45,212,191,.16);--blue-glow:rgba(45,212,191,.26)}
  :root[data-accent="cyan"]:not([data-theme="light"])  {--blue:#22d3ee;--blue-d:#06b6d4;--blue-l:#67e8f9;--blue-pale:rgba(34,211,238,.16);--blue-glow:rgba(34,211,238,.26)}
  :root[data-accent="emerald"]:not([data-theme="light"]){--blue:#34d399;--blue-d:#10b981;--blue-l:#6ee7b7;--blue-pale:rgba(52,211,153,.16);--blue-glow:rgba(52,211,153,.26)}
}
:root[data-theme="dark"][data-accent="blue"] {--blue:#3b82f6;--blue-d:#2563eb;--blue-l:#60a5fa;--blue-pale:rgba(59,130,246,.16);--blue-glow:rgba(59,130,246,.26)}
:root[data-theme="dark"][data-accent="violet"] {--blue:#a78bfa;--blue-d:#8b5cf6;--blue-l:#c4b5fd;--blue-pale:rgba(167,139,250,.16);--blue-glow:rgba(167,139,250,.26)}
:root[data-theme="dark"][data-accent="teal"]   {--blue:#2dd4bf;--blue-d:#14b8a6;--blue-l:#5eead4;--blue-pale:rgba(45,212,191,.16);--blue-glow:rgba(45,212,191,.26)}
:root[data-theme="dark"][data-accent="cyan"]   {--blue:#22d3ee;--blue-d:#06b6d4;--blue-l:#67e8f9;--blue-pale:rgba(34,211,238,.16);--blue-glow:rgba(34,211,238,.26)}
:root[data-theme="dark"][data-accent="emerald"]{--blue:#34d399;--blue-d:#10b981;--blue-l:#6ee7b7;--blue-pale:rgba(52,211,153,.16);--blue-glow:rgba(52,211,153,.26)}

/* ===== APPEARANCE PANEL ===== */
.apwrap{position:relative}
.appanel{position:absolute;top:calc(100% + 10px);right:0;width:250px;z-index:1000;
  background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);
  box-shadow:var(--sh-lg);padding:16px;opacity:0;visibility:hidden;transform:translateY(-8px);
  transition:opacity .2s cubic-bezier(.16,1,.3,1),transform .2s cubic-bezier(.16,1,.3,1),visibility .2s}
.appanel.open{opacity:1;visibility:visible;transform:none}
.ap-lab{font-family:var(--disp);font-size:10.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  color:var(--text-faint);margin-bottom:9px}
.ap-seg{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;background:var(--bg-soft);
  border:1px solid var(--border);border-radius:10px;padding:4px;margin-bottom:18px}
.ap-seg button{display:flex;flex-direction:column;align-items:center;gap:4px;font-family:inherit;
  font-size:10.5px;font-weight:700;color:var(--text-3);background:none;border:none;border-radius:7px;
  padding:8px 2px;cursor:pointer;transition:all .18s}
.ap-seg button i{font-size:14px}
.ap-seg button:hover{background:var(--surface);color:var(--text)}
.ap-seg button.on{background:var(--blue);color:#fff;box-shadow:var(--sh-blue)}
/* 3x2 rather than a flex row: six 30px swatches plus their selection rings do
   not fit the 250px panel in one line, and wrapping left emerald alone. Three
   columns also line the swatches up with the mode segment above. */
.ap-sw{display:grid;grid-template-columns:repeat(3,1fr);gap:12px 9px;justify-items:center}
.ap-sw button{width:30px;height:30px;border-radius:50%;border:2px solid transparent;cursor:pointer;
  padding:0;position:relative;transition:transform .18s cubic-bezier(.16,1,.3,1)}
.ap-sw button::after{content:'';position:absolute;inset:-4px;border-radius:50%;border:2px solid transparent;transition:border-color .18s}
.ap-sw button:hover{transform:scale(1.12)}
.ap-sw button.on::after{border-color:var(--text-3)}
.ap-sw button i{color:#fff;font-size:14px;opacity:0;transition:opacity .18s}
.ap-sw button.on i{opacity:1}
.ap-note{font-size:11px;color:var(--text-faint);line-height:1.5;margin:14px 0 0;padding-top:12px;border-top:1px solid var(--border)}
@media(max-width:600px){.appanel{right:-56px;width:230px}}

/* ============================================================================
   SECTION BACKGROUND MOTIFS
   Tax-domain line art dropped into the empty margins of sparse sections.
   Drawn with mask-image + a token colour, so they follow the theme instead of
   being baked-in grey. They sit at z-index 0 behind content and never catch
   a pointer, so nothing can overlap or become unclickable.
   ============================================================================ */
.deco{position:relative;overflow:hidden;isolation:isolate}
.deco > *{position:relative;z-index:1}
.deco::before,.deco::after{
  content:'';position:absolute;z-index:0;pointer-events:none;
  background-color:var(--blue);opacity:.05;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-size:contain;mask-size:contain;
  -webkit-mask-position:center;mask-position:center;
}
:root[data-theme="dark"] .deco::before,:root[data-theme="dark"] .deco::after{opacity:.07}
@media(prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .deco::before,
  :root:not([data-theme="light"]) .deco::after{opacity:.07}
}

/* ---- the motifs ---- */
/* a notice / return: ruled document carrying the rupee mark */
.deco-doc::before{
  width:240px;height:300px;left:-56px;top:64px;
  -webkit-mask-image:var(--m-doc);mask-image:var(--m-doc)}
/* a percentage badge — GST and TDS rates */
.deco-pct::after{
  width:210px;height:210px;right:-46px;bottom:40px;
  -webkit-mask-image:var(--m-pct);mask-image:var(--m-pct)}
/* a calculator */
.deco-calc::before{
  width:210px;height:250px;left:-44px;bottom:56px;
  -webkit-mask-image:var(--m-calc);mask-image:var(--m-calc)}
/* a deadline calendar with a tick */
.deco-cal::after{
  width:230px;height:230px;right:-50px;top:70px;
  -webkit-mask-image:var(--m-cal);mask-image:var(--m-cal)}
/* an official seal */
.deco-seal::before{
  width:220px;height:220px;left:-48px;top:90px;
  -webkit-mask-image:var(--m-seal);mask-image:var(--m-seal)}
/* a filing-trend chart */
.deco-chart::after{
  width:240px;height:210px;right:-52px;bottom:56px;
  -webkit-mask-image:var(--m-chart);mask-image:var(--m-chart)}
/* the rupee glyph itself, for wide empty bands */
.deco-rupee::after{
  width:200px;height:200px;right:-40px;top:50%;transform:translateY(-50%);
  -webkit-mask-image:var(--m-rupee);mask-image:var(--m-rupee)}

/* On narrow screens the motifs would crowd the copy, so they step aside. */
@media(max-width:1200px){
  .deco::before,.deco::after{opacity:.035}
  .deco-doc::before,.deco-calc::before,.deco-seal::before{left:-110px}
  .deco-pct::after,.deco-cal::after,.deco-chart::after,.deco-rupee::after{right:-100px}
}
@media(max-width:900px){.deco::before,.deco::after{display:none}}
@media(prefers-reduced-motion:reduce){.deco::before,.deco::after{animation:none}}

/* ---- mask sources (inline SVG, no extra requests) ---- */
:root{
--m-doc:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 96 120' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 6h46l22 22v86H14z'/%3E%3Cpath d='M60 6v22h22'/%3E%3Cpath d='M28 52h40M28 66h40M28 80h24'/%3E%3Cpath d='M52 26c-5 0-9 3-9 7s4 6 9 6 9 2 9 6-4 7-9 7'/%3E%3Cpath d='M52 22v34M43 32h18M43 40h18'/%3E%3C/svg%3E");
--m-pct:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round'%3E%3Ccircle cx='60' cy='60' r='52'/%3E%3Ccircle cx='60' cy='60' r='43' stroke-dasharray='5 7'/%3E%3Cpath d='M44 76 76 44'/%3E%3Ccircle cx='46' cy='46' r='8'/%3E%3Ccircle cx='74' cy='74' r='8'/%3E%3C/svg%3E");
--m-calc:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 96 120' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round'%3E%3Crect x='12' y='8' width='72' height='104' rx='9'/%3E%3Crect x='24' y='22' width='48' height='20' rx='4'/%3E%3Ccircle cx='30' cy='60' r='4'/%3E%3Ccircle cx='48' cy='60' r='4'/%3E%3Ccircle cx='66' cy='60' r='4'/%3E%3Ccircle cx='30' cy='78' r='4'/%3E%3Ccircle cx='48' cy='78' r='4'/%3E%3Ccircle cx='66' cy='78' r='4'/%3E%3Ccircle cx='30' cy='96' r='4'/%3E%3Ccircle cx='48' cy='96' r='4'/%3E%3Ccircle cx='66' cy='96' r='4'/%3E%3C/svg%3E");
--m-cal:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='14' y='22' width='92' height='84' rx='10'/%3E%3Cpath d='M14 46h92M38 12v20M82 12v20'/%3E%3Cpath d='M38 74l12 12 24-26'/%3E%3C/svg%3E");
--m-seal:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='60' cy='60' r='50'/%3E%3Ccircle cx='60' cy='60' r='38' stroke-dasharray='4 6'/%3E%3Cpath d='M60 40c-6 0-11 3-11 8s5 7 11 7 11 2 11 7-5 8-11 8'/%3E%3Cpath d='M60 34v42M50 46h20M50 54h20'/%3E%3C/svg%3E");
--m-chart:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 110' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 96h94M14 96V14'/%3E%3Crect x='28' y='62' width='16' height='34' rx='3'/%3E%3Crect x='54' y='44' width='16' height='52' rx='3'/%3E%3Crect x='80' y='24' width='16' height='72' rx='3'/%3E%3Cpath d='M28 40l26-14 26-12'/%3E%3C/svg%3E");
--m-rupee:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M30 18h40M30 34h40M58 18c9 0 15 7 15 16s-6 16-15 16H30l34 32'/%3E%3C/svg%3E");
}

/* ============================================================================
   PRICING — audience toggle, plan cards, add-ons, terms
   ============================================================================ */
.aud-tog{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;background:var(--bg-soft);border:1px solid var(--border);
  border-radius:var(--r-xl);padding:7px;max-width:640px;margin:0 auto 44px}
.aud-btn{flex:1 1 260px;display:flex;flex-direction:column;align-items:center;gap:3px;font-family:inherit;
  font-size:14.5px;font-weight:700;color:var(--text-2);background:none;border:none;border-radius:var(--r-lg);
  padding:14px 18px;cursor:pointer;transition:all .25s cubic-bezier(.16,1,.3,1);line-height:1.3}
.aud-btn small{font-size:11.5px;font-weight:500;color:var(--text-faint)}
.aud-btn i{font-size:16px;margin-right:6px}
.aud-btn:hover{background:var(--surface);color:var(--text)}
.aud-btn.on{background:var(--blue);color:#fff;box-shadow:var(--sh-blue)}
.aud-btn.on small{color:rgba(255,255,255,.75)}

.plangrid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;align-items:stretch}
@media(max-width:1250px){.plangrid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:680px){.plangrid{grid-template-columns:1fr}}
.plan2{position:relative;display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r-2xl);padding:28px 24px;transition:all .35s cubic-bezier(.16,1,.3,1)}
.plan2:hover{border-color:var(--blue);box-shadow:var(--sh-lg);transform:translateY(-5px)}
.plan2.plan-pop{border-color:var(--blue);box-shadow:var(--sh-lg)}
.plan-badge{position:absolute;top:-12px;left:50%;transform:translateX(-50%);font-size:10.5px;font-weight:800;
  letter-spacing:.07em;text-transform:uppercase;background:var(--blue);color:#fff;padding:5px 15px;border-radius:var(--r-full);white-space:nowrap}
.plan-h{display:flex;align-items:baseline;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-bottom:9px}
.plan-name{font-family:var(--disp);font-size:20px;font-weight:800}
.plan-band{font-size:10.5px;font-weight:700;letter-spacing:.03em;color:var(--blue);background:var(--blue-pale);
  padding:4px 10px;border-radius:var(--r-full);white-space:nowrap}
.plan-blurb{font-size:13.5px;color:var(--text-2);line-height:1.6;margin-bottom:20px;min-height:44px}
.plan-price{padding-bottom:18px;margin-bottom:18px;border-bottom:1px solid var(--border)}
.plan-amt{display:block;font-family:var(--disp);font-size:26px;font-weight:800;line-height:1.15;color:var(--text)}
.plan-amt.plan-custom{font-size:22px;color:var(--blue)}
.plan-amt small{font-size:14px;font-weight:600;color:var(--text-3)}
.plan-per{display:block;font-size:12px;color:var(--text-3);margin-top:5px}
.plan-limits{list-style:none;padding:0;margin:0 0 18px;display:flex;flex-direction:column;gap:10px}
.plan-limits li{display:flex;align-items:center;gap:10px;font-size:13.5px;color:var(--text-2)}
.plan-limits i{font-size:15px;color:var(--text-faint);width:18px;flex-shrink:0}
.plan-limits b{color:var(--text);font-weight:700}
.plan-mods{display:flex;flex-direction:column;gap:7px;padding:14px 0;margin-bottom:18px;border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.plan-mod{display:flex;align-items:center;gap:8px;font-size:12.5px;font-weight:600;color:var(--text-2)}
.plan-mod i{font-size:13px;color:var(--green-l)}
.plan-cta{display:flex;flex-direction:column;gap:9px;margin-top:auto}
.plan-onboard{display:block;font-size:11.5px;color:var(--text-faint);text-align:center;margin-top:13px;line-height:1.5}
.plan-onboard b{color:var(--text-3)}

.pfact{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-xl);padding:26px;transition:all .3s}
.pfact:hover{box-shadow:var(--sh-md);border-color:var(--border-2);transform:translateY(-3px)}
.pfact-i{width:48px;height:48px;border-radius:14px;background:var(--blue-pale);color:var(--blue);
  display:flex;align-items:center;justify-content:center;font-size:21px;margin-bottom:16px}
.pfact h4{font-size:16.5px;margin-bottom:9px}
.pfact p{font-size:14px;color:var(--text-2);line-height:1.65;margin:0}

.addon-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;max-width:1000px;margin:0 auto}
@media(max-width:900px){.addon-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.addon-grid{grid-template-columns:1fr}}
.addon{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);padding:22px;text-align:center;transition:all .3s}
.addon:hover{border-color:var(--blue);box-shadow:var(--sh-md);transform:translateY(-3px)}
.addon-i{width:42px;height:42px;border-radius:12px;background:var(--bg-soft);color:var(--blue);
  display:flex;align-items:center;justify-content:center;font-size:18px;margin:0 auto 13px}
.addon b{display:block;font-family:var(--disp);font-size:15px;margin-bottom:5px}
.addon small{display:block;font-size:12.5px;color:var(--text-3);line-height:1.5}

.terms{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;max-width:1060px;margin:0 auto}
@media(max-width:900px){.terms{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.terms{grid-template-columns:1fr}}
.term{display:flex;gap:13px;align-items:flex-start;background:var(--surface);border:1px solid var(--border);
  border-left:3px solid var(--blue);border-radius:0 var(--r-md) var(--r-md) 0;padding:18px 20px}
.term>i{font-size:19px;color:var(--blue);flex-shrink:0;margin-top:2px}
.term b{display:block;font-family:var(--disp);font-size:14.5px;margin-bottom:4px}
.term span{font-size:12.5px;color:var(--text-2);line-height:1.55}

/* ===== oversized footer wordmark ===== */
.footer{position:relative;overflow:hidden}
.foot-mark{font-family:var(--disp);font-weight:800;letter-spacing:-.02em;line-height:.78;text-align:center;
  font-size:clamp(64px,15.5vw,230px);
  color:transparent;-webkit-text-stroke:0;
  background:linear-gradient(180deg,rgba(255,255,255,.085),rgba(255,255,255,.012));
  -webkit-background-clip:text;background-clip:text;
  margin:26px 0 -6px;user-select:none;pointer-events:none;white-space:nowrap;overflow:hidden}
.foot-meta{display:flex;gap:20px;flex-wrap:wrap;align-items:center;font-size:12.5px;color:var(--on-dark-3)}
.foot-meta i{font-size:11px;margin-right:5px;opacity:.8}
.foot-ok i{font-size:7px;color:var(--green-l)}
@media(max-width:760px){.foot-meta{gap:12px;font-size:11.5px}}

/* ===== footer legal links ===== */
.foot-legal{display:flex;gap:18px;flex-wrap:wrap}
.foot-legal a{color:var(--on-dark-3)}
.foot-legal a:hover{color:#fff;text-decoration:underline}

/* ===== FIX: before/after keeps its meaning on mobile =====
   Stacking to one column dropped the Before/After labels, leaving three
   unlabelled lines per row. Re-label each cell inline below 640px. */
@media(max-width:640px){
  .baw-head{display:none}
  .baw-row{padding:6px 0}
  .baw-cat{font-family:var(--disp);font-weight:700;font-size:14.5px;padding-bottom:4px}
  .baw-before,.baw-after{position:relative;padding-left:74px!important;align-items:flex-start}
  .baw-before::before,.baw-after::before{content:attr(data-l);position:absolute;left:15px;top:15px;font-size:10px;font-weight:800;letter-spacing:.06em;text-transform:uppercase}
  .baw-before::before{color:var(--text-faint)}
  .baw-after::before{color:var(--blue)}
}

/* ===== FIX: constellation tile labels were 9.5px (unreadable) ===== */
.cst-tile{width:82px}
.cst-tile .tl{font-size:11px;line-height:1.3}

/* ===== booking step 3: "what happens next" ===== */
.after .nx{display:flex;gap:11px;align-items:flex-start;font-size:13px;color:var(--on-dark);margin-bottom:11px;line-height:1.55}
.after .nx b{color:#fff}
.after .nxn{flex-shrink:0;width:21px;height:21px;border-radius:50%;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.2);display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;color:#fff;margin-top:1px}
.after .nxf{font-size:12px;color:var(--on-dark-3);margin:16px 0 0;padding-top:14px;border-top:1px solid rgba(255,255,255,.12)}

/* ===== APPEARANCE CONTROLS INSIDE THE MOBILE DRAWER =====
   Mirrors #apPanel. The drawer sits on a dark surface, so the labels and the
   mode segment need their own colours rather than the panel's light ones. */
.drawer-ap{margin-top:26px;padding-top:22px;border-top:1px solid var(--dark-border)}
.drawer-ap .ap-lab{color:rgba(255,255,255,.5);margin-bottom:10px}
.drawer-ap .ap-lab + .ap-sw{margin-bottom:4px}
.drawer-ap .ap-seg{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.1);margin-bottom:20px}
.drawer-ap .ap-seg button{color:rgba(255,255,255,.62)}
.drawer-ap .ap-seg button:hover{background:rgba(255,255,255,.08);color:#fff}
.drawer-ap .ap-seg button.on{background:var(--blue);color:#fff}
.drawer-ap .ap-sw{justify-items:start;grid-template-columns:repeat(6,auto);gap:0 14px}
.drawer-ap .ap-sw button.on::after{border-color:rgba(255,255,255,.75)}
@media(max-width:420px){
  .drawer-ap .ap-sw{grid-template-columns:repeat(3,auto);gap:14px}
}

/* ===== PHONE HEADER =====
   Must stay last: the @media(max-width:960px) block earlier re-declares .nav-in
   at the same specificity, so anything above it loses.

   At 375px the desktop bar does not fit — logo 150 + CTA 139 + burger 42 + gaps
   overruns by ~50px. With two `auto` grid tracks the brand absorbed the whole
   shortfall and the logo collapsed to 98px. So: pin the brand track to
   max-content, move the theme button into the drawer, and trim the rest. */
@media(max-width:600px){
  .nav .themebtn,.nav .appanel{display:none}
  .nav-in{grid-template-columns:max-content auto;padding:0 16px;gap:12px}
  .nav .brand img{height:26px}
  .nav-right{gap:8px}
  .nav-right .btn-sm{padding:9px 14px;font-size:13.5px}
}
@media(max-width:360px){
  .nav .brand img{height:23px}
  .nav-right .btn-sm{padding:9px 11px;font-size:13px}
}


/* ===================================================================
   HOW IT WORKS — six pinned steps.

   .story-rail owns the scroll distance (one viewport per step) and the
   stage sticks across it. The triggers are absolutely positioned over
   the rail; as normal siblings they stacked before the stage and you
   scrolled six blank viewports before meeting the diagram.

   Scene content is rendered by renderStory() in app.js. Nothing here
   depends on JS for legibility — without it the pin is dropped and all
   six steps are shown stacked (see the :not(.ready) rules at the end).
   =================================================================== */
.story{position:relative;background:var(--bg-soft);border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.story-rail{position:relative;height:600vh}
.story-trig{position:absolute;left:0;right:0;height:16.6667%;pointer-events:none}
.story-trig:nth-of-type(1){top:0}
.story-trig:nth-of-type(2){top:16.6667%}
.story-trig:nth-of-type(3){top:33.3333%}
.story-trig:nth-of-type(4){top:50%}
.story-trig:nth-of-type(5){top:66.6667%}
.story-trig:nth-of-type(6){top:83.3333%}
.story-stage{position:sticky;top:0;height:100vh;min-height:660px;display:flex;align-items:stretch;overflow:hidden}
/* padding-top/bottom only — a `padding` shorthand zeroes the horizontal
   padding .container supplies, and the head then sits flush to both edges. */
.story-in{display:flex;flex-direction:column;gap:clamp(12px,2vh,22px);width:100%;height:100%;
  padding-top:clamp(92px,11vh,112px);padding-bottom:clamp(22px,3vh,34px)}

/* --- head + regime scope --- */
.story-head{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap}

/* --- numbered step rail --- */
.story-steps{position:relative;display:grid;grid-template-columns:repeat(6,1fr);gap:6px;
  padding-top:8px}
.story-steps-line{position:absolute;left:0;right:0;top:26px;height:2px;background:var(--border-2);z-index:0}
.story-steps-line i{display:block;height:100%;background:var(--blue);transform-origin:left;transform:scaleX(0);
  transition:transform .45s cubic-bezier(.4,0,.2,1)}
.story-steps button{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:8px;
  background:none;border:0;padding:0;cursor:pointer;font-family:inherit}
.story-steps button b{width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-family:var(--disp);font-size:14px;font-weight:800;background:var(--surface);color:var(--text-3);
  border:2px solid var(--border-2);transition:all .3s}
.story-steps button span{font-size:12px;font-weight:700;color:var(--text-3);transition:color .3s;white-space:nowrap}
.story-steps button.done b{background:var(--blue);border-color:var(--blue);color:#fff}
.story-steps button[aria-selected="true"] b{background:var(--blue);border-color:var(--blue);color:#fff;
  box-shadow:0 0 0 6px var(--blue-glow)}
.story-steps button[aria-selected="true"] span{color:var(--text)}

/* --- canvas: scenes stack, one visible --- */
.story-canvas{position:relative;flex:1 1 auto;min-height:250px;display:flex;align-items:center;justify-content:center}
.scn{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  opacity:0;visibility:hidden;transform:translateY(16px);
  transition:opacity .45s ease,transform .55s cubic-bezier(.2,.7,.2,1),visibility .45s}
.scn.on{opacity:1;visibility:visible;transform:none}

/* --- captions --- */
.story-caps{position:relative;min-height:2.6em;text-align:center}
.story-cap{position:absolute;inset:0;margin:0;font-family:var(--disp);font-weight:800;
  font-size:clamp(19px,2.8vw,33px);letter-spacing:-.02em;line-height:1.22;color:var(--text);
  opacity:0;transform:translateY(10px);transition:opacity .4s ease,transform .45s ease}
.story-cap.on{opacity:1;transform:none}

/* ===== 1 CONNECT ===== */
.sc-connect{display:flex;flex-direction:column;align-items:center;gap:22px;width:100%}
.cn-portals{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;width:min(880px,100%)}
.cn-p{display:flex;flex-direction:column;align-items:center;gap:6px;padding:16px 12px;border-radius:14px;
  background:var(--surface);border:1px solid var(--border-2);box-shadow:var(--sh-sm);text-align:center;
  opacity:0;transform:translateY(10px);transition:opacity .4s,transform .45s cubic-bezier(.2,.7,.2,1),border-color .4s}
.cn-p.on{opacity:1;transform:none;border-color:var(--green)}
.cn-p i{font-size:22px;color:var(--blue);transition:color .4s}
.cn-p.on i{color:var(--green)}
.cn-p b{font-family:var(--disp);font-size:13px;font-weight:800;color:var(--text);line-height:1.25}
.cn-p small{font-size:11px;font-weight:700;color:var(--text-3);opacity:0;transition:opacity .4s .2s}
.cn-p.on small{opacity:1;color:var(--green)}
/* Four arrows converging on the hub. A faint base line keeps each route
   continuous while the accent copy runs a travelling dash over it, so the
   direction of flow is legible even before the arrowheads are noticed. */
.cn-wires{display:block;width:min(880px,100%);height:auto;margin:-6px auto -8px;color:var(--border-2)}
.cn-base{opacity:.85}
.cn-flow{color:var(--blue);stroke-dasharray:7 9;stroke-dashoffset:0;opacity:0;transition:opacity .5s ease}
.scn.on .cn-flow{opacity:1;transition-delay:.9s;animation:cnflow 1.1s linear 1s infinite}
@keyframes cnflow{to{stroke-dashoffset:-32}}
.cn-mid{display:flex;flex-direction:column;align-items:center;gap:0}
/* the single centred stem is the phone fallback, where the portals stack and a
   four-way convergence would point at nothing */
.cn-beam{display:none;width:2px;height:34px;background:var(--border-2);position:relative;overflow:hidden}
.cn-beam i{position:absolute;left:0;right:0;height:14px;top:-14px;background:var(--blue)}
.scn.on .cn-beam i{animation:cnbeam 1.5s linear .6s infinite}
@keyframes cnbeam{to{top:34px}}
.cn-hub{display:flex;align-items:center;gap:11px;padding:13px 22px;border-radius:16px;background:var(--surface);
  border:1px solid var(--blue);box-shadow:0 0 0 6px var(--blue-glow)}
.cn-hub img{width:30px;height:auto}
.cn-hub b{font-family:var(--disp);font-size:17px;font-weight:800;color:var(--text)}
.cn-note{margin:0;max-width:60ch;text-align:center;font-size:14.5px;color:var(--text-2)}

/* ===== 2 SYNC ===== */
.sc-sync{width:min(920px,100%);display:flex;flex-direction:column;gap:12px}
.sy-head{display:flex;align-items:center;justify-content:space-between;gap:14px}
.sy-live{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;font-weight:700;color:var(--text-3)}
.sy-live i{width:8px;height:8px;border-radius:50%;background:var(--green)}
.scn.on .sy-live i{animation:sypulse 1.3s ease-in-out infinite}
@keyframes sypulse{0%,100%{box-shadow:0 0 0 0 rgba(5,150,105,.5)}50%{box-shadow:0 0 0 6px rgba(5,150,105,0)}}
.sy-count{font-size:13px;color:var(--text-3)}
.sy-count b{font-family:var(--disp);font-size:19px;font-weight:800;color:var(--blue);font-variant-numeric:tabular-nums}
.sy-list{display:flex;flex-direction:column;gap:5px;max-height:min(46vh,392px);overflow:hidden;
  -webkit-mask-image:linear-gradient(180deg,#000 84%,transparent);mask-image:linear-gradient(180deg,#000 84%,transparent)}
.sy-row{display:grid;grid-template-columns:auto 1fr auto auto;align-items:center;gap:13px;
  padding:9px 14px;border-radius:11px;background:var(--surface);border:1px solid var(--border);
  opacity:.42;transition:opacity .35s,border-color .35s,background .35s}
.sy-row.on{opacity:1;border-color:var(--green)}
.sy-k{min-width:60px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px;font-weight:700;
  padding:3px 7px;border-radius:6px;background:var(--blue-pale);color:var(--blue);text-align:center}
.sy-n b{display:block;font-family:var(--disp);font-size:13.5px;font-weight:800;color:var(--text);line-height:1.3}
.sy-n small{display:block;font-size:11px;color:var(--text-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sy-c{font-size:11.5px;font-weight:700;color:var(--text-3);white-space:nowrap}
.sy-tick{width:20px;height:20px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:var(--bg-soft);color:transparent;font-size:11px;transition:background .3s,color .3s}
.sy-row.on .sy-tick{background:var(--green);color:#fff}

/* ===== 3 DETECT ===== */
.sc-notice{width:min(1000px,100%);display:flex;flex-direction:column;gap:16px}
.nt-head{text-align:center}
.nt-head h3{font-family:var(--disp);font-size:clamp(18px,2.1vw,25px);font-weight:800;letter-spacing:-.02em;
  color:var(--text);margin:0 0 8px}
.nt-head p{margin:0 auto;max-width:70ch;font-size:14px;color:var(--text-2)}
.nt-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;
  max-height:min(40vh,340px);overflow:hidden;
  -webkit-mask-image:linear-gradient(180deg,#000 86%,transparent);mask-image:linear-gradient(180deg,#000 86%,transparent)}
.nt-i{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:11px;padding:10px 13px;
  border-radius:11px;background:var(--surface);border:1px solid var(--border);border-left:3px solid var(--border-2);
  opacity:0;transform:translateX(-10px);transition:opacity .35s,transform .4s cubic-bezier(.2,.7,.2,1)}
.nt-i.on{opacity:1;transform:none}
.nt-i.sev-high{border-left-color:#dc2626}
.nt-i.sev-warn{border-left-color:#d97706}
.nt-i.sev-ok{border-left-color:var(--green)}
.nt-s{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11.5px;font-weight:700;color:var(--text);
  min-width:78px}
.nt-n{font-size:12.5px;color:var(--text-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nt-d{font-size:11px;font-weight:700;color:var(--text-3);white-space:nowrap}
.sev-high .nt-d{color:#dc2626}
.sev-warn .nt-d{color:#d97706}

/* ===== 4 RECONCILE ===== */
.sc-recon{width:min(940px,100%);display:flex;flex-direction:column;gap:18px}
.rc-head{text-align:center}
.rc-head h3{font-family:var(--disp);font-size:clamp(18px,2.1vw,25px);font-weight:800;letter-spacing:-.02em;
  color:var(--text);margin:0 0 8px}
.rc-head p{margin:0 auto;max-width:66ch;font-size:14px;color:var(--text-2)}
.rc-cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.rc-c{padding:18px 16px;border-radius:15px;background:var(--surface);border:1px solid var(--border-2);
  box-shadow:var(--sh-sm);text-align:center;
  opacity:0;transform:translateY(12px) scale(.97);transition:opacity .4s,transform .5s cubic-bezier(.2,.7,.2,1)}
.rc-c.on{opacity:1;transform:none}
.rc-c.hi{border-color:#d97706;box-shadow:0 0 0 4px rgba(217,119,6,.12)}
.rc-c span{display:block;font-size:10.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  color:var(--text-3);margin-bottom:8px}
.rc-c b{display:block;font-family:var(--disp);font-size:clamp(19px,2.3vw,27px);font-weight:800;color:var(--text);
  letter-spacing:-.02em}
.rc-c.hi b{color:#d97706}
.rc-c small{display:block;margin-top:6px;font-size:11.5px;color:var(--text-3)}
.rc-gap{display:grid;grid-template-columns:auto auto 1fr;align-items:center;gap:8px 16px;padding:16px 20px;
  border-radius:15px;background:var(--green-pale);border:1px solid var(--green);
  opacity:0;transform:translateY(10px);transition:opacity .4s,transform .45s cubic-bezier(.2,.7,.2,1)}
.rc-gap.on{opacity:1;transform:none}
.rc-gl{font-size:10.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#047857}
.rc-gv{font-family:var(--disp);font-size:clamp(19px,2.2vw,25px);font-weight:800;color:#047857;letter-spacing:-.02em}
.rc-gn{grid-column:1/-1;margin:0;font-size:13.5px;color:var(--text-2);line-height:1.5}

/* ===== 5 DRAFT ===== */
.sc-draft{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:clamp(22px,3.5vw,44px);
  align-items:center;width:100%}
.dr-doc{background:var(--surface);border:1px solid var(--border-2);border-radius:16px;box-shadow:var(--sh-lg);
  overflow:hidden}
.dr-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 16px;
  background:var(--blue-pale);border-bottom:1px solid var(--border)}
.dr-t{display:inline-flex;align-items:center;gap:7px;font-family:var(--disp);font-size:13px;font-weight:800;
  color:var(--blue)}
.dr-badge{font-size:10.5px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;padding:4px 10px;
  border-radius:99px;background:var(--surface);border:1px solid var(--blue);color:var(--blue)}
.dr-body{position:relative;padding:16px 18px;max-height:min(30vh,230px);overflow:hidden}
.dr-type{margin:0;font-size:13.5px;line-height:1.65;color:var(--text-2);white-space:pre-wrap}
.dr-caret{display:inline-block;width:2px;height:15px;background:var(--blue);vertical-align:text-bottom;
  margin-left:2px;animation:drcaret 1s step-end infinite}
.dr-doc.done .dr-caret{display:none}
@keyframes drcaret{50%{opacity:0}}
.dr-cite{display:flex;flex-wrap:wrap;gap:6px;padding:12px 16px;border-top:1px solid var(--border);
  background:var(--bg-soft)}
.dr-chip{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:700;padding:5px 10px;
  border-radius:99px;background:var(--surface);border:1px solid var(--border-2);color:var(--text-3);
  opacity:0;transform:translateY(5px);transition:opacity .3s,transform .35s}
.dr-doc.done .dr-chip{opacity:1;transform:none}
.dr-doc.done .dr-chip:nth-child(2){transition-delay:.08s}
.dr-doc.done .dr-chip:nth-child(3){transition-delay:.16s}
.dr-doc.done .dr-chip:nth-child(4){transition-delay:.24s}
.dr-chip i{color:var(--blue);font-size:13px}
.dr-side h3{font-family:var(--disp);font-size:clamp(18px,2.1vw,25px);font-weight:800;letter-spacing:-.02em;
  color:var(--text);margin:0 0 10px}
.dr-side p{font-size:14.5px;color:var(--text-2);margin:0 0 16px}
.dr-ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px}
.dr-ul li{display:flex;align-items:flex-start;gap:9px;font-size:14px;color:var(--text-2)}
.dr-ul i{color:var(--green);font-size:15px;margin-top:2px}

/* ===== 6 FILE ===== */
.sc-file{width:min(900px,100%);display:flex;flex-direction:column;align-items:center;gap:18px}
.fl-flow{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;width:100%}
.fl-s{display:flex;flex-direction:column;align-items:center;gap:7px;padding:16px 12px;border-radius:14px;
  background:var(--surface);border:1px solid var(--border-2);box-shadow:var(--sh-sm);text-align:center;
  opacity:0;transform:translateY(12px);transition:opacity .4s,transform .45s cubic-bezier(.2,.7,.2,1),border-color .4s}
.fl-s.on{opacity:1;transform:none;border-color:var(--green)}
.fl-si{width:38px;height:38px;border-radius:11px;display:flex;align-items:center;justify-content:center;
  background:var(--blue-pale);color:var(--blue);transition:background .4s,color .4s}
.fl-s.on .fl-si{background:var(--green-pale);color:#047857}
.fl-si i{font-size:17px}
.fl-s b{font-family:var(--disp);font-size:13px;font-weight:800;color:var(--text);line-height:1.3}
.fl-s small{font-size:11px;color:var(--text-3);line-height:1.35}
.fl-ack{width:100%;border-radius:16px;background:var(--surface);border:1px solid var(--green);
  box-shadow:var(--sh-lg);overflow:hidden;
  opacity:0;transform:translateY(12px);transition:opacity .45s,transform .5s cubic-bezier(.2,.7,.2,1)}
.fl-ack.on{opacity:1;transform:none}
.fl-ack-h{display:flex;align-items:center;gap:9px;padding:13px 18px;background:var(--green-pale);
  border-bottom:1px solid var(--border);color:#047857}
.fl-ack-h b{font-family:var(--disp);font-size:14px;font-weight:800}
.fl-kv{display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
.fl-r{padding:13px 18px;border-right:1px solid var(--border)}
.fl-r:last-child{border-right:0}
.fl-r span{display:block;font-size:10px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  color:var(--text-3);margin-bottom:5px}
.fl-r b{font-family:var(--disp);font-size:13.5px;font-weight:800;color:var(--text)}
.fl-r .mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px;letter-spacing:-.02em}
.fl-note{margin:0;max-width:66ch;text-align:center;font-size:14px;color:var(--text-2)}

/* ===== dark mode: the hard-coded amber / green / red pairs above ===== */
@media(prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .rc-c.hi{border-color:#fbbf24;box-shadow:0 0 0 4px rgba(251,191,36,.14)}
  :root:not([data-theme="light"]) .rc-c.hi b,
  :root:not([data-theme="light"]) .sev-warn .nt-d{color:#fbbf24}
  :root:not([data-theme="light"]) .nt-i.sev-warn{border-left-color:#fbbf24}
  :root:not([data-theme="light"]) .sev-high .nt-d{color:#f87171}
  :root:not([data-theme="light"]) .nt-i.sev-high{border-left-color:#f87171}
  :root:not([data-theme="light"]) .rc-gl,:root:not([data-theme="light"]) .rc-gv,
  :root:not([data-theme="light"]) .fl-ack-h,:root:not([data-theme="light"]) .fl-s.on .fl-si{color:var(--green-l,#34d399)}
}
:root[data-theme="dark"] .rc-c.hi{border-color:#fbbf24;box-shadow:0 0 0 4px rgba(251,191,36,.14)}
:root[data-theme="dark"] .rc-c.hi b,:root[data-theme="dark"] .sev-warn .nt-d{color:#fbbf24}
:root[data-theme="dark"] .nt-i.sev-warn{border-left-color:#fbbf24}
:root[data-theme="dark"] .sev-high .nt-d{color:#f87171}
:root[data-theme="dark"] .nt-i.sev-high{border-left-color:#f87171}
:root[data-theme="dark"] .rc-gl,:root[data-theme="dark"] .rc-gv,
:root[data-theme="dark"] .fl-ack-h,:root[data-theme="dark"] .fl-s.on .fl-si{color:var(--green-l,#34d399)}

/* ===== responsive ===== */
@media(max-width:1080px){
  .sc-draft{grid-template-columns:1fr;gap:18px}
  .dr-body{max-height:150px}
  .dr-side h3{font-size:19px}
  .dr-side p{margin-bottom:10px}
  .dr-side .dr-ul{display:none}
  .fl-kv{grid-template-columns:repeat(2,minmax(0,1fr))}
  .fl-r:nth-child(2n){border-right:0}
  .fl-r:nth-child(-n+2){border-bottom:1px solid var(--border)}
}
@media(max-width:900px){
  /* Pinning a tall stage on a phone traps the scroll, and six steps cannot
     share one viewport — so drop the pin, stack the steps and let the rail
     (or the timer) pick one at a time. */
  .story-rail{height:auto}
  .story-stage{position:static;height:auto;min-height:0}
  .story-in{height:auto;padding-top:70px;padding-bottom:70px}
  .story-trig{display:none}
  .story-canvas{min-height:440px}
  .scn{position:relative;inset:auto;opacity:1;visibility:visible;transform:none;display:none}
  .scn.on{display:flex}
  .story-steps{grid-template-columns:repeat(6,1fr);gap:2px}
  .story-steps button span{display:none}
  .story-steps-line{top:18px}
  .story-steps button b{width:30px;height:30px;font-size:12.5px}
  .cn-portals{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cn-wires{display:none}
  .cn-beam{display:block}
  .sy-row{grid-template-columns:auto 1fr auto;gap:9px}
  .sy-tick{display:none}
  .sy-n small{white-space:normal}
  .sy-list{max-height:330px}
  .nt-list{grid-template-columns:1fr;max-height:300px}
  .rc-cols{grid-template-columns:1fr;gap:8px}
  .rc-c{display:grid;grid-template-columns:1fr auto;align-items:center;text-align:left;padding:12px 14px}
  .rc-c span{margin-bottom:2px}
  .rc-c b{font-size:19px}
  .rc-c small{grid-column:1;margin-top:0}
  .rc-gap{grid-template-columns:1fr auto}
  .fl-flow{grid-template-columns:1fr;gap:7px}
  .fl-s{flex-direction:row;text-align:left;gap:11px;padding:11px 13px}
  .fl-s b{font-size:12.5px}
}
@media(max-width:560px){
  .story-head{justify-content:center}
  .cn-portals{grid-template-columns:1fr}
  .fl-kv{grid-template-columns:1fr}
  .fl-r{border-right:0;border-bottom:1px solid var(--border)}
  .fl-r:last-child{border-bottom:0}
  .story-canvas{min-height:480px}
}

/* No JS: drop the pin and show every step stacked, so the whole explainer
   stays readable and nothing depends on an animation firing. */
.story:not(.ready) .story-rail{height:auto}
.story:not(.ready) .story-stage{position:static;height:auto;min-height:0;overflow:visible}
.story:not(.ready) .story-in{height:auto;padding-top:70px;padding-bottom:70px}
.story:not(.ready) .story-canvas{min-height:0;display:block}
.story:not(.ready) .story-trig{display:none}
.story:not(.ready) .scn{position:relative;inset:auto;opacity:1;visibility:visible;transform:none;
  display:flex;margin-bottom:54px}
.story:not(.ready) .story-caps{position:static;min-height:0;display:flex;flex-direction:column;gap:14px}
.story:not(.ready) .story-cap{position:relative;inset:auto;opacity:1;transform:none}
.story:not(.ready) .story-steps{display:none}
/* every list is JS-rendered, so with scripts off the section carries only its
   headings — hide the empty shells rather than showing blank cards */
.story:not(.ready) .story-canvas .scn{display:none}
.story:not(.ready) .story-canvas .scn:first-child{display:flex}

@media(prefers-reduced-motion:reduce){
  .story-rail{height:auto}
  .story-stage{position:static;height:auto;min-height:0}
  .story-in{height:auto;padding-top:70px;padding-bottom:70px}
  .story-trig{display:none}
  .scn,.story-cap,.cn-p,.sy-row,.nt-i,.rc-c,.rc-gap,.fl-s,.fl-ack,.dr-chip{transition-duration:.01ms}
  .cn-beam i,.dr-caret{animation:none}
  .scn.on .sy-live i{animation:none}
  .scn.on .cn-flow{animation:none}
  .story-steps-line i{transition:none}
}

/* ===== BEYOND THE REPLY — litigation + team chat =====
   Two equal panels, each with a small live-looking mock. Named .byd* so it does
   not collide with the .ladder / .lad rungs used on the product pages. */
.beyond{background:var(--bg)}
.byd-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px;margin-top:34px}
.byd{display:flex;flex-direction:column;padding:26px;border-radius:20px;background:var(--surface);
  border:1px solid var(--border-2);box-shadow:var(--sh-md,var(--sh-sm))}
.byd-top{display:flex;gap:15px;align-items:flex-start}
.byd-i{flex:0 0 auto;width:46px;height:46px;border-radius:13px;display:flex;align-items:center;
  justify-content:center;background:var(--blue-pale);color:var(--blue)}
.byd-i-alt{background:var(--purple-pale,var(--blue-pale));color:var(--purple,var(--blue))}
.byd-i i{font-size:21px}
.byd-top h3{font-family:var(--disp);font-size:clamp(18px,1.9vw,22px);font-weight:800;letter-spacing:-.02em;
  color:var(--text);margin:2px 0 8px}
.byd-top p{margin:0;font-size:14.5px;color:var(--text-2)}
.byd-mock{margin:20px 0;padding:14px;border-radius:14px;background:var(--bg-soft);border:1px solid var(--border)}
.byd-ul{list-style:none;margin:0 0 18px;padding:0;display:flex;flex-direction:column;gap:9px}
.byd-ul li{display:flex;align-items:flex-start;gap:9px;font-size:14px;color:var(--text-2)}
.byd-ul i{color:var(--green);font-size:15px;margin-top:2px}
.byd-link{margin-top:auto;align-self:flex-start;display:inline-flex;align-items:center;gap:7px;
  font-size:14px;font-weight:700;color:var(--blue)}
.byd-link:hover{gap:11px}
.byd-link i{transition:transform .2s}

/* --- appeal ladder mock --- */
.lad{display:flex;flex-direction:column}
.lad-r{position:relative;display:grid;grid-template-columns:1fr auto;align-items:center;
  gap:2px 12px;padding:9px 0 9px 26px}
.lad-r b{grid-column:1;grid-row:1;font-family:var(--disp);font-size:13.5px;font-weight:800;color:var(--text)}
.lad-r small{grid-column:1;grid-row:2;font-size:11.5px;color:var(--text-3)}
/* Column and row both explicit: .lad-s has a definite row, and grid places
   definite-row items before auto-placed ones — so without grid-column it
   claimed column 1 and pushed the title across into column 2. */
.lad-s{grid-column:2;grid-row:1/3;justify-self:end;align-self:center;
  font-style:normal;font-size:10.5px;font-weight:800;letter-spacing:.04em;
  text-transform:uppercase;padding:4px 9px;border-radius:99px;background:var(--surface);
  border:1px solid var(--border-2);color:var(--text-3);white-space:nowrap}
.lad-d{position:absolute;left:4px;top:15px;width:9px;height:9px;border-radius:50%;
  background:var(--surface);border:2px solid var(--border-2)}
/* the spine, drawn between consecutive dots */
.lad-r:not(:last-child)::before{content:'';position:absolute;left:8px;top:24px;bottom:-9px;
  width:2px;background:var(--border-2)}
.lad-r.done .lad-d{background:var(--green);border-color:var(--green)}
.lad-r.done:not(:last-child)::before{background:var(--green)}
.lad-r.done .lad-s{color:#047857;border-color:var(--green);background:var(--green-pale)}
.lad-r.live .lad-d{background:var(--blue);border-color:var(--blue);box-shadow:0 0 0 4px var(--blue-glow)}
.lad-r.live .lad-s{color:var(--blue);border-color:var(--blue);background:var(--blue-pale)}

/* --- chat mock --- */
.chat{display:flex;flex-direction:column;gap:10px}
.chat-h{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding-bottom:10px;
  border-bottom:1px solid var(--border)}
.chat-tag{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:800;
  padding:4px 10px;border-radius:99px;background:var(--blue-pale);color:var(--blue)}
.chat-sub{font-size:11.5px;font-weight:700;color:var(--text-3)}
.chat-m{display:flex;gap:9px;align-items:flex-start}
.chat-av{flex:0 0 auto;width:26px;height:26px;border-radius:50%;display:flex;align-items:center;
  justify-content:center;font-family:var(--disp);font-size:10px;font-weight:800;color:#fff}
.av1,.av3{background:var(--blue)}
.av2{background:var(--purple,var(--blue-d))}
.chat-b{flex:1 1 auto;min-width:0;padding:9px 12px;border-radius:12px;background:var(--surface);
  border:1px solid var(--border)}
.chat-b b{display:block;font-family:var(--disp);font-size:11.5px;font-weight:800;color:var(--text);
  margin-bottom:3px}
.chat-b p{margin:0;font-size:12.5px;color:var(--text-2);line-height:1.5}
.chat-at{font-weight:700;color:var(--blue)}
.chat-att{display:inline-flex;align-items:center;gap:6px;margin-top:8px;font-size:11px;font-weight:700;
  padding:5px 9px;border-radius:8px;background:var(--bg-soft);border:1px solid var(--border-2);
  color:var(--blue)}

@media(max-width:900px){
  .byd-grid{grid-template-columns:1fr;gap:16px}
  .byd{padding:20px}
  .byd-mock{margin:16px 0}
}

/* ===== NOTICE ARTWORK =====
   Replaces the stock AI/legal photography. Built from the site's own tokens, so
   it inherits the accent the visitor picked and both themes, and it is drawn
   rather than fetched — no image weight and no licensing question.

   The composition says what the About page says: the notice sits at the centre
   as a first-class object, and the practice orbits it. The ring turns; each
   satellite counter-turns at the same period so its icon stays upright. */
.nart{position:relative;width:100%;max-width:560px;margin-inline:auto;aspect-ratio:1/1;
  border-radius:24px;overflow:hidden;background:var(--surface);border:1px solid var(--border-2);
  box-shadow:var(--sh-lg);isolation:isolate}
/* faint graph paper, faded out towards the edges */
.nart::before{content:'';position:absolute;inset:0;z-index:0;
  background-image:linear-gradient(var(--border) 1px,transparent 1px),
                   linear-gradient(90deg,var(--border) 1px,transparent 1px);
  background-size:38px 38px;
  -webkit-mask-image:radial-gradient(circle at 50% 50%,#000 38%,transparent 78%);
  mask-image:radial-gradient(circle at 50% 50%,#000 38%,transparent 78%)}
/* Kept deliberately weak. At opacity .5 the two glows bloomed across the whole
   panel and flattened the ring and graph paper into a lilac blob. */
.nart-glow{position:absolute;z-index:0;border-radius:50%;filter:blur(58px);opacity:.28}
.nart-glow.g1{width:52%;aspect-ratio:1;left:-16%;top:-14%;background:var(--blue)}
.nart-glow.g2{width:44%;aspect-ratio:1;right:-14%;bottom:-16%;background:var(--purple,var(--blue-l))}

/* --- orbit --- */
/* a static inner ring gives the orbit something to sit against */
.nart::after{content:'';position:absolute;z-index:0;top:50%;left:50%;width:48%;aspect-ratio:1;
  transform:translate(-50%,-50%);border-radius:50%;border:1px solid var(--border);pointer-events:none}
.nart-slim::after{display:none}
.nart-ring{position:absolute;z-index:1;top:50%;left:50%;width:74%;aspect-ratio:1;
  transform:translate(-50%,-50%);border-radius:50%;animation:nartspin 30s linear infinite}
/* the dashed circle carries its own opacity — putting it on .nart-ring faded
   the satellites too, since they are its children */
.nart-ring::before{content:'';position:absolute;inset:0;border-radius:50%;
  border:1.5px dashed var(--blue);opacity:.36}
@keyframes nartspin{to{transform:translate(-50%,-50%) rotate(360deg)}}
/* Pinned to the ring's four cardinal points with top/left rather than a polar
   transform: a percentage inside translateY() resolves against the satellite's
   own height, not the ring, so `translateY(-37%)` moved each one 16px instead
   of 206px and they all piled up in the middle. */
.nart-sat{position:absolute;width:44px;height:44px;transform:translate(-50%,-50%)}
.nart-sat.s1{top:0;left:50%}
.nart-sat.s2{top:50%;left:100%}
.nart-sat.s3{top:100%;left:50%}
.nart-sat.s4{top:50%;left:0}
.nart-sat-in{display:flex;align-items:center;justify-content:center;width:100%;height:100%;
  border-radius:13px;background:var(--surface);border:1px solid var(--border-2);
  box-shadow:var(--sh-sm);color:var(--blue);
  animation:nartback 30s linear infinite}
/* undoes the ring's spin so each icon stays upright all the way round */
@keyframes nartback{from{transform:rotate(0)}to{transform:rotate(-360deg)}}
.nart-sat-in i{font-size:18px}

/* --- the notice at the centre --- */
.nart-card{position:absolute;z-index:2;top:50%;left:50%;width:min(258px,62%);
  transform:translate(-50%,-50%);padding:15px 16px 13px;border-radius:15px;
  background:var(--surface);border:1px solid var(--border-2);box-shadow:var(--sh-lg);
  animation:nartfloat 6s ease-in-out infinite;overflow:hidden}
@keyframes nartfloat{0%,100%{transform:translate(-50%,-50%)}50%{transform:translate(-50%,calc(-50% - 8px))}}
.nart-h{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px}
.nart-badge{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px;font-weight:700;
  padding:4px 9px;border-radius:7px;background:var(--blue-pale);color:var(--blue);white-space:nowrap}
.nart-ay{font-size:10.5px;font-weight:700;color:var(--text-3);white-space:nowrap}
.nart-lines{display:flex;flex-direction:column;gap:7px;margin-bottom:14px}
.nart-lines i{display:block;height:6px;border-radius:99px;background:var(--border-2)}
.nart-lines i:nth-child(1){width:100%}
.nart-lines i:nth-child(2){width:86%}
.nart-lines i:nth-child(3){width:94%}
.nart-lines i:nth-child(4){width:58%}
.nart-foot{display:flex;align-items:center;gap:7px;padding-top:11px;border-top:1px solid var(--border)}
.nart-dot{width:7px;height:7px;border-radius:50%;background:var(--green);flex:0 0 auto;
  animation:nartpulse 1.8s ease-in-out infinite}
@keyframes nartpulse{0%,100%{box-shadow:0 0 0 0 rgba(5,150,105,.55)}50%{box-shadow:0 0 0 6px rgba(5,150,105,0)}}
.nart-foot span{font-size:11.5px;font-weight:700;color:var(--text-2)}
.nart-foot b{font-family:var(--disp);font-weight:800;color:var(--blue)}
/* a light sweep reads the notice, then rests */
.nart-scan{position:absolute;left:0;right:0;height:44%;top:-44%;pointer-events:none;
  background:linear-gradient(180deg,transparent,var(--blue-glow),transparent);
  animation:nartscan 5.5s ease-in-out 1s infinite}
@keyframes nartscan{0%{top:-44%}55%,100%{top:104%}}

/* --- slim variant: article banners --- */
/* Article banner: sits between the byline and the first paragraph */
.post-art{margin:26px 0 34px}
.nart-slim{max-width:100%;aspect-ratio:1000/280;border-radius:18px}
.nart-slim .nart-ring{display:none}
.nart-slim::before{-webkit-mask-image:radial-gradient(ellipse at 50% 50%,#000 34%,transparent 82%);
  mask-image:radial-gradient(ellipse at 50% 50%,#000 34%,transparent 82%)}
.nart-slim .nart-card{width:min(300px,64%);animation-duration:7s}
.nart-slim .nart-glow.g1{width:34%;left:2%;top:-30%}
.nart-slim .nart-glow.g2{width:30%;right:2%;bottom:-34%}
/* two supporting chips, one either side, only where there is room */
.nart-chip{position:absolute;z-index:2;display:none;align-items:center;gap:7px;padding:9px 13px;
  border-radius:11px;background:var(--surface);border:1px solid var(--border-2);box-shadow:var(--sh-sm);
  font-size:11.5px;font-weight:700;color:var(--text-2);white-space:nowrap}
.nart-chip i{color:var(--blue);font-size:14px}
.nart-slim .nart-chip{display:flex}
.nart-chip.c1{left:5%;top:26%}
.nart-chip.c2{right:5%;bottom:26%}

@media(max-width:900px){
  .nart{max-width:420px;border-radius:18px}
  .nart-sat{width:38px;height:38px}
  .nart-sat-in i{font-size:16px}
  .nart-slim{aspect-ratio:1000/360}
  .post-art{margin:20px 0 26px}
  .nart-slim .nart-chip{display:none}
  .nart-slim .nart-card{width:min(280px,80%)}
}
@media(prefers-reduced-motion:reduce){
  .nart-ring,.nart-sat-in,.nart-card,.nart-dot{animation:none}
  .nart-card{transform:translate(-50%,-50%)}
  .nart-sat-in{transform:none}
  .nart-scan{display:none}
}

/* Footer tagline, set as text because the lockup's own tagline is illegible at
   36px and is cropped out of taxeye-logo-white.png. */
.foot2-brand .foot2-tag{margin:10px 0 14px;font-family:var(--disp);font-size:11.5px;font-weight:700;
  letter-spacing:.09em;text-transform:uppercase;color:#a5b4fc}
/* The footer ground is dark in both themes, so this is a fixed light indigo:
   --blue-l resolves to #6366f1 in light mode, which is only 4.2:1 here. */

/* ===================================================================
   STORY / BEYOND — working states.

   Every step now runs pending -> working -> done instead of a single fade,
   so the walkthrough reads like a machine doing work rather than a list
   appearing. `.busy` is the working state, `.on` / `.ok` the finished one.
   =================================================================== */

/* a shared 12px spinner, used by the portal handshake, the file steps and
   the draft badge */
.spin{display:inline-block;width:11px;height:11px;border-radius:50%;
  border:1.5px solid currentColor;border-top-color:transparent;
  animation:spin360 .7s linear infinite;vertical-align:-1px}
@keyframes spin360{to{transform:rotate(360deg)}}

/* --- regime scope chip (replaced the Income Tax / GST toggle) --- */
.story-head .story-scope{display:inline-flex;align-items:center;gap:8px;padding:8px 16px;border-radius:var(--r-full);
  background:var(--blue-pale);color:var(--blue);font-size:13px;font-weight:800;
  border:1px solid var(--blue)}
.story-scope i{font-size:14px}

/* ===== 1 CONNECT — handshake ===== */
.cn-st{position:relative;display:block;min-height:1.35em;width:100%}
.cn-st .s0,.cn-st .s1{display:inline-flex;align-items:center;gap:5px;
  position:absolute;left:50%;transform:translateX(-50%);white-space:nowrap;transition:opacity .3s}
.cn-st .s0{color:var(--text-3)}
.cn-st .s1{opacity:0;color:var(--green)}
.cn-p.ok .cn-st .s0{opacity:0}
.cn-p.ok .cn-st .s1{opacity:1}
/* the card only greens once the handshake actually completes */
.cn-p.on{opacity:1;transform:none}
.cn-p.ok{border-color:var(--green)}
.cn-p.ok i.bi{color:var(--green)}
.cn-p:not(.ok) i.bi{color:var(--blue)}

/* ===== 2 SYNC — per-row fetch ===== */
.sy-prog{display:block;height:3px;border-radius:99px;background:var(--border-2);overflow:hidden}
.sy-prog i{display:block;height:100%;width:0;background:var(--blue);border-radius:99px;
  transition:width .35s cubic-bezier(.4,0,.2,1)}
.sy-row{position:relative}
.sy-c{position:relative;display:inline-block;min-width:74px;text-align:right}
.sy-c .c0,.sy-c .c1{transition:opacity .25s}
.sy-c .c0{display:inline-flex;align-items:center;gap:4px;opacity:0;color:var(--blue)}
.sy-c .c0::after{content:'';width:3px;height:3px;border-radius:50%;background:currentColor;
  box-shadow:6px 0 0 currentColor,12px 0 0 currentColor;animation:syDots 1s steps(4) infinite}
@keyframes syDots{0%{opacity:.25}50%{opacity:1}100%{opacity:.25}}
.sy-c .c1{position:absolute;right:0;top:0;opacity:0}
.sy-row.busy{opacity:1;border-color:var(--blue)}
.sy-row.busy .sy-c .c0{opacity:1}
.sy-row.on .sy-c .c1{opacity:1}
/* a light wipe travels the row while it is being fetched */
.sy-bar{position:absolute;inset:0;border-radius:11px;overflow:hidden;pointer-events:none;opacity:0;
  transition:opacity .2s}
.sy-row.busy .sy-bar{opacity:1}
.sy-bar i{position:absolute;top:0;bottom:0;width:38%;left:-38%;
  background:linear-gradient(90deg,transparent,var(--blue-glow),transparent);
  animation:syWipe 1s linear infinite}
@keyframes syWipe{to{left:100%}}

/* ===== 3 DETECT — live open count ===== */
.nt-count{display:inline-flex;align-items:center;gap:8px;margin-top:12px;padding:6px 14px;
  border-radius:var(--r-full);background:var(--surface);border:1px solid var(--border-2);
  font-size:12.5px;font-weight:700;color:var(--text-3)}
.nt-count b{font-family:var(--disp);font-size:15px;font-weight:800;color:var(--blue);
  font-variant-numeric:tabular-nums}
.nt-count .dot{width:7px;height:7px;border-radius:50%;background:var(--blue)}
.scn.on .nt-count .dot{animation:ntPulse 1.4s ease-in-out infinite}
@keyframes ntPulse{0%,100%{box-shadow:0 0 0 0 var(--blue-glow)}50%{box-shadow:0 0 0 6px transparent}}

/* ===== 4 RECONCILE — counting figures ===== */
.rc-v{font-variant-numeric:tabular-nums}
.rc-gv{font-variant-numeric:tabular-nums}
/* the flagged column lifts once its figure has landed */
.rc-c.hi.on{transform:translateY(-4px)}

/* ===== 5 DRAFT — status flips when the typing finishes ===== */
.dr-badge{position:relative;display:inline-block;min-width:104px;text-align:center}
.dr-badge .b0,.dr-badge .b1{display:inline-flex;align-items:center;gap:5px;transition:opacity .3s;
  white-space:nowrap}
.dr-badge .b1{position:absolute;left:0;right:0;justify-content:center;opacity:0}
.dr-doc.done .dr-badge{border-color:var(--green);color:var(--green)}
.dr-doc.done .dr-badge .b0{opacity:0}
.dr-doc.done .dr-badge .b1{opacity:1}

/* ===== 6 FILE — spinner then tick ===== */
.fl-si{position:relative}
.fl-si .spin{position:absolute;opacity:0;transition:opacity .2s;color:var(--blue)}
.fl-si i.bi{transition:opacity .2s}
.fl-s.busy{opacity:1;transform:none;border-color:var(--blue)}
.fl-s.busy .fl-si .spin{opacity:1}
.fl-s.busy .fl-si i.bi{opacity:0}
.fl-w,.fl-d{position:relative;transition:opacity .25s}
.fl-d{opacity:0}
.fl-s.busy .fl-w{opacity:1;color:var(--blue)}
.fl-s.on .fl-w{display:none}
.fl-s.on .fl-d{opacity:1}
.fl-s:not(.busy):not(.on) .fl-w{opacity:.55}

/* ===================================================================
   BEYOND THE REPLY — the ladder climbs, the thread arrives
   =================================================================== */
/* rungs start hidden and are revealed a forum at a time */
.lad-r{opacity:0;transform:translateX(-8px);
  transition:opacity .4s ease,transform .45s cubic-bezier(.2,.7,.2,1)}
.lad-r.show{opacity:1;transform:none}
.lad-r.live .lad-d{animation:ladPulse 1.9s ease-in-out infinite}
@keyframes ladPulse{0%,100%{box-shadow:0 0 0 3px var(--blue-glow)}50%{box-shadow:0 0 0 8px transparent}}
/* the spine draws down into the next rung rather than just appearing */
.lad-r:not(:last-child)::before{transform-origin:top;transform:scaleY(0);
  transition:transform .34s ease .12s}
.lad-r.show:not(:last-child)::before{transform:scaleY(1)}

/* messages arrive one at a time */
.chat-m{opacity:0;transform:translateY(8px);
  transition:opacity .35s ease,transform .4s cubic-bezier(.2,.7,.2,1)}
.chat-m.show{opacity:1;transform:none}
/* typing indicator — three bouncing dots in a bubble */
.chat-typing{display:none;align-items:flex-start;gap:9px}
.chat-typing.on{display:flex}
.chat-typing .chat-av{opacity:.55}
.chat-tb{display:inline-flex;align-items:center;gap:4px;padding:11px 13px;border-radius:12px;
  background:var(--surface);border:1px solid var(--border)}
.chat-tb i{width:5px;height:5px;border-radius:50%;background:var(--text-3);
  animation:chatBounce 1.1s ease-in-out infinite}
.chat-tb i:nth-child(2){animation-delay:.14s}
.chat-tb i:nth-child(3){animation-delay:.28s}
@keyframes chatBounce{0%,60%,100%{transform:translateY(0);opacity:.45}30%{transform:translateY(-4px);opacity:1}}

@media(prefers-reduced-motion:reduce){
  .spin,.sy-bar i,.chat-tb i,.scn.on .nt-count .dot,.lad-r.live .lad-d{animation:none}
  .lad-r,.chat-m{opacity:1;transform:none;transition:none}
  .lad-r:not(:last-child)::before{transform:scaleY(1);transition:none}
  .sy-prog i{transition:none}
  .chat-typing{display:none!important}
}

/* ===================================================================
   PLATFORM TOUR — drawn app frame

   Replaces the 15 redacted screenshots with one frame (chrome + left rail +
   top bar) and four body layouts filled from UIDATA. Every colour is a token,
   so the screens follow the visitor's accent and theme; nothing here is an
   image, so there is no client data to redact and nothing to download.
   =================================================================== */
.ptour-stage{position:relative}
.ptour-stage::before{content:'';position:absolute;inset:-10% -6%;z-index:-1;pointer-events:none;
  background:radial-gradient(60% 70% at 50% 30%,var(--blue-glow),transparent 70%)}
.uiapp{border-radius:16px;overflow:hidden;background:var(--surface);border:1px solid var(--border-2);
  box-shadow:var(--sh-lg);container-type:inline-size;
  transition:transform .4s cubic-bezier(.16,1,.3,1),box-shadow .4s cubic-bezier(.16,1,.3,1)}
.uiapp:hover{transform:translateY(-4px);box-shadow:0 32px 64px -20px rgba(11,18,32,.28)}
.ua-bar{display:flex;align-items:center;gap:6px;padding:9px 13px;background:var(--bg-soft);
  border-bottom:1px solid var(--border)}
.ua-bar > i{width:9px;height:9px;border-radius:50%;flex:0 0 auto}
.ua-url{flex:1 1 auto;margin-left:9px;padding:4px 12px;border-radius:7px;background:var(--surface);
  border:1px solid var(--border);font-size:10.5px;color:var(--text-3);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* fixed height so the frame reads as an app window; the fifteen-item rail
   scrolls inside it rather than stretching the whole frame to 840px */
.ua-body{display:grid;grid-template-columns:92px 1fr;height:428px}

/* --- left module rail --- */
.ua-rail{padding:9px 6px;background:var(--bg-soft);border-right:1px solid var(--border);
  display:flex;flex-direction:column;gap:2px;overflow:hidden}
.ua-r{display:flex;flex-direction:column;align-items:center;gap:3px;padding:7px 3px;border-radius:9px;
  color:var(--text-3);transition:background .25s,color .25s;flex:0 0 auto}
.ua-r i{font-size:14px}
.ua-r b{font-size:8px;font-weight:700;text-align:center;line-height:1.2;letter-spacing:.01em}
.ua-r.on{background:var(--blue);color:#fff;box-shadow:var(--sh-blue)}

/* --- top bar --- */
.ua-main{display:flex;flex-direction:column;min-width:0}
.ua-top{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:9px 13px;
  border-bottom:1px solid var(--border)}
.ua-crumb{font-size:10.5px;color:var(--text-3);white-space:nowrap}
.ua-crumb b{font-family:var(--disp);font-size:11.5px;font-weight:800;color:var(--text)}
.ua-crumb i{font-size:8px;margin:0 3px}
.ua-tools{display:flex;align-items:center;gap:7px;min-width:0}
.ua-search{display:none;align-items:center;gap:6px;padding:4px 11px;border-radius:7px;background:var(--bg-soft);
  border:1px solid var(--border);font-size:10px;color:var(--text-3);white-space:nowrap}
.ua-av{width:22px;height:22px;border-radius:50%;background:var(--purple,var(--blue));color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:9px;font-weight:800;flex:0 0 auto}
@container (min-width:720px){ .ua-search{display:flex} }

/* --- shared chip --- */
.ua-chip{display:inline-flex;align-items:center;gap:5px;padding:4px 10px;border-radius:99px;
  background:var(--surface);border:1px solid var(--border-2);font-size:10px;font-weight:700;
  color:var(--text-3);white-space:nowrap}
.ua-chip.on{background:var(--blue-pale);border-color:var(--blue);color:var(--blue)}
.ua-chip.ok{border-color:var(--green);color:var(--green)}
.ua-chip b{font-family:var(--disp);font-weight:800;color:var(--text)}

/* --- view + arrival --- */
.ua-view{flex:1 1 auto;padding:13px;display:flex;flex-direction:column;gap:11px;min-width:0;overflow:hidden}
.ua-view.lay-stats{gap:9px}
.ua-view .ua-qt,.ua-view .ua-ban,.ua-view .ua-pill,.ua-view .ua-card,.ua-view .ua-chip,
.ua-view .ua-tr,.ua-view .ua-li,.ua-view .ua-det,.ua-view .ua-sgi,.ua-view .ua-tgi,
.ua-view .ua-chi,.ua-view .ua-m{opacity:0;transform:translateY(6px);
  transition:opacity .32s ease,transform .36s cubic-bezier(.2,.7,.2,1)}
.ua-view .in{opacity:1;transform:none}
.num{font-variant-numeric:tabular-nums}

/* --- tone colours, shared by tiles and cards --- */
.t-red{color:#dc2626}.t-amber{color:#d97706}.t-green{color:var(--green)}
.t-blue{color:var(--blue)}.t-grey{color:var(--text-2)}

/* --- stats layout --- */
.ua-q{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}
@container (min-width:640px){ .ua-q{grid-template-columns:repeat(6,minmax(0,1fr))} }
.ua-qt{padding:8px 9px;border-radius:9px;background:var(--surface);border:1px solid var(--border);
  border-left:3px solid currentColor;min-width:0}
.ua-qt b{display:block;font-family:var(--disp);font-size:16px;font-weight:800;line-height:1.1}
.ua-qt span{display:block;margin-top:2px;font-size:9px;font-weight:700;color:var(--text-2);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ua-qt small{display:block;font-size:8px;color:var(--text-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ua-ban{display:flex;align-items:center;gap:9px;padding:9px 13px;border-radius:10px;
  background:linear-gradient(100deg,var(--blue),var(--blue-d));color:#fff}
.ua-ban i{font-size:14px}
.ua-ban span{flex:1 1 auto;font-size:11px;font-weight:700}
.ua-ban em{font-style:normal;font-size:9.5px;font-weight:800;padding:4px 11px;border-radius:99px;
  background:rgba(255,255,255,.2)}
.ua-pills{display:flex;flex-wrap:wrap;gap:6px}
.ua-pill{display:inline-flex;align-items:center;gap:6px;padding:5px 11px;border-radius:99px;
  background:var(--bg-soft);border:1px solid var(--border);font-size:10px;font-weight:700;color:var(--text-3)}
.ua-pill b{font-family:var(--disp);font-size:12px;font-weight:800;color:var(--text)}
.ua-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}
@container (min-width:640px){ .ua-cards{grid-template-columns:repeat(4,minmax(0,1fr))} }
.ua-card{padding:10px 11px;border-radius:10px;background:var(--surface);border:1px solid var(--border);min-width:0}
.ua-cl{display:block;font-size:9px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  color:var(--text-3);margin-bottom:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ua-card b{display:block;font-family:var(--disp);font-size:19px;font-weight:800;line-height:1.1}
.ua-card small{display:block;margin-top:4px;font-size:8.5px;color:var(--text-3)}
.ua-card em{display:block;font-style:normal;font-size:9.5px;font-weight:700;color:var(--text-2)}

/* --- table layout --- */
.ua-tb{display:flex;align-items:center;gap:6px}
.ua-tb-sp{flex:1 1 auto}
.ua-tbl{border:1px solid var(--border);border-radius:10px;overflow:hidden}
.ua-th,.ua-tr{display:grid;grid-template-columns:1.5fr 1fr .8fr 1fr .7fr .5fr;gap:8px;
  padding:8px 11px;align-items:center}
.ua-th{background:var(--bg-soft);border-bottom:1px solid var(--border)}
.ua-th span{font-size:8.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--text-3)}
.ua-tr{border-bottom:1px solid var(--border)}
.ua-tr:last-child{border-bottom:0}
.ua-tr span{font-size:10px;color:var(--text-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ua-tr span.k{font-family:var(--disp);font-weight:800;color:var(--text)}
.ua-dot{display:inline-block;width:8px;height:8px;border-radius:50%}
.d-ok{background:var(--green)}.d-warn{background:#d97706}.d-high{background:#dc2626}
.ua-foot{margin:0;font-size:9.5px;color:var(--text-3)}

/* --- split layout (notice hub) --- */
.ua-buck{display:flex;flex-wrap:wrap;gap:6px}
.ua-split{display:grid;grid-template-columns:1fr;gap:9px;flex:1 1 auto;min-height:0}
@container (min-width:600px){ .ua-split{grid-template-columns:1.1fr 1fr} }
.ua-list{display:flex;flex-direction:column;gap:5px}
.ua-li{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:9px;padding:8px 11px;
  border-radius:9px;background:var(--surface);border:1px solid var(--border);border-left:3px solid var(--border-2)}
.ua-li.sev-high{border-left-color:#dc2626}
.ua-li.sev-warn{border-left-color:#d97706}
.ua-li b{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:10px;color:var(--text)}
.ua-li span{font-size:10px;color:var(--text-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ua-li em{font-style:normal;font-size:9.5px;font-weight:800;color:var(--text-3)}
.ua-det{padding:12px;border-radius:10px;background:var(--bg-soft);border:1px solid var(--border-2)}
.ua-det > b{display:block;font-family:var(--disp);font-size:12px;font-weight:800;color:var(--text);margin-bottom:9px}
.ua-dr{display:flex;justify-content:space-between;gap:9px;padding:4px 0;font-size:10px}
.ua-dr span{color:var(--text-3)}
.ua-dr i{font-style:normal;font-weight:700;color:var(--text)}
.ua-det-cta{display:inline-flex;align-items:center;gap:6px;margin-top:10px;padding:6px 11px;border-radius:8px;
  background:var(--blue-pale);color:var(--blue);font-size:9.5px;font-weight:800}

/* --- settings layout --- */
.ua-sg{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}
@container (min-width:640px){ .ua-sg{grid-template-columns:repeat(3,minmax(0,1fr))} }
.ua-sgi{padding:10px;border-radius:10px;background:var(--surface);border:1px solid var(--border)}
.ua-sgi > span{display:inline-flex;width:26px;height:26px;border-radius:8px;align-items:center;
  justify-content:center;background:var(--blue-pale);color:var(--blue);margin-bottom:6px}
.ua-sgi > span i{font-size:12px}
.ua-sgi b{display:block;font-family:var(--disp);font-size:11px;font-weight:800;color:var(--text)}
.ua-sgi small{display:block;margin-top:2px;font-size:8.5px;color:var(--text-3);line-height:1.35}
.ua-tg{display:flex;flex-direction:column;gap:5px}
.ua-tgi{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 11px;
  border-radius:9px;background:var(--surface);border:1px solid var(--border);font-size:10px;color:var(--text-2)}
.ua-tgi em{width:26px;height:15px;border-radius:99px;background:var(--border-2);position:relative;flex:0 0 auto}
.ua-tgi em::after{content:'';position:absolute;top:2px;left:2px;width:11px;height:11px;border-radius:50%;
  background:var(--surface);transition:transform .25s}
.ua-tgi em.on{background:var(--green)}
.ua-tgi em.on::after{transform:translateX(11px)}

/* --- chat layout --- */
.ua-chat{display:grid;grid-template-columns:1fr;gap:9px;flex:1 1 auto}
@container (min-width:600px){ .ua-chat{grid-template-columns:.8fr 1.4fr} }
.ua-ch{display:flex;flex-direction:column;gap:4px}
.ua-chi{padding:8px 10px;border-radius:9px;border:1px solid var(--border);background:var(--surface);position:relative}
.ua-chi.on{border-color:var(--blue);background:var(--blue-pale)}
.ua-chi b{display:block;font-family:var(--disp);font-size:10.5px;font-weight:800;color:var(--text)}
.ua-chi small{display:block;font-size:9px;color:var(--text-3)}
.ua-chi em{position:absolute;right:9px;top:9px;min-width:15px;height:15px;border-radius:99px;background:var(--blue);
  color:#fff;font-style:normal;font-size:8.5px;font-weight:800;display:flex;align-items:center;justify-content:center}
.ua-th2{display:flex;flex-direction:column;gap:7px;padding:10px;border-radius:10px;background:var(--bg-soft);
  border:1px solid var(--border)}
.ua-m{display:flex;gap:7px;align-items:flex-start}
.ua-mav{width:20px;height:20px;border-radius:50%;background:var(--blue);color:#fff;flex:0 0 auto;
  display:flex;align-items:center;justify-content:center;font-size:8px;font-weight:800}
.ua-mb{flex:1 1 auto;min-width:0;padding:7px 10px;border-radius:10px;background:var(--surface);
  border:1px solid var(--border)}
.ua-mb b{display:block;font-size:9.5px;font-weight:800;color:var(--text);margin-bottom:2px}
.ua-mb p{margin:0;font-size:10px;color:var(--text-2);line-height:1.45}
.ua-matt{display:inline-flex;align-items:center;gap:5px;margin-top:6px;padding:4px 8px;border-radius:7px;
  background:var(--bg-soft);border:1px solid var(--border-2);font-size:8.5px;font-weight:700;color:var(--blue)}

/* --- narrow: the rail becomes a horizontal tab strip. It cannot simply be
   hidden — the rail IS the module picker, so hiding it left no way to move
   between modules on a phone. --- */
@container (max-width:520px){
  .ua-body{grid-template-columns:1fr;grid-template-rows:auto minmax(0,1fr)}
  .ua-rail{flex-direction:row;overflow-x:auto;overflow-y:hidden;gap:4px;padding:7px;
    border-right:0;border-bottom:1px solid var(--border);scroll-snap-type:x proximity}
  .ua-rail::-webkit-scrollbar{height:3px;width:auto}
  button.ua-r{width:auto;min-width:64px;flex:0 0 auto;scroll-snap-align:start;padding:6px 8px}
  .ua-r b{font-size:7.5px;white-space:nowrap}
  .ua-q{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ua-cards{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ua-th,.ua-tr{grid-template-columns:1.4fr 1fr .8fr .5fr}
  .ua-th span:nth-child(n+4):not(:last-child),.ua-tr span:nth-child(n+4):not(:last-child){display:none}
}
@media(max-width:640px){
  .ua-body{height:360px}
}
@media(prefers-reduced-motion:reduce){
  .ua-view .ua-qt,.ua-view .ua-ban,.ua-view .ua-pill,.ua-view .ua-card,.ua-view .ua-chip,
  .ua-view .ua-tr,.ua-view .ua-li,.ua-view .ua-det,.ua-view .ua-sgi,.ua-view .ua-tgi,
  .ua-view .ua-chi,.ua-view .ua-m{opacity:1;transform:none;transition:none}
  .ua-tgi em::after{transition:none}
}

/* The app sidebar doubles as the module picker, so it needs button resets, a
   focus ring, and its own scroll — fifteen modules are taller than the frame. */
.ua-rail{overflow-y:auto;scrollbar-width:thin}
.ua-rail::-webkit-scrollbar{width:4px}
.ua-rail::-webkit-scrollbar-thumb{background:var(--border-2);border-radius:99px}
button.ua-r{width:100%;border:0;background:none;font-family:inherit;cursor:pointer}
button.ua-r:hover:not(.on){background:var(--surface);color:var(--text-2)}
button.ua-r:focus-visible{outline:2px solid var(--blue);outline-offset:-2px}
.ptour-stage{width:100%}