/* ============================================================================
   EXOedge design system — "Blue Gray Professional" (SR 2026-10-08)
   Reference: the Canva deck "Blue Gray Professional Data Analysis Presentation".
   Loaded LAST on every page (css/exo-ui.css). It remaps the design tokens each page
   already declares and restyles the shared components; bespoke pages are handled by
   body-class sections. The launcher (index.html) and js/catalog.js are generated by
   scripts/build_catalog.py; js/nav.js builds the category mega-menu on every page.

   Palette (sampled from the deck)
     --x-navy   #1E3A5F  titles, primary buttons, dark pills, footer
     --x-blue   #2E5BBA  accent pills, links, active states, solid icon accents
     --x-sky    #6CA6FF  light icon accents, accent bars
     --x-slate  #36404A  body text, icon strokes
     --x-canvas #E2E3E5  page background        --x-panel #F4F5F7  panels and cards
   Type
     display  Montserrat 800, tight tracking — 84 hero / 44 page title / 40 section / 22 panel
     body     Inter 400/500/600/700 — 16 body, 18 lead, 14 UI, 12.5 captions
   Shape   flat light panels on the grey canvas (4–6px radius), fully round pills,
           numbered circles inside pills, a light-blue accent bar on hover (Key Findings slide)
   ========================================================================== */

:root{
  --x-navy:#1E3A5F; --x-navy-2:#162E4D; --x-blue:#2E5BBA; --x-blue-2:#264EA3; --x-sky:#6CA6FF;
  --x-slate:#36404A; --x-canvas:#E2E3E5; --x-panel:#F4F5F7; --x-white:#FFFFFF;
  --x-line:#D5D9DF; --x-line-2:#E6E9ED; --x-text-2:#4A5563; --x-text-3:#7B8592;
  --x-blue-soft:#E8EEFA; --x-ring:rgba(46,91,186,.22);
  --x-shadow-1:0 1px 2px rgba(16,24,40,.06),0 1px 3px rgba(16,24,40,.08);
  --x-shadow-2:0 18px 32px -16px rgba(16,24,40,.28),0 2px 6px rgba(16,24,40,.06);
  --x-display:'Montserrat','Helvetica Neue',Arial,sans-serif;
  --x-sans:'Inter','Helvetica Neue',Helvetica,Arial,sans-serif;
  --x-ico-bg:var(--x-panel);

  /* aliases used by the page sections below */
  --tf-blue:var(--x-blue); --tf-blue-deep:var(--x-navy); --tf-blue-soft:var(--x-blue-soft); --tf-blue-ring:var(--x-ring);
  --tf-black:var(--x-navy); --tf-ink:var(--x-slate); --tf-grey:var(--x-canvas); --tf-grey-2:#EDEFF2; --tf-white:#FFFFFF;
  --tf-line:var(--x-line); --tf-line-2:var(--x-line-2); --tf-text-2:var(--x-text-2); --tf-text-3:var(--x-text-3);
  --tf-serif:var(--x-display); --tf-sans:var(--x-sans);
  --tf-r-card:6px; --tf-r-input:6px; --tf-r-pill:999px;

  /* remap of the tokens the tool pages already declare inline */
  --font:var(--x-sans); --serif:var(--x-display); --sans:var(--x-sans); --mono:var(--x-sans);
  --blue-900:var(--x-navy); --blue-800:var(--x-navy-2); --blue-500:var(--x-blue);
  --ochre:var(--x-blue); --gold:var(--x-sky);
  --ink:var(--x-slate); --ink-2:var(--x-text-2); --ink-3:var(--x-text-3);
  --line:var(--x-line); --line-2:var(--x-line-2);
  --paper:#FFFFFF; --tint:var(--x-canvas); --blue-tint:var(--x-blue-soft);
  --green:#1E8E4F; --green-tint:#E6F5EC; --red:#C62F3D; --red-tint:#FCECEE; --amber:#8F5E00; --amber-tint:#FBF1D8;
  --violet:var(--x-blue); --violet-tint:var(--x-blue-soft);
}

/* ---------- base ---------- */
html{-webkit-text-size-adjust:100%;scroll-padding-top:84px}
body{font-family:var(--x-sans);color:var(--x-slate);background:var(--x-canvas);font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased;letter-spacing:0}
::selection{background:var(--x-blue);color:#fff}
:focus-visible{outline:2px solid var(--x-blue);outline-offset:2px}
button,input,select,textarea{font-family:var(--x-sans)}

/* Display type — Montserrat ExtraBold in navy; the accent word (<em>) turns blue */
.tf-display,.hd h1,.brand h1,.hero h1,.panel h2,.card-head h2,.step-title,.slide h2,.xsec-t,.xh-t{
  font-family:var(--x-display);font-weight:800;letter-spacing:-.02em;line-height:1.08;color:var(--x-navy);text-transform:none}
.hd h1 em,.brand h1 em,.hero h1 em,.hero h1 .accent,.slide h2 em,.panel h2 em{font-style:normal;color:var(--x-blue)}

/* ============================================================================
   1. STANDARD TOOL TEMPLATE  (header · .hd hero · .panel · .btn · tables · footer)
   ========================================================================== */
header{background:rgba(244,245,247,.94);border-bottom:0;box-shadow:0 2px 10px rgba(16,24,40,.10);backdrop-filter:saturate(140%) blur(8px)}
.nav{height:68px}
.logo .mk{width:30px;height:30px}
.logo .wm{font-size:16px;line-height:1.1;letter-spacing:0}
.logo .x1,.logo .wm .x1{font-weight:600;color:var(--tf-black)}
.logo .x2,.logo .wm .x2{font-weight:400;color:var(--tf-blue)}
.eyebrow{font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--tf-blue)}

.hd{padding:48px 0 10px}
.hd h1{font-size:clamp(34px,4.2vw,48px);margin-top:12px;color:var(--x-navy)}
.hd p{font-size:17px;line-height:1.6;font-weight:400;color:var(--x-slate);margin-top:14px;max-width:780px}
.note{background:var(--tf-blue-soft);border:1px solid #C9D6F2;color:var(--tf-blue-deep);border-radius:14px}
.note svg{color:var(--tf-blue)}

.panel{background:var(--x-panel);border:0;border-radius:var(--tf-r-card);padding:28px;box-shadow:none}
.panel h2{font-size:22px;color:var(--x-navy);margin-bottom:16px;letter-spacing:-.01em}
.panel h3{font-family:var(--tf-sans);font-size:15px;font-weight:700;letter-spacing:0;text-transform:none;color:var(--tf-black)}
.grp{font-size:12px;font-weight:600;letter-spacing:.08em;color:var(--tf-text-3)}
.legend,.hint,.fld .hint{color:var(--tf-text-3);font-weight:400}

/* Buttons — pill, black outline / solid black, blue on hover */
.btn{font-family:var(--tf-sans);font-size:15px;font-weight:600;border-radius:var(--tf-r-pill);padding:12px 26px;border:1px solid var(--tf-black);line-height:1.2;
  transition:background .16s,border-color .16s,color .16s,opacity .16s}
.btn-sec{background:var(--tf-white);color:var(--x-navy);border-color:var(--x-line)}
.btn-sec:hover{background:var(--x-navy);color:#fff;border-color:var(--x-navy)}
.btn-pri{background:var(--tf-black);color:#fff;border-color:var(--tf-black)}
.btn-pri:hover{background:var(--tf-blue);border-color:var(--tf-blue)}
.btn-pri:disabled,.btn[disabled]{opacity:.4;cursor:not-allowed}
.btn-danger{background:var(--tf-white);color:var(--red);border-color:var(--red)}
.btn-danger:hover{background:var(--red);color:#fff;border-color:var(--red)}
.btn.sm,.btn-xs{font-size:13px;padding:7px 16px;border-radius:var(--tf-r-pill)}
.runbar .btn-pri{font-size:16px;padding:14px 32px}
.xs{border-radius:var(--tf-r-pill);font-family:var(--tf-sans)}

/* Upload drops */
.drop{border:1px dashed #BFC5CE;border-radius:6px;background:var(--tf-white)}
.drop:hover,.drop.over,.drop.drag{border-color:var(--tf-blue);background:var(--tf-blue-soft)}
.drop.has{border-style:solid;border-color:#A9D8B9;background:var(--green-tint)}
.drop .ic{background:var(--tf-blue-soft);color:var(--tf-blue);border-radius:10px}
.drop .t{font-weight:600}
.drop .t .req{color:var(--tf-blue)}
.file{border-radius:var(--tf-r-pill);border-color:var(--tf-line);color:var(--tf-black);font-weight:500}

/* Fields */
.fld label,label.fld{font-size:12px;font-weight:600;color:var(--tf-text-2)}
.fld input,.fld select,.fbform select,.fbform input,select,input[type=text],input[type=number],input[type=email],input[type=password],input[type=search],textarea{
  font-family:var(--tf-sans);font-weight:400;border:1px solid #CFCFCF;border-radius:var(--tf-r-input);background:var(--tf-white);color:var(--tf-black)}
.fld input:focus,.fld select:focus,select:focus,input:focus,textarea:focus{border-color:var(--tf-blue);box-shadow:0 0 0 3px var(--tf-blue-ring);outline:none}
input[type=checkbox],input[type=radio],input[type=range]{accent-color:var(--tf-blue)}
.chk{font-weight:500}

/* Tabs → pills */
.tabs button{font-family:var(--tf-sans);font-weight:500;border:1px solid var(--tf-black);background:var(--tf-white);color:var(--tf-black);border-radius:var(--tf-r-pill);padding:8px 18px}
.tabs button.on{background:var(--tf-black);color:#fff;border-color:var(--tf-black)}

/* Progress */
.prog{border-radius:16px;border-color:var(--tf-line)}
.prog .pct{color:var(--tf-blue)}
.prog .bar{background:var(--tf-grey)}
.prog .bar i{background:var(--tf-blue);animation:none}
.prog.done .bar i{background:var(--green)}
.prog .steps li{font-weight:500;border-radius:var(--tf-r-pill)}
.prog .steps li.on{color:var(--tf-blue);background:var(--tf-blue-soft)}
.prog .steps li.on::before{border-color:var(--tf-blue);border-top-color:transparent}
.inprog,.warnbox{border-radius:12px}
.notebox{border-radius:12px;color:var(--tf-blue-deep);background:var(--tf-blue-soft)}
.costbox{border-radius:12px}
.costbox summary b{color:var(--tf-blue)}

/* Stats — serif numerals */
.stat b,.stat .n,.stat .v,.stat-num{font-family:var(--tf-serif);font-weight:800;letter-spacing:-.01em;color:var(--tf-black)}
.stat b{font-size:28px}
.stat span,.stat .l,.stat-lbl{font-family:var(--tf-sans);font-weight:500;color:var(--tf-text-3)}
.stat.flag b,.stat .flux b{color:var(--tf-blue)}
.stat .mis b{color:var(--red)}

/* Tables */
table{font-size:13px}
th{font-family:var(--tf-sans);font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--tf-text-3);border-bottom:1px solid var(--tf-line);background:var(--tf-white)}
td{border-bottom:1px solid var(--tf-line-2)}
td.acct{font-weight:600}
tr.flag td{background:#F7F8FF}
.tablewrap,.tblwrap{border:1px solid var(--tf-line);border-radius:6px;background:var(--tf-white)}
#resultsPanel th{font-size:10px}

/* Tags, verdicts, pills — rounded, flat */
.tag,.pill,.vd,.sev,.badge,.chip,.dec,.new,.pill-warn,.status-pill,.row-status,.meta{border-radius:var(--tf-r-pill)}
.tag{background:var(--tf-grey-2);border:1px solid var(--tf-line);color:var(--tf-text-2);font-weight:500}
.pill{font-weight:600;letter-spacing:.05em}
.pill.xl{background:#E6F5EC;color:#1E8E4F;border-color:#A9D8B9}
.pill.pdf{background:#FDECEE;color:#B3202F;border-color:#F3BFC6}
.pill.req{background:var(--tf-blue-soft);color:var(--tf-blue-deep);border-color:#C9D6F2}
.pill.opt{background:var(--tf-grey-2);color:var(--tf-text-3);border-color:var(--tf-line)}
.vd{font-weight:600}
.vd.neutral{background:var(--tf-blue-soft);color:var(--tf-blue-deep)}

/* Messages */
.msg{font-weight:500;color:var(--tf-text-2)}
.msg.err{color:var(--red)} .msg.ok{color:var(--green)}
.muted{color:var(--tf-text-3);font-weight:400}

/* Footer — the black section */
footer{background:var(--tf-black);color:rgba(255,255,255,.65);border-top:0;padding:44px 0;margin-top:56px}
footer .foot,.foot{color:rgba(255,255,255,.65);font-weight:400;font-size:13px}
footer .foot b,.foot b,footer b,footer strong{color:#fff;font-weight:600;background:none;-webkit-text-fill-color:#fff}
footer a{color:#fff}

/* ============================================================================
   2. SHARED PORTAL TOP BAR  (.exo-topbar on the ReconEDGE / LedgerEDGE pages)
   ========================================================================== */
header.exo-topbar{background:rgba(244,245,247,.94);border-bottom:0;box-shadow:0 2px 10px rgba(16,24,40,.10)}
.exo-topbar .exo-nav{font-family:var(--tf-sans);height:68px;max-width:1320px}
.exo-topbar .exo-wm{font-size:16px;letter-spacing:0}
.exo-topbar .exo-wm b{font-weight:600;color:var(--tf-black)}
.exo-topbar .exo-wm i{font-weight:400;color:var(--tf-blue)}
.exo-topbar .exo-back{font-size:14px;font-weight:600;border-radius:var(--tf-r-pill);padding:9px 18px;border:1px solid var(--x-line);color:var(--x-navy);background:var(--tf-white)}
.exo-topbar .exo-back:hover{background:var(--tf-black);color:#fff;border-color:var(--tf-black)}

/* ============================================================================
   2b. HEADER WIDTH + TOP NAVIGATION  (js/nav.js — every page with a header)
   ========================================================================== */
header .wrap.nav,header>.nav{max-width:1320px}
header.xn-host{z-index:90}
.xn{display:flex;align-items:center;margin:0 auto 0 28px;font-family:var(--x-sans);min-width:0}
.xn-list{display:flex;align-items:center;gap:2px;list-style:none;margin:0;padding:0}
.xn-btn,.xn-burger{appearance:none;border:0;background:transparent;display:inline-flex;align-items:center;gap:6px;height:38px;padding:0 11px;border-radius:6px;
  font:500 14px/1 var(--x-sans);color:var(--x-slate);cursor:pointer;white-space:nowrap;transition:background .14s,color .14s}
.xn-btn svg,.xn-burger svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;transition:transform .2s}
.xn-burger svg:first-child{width:15px;height:15px;stroke-width:1.4}
.xn-btn:hover,.xn-btn[aria-expanded="true"],.xn-burger:hover,.xn-burger[aria-expanded="true"]{background:rgba(30,58,95,.07);color:var(--x-navy)}
.xn-btn[aria-expanded="true"] svg,.xn-burger[aria-expanded="true"] svg:last-child{transform:rotate(180deg)}
.xn-btn.is-active{color:var(--x-navy);font-weight:600;box-shadow:inset 0 -2px 0 var(--x-blue);border-radius:6px 6px 0 0}
.xn-burger{display:none;font-weight:600;color:var(--x-navy);box-shadow:inset 0 0 0 1px var(--x-line);border-radius:999px;padding:0 14px}

.xn-panel{position:absolute;top:100%;left:50%;width:min(800px,calc(100vw - 32px));transform:translate(-50%,8px);opacity:0;visibility:hidden;pointer-events:none;
  background:#fff;border:1px solid var(--x-line);border-radius:10px;overflow:hidden;z-index:200;text-align:left;
  box-shadow:0 28px 56px -20px rgba(16,24,40,.32),0 4px 12px rgba(16,24,40,.06);
  transition:opacity .16s ease,transform .18s cubic-bezier(.16,1,.3,1),visibility 0s linear .18s}
.xn-panel.open{opacity:1;visibility:visible;pointer-events:auto;transform:translate(-50%,4px);transition:opacity .16s ease,transform .18s cubic-bezier(.16,1,.3,1)}
.xn-ph{display:flex;align-items:center;gap:14px;padding:18px 22px;background:var(--x-panel);border-bottom:1px solid var(--x-line-2)}
.xn-ph .xn-ic{width:44px;height:44px;background:#fff;--x-ico-bg:#fff}
.xn-ph b{display:block;font:800 17px/1.2 var(--x-display);color:var(--x-navy);letter-spacing:-.01em}
.xn-ph span{display:block;font-size:13px;line-height:1.4;color:var(--x-text-2);margin-top:3px}
.xn-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2px 8px;padding:12px}
.xn-link{display:grid;grid-template-columns:40px minmax(0,1fr);gap:12px;align-items:center;padding:10px 12px;border-radius:8px;text-decoration:none!important;color:inherit;transition:background .14s}
.xn-link:hover,.xn-link:focus-visible{background:var(--x-panel);outline:none}
.xn-link.is-current{background:var(--x-blue-soft)}
.xn-ic{width:40px;height:40px;border-radius:8px;display:grid;place-items:center;flex:none;background:var(--x-panel);--x-ico-bg:var(--x-panel);box-shadow:inset 0 0 0 1px var(--x-line-2);transition:background .14s}
.xn-ic .xi{width:22px;height:22px}
.xn-link:hover .xn-ic,.xn-link.is-current .xn-ic{background:#fff;--x-ico-bg:#fff}
.xn-tx{min-width:0}
.xn-tx b{display:block;font:600 14px/1.3 var(--x-sans);color:var(--x-navy);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.xn-tx span{display:block;font:400 12.5px/1.4 var(--x-sans);color:var(--x-text-2);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.xn-foot{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 22px;border-top:1px solid var(--x-line-2);background:#FBFBFC;font-size:12.5px;color:var(--x-text-3)}
.xn-foot a{color:var(--x-blue)!important;font-weight:600;text-decoration:none}
.xn-foot a:hover{text-decoration:underline}
.xn-item:not(:has(.xn-link)),.xn-msec:not(:has(.xn-link)){display:none}
.xn-mobile{width:min(820px,calc(100vw - 24px));max-height:min(74vh,720px);overflow:auto}
.xn-msec+.xn-msec{border-top:1px solid var(--x-line-2)}
@media(max-width:1240px){.xn-list{display:none}.xn-burger{display:inline-flex}.xn{margin-left:16px}}
@media(max-width:640px){.xn-grid{grid-template-columns:1fr}.xn-burger span{display:none}.xn-burger{padding:0 10px}}
/* fit-based collapse: nav.js adds .xn-compact when the full menu does not fit the header */
.xn.xn-compact .xn-list{display:none}
.xn.xn-compact .xn-burger{display:inline-flex}
.xn{flex:none}

/* user menu (auth.js): avatar + first name, dropdown with role, Account, Users, Sign out */
.xu{position:relative;flex:none;margin-left:12px;font-family:var(--x-sans)}
.xu-btn{appearance:none;border:0;background:transparent;display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 10px 0 4px;border-radius:999px;cursor:pointer;
  color:var(--x-navy);font:600 14px/1 var(--x-sans);white-space:nowrap;transition:background .14s,box-shadow .14s}
.xu-btn:hover,.xu.open .xu-btn{background:#fff;box-shadow:inset 0 0 0 1px var(--x-line)}
.xu-btn svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;transition:transform .2s}
.xu.open .xu-btn svg{transform:rotate(180deg)}
.xu-av{display:inline-grid;place-items:center;flex:none;width:32px;height:32px;border-radius:50%;background:var(--x-navy);color:#fff;font:700 12.5px/1 var(--x-sans);letter-spacing:.02em}
.xu-av-lg{width:40px;height:40px;font-size:14px}
.xu-menu{position:absolute;right:0;top:calc(100% + 8px);width:280px;background:#fff;border:1px solid var(--x-line);border-radius:10px;overflow:hidden;z-index:210;
  box-shadow:0 24px 48px -18px rgba(16,24,40,.3),0 4px 10px rgba(16,24,40,.06);opacity:0;visibility:hidden;transform:translateY(4px);
  transition:opacity .15s ease,transform .15s ease,visibility 0s linear .15s}
.xu.open .xu-menu{opacity:1;visibility:visible;transform:none;transition:opacity .15s ease,transform .15s ease}
.xu-head{display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 12px;align-items:center;padding:16px;background:var(--x-panel);border-bottom:1px solid var(--x-line-2)}
.xu-head .xu-av{grid-row:span 2}
.xu-who{min-width:0}
.xu-who b{display:block;font:700 14px/1.3 var(--x-sans);color:var(--x-navy);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.xu-who span{display:block;font-size:12.5px;color:var(--x-text-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.xu-role{justify-self:start;font:700 10.5px/1 var(--x-sans);letter-spacing:.06em;text-transform:uppercase;color:#fff;background:var(--x-blue);border-radius:999px;padding:4px 9px}
.xu-item{display:block;width:100%;text-align:left;appearance:none;border:0;background:transparent;padding:11px 16px;font:500 14px var(--x-sans);color:var(--x-slate)!important;text-decoration:none!important;cursor:pointer}
.xu-item:hover,.xu-item:focus-visible{background:var(--x-panel);outline:none}
.xu-out{border-top:1px solid var(--x-line-2);color:var(--red)!important}
@media(max-width:720px){.xu-nm{display:none}.xu-btn{padding:0 6px 0 4px}}
/* page headers that were tuned for a two-item bar */
.xn~.btn-sec,.xn~.exo-back{flex:none}
.tf-cyma .topbar .xn-btn{color:var(--x-slate)}

/* ============================================================================
   2c. ICONS  (line icons in the deck's style — markup from js/catalog.js / index.html)
   ========================================================================== */
.xi{width:24px;height:24px;display:block;overflow:visible;color:var(--x-slate);fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.xi .xa{fill:var(--x-sky);stroke:none}
.xi .xb{fill:var(--x-blue);stroke:none}
.xi .xp{fill:var(--x-ico-bg)}

/* ============================================================================
   3. LAUNCHER  (index.html — generated by scripts/build_catalog.py)
   ========================================================================== */
body.x-launch{margin:0}
.x-launch *,.x-launch *::before,.x-launch *::after{box-sizing:border-box}
:where(.x-launch) :where(h1,h2,p,dl,dd){margin:0}
:where(.x-launch) :where(a){color:inherit}
.xw{max-width:1320px;margin:0 auto;padding:0 32px;width:100%}
.x-launch header{position:sticky;top:0}
.x-launch header .nav{display:flex;align-items:center;gap:12px;height:68px}
.x-launch .logo{display:inline-flex;align-items:center;gap:10px;text-decoration:none;flex:none}
.x-launch .logo .mk{width:30px;height:30px}
.x-launch .logo .wm{font-size:17px}
.x-launch .logo .x1{font-weight:700;color:var(--x-navy)} .x-launch .logo .x2{font-weight:600;color:var(--x-blue)}
.xs-search{position:relative;display:block;width:240px;flex:none}
.xs-search>svg{position:absolute;left:13px;top:50%;width:16px;height:16px;transform:translateY(-50%);fill:none;stroke:var(--x-text-3);stroke-width:2;stroke-linecap:round;pointer-events:none}
.xs-search input{width:100%;height:40px;border:1px solid var(--x-line)!important;border-radius:999px!important;background:#fff;padding:0 36px 0 38px;font:400 14px var(--x-sans);color:var(--x-slate);outline:none;transition:border-color .14s,box-shadow .14s}
.xs-search input:focus{border-color:var(--x-blue)!important;box-shadow:0 0 0 3px var(--x-ring)}
.xs-search input::-webkit-search-cancel-button{display:none}
.xs-search kbd{position:absolute;right:10px;top:50%;transform:translateY(-50%);font:600 11px var(--x-sans);color:var(--x-text-3);border:1px solid var(--x-line);border-radius:5px;padding:1px 6px;background:var(--x-panel)}
.xs-search input:focus+kbd{opacity:0}
/* instant results under the search box (js/index.js) */
.xs-results{position:absolute;right:0;top:calc(100% + 8px);width:min(440px,calc(100vw - 24px));max-height:min(70vh,520px);overflow:auto;background:#fff;border:1px solid var(--x-line);border-radius:10px;z-index:220;padding:6px;
  box-shadow:0 24px 48px -18px rgba(16,24,40,.3),0 4px 10px rgba(16,24,40,.06)}
.xs-results[hidden]{display:none}
.xs-row{display:grid;grid-template-columns:44px minmax(0,1fr);gap:12px;align-items:center;padding:8px 10px;border-radius:8px;text-decoration:none!important;color:inherit;--x-ico-bg:#fff}
.xs-row.on,.xs-row:hover{background:var(--x-panel)}
.xs-row .xcard-ic{width:44px;height:44px}
.xs-row .xcard-ic .xi{width:24px;height:24px}
.xs-tx{min-width:0}
.xs-tx b{display:block;font:600 14px/1.3 var(--x-sans);color:var(--x-navy);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.xs-tx span{display:block;font-size:12.5px;line-height:1.4;color:var(--x-text-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.xs-empty{padding:16px 14px;font-size:13.5px;color:var(--x-text-2)}
.xs-more{display:block;width:100%;margin-top:4px;padding:10px 12px;border:0;border-top:1px solid var(--x-line-2);background:transparent;text-align:left;font:600 13px var(--x-sans);color:var(--x-blue);cursor:pointer;border-radius:0 0 8px 8px}
.xs-more:hover{background:var(--x-panel)}

/* hero — deck slide 1: light panel left, icon grid right, the panel casting a shadow over the grid */
.xh{max-width:1320px;margin:28px auto 0;padding:0 32px}
.xh-in{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,1fr);min-height:560px;background:var(--x-canvas);border-radius:8px;overflow:hidden;box-shadow:inset 0 0 0 1px rgba(16,24,40,.04)}
.xh-left{position:relative;z-index:2;display:flex;flex-direction:column;padding:52px 64px 44px;background:var(--x-panel);box-shadow:18px 0 34px -18px rgba(16,24,40,.38)}
.xh-brand{display:flex;align-items:center;gap:10px;font:500 15px var(--x-sans);color:var(--x-slate)}
.xh-brand img{width:26px;height:26px}
.xh-t{font-size:clamp(48px,6.2vw,84px);line-height:1.0;letter-spacing:-.025em;margin-top:auto;padding-top:48px}
.xh-p{font-size:18px;line-height:1.55;color:var(--x-slate);margin-top:22px;max-width:500px}
.xh-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.xbtn{display:inline-flex;align-items:center;gap:8px;height:48px;padding:0 26px;border-radius:999px;font:600 15px var(--x-sans);text-decoration:none!important;white-space:nowrap;
  transition:background .16s,color .16s,box-shadow .16s,transform .16s}
.xbtn svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;transition:transform .16s}
.xbtn-pri{background:var(--x-navy);color:#fff}
.xbtn-pri:hover{background:var(--x-blue);box-shadow:0 10px 22px -10px rgba(46,91,186,.7);transform:translateY(-1px)}
.xbtn-pri:hover svg{transform:translateX(3px)}
.xbtn-sec{background:#fff;color:var(--x-navy);box-shadow:inset 0 0 0 1px var(--x-line)}
.xbtn-sec:hover{box-shadow:inset 0 0 0 1.5px var(--x-navy);transform:translateY(-1px)}
.xh-bars{display:flex;gap:14px;margin-top:40px}
.xh-bars i{display:block;width:58px;height:8px;background:var(--x-navy)}
.xh-bars i:nth-child(2){background:var(--x-sky)} .xh-bars i:nth-child(3){background:var(--x-blue)}
.xh-stats{display:grid;grid-template-columns:repeat(4,auto);justify-content:start;gap:12px 40px;margin:32px 0 0;padding-top:24px;border-top:1px solid var(--x-line)}
.xh-stats dt{font:800 24px/1.1 var(--x-display);color:var(--x-navy);letter-spacing:-.01em}
.xh-stats dd{margin:4px 0 0;font:500 12.5px var(--x-sans);color:var(--x-text-3)}
.xh-right{display:grid;grid-template-columns:1fr 1fr;grid-auto-rows:1fr;gap:18px;padding:22px 22px 22px 0;margin-left:-46px}
.xh-panel{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;padding:22px;background:var(--x-panel);border-radius:4px;
  text-decoration:none!important;color:inherit;--x-ico-bg:var(--x-panel);transition:transform .25s cubic-bezier(.16,1,.3,1),box-shadow .25s,background .25s}
.xh-panel:nth-child(odd){padding-left:68px}
.xh-panel .xi{width:84px;height:84px;stroke-width:1.15}
.xh-pl{display:flex;flex-direction:column;align-items:center;text-align:center}
.xh-pl b{font:700 14px/1.3 var(--x-sans);color:var(--x-navy)}
.xh-pl span{font:500 12px var(--x-sans);color:var(--x-text-3);margin-top:2px}
.xh-panel:hover,.xh-panel:focus-visible{background:#fff;--x-ico-bg:#fff;transform:translateY(-4px);box-shadow:var(--x-shadow-2)}
.xh-panel:hover .xi{color:var(--x-navy)}
.xh-panel .xi [pathLength]{stroke-dasharray:1;stroke-dashoffset:1;animation:x-draw 1.5s cubic-bezier(.65,0,.35,1) forwards}
.xh-panel .xi .xa,.xh-panel .xi .xb{opacity:0;animation:x-fade .6s ease forwards}
.xh-panel:nth-child(1) .xi *{animation-delay:.10s}.xh-panel:nth-child(2) .xi *{animation-delay:.22s}.xh-panel:nth-child(3) .xi *{animation-delay:.34s}
.xh-panel:nth-child(4) .xi *{animation-delay:.46s}.xh-panel:nth-child(5) .xi *{animation-delay:.58s}.xh-panel:nth-child(6) .xi *{animation-delay:.70s}
.xh-panel .xi .xa,.xh-panel .xi .xb{animation-delay:1.1s!important}
@keyframes x-draw{to{stroke-dashoffset:0}}
@keyframes x-fade{to{opacity:1}}

/* tool library — deck slides "Types of Data Analysis" (numbered pills) and "Key Findings" (accent bar) */
.xtools{padding:72px 0 16px;scroll-margin-top:68px}
.xh-panel[hidden]{display:none}
.xtools-h{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap}
.xsec-t{font-size:clamp(32px,3.6vw,44px)}
.xtools-h p{font-size:16px;color:var(--x-text-2);margin-top:10px}
.xchips{display:flex;flex-wrap:wrap;gap:8px}
.xchip{appearance:none;border:0;height:38px;padding:0 18px;border-radius:999px;background:var(--x-panel);box-shadow:inset 0 0 0 1px var(--x-line);
  font:600 13.5px var(--x-sans);color:var(--x-slate);cursor:pointer;transition:background .15s,color .15s,box-shadow .15s}
.xchip:hover{box-shadow:inset 0 0 0 1.5px var(--x-navy);color:var(--x-navy)}
.xchip.on{background:var(--x-navy);color:#fff;box-shadow:none}
.xcat{margin-top:48px;scroll-margin-top:96px}
.xcat-h{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:20px}
.xpill{display:inline-flex;align-items:center;gap:14px;height:52px;padding:0 26px 0 7px;border-radius:999px;background:var(--x-blue);color:#fff;font:700 16px var(--x-sans);white-space:nowrap}
.xcat:nth-of-type(even) .xpill{background:var(--x-navy)}
.xpill i{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:var(--x-panel);color:var(--x-slate);font:700 14px var(--x-sans);font-style:normal}
.xcat-h p{font-size:15px;color:var(--x-text-2)}
.xcat-n{font:600 13px var(--x-sans);color:var(--x-text-3);white-space:nowrap}
.xgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:20px}
.xcard{position:relative;display:flex;flex-direction:column;min-height:200px;padding:24px 24px 20px 28px;background:var(--x-panel);border-radius:4px;
  text-decoration:none!important;color:inherit;--x-ico-bg:#fff;transition:transform .25s cubic-bezier(.16,1,.3,1),box-shadow .25s,background .25s}
.xcard::before{content:"";position:absolute;left:0;top:24px;bottom:24px;width:4px;background:var(--x-sky);transform:scaleY(0);transform-origin:top;transition:transform .3s cubic-bezier(.16,1,.3,1)}
.xcard:hover,.xcard:focus-visible{background:#fff;transform:translateY(-4px);box-shadow:var(--x-shadow-2);outline:none}
.xcard:hover::before,.xcard:focus-visible::before{transform:scaleY(1)}
.xcard-ic{display:grid;place-items:center;width:52px;height:52px;border-radius:8px;background:#fff;box-shadow:inset 0 0 0 1px var(--x-line-2);transition:background .25s}
.xcard-ic .xi{width:28px;height:28px}
.xcard:hover .xcard-ic{background:var(--x-panel);--x-ico-bg:var(--x-panel)}
.xcard .nm{display:block;margin-top:18px;font:700 16.5px/1.3 var(--x-sans);color:var(--x-navy)}
.xcard .ds{display:block;margin-top:6px;font-size:14px;line-height:1.5;color:var(--x-text-2)}
.xcard-f{display:flex;align-items:center;flex-wrap:wrap;gap:6px;margin-top:auto;padding-top:18px}
.xtag{font:600 10.5px/1 var(--x-sans);letter-spacing:.06em;text-transform:uppercase;color:var(--x-navy);background:var(--x-blue-soft);border-radius:999px;padding:5px 9px}
.xgo{display:inline-flex;align-items:center;gap:4px;margin-left:auto;font:600 13px var(--x-sans);color:var(--x-blue);opacity:0;transform:translateX(-6px);transition:opacity .2s,transform .2s}
.xgo svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.xcard:hover .xgo,.xcard:focus-visible .xgo{opacity:1;transform:none}
.xcat:not(:has(.xcard)){display:none}
.x-reveal .xcard{opacity:0;transform:translateY(14px)}
.x-reveal .xcard.in{opacity:1;transform:none;transition:opacity .5s ease,transform .5s cubic-bezier(.16,1,.3,1),box-shadow .25s,background .25s}
.x-reveal .xcard.in:hover,.x-reveal .xcard.in:focus-visible{transform:translateY(-4px);transition-delay:0s!important}
.noresults{display:none;margin-top:40px;padding:32px;text-align:center;font-size:15px;color:var(--x-text-2);background:var(--x-panel);border-radius:6px}
.x-launch footer{margin-top:80px}
.x-launch .foot{display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px}

@media(max-width:1080px){
  .xh-in{grid-template-columns:1fr}
  .xh-right{margin-left:0;padding:22px;grid-template-columns:repeat(3,1fr)}
  .xh-panel:nth-child(odd){padding-left:22px}
  .xh-left{box-shadow:0 18px 34px -18px rgba(16,24,40,.3)}
  .xgrid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .xcat-h{grid-template-columns:auto minmax(0,1fr)}.xcat-n{display:none}
}
@media(max-width:720px){
  .xw,.xh{padding:0 16px}
  .xs-search{width:auto;flex:1 1 120px}
  .xs-search kbd{display:none}
  .xh-left{padding:36px 24px 30px}
  .xh-right{grid-template-columns:1fr 1fr;gap:12px;padding:12px}
  .xh-panel .xi{width:60px;height:60px}
  .xh-stats{grid-template-columns:repeat(2,auto)}
  .xgrid{grid-template-columns:1fr}
  .xcat-h{grid-template-columns:1fr;gap:10px}
  .xpill{height:46px;font-size:15px}
  .x-launch .logo .wm{display:none}
}
@media(prefers-reduced-motion:reduce){.xh-panel .xi [pathLength]{stroke-dashoffset:0}.xh-panel .xi .xa,.xh-panel .xi .xb{opacity:1}}

/* ============================================================================
   4. SIGN-IN / SETUP  (login.html · setup.html)
   ========================================================================== */
body.tf-auth::before,body.tf-auth::after{display:none}
.tf-auth .shell{border-radius:var(--tf-r-card);border:1px solid var(--tf-line);box-shadow:0 40px 80px -40px rgba(0,0,0,.25)}
.tf-auth form h1,.tf-auth .card h1{font-family:var(--tf-serif);font-weight:800;font-size:32px;letter-spacing:-.02em;line-height:1.1;color:var(--x-navy)}
.tf-auth p.sub{font-size:16px;font-weight:400;color:var(--tf-text-2)}
.tf-auth label{font-weight:600;color:var(--tf-text-2)}
.tf-auth input{border:1px solid #CFCFCF;border-radius:var(--tf-r-input);font-weight:400}
.tf-auth form button,.tf-auth .card button{background:var(--tf-black);border-radius:var(--tf-r-pill);font-weight:500;font-size:16px;padding:14px}
.tf-auth form button:hover,.tf-auth .card button:hover{background:var(--tf-blue)}
.tf-auth .foot{color:var(--tf-text-3);font-weight:400}
.tf-auth .who{background:var(--tf-blue-soft);color:var(--tf-blue-deep);border-radius:12px;font-weight:600}
.tf-auth a.link{color:var(--tf-blue)}
.tf-auth .setup-note{font-weight:400}
.tf-auth .secret,.tf-auth .rcodes code{font-family:var(--tf-sans);border-radius:12px}
.tf-auth .card.tf-setup{border-radius:var(--tf-r-card);box-shadow:0 40px 80px -40px rgba(0,0,0,.25)}
/* sign-in hero (generated block in login.html): deck slide 1 beside the form; categories only */
.tf-auth .xl{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1.2fr) minmax(360px,440px);width:100%;max-width:1180px;min-height:640px;
  background:var(--x-panel);border-radius:10px;overflow:hidden;box-shadow:0 40px 80px -40px rgba(16,24,40,.38),0 2px 6px rgba(16,24,40,.06)}
.xl-hero{display:flex;flex-direction:column;padding:48px 56px 40px;background:var(--x-panel);min-width:0}
.xl-brand{display:flex;align-items:center;gap:10px;font:500 15px var(--x-sans);color:var(--x-slate)}
.xl-brand img{width:26px;height:26px}
.xl-eyebrow{margin-top:36px;font:600 12px var(--x-sans);letter-spacing:.14em;text-transform:uppercase;color:var(--x-blue)}
.xl-hero .xl-t{margin-top:10px;font:800 clamp(40px,4.4vw,62px)/1.0 var(--x-display);letter-spacing:-.025em;color:var(--x-navy)}
.xl-p{margin-top:18px;max-width:520px;font-size:16.5px;line-height:1.6;color:var(--x-slate)}
.xl-hero .xh-bars{margin-top:26px}
.xl-cats{list-style:none;margin:28px 0 0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:10px}
.xl-cats li{display:grid;grid-template-columns:44px minmax(0,1fr);gap:12px;align-items:center;padding:10px 12px;background:#fff;border-radius:6px}
.xl-cats li:last-child:nth-child(odd){grid-column:1/-1}
.xl-ic{display:grid;place-items:center;width:44px;height:44px;border-radius:8px;background:var(--x-panel);--x-ico-bg:var(--x-panel)}
.xl-ic .xi{width:26px;height:26px}
.xl-ct{min-width:0}
.xl-ct b{display:block;font:600 14px/1.3 var(--x-sans);color:var(--x-navy)}
.xl-ct span{display:block;margin-top:2px;font-size:12.5px;line-height:1.4;color:var(--x-text-2)}
.xl-facts{display:flex;flex-wrap:wrap;gap:12px 36px;margin-top:auto;padding-top:24px}
.xl-facts dt{font:800 20px/1.1 var(--x-display);color:var(--x-navy)}
.xl-facts dd{margin:3px 0 0;font:500 12.5px var(--x-sans);color:var(--x-text-3)}
.xl-cats .xi [pathLength]{stroke-dasharray:1;stroke-dashoffset:1;animation:x-draw 1.4s cubic-bezier(.65,0,.35,1) forwards}
.xl-cats .xi .xa,.xl-cats .xi .xb{opacity:0;animation:x-fade .6s ease 1.1s forwards}
.xl-cats li:nth-child(2) .xi [pathLength]{animation-delay:.12s}.xl-cats li:nth-child(3) .xi [pathLength]{animation-delay:.24s}
.xl-cats li:nth-child(4) .xi [pathLength]{animation-delay:.36s}.xl-cats li:nth-child(5) .xi [pathLength]{animation-delay:.48s}
.tf-auth .xl .shell{max-width:none;min-height:0;grid-template-columns:1fr;border:0;border-radius:0;background:#fff;box-shadow:-18px 0 34px -18px rgba(16,24,40,.28)}
.tf-auth .xl .shell aside{display:none}
.tf-auth .xl .shell form{justify-content:center}
@media(max-width:980px){
  .tf-auth .xl{grid-template-columns:1fr;max-width:540px;min-height:0}
  .xl-hero{padding:32px 28px 24px}
  .xl-eyebrow{margin-top:24px}
  .xl-cats{grid-template-columns:1fr}
  .xl-facts{margin-top:24px}
  .tf-auth .xl .shell{order:-1;box-shadow:none;border-bottom:1px solid var(--x-line-2)}
}
@media(prefers-reduced-motion:reduce){.xl-cats .xi [pathLength]{stroke-dashoffset:0}.xl-cats .xi .xa,.xl-cats .xi .xb{opacity:1}}
/* right panel = the blue "Grow your presence" block */
.shell aside{background:linear-gradient(160deg,#24476F 0%,var(--x-navy) 55%,var(--x-navy-2) 100%);border-left:0;color:#fff}
.shell aside .slide h2{font-size:24px;color:#fff}
.shell aside .slide p{color:rgba(255,255,255,.85);font-weight:400;font-size:15px}
.shell aside .dots button{background:rgba(255,255,255,.4)}
.shell aside .dots button.on{background:#fff}
.shell aside svg.illu text{font-family:var(--tf-sans)}
.shell aside svg.illu [stroke="#144E80"],.shell aside svg.illu [stroke="#1C76C2"],.shell aside svg.illu [stroke="#CD8C2E"],.shell aside svg.illu [stroke="#2F8F4E"],.shell aside svg.illu [stroke="#C0392B"]{stroke:#fff}
.shell aside svg.illu [stroke="#8A95A1"]{stroke:rgba(255,255,255,.55)}
.shell aside svg.illu [fill="#FFFFFF"]{fill:rgba(255,255,255,.14)}
.shell aside svg.illu [fill="#E9F1FA"]{fill:rgba(255,255,255,.28)}
.shell aside svg.illu [fill="#144E80"],.shell aside svg.illu [fill="#1C76C2"],.shell aside svg.illu [fill="#F0B92B"],.shell aside svg.illu [fill="#C0392B"],.shell aside svg.illu [fill="#2F8F4E"]{fill:#fff}

/* ============================================================================
   5. RECONEDGE RM12  (reconedge-rm12.html)
   ========================================================================== */
body.tf-rm12{background:var(--tf-grey);background-image:none;color:var(--tf-black)}
.tf-rm12{--navy:#000;--blue:#2E5BBA;--blue-deep:#1E3A5F;--soft:#E8EEFA;--edge:#E3E3E3;--ink:#000;--ink-dim:#444;--ink-faint:#767676;--r-lg:24px;--r-md:16px;--r-sm:12px;--sh:none}
.tf-rm12 .brand h1{font-size:32px;color:var(--tf-black)}
.tf-rm12 .brand h1 em{color:var(--tf-blue)}
.tf-rm12 .brand .home{border-radius:var(--tf-r-pill);border-color:var(--tf-black);font-weight:500}
.tf-rm12 h2{font-family:var(--tf-serif);font-weight:800;font-size:20px;color:var(--tf-black);letter-spacing:-.01em}
.tf-rm12 .desc{font-weight:400}
.tf-rm12 .card{border-radius:var(--tf-r-card);border-color:var(--tf-line);box-shadow:none}
.tf-rm12 .btn{border-radius:var(--tf-r-pill);background:var(--tf-black);color:#fff;border:1px solid var(--tf-black);box-shadow:none;font-weight:500;padding:12px 26px}
.tf-rm12 .btn:hover{background:var(--tf-blue);border-color:var(--tf-blue);transform:none}
.tf-rm12 .btn.ghost{background:var(--tf-white);color:var(--tf-black);border-color:var(--tf-black)}
.tf-rm12 .btn.ghost:hover{background:var(--tf-black);color:#fff}
.tf-rm12 .btn.sm{padding:8px 16px;font-size:13px;border-radius:var(--tf-r-pill)}
.tf-rm12 .step{border-radius:var(--tf-r-pill);padding:10px 16px}
.tf-rm12 .step .num{background:var(--tf-grey);color:var(--tf-text-2)}
.tf-rm12 .step.active{border-color:var(--tf-black);color:var(--tf-black)}
.tf-rm12 .step.active .num{background:var(--tf-black)}
.tf-rm12 .pair .pn,.tf-rm12 .mode.on{background:var(--tf-blue-soft);color:var(--tf-blue)}
.tf-rm12 .mode.on{color:var(--tf-black);border-color:var(--tf-blue)}
.tf-rm12 .stat .n{font-family:var(--tf-serif);font-weight:800;font-size:30px}
.tf-rm12 .stat.rc .n{color:var(--tf-blue)}
.tf-rm12 .bar > i{background:var(--tf-blue)}
.tf-rm12 .log{border-radius:16px;background:var(--tf-black);color:#D9D9D9;font-family:ui-monospace,Consolas,monospace}
.tf-rm12 footer{border-radius:var(--tf-r-card);padding:28px 32px;margin-top:34px}
.tf-rm12 .exo-topbar{margin:-24px -18px 22px}

/* ============================================================================
   6. LEDGEREDGE BF RM12  (ledgeredge-bf-rm12.html — sage theme literals are
      replaced in the page itself; this section handles the rest)
   ========================================================================== */
body.tf-bf{background:var(--tf-grey)!important;background-image:none!important;color:var(--tf-black)}
.tf-bf{--ink:#000;--ink-dim:#444;--ink-faint:#767676;--edge:#E3E3E3;--teal:#2E5BBA;--accent:#2E5BBA;--accent-deep:#1E3A5F;--soft:#E8EEFA;--r-lg:24px;--r-md:16px;--r-sm:12px;--font:var(--tf-sans);--mono:var(--tf-sans)}
.tf-bf .glass{border-radius:var(--tf-r-card);box-shadow:none!important}
.tf-bf .brand h1{font-family:var(--tf-serif);font-weight:800;font-size:30px!important;color:var(--tf-black)!important}
.tf-bf .brand h1 em{font-style:normal;font-weight:800;color:var(--tf-blue)!important;-webkit-text-fill-color:var(--tf-blue)!important}
.tf-bf .brand h1 .bfc{font-family:var(--tf-sans);font-size:14px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;border:1px solid var(--tf-black);border-radius:var(--tf-r-pill);padding:6px 12px;box-shadow:none;vertical-align:middle;margin-right:12px}
.tf-bf .brand .sub{font-weight:500;color:var(--tf-text-3)}
.tf-bf .rmtag{color:var(--tf-blue-deep);background:var(--tf-blue-soft);border-color:#C9D6F2}
.tf-bf .pill{font-weight:500}
.tf-bf .navbtn{border:1px solid var(--tf-black);color:var(--tf-black);font-weight:500;box-shadow:none}
.tf-bf .navbtn:hover{background:var(--tf-black);color:#fff}
.tf-bf .toggle{border-color:var(--tf-black);box-shadow:none}
.tf-bf .toggle button{font-weight:500}
.tf-bf .toggle button.on{background:var(--tf-black);color:#fff}
.tf-bf .drop{background:var(--tf-white)!important;border:1px dashed #BDBDBD!important;border-radius:var(--tf-r-card);box-shadow:none}
.tf-bf .drop.hot{background:var(--tf-blue-soft)!important;border-color:var(--tf-blue)!important}
.tf-bf .drop .big{color:var(--tf-black)!important;font-weight:600} .tf-bf .drop .hint{color:var(--tf-text-3)!important}
.tf-bf .chip{border-radius:16px;box-shadow:none}
.tf-bf .chip .f{font-family:var(--tf-sans)}
.tf-bf .cfg summary{font-weight:600} .tf-bf .cfg summary::before{color:var(--tf-blue)}
.tf-bf .chk{background:var(--tf-grey-2)} .tf-bf .chk code{color:var(--tf-blue);font-family:var(--tf-sans)}
.tf-bf .nums input:focus{border-color:var(--tf-blue);box-shadow:0 0 0 3px var(--tf-blue-ring)}
.tf-bf .btn{background:var(--tf-black);border:1px solid var(--tf-black);border-radius:var(--tf-r-pill);box-shadow:none;font-weight:500;padding:13px 28px}
.tf-bf .btn:hover{background:var(--tf-blue);border-color:var(--tf-blue);transform:none;box-shadow:none}
.tf-bf .btn.ghost{background:var(--tf-white);color:var(--tf-black);border-color:var(--tf-black)}
.tf-bf .btn.ghost:hover{background:var(--tf-black);color:#fff}
.tf-bf .stat{border-radius:16px;box-shadow:none}
.tf-bf .stat .n{font-family:var(--tf-serif);font-weight:800!important;letter-spacing:-.01em}
.tf-bf .stat.info .n{color:var(--tf-blue)} .tf-bf .stat.tot .n{color:var(--tf-black)}
.tf-bf .tablecard{border-radius:var(--tf-r-card);box-shadow:none}
.tf-bf .tbar .fpill{font-weight:500;background:var(--tf-white);border-color:var(--tf-line)}
.tf-bf .tbar .fpill.on{background:var(--tf-black);border-color:var(--tf-black);color:#fff}
.tf-bf th{background:var(--tf-white)!important;color:var(--tf-text-3)!important;font-weight:600;letter-spacing:.06em}
.tf-bf td.num{font-family:var(--tf-sans);font-variant-numeric:tabular-nums}
.tf-bf .cid{color:var(--tf-blue);font-family:var(--tf-sans)}
.tf-bf .sev.INFO{background:var(--tf-blue-soft)!important;color:var(--tf-blue-deep)!important;border-color:#C9D6F2!important}
.tf-bf .chip.ok .dot{background:var(--tf-blue)!important}
.tf-bf footer{border-radius:var(--tf-r-card);padding:28px 32px;color:rgba(255,255,255,.65)}
.tf-bf footer b{color:#fff}

/* ============================================================================
   7. RECONEDGE YARDI / REALPAGE  (reconedge-yardi-realpage*.html — glass theme)
   ========================================================================== */
body.tf-yardi{background:var(--tf-grey)!important;background-image:none!important;color:var(--tf-black);letter-spacing:0}
.tf-yardi{--text:#000;--text-2:#444;--text-3:#767676;--ink:#fff;
  --glass:#fff;--glass-2:#fff;--glass-strong:#fff;--glass-tint:#F6F6F7;--glass-border:#E3E3E3;--glass-border-2:#EEEEEE;--glass-edge:transparent;
  --shadow:none;--shadow-lg:none;--shadow-sm:none;--shadow-brut:none;--shadow-brut-sm:none;--shadow-brut-xs:none;
  --accent:#2E5BBA;--accent-2:#2E5BBA;--accent-deep:#1E3A5F;--accent-grad:linear-gradient(135deg,#2E5BBA 0%,#2E5BBA 100%);--accent-grad-hover:linear-gradient(135deg,#1E3A5F 0%,#1E3A5F 100%);--accent-soft:rgba(46,91,186,.1);
  --success:#1E8E4F;--success-soft:rgba(30,142,79,.12);--warn:#9A6200;--warn-soft:rgba(154,98,0,.12);--danger:#D7263D;--danger-soft:rgba(215,38,61,.1);
  --radius-lg:24px;--radius:16px;--radius-sm:12px;--sans:var(--tf-sans);--mono:var(--tf-sans)}
.tf-yardi .ambient-bg{display:none}
.tf-yardi .top-bar{background:transparent;border:0;box-shadow:none;backdrop-filter:none;padding:10px 24px 0}
.tf-yardi .brand-sub{border-left:0;padding-left:0;font-weight:500;color:var(--tf-text-3)}
.tf-yardi .ghost-btn{background:var(--tf-white);border:1px solid var(--tf-black);color:var(--tf-black);font-weight:500;font-size:14px;padding:9px 20px;box-shadow:none;backdrop-filter:none}
.tf-yardi .ghost-btn:hover{background:var(--tf-black);color:#fff;transform:none;box-shadow:none}
.tf-yardi .ghost-btn:active{transform:none;box-shadow:none}
.tf-yardi .hero{text-align:left;padding:44px 0 28px}
.tf-yardi .hero h1{font-size:clamp(34px,4.2vw,48px);color:var(--tf-black)}
.tf-yardi .hero h1 .accent{background:none;-webkit-text-fill-color:var(--tf-blue);color:var(--tf-blue);font-style:normal}
.tf-yardi .hero .sub{margin:14px 0 0;font-size:18px;color:var(--tf-text-2);max-width:720px}
.tf-yardi .hero .accent-bar{display:none}
.tf-yardi .hero-eyebrow{background:transparent;border:1px solid var(--tf-black);box-shadow:none;backdrop-filter:none;padding:6px 16px;margin-bottom:18px}
.tf-yardi .hero-eyebrow span{background:none;-webkit-text-fill-color:var(--tf-black);color:var(--tf-black);font-family:var(--tf-sans);font-weight:600;letter-spacing:.14em}
.tf-yardi .card{backdrop-filter:none;box-shadow:none;border:1px solid var(--tf-line);border-radius:var(--tf-r-card)}
.tf-yardi .card::before{display:none}
.tf-yardi .card.active{box-shadow:none;border-color:var(--tf-black)}
.tf-yardi .card-head{padding:22px 28px 18px}
.tf-yardi .card-head h2{font-size:20px;color:var(--tf-black)}
.tf-yardi .step-num{border-radius:50%;background:var(--tf-white);border:1px solid #CFCFCF;color:var(--tf-black);font-family:var(--tf-sans);font-weight:600;box-shadow:none;backdrop-filter:none}
.tf-yardi .step-num::after{display:none}
.tf-yardi .card.active .step-num{background:var(--tf-black);color:#fff;border-color:var(--tf-black);box-shadow:none}
.tf-yardi .pair-remove,.tf-yardi .slot-clear,.tf-yardi .file-list-row .x{background:var(--tf-white);color:var(--tf-text-3);border:1px solid var(--tf-line);border-radius:10px;font:inherit;font-size:18px;padding:0}
.tf-yardi .slot-clear,.tf-yardi .file-list-row .x{border:0}
.tf-yardi .pair-remove:hover,.tf-yardi .slot-clear:hover,.tf-yardi .file-list-row .x:hover{background:var(--danger-soft);color:var(--danger);border-color:rgba(215,38,61,.3)}
.tf-yardi .status-pill,.tf-yardi .row-status,.tf-yardi .file-list-row .meta,.tf-yardi .slot-filled .slot-meta{font-family:var(--tf-sans);font-weight:600;border-radius:var(--tf-r-pill);box-shadow:none;backdrop-filter:none}
.tf-yardi .status-pill.ok,.tf-yardi .file-list-row .meta.ok,.tf-yardi .slot-filled .slot-meta.ok,.tf-yardi .pair-table .row-status.ok{background:var(--success-soft);color:var(--success);border-color:rgba(30,142,79,.3)}
.tf-yardi .status-pill.warn,.tf-yardi .pair-table .row-status.running{background:var(--warn-soft);color:var(--warn);border-color:rgba(154,98,0,.3)}
.tf-yardi .status-pill.err,.tf-yardi .file-list-row .meta.err,.tf-yardi .slot-filled .slot-meta.err,.tf-yardi .pair-table .row-status.err{background:var(--danger-soft);color:var(--danger);border-color:rgba(215,38,61,.3)}
.tf-yardi .stat.ok .stat-num{color:var(--success)} .tf-yardi .stat.warn .stat-num{color:var(--warn)} .tf-yardi .stat.err .stat-num{color:var(--danger)}
.tf-yardi .run-success{color:var(--success);background:var(--success-soft);border-color:rgba(30,142,79,.3)}
.tf-yardi .drop-zone,.tf-yardi .pair-slot{background:var(--tf-white);border:1px dashed #BDBDBD;box-shadow:none;backdrop-filter:none}
.tf-yardi .drop-zone:hover,.tf-yardi .pair-slot:hover{border-color:var(--tf-blue);background:var(--tf-blue-soft);transform:none;box-shadow:none}
.tf-yardi .drop-zone.dragover,.tf-yardi .pair-slot.dragover{border-color:var(--tf-blue);background:var(--tf-blue-soft);transform:none;box-shadow:none}
.tf-yardi .drop-icon{filter:none}
.tf-yardi .file-list,.tf-yardi .upload-counts,.tf-yardi .pair-row,.tf-yardi .pair-table-wrap{backdrop-filter:none;box-shadow:none;border-color:var(--tf-line)}
.tf-yardi .pair-idx{font-family:var(--tf-sans);box-shadow:none;background:var(--tf-grey-2)}
.tf-yardi .pair-table th,.tf-yardi .preview-table th{background:var(--tf-white);backdrop-filter:none;font-family:var(--tf-sans);font-weight:600;color:var(--tf-text-3);box-shadow:none}
.tf-yardi .pair-table .idx{font-family:var(--tf-sans)}
.tf-yardi .pair-table select,.tf-yardi .pair-table input[type="number"],.tf-yardi .pair-table input[type="text"],.tf-yardi .mapping-grid select,.tf-yardi .mapping-grid input[type="text"],.tf-yardi .field input[type="number"]{background:var(--tf-white);border:1px solid #CFCFCF;border-radius:var(--tf-r-input);box-shadow:none;backdrop-filter:none;font-family:var(--tf-sans)}
.tf-yardi .pair-table select option,.tf-yardi .mapping-grid select option{background:#fff;color:#000}
.tf-yardi .pair-table select:focus,.tf-yardi .pair-table input:focus,.tf-yardi .mapping-grid select:focus,.tf-yardi .field input:focus{border-color:var(--tf-blue);background:var(--tf-white);box-shadow:0 0 0 3px var(--tf-blue-ring)}
.tf-yardi .section-title,.tf-yardi .field label,.tf-yardi .mapping-grid label,.tf-yardi .amount-mode>span{font-family:var(--tf-sans);font-weight:600;letter-spacing:.06em;color:var(--tf-text-3)}
.tf-yardi .field label strong{color:var(--tf-black)}
.tf-yardi .toggle{box-shadow:none;backdrop-filter:none}
.tf-yardi .toggle.on{background:var(--tf-blue-soft);border-color:var(--tf-blue)}
.tf-yardi .primary-btn{background:var(--tf-black);border:1px solid var(--tf-black);border-radius:var(--tf-r-pill);padding:12px 28px;font-size:15px;font-weight:500;box-shadow:none;filter:none}
.tf-yardi .primary-btn:hover:not(:disabled){background:var(--tf-blue);border-color:var(--tf-blue);transform:none;box-shadow:none}
.tf-yardi .primary-btn:active:not(:disabled){transform:none;box-shadow:none}
.tf-yardi .primary-btn.big{border-radius:var(--tf-r-pill);padding:16px 32px;font-size:16px;box-shadow:none}
.tf-yardi .primary-btn.big:hover:not(:disabled),.tf-yardi .primary-btn.big:active:not(:disabled){transform:none;box-shadow:none}
.tf-yardi .progress-wrap{background:var(--tf-white);border-color:var(--tf-line);box-shadow:none;backdrop-filter:none}
.tf-yardi .progress-bar{background:var(--tf-blue);box-shadow:none}
.tf-yardi .progress-text{font-family:var(--tf-sans)}
.tf-yardi .stat{backdrop-filter:none;box-shadow:none;border-color:var(--tf-line);background:var(--tf-white)}
.tf-yardi .stat::before{display:none}
.tf-yardi .stat-num{font-family:var(--tf-serif);font-weight:800;font-size:28px;letter-spacing:-.01em}
.tf-yardi .stat-lbl{font-family:var(--tf-sans);font-weight:500;letter-spacing:.06em}
.tf-yardi footer{background:var(--tf-black);color:rgba(255,255,255,.65);border-radius:var(--tf-r-card);padding:32px 24px;margin:34px auto 0;max-width:1040px}
.tf-yardi footer strong{background:none;-webkit-text-fill-color:#fff;color:#fff;font-weight:600}
.tf-yardi footer .footer-mark{color:rgba(255,255,255,.5)}
.tf-yardi .toast{background:var(--tf-black);font-family:var(--tf-sans)}
.tf-yardi .err-box{border-radius:12px}

/* ============================================================================
   8. RECONEDGE CYMA  (recon-cyma.html — the black section: black page, white cards)
   ========================================================================== */
body.tf-cyma{background:var(--x-canvas);background-image:none;color:var(--x-slate);letter-spacing:0;font-family:var(--tf-sans)}
.tf-cyma{--accent:#2E5BBA;--accent-deep:#1E3A5F;--coral:#2E5BBA;--success:#1E8E4F;--warn:#9A6200;--danger:#D7263D;
  --text:#000;--text-dim:#444;--text-mute:#767676;--card-bg:#fff;--card-border:#E3E3E3;
  --ink:#36404A;--ink-2:#4A5563;--blue-500:#2E5BBA;--blue-900:#1E3A5F}
.tf-cyma .blob{display:none}
.tf-cyma .topbar{background:rgba(244,245,247,.94);backdrop-filter:saturate(140%) blur(8px);border-bottom:0;box-shadow:0 2px 10px rgba(16,24,40,.10)}
.tf-cyma .wordmark{font-weight:600;letter-spacing:0;font-size:18px}
.tf-cyma .wordmark .exo{color:var(--x-navy)} .tf-cyma .wordmark .edge{color:var(--tf-blue);font-weight:400}
.tf-cyma .topbar .nav>div:first-child a{color:var(--x-text-2)!important}
.tf-cyma .sub-label{color:var(--x-text-3);font-weight:600}
.tf-cyma .hero h1{font-size:clamp(34px,4.2vw,48px);background:none;-webkit-text-fill-color:var(--x-navy);color:var(--x-navy);margin-bottom:16px}
.tf-cyma .hero .bar{background:var(--tf-blue);width:56px;height:3px}
.tf-cyma .card{background:var(--tf-white);backdrop-filter:none;border:1px solid var(--tf-line);border-radius:var(--tf-r-card);box-shadow:none;color:var(--tf-black)}
.tf-cyma .step-num{background:var(--tf-black);color:#fff;font-weight:600}
.tf-cyma .step-title{font-size:22px;font-weight:800;color:var(--x-navy)}
.tf-cyma .step-sub{color:var(--tf-text-2)}
.tf-cyma .pair-row,.tf-cyma .map-pair,.tf-cyma .tol-card,.tf-cyma .stat{background:var(--tf-grey-2);border:1px solid var(--tf-line);border-radius:16px}
.tf-cyma .pair-idx{background:var(--tf-blue-soft);border-color:#C9D6F2;color:var(--tf-blue-deep);border-radius:var(--tf-r-pill);font-weight:600}
.tf-cyma .pair-name-input,.tf-cyma .map-select,.tf-cyma .text-input{background:var(--tf-white);border:1px solid #CFCFCF;border-radius:var(--tf-r-input);color:var(--tf-black)}
.tf-cyma .pair-name-input:focus,.tf-cyma .map-select:focus,.tf-cyma .text-input:focus{border-color:var(--tf-blue);box-shadow:0 0 0 3px var(--tf-blue-ring)}
.tf-cyma .dz{background:var(--tf-white);border:1px dashed #BDBDBD;border-radius:12px;color:var(--tf-text-2)}
.tf-cyma .dz:hover{border-color:var(--tf-blue);background:var(--tf-blue-soft);color:var(--tf-black)}
.tf-cyma .dz.has-file{border:1px solid #A9D8B9;background:var(--green-tint);color:#1E8E4F}
.tf-cyma .dz.has-file .fname{color:var(--tf-black)} .tf-cyma .dz.has-file .fmeta{color:#1E8E4F}
.tf-cyma .dz .dz-label{color:var(--tf-text-3)}
.tf-cyma .btn-x{background:var(--tf-white);border:1px solid #F3BFC6;color:var(--danger);border-radius:var(--tf-r-pill)}
.tf-cyma .btn-x:hover{background:#FDECEE}
.tf-cyma .btn{border-radius:var(--tf-r-pill);font-weight:500;font-size:15px;padding:12px 26px;letter-spacing:0;border:1px solid var(--tf-black)}
.tf-cyma .btn-primary{background:var(--tf-black);color:#fff;box-shadow:none}
.tf-cyma .btn-primary:hover{background:var(--tf-blue);border-color:var(--tf-blue);transform:none;box-shadow:none}
.tf-cyma .btn-ghost{background:var(--tf-white);color:var(--tf-black);border:1px solid var(--tf-black)}
.tf-cyma .btn-ghost:hover{background:var(--tf-black);color:#fff}
.tf-cyma .pair-counter{color:var(--tf-text-2)} .tf-cyma .pair-counter b{color:var(--tf-black)}
.tf-cyma .err-box{background:#FDECEE;border-color:#F3BFC6;color:#B3202F;border-radius:12px}
.tf-cyma .info-box{background:var(--tf-blue-soft);border-color:#C9D6F2;color:var(--tf-blue-deep);border-radius:12px}
.tf-cyma .map-pair-head .ok{color:var(--success)}
.tf-cyma .map-field label,.tf-cyma .tol-card label,.tf-cyma .stat .l{color:var(--tf-text-3)}
.tf-cyma .mode-pill{background:var(--tf-white);border:1px solid var(--tf-line);border-radius:var(--tf-r-pill);color:var(--tf-text-2)}
.tf-cyma .mode-pill.active{background:var(--tf-black);border-color:var(--tf-black);color:#fff}
.tf-cyma .tol-card .val,.tf-cyma .stat .v{font-family:var(--tf-serif);font-weight:800;color:var(--tf-black);font-size:30px}
.tf-cyma .progress{background:var(--tf-black);border:1px solid rgba(255,255,255,.14);color:#D9D9D9;border-radius:16px}
.tf-cyma .progress .info{color:#7FB5FF}
.tf-cyma .progress .ok{color:#6FD39A}
.tf-cyma .progress .err{color:#FF7A8A}
.tf-cyma .preview-table{background:var(--tf-white);border:1px solid var(--tf-line);border-radius:12px}
.tf-cyma .preview-table th,.tf-cyma .preview-table td{border-bottom:1px solid var(--tf-line-2);color:var(--tf-text-2)}
.tf-cyma .preview-table th{background:var(--tf-white);color:var(--tf-text-3);font-weight:600}
.tf-cyma details summary{color:var(--tf-text-2)} .tf-cyma details summary:hover{color:var(--tf-black)}
.tf-cyma .footer{color:var(--x-text-3)}
.tf-cyma .footer b,.tf-cyma .footer strong{color:var(--x-navy)}
.tf-cyma .footer span[style*="#fff"]{color:var(--x-navy)!important}
.tf-cyma .footer span[style*="coral"]{color:var(--x-blue)!important}

/* ============================================================================
   9. CLIP — the paperclip mascot (js/mascot.js), bottom-right on every page
   ========================================================================== */
.clip-root{position:fixed;left:0;top:0;width:56px;height:100px;z-index:1200;font-family:var(--tf-sans);pointer-events:none;
  transform:translate3d(var(--clip-x,calc(100vw - 78px)),var(--clip-y,calc(100vh - 118px)),0);transition-property:transform;transition-duration:0ms;transition-timing-function:cubic-bezier(.45,0,.25,1);will-change:transform}
.clip-root>*{pointer-events:auto}
.clip-body{appearance:none;border:0;background:transparent;padding:0;cursor:pointer;width:56px;height:100px;display:block;filter:drop-shadow(0 10px 18px rgba(46,91,186,.22));animation:clip-float 5.5s ease-in-out infinite;transform-origin:50% 90%}
.clip-body:focus-visible{outline:2px solid var(--tf-blue);outline-offset:6px;border-radius:30px}
.clip-svg{width:100%;height:100%;display:block;overflow:visible}
.clip-body:hover{animation:clip-wiggle .7s ease-in-out}
.clip-talking .clip-body{animation:clip-bob 1.6s ease-in-out infinite}
.clip-happy .clip-body{animation:clip-hop .6s cubic-bezier(.3,1.4,.5,1)}
.clip-worried .clip-wire{animation:clip-shiver .35s ease-in-out 2}
.clip-working .clip-body{animation:clip-bob 1.1s ease-in-out infinite}
.clip-asleep .clip-body{animation:clip-breathe 4s ease-in-out infinite;filter:drop-shadow(0 8px 14px rgba(46,91,186,.14)) saturate(.7)}
.clip-asleep .clip-face{transform:translateY(2px)}
.clip-lid{transition:height .12s ease}
.clip-pupil{transition:cx .12s linear,cy .12s linear}
.clip-brow{transition:d .25s ease}
.clip-bubble{position:relative;max-width:300px;background:rgba(255,255,255,.92);-webkit-backdrop-filter:blur(14px) saturate(160%);backdrop-filter:blur(14px) saturate(160%);
  border:1px solid rgba(0,0,0,.08);border-radius:18px 18px 4px 18px;padding:14px 36px 12px 16px;box-shadow:0 24px 44px -24px rgba(0,0,0,.35),0 2px 6px rgba(0,0,0,.05);
  color:var(--tf-black);font-size:13.5px;line-height:1.45;animation:clip-pop .32s cubic-bezier(.16,1,.3,1)}
.clip-bubble::after{content:"";position:absolute;right:28px;bottom:-9px;width:16px;height:16px;background:inherit;border-right:1px solid rgba(0,0,0,.08);border-bottom:1px solid rgba(0,0,0,.08);transform:rotate(45deg);border-radius:0 0 3px 0}
.clip-x{position:absolute;top:8px;right:10px;appearance:none;border:0;background:transparent;color:var(--tf-text-3);font-size:18px;line-height:1;cursor:pointer;padding:2px 4px;border-radius:999px}
.clip-x:hover{color:var(--tf-black);background:rgba(0,0,0,.06)}
.clip-actions{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.clip-actions:empty{display:none}
.clip-act{appearance:none;font-family:var(--tf-sans);font-size:12.5px;font-weight:500;border-radius:999px;padding:6px 12px;border:1px solid var(--tf-black);background:var(--tf-white);color:var(--tf-black);cursor:pointer;transition:background .14s,color .14s}
.clip-act:hover{background:var(--tf-black);color:#fff}
.clip-act.pri{background:var(--tf-black);color:#fff}
.clip-act.pri:hover{background:var(--tf-blue);border-color:var(--tf-blue)}
.clip-restore{display:none;appearance:none;border:1px solid rgba(0,0,0,.1);background:rgba(255,255,255,.9);width:40px;height:40px;border-radius:999px;font-size:18px;cursor:pointer;box-shadow:0 8px 20px -10px rgba(0,0,0,.3)}
.clip-hidden .clip-body,.clip-hidden .clip-bubble{display:none}
.clip-hidden .clip-restore{display:block}
.tf-cyma .clip-bubble{background:rgba(255,255,255,.96)}
@keyframes clip-float{0%,100%{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-6px) rotate(3deg)}}
@keyframes clip-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
@keyframes clip-wiggle{0%,100%{transform:rotate(0)}25%{transform:rotate(-9deg)}75%{transform:rotate(9deg)}}
@keyframes clip-hop{0%{transform:translateY(0) scale(1)}40%{transform:translateY(-14px) scale(1.04,.96)}100%{transform:translateY(0) scale(1)}}
@keyframes clip-shiver{0%,100%{transform:translateX(0)}25%{transform:translateX(-2px)}75%{transform:translateX(2px)}}
@keyframes clip-breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.025)}}
@keyframes clip-pop{from{opacity:0;transform:translateY(8px) scale(.96)}to{opacity:1;transform:none}}
@media(max-width:720px){.clip-root .clip-body{width:56px;height:100px}.clip-bubble{max-width:min(300px,calc(100vw - 24px))}}
/* Clip is positioned by js/mascot.js; the bubble and restore button hang off the body */
.clip-root .clip-bubble{position:absolute;right:-8px;bottom:calc(100% + 14px);width:max-content;max-width:min(300px,calc(100vw - 24px))}
.clip-left .clip-bubble{right:auto;left:-8px;border-radius:18px 18px 18px 4px}
.clip-left .clip-bubble::after{right:auto;left:28px;border-right:0;border-left:1px solid rgba(0,0,0,.08);transform:rotate(-45deg)}
.clip-root .clip-restore{position:absolute;right:0;bottom:0}
/* shield Clip from page-level bare button styles (sign-in and setup pages colour every button) */
.clip-root button{width:auto;min-width:0;margin:0;letter-spacing:normal;text-transform:none}
.clip-root .clip-body,.clip-root .clip-body:hover,.clip-root .clip-body:focus{width:56px;height:100px;padding:0;border:0;border-radius:0;background:transparent;box-shadow:none;color:inherit}
.clip-root .clip-x,.clip-root .clip-x:hover{width:auto;padding:2px 6px;border:0;border-radius:999px;font-size:18px;font-weight:400;color:var(--x-text-3);background:transparent}
.clip-root .clip-x:hover{color:var(--x-navy);background:rgba(0,0,0,.06)}
.clip-root .clip-act{padding:6px 12px;border-radius:999px;font-size:12.5px;font-weight:500}
.clip-root .clip-act:not(.pri){background:#fff;color:var(--x-navy);border:1px solid var(--x-navy)}
.clip-root .clip-act:not(.pri):hover{background:var(--x-navy);color:#fff}
.clip-root .clip-act.pri{background:var(--x-navy);color:#fff;border:1px solid var(--x-navy)}
.clip-root .clip-act.pri:hover{background:var(--x-blue);border-color:var(--x-blue)}
/* pet mode */
.clip-walking .clip-body{animation:clip-walk .42s ease-in-out infinite}
.clip-walking.clip-face-left .clip-svg{transform:scaleX(-1)}
.clip-spin .clip-body{animation:clip-spin .9s cubic-bezier(.4,0,.2,1)}
.clip-bounce .clip-body{animation:clip-bounce 1s ease}
.clip-stretch .clip-body{animation:clip-stretchy 1.4s ease}
@keyframes clip-walk{0%,100%{transform:translateY(0) rotate(-5deg)}50%{transform:translateY(-6px) rotate(5deg)}}
@keyframes clip-spin{to{transform:rotate(360deg)}}
@keyframes clip-bounce{0%,100%{transform:translateY(0)}20%{transform:translateY(-26px) rotate(-6deg)}40%{transform:translateY(0) scale(1.06,.94)}60%{transform:translateY(-12px) rotate(5deg)}80%{transform:translateY(0)}}
@keyframes clip-stretchy{0%,100%{transform:scale(1)}30%{transform:scale(.94,1.12)}60%{transform:scale(1.05,.95)}}
@media print{.clip-root{display:none}}

/* ============================================================================
   10. REDUCED MOTION
   ========================================================================== */
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}