/* Nyro design system, prototype v0.1
   Layout concept: calm grey canvas, white working surfaces, dark grey ink; light mint highlights and a touch of
   purple (logo, links, small labels). Status always pairs text, icon and colour. */
:root{
  /* Brand (owner decision, 5 November 2026): dark grey with light mint, and a touch of purple for the logo, links and
     small labels. --brand is the dark grey (an organization's theme changes it); --lemon keeps its name but is the mint
     highlight; --nyro is the colour of Nyro's own name. Status colours stay functional. */
  --brand:#2F3237; --brand-2:#43474E; --brand-3:#5A5F67; --lemon:#A8E6CB; --lemon-soft:#DDF4EA; --purple:#0E7490; --mint-ink:#174F39; --mint-hover:#F1ECFA;
  /* Nyro's own colour for its logo and name: an organization's theme changes --brand (header included), never this */
  --nyro:#2F3237;
  /* Neutrals (neutral greys) */
  --bg:#F4F5F6; --surface:#FFFFFF; --surface-2:#F0F1F3; --surface-3:#E7E9EC;
  --line:#E1E3E5; --line-2:#CDD0D4;
  --fg:#1F2226; --fg-2:#4A4E55; --fg-3:#6B6F76; --fg-inv:#FFFFFF;
  /* Interaction: links and focus are the purple touch */
  --focus:#0E7490; --link:#0E7490;
  /* Status (never used alone: always with a label and an icon) */
  --ok:#137A48; --ok-bg:#E5F4EC; --ok-line:#B9E2CB;
  --warn:#9A5800; --warn-bg:#FFF3DB; --warn-line:#F5D59A;
  --bad:#B42318; --bad-bg:#FDECEA; --bad-line:#F6C3BD;
  --info:#326573; --info-bg:#ECF7FA; --info-line:#D0EBF2;
  --neutral:#4F535A; --neutral-bg:#EEEFF1; --neutral-line:#D7DADE;
  /* Chart series for the payslip breakdown */
  --s-net:#2F3237; --s-tax:#0E7490; --s-gov:#7FCFAE; --s-ben:#D0EBF2;
  /* Type */
  --sans:"Geist",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --mono:"Geist Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --t-xs:12px; --t-sm:13px; --t-md:14px; --t-lg:16px; --t-xl:20px; --t-2xl:24px; --t-3xl:32px; --t-4xl:44px;
  /* Shape and depth */
  --r-sm:6px; --r-md:10px; --r-lg:14px; --r-xl:20px;
  --sh-1:0 1px 2px rgba(16,24,40,.05);
  --sh-2:0 1px 3px rgba(16,24,40,.06),0 6px 16px rgba(16,24,40,.06);
  --sh-3:0 12px 40px rgba(16,24,40,.18);
  --bar-h:44px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--fg);font-family:var(--sans);font-size:var(--t-md);line-height:1.5;-webkit-font-smoothing:antialiased}
button,input,select,textarea{font:inherit;color:inherit}
a{color:var(--link)}
h1,h2,h3,h4{margin:0;text-wrap:balance;letter-spacing:-.01em}
p{margin:0}
:focus-visible{outline:2px solid var(--focus);outline-offset:2px;border-radius:4px}
.num{font-variant-numeric:tabular-nums}
.mono{font-family:var(--mono);font-size:.92em}
.muted{color:var(--fg-3)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.ico{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.ico--sm{width:15px;height:15px}
.ico--lg{width:22px;height:22px}

/* ---------- Prototype bar ---------- */
.pbar{position:sticky;top:0;z-index:50;height:var(--bar-h);background:var(--brand);color:rgba(255,255,255,.85);display:flex;align-items:center;gap:14px;padding:0 16px;font-size:var(--t-sm)}
.pbar__tag{display:inline-flex;align-items:center;gap:8px;white-space:nowrap}
.pbar__tag b{color:#fff;font-weight:600}
.pbar__pill{font-family:var(--mono);font-size:11px;letter-spacing:.04em;text-transform:uppercase;color:var(--nyro);background:var(--lemon);padding:2px 7px;border-radius:99px}
.pbar__note{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.pbar__sp{flex:1}
.pbar a{color:#fff;text-decoration:none}
.pbar__links{display:flex;gap:2px}
.pbar__links a{padding:5px 10px;border-radius:7px;white-space:nowrap}
.pbar__links a:hover{background:rgba(255,255,255,.08)}
.pbar__links a[aria-current="page"]{background:rgba(255,255,255,.14)}
.seg-d{display:inline-flex;background:rgba(255,255,255,.08);border-radius:8px;padding:2px}
.seg-d button{border:0;background:none;color:#C9D2E6;padding:4px 9px;border-radius:6px;cursor:pointer;font-size:12px;font-weight:500;white-space:nowrap}
.seg-d button[aria-pressed="true"]{background:#fff;color:var(--brand)}
.review-flag{font-size:11px;color:var(--lemon);white-space:nowrap}
.pbar__jsel{display:none}
.pbar__jsel select{appearance:none;-webkit-appearance:none;background:rgba(255,255,255,.1) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 8px center/14px;color:#fff;border:0;border-radius:8px;padding:6px 28px 6px 10px;font-size:12.5px;font-weight:500;cursor:pointer}
.pbar__jsel select option{color:#101828}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:38px;padding:0 14px;border-radius:var(--r-md);border:1px solid var(--line-2);background:var(--surface);color:var(--fg);font-weight:500;cursor:pointer;text-decoration:none;white-space:nowrap;transition:background .15s,border-color .15s,box-shadow .15s}
.btn:hover{background:var(--surface-2)}
.btn--primary{background:var(--brand);border-color:var(--brand);color:#fff}
.btn--primary:hover{background:var(--brand-2)}
.btn--lemon{background:var(--lemon);border-color:var(--lemon);color:var(--brand);font-weight:600}
.btn--lemon:hover{background:#92DDBB}
.btn--ghost{border-color:transparent;background:transparent;color:var(--fg-2)}
.btn--ghost:hover{background:var(--surface-2);color:var(--fg)}
.btn--danger{color:var(--bad);border-color:var(--bad-line)}
.btn--danger:hover{background:var(--bad-bg)}
.btn--sm{min-height:32px;padding:0 10px;font-size:var(--t-sm);border-radius:8px}
.btn--lg{min-height:48px;padding:0 20px;font-size:var(--t-lg);border-radius:12px}
.btn--block{width:100%}
.btn:disabled,.btn[aria-disabled="true"]{opacity:.45;cursor:not-allowed}
.btn:disabled:hover{background:inherit}
.btn--primary:disabled:hover{background:var(--brand)}
.linkbtn{border:0;background:none;padding:0;color:var(--link);cursor:pointer;font-weight:500;text-decoration:underline;text-underline-offset:2px}

/* ---------- Status ---------- */
.st{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:600;line-height:1;padding:5px 9px 5px 7px;border-radius:99px;border:1px solid;white-space:nowrap}
.st .ico{width:13px;height:13px;stroke-width:2.2}
.st--ok{color:var(--ok);background:var(--ok-bg);border-color:var(--ok-line)}
.st--warn{color:var(--warn);background:var(--warn-bg);border-color:var(--warn-line)}
.st--bad{color:var(--bad);background:var(--bad-bg);border-color:var(--bad-line)}
.st--info{color:var(--info);background:var(--info-bg);border-color:var(--info-line)}
.st--neutral{color:var(--neutral);background:var(--neutral-bg);border-color:var(--neutral-line)}
.tag{display:inline-flex;align-items:center;gap:4px;font-size:11.5px;font-weight:500;color:var(--fg-2);background:var(--surface-2);border-radius:6px;padding:2px 7px;white-space:nowrap}

/* ---------- Surfaces ---------- */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh-1)}
.card__hd{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 20px;border-bottom:1px solid var(--line)}
.card__hd h2,.card__hd h3{font-size:var(--t-lg);font-weight:600}
.card__bd{padding:20px}
.eyebrow{font-family:var(--mono);font-size:11px;letter-spacing:.07em;text-transform:uppercase;color:var(--purple)}
.kv{display:grid;grid-template-columns:auto 1fr;gap:8px 16px}
.kv dt{color:var(--fg-3)}
.kv dd{margin:0;text-align:right;font-variant-numeric:tabular-nums}

/* ---------- Forms ---------- */
.field{display:flex;flex-direction:column;gap:6px;min-width:0}
.field>label,.field .lbl{font-weight:500;font-size:var(--t-sm);color:var(--fg)}
.field .hint{font-size:var(--t-sm);color:var(--fg-3)}
.input,.select{width:100%;min-height:44px;padding:10px 12px;border:1px solid var(--line-2);border-radius:var(--r-md);background:var(--surface);transition:border-color .15s,box-shadow .15s}
.input:hover,.select:hover{border-color:#B5BDCC}
.input:focus,.select:focus{outline:0;border-color:var(--focus);box-shadow:0 0 0 3px rgba(47,107,232,.18)}
.input[aria-invalid="true"]{border-color:var(--bad);box-shadow:0 0 0 3px rgba(180,35,24,.1)}
.input--code{font-family:var(--mono);font-size:22px;letter-spacing:.4em;text-align:center}
.ferr{display:flex;gap:6px;align-items:flex-start;color:var(--bad);font-size:var(--t-sm)}
.fok{display:flex;gap:6px;align-items:center;color:var(--ok);font-size:var(--t-sm)}
.why{display:flex;gap:10px;padding:12px 14px;background:var(--info-bg);border-radius:var(--r-md);color:#1D3F86;font-size:var(--t-sm)}
.why .ico{color:var(--info);margin-top:1px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.grid3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:16px}
.stack{display:flex;flex-direction:column;gap:16px}
.row{display:flex;align-items:center;gap:10px}
.choice{display:flex;gap:12px;align-items:flex-start;padding:14px 16px;border:1px solid var(--line-2);border-radius:var(--r-md);cursor:pointer;background:var(--surface)}
.choice:has(input:checked){border-color:var(--brand);box-shadow:0 0 0 1px var(--brand);background:#FAFBFD}
.choice input{margin-top:3px;accent-color:var(--brand);width:16px;height:16px}
.choice b{display:block;font-weight:600}
.choice span{color:var(--fg-3);font-size:var(--t-sm)}
.check{display:flex;gap:10px;align-items:flex-start;cursor:pointer}
.check input{margin-top:3px;accent-color:var(--brand);width:16px;height:16px;flex:none}
.seg{display:inline-flex;background:var(--surface-2);border-radius:10px;padding:3px}
.seg button{border:0;background:none;padding:7px 14px;border-radius:8px;font-weight:500;color:var(--fg-2);cursor:pointer;font-size:var(--t-sm)}
.seg button[aria-pressed="true"]{background:var(--surface);color:var(--fg);box-shadow:var(--sh-1)}

/* ---------- Brand ---------- */
.logo{display:inline-flex;align-items:center;gap:9px;text-decoration:none;color:var(--nyro)}
.logo b{font-size:19px;font-weight:600;letter-spacing:-.02em;white-space:nowrap}
.logo b span{font-weight:500;color:#6A4FB3} /* "Workforce" in Nyro purple (owner, 6 Nov 2026); light purple #C4B5F5 on dark backgrounds */
.ob__rail .logo b span{color:#6A4FB3}
.logo small{font-size:11px;color:var(--fg-3);font-weight:500}

/* ---------- Launcher ---------- */
.launch{max-width:1120px;margin:0 auto;padding:56px 24px 80px}
.launch__hero{display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:center;margin-bottom:48px}
.launch__hero h1{font-size:var(--t-4xl);line-height:1.08;font-weight:600;letter-spacing:-.03em;margin:22px 0 14px}
.launch__hero h1 span{background:linear-gradient(transparent 62%,var(--lemon) 62%,var(--lemon) 92%,transparent 92%)}
.launch__hero p.lede{font-size:var(--t-lg);color:var(--fg-2);max-width:56ch}
.launch__sim{margin-top:20px;display:flex;gap:10px;padding:12px 14px;border:1px dashed var(--line-2);border-radius:var(--r-md);color:var(--fg-2);font-size:var(--t-sm);max-width:60ch;background:var(--surface)}
.launch__art{position:relative;height:340px}
.journeys{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.journey{display:flex;flex-direction:column;gap:12px;padding:22px;text-decoration:none;color:inherit;transition:border-color .15s,box-shadow .15s,transform .15s}
.journey:hover{border-color:var(--line-2);box-shadow:var(--sh-2)}
.journey__top{display:flex;justify-content:space-between;align-items:center}
.journey h3{font-size:var(--t-xl);font-weight:600}
.journey p{color:var(--fg-2)}
.journey__who{display:flex;align-items:center;gap:10px;margin-top:auto;padding-top:12px;border-top:1px solid var(--line);font-size:var(--t-sm);color:var(--fg-2)}
.journey__go{display:inline-flex;align-items:center;gap:6px;font-weight:600;color:var(--brand)}
.launch__foot{display:flex;gap:16px;flex-wrap:wrap;justify-content:space-between;align-items:center;margin-top:28px;color:var(--fg-3);font-size:var(--t-sm)}

/* ---------- Avatars ---------- */
.av{display:inline-grid;place-items:center;width:32px;height:32px;border-radius:50%;background:var(--surface-3);color:var(--brand-3);font-weight:600;font-size:12px;flex:none}
.av--sq{border-radius:9px}
.av--lg{width:44px;height:44px;font-size:15px}
.av--c1{background:#DCE6FA;color:#23448F}.av--c2{background:#E3F1E8;color:#1B6A41}.av--c3{background:#FBE9D6;color:#8A4B06}.av--c4{background:#E4F4F8;color:#275D6C}.av--c5{background:#FBE3E3;color:#9B2C2C}.av--c6{background:#E1F2F4;color:#1D6670}

/* ---------- Employer shell ---------- */
.ad{display:grid;grid-template-columns:260px minmax(0,1fr);min-height:calc(100vh - var(--bar-h))}
.side{position:sticky;top:var(--bar-h);height:calc(100vh - var(--bar-h));background:var(--surface);border-right:1px solid var(--line);display:flex;flex-direction:column;padding:18px 14px;gap:18px;overflow-y:auto}
.side__brand{padding:2px 8px}
.cosw{position:relative}
.cosw__btn{display:flex;align-items:center;gap:10px;width:100%;padding:9px 10px;border:1px solid var(--line);border-radius:12px;background:var(--surface);cursor:pointer;text-align:left}
.cosw__btn:hover{border-color:var(--line-2)}
.cosw__btn b{display:block;font-weight:600;font-size:var(--t-sm);line-height:1.3}
.cosw__btn span{display:block;font-size:12px;color:var(--fg-3)}
.cosw__btn>div{min-width:0;flex:1}
.cosw__btn>.av,.side__foot>.av{display:inline-grid}
.ptmore>summary{cursor:pointer;font-weight:600;font-size:13.5px}
/* the Nyro Workspace console's own sign-in: dark, so it is never mistaken for the organizations' page */
.stsign{min-height:calc(100vh - 40px);display:grid;place-items:center;padding:32px 16px;background:radial-gradient(1200px 600px at 20% -10%,#3A3E45 0%,#22252A 55%,#17191C 100%)}
.stsign__card{width:100%;max-width:440px;background:#1B1D21;border:1px solid rgba(255,255,255,.12);border-radius:20px;padding:28px;color:#fff;display:flex;flex-direction:column;gap:14px;box-shadow:0 24px 60px rgba(0,0,0,.45)}
.stsign__card .logo,.stsign__card .logo *{color:#fff}
.stsign__card .logo b span{color:#C4B5F5}
.stsign__card h1{margin:0;font-size:26px;color:#fff}
.stsign__card p{margin:0;color:rgba(255,255,255,.75)}
.stsign__card label{color:rgba(255,255,255,.85)}
.stsign__card .input{background:#121315;border-color:rgba(255,255,255,.2);color:#fff}
.stsign__eyebrow{align-self:flex-start;font-size:11.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#A8E6CB;border:1px solid rgba(168,230,203,.45);border-radius:999px;padding:3px 10px}
.stsign__card .btn--primary{background:#A8E6CB;color:#22252A;border-color:#A8E6CB}
.stsign__rules{list-style:none;margin:4px 0 0;padding:0;display:flex;flex-direction:column;gap:8px;font-size:13px;color:rgba(255,255,255,.7)}
.stsign__rules li{display:flex;gap:8px;align-items:flex-start}
.stsign__alt{font-size:13px;color:rgba(255,255,255,.7);text-decoration:underline}
.txauth{border-left:5px solid var(--txc,#B42318)}
.txauth--RQ{--txc:#1F4E9E}
.txgov{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:10px}
.txgov__btn{--txc:#B42318;display:flex;flex-direction:column;align-items:flex-start;gap:6px;text-align:left;padding:14px 16px;border:2px solid var(--line);border-radius:12px;background:var(--surface);color:var(--fg);font:inherit;cursor:pointer}
.txgov__btn.txauth--RQ{--txc:#1F4E9E}
.txgov__btn b{font-size:15.5px;font-weight:600}
.txgov__btn .muted{font-size:12.5px}
.txgov__btn:hover{border-color:var(--txc)}
.txgov__btn[aria-pressed="true"]{border-color:var(--txc);box-shadow:inset 5px 0 0 var(--txc);background:var(--surface-2)}
.txauth__badge{display:inline-block;background:var(--txc,#B42318);color:#fff;font-size:11.5px;font-weight:600;letter-spacing:.02em;padding:3px 8px;border-radius:6px}
.txcards{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:10px}
.txex{border:1px dashed var(--line-2,var(--line));border-radius:12px;padding:14px;display:flex;flex-direction:column;gap:12px;background:var(--surface-2,#F8FAFC)}
.txex__tbl td,.txex__tbl th{font-size:12.5px;padding:6px 10px}
.txex__cols{margin:6px 0 0;display:grid;grid-template-columns:auto 1fr;gap:6px 12px;font-size:13px}
.txex__cols dt{font-weight:600}
.txex__cols dd{margin:0;color:var(--fg-2)}
.txex__rules{margin:6px 0 0;padding-left:18px;font-size:13px;color:var(--fg-2);display:flex;flex-direction:column;gap:4px}
.txcard{border:1px solid var(--line);border-radius:12px;padding:12px;display:flex;flex-direction:column;gap:10px;background:var(--surface)}
.menu{position:absolute;left:0;right:0;top:calc(100% + 6px);background:var(--surface);border:1px solid var(--line);border-radius:12px;box-shadow:var(--sh-3);padding:6px;z-index:30}
.menu__item{display:flex;align-items:center;gap:10px;width:100%;padding:9px 10px;border:0;background:none;border-radius:8px;cursor:pointer;text-align:left}
.menu__item:hover{background:var(--hover-purple)}
.menu__item b{display:block;font-size:var(--t-sm);font-weight:600}
.menu__item span{display:block;font-size:12px;color:var(--fg-3)}
.menu__item>div{flex:1;min-width:0}
.menu__sep{height:1px;background:var(--line);margin:6px 4px}
.nav{display:flex;flex-direction:column;gap:2px}
.nav a{display:flex;align-items:center;gap:11px;padding:9px 10px;border-radius:9px;color:var(--fg-2);text-decoration:none;font-weight:500}
.nav a:hover{background:var(--mint-hover);color:var(--fg)}
.nav a[aria-current="page"]{background:var(--surface-2);color:var(--brand);font-weight:600}
.nav a .count{margin-left:auto;font-size:11px;font-weight:600;background:var(--warn-bg);color:var(--warn);border-radius:99px;padding:1px 7px}
.nav__lbl{font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--fg-3);padding:0 10px;margin:8px 0 4px}
.side__foot{margin-top:auto;display:flex;align-items:center;gap:10px;padding:10px;border-top:1px solid var(--line)}
.side__foot b{display:block;font-size:var(--t-sm)}
.side__foot span{display:block;font-size:12px;color:var(--fg-3)}
.mtop{display:none}
.main{padding:28px 36px 64px;min-width:0}
.main__in{max-width:1220px;margin:0 auto;display:flex;flex-direction:column;gap:20px}
.ph{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap}
.ph h1{font-size:var(--t-2xl);font-weight:600;line-height:1.2}
.ph p{color:var(--fg-2);margin-top:4px}
.ph__actions{display:flex;gap:8px;flex-wrap:wrap}
.crumb{display:flex;align-items:center;gap:6px;font-size:var(--t-sm);color:var(--fg-3);margin-bottom:8px}
.crumb a{color:var(--fg-3);text-decoration:none}
.crumb a:hover{color:var(--fg)}

/* Home */
.home-grid{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:20px;align-items:start}
.nextrun{padding:22px;display:flex;flex-direction:column;gap:18px}
.nextrun__top{display:flex;justify-content:space-between;gap:16px;align-items:flex-start;flex-wrap:wrap}
.nextrun h2{font-size:var(--t-xl);font-weight:600;margin-top:6px}
.nextrun__dates{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.datebox{padding:12px 14px;background:var(--surface-2);border-radius:var(--r-md)}
.datebox span{display:block;font-size:12px;color:var(--fg-3)}
.datebox b{display:block;font-weight:600;margin-top:2px}
.todo{display:flex;flex-direction:column}
.todo__item{display:flex;gap:12px;align-items:flex-start;padding:14px 20px;border-bottom:1px solid var(--line);text-align:left;background:none;border-left:0;border-right:0;border-top:0;width:100%;cursor:pointer}
.todo__item:last-child{border-bottom:0}
.todo__item:hover{background:#FAFBFC}
.todo__item b{display:block;font-weight:600}
.todo__item span{display:block;color:var(--fg-3);font-size:var(--t-sm)}
.todo__item>div{flex:1;min-width:0}
.todo__ico{width:32px;height:32px;border-radius:9px;display:grid;place-items:center;flex:none}
.todo__ico--warn{background:var(--warn-bg);color:var(--warn)}
.todo__ico--bad{background:var(--bad-bg);color:var(--bad)}
.todo__ico--info{background:var(--info-bg);color:var(--info)}
.todo__ico--ok{background:var(--ok-bg);color:var(--ok)}

/* Lifecycle */
.life{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:0;list-style:none;margin:0;padding:0}
.life li{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:8px;padding-right:8px;font-size:var(--t-sm);color:var(--fg-3)}
.life li::before{content:"";position:absolute;top:13px;left:28px;right:0;height:2px;background:var(--line)}
.life li:last-child::before{display:none}
.life li.done::before{background:var(--brand)}
.life__dot{position:relative;z-index:1;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:var(--surface);border:2px solid var(--line-2);color:var(--fg-3)}
.life__dot .ico{width:14px;height:14px;stroke-width:2.4}
.life li.done .life__dot{background:var(--brand);border-color:var(--brand);color:#fff}
.life li.now .life__dot{border-color:var(--brand);color:var(--brand);box-shadow:0 0 0 4px rgba(47,50,55,.08)}
.life li.now{color:var(--fg);font-weight:600}
.life li.done{color:var(--fg-2)}
.life li.fail .life__dot{border-color:var(--bad);color:var(--bad)}

/* Pay run */
.runhead{padding:22px;display:flex;flex-direction:column;gap:20px}
.runhead__top{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;align-items:flex-start}
.runhead h1{font-size:var(--t-2xl);font-weight:600;margin-top:6px}
.runhead__meta{display:flex;flex-wrap:wrap;gap:6px 18px;color:var(--fg-2);font-size:var(--t-sm);margin-top:6px}
.runhead__meta span{display:inline-flex;align-items:center;gap:6px}
.totals{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface);overflow:hidden}
.total{padding:16px 20px;border-right:1px solid var(--line)}
.total:last-child{border-right:0}
.total span{display:block;font-size:var(--t-sm);color:var(--fg-3)}
.total b{display:block;font-size:var(--t-2xl);font-weight:600;letter-spacing:-.02em;margin-top:4px;font-variant-numeric:tabular-nums}
.total small{display:block;font-size:12px;color:var(--fg-3);margin-top:2px}
.total--em{background:#FBFCFE}
.run-grid{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:20px;align-items:start}
.run-side{display:flex;flex-direction:column;gap:20px;position:sticky;top:calc(var(--bar-h) + 20px)}
.checks{display:flex;flex-direction:column}
.chk{display:flex;gap:12px;padding:14px 18px;border-bottom:1px solid var(--line)}
.chk:last-child{border-bottom:0}
.chk>div{flex:1;min-width:0;display:flex;flex-direction:column;gap:6px}
.chk b{font-weight:600}
.chk p{font-size:var(--t-sm);color:var(--fg-2)}
.chk__acts{display:flex;gap:6px;flex-wrap:wrap;margin-top:2px}
.chk__done{display:flex;align-items:center;gap:6px;font-size:12.5px;color:var(--ok);font-weight:500}
.chk__sev{width:30px;height:30px;border-radius:8px;display:grid;place-items:center;flex:none}
.blocker{font-size:11px;font-weight:600;color:var(--bad);text-transform:uppercase;letter-spacing:.05em}
.fund{display:flex;flex-direction:column;gap:10px}
.fund__row{display:flex;justify-content:space-between;gap:10px;font-variant-numeric:tabular-nums}
.fund__row span{color:var(--fg-2)}
.fund__row--total{border-top:1px solid var(--line);padding-top:10px;font-weight:600}
.submit-note{display:flex;gap:8px;align-items:flex-start;font-size:var(--t-sm);color:var(--fg-2)}
.tblbar{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:14px 18px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.search{position:relative;display:flex;align-items:center}
.search .ico{position:absolute;left:10px;color:var(--fg-3);width:16px;height:16px}
.search input{min-height:36px;padding:6px 10px 6px 32px;border:1px solid var(--line-2);border-radius:9px;width:240px;max-width:100%;background:var(--surface)}
.search input:focus{outline:0;border-color:var(--focus);box-shadow:0 0 0 3px rgba(47,107,232,.18)}
.tblwrap{overflow-x:auto}
.tbl{width:100%;border-collapse:separate;border-spacing:0;font-size:var(--t-sm)}
.tbl th{position:sticky;top:0;background:var(--surface-2);text-align:left;font-weight:500;color:var(--fg-3);padding:10px 14px;border-bottom:1px solid var(--line);white-space:nowrap;font-size:12px}
.tbl td{padding:12px 14px;border-bottom:1px solid var(--line);vertical-align:middle;white-space:nowrap}
.tbl tr:last-child td{border-bottom:0}
.tbl tbody tr{cursor:pointer}
.tbl tbody tr:hover td{background:#FAFBFD}
.tbl .r{text-align:right;font-variant-numeric:tabular-nums}
.tbl tfoot td{font-weight:600;background:var(--surface-2);border-top:1px solid var(--line);border-bottom:0}
.who{display:flex;align-items:center;gap:10px}
.who b{display:block;font-weight:600;color:var(--fg)}
.who span{display:block;font-size:12px;color:var(--fg-3)}
.var{display:inline-flex;align-items:center;gap:4px;font-variant-numeric:tabular-nums;font-weight:500}
.var--up{color:var(--warn)}.var--down{color:var(--warn)}.var--flat{color:var(--fg-3)}
.mrows{display:none}
.mrow{display:flex;flex-direction:column;gap:8px;padding:14px 16px;border-bottom:1px solid var(--line);background:none;border-left:0;border-right:0;border-top:0;width:100%;text-align:left;cursor:pointer}
.mrow__top{display:flex;justify-content:space-between;gap:10px;align-items:center}
.mrow__nums{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;font-size:12px;color:var(--fg-3)}
.mrow__nums b{display:block;font-size:var(--t-md);color:var(--fg);font-variant-numeric:tabular-nums}

/* Approval evidence */
.evidence{display:flex;flex-direction:column;gap:14px;padding:20px;border-radius:var(--r-lg);background:linear-gradient(180deg,#FBFCFE,#F4F7FC);border:1px solid var(--info-line)}
.evidence__top{display:flex;gap:12px;align-items:center}
.evidence__seal{width:40px;height:40px;border-radius:12px;background:var(--brand);color:var(--lemon);display:grid;place-items:center;flex:none}
.evidence dl{display:grid;grid-template-columns:auto 1fr;gap:6px 16px;margin:0;font-size:var(--t-sm)}
.evidence dt{color:var(--fg-3)}
.evidence dd{margin:0;font-weight:500;overflow-wrap:anywhere}
.protoctl{border:1px dashed var(--line-2);border-radius:var(--r-md);padding:14px;display:flex;flex-direction:column;gap:10px;background:var(--surface)}
.protoctl .eyebrow{color:var(--fg-3)}

/* People */
.steps-mini{display:flex;gap:3px}
.steps-mini i{width:16px;height:6px;border-radius:3px;background:var(--line)}
.steps-mini i.on{background:var(--brand)}
.mask{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:13px}

/* ---------- Drawer and modal ---------- */
.ovl{position:fixed;inset:0;background:rgba(47,50,55,.34);z-index:60;display:flex;justify-content:flex-end;animation:fade .15s ease}
.drawer{width:min(520px,100%);height:100%;background:var(--surface);display:flex;flex-direction:column;box-shadow:var(--sh-3);animation:slide .22s cubic-bezier(.2,.8,.2,1)}
.drawer__hd{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;padding:20px 22px;border-bottom:1px solid var(--line)}
.drawer__hd h2{font-size:var(--t-xl);font-weight:600}
.drawer__bd{flex:1;overflow-y:auto;padding:20px 22px;display:flex;flex-direction:column;gap:20px}
.drawer__ft{display:flex;justify-content:flex-end;gap:8px;padding:14px 22px;border-top:1px solid var(--line);flex-wrap:wrap}
.xbtn{border:0;background:none;padding:6px;border-radius:8px;cursor:pointer;color:var(--fg-3);display:grid;place-items:center}
.xbtn:hover{background:var(--surface-2);color:var(--fg)}
.ovl--center{justify-content:center;align-items:center;padding:16px}
.modal{width:min(440px,100%);background:var(--surface);border-radius:var(--r-xl);box-shadow:var(--sh-3);padding:26px;display:flex;flex-direction:column;gap:18px;animation:pop .2s cubic-bezier(.2,.8,.2,1)}
.modal h2{font-size:var(--t-xl);font-weight:600}
.modal__ico{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;background:var(--surface-2);color:var(--brand)}
.lines{display:flex;flex-direction:column}
.line{display:flex;justify-content:space-between;gap:12px;align-items:center;padding:11px 0;border-bottom:1px solid var(--line);background:none;border-left:0;border-right:0;border-top:0;width:100%;text-align:left;cursor:pointer;color:inherit}
.line:hover .line__lbl{color:var(--link)}
.line__lbl{display:flex;align-items:center;gap:6px}
.line__lbl .ico{color:var(--fg-3);width:14px;height:14px}
.line__amt{font-variant-numeric:tabular-nums;font-weight:500}
.line--total{font-weight:600;cursor:default;border-bottom:0}
.line--total:hover .line__lbl{color:inherit}
.secttl{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:4px}
.secttl h3{font-size:var(--t-md);font-weight:600}
.secttl small{color:var(--fg-3);font-size:12px}
.expl{display:flex;flex-direction:column;gap:12px;padding:14px;border-radius:var(--r-md);background:var(--surface-2)}
.expl__steps{font-family:var(--mono);font-size:12.5px;display:flex;flex-direction:column;gap:4px;color:var(--fg)}
.rulechip{display:inline-flex;gap:6px;align-items:center;font-size:12px;color:var(--fg-2)}
.illus{font-size:12px;color:var(--warn);display:flex;gap:6px;align-items:flex-start}
.meter{height:8px;border-radius:99px;background:var(--surface-3);overflow:hidden}
.meter i{display:block;height:100%;background:var(--brand);border-radius:99px}
.meter-lbl{display:flex;justify-content:space-between;font-size:12px;color:var(--fg-3);font-variant-numeric:tabular-nums;margin-top:6px}

/* ---------- Toast ---------- */
.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:90;background:var(--brand);color:#fff;border-radius:12px;padding:12px 16px;box-shadow:var(--sh-3);display:flex;gap:10px;align-items:center;font-weight:500;max-width:calc(100vw - 32px);animation:pop .2s ease}
.toast .ico{color:var(--lemon)}

/* ---------- Employee app (mobile first) ---------- */
.stage{display:grid;grid-template-columns:minmax(0,320px) auto;justify-content:center;gap:56px;padding:36px 24px;align-items:start;min-height:calc(100vh - var(--bar-h))}
.stage__notes{position:sticky;top:calc(var(--bar-h) + 36px);display:flex;flex-direction:column;gap:16px;padding-top:40px}
.stage__notes h2{font-size:var(--t-2xl);font-weight:600;line-height:1.2}
.stage__notes p{color:var(--fg-2)}
.try{display:flex;flex-direction:column;gap:10px;padding:16px;border-radius:var(--r-lg);background:var(--surface);border:1px solid var(--line)}
.try li{margin-left:18px;color:var(--fg-2);font-size:var(--t-sm)}
.try ul{margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.device{position:relative;width:390px;height:min(820px,calc(100vh - var(--bar-h) - 72px));min-height:640px;border-radius:46px;border:11px solid #0B1426;background:var(--bg);box-shadow:0 30px 80px rgba(47,50,55,.25),0 0 0 1px #2A3550;overflow:hidden;display:flex;flex-direction:column}
.device::before{content:"";position:absolute;top:8px;left:50%;transform:translateX(-50%);width:96px;height:26px;border-radius:20px;background:#0B1426;z-index:40}
.screen{flex:1;overflow-y:auto;overflow-x:hidden;padding-top:42px;scroll-behavior:smooth}
.etop{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 18px}
.emp-co{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line);background:var(--surface);border-radius:99px;padding:5px 10px 5px 5px;font-weight:600;font-size:var(--t-sm);cursor:pointer;max-width:250px}
.emp-co span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.emp-co .av{width:24px;height:24px;font-size:10px}
.ebody{padding:6px 18px 110px;display:flex;flex-direction:column;gap:16px}
.ehello{font-size:var(--t-2xl);font-weight:600;letter-spacing:-.02em;margin-top:4px}
.paycard{position:relative;overflow:hidden;border-radius:22px;background:var(--brand);color:#fff;padding:20px;display:flex;flex-direction:column;gap:14px}
.paycard::after{content:"";position:absolute;right:-60px;top:-70px;width:210px;height:210px;border-radius:50%;border:2px solid rgba(168,230,203,.55);transform:rotate(-20deg) scaleY(.38)}
.paycard .eyebrow{color:#AEB9D3}
.paycard__amt{font-size:38px;font-weight:600;letter-spacing:-.03em;font-variant-numeric:tabular-nums;line-height:1}
.paycard__sub{color:#C9D2E6;font-size:var(--t-sm)}
.paycard__wait{display:flex;gap:10px;align-items:flex-start;background:rgba(255,255,255,.07);border-radius:12px;padding:12px;font-size:var(--t-sm);color:#DCE3F2}
.paycard__wait .ico{color:var(--lemon)}
.paycard .st{align-self:flex-start}
.ecard{background:var(--surface);border:1px solid var(--line);border-radius:18px;overflow:hidden}
.ecard__hd{display:flex;justify-content:space-between;align-items:center;padding:14px 16px 6px}
.ecard__hd h3{font-size:var(--t-md);font-weight:600}
.erow{display:flex;align-items:center;gap:12px;padding:13px 16px;border:0;border-top:1px solid var(--line);background:none;width:100%;text-align:left;cursor:pointer;color:inherit;text-decoration:none}
.erow:first-of-type{border-top:0}
.erow>div{flex:1;min-width:0}
.erow b{display:block;font-weight:600}
.erow span{display:block;color:var(--fg-3);font-size:12.5px}
.erow .amt{font-variant-numeric:tabular-nums;font-weight:600;text-align:right}
.erow .ico.chev{color:var(--fg-3)}
.eicon{width:36px;height:36px;border-radius:11px;display:grid;place-items:center;background:var(--surface-2);color:var(--brand);flex:none}
.eicon--warn{background:var(--warn-bg);color:var(--warn)}
.tabbar{position:absolute;left:0;right:0;bottom:0;display:grid;grid-template-columns:repeat(5,1fr);background:rgba(255,255,255,.94);backdrop-filter:blur(10px);border-top:1px solid var(--line);padding:8px 6px 22px;z-index:20}
.tabbar a{display:flex;flex-direction:column;align-items:center;gap:3px;font-size:11px;font-weight:500;color:var(--fg-3);text-decoration:none;padding:4px 0;border-radius:8px}
.tabbar a[aria-current="page"]{color:var(--brand);font-weight:600}
.ehead{display:flex;align-items:center;gap:8px;padding:8px 12px}
.ehead h1{font-size:var(--t-lg);font-weight:600;flex:1;text-align:center;margin-right:36px}
.backbtn{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;border:0;background:var(--surface);box-shadow:var(--sh-1);color:var(--fg);text-decoration:none;cursor:pointer}
.slip-hero{text-align:center;padding:10px 0 4px;display:flex;flex-direction:column;align-items:center;gap:6px}
.slip-hero .amt{font-size:42px;font-weight:600;letter-spacing:-.03em;font-variant-numeric:tabular-nums;line-height:1.05}
.slip-hero p{color:var(--fg-2);font-size:var(--t-sm)}
.slip-hero p .ico{vertical-align:-3px}
.bar-split{display:flex;height:12px;border-radius:99px;overflow:hidden;gap:2px}
.bar-split i{display:block;height:100%}
.legend{display:grid;grid-template-columns:1fr 1fr;gap:8px 14px;font-size:12.5px}
.legend div{display:flex;align-items:center;gap:7px;color:var(--fg-2)}
.legend i{width:10px;height:10px;border-radius:3px;flex:none}
.legend b{margin-left:auto;color:var(--fg);font-variant-numeric:tabular-nums;font-weight:600}
.epad{padding:14px 16px}
.eline{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 16px;border:0;border-top:1px solid var(--line);background:none;width:100%;text-align:left;cursor:pointer;color:inherit;font-size:var(--t-md)}
.eline:first-child{border-top:0}
.eline__l{display:flex;flex-direction:column;min-width:0}
.eline__l small{color:var(--fg-3);font-size:12px}
.eline__r{display:flex;align-items:center;gap:6px;font-variant-numeric:tabular-nums;font-weight:500;white-space:nowrap}
.eline__r .ico{color:var(--fg-3);width:15px;height:15px}
.eline--total{font-weight:600;background:var(--surface-2);cursor:default}
.sheet-ovl{position:absolute;inset:0;background:rgba(47,50,55,.36);z-index:45;display:flex;align-items:flex-end;animation:fade .15s ease}
.sheet{width:100%;max-height:88%;overflow-y:auto;background:var(--surface);border-radius:24px 24px 0 0;padding:10px 20px 30px;display:flex;flex-direction:column;gap:16px;animation:up .25s cubic-bezier(.2,.8,.2,1)}
.sheet__grab{width:40px;height:5px;border-radius:99px;background:var(--line-2);margin:0 auto 4px}
.sheet__hd{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.sheet__hd h2{font-size:var(--t-xl);font-weight:600}
.sheet__amt{font-size:var(--t-3xl);font-weight:600;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.timeline{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.timeline li{position:relative;display:flex;gap:12px;padding-bottom:16px}
.timeline li:last-child{padding-bottom:0}
.timeline li::before{content:"";position:absolute;left:11px;top:24px;bottom:0;width:2px;background:var(--line)}
.timeline li:last-child::before{display:none}
.timeline__dot{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;flex:none;background:var(--surface-2);color:var(--fg-3);border:2px solid var(--line-2)}
.timeline__dot .ico{width:12px;height:12px;stroke-width:2.6}
.timeline li.done .timeline__dot{background:var(--ok);border-color:var(--ok);color:#fff}
.timeline li.now .timeline__dot{border-color:var(--brand);color:var(--brand);background:var(--surface)}
.timeline b{display:block;font-weight:600;font-size:var(--t-sm)}
.timeline span{display:block;color:var(--fg-3);font-size:12.5px}
.empty{display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px;padding:28px 20px;color:var(--fg-2)}
.empty .eicon{width:48px;height:48px;border-radius:14px}
.empty b{color:var(--fg);font-size:var(--t-lg)}

/* ---------- Payslip document (PDF copy) ---------- */
.docview{padding:14px 14px 150px;background:var(--surface-3);min-height:100%}
.paper-fit{position:relative;width:100%;overflow:hidden}
.paper{position:absolute;left:0;top:0;width:816px;min-height:1056px;background:#fff;color:#101828;padding:34px 56px 28px;transform-origin:top left;box-shadow:0 1px 3px rgba(16,24,40,.12),0 8px 24px rgba(16,24,40,.08);font-size:12.5px;line-height:1.45;display:flex;flex-direction:column;gap:12px}
.pp-head{display:flex;justify-content:space-between;align-items:flex-start;gap:24px;padding-bottom:10px;border-bottom:2px solid var(--brand)}
.pp-co{font-size:22px;font-weight:600;letter-spacing:-.01em;color:var(--brand)}
.pp-addr{color:#465066;margin-top:4px}
.pp-title{text-align:right;display:flex;flex-direction:column}
.pp-title b{font-size:22px;font-weight:600;color:var(--brand)}
.pp-title span{color:#737D93}
.pp-meta{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.pp-box{border:1px solid #E3E6ED;border-radius:10px;padding:12px 16px;display:flex;flex-direction:column;gap:2px;margin:0}
.pp-box span{color:#465066}
.pp-lbl{font-family:var(--mono);font-size:10.5px;letter-spacing:.07em;text-transform:uppercase;color:#737D93;margin-bottom:4px}
.pp-name{font-size:18px;font-weight:600;color:var(--brand)}
.pp-dl{display:grid;grid-template-columns:auto 1fr;gap:5px 16px;align-content:start}
.pp-dl dt{color:#737D93}
.pp-dl dd{margin:0;text-align:right;font-weight:500}
.pp-net{display:flex;justify-content:space-between;align-items:center;gap:20px;background:var(--brand);color:#fff;border-radius:12px;padding:14px 20px}
.pp-net>div:first-child{display:flex;flex-direction:column}
.pp-net .pp-lbl{color:#AEB9D3}
.pp-net>div:first-child b{font-size:30px;font-weight:600;letter-spacing:-.02em;font-variant-numeric:tabular-nums;line-height:1.1}
.pp-net span{color:#C9D2E6;font-size:12px}
.pp-sum{display:flex;gap:24px}
.pp-sum div{display:flex;flex-direction:column;text-align:right}
.pp-sum b{font-size:15px;font-weight:600;font-variant-numeric:tabular-nums}
.pp-tbl{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums;font-size:12px}
.pp-box span,.pp-dl{font-size:12px}
.pp-tbl caption{text-align:left;font-weight:600;font-size:13.5px;padding-bottom:4px;color:var(--brand)}
.pp-tbl th{font-size:11px;font-weight:500;color:#737D93;text-align:left;padding:4px 8px;border-bottom:1px solid #CBD1DC}
.pp-tbl td{padding:4px 8px;border-bottom:1px solid #EEF0F4}
.pp-tbl .r{text-align:right}
.pp-tbl tfoot td{font-weight:600;border-bottom:0;border-top:1px solid #CBD1DC;background:#F5F6F9}
.pp-tbl--muted td{color:#465066}
.pp-sub{color:#737D93;font-size:11px}
.pp-foot{margin-top:auto;padding-top:10px;border-top:1px solid #E3E6ED;color:#737D93;font-size:11px;display:flex;flex-direction:column;gap:3px}
.pp-proto{color:#9A5800}
.pp-brand{display:flex;align-items:center;gap:6px;margin-top:6px;color:#465066;font-weight:500}
.docbar{position:absolute;left:0;right:0;bottom:0;background:rgba(255,255,255,.96);backdrop-filter:blur(10px);border-top:1px solid var(--line);padding:12px 16px 22px;display:flex;flex-direction:column;gap:8px;z-index:20}
.docbar__file{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--fg-3);min-width:0}
.docbar__file span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.docfull{position:fixed;inset:var(--bar-h) 0 0 0;z-index:80;background:rgba(47,50,55,.62);overflow-y:auto;padding:16px 16px 40px}
.docfull__bar{max-width:816px;margin:0 auto 12px;display:flex;justify-content:space-between;align-items:center;gap:12px;color:#fff;font-size:13px;flex-wrap:wrap}
.docfull__bar>span:first-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.paper-fit--full{max-width:816px;margin:0 auto}

/* ---------- Time and attendance ---------- */
.ta-seg{align-self:stretch;display:grid;grid-template-columns:repeat(3,1fr)}
.ta-seg button{padding:9px 6px}
.ta-count{display:inline-grid;place-items:center;min-width:18px;height:18px;border-radius:99px;background:var(--info);color:#fff;font-size:11px;font-weight:600;margin-left:2px}
.ta-card{border-radius:22px;padding:18px;display:flex;flex-direction:column;gap:12px;background:var(--surface);border:1px solid var(--line)}
.ta-card--working{background:linear-gradient(180deg,#EEF8F2,#FFFFFF 70%);border-color:var(--ok-line)}
.ta-card--onbreak,.ta-card--assignment{background:linear-gradient(180deg,#EEF3FD,#FFFFFF 70%);border-color:var(--info-line)}
.ta-card--away{background:linear-gradient(180deg,#F1F2F6,#FFFFFF 70%);border-color:var(--neutral-line)}
.ta-card__top{display:flex;flex-direction:column;gap:4px}
.ta-state{display:flex;align-items:center;gap:10px;font-size:22px;font-weight:600;letter-spacing:-.02em;line-height:1.2}
.ta-state .ico{width:24px;height:24px}
.ta-card--working .ta-state{color:var(--ok)}
.ta-since{color:var(--fg-2);font-size:var(--t-sm);font-variant-numeric:tabular-nums}
.ta-shift{display:flex;align-items:center;gap:7px;color:var(--fg-2);font-size:var(--t-sm)}
.ta-shift .ico{color:var(--fg-3)}
.ta-card__acts{display:flex;flex-direction:column;gap:10px;margin-top:2px}
.ta-big{min-height:58px;border-radius:16px;font-size:17px;font-weight:600;width:100%}
.ta-out{background:var(--surface);border:1.5px solid var(--brand);color:var(--brand)}
.ta-out:hover{background:var(--surface-2)}
.ta-tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.ta-tile{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;min-height:78px;padding:10px 6px;border-radius:14px;border:1px solid var(--line);background:var(--surface);cursor:pointer;font-weight:600;font-size:13px;color:var(--fg);text-align:center}
.ta-tile:hover{border-color:var(--line-2);background:var(--surface-2)}
.ta-tile .ico{color:var(--brand)}
.ta-alt{align-self:center;font-size:var(--t-sm)}
.ta-note{display:flex;gap:7px;align-items:flex-start;font-size:12.5px;color:var(--fg-2);text-align:left;text-decoration:none}
.ta-note .ico{margin-top:2px;color:var(--fg-3);flex:none}
button.ta-note{color:var(--link)}
.ta-sum{display:grid;grid-template-columns:repeat(auto-fit,minmax(90px,1fr));gap:10px}
.ta-sum div{background:var(--surface-2);border-radius:12px;padding:10px 12px}
.ta-sum span{display:block;font-size:12px;color:var(--fg-3)}
.ta-sum b{font-size:18px;font-weight:600;font-variant-numeric:tabular-nums}
.ta-pending{display:flex;align-items:center;gap:8px;padding:10px 12px;border-radius:12px;background:var(--warn-bg);color:var(--warn);font-size:13px;font-weight:500}
.ta-pending span{flex:1}
.ta-home{display:flex;flex-direction:column;gap:10px}
.ta-home .ta-card{padding:16px}
.ta-home .ta-state{font-size:19px}
.ta-tl{list-style:none;margin:0;padding:4px 16px 12px;display:flex;flex-direction:column}
.ta-tl li{display:flex;gap:12px;padding:10px 0;border-top:1px solid var(--line)}
.ta-tl li:first-child{border-top:0}
.ta-tl__time{width:68px;flex:none;color:var(--fg-2);font-size:var(--t-sm);padding-top:1px}
.ta-tl b{font-weight:600;font-size:var(--t-sm)}
.ta-tl__meta{display:flex;flex-wrap:wrap;gap:6px 10px;margin-top:5px}
.ta-meta{display:inline-flex;align-items:center;gap:4px;font-size:12px;color:var(--fg-3)}
.ta-meta .ico{width:13px;height:13px}
.ta-orig b{color:var(--fg-3);text-decoration:line-through}
.ta-hrow{display:flex;flex-direction:column;align-items:flex-end;gap:4px}
.ta-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.ta-list li{display:flex;gap:10px;align-items:flex-start;font-size:var(--t-sm);color:var(--fg)}
.ta-list li .ico{color:var(--brand);margin-top:2px;flex:none}
.live-dot{width:12px;height:12px;border-radius:50%;background:var(--ok);box-shadow:0 0 0 4px rgba(19,122,72,.15);flex:none}
@media (prefers-reduced-motion:no-preference){.live-dot{animation:pulse 2s ease-in-out infinite}}
@keyframes pulse{50%{box-shadow:0 0 0 8px rgba(19,122,72,.04)}}
.sheet-ovl--center{align-items:center;justify-content:center;padding:24px}
.os-alert{width:270px;background:rgba(242,242,247,.97);border-radius:14px;overflow:hidden;text-align:center;box-shadow:var(--sh-3);animation:pop .2s ease}
.os-alert__bd{padding:18px 16px 14px;display:flex;flex-direction:column;gap:6px}
.os-alert__bd b{font-size:15px;font-weight:600}
.os-alert__bd p{font-size:12.5px;color:#3C3C43;line-height:1.4}
.os-alert button{display:block;width:100%;border:0;border-top:1px solid rgba(60,60,67,.2);background:none;padding:11px;font-size:16px;color:#0A64D8;cursor:pointer}
.os-alert button:hover{background:rgba(0,0,0,.04)}
.ta-prog{display:flex;flex-direction:column;gap:14px;padding:8px 4px}
.ta-prog__row{display:flex;align-items:center;gap:12px;font-weight:500;color:var(--fg-3)}
.ta-prog__row.now{color:var(--fg)}
.ta-prog__row.done{color:var(--ok)}
.spin{width:20px;height:20px;border-radius:50%;border:2.5px solid var(--line);border-top-color:var(--brand);flex:none}
@media (prefers-reduced-motion:no-preference){.spin{animation:spin .8s linear infinite}}
@keyframes spin{to{transform:rotate(360deg)}}
.faceid{align-self:center;width:120px;height:120px;border-radius:28px;background:rgba(47,50,55,.88);color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;font-size:13px}
.faceid .ico{width:52px;height:52px;stroke-width:1.4;color:#7EE2A8}
.ta-result{display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px}
.ta-result__ico{width:60px;height:60px;border-radius:50%;display:grid;place-items:center;background:var(--ok-bg);color:var(--ok)}
.ta-result__ico.is-pending{background:var(--warn-bg);color:var(--warn)}
.ta-result h2{font-size:var(--t-xl);font-weight:600}
.ta-demo-btn{font-size:12px}
.hr-tabs{display:flex;gap:4px;border-bottom:1px solid var(--line);overflow-x:auto}
.hr-tabs button{border:0;background:none;padding:10px 14px;font-weight:500;color:var(--fg-2);cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px;display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.hr-tabs button:hover{background:var(--hover-purple);color:var(--fg);border-radius:8px 8px 0 0}
.hr-tabs button[aria-selected="true"]{color:var(--brand);border-bottom-color:var(--brand);font-weight:600}
.hr-tabs .count{font-size:11px;font-weight:600;background:var(--warn-bg);color:var(--warn);border-radius:99px;padding:1px 7px}
.hr-tiles{grid-template-columns:repeat(5,minmax(0,1fr))}
.site-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px}
.site-map{display:flex;flex-direction:column;gap:8px;font-size:12px;color:var(--fg-3)}
.site-map svg{width:100%;height:auto;border-radius:12px;border:1px solid var(--line)}
@media (max-width:1024px){.hr-tiles{grid-template-columns:repeat(3,minmax(0,1fr))}.hr-tiles .total:nth-child(3){border-right:0}.site-grid{grid-template-columns:1fr}}
@media (max-width:560px){.hr-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}.ta-tiles .ta-tile{font-size:12px}}

/* ---------- Employee 360 profile ---------- */
.av--xl{width:64px;height:64px;font-size:22px;border-radius:50%}
.av--xxl{width:96px;height:96px;font-size:32px;border-radius:50%}
.av--photo{object-fit:cover;padding:0;background:var(--surface-3)}
.mephoto{display:flex;gap:20px;align-items:center}
@media (max-width:520px){.mephoto{flex-direction:column;align-items:flex-start}}
label.btn.is-disabled{opacity:.5;pointer-events:none}
.prof-head{padding:22px;display:flex;flex-direction:column;gap:20px}
.prof-top{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;align-items:flex-start}
.prof-id{display:flex;gap:16px;align-items:flex-start;min-width:0}
.prof-id h1{font-size:var(--t-2xl);font-weight:600;line-height:1.2}
.prof-id p{color:var(--fg-2);margin-top:2px}
.prof-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px;align-items:center}
.prof-tiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--line);padding-top:16px;gap:16px}
.prof-tiles div{display:flex;flex-direction:column;gap:2px;min-width:0}
.prof-tiles span{font-size:var(--t-sm);color:var(--fg-3)}
.prof-tiles b{font-size:var(--t-xl);font-weight:600;letter-spacing:-.01em}
.prof-tiles small{font-size:12px;color:var(--fg-3)}
.prof-access{display:flex;gap:8px;align-items:flex-start;font-size:12.5px;color:var(--fg-3)}
.prof-access .ico{margin-top:2px;flex:none}
.prof-grid{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:20px;align-items:start}
.prof-kv dd{text-align:right}
.prof-kv dt{white-space:nowrap}
.prof-line{display:flex;gap:8px;align-items:center;font-size:var(--t-sm);color:var(--fg-2)}
.prof-line .ico{color:var(--fg-3);flex:none}
.prof-act{padding:0}
.prof-act .ta-tl__time{width:22px;color:var(--fg-3)}
.prof-sum{grid-template-columns:repeat(6,minmax(0,1fr))}
.goal{display:flex;flex-direction:column;gap:6px}
.goal b{font-weight:600;font-size:var(--t-sm)}
.bars{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;height:170px;align-items:end;padding-bottom:4px}
.bar{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:6px;height:100%}
.bar i{display:block;width:100%;max-width:42px;border-radius:8px 8px 4px 4px;background:var(--s-tax)}
.bar i.is-flag{background:var(--warn-line)}
.bar__v{font-size:11.5px;color:var(--fg-2);white-space:nowrap}
.bar__d{font-size:12px;color:var(--fg-3)}
.rating{display:inline-flex;align-items:center;font-weight:600;font-size:var(--t-sm);padding:5px 12px;border-radius:99px;background:var(--surface-2);color:var(--brand)}
.rating--exceeds{background:var(--ok-bg);color:var(--ok)}
.rating--developing{background:var(--warn-bg);color:var(--warn)}
.fb{margin:0;padding:12px 14px;border-left:3px solid var(--line-2);background:var(--surface-2);border-radius:0 10px 10px 0}
.fb p{font-size:var(--t-sm)}
.fb footer{margin-top:6px;font-size:12px;color:var(--fg-3)}
@media (max-width:1180px){.prof-grid{grid-template-columns:1fr}.prof-sum{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:680px){.prof-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}.prof-sum{grid-template-columns:repeat(2,minmax(0,1fr))}.prof-id{flex-direction:column}}

/* ---------- Onboarding ---------- */
.ob{display:grid;grid-template-columns:300px minmax(0,1fr);min-height:calc(100vh - var(--bar-h))}
/* the onboarding side panel stays white with any branding, the Nyro default included (owner, 3 Nov 2026) */
.ob__rail{background:#FFFFFF;border-right:1px solid var(--line);color:#465066;padding:28px 24px;display:flex;flex-direction:column;gap:28px;position:sticky;top:var(--bar-h);height:calc(100vh - var(--bar-h))}
.ob__rail .logo{color:var(--nyro)}
.ob__rail .logo small{color:#737D93}
.ob__co{display:flex;gap:10px;align-items:center;padding:12px;border-radius:12px;background:#F5F6F9;border:1px solid var(--line)}
.ob__co b{display:block;color:#101828;font-size:var(--t-sm)}
.ob__co span{display:block;font-size:12px}
.obsteps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px}
.obsteps li{display:flex;align-items:center;gap:12px;padding:9px 10px;border-radius:10px;font-size:var(--t-sm)}
.obsteps li.now{background:#F0F2F6;color:#101828;font-weight:600}
.obsteps li.done{color:#101828}
.obsteps i{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;border:1.5px solid #CBD1DC;font-style:normal;font-size:11px;flex:none}
.obsteps li.done i{background:var(--lemon);border-color:var(--lemon);color:var(--nyro)}
.obsteps li.now i{border-color:var(--brand)}
.obsteps i .ico{width:12px;height:12px;stroke-width:3}
.ob__help{margin-top:auto;font-size:12.5px;line-height:1.5}
.ob__help b{color:#101828;display:block;margin-bottom:2px}
.ob__main{padding:48px 32px 80px;display:flex;justify-content:center}
.ob__card{width:100%;max-width:600px;display:flex;flex-direction:column;gap:24px}
.ob__card h1{font-size:var(--t-3xl);font-weight:600;line-height:1.15;letter-spacing:-.025em}
.ob__card .lede{color:var(--fg-2);font-size:var(--t-lg)}
.ob__mprog{display:none}
.ob__foot{display:flex;justify-content:space-between;gap:10px;padding-top:8px;flex-wrap:wrap}
.saved{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;color:var(--fg-3)}
.welcome{display:flex;flex-direction:column;gap:22px}
.welcome__mail{border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface);overflow:hidden}
.welcome__mail header{display:flex;gap:10px;align-items:center;padding:12px 16px;border-bottom:1px solid var(--line);font-size:var(--t-sm);color:var(--fg-3)}
.welcome__mail section{padding:22px;display:flex;flex-direction:column;gap:12px}
.qr{width:132px;height:132px;border-radius:12px;background:var(--surface);border:1px solid var(--line);padding:10px;display:grid;grid-template-columns:repeat(11,1fr);gap:2px}
.qr i{background:var(--brand);border-radius:1px}
.qr i.o{background:transparent}
.pwrules{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px;font-size:var(--t-sm)}
.pwrules li{display:flex;align-items:center;gap:6px;color:var(--fg-3)}
.pwrules li.ok{color:var(--ok)}
.doc{display:flex;gap:12px;align-items:center;padding:14px 16px;border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface)}
.doc>div{flex:1;min-width:0}
.doc b{display:block;font-weight:600}
.doc span{display:block;font-size:12.5px;color:var(--fg-3)}
.review-sec{display:flex;flex-direction:column;gap:8px;padding:16px;border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface)}
.review-sec header{display:flex;justify-content:space-between;align-items:center}
.review-sec h3{font-size:var(--t-md);font-weight:600}
.done-hero{display:flex;flex-direction:column;align-items:flex-start;gap:16px}
.done-badge{width:64px;height:64px;border-radius:20px;background:var(--lemon);color:var(--brand);display:grid;place-items:center}
.done-badge .ico{width:30px;height:30px;stroke-width:2.4}

/* ---------- Style guide ---------- */
.sg{max-width:1120px;margin:0 auto;padding:40px 24px 80px;display:flex;flex-direction:column;gap:36px}
.sg h1{font-size:var(--t-3xl);font-weight:600}
.sg h2{font-size:var(--t-xl);font-weight:600;margin-bottom:14px}
.sg section>p{color:var(--fg-2);margin-bottom:14px;max-width:70ch}
.swatches{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
.sw{border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--surface)}
.sw i{display:block;height:64px}
.sw div{padding:10px 12px;font-size:12px}
.sw b{display:block;font-size:13px}
.typerow{display:flex;align-items:baseline;gap:20px;padding:10px 0;border-bottom:1px solid var(--line)}
.typerow code{width:120px;flex:none;font-family:var(--mono);font-size:12px;color:var(--fg-3)}
.sgrid{display:flex;flex-wrap:wrap;gap:10px;align-items:center}

@keyframes fade{from{opacity:0}}
@keyframes slide{from{transform:translateX(40px);opacity:.4}}
@keyframes up{from{transform:translateY(60px);opacity:.4}}
@keyframes pop{from{transform:scale(.97);opacity:0}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

/* ---------- Responsive ---------- */
@media (max-width:1520px){.tbl .c-rate{display:none}}
@media (max-width:1180px){.pbar__links{display:none}.pbar__jsel{display:block}}
@media (max-width:560px){.pbar__role{display:none}}
@media (max-width:440px){.pbar{gap:6px;padding:0 8px}.pbar__tag{display:none}.pbar__jsel select{max-width:120px}.seg-d button{padding:4px 7px}}
@media (max-width:1180px){
  .run-grid{grid-template-columns:1fr}
  .run-side{position:static}
  .home-grid{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:1024px){
  .totals{grid-template-columns:repeat(2,minmax(0,1fr))}
  .total:nth-child(2){border-right:0}
  .total:nth-child(-n+2){border-bottom:1px solid var(--line)}
  .launch__hero{grid-template-columns:minmax(0,1fr)}
  .launch__art{display:none}
  .stage{grid-template-columns:auto;gap:0}
  .stage__notes{display:none}
}
@media (max-width:900px){
  .pbar__note,.review-flag{display:none}
  .ad{grid-template-columns:1fr}
  .side{position:fixed;top:var(--bar-h);left:0;bottom:0;height:auto;width:min(300px,86vw);z-index:70;transform:translateX(-102%);transition:transform .2s;box-shadow:var(--sh-3)}
  .ad.navopen .side{transform:none}
  .ad.navopen::after{content:"";position:fixed;inset:var(--bar-h) 0 0 0;background:rgba(47,50,55,.3);z-index:65}
  .mtop{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 16px;background:var(--surface);border-bottom:1px solid var(--line);position:sticky;top:var(--bar-h);z-index:40}
  .main{padding:20px 16px 56px}
  .ob{grid-template-columns:minmax(0,1fr)}
  .ob__rail{display:none}
  .ob__mprog{display:flex;flex-direction:column;gap:8px}
  .ob__main{padding:24px 16px 64px}
}
@media (max-width:899px){
  .stage{padding:0;display:block}
  .device{width:100%;height:auto;min-height:calc(100vh - var(--bar-h));border:0;border-radius:0;box-shadow:none;overflow:visible}
  .device::before{display:none}
  .screen{padding-top:6px;overflow:visible}
  .tabbar{position:fixed;padding-bottom:calc(10px + env(safe-area-inset-bottom,0px))}
  .sheet-ovl{position:fixed;top:var(--bar-h)}
  .docbar{position:fixed;padding-bottom:calc(12px + env(safe-area-inset-bottom,0px))}
}
@media (max-width:680px){
  .pbar{gap:8px;padding:0 10px}
  .pbar__tag b{display:none}
  .pbar__links a{padding:5px 7px;font-size:12px}
  .tblwrap{display:none}
  .mrows{display:block}
  .nextrun__dates{grid-template-columns:1fr}
  .grid2,.grid3{grid-template-columns:1fr}
  .journeys{grid-template-columns:minmax(0,1fr)}
  .launch{padding:32px 16px 64px}
  .launch__hero h1{font-size:34px}
  .life li span.lbl{font-size:11px}
  .total b{font-size:var(--t-xl)}
  .total{padding:14px}
  .drawer__bd,.drawer__hd{padding-left:16px;padding-right:16px}
  .ob__card h1{font-size:var(--t-2xl)}
}

/* =====================================================================
   Organization onboarding, subscriptions, public website, AppNyro platform
   ===================================================================== */

/* ---------- Public website: two provisional visual directions ---------- */
.lp{
  --lp-bg:#FFFFFF; --lp-alt:#F4F6FA; --lp-ink:#2F3237; --lp-text:#101828; --lp-text-2:#465066; --lp-line:#E3E6ED;
  --lp-primary:#2F3237; --lp-primary-h:#43474E; --lp-on:#FFFFFF; --lp-soft:#F2EEF9; --lp-accent:#0E7490; --lp-dark:#1C1E22; --lp-dark-2:#26292E; --lp-foot-h:#7CC8DC;
  background:var(--lp-bg); color:var(--lp-text); font-size:16px; line-height:1.6;
}
.lp[data-dir="b"]{
  --lp-bg:#FBF8F3; --lp-alt:#EDF5F2; --lp-ink:#14231F; --lp-text:#17211F; --lp-text-2:#4A5754; --lp-line:#E2DED5;
  --lp-primary:#0E6B63; --lp-primary-h:#0B5650; --lp-soft:#E1EFEB; --lp-accent:#0E6B63; --lp-dark:#10231F; --lp-dark-2:#18332E; --lp-foot-h:#9ED8CC;
}
.lp-in{max-width:1200px;margin:0 auto;padding:0 24px}
.lp h1,.lp h2,.lp h3{color:var(--lp-ink)}
.lp a{color:var(--lp-link,var(--lp-primary))}
/* colour palettes (prototype choice); every palette passes WCAG AA text contrast */
.lp[data-pal="navy"]{--lp-bg:#FFFFFF;--lp-alt:#F4F6FA;--lp-ink:#2F3237;--lp-text:#101828;--lp-text-2:#465066;--lp-line:#E3E6ED;--lp-primary:#2F3237;--lp-primary-h:#43474E;--lp-soft:#F2EEF9;--lp-accent:#0E7490;--lp-dark:#1C1E22;--lp-dark-2:#26292E;--lp-foot-h:#7CC8DC;--lp-link:#2F3237}
.lp[data-pal="teal"]{--lp-bg:#FBF8F3;--lp-alt:#EDF5F2;--lp-ink:#14231F;--lp-text:#17211F;--lp-text-2:#4A5754;--lp-line:#E2DED5;--lp-primary:#0E6B63;--lp-primary-h:#0B5650;--lp-soft:#E1EFEB;--lp-accent:#A8DCD1;--lp-dark:#10231F;--lp-dark-2:#18332E;--lp-foot-h:#9ED8CC;--lp-link:#0B5650}
.lp[data-pal="indigo"]{--lp-bg:#FFFFFF;--lp-alt:#F5F5FF;--lp-ink:#1E1B4B;--lp-text:#14122B;--lp-text-2:#4B4A63;--lp-line:#E4E3F0;--lp-primary:#3730A3;--lp-primary-h:#312E81;--lp-soft:#EEF0FF;--lp-accent:#FFC9B8;--lp-dark:#1E1B4B;--lp-dark-2:#2A2766;--lp-foot-h:#FFB4A2;--lp-link:#3730A3}
.lp[data-pal="forest"]{--lp-bg:#FCFBF7;--lp-alt:#F1F6F2;--lp-ink:#13291C;--lp-text:#15201A;--lp-text-2:#4A5A50;--lp-line:#E1E6E2;--lp-primary:#1F5133;--lp-primary-h:#173F27;--lp-soft:#E6F0EA;--lp-accent:#F6D88A;--lp-dark:#10241A;--lp-dark-2:#1A3527;--lp-foot-h:#F2C14E;--lp-link:#1F5133}
.lp[data-pal="plum"]{--lp-bg:#FFFFFF;--lp-alt:#FBF4F8;--lp-ink:#2E0F24;--lp-text:#241420;--lp-text-2:#5A4A55;--lp-line:#EEE2E9;--lp-primary:#6B2152;--lp-primary-h:#561A42;--lp-soft:#F7EAF2;--lp-accent:#F9C6DA;--lp-dark:#2A0D21;--lp-dark-2:#3D1532;--lp-foot-h:#F9C6DA;--lp-link:#6B2152}
.lp[data-pal="ocean"]{--lp-bg:#FFFFFF;--lp-alt:#F3F8FD;--lp-ink:#0A2540;--lp-text:#0D1B2A;--lp-text-2:#475569;--lp-line:#E2E8F0;--lp-primary:#0B5CAD;--lp-primary-h:#094B8E;--lp-soft:#E7F1FB;--lp-accent:#A7F0D5;--lp-dark:#0A2540;--lp-dark-2:#12345A;--lp-foot-h:#7EE0C3;--lp-link:#0A4F94}
.lp[data-pal="ember"]{--lp-bg:#FFFFFF;--lp-alt:#FAF7F5;--lp-ink:#1C1917;--lp-text:#1C1917;--lp-text-2:#57534E;--lp-line:#E7E5E4;--lp-primary:#C2410C;--lp-primary-h:#9A3412;--lp-soft:#FFF1E8;--lp-accent:#FED7AA;--lp-dark:#1C1917;--lp-dark-2:#292524;--lp-foot-h:#FB923C;--lp-link:#B13A0B}
.lp[data-pal="clay"]{--lp-bg:#FFFCF9;--lp-alt:#F8F1EB;--lp-ink:#2B1B14;--lp-text:#241812;--lp-text-2:#5C4B42;--lp-line:#ECE2D9;--lp-primary:#9C4A2F;--lp-primary-h:#7F3B25;--lp-soft:#F6ECE6;--lp-accent:#CFE3C1;--lp-dark:#2B1B14;--lp-dark-2:#3B271E;--lp-foot-h:#CFE3C1;--lp-link:#8A4128}

/* prototype control strip */
.lp-ctl{background:var(--surface-2);border-bottom:1px dashed var(--line-2);font-size:12.5px;color:var(--fg-2)}
.lp-ctl__in{display:flex;flex-wrap:wrap;align-items:center;gap:8px 20px;padding-top:8px;padding-bottom:8px}
.lp-ctl__g{display:inline-flex;align-items:center;gap:8px;flex-wrap:wrap}
.lp-ctl .seg button{padding:5px 11px;font-size:12px}
.lp-pals{display:inline-flex;flex-wrap:wrap;gap:6px}
.lp-sw{display:inline-flex;align-items:center;gap:6px;padding:4px 10px 4px 6px;border:1px solid var(--line-2);border-radius:99px;background:var(--surface);font-size:12px;font-weight:500;color:var(--fg-2);cursor:pointer}
.lp-sw i{display:inline-block;width:14px;height:14px;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(16,24,40,.12)}
.lp-sw i+i{margin-left:-9px}
.lp-sw:hover{border-color:var(--fg-3)}
.lp-sw[aria-pressed="true"]{border-color:var(--brand);box-shadow:0 0 0 2px var(--brand);color:var(--fg)}
.lp-ctl__n{font-size:11.5px;color:var(--fg-3)}

/* header */
.lp-nav{position:sticky;top:var(--bar-h);z-index:40;background:color-mix(in srgb,var(--lp-bg) 92%,transparent);backdrop-filter:saturate(1.4) blur(10px);-webkit-backdrop-filter:saturate(1.4) blur(10px);border-bottom:1px solid var(--lp-line)}
.lp-nav__in{display:flex;align-items:center;gap:24px;min-height:68px}
.lp-logo{display:inline-flex;align-items:center;gap:10px;text-decoration:none;color:var(--lp-ink)!important;flex:none}
.lp-logo b{display:block;font-size:18px;font-weight:600;letter-spacing:-.02em;line-height:1.1;white-space:nowrap}
.lp-logo b i{font-style:normal;font-weight:500;color:#6A4FB3}
.lp-logo small{display:block;font-size:11px;color:var(--lp-text-2);font-weight:500;letter-spacing:.01em}
.lp-logo--light,.lp-logo--light b{color:#fff!important}
.lp-logo--light small{color:#AEB9D3}
.lp-logo--light b i{color:#C4B5F5}
.lp-links{display:flex;align-items:center;gap:4px;flex:1}
.lp-link{display:inline-flex;align-items:center;gap:6px;border:0;background:none;padding:8px 12px;border-radius:9px;color:var(--lp-text)!important;font-weight:500;font-size:15px;cursor:pointer;text-decoration:none;white-space:nowrap}
.lp-link:hover{background:var(--lp-soft)}
.lp-dd{position:relative}
.lp-dd__menu{position:absolute;top:calc(100% + 8px);left:0;z-index:5;width:320px;background:#fff;border:1px solid var(--lp-line);border-radius:16px;box-shadow:var(--sh-3);padding:8px;display:flex;flex-direction:column;gap:2px;animation:pop .16s ease}
.lp-dd__item{display:flex;gap:12px;align-items:center;text-align:left;border:0;background:none;padding:10px;border-radius:12px;cursor:pointer;color:var(--lp-text)}
.lp-dd__item:hover{background:var(--lp-soft)}
.lp-dd__item b{display:block;font-weight:600;font-size:14.5px}
.lp-dd__item small{display:block;color:var(--lp-text-2);font-size:13px}
.lp-dd__item .eicon,.lp-anchor .eicon,.lp-steps .eicon,.lp-trust .eicon,.ws-incl2 .eicon{background:var(--lp-soft,var(--surface-2));color:var(--lp-primary,var(--brand))}
.lp-nav__act{display:flex;align-items:center;gap:8px;margin-left:auto}
.lp-btn{background:var(--lp-primary);border-color:var(--lp-primary);color:var(--lp-on)!important;font-weight:600;text-decoration:none}
.lp-btn:hover{background:var(--lp-primary-h)}
.lp-btn:disabled:hover{background:var(--lp-primary)}
.lp-btn2{background:transparent;border-color:color-mix(in srgb,var(--lp-ink) 30%,transparent);color:var(--lp-ink)!important;font-weight:600}
.lp-btn2:hover{background:var(--lp-soft)}
.lp-btn--lg{min-height:52px;padding:0 22px;font-size:16px;border-radius:12px}
.lp-burger{display:none;width:42px;height:42px;color:var(--lp-ink)}
.lp-mmenu{display:none}

/* early access banner */
.lp-early{background:var(--warn-bg);color:#6B3D00;border-bottom:1px solid var(--warn-line);font-size:14px}
.lp-early .lp-in{display:flex;gap:10px;align-items:flex-start;padding-top:10px;padding-bottom:10px}
.lp-early .ico{margin-top:3px;color:var(--warn)}

/* hero */
.lp-hero{padding:72px 0 88px;overflow:hidden}
.lp-hero__grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:56px;align-items:center}
.lp-eyebrow{display:inline-block;font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--lp-text-2)}
.lp-hero h1{font-size:clamp(36px,4.6vw,58px);line-height:1.05;font-weight:600;letter-spacing:-.035em;margin:18px 0 18px}
.lp-accent{background:linear-gradient(transparent 64%,var(--lp-accent) 64%,var(--lp-accent) 90%,transparent 90%);padding:0 2px}
.lp[data-dir="b"] .lp-accent{background:none;font-family:"Instrument Serif",Georgia,serif;font-style:italic;font-weight:400;color:var(--lp-primary);letter-spacing:-.01em;padding:0}
.lp-lede{font-size:18px;color:var(--lp-text-2);max-width:60ch;line-height:1.6}
.lp-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.lp-hero__note{display:flex;align-items:center;gap:8px;margin-top:18px;font-weight:500;color:var(--lp-ink);font-size:15px}
.lp-hero__note .ico{color:var(--ok)}
.lp-hero__help{margin-top:10px;font-size:14px;color:var(--lp-text-2)}
.lp-hero__art{margin:0;position:relative}
.lp-hero__stage{position:relative;padding:0 96px 64px 0}
.lp-hero__phone{position:absolute;right:-24px;bottom:0;filter:drop-shadow(0 18px 40px rgba(16,24,40,.28))}
.lp-ann{position:absolute;display:inline-flex;align-items:center;gap:6px;background:var(--lp-ink);color:#fff;font-size:12.5px;font-weight:600;padding:6px 11px;border-radius:99px;box-shadow:var(--sh-2);white-space:nowrap}
.lp[data-dir="b"] .lp-ann{background:var(--lp-primary)}
.lp-ann--a{top:-14px;left:18px}
.lp-ann--b{right:150px;bottom:20px}
.lp-hero__art figcaption,.lp-fig figcaption{display:flex;flex-wrap:wrap;gap:6px 10px;align-items:center;margin-top:14px;font-size:12.5px;color:var(--lp-text-2)}
.lp-pv{display:inline-flex;align-items:center;font-family:var(--mono);font-size:10.5px;letter-spacing:.07em;text-transform:uppercase;border:1px solid var(--lp-line);background:var(--lp-bg);border-radius:99px;padding:2px 8px;color:var(--lp-text-2)}

/* sections */
.lp-sec{padding:96px 0;scroll-margin-top:calc(var(--bar-h) + 70px)}
.lp-tint{background:var(--lp-alt)}
.lp-sec h2{font-size:clamp(28px,3.2vw,42px);line-height:1.12;font-weight:600;letter-spacing:-.03em;margin-bottom:16px;max-width:22ch}
.lp-sec h2:focus{outline:0}
.lp-center{text-align:center;margin-left:auto;margin-right:auto}
.lp-center h2,.lp-center .lp-lede,h2.lp-center{margin-left:auto;margin-right:auto}
.lp-intro{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:56px;align-items:start}
.lp-anchors{display:flex;flex-direction:column;gap:10px}
.lp-anchor{display:flex;align-items:center;gap:14px;width:100%;text-align:left;padding:16px 18px;border:1px solid var(--lp-line);border-radius:16px;background:var(--lp-bg);cursor:pointer;color:var(--lp-text);transition:border-color .15s,transform .15s}
.lp-anchor:hover{border-color:var(--lp-primary);transform:translateY(-1px)}
.lp-anchor>span:nth-child(2){flex:1;min-width:0}
.lp-anchor b{display:block;font-weight:600;font-size:16px;color:var(--lp-ink)}
.lp-anchor small{display:block;color:var(--lp-text-2);font-size:14px}
.lp-human{display:flex;gap:10px;align-items:flex-start;padding:14px 16px;border-radius:14px;background:var(--lp-soft);color:var(--lp-ink);font-size:14.5px;margin-top:6px}
.lp-human .ico{margin-top:3px;color:var(--lp-primary)}
.lp-split{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:64px;align-items:center}
.lp-split--rev{grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr)}
.lp-split--rev>.lp-split__copy{order:2}
.lp-split--att{align-items:start;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr)}
.lp-fig--phones .pvp{width:198px}
.lp-fig--phones .lp-phones{gap:14px}
.lp-split__copy{display:flex;flex-direction:column;gap:16px}
.lp-split__copy>p{font-size:17px;color:var(--lp-text-2);max-width:56ch}
.lp-split__copy h2{margin-bottom:0}
.lp-kicker{display:inline-flex;align-items:center;gap:8px;font-weight:600;font-size:14px;color:var(--lp-primary)}
.lp-note{display:flex;gap:9px;align-items:flex-start;font-size:14.5px;color:var(--lp-text-2)}
.lp-note .ico{margin-top:3px;color:var(--lp-primary)}
p.lp-note.lp-center{justify-content:center;max-width:72ch;margin-top:28px}
.lp-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.lp-list li{display:flex;gap:10px;align-items:flex-start;font-size:15.5px;flex-wrap:wrap}
.lp-list li>span:first-of-type{flex:1;min-width:200px}
.lp-list .ico{margin-top:4px;color:var(--ok)}
.lp-chip{display:inline-flex;align-items:center;font-size:11.5px;font-weight:600;border-radius:99px;padding:2px 9px;white-space:nowrap;margin-top:2px}
.lp-chip--preview{background:var(--info-bg);color:var(--info)}
.lp-chip--planned{background:transparent;color:var(--fg-2);border:1px dashed var(--line-2)}
.lp-avail{font-size:13.5px;color:var(--lp-text-2);padding-left:12px;border-left:3px solid var(--lp-line)}
.lp-more{display:inline-flex;align-items:center;gap:6px;font-weight:600;text-decoration:none;color:var(--lp-primary)!important}
.lp-more:hover{text-decoration:underline;text-underline-offset:3px}
.lp-privacy{border:1px solid var(--lp-line);border-radius:16px;padding:16px 18px;background:var(--lp-bg);display:flex;flex-direction:column;gap:10px}
.lp-privacy b{color:var(--lp-ink)}
.lp-privacy ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px;font-size:14.5px;color:var(--lp-text-2)}
.lp-privacy li{display:flex;gap:9px;align-items:flex-start}
.lp-privacy .ico{margin-top:4px;color:var(--bad)}
.lp-privacy a{font-weight:600;font-size:14.5px}
.lp-fig{margin:0;min-width:0}
.lp-fig__art{position:relative}
.lp-phones{display:flex;gap:18px;justify-content:center;align-items:flex-start}
.lp-phones__i{display:flex;flex-direction:column;align-items:center;gap:10px}
.lp-phones__l{font-size:12.5px;font-weight:600;color:var(--lp-text-2)}
.lp-phones__i:nth-child(2){margin-top:-18px}
.lp-review{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:48px;align-items:center;margin-top:72px}
.lp-review__copy{display:flex;flex-direction:column;gap:12px}
.lp-review__copy h3{font-size:24px;font-weight:600;letter-spacing:-.02em}
.lp-review__copy p{color:var(--lp-text-2);font-size:16px}
.lp-steps{list-style:none;margin:40px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;position:relative}
.lp-steps::before{content:"";position:absolute;left:12%;right:12%;top:38px;height:2px;background:linear-gradient(90deg,var(--lp-line),var(--lp-primary),var(--lp-line))}
.lp-steps li{position:relative;background:var(--lp-bg);border:1px solid var(--lp-line);border-radius:18px;padding:22px 20px;display:flex;flex-direction:column;gap:8px}
.lp-steps .eicon{width:44px;height:44px;border-radius:13px;margin-bottom:6px;box-shadow:0 0 0 6px var(--lp-bg)}
.lp-steps b{font-size:16.5px;color:var(--lp-ink)}
.lp-steps p{font-size:14.5px;color:var(--lp-text-2)}

/* pricing */
.lp-calc{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);margin-top:44px;background:var(--lp-bg);border:1px solid var(--lp-line);border-radius:22px;overflow:hidden;box-shadow:0 18px 50px rgba(16,24,40,.08)}
.lp-calc__in{padding:32px;display:flex;flex-direction:column;gap:20px}
.lp-calc__in h3{font-size:20px;font-weight:600}
.lp-calc__expl{font-size:14px;line-height:1.55}
.lp-calc__out{padding:32px;background:var(--lp-soft);display:flex;flex-direction:column;gap:16px;justify-content:center}
.lp-calc__trial{font-size:13.5px;color:var(--lp-text-2);text-align:center}
.lp-pricing__grid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:20px;margin-top:20px}
.lp-bandsec{margin-top:44px}
.lp-bandsec h3{font-size:20px;font-weight:600;margin-bottom:14px}
.lp .seg{background:color-mix(in srgb,var(--lp-ink) 7%,transparent)}
.lp .seg button[aria-pressed="true"]{color:var(--lp-ink)}
.lp .input:focus{border-color:var(--lp-primary)}

/* trust, FAQ, contact */
.lp-trust{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin:36px 0 28px}
.lp-trust>div{background:var(--lp-bg);border:1px solid var(--lp-line);border-radius:18px;padding:22px;display:flex;flex-direction:column;gap:8px}
.lp-trust b{font-size:16.5px;color:var(--lp-ink)}
.lp-trust p{font-size:14.5px;color:var(--lp-text-2)}
.lp-faq__list details{border-bottom:1px solid var(--lp-line)}
.lp-faq__list details:first-child{border-top:1px solid var(--lp-line)}
.lp-faq__list summary{list-style:none;cursor:pointer;padding:18px 36px 18px 0;font-weight:600;font-size:16.5px;color:var(--lp-ink);position:relative}
.lp-faq__list summary::-webkit-details-marker{display:none}
.lp-faq__list summary::after{content:"";position:absolute;right:8px;top:24px;width:9px;height:9px;border-right:2px solid var(--lp-text-2);border-bottom:2px solid var(--lp-text-2);transform:rotate(45deg);transition:transform .15s}
.lp-faq__list details[open] summary::after{transform:rotate(225deg);top:28px}
.lp-faq__list details p{padding:0 36px 20px 0;color:var(--lp-text-2);font-size:15.5px;max-width:68ch}
.lp-final{background:var(--lp-alt)}
.lp-final__grid{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:56px;align-items:start}
.lp-final__copy{display:flex;flex-direction:column;gap:6px;position:sticky;top:calc(var(--bar-h) + 96px)}
.lp-mailbox{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin-top:28px;padding:16px 18px;border-radius:16px;background:var(--lp-bg);border:1px solid var(--lp-line);font-size:15px}
.lp-mail{font-weight:600;font-size:16px;color:var(--lp-primary)!important;text-decoration:none}
.lp-mail:hover{text-decoration:underline}
.lp-form{padding:28px;display:flex;flex-direction:column;gap:16px;border-radius:20px}
.lp-form h3{font-size:20px;font-weight:600}
.lp-opt{font-weight:400}
.lp-ta{min-height:110px;resize:vertical;line-height:1.5}
.lp-bad{background:var(--bad-bg)!important;color:var(--bad)!important}
.lp-bad .ico{color:var(--bad)!important}
.lp-form__warn{background:var(--warn-bg);color:#6B3D00}
.lp-form__warn .ico{color:var(--warn)}
.lp-form__note{font-size:12.5px;text-align:center}
.lp-form__demo{border-top:1px dashed var(--line-2);padding-top:14px;display:flex;flex-direction:column;gap:8px}
.lp-form__demo .seg{flex-wrap:wrap}
.lp-form--done{align-items:flex-start;gap:12px}
.lp-form--done .done-badge{width:52px;height:52px;border-radius:16px}

/* footer */
.lp-foot{background:var(--lp-dark);color:#C9D2E6;padding:64px 0 28px;font-size:14.5px;border-top:3px solid var(--lp-foot-h)}
.lp-foot__grid{display:grid;grid-template-columns:minmax(0,1.5fr) repeat(3,minmax(0,1fr));gap:32px}
.lp-foot__brand{display:flex;flex-direction:column;gap:14px;max-width:34ch}
.lp-foot h3{color:var(--lp-foot-h)!important;font-size:13px;font-family:var(--mono);letter-spacing:.07em;text-transform:uppercase;font-weight:500;margin-bottom:12px}
.lp-foot__grid>div:not(.lp-foot__brand){display:flex;flex-direction:column;gap:8px;align-items:flex-start}
.lp-foot a,.lp-foot .linkbtn{color:#E3E8F3!important;text-decoration:none;font-weight:400;font-size:14.5px}
.lp-foot a:hover,.lp-foot .linkbtn:hover{color:var(--lp-foot-h)!important}
.lp-foot .lp-mail{color:#fff!important;font-weight:600}
.lp-foot__base{margin-top:40px;padding-top:20px;border-top:1px solid rgba(255,255,255,.1);font-size:13px;color:#8E9AB5}

/* security and legal pages */
.lp-doc{max-width:800px;display:flex;flex-direction:column;gap:18px}
.lp-doc h1{font-size:clamp(32px,4vw,46px);font-weight:600;letter-spacing:-.03em;line-height:1.1}
.lp-doc__s{padding-top:22px;border-top:1px solid var(--lp-line)}
.lp-doc__s h2{font-size:21px;margin-bottom:8px}
.lp-doc__s p{color:var(--lp-text-2);font-size:16px;max-width:68ch}

/* ---------- Product previews (HTML, synthetic data) ---------- */
.pvw{background:#fff;border:1px solid #DCE1EA;border-radius:16px;overflow:hidden;box-shadow:0 1px 2px rgba(16,24,40,.06),0 24px 60px rgba(16,24,40,.12);font-size:13px;color:var(--fg);text-align:left;line-height:1.45}
.pvw__bar{display:flex;align-items:center;gap:6px;height:34px;padding:0 12px;background:#F3F5F9;border-bottom:1px solid #E3E7EE;font-size:11.5px;color:var(--fg-3)}
.pvw__bar i{width:9px;height:9px;border-radius:50%;background:#D5DAE3}
.pvw__bar span{margin-left:8px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pvw__body{padding:16px}
.pva{display:grid;grid-template-columns:132px minmax(0,1fr);gap:0;padding:0}
.pva__side{display:flex;flex-direction:column;gap:3px;padding:14px 10px;border-right:1px solid #E9ECF2;background:#FBFCFD}
.pva__side svg{margin:0 0 10px 6px}
.pva__side span{display:flex;align-items:center;gap:8px;padding:7px 8px;border-radius:8px;color:var(--fg-2);font-weight:500;font-size:12.5px}
.pva__side span.on{background:var(--surface-2);color:var(--brand);font-weight:600}
.pva__main{padding:16px;display:flex;flex-direction:column;gap:14px;min-width:0}
.pva__hi{font-size:17px;font-weight:600;letter-spacing:-.01em}
.pva__tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.pva__tiles>div{border:1px solid #E7EAF0;border-radius:12px;padding:10px 12px;display:flex;flex-direction:column;gap:4px;min-width:0}
.pva__tiles span{font-size:11.5px;color:var(--fg-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pva__tiles b{font-size:18px;font-weight:600;letter-spacing:-.02em}
.pva__tiles small{font-size:11.5px;color:var(--fg-3)}
.pva__tiles .st{font-size:11px;align-self:flex-start}
.pva__list{display:flex;flex-direction:column;gap:2px}
.pva__list>div{display:flex;align-items:center;gap:9px;padding:8px 0;border-bottom:1px solid #EEF0F4;font-size:12.5px}
.pva__list>div:last-child{border-bottom:0}
.pva__list .ico{color:var(--warn)}
.pvp{position:relative;width:220px;border-radius:42px;border:8px solid #16181C;padding:8px 10px 18px;display:flex;flex-direction:column;gap:10px;font-size:12.5px;color:var(--fg);
  background:linear-gradient(#111,#111) bottom 6px center/72px 4px no-repeat,#F5F6F9;
  box-shadow:0 0 0 1.5px #6B7079,0 0 0 3px #2B2E33,inset 0 0 0 1px #000}
/* an iPhone: titanium edge, Dynamic Island, side buttons and the home bar */
.pvp::before{content:"";position:absolute;left:-13px;top:70px;width:3px;height:20px;border-radius:2px;background:#4A4F57;box-shadow:0 34px 0 0 #4A4F57,0 34px 0 0 #4A4F57,0 72px 0 0 #4A4F57}
.pvp::after{content:"";position:absolute;right:-13px;top:104px;width:3px;height:52px;border-radius:2px;background:#4A4F57}
.pvp__sig{display:inline-flex;align-items:center;gap:4px}
.pvp__sig svg{height:9px;fill:currentColor}
.pvp__batt{position:relative;width:20px;height:10px;border-radius:3px;border:1.3px solid currentColor;opacity:.9}
.pvp__batt::after{content:"";position:absolute;inset:1.3px 4px 1.3px 1.3px;border-radius:1.5px;background:currentColor}
.pvp__top{display:flex;justify-content:space-between;align-items:center;font-size:11px;font-weight:600;padding:2px 6px 0;color:var(--fg)}
.pvp__notch{width:66px;height:20px;border-radius:12px;background:#000}
.pvp__org{display:flex;align-items:center;gap:8px;padding:2px 4px}
.pvp__org b{font-size:13px}
.pvp__av{width:24px;height:24px;border-radius:7px;background:#0F5F5C;color:#fff;font-size:9.5px;font-weight:700;display:grid;place-items:center}
.pvp__card{background:#fff;border:1px solid #E5E8EE;border-radius:18px;padding:14px;display:flex;flex-direction:column;gap:10px;min-height:236px}
.pvp__card--on{border-color:var(--ok-line);background:linear-gradient(180deg,#F3FBF6,#fff 46%)}
.pvp__state{display:flex;align-items:center;gap:8px;font-size:19px;font-weight:600;letter-spacing:-.02em}
.pvp__state .live-dot{width:10px;height:10px}
.pvp__sub{color:var(--fg-3);font-size:12px}
.pvp__tiles{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:auto}
.pvp__tiles span{display:flex;flex-direction:column;align-items:center;gap:4px;padding:10px 4px;border:1px solid #E5E8EE;border-radius:12px;font-size:11.5px;font-weight:600;color:var(--fg-2);background:#fff}
.pvp__btn{display:flex;align-items:center;justify-content:center;gap:7px;min-height:44px;border-radius:12px;background:var(--brand);color:#fff;font-weight:600;font-size:13.5px;margin-top:auto}
.pvp__btn--line{background:#fff;color:var(--brand);border:1.5px solid var(--brand);margin-top:0}
.pvp__site{display:flex;align-items:center;gap:6px;justify-content:center;font-size:11.5px;color:var(--ok);font-weight:500}
.pvp__hist{background:#fff;border:1px solid #E5E8EE;border-radius:18px;padding:12px;display:flex;flex-direction:column;gap:2px;min-height:236px}
.pvp__hist>b{font-size:13.5px;margin-bottom:4px}
.pvp__hist>div{display:grid;grid-template-columns:1fr auto;gap:2px 8px;align-items:center;padding:8px 0;border-bottom:1px solid #EEF0F4;font-size:12px}
.pvp__hist>div:last-child{border-bottom:0}
.pvp__hist .st{grid-column:1/-1;justify-self:start;font-size:10.5px;padding:1px 7px}
.pvp__nav{display:flex;justify-content:space-around;padding:8px 0 2px;border-top:1px solid #E5E8EE;color:var(--fg-3)}
.pvp__nav .on{color:var(--brand)}
.pvr{display:flex;flex-direction:column;gap:14px}
.pvr__hd{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.pvr__hd b{display:block;font-size:16px;font-weight:600;margin:2px 0}
.pvr__hd .muted{font-size:12px}
.pvr__tot{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border:1px solid #E7EAF0;border-radius:12px;overflow:hidden}
.pvr__tot>div{padding:10px 12px;border-right:1px solid #E7EAF0;min-width:0}
.pvr__tot>div:last-child{border-right:0}
.pvr__tot span{display:block;font-size:11px;color:var(--fg-3);white-space:nowrap}
.pvr__tot b{display:block;font-size:15px;font-weight:600;letter-spacing:-.01em;white-space:nowrap}
.pvr__tot .is-net{background:#F7F9FD}
.pvr__tot .is-net b{color:var(--brand)}
.pvr__chk{display:flex;flex-direction:column;gap:2px}
.pvr__chk>div{display:flex;align-items:center;gap:9px;padding:9px 0;border-bottom:1px solid #EEF0F4;font-size:12.5px}
.pvr__chk>div:last-child{border-bottom:0}
.pvr__chk>div>span{flex:1;min-width:0}
.pvr__chk em{font-style:normal;font-size:11px;font-weight:600;border-radius:99px;padding:2px 8px;white-space:nowrap}
.pvr__chk .bad .ico{color:var(--bad)} .pvr__chk .bad em{background:var(--bad-bg);color:var(--bad)}
.pvr__chk .warn .ico{color:var(--warn)} .pvr__chk .warn em{background:var(--warn-bg);color:var(--warn)}
.pvr__chk .ok .ico{color:var(--ok)} .pvr__chk .ok em{background:var(--ok-bg);color:var(--ok)}
.pvr__ft{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;padding-top:4px;font-size:12px}
.pvr__btn{display:inline-flex;align-items:center;min-height:34px;padding:0 14px;border-radius:9px;background:var(--brand);color:#fff;font-weight:600;font-size:12.5px}
.pvo{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);gap:16px;align-items:start}
.pvo__inv{margin-top:40px}
.pvo__inv .pvw__body{display:flex;flex-direction:column;gap:12px}
.pvo__who{display:flex;gap:10px;align-items:center}
.pvo__who b{display:block;font-size:14px}
.pvo__who span{display:block;font-size:12px;color:var(--fg-3)}
.pvo__mail{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:12px;color:var(--fg-2)}
.pvo__mail .st{font-size:11px}
.pvo__list .pvw__body{display:flex;flex-direction:column;gap:8px}
.pvo__prog{display:flex;justify-content:space-between;align-items:center;font-size:13px}
.pvo__step{display:flex;align-items:center;gap:9px;padding:7px 0;border-bottom:1px solid #EEF0F4;font-size:12.5px}
.pvo__step:last-child{border-bottom:0}
.pvo__step>span{flex:1;min-width:0}
.pvo__step .st{font-size:11px}
.pvo__step>.ico{color:var(--fg-3)}
.pvv{display:flex;flex-direction:column;gap:2px}
.pvv__row{display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;gap:10px;align-items:center;padding:10px 0;border-bottom:1px solid #EEF0F4}
.pvv__row b{display:block;font-size:13px}
.pvv__row span{display:block;font-size:12px;color:var(--fg-2)}
.pvv__row small{display:block;font-size:11.5px;color:var(--fg-3)}
.pvv__row .st{font-size:11px}
.pvv__btn{display:inline-flex;align-items:center;min-height:30px;padding:0 11px;border-radius:8px;border:1px solid var(--line-2);font-weight:600;font-size:12px;background:#fff}
.pvv__note{display:flex;gap:7px;align-items:center;padding-top:10px;font-size:12px;color:var(--fg-3)}

/* ---------- Pricing pieces (website, signup, billing) ---------- */
.ws-ivseg{flex-wrap:wrap}
.ws-save{display:inline-block;margin-left:4px;font-size:11px;font-weight:600;color:var(--ok);background:var(--ok-bg);border-radius:99px;padding:1px 6px}
.ws-cap{display:flex;align-items:stretch;gap:6px}
.ws-cap__b{width:44px;height:44px;border:1px solid var(--line-2);border-radius:var(--r-md);background:var(--surface);font-size:20px;line-height:1;color:var(--fg)}
.ws-cap__b:hover{background:var(--surface-2)}
.ws-cap__i{width:100px;flex:none;text-align:center;font-size:18px;font-weight:600}
.ws-result{display:flex;flex-direction:column;gap:6px}
.ws-result__band{font-size:20px;font-weight:600;color:var(--lp-ink,var(--brand));letter-spacing:-.01em}
.ws-price{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px}
.ws-price b{font-size:40px;font-weight:600;letter-spacing:-.035em;line-height:1.1;color:var(--lp-ink,var(--fg))}
.ws-price span{color:var(--fg-2);font-size:14.5px}
.ws-result__eq{font-size:14px;color:var(--fg-2)}
.ws-result__next{display:flex;gap:7px;align-items:flex-start;font-size:13.5px;color:var(--fg-2);padding-top:10px;margin-top:4px;border-top:1px solid color-mix(in srgb,var(--fg) 10%,transparent)}
.ws-result__next .ico{margin-top:3px;flex:none}
.ws-result--quote p{color:var(--fg-2);font-size:14.5px}
.ws-result--quote .btn{align-self:flex-start;margin-top:8px}
.ws-bands{background:#fff;border:1px solid var(--lp-line,var(--line));border-radius:18px;overflow:hidden}
.ws-bands .tbl{font-size:14.5px}
.ws-bands .tbl th,.ws-bands .tbl td{padding:14px 18px;white-space:normal}
.ws-bands .tbl thead th{font-size:12.5px;position:static}
.ws-bands .tbl tbody th{font-weight:400;text-align:left;background:none;color:var(--fg);position:static;border-bottom:1px solid var(--line);font-size:14.5px}
.ws-bands .tbl tbody tr:last-child th{border-bottom:0}
.ws-bands .tbl tbody tr{cursor:default}
.ws-bands .tbl tbody tr:hover td,.ws-bands .tbl tbody tr:hover th{background:none}
.ws-bands tr.is-sel th,.ws-bands tr.is-sel td{background:color-mix(in srgb,var(--lp-primary,var(--brand)) 6%,#fff)!important}
.ws-bands tr.is-sel th{box-shadow:inset 3px 0 0 var(--lp-primary,var(--brand))}
.ws-bands__r{margin-left:8px;font-size:13px}
.ws-bands .tag{margin-left:8px;background:color-mix(in srgb,var(--lp-primary,var(--brand)) 12%,#fff);color:var(--lp-primary,var(--brand))}
.ws-bands__act{width:1%;white-space:nowrap!important}
.ws-bands__on{display:inline-flex;align-items:center;gap:6px;font-weight:600;color:var(--lp-primary,var(--brand));font-size:13.5px}
.ws-small{font-size:12.5px}
.ws-bands__custom{color:var(--fg-2);text-align:left!important}
.ws-bands__note{padding:12px 18px;border-top:1px solid var(--line);font-size:13px}
.ws-incl2{background:#fff;border:1px solid var(--lp-line,var(--line));border-radius:18px;padding:26px;display:flex;flex-direction:column;gap:18px}
.ws-incl2 h3{font-size:18px;font-weight:600}
.ws-incl2__g{display:grid;grid-template-columns:1fr 1fr;gap:18px 22px}
.ws-incl2__g>div{display:flex;gap:12px;align-items:flex-start}
.ws-incl2__g b{display:block;font-weight:600;font-size:15px;margin-bottom:2px}
.ws-incl2__g p{font-size:13.5px;color:var(--fg-2);line-height:1.5}
.ws-avail{display:flex;gap:8px;align-items:flex-start;font-size:13px;color:var(--fg-3);padding-top:14px;border-top:1px solid var(--line)}
.ws-avail .ico{margin-top:2px;flex:none}
.ws-howbill{background:var(--lp-ink,var(--brand));color:#D5DDEC;border-radius:18px;padding:26px;display:flex;flex-direction:column;gap:12px;font-size:14.5px;line-height:1.6}
.ws-howbill h3{color:#fff!important;font-size:18px;font-weight:600}
.ws-howbill .muted{color:#A9B5CE;font-size:13.5px;padding-top:10px;border-top:1px solid rgba(255,255,255,.12)}

/* ---------- Signup ---------- */
.ws-railsum{display:flex;flex-direction:column;gap:4px;padding:14px;border-radius:12px;background:rgba(255,255,255,.06);font-size:12.5px}
.ws-railsum .eyebrow{color:#AEB9D3}
.ws-railsum b{color:#fff;font-size:13.5px;font-weight:600}
.site-join{display:flex;gap:8px;align-items:flex-start;font-size:13px;color:var(--fg-3);padding:12px 14px;border-radius:var(--r-md);background:var(--surface-2)}
.site-join .ico{margin-top:2px;flex:none}
.ws-plangrid{display:flex;flex-direction:column;gap:18px;align-items:stretch}
.ws-plangrid--res{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:20px 28px;align-items:start;background:var(--surface-2);border-radius:var(--r-lg);padding:18px}
.ws-bandpick{border:0;padding:0;margin:0;display:grid;grid-template-columns:1fr 1fr;gap:8px}
.ws-bandpick legend{font-weight:600;font-size:var(--t-sm);margin-bottom:8px;padding:0}
.ws-bandpick .choice{padding:12px 14px}
.ws-bandpick .tag{margin-left:4px;background:var(--info-bg);color:var(--info)}
.choice.is-off{opacity:.5;cursor:not-allowed;background:var(--surface-2)}
.ws-sum{border:1px solid var(--line);border-radius:var(--r-lg);padding:18px;display:flex;flex-direction:column;gap:14px;background:var(--surface)}
.ws-sum__big{display:flex;gap:12px;align-items:flex-start}
.ws-sum__big>.ico{color:var(--ok)}
.ws-sum__big b{display:block;font-size:var(--t-lg);font-weight:600}
.ws-sum__big span{color:var(--fg-2);font-size:var(--t-sm)}
.ws-lines{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px 16px;margin:0;font-size:var(--t-md)}
.ws-lines dt{color:var(--fg-2)}
.ws-lines dd{margin:0;text-align:right;font-variant-numeric:tabular-nums}
.ws-lines__tot{font-weight:600;color:var(--fg)!important;padding-top:10px;border-top:1px solid var(--line);font-size:var(--t-lg)}
.ws-auto{background:var(--surface-2)}
.ws-mode{align-self:flex-start;flex-wrap:wrap}
.hosted{border:1px solid var(--line-2);border-radius:18px;overflow:hidden;background:#fff;box-shadow:var(--sh-2);position:relative}
.hosted__bar{display:flex;align-items:center;gap:8px;padding:10px 16px;background:#F0F2F6;border-bottom:1px solid var(--line);font-size:12.5px;color:var(--fg-2)}
.hosted__grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr)}
.hosted__sum{padding:22px;background:#FAFBFC;border-right:1px solid var(--line);display:flex;flex-direction:column;gap:10px}
.hosted__sum>b{font-size:var(--t-sm);font-weight:600}
.hosted__amt{font-size:32px;font-weight:600;letter-spacing:-.03em}
.hosted__sum .ws-lines{font-size:var(--t-sm)}
.hosted__form{padding:22px;display:flex;flex-direction:column;gap:14px}
.hosted__form h2{font-size:var(--t-xl);font-weight:600}
.hosted .ovl{position:fixed}

/* ---------- Branding ---------- */
.brand-grid{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:24px;align-items:start}
.drop{display:flex;align-items:center;gap:14px;padding:18px;border:1.5px dashed var(--line-2);border-radius:var(--r-lg);cursor:pointer;background:var(--surface)}
.drop:hover{border-color:var(--brand);background:#FAFBFD}
.drop:focus-within{outline:2px solid var(--focus);outline-offset:2px}
.drop b{display:block;font-weight:600}
.drop small{display:block;color:var(--fg-3);font-size:var(--t-sm)}
.drop__img{width:56px;height:56px;object-fit:contain;border-radius:12px;border:1px solid var(--line);background:#fff;flex:none}
.swatches2{display:flex;flex-wrap:wrap;gap:10px}
.sw2{width:34px;height:34px;border-radius:50%;border:3px solid #fff;box-shadow:0 0 0 1px var(--line-2);cursor:pointer;padding:0}
.sw2.is-on{box-shadow:0 0 0 2px var(--fg)}
.sw2--mini{display:inline-block;width:16px;height:16px;border-radius:5px;border:0;box-shadow:inset 0 0 0 1px rgba(0,0,0,.1);flex:none;cursor:default}
.colorpick{width:44px;height:36px;padding:2px;border:1px solid var(--line-2);border-radius:8px;background:#fff;cursor:pointer}
.pv{border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface);overflow:hidden;box-shadow:var(--sh-1)}
.pv__bar{display:flex;align-items:center;gap:10px;padding:12px 14px;border-bottom:1px solid var(--line)}
.pv__bar b{font-size:var(--t-sm);font-weight:600;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pv__nyro{font-size:11px;color:var(--fg-3)}
.pv__logo{max-height:28px;max-width:100px;object-fit:contain}
.pv__body{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:16px 14px;background:var(--bg)}
.pv--phone{width:250px;margin:0 auto;border-radius:30px;border:8px solid #101828;background:#F5F6F9;padding:12px;display:flex;flex-direction:column;gap:10px}
.pv__phonebar{display:flex;align-items:center;gap:8px;font-size:var(--t-sm)}
.pv__card{background:#fff;border:1px solid var(--line);border-radius:16px;padding:14px;display:flex;flex-direction:column;gap:10px}
.pv__card .st{align-self:flex-start}
.pv--mail{padding:0}
.pv__mailhd{padding:14px;border-bottom:1px solid var(--line);background:#fff}
.pv--mail p{padding:14px 14px 4px;font-size:var(--t-sm);color:var(--fg-2)}
.pv--mail .btn{margin:6px 14px 16px}
.org-logo{border-radius:9px;object-fit:contain;background:#fff;border:1px solid var(--line);flex:none}

/* ---------- Organization admin ---------- */
.ws-role{min-height:36px;padding:6px 10px;width:auto;min-width:130px}
.ws-roles dt{color:var(--fg);font-weight:600}
.ws-roles dd{color:var(--fg-2);text-align:left!important}
.ws-hello{background:linear-gradient(135deg,#FFFFFF 0%,#F6F8FC 100%)}
.ws-next{display:flex;align-items:center;gap:14px;padding:14px 16px;border-radius:14px;background:var(--info-bg);flex-wrap:wrap}
.ws-next .eicon{background:#fff;color:var(--info)}
.ws-next>div{flex:1;min-width:200px;display:flex;flex-direction:column;gap:1px}
.ws-next b{font-weight:600}
.ws-next .muted{font-size:var(--t-sm)}
.ws-task>.row{flex-wrap:wrap;justify-content:flex-end}
.ws-capwarn{display:flex;gap:12px;align-items:flex-start;padding:16px 18px;border-radius:var(--r-lg);background:var(--warn-bg);border:1px solid var(--warn-line)}
.ws-capwarn>.ico{color:var(--warn);margin-top:2px}
.ws-capwarn b{display:block;font-weight:600;color:var(--fg)}
.ws-capwarn p{color:var(--fg-2);font-size:var(--t-sm);margin-top:4px}
.side__reset{align-self:flex-start;display:inline-flex;align-items:center;gap:6px;font-size:12.5px;color:var(--fg-3);text-decoration:none;padding:0 10px}
.side__reset:hover{color:var(--fg)}

/* ---------- Audit trail ---------- */
.ws-filter{width:auto;min-height:38px;padding:6px 10px}
.ws-live{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;color:var(--fg-3);white-space:nowrap}
.ws-aud td{vertical-align:top}
.ws-aud__count{padding:10px 20px!important;border-top:1px solid var(--line);font-size:var(--t-sm)}

/* ---------- AppNyro platform (dark console sidebar so staff always know where they are) ---------- */
.side--plat{background:var(--brand);border-right:0;color:#C9D2E6}
.side--plat .nav a{color:#C9D2E6}
.side--plat .nav a:hover{background:rgba(185,168,236,.22);color:#fff}
.side--plat .nav a[aria-current="page"]{background:var(--lemon);color:var(--mint-ink)}
.side--plat .nav a[aria-current="page"] .count{background:#fff;color:var(--mint-ink)}
.side--plat .side__foot{border-top-color:rgba(255,255,255,.12)}
.side--plat .side__foot b{color:#fff}
.side--plat .side__foot span{color:#AEB9D3}
.side__foot .av{background:var(--purple);color:#fff}
.plat-brand{display:flex;align-items:center;gap:10px}
.plat-brand b{display:block;color:#fff;font-weight:600;letter-spacing:-.01em;font-size:17px;line-height:1.2}
.plat-brand span{display:block;font-size:11.5px;color:#AEB9D3}
.plat-note{display:flex;gap:8px;align-items:flex-start;padding:12px;border-radius:12px;background:rgba(255,255,255,.06);font-size:12px;line-height:1.45}
.plat-note .ico{margin-top:1px;color:var(--lemon)}

/* ---------- Invitation, sign-in ---------- */
.inv{min-height:calc(100vh - var(--bar-h));display:flex;flex-direction:column;align-items:center;justify-content:center;padding:48px 16px}
/* sign-in page: teal blue background (owner, 6 Nov 2026) */
.inv--teal{background:linear-gradient(160deg,#0E7490 0%,#0B5F77 100%)}
.inv--teal .inv__card{box-shadow:0 24px 60px rgba(4,40,52,.35)}
.inv__card{width:min(540px,100%);padding:32px;display:flex;flex-direction:column;gap:20px;box-shadow:var(--sh-2)}
.inv__card h1{font-size:26px;font-weight:600;letter-spacing:-.02em;line-height:1.2;margin:4px 0 6px}
.inv__card .lede{color:var(--fg-2)}
.inv__kv{padding:14px 16px;background:var(--surface-2);border-radius:var(--r-md)}
.inv__foot{margin-top:16px;font-size:12.5px;text-align:center;max-width:52ch}
.ws-who{display:flex;width:100%}
.ws-who button{flex:1}
.ws-orgpick{align-items:center;text-decoration:none;color:inherit;width:100%;text-align:left}
.ws-orgpick:hover{border-color:var(--brand)}
.ws-orgpick>.ico{color:var(--fg-3)}

/* ---------- Responsive ---------- */
@media (max-width:1360px){.pbar__links{display:none}.pbar__jsel{display:block}}
@media (max-width:1100px){
  .lp-hero__grid{grid-template-columns:1fr;gap:48px}
  .lp-hero__stage{max-width:720px;margin:0 auto}
  .lp-intro,.lp-split,.lp-review,.lp-faq,.lp-final__grid{grid-template-columns:1fr;gap:36px}
  .lp-split--rev>.lp-split__copy{order:0}
  .lp-final__copy{position:static}
  .lp-pricing__grid{grid-template-columns:1fr}
  .brand-grid{grid-template-columns:1fr}
  .lp-foot__grid{grid-template-columns:1fr 1fr}
}
@media (max-width:960px){
  .lp-links{display:none}
  .lp-burger{display:grid}
  .lp-mmenu{display:flex;flex-direction:column;gap:2px;padding:10px 24px 18px;border-top:1px solid var(--lp-line);background:var(--lp-bg);max-height:calc(100vh - var(--bar-h) - 68px);overflow-y:auto}
  .lp-mmenu .eyebrow{padding:8px 0 4px}
  .lp-mmenu__i{display:flex;align-items:center;gap:10px;min-height:46px;padding:0 4px;border:0;background:none;text-align:left;font-weight:500;font-size:16px;color:var(--lp-text)!important;text-decoration:none;cursor:pointer;border-radius:8px}
  .lp-mmenu hr{border:0;border-top:1px solid var(--lp-line);margin:8px 0;width:100%}
  .lp-steps{grid-template-columns:1fr 1fr}
  .lp-steps::before{display:none}
  .lp-trust{grid-template-columns:1fr 1fr}
  .lp-calc{grid-template-columns:1fr}
  .hosted__grid{grid-template-columns:1fr}
  .hosted__sum{border-right:0;border-bottom:1px solid var(--line)}
}
@media (max-width:760px){
  .lp-hero{padding:44px 0 56px}
  .lp-hero .pvw--admin,.lp-ann--a{display:none}
  .lp-hero__stage{padding:0;display:flex;justify-content:center}
  .lp-hero__phone{position:static}
  .lp-ann--b{right:auto;left:50%;transform:translateX(-50%);bottom:-14px}
  .lp-sec{padding:64px 0}
  .lp-phones{justify-content:flex-start;overflow-x:auto;scroll-snap-type:x mandatory;padding:20px 4px 12px;margin:0 -24px;padding-left:24px;padding-right:24px}
  .lp-phones__i{scroll-snap-align:center}
  .lp-phones__i:nth-child(2){margin-top:0}
  .pvo{grid-template-columns:1fr}
  .pvo__inv{margin-top:0}
  .ws-incl2__g{grid-template-columns:1fr}
  .ws-plangrid,.ws-plangrid--res{grid-template-columns:1fr}
  .ws-bandpick{grid-template-columns:1fr}
}
@media (max-width:680px){
  .lp-in{padding:0 16px}
  .lp-phones{margin:0 -16px;padding-left:16px;padding-right:16px}
  .lp-nav__in{gap:10px}
  .lp-nav__act .lp-btn{padding:0 12px;font-size:14px}
  .lp-logo small{display:none}
  .lp-steps,.lp-trust{grid-template-columns:1fr}
  .lp-calc__in,.lp-calc__out,.lp-form{padding:22px}
  .ws-price b{font-size:34px}
  .lp-foot__grid{grid-template-columns:1fr}
  .pva{grid-template-columns:1fr}
  .pva__side{display:none}
  .pvr__tot{grid-template-columns:1fr 1fr}
  .pvr__tot>div:nth-child(2){border-right:0}
  .pvr__tot>div:nth-child(-n+2){border-bottom:1px solid #E7EAF0}
  .pvv__row{grid-template-columns:auto minmax(0,1fr) auto}
  .pvv__row .st{grid-column:2;justify-self:start}
  .pvv__btn{grid-column:3;grid-row:1}
  /* band table becomes cards */
  .ws-bands table,.ws-bands tbody,.ws-bands tr,.ws-bands th,.ws-bands td{display:block}
  .ws-bands thead{display:none}
  .ws-bands tbody tr{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px 10px;padding:14px 16px;border-bottom:1px solid var(--line)}
  .ws-bands tbody tr:last-child{border-bottom:0}
  .ws-bands .tbl tbody th{grid-column:1/-1;padding:0 0 4px;border:0}
  .ws-bands .tbl td{padding:0;border:0;text-align:left}
  .ws-bands td[data-l]::before{content:attr(data-l);display:block;font-size:11px;color:var(--fg-3);font-weight:500;line-height:1.3}
  .ws-bands .ws-bands__act,.ws-bands .ws-bands__custom{grid-column:1/-1;width:auto;text-align:left!important;padding-top:8px}
  .ws-bands tr.is-sel th{box-shadow:none}
  .ws-bands tr.is-sel{box-shadow:inset 3px 0 0 var(--lp-primary,var(--brand))}
  .inv__card{padding:22px}
}
@media (max-width:400px){
  .lp-logo>span{display:none}
  .lp-nav__act .lp-btn{padding:0 10px;font-size:13px;min-height:38px}
  .pvp{width:200px}
  .ws-cap__i{width:80px}
}
.field>.seg,.ws-plangrid .seg{align-self:flex-start}
.todo__item .tag{display:inline-flex;margin-left:6px;vertical-align:1px}
.todo__item .st{display:inline-flex}
.ws-task>.row{flex:none;max-width:52%}
@media (max-width:680px){.ws-task{flex-wrap:wrap}.ws-task>.row{max-width:none;width:100%;justify-content:flex-start;padding-left:44px}}
@media (max-width:680px){.ws-bands tr.is-sel th,.ws-bands tr.is-sel td{background:transparent!important}.ws-bands tbody tr.is-sel{background:color-mix(in srgb,var(--lp-primary,var(--brand)) 6%,#fff)}}
.prof-grid>*,.brand-grid>*{min-width:0}
.launch__foot .row{flex-wrap:wrap}

/* ---------- Powered by AppNyro (every surface) ---------- */
.powered{display:inline-flex;align-items:center;gap:7px;font-size:11.5px;font-weight:500;color:var(--fg-3);white-space:nowrap;line-height:1}
.powered svg{width:18px;height:14px;flex:none}
.powered--dark{color:#AEB9D3}
.powered--dark svg>path{fill:#fff}
.side>.powered{align-self:center;margin-top:-8px;padding-bottom:2px}
.ee-powered{display:flex;justify-content:center;padding:6px 0 18px}
.mailfoot{display:flex;flex-direction:column;align-items:flex-start;gap:6px;padding:12px 22px 14px;border-top:1px solid var(--line);background:var(--surface-2);font-size:12px;color:var(--fg-3)}
.pv--mail .mailfoot{padding:10px 14px;margin-top:4px}
.lp-foot__base{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 20px}
.lp-foot__base .powered{font-size:13px}
.mtop .logo b{font-size:17px}
.ob__powered{display:none;justify-content:center;padding-top:8px}
@media (max-width:900px){.ob__powered{display:flex}}
.who b .tag{display:inline-flex;margin-left:6px;vertical-align:1px}

/* ---------- Nyro Workspace console: status tiles, one colour per state ---------- */
.plat-tiles{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}
.plat-tile{--c:var(--neutral);--bg:var(--neutral-bg);--ln:var(--neutral-line);position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:8px;padding:18px 16px 14px;border:1px solid var(--ln);border-radius:var(--r-lg);background:linear-gradient(180deg,var(--bg) 0%,#fff 88%);text-align:left;cursor:pointer;font:inherit;color:var(--fg);overflow:hidden;min-width:0;transition:box-shadow .15s,transform .15s}
.plat-tile::before{content:"";position:absolute;left:0;right:0;top:0;height:4px;background:var(--c)}
.plat-tile:hover{transform:translateY(-1px);box-shadow:var(--sh-2)}
.plat-tile[aria-pressed="true"]{box-shadow:0 0 0 2px var(--c),var(--sh-2)}
.plat-tile__top{display:flex;align-items:center;gap:9px;min-width:0}
.plat-tile__ico{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;background:var(--c);color:#fff;flex:none}
.plat-tile__ico .ico{width:16px;height:16px}
.plat-tile__lbl{font-weight:600;font-size:var(--t-sm);color:var(--c);line-height:1.25}
.plat-tile__n{font-size:34px;font-weight:600;letter-spacing:-.03em;line-height:1;color:var(--c)}
.plat-tile small{font-size:12px;color:var(--fg-2)}
.plat-tile--invited{--c:#256B7F;--bg:#EFFAFD;--ln:#D4EFF7}
.plat-tile--trial{--c:var(--info);--bg:#EEF3FD;--ln:var(--info-line)}
.plat-tile--active{--c:var(--ok);--bg:#EAF6EF;--ln:var(--ok-line)}
.plat-tile--pastdue{--c:var(--bad);--bg:#FDEEEC;--ln:var(--bad-line)}
.plat-tile--cancelsched{--c:var(--warn);--bg:#FFF5E0;--ln:var(--warn-line)}
.plat-filter{display:flex;align-items:center;gap:8px;font-size:var(--t-sm);color:var(--fg-2);margin-top:-8px}
.st--violet{color:#256B7F;background:#EFFAFD;border-color:#D4EFF7}
/* the status boxes as slim rectangles (owner's Option C): a purple icon, the number and the label; a thin line on top
   that turns mint when the status has organizations; light mint on hover */
.plat-tile{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:12px;row-gap:1px;align-items:center;padding:10px 14px;border:1px solid var(--line);border-top:3px solid var(--surface-3);border-radius:10px;background:var(--surface);text-align:left;cursor:pointer;color:var(--fg);transition:background .15s,border-color .15s}
.plat-tile::before{display:none}
.plat-tile:hover{background:var(--hover-purple);transform:none;box-shadow:none}
.plat-tile.is-some{border-top-color:var(--lemon)}
.plat-tile[aria-pressed="true"]{box-shadow:0 0 0 2px var(--purple)}
.plat-tile__top{display:contents}
.plat-tile__ico{width:auto;height:auto;background:none;color:var(--purple);grid-row:1/3;grid-column:1}
.plat-tile__ico .ico{width:20px;height:20px}
.plat-tile__n{grid-column:2;grid-row:1;font-size:22px;font-weight:600;letter-spacing:-.02em;line-height:1.1;color:var(--fg)}
.plat-tile__lbl{grid-column:2;grid-row:2;font-size:12.5px;font-weight:500;color:var(--fg-2)}
.plat-tile small{display:none}
@media (max-width:1180px){.plat-tiles{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:560px){.plat-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}.plat-tile{padding:9px 12px}.plat-tile__n{font-size:20px}}

/* ---------- Nyro Workspace console: team, roles and relationship managers ---------- */
.rtag{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;line-height:1;padding:5px 10px;border-radius:99px;border:1px solid;white-space:nowrap}
.rtag--super{background:var(--brand);color:#fff;border-color:var(--brand)}
.rtag--super::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--lemon)}
.rtag--rm{color:#256B7F;background:#EFFAFD;border-color:#D4EFF7}
.rtag--billing{color:var(--warn);background:var(--warn-bg);border-color:var(--warn-line)}
.rtag--support{color:var(--info);background:var(--info-bg);border-color:var(--info-line)}
.rtag--security{color:var(--bad);background:var(--bad-bg);border-color:var(--bad-line)}
.rtag--auditor{color:var(--neutral);background:var(--neutral-bg);border-color:var(--neutral-line)}
.tm-counts{display:flex;flex-wrap:wrap;gap:10px}
.tm-count{display:inline-flex;align-items:center;gap:10px;padding:8px 14px 8px 8px;border:1px solid var(--line);border-radius:99px;background:var(--surface)}
.tm-count b{font-size:var(--t-lg);font-weight:600}
.tm-acts{white-space:nowrap}
.tm-why{white-space:normal;max-width:230px;margin-left:auto;margin-top:6px;text-align:right}
.tm-roles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.tm-role{border:1px solid var(--line);border-radius:var(--r-md);padding:14px;display:flex;flex-direction:column;align-items:flex-start;gap:8px}
.tm-role p{font-size:var(--t-sm);color:var(--fg-2)}
.tm-orgs{display:flex;flex-direction:column;gap:2px;max-height:300px;overflow-y:auto;border:1px solid var(--line);border-radius:var(--r-md);padding:6px}
.tm-org{padding:8px;border-radius:8px}
.tm-org:hover{background:var(--surface-2)}
.tm-org b{display:block;font-weight:600;font-size:var(--t-sm)}
.tm-org small{display:block;font-size:12px;color:var(--fg-3)}
.plat-scope{align-self:flex-start;flex-wrap:wrap}
.rm-cell{display:inline-flex;align-items:center;gap:8px}
.av--sm{width:24px;height:24px;font-size:10px}
.ws-rmsel{min-height:36px;padding:6px 10px;width:auto;max-width:220px}
@media (max-width:1024px){.tm-roles{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.tm-roles{grid-template-columns:1fr}}

/* ---------- Website: pay schedule cards, one colour each ---------- */
.lp-sched{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;max-width:540px}
.lp-sched__i{--c:var(--info);--bg:#EEF3FD;--ln:var(--info-line);display:flex;align-items:center;gap:11px;padding:11px 13px;border-radius:14px;background:var(--bg);border:1px solid var(--ln);min-width:0}
.lp-sched__i--w{--c:var(--info);--bg:#EEF3FD;--ln:var(--info-line)}
.lp-sched__i--b{--c:var(--ok);--bg:#EAF6EF;--ln:var(--ok-line)}
.lp-sched__i--s{--c:#5B33B0;--bg:#F4EFFD;--ln:#E0D4F7}
.lp-sched__i--m{--c:var(--warn);--bg:#FFF5E0;--ln:var(--warn-line)}
.lp-sched__ico{width:32px;height:32px;border-radius:10px;display:grid;place-items:center;background:var(--c);color:#fff;flex:none}
.lp-sched__i b{display:block;font-size:14.5px;font-weight:600;line-height:1.3;color:var(--c)}
.lp-sched__i small{display:block;font-size:12.5px;line-height:1.35;color:var(--lp-text-2)}
.lp-more--btn{border:0;background:none;padding:0;cursor:pointer;font:inherit;font-weight:600;align-self:flex-start}

/* ---------- Website: FAQ collapsed into one dropdown ---------- */
.lp-faqbox{border:1px solid var(--lp-line);border-radius:20px;background:var(--lp-bg);overflow:hidden;box-shadow:0 1px 2px rgba(16,24,40,.04)}
.lp-sec .lp-faqbox__h{margin:0;max-width:none;font-size:inherit}
.lp-faqbox__btn{width:100%;display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:26px 28px;border:0;background:none;text-align:left;cursor:pointer;color:var(--lp-ink);font:inherit}
.lp-faqbox__btn:hover{background:var(--lp-soft)}
.lp-faqbox__t{font-size:clamp(22px,2.4vw,30px);font-weight:600;letter-spacing:-.025em;line-height:1.2}
.lp-faqbox__n{font-size:13px;font-weight:600;color:var(--lp-text-2);background:var(--lp-soft);border-radius:99px;padding:4px 10px}
.lp-faqbox__chev{margin-left:auto;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;border:1px solid var(--lp-line);background:var(--lp-bg);flex:none;transition:transform .2s}
.lp-faqbox.is-open .lp-faqbox__chev{transform:rotate(180deg)}
.lp-faq__list{padding:0 28px 12px}
@media (max-width:680px){.lp-faqbox__btn{padding:20px 18px}.lp-faq__list{padding:0 18px 8px}}

/* ===== HR addendum: payroll workbench, register, adjustments, pay codes, year-end, tax slips ===== */
.wb{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));list-style:none;margin:0;padding:0}
.wb li{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:8px;padding-right:8px;font-size:12.5px;line-height:1.3;color:var(--fg-3)}
.wb li::before{content:"";position:absolute;top:12px;left:26px;right:0;height:2px;background:var(--line)}
.wb li:last-child::before{display:none}
.wb li.done::before{background:var(--brand)}
.wb__dot{position:relative;z-index:1;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;background:var(--surface);border:2px solid var(--line-2);color:var(--fg-3)}
.wb__dot .ico{width:13px;height:13px;stroke-width:2.4}
.wb li.done .wb__dot{background:var(--brand);border-color:var(--brand);color:#fff}
.wb li.now .wb__dot{border-color:var(--brand);box-shadow:0 0 0 4px rgba(47,50,55,.08)}
.wb li.now{color:var(--fg);font-weight:600}
.wb li.done{color:var(--fg-2)}
.runhead--band{padding:0;overflow:hidden;gap:0}
.runhead__band{background:var(--brand);color:#fff;padding:20px 22px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;align-items:flex-start}
.runhead__band .eyebrow{color:var(--lemon)}
.runhead__band .eyebrow .mono{font-size:inherit}
.runhead__band h1{color:#fff}
.runhead__band .runhead__meta{color:#C5C9CE}
.runhead__acts{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.runhead__body{padding:16px 22px 20px;display:flex;flex-direction:column;gap:14px}
.wbar__head{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;font-size:var(--t-sm)}
.wbar__head b{font-weight:600;color:var(--fg)}
.wbar__head span{color:var(--fg-3)}
.wbar{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:5px;list-style:none;margin:0;padding:0}
.wbar li{display:flex;flex-direction:column;gap:7px;font-size:11.5px;line-height:1.3;color:var(--fg-3);min-width:0}
.wbar__seg{height:8px;border-radius:99px;background:var(--surface-3)}
.wbar li.done .wbar__seg{background:var(--brand)}
.wbar li.done{color:var(--fg-2)}
.wbar li.now .wbar__seg{background:var(--lemon)}
.wbar li.now{color:var(--mint-ink);font-weight:600}
@media (max-width:640px){.wbar__lbl{display:none}.wbar li.now .wbar__lbl{display:block;white-space:nowrap}}
.wb-pay{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:10px 14px;border:1px dashed var(--line-2);border-radius:var(--r-md);font-size:12.5px}
.wb-pay .eyebrow{color:var(--fg-3)}
@media (max-width:900px){.wb{grid-template-columns:repeat(7,minmax(92px,1fr));overflow-x:auto;padding-bottom:4px}}
.rc{list-style:none;margin:0;padding:6px 20px 14px;display:flex;flex-direction:column}
.rc__i{display:flex;gap:12px;padding:12px 0;border-top:1px solid var(--line)}
.rc__i:first-child{border-top:0}
.rc__i b{font-size:var(--t-sm);font-weight:600}
.rc__i p{margin:2px 0 0;font-size:12.5px;color:var(--fg-2)}
.rc__ico{width:26px;height:26px;border-radius:8px;display:grid;place-items:center;flex:none;background:var(--neutral-bg);color:var(--neutral)}
.rc__i.is-ok .rc__ico{background:var(--ok-bg);color:var(--ok)}
.rc__i.is-warn .rc__ico{background:var(--warn-bg);color:var(--warn)}
.rc__i.is-block .rc__ico{background:var(--bad-bg);color:var(--bad)}
.rc__cf{margin-top:8px;font-size:12.5px;font-weight:500}
.rc__lk{display:inline-flex;align-items:center;gap:4px;margin-top:6px;font-size:12.5px;color:var(--link);text-decoration:none;font-weight:500}
.rg{position:relative;overflow:hidden}
.rg__wm{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none;font-size:110px;font-weight:700;letter-spacing:.12em;color:rgba(180,35,24,.06);transform:rotate(-14deg);z-index:0}
.rg > *{position:relative;z-index:1}
.rg__meta{display:grid;grid-template-columns:repeat(4,auto 1fr);gap:8px 14px;margin:0;font-size:var(--t-sm)}
.rg__meta dt{color:var(--fg-3)}
.rg__meta dd{margin:0;font-weight:500}
@media (max-width:1100px){.rg__meta{grid-template-columns:auto 1fr}}
.rg__tbl td,.rg__tbl th{white-space:nowrap}
.hx-tot .total b{font-variant-numeric:tabular-nums}
.tp dd{font-weight:500}
.sysc{display:flex;flex-wrap:wrap;gap:8px}
.sysc__i{display:inline-flex;align-items:center;gap:8px;padding:7px 10px;border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface-2);font-size:12.5px;color:var(--fg-2)}
.sysc__i b{color:var(--fg)}
.sysc__i .ico{color:var(--fg-3)}
.wiz{display:flex;gap:6px;list-style:none;margin:0 0 4px;padding:0;flex-wrap:wrap}
.wiz li{display:inline-flex;align-items:center;gap:6px;padding:5px 10px;border-radius:999px;background:var(--surface-2);font-size:12px;color:var(--fg-3);font-weight:500}
.wiz li span{width:16px;height:16px;border-radius:50%;border:1.5px solid var(--line-2);display:grid;place-items:center}
.wiz li.done{color:var(--fg-2)}
.wiz li.done span{background:var(--brand);border-color:var(--brand);color:#fff}
.wiz li.done span .ico{width:10px;height:10px;stroke-width:3}
.wiz li.now{background:var(--brand);color:#fff}
.wiz li.now span{border-color:var(--lemon);background:var(--lemon)}
.dn-sel{min-width:240px;max-width:340px}
/* Tax slip viewer */
.sv{display:flex;flex-direction:column;border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--surface-3)}
.sv__bar{display:flex;align-items:center;gap:6px;padding:8px 10px;background:var(--surface);border-bottom:1px solid var(--line);font-size:12.5px;flex-wrap:wrap}
.sv__bar .xbtn{width:32px;height:32px}
.sv__bar .xbtn:disabled{opacity:.35;cursor:default}
.sv__sp{flex:1}
.sv__view{overflow:auto;padding:12px;max-height:72vh;-webkit-overflow-scrolling:touch}
.slipfit{position:relative}
.slipfit > .paper{position:absolute;left:0;top:0}
.screen .sv{margin:0 -16px;border-radius:0}
.screen .sv__view{max-height:none;padding:8px}
.slip{gap:10px;padding:30px 40px;min-height:0}
.slip__amend{display:block;width:max-content;margin:6px 0 0 auto;padding:2px 9px;border:2px solid var(--bad);color:var(--bad);font-weight:700;font-style:normal;font-size:10.5px;letter-spacing:.08em;border-radius:4px}
.slip__hd{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;border-bottom:2px solid #101828;padding-bottom:8px}
.slip__hd > div:first-child{display:flex;gap:12px;align-items:center}
.slip__hd span{font-size:11px;line-height:1.3}
.slip__form{font-size:30px;font-weight:700;letter-spacing:-.01em}
.slip__yr{display:flex;flex-direction:column;align-items:center;border:1px solid #101828;padding:2px 12px;font-size:10px}
.slip__yr b{font-size:18px}
.slip__agency{font-size:10.5px;text-align:right;line-height:1.3}
.slip__grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid #8a93a6;border-left:1px solid #8a93a6}
.slip__grid--rl{grid-template-columns:repeat(5,minmax(0,1fr))}
.slip__grid--2{grid-template-columns:1fr 1fr}
.tb{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto 1fr;gap:2px 6px;padding:5px 7px;border-right:1px solid #8a93a6;border-bottom:1px solid #8a93a6;min-height:52px}
.tb--wide{grid-column:span 2}
.tb--tall{min-height:72px}
.tb__no{grid-row:1;font-weight:700;font-size:11px;background:#101828;color:#fff;padding:0 5px;border-radius:2px;align-self:start}
.tb__no:empty{display:none}
.tb__lbl{grid-row:1;font-size:9.5px;line-height:1.25;color:#465066}
.tb__lbl i{display:block;font-style:italic;color:#737D93}
.tb__val{grid-column:1 / -1;align-self:end;text-align:right;font-family:var(--mono);font-size:12.5px;font-weight:600;color:#101828;min-height:16px}
.tb__val--txt{text-align:left;font-family:var(--sans);font-weight:600;font-size:12px;line-height:1.35}
.tb__val--txt small{font-weight:400;color:#465066;font-size:10.5px}
.tb--em{background:#F6F8FC}
.tb--na{background:repeating-linear-gradient(135deg,#fff 0 6px,#F0F2F6 6px 12px)}
.slip__ids{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
.slip__ids div{border:1px solid #8a93a6;padding:4px 7px;display:flex;flex-direction:column;font-size:9.5px;color:#465066;min-height:40px}
.slip__ids b{font-size:12px;color:#101828}
.slip__other{border:1px solid #8a93a6;padding:6px 8px;display:flex;flex-direction:column;gap:6px}
.slip__oi{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.slip__oi div{display:grid;grid-template-columns:1fr 2fr;border:1px solid #CBD1DC;font-size:9px;color:#737D93}
.slip__oi span{padding:3px 5px;min-height:26px}
.slip__oi span + span{border-left:1px solid #CBD1DC}
.slip__fn{margin:4px 0 0;font-size:10px;color:#737D93}
.slip__info{display:flex;flex-direction:column;gap:10px;font-size:13px;line-height:1.55;max-width:62ch}
.slip__info p{margin:0}
.sv-meta{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;flex-wrap:wrap}
.sv-meta > div{display:flex;flex-direction:column}
.sv-meta b{font-size:var(--t-lg)}
.sv-meta span{font-size:12.5px;color:var(--fg-3)}
.slipyr{display:flex;flex-direction:column;gap:8px}
.slipyr .eyebrow{color:var(--fg-3)}
.slipcard{display:flex;flex-wrap:wrap;align-items:center;gap:10px 12px;padding:12px;border:1px solid var(--line);border-radius:14px;background:var(--surface)}
.slipcard > div:nth-child(2){display:flex;flex-direction:column;min-width:0;flex:1}
.slipcard b{font-size:var(--t-md)}
.slipcard span{font-size:12px;color:var(--fg-3)}
.slipcard__acts{display:flex;gap:6px;flex:1 1 100%;padding-left:48px}
.slipcard__acts .btn--primary{flex:1;justify-content:center}
.slipcard--muted{background:var(--surface-2);border-style:dashed}
.slip-na{display:flex;gap:6px;align-items:flex-start;margin:0}
.slip-na .ico{flex:none;margin-top:2px}
.adj-acts{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.adj-acts .hint{max-width:180px}
/* Report Centre */
.rp-scope{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) minmax(0,1.2fr);gap:16px;align-items:start}
@media (max-width:900px){.rp-scope{grid-template-columns:1fr}}
.rp-emp{display:flex;align-items:center;gap:8px;min-height:40px;padding:0 12px;border:1px dashed var(--line-2);border-radius:var(--r-md);font-weight:500;font-size:var(--t-sm)}
.rp-bar{display:flex;flex-direction:column;gap:12px}
.rp-bar .search input{width:100%}
.rp-cats{display:flex;gap:6px;flex-wrap:wrap}
.chip{border:1px solid var(--line-2);background:var(--surface);border-radius:999px;padding:6px 12px;font-size:12.5px;font-weight:500;color:var(--fg-2);cursor:pointer}
.chip[aria-pressed="true"]{background:#0E7490;border-color:#0E7490;color:#fff}  /* selected filter chips in teal blue (owner, 6 Nov 2026) */
.chip:not([aria-pressed="true"]):hover{border-color:#0E7490;color:#0E7490}
.rp-list{list-style:none;margin:0;padding:0}
.rp-i{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:12px;align-items:start;padding:14px 20px;border-top:1px solid var(--line)}
.rp-list .rp-i:first-child{border-top:0}
.rp-i.is-on{background:#F6F8FC}
.rp-i.is-off .rp-i__name{color:var(--fg-3)}
.rp-i__ck{padding-top:2px}
.rp-i__ck input{width:18px;height:18px;accent-color:var(--brand)}
.rp-i__name{border:0;background:none;padding:0;font:inherit;font-weight:600;color:var(--fg);cursor:pointer;text-align:left;display:inline-flex;gap:8px;align-items:baseline}
.rp-i__name .mono{font-size:11.5px;color:var(--fg-3);font-weight:500}
.rp-i__name:hover{color:var(--link)}
.rp-i__main p{margin:3px 0 0;font-size:12.5px;color:var(--fg-2)}
.rp-i__tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px;align-items:center}
.rp-i__tags .tag .ico{width:11px;height:11px}
@media (max-width:640px){.rp-i{grid-template-columns:auto minmax(0,1fr);padding:14px 16px}.rp-i__pv{grid-column:2;justify-self:start}}
.rp-packs{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px}
.rp-pack h2{font-size:var(--t-lg);font-weight:600}
.rp-pack__l{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px;font-size:var(--t-sm)}
.rp-pack__l li{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.rp-pack__l .mono{font-size:11.5px;color:var(--fg-3)}
.rp-pack__l .ico{color:var(--ok);flex:none}
.rp-pack__l .st .ico{color:inherit}
.rp-tray{position:sticky;bottom:12px;z-index:5;display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:12px 16px;background:var(--brand);color:#fff;border-radius:var(--r-lg);box-shadow:var(--sh-3)}
.rp-tray > div:first-child{display:flex;flex-direction:column;min-width:0}
.rp-tray span{font-size:12px;color:#C9D2E6;font-family:var(--mono)}
.rp-tray .btn--ghost{color:#fff}
.rp-tray .btn--primary{background:var(--lemon);color:var(--brand);border-color:var(--lemon)}
.rp-prog{height:8px;border-radius:999px;background:var(--surface-3);overflow:hidden}
.rp-prog span{display:block;height:100%;background:var(--brand);border-radius:inherit;transition:width .4s ease}
.rp-man td{vertical-align:top}
.rp-pv{position:relative;border:1px solid var(--line);border-radius:var(--r-md)}
.rp-pv .tbl td,.rp-pv .tbl th{font-size:12.5px;padding:8px 10px}
.rp-pv--draft::after{content:"DRAFT";position:absolute;inset:0;display:grid;place-items:center;font-size:56px;font-weight:700;letter-spacing:.14em;color:rgba(180,35,24,.07);transform:rotate(-12deg);pointer-events:none}
html[lang="fr-CA"] .rp-pv--draft::after{content:"PROVISOIRE";font-size:44px}
.rp-rv{list-style:none;margin:0;padding:0;border:1px solid var(--line);border-radius:var(--r-md)}
.rp-rv li{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 12px;border-top:1px solid var(--line);flex-wrap:wrap}
.rp-rv li:first-child{border-top:0}
.rp-rv li > div:first-child{display:flex;flex-direction:column;min-width:0}
.rp-rv b{font-size:var(--t-sm);font-weight:600}
.rp-rv b .mono{font-size:11.5px;color:var(--fg-3);font-weight:500}
.rp-rv span{font-size:12px;color:var(--fg-3)}
.rp-rv .seg button{padding:5px 10px;font-size:12px}
.rp-rv li.is-skip{background:var(--surface-2)}
.rp-bar .search{max-width:420px}
/* People: headcount and changes */
.hc-bar{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr) minmax(0,2fr);gap:16px;align-items:end}
@media (max-width:1000px){.hc-bar{grid-template-columns:1fr 1fr}.hc-def{grid-column:1 / -1}}
@media (max-width:560px){.hc-bar{grid-template-columns:1fr}}
.hc-def{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin:0}
.hc-def div{padding:8px 10px;border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface-2)}
.hc-def dt{font-size:11.5px;color:var(--fg-3)}
.hc-def dd{margin:2px 0 0;font-size:var(--t-lg);font-weight:600;font-variant-numeric:tabular-nums}
@media (max-width:560px){.hc-def{grid-template-columns:1fr 1fr}}
.hc-tiles{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}
@media (max-width:900px){.hc-tiles{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:520px){.hc-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}}
.hc-tile{display:flex;flex-direction:column;gap:2px;text-align:left;padding:14px;border:1px solid var(--line);border-left:4px solid var(--line-2);border-radius:var(--r-lg);background:var(--surface);cursor:pointer;font:inherit;color:inherit}
.hc-tile span{font-size:12.5px;color:var(--fg-2);font-weight:500}
.hc-tile b{font-size:var(--t-2xl);font-weight:600;font-variant-numeric:tabular-nums}
.hc-tile small{font-size:11.5px;color:var(--fg-3)}
.hc-tile[aria-pressed="true"]{box-shadow:0 0 0 2px var(--brand)}
.hc-tile--active{border-left-color:var(--ok)}.hc-tile--paidleave{border-left-color:var(--info)}.hc-tile--unpaidleave{border-left-color:#5CD5F6}.hc-tile--prehire{border-left-color:var(--lemon)}.hc-tile--terminated{border-left-color:var(--neutral)}
/* Leave: staff app */
.eicon--leave{background:#E9F9FE;color:#186C83}
.eicon--ok{background:var(--ok-bg);color:var(--ok)}
.seg--full{display:flex;width:100%}
.seg--full button{flex:1;padding:8px 6px}
.lvbal{display:flex;flex-direction:column;gap:8px;padding:18px;border-radius:18px;background:var(--brand);color:#fff}
.lvbal .eyebrow{color:#C9D2E6}
.lvbal .muted,.lvbal .hint{color:#C9D2E6}
.lvbal__big{display:flex;align-items:baseline;gap:8px}
.lvbal__big b{font-size:44px;font-weight:600;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.lvbal__big span{font-size:var(--t-sm);color:#E4E9F5}
.lvbar{display:flex;height:8px;border-radius:999px;background:rgba(255,255,255,.18);overflow:hidden;margin-top:4px}
.lvbar i{display:block;height:100%}
.lvbar .u{background:#9BB0DE}.lvbar .b{background:var(--lemon)}.lvbar .p{background:repeating-linear-gradient(135deg,var(--lemon) 0 4px,rgba(168,230,203,.4) 4px 8px)}
.lvdl{display:grid;grid-template-columns:1fr 1fr;gap:8px 16px;margin:4px 0 0}
.lvdl dt{display:flex;align-items:center;gap:6px;font-size:12px;opacity:.85}
.lvdl dd{margin:0;font-weight:600;font-variant-numeric:tabular-nums}
.lvdl--card{padding:14px;border:1px solid var(--line);border-radius:14px;background:var(--surface)}
.lvdl--card dt{opacity:1;color:var(--fg-3)}
.dot{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.4);display:inline-block}
.dot--u{background:#9BB0DE}.dot--b{background:var(--lemon)}.dot--p{background:repeating-linear-gradient(135deg,var(--lemon) 0 2px,rgba(168,230,203,.4) 2px 4px)}
.lvreq{display:flex;flex-direction:column;gap:8px;padding:14px 16px;border-top:1px solid var(--line)}
.lvreq:first-child{border-top:0}
.lvreq__top{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
.lvreq__top > div{display:flex;flex-direction:column}
.lvreq__top span{font-size:12.5px;color:var(--fg-3)}
.lvreq .btn{align-self:flex-start}
.lvcal{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px;text-align:center}
.lvcal__h{font-size:11px;font-weight:600;color:var(--fg-3);padding:2px 0}
.lvcal__d{position:relative;aspect-ratio:1;display:grid;place-items:center;border-radius:10px;font-size:13px;font-variant-numeric:tabular-nums}
.lvcal__d.is-pad{visibility:hidden}
.lvcal__d.is-off{color:var(--fg-3);background:var(--surface-2)}
.lvcal__d.is-leave{background:var(--brand);color:#fff;font-weight:600}
.lvcal__d.is-pend{background:repeating-linear-gradient(135deg,var(--warn-bg) 0 5px,#FCE7B2 5px 10px);color:var(--warn);font-weight:600}
.lvcal__d.is-hol{background:var(--lemon-soft);color:#6B5A00;font-weight:600;box-shadow:inset 0 0 0 1.5px var(--lemon)}
.lvcal__d .today{position:absolute;bottom:4px;width:4px;height:4px;border-radius:50%;background:var(--link)}
.lvleg{display:flex;flex-wrap:wrap;gap:10px;font-size:12px;color:var(--fg-2)}
.lvleg span{display:inline-flex;align-items:center;gap:6px}
.lvleg i{width:12px;height:12px;border-radius:4px;display:inline-block}
.lvleg .is-leave{background:var(--brand)}.lvleg .is-pend{background:repeating-linear-gradient(135deg,var(--warn-bg) 0 3px,#FCE7B2 3px 6px);box-shadow:inset 0 0 0 1px var(--warn-line)}.lvleg .is-hol{background:var(--lemon-soft);box-shadow:inset 0 0 0 1.5px var(--lemon)}.lvleg .is-off{background:var(--surface-2);box-shadow:inset 0 0 0 1px var(--line)}
.lvprog{display:flex;align-items:center;gap:6px}
.lvprog i{flex:1;height:4px;border-radius:999px;background:var(--surface-3)}
.lvprog i.on{background:var(--brand)}
.lvprog span{font-size:12px;color:var(--fg-3);margin-left:6px;white-space:nowrap}
.lvsum{display:flex;flex-direction:column;gap:8px;padding:16px;border-radius:16px;background:var(--surface-2)}
.lvsum > div{display:flex;flex-direction:column}
.lvsum b{font-size:30px;font-weight:600;font-variant-numeric:tabular-nums}
.lvsum span{font-size:12.5px;color:var(--fg-2)}
.lvdays{list-style:none;margin:0;padding:0 0 6px}
.lvdays li{display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:center;padding:9px 16px;border-top:1px solid var(--line);font-size:13px}
.lvdays li:first-child{border-top:0}
.lvdays li > span:first-child{font-weight:600;min-width:84px}
.lvdays li > span:nth-child(2){color:var(--fg-2)}
.lvdays b{font-variant-numeric:tabular-nums}
.lvdays .k-off,.lvdays .k-off b{color:var(--fg-3)}
.lvdays .k-hol,.lvdays .k-sub{background:var(--lemon-soft)}
.lvdays .k-review{background:var(--warn-bg)}
/* Leave: HR portal */
.lvq-list{list-style:none;margin:0;padding:0}
.lvq{display:grid;grid-template-columns:minmax(200px,1fr) minmax(0,1.6fr) auto;gap:16px;align-items:center;padding:14px 20px;border-top:1px solid var(--line)}
.lvq-list .lvq:first-child{border-top:0}
.lvq__mid{display:flex;flex-direction:column;gap:3px;min-width:0}
.lvq__mid b{font-size:var(--t-sm);font-weight:600}
.lvq__mid span{font-size:12.5px;color:var(--fg-2)}
.lvq__ov{display:inline-flex;align-items:center;gap:5px;color:var(--info)!important}
.lvq__acts{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
@media (max-width:900px){.lvq{grid-template-columns:1fr}.lvq__acts{justify-content:flex-start}}
.lvcov{list-style:none;margin:0;padding:6px 20px 16px;display:flex;flex-direction:column}
.lvcov li{display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:center;padding:10px 0;border-top:1px solid var(--line)}
.lvcov li:first-child{border-top:0}
.lvcov li > div{display:flex;flex-direction:column}
.lvcov b{font-size:var(--t-sm);font-weight:600}
.lvcov span{font-size:12px;color:var(--fg-3)}
.lvex{display:flex;flex-direction:column;gap:8px;padding:12px;border:1px solid var(--line);border-radius:var(--r-md)}
.lvex > div:first-child{display:flex;flex-direction:column}
.lvex b{font-size:var(--t-sm)}
.lvex span{font-size:12.5px;color:var(--fg-2)}
.pol-steps{list-style:none;margin:0;padding:6px 20px 16px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
@media (max-width:900px){.pol-steps{grid-template-columns:1fr}}
.pol-steps li{display:flex;gap:10px;padding:12px;border:1px solid var(--line);border-radius:var(--r-md)}
.pol-steps li > span{width:26px;height:26px;border-radius:8px;display:grid;place-items:center;flex:none;background:var(--ok-bg);color:var(--ok)}
.pol-steps li.is-warn > span{background:var(--warn-bg);color:var(--warn)}
.pol-steps b{font-size:var(--t-sm)}
.pol-steps p{margin:2px 0 0;font-size:12.5px;color:var(--fg-2)}
.pol-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px}
.pol-card{display:flex;flex-direction:column;gap:8px;padding:14px;border:1px solid var(--line);border-radius:var(--r-md)}
.pol-card p{margin:0;font-size:12.5px;color:var(--fg-2)}
.pol-card dl{display:grid;grid-template-columns:auto 1fr;gap:4px 10px;margin:4px 0 0;font-size:12.5px}
.pol-card dt{color:var(--fg-3)}
.pol-card dd{margin:0;font-weight:500}
.hd-list{list-style:none;margin:0;padding:0;border:1px solid var(--line);border-radius:var(--r-md)}
.hd-list li{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;padding:10px 12px;border-top:1px solid var(--line)}
.hd-list li:first-child{border-top:0}
.hd-list li > div{display:flex;flex-direction:column;min-width:0}
.hd-list b{font-size:var(--t-sm);font-weight:600}
.hd-list li > div span{font-size:12px;color:var(--fg-3)}
.hd-date{width:46px;height:46px;border-radius:10px;background:#0E7490;display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:11px;color:#D7EEF3;line-height:1.1}
.hd-date b{font-size:17px;color:#fff}
.hd-list li.is-sub .hd-date{background:var(--info-bg);color:var(--info)}
.hd-list li.is-sub .hd-date b{color:var(--info)}
.hd-list li.is-co .hd-date{background:var(--surface-2);color:var(--fg-2)}
.hd-list li.is-co .hd-date b{color:var(--fg)}
.lvdays .k-half{background:var(--surface-2)}
.erow .eicon{display:grid;place-items:center;color:var(--brand);font-size:inherit}
.erow .eicon--warn{color:var(--warn)}.erow .eicon--leave{color:#186C83}.erow .eicon--ok{color:var(--ok)}
.lvcal__d.is-obs{box-shadow:inset 0 0 0 1.5px var(--line-2);color:var(--fg-2)}
.lvcal__d.is-obs::after{content:"";position:absolute;top:5px;right:5px;width:5px;height:5px;border-radius:50%;background:var(--lemon)}
.lvleg .is-obs{background:var(--surface);box-shadow:inset 0 0 0 1.5px var(--line-2)}
/* Readiness and accounting */
.envbar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:8px 12px;border-radius:var(--r-md);background:repeating-linear-gradient(135deg,#FFF8DD 0 10px,#DDF4EA 10px 20px);border:1px solid var(--lemon);color:#5C4B00;font-size:12.5px;font-weight:500}
.envbar a{margin-left:auto;color:#5C4B00;font-weight:600}
.rd-ws{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media (max-width:800px){.rd-ws{grid-template-columns:1fr}}
.rd-env--test{border-color:var(--lemon);box-shadow:0 0 0 1px var(--lemon)}
.rd-owner{font-size:12px!important;color:var(--fg-3)!important}
.gm-vers{display:flex;gap:10px;flex-wrap:wrap}
.gm-ver{display:flex;flex-direction:column;padding:10px 14px;border:1px solid var(--line);border-radius:var(--r-md);min-width:220px}
.gm-ver b{font-size:var(--t-sm)}
.gm-ver span{font-size:12px;color:var(--fg-3)}
.gm-ver.is-on{border-color:var(--ok-line);background:var(--ok-bg)}
.gm-ver.is-draft{border-style:dashed;border-color:var(--warn-line);background:var(--warn-bg)}
.tbl tr.gm-chg td{background:#FFFBEB}
/* Quebec attendance amendment: swipe or tap, optional methods */
.swipe{width:100%}
.swipe__track{--p:0;position:relative;height:60px;border-radius:999px;background:var(--brand);overflow:hidden;display:flex;align-items:center;justify-content:center;user-select:none;-webkit-user-select:none}
.swipe__track--out{background:var(--surface);box-shadow:inset 0 0 0 1.5px var(--brand)}
.swipe__fill{position:absolute;left:0;top:0;bottom:0;width:calc(52px + (100% - 60px) * var(--p));background:rgba(168,230,203,.25);border-radius:inherit;pointer-events:none}
.swipe__track--out .swipe__fill{background:rgba(47,50,55,.08)}
.swipe__txt{position:relative;font-weight:600;font-size:16px;color:#fff;letter-spacing:.01em;opacity:calc(1 - var(--p) * 1.2);pointer-events:none;padding-left:40px}
.swipe__track--out .swipe__txt{color:var(--brand)}
.swipe__knob{position:absolute;left:4px;top:4px;width:52px;height:52px;border-radius:50%;background:var(--lemon);color:var(--brand);display:grid;place-items:center;cursor:grab;touch-action:none;box-shadow:0 2px 6px rgba(0,0,0,.18);transition:transform .25s ease}
.swipe__track--out .swipe__knob{background:var(--brand);color:#fff}
.swipe__track.is-drag .swipe__knob{transition:none;cursor:grabbing}
.swipe__track.is-done .swipe__knob{transition:transform .12s ease}
.swipe__knob .ico{width:22px;height:22px;stroke-width:2.4}
@media (prefers-reduced-motion:reduce){.swipe__knob{transition:none}}
.ta-tap{min-height:46px;border-radius:14px;font-weight:600}
.ta-method{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap;font-size:12.5px;color:var(--fg-2);padding:8px 10px;border-radius:10px;background:var(--surface-2)}
.ta-method > span{display:inline-flex;align-items:center;gap:6px}
.ta-method .ico{color:var(--brand)}
.ta-qc{display:flex;gap:8px;align-items:flex-start;padding:10px 12px;border-radius:12px;background:var(--lemon-soft);border:1px solid var(--lemon);color:#5C4B00;font-size:12.5px}
.ta-qc .ico{flex:none;margin-top:2px}
.ta-choice2{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.ta-choice2 .btn{min-height:52px;white-space:normal;line-height:1.25}
@media (max-width:360px){.ta-choice2{grid-template-columns:1fr}}
.ta-mopt{width:100%;text-align:left;align-items:center;font:inherit;color:inherit}
.ta-mopt[aria-checked="true"]{border-color:var(--brand);box-shadow:0 0 0 1px var(--brand)}
.ta-mopt:disabled{opacity:.62;cursor:not-allowed}
.ta-mopt > div{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0}
.ta-mopt span{font-size:12.5px;color:var(--fg-2)}
.ta-mopt > .ico{color:var(--brand);flex:none}
.ta-mna{display:inline-flex;align-items:center;gap:5px;color:var(--warn)!important;font-weight:500}
.mth{display:flex;gap:12px;padding:14px;border:1px solid var(--line);border-radius:var(--r-md)}
.mth__main{display:flex;flex-direction:column;gap:6px;flex:1;min-width:0}
.mth__main p{margin:0;font-size:12.5px;color:var(--fg-2)}
.rdy-sel{min-width:170px}
.ta-code{margin:0;padding:10px 12px;border-radius:var(--r-md);background:var(--surface-2);font-family:var(--mono);font-size:12px;white-space:pre-wrap;color:var(--fg)}
/* Arrival reminders */
.ta-rem{display:inline-flex;align-items:center;gap:5px;padding:2px 8px;border-radius:999px;background:var(--lemon-soft);color:#5C4B00;font-weight:500}
.ta-rem .ico{color:#5C4B00!important}
.ta-remcard{display:flex;align-items:center;gap:12px;padding:12px 14px;border:1px solid var(--lemon);border-radius:var(--r-md);background:var(--lemon-soft)}
.ta-remcard > div{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0}
.ta-remcard b{font-size:var(--t-sm)}
.ta-remcard span{font-size:12.5px;color:var(--fg-2)}
.ta-remcard .eicon{background:var(--surface);color:#5C4B00}
.mth__sub{display:flex;flex-direction:column;gap:4px;margin-top:6px;padding:10px 12px;border-radius:var(--r-md);background:var(--surface-2)}
.os-notif{position:absolute;top:42px;left:10px;right:10px;z-index:30;display:flex;align-items:flex-start;gap:4px;padding:4px;border-radius:20px;background:rgba(245,246,249,.96);box-shadow:0 10px 30px rgba(16,24,40,.28);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);animation:notifIn .35s ease}
@keyframes notifIn{from{transform:translateY(-120%);opacity:0}to{transform:none;opacity:1}}
@media (prefers-reduced-motion:reduce){.os-notif{animation:none}}
.os-notif__main{flex:1;display:flex;gap:10px;align-items:flex-start;text-align:left;border:0;background:none;padding:8px;cursor:pointer;font:inherit;color:inherit}
.os-notif__main > div{display:flex;flex-direction:column;gap:1px;min-width:0;flex:1}
.os-notif__main b{font-size:13.5px}
.os-notif__main span{font-size:13px;color:var(--fg-2)}
.os-notif__top{display:flex;justify-content:space-between;gap:8px}
.os-notif__top b{font-size:11.5px!important;font-weight:500;color:var(--fg-3);text-transform:uppercase;letter-spacing:.04em}
.os-notif__top span{font-size:11.5px!important;color:var(--fg-3)!important}
.os-notif__app{flex:none;margin-top:2px}
.os-notif__x{width:28px;height:28px;margin:6px 6px 0 0}
@media (max-width:899px){.os-notif{position:fixed;top:calc(var(--bar-h) + 8px)}}

/* Manager, HR and payroll access (RBAC) */
.lvq__mgr{font-size:12.5px;color:var(--fg-3);align-self:center;margin-right:4px}
.pl-meta{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px 20px;margin:0}
.pl-meta dt{font-size:12px;color:var(--fg-3)}
.pl-meta dd{margin:2px 0 0;font-size:var(--t-sm);font-weight:500}
.pl-tbl td{vertical-align:top}
.pl-tbl td:last-child{white-space:normal;min-width:220px}
.pl-tbl .pl-strong td{background:var(--surface-2);font-weight:600}
.pl-tbl .pl-strong td:first-child{box-shadow:inset 3px 0 0 var(--brand)}
.pl-tx{list-style:none;margin:0;padding:0}
.pl-tx li{display:grid;grid-template-columns:110px 1fr auto;gap:12px;align-items:baseline;padding:9px 0;border-top:1px solid var(--line);font-size:var(--t-sm)}
.pl-tx li:first-child{border-top:0}
.pl-tx .neg{color:var(--bad)}
.pl-tx .pos{color:var(--ok)}
.dir-bar{display:flex;flex-wrap:wrap;gap:10px 14px;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}
.dir-bar .select{max-width:240px;min-height:38px;padding:6px 10px}
.rb-matrix th,.rb-matrix td{white-space:normal;vertical-align:top;font-size:12.5px;min-width:120px}
.rb-matrix th:first-child,.rb-matrix td:first-child{min-width:200px;position:sticky;left:0;background:var(--surface);z-index:1}
.rb-matrix thead th:first-child{background:var(--surface-2);z-index:2}
.rb-matrix td.rb-no{color:var(--fg-3)}
@media (max-width:720px){
  .pl-meta{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pl-tx li{grid-template-columns:1fr auto}
  .pl-tx li>span:first-child{grid-column:1/-1}
  .lvq{grid-template-columns:1fr;gap:10px}
  .lvq__acts{justify-content:flex-start}
}

/* Recognition & Rewards: Punctuality Champions */
.eicon--rr{background:var(--lemon-soft);color:var(--brand)}
.rr-head .card__bd{display:flex;flex-direction:column;gap:10px}
.rr-head__t{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.rr-head__t>div{flex:1;min-width:200px}
.rr-head__t h2{margin:0;font-size:var(--t-lg)}
.rr-head__t .eicon{background:var(--lemon-soft)}
.rr-scope{display:flex;gap:8px;align-items:center;margin:0;font-size:var(--t-sm);color:var(--fg-2)}
.rr-bar{display:flex;flex-wrap:wrap;gap:10px;justify-content:space-between;align-items:center}
.rr-bar .seg{flex-wrap:wrap}
.rr-note{display:flex;gap:8px;align-items:flex-start;font-size:var(--t-sm);color:var(--fg-2)}
.rr-note .ico{flex:none;margin-top:2px;color:var(--fg-3)}
.rr-tbl td{vertical-align:top}
.rr-exc{display:flex;flex-wrap:wrap;gap:10px 16px;justify-content:space-between;align-items:center;padding:12px 14px;border:1px solid var(--line);border-radius:var(--r-md)}
.rr-exc .who span{white-space:normal;max-width:60ch}
.rr-exc__a{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.rr-cfg td{white-space:normal;vertical-align:top}
.rr-cfg td.rr-chg{background:var(--lemon-soft);font-weight:500}
.rr-score{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.rr-score>div{display:flex;flex-direction:column;gap:2px;padding:12px;border:1px solid var(--line);border-radius:var(--r-md)}
.rr-score b{font-size:24px;font-weight:600;font-variant-numeric:tabular-nums}
.rr-score span:last-child{font-size:12px;color:var(--fg-3)}
.rr-sh td{font-size:13px;vertical-align:top}
.rr-cost{border:1px solid var(--line);border-radius:var(--r-md);padding:12px 14px}
.rr-cost h3{margin:0 0 8px;font-size:14px}
.rr-cost dl{margin:0;display:flex;flex-direction:column;gap:6px}
.rr-cost dl>div{display:flex;justify-content:space-between;gap:12px;font-size:var(--t-sm)}
.rr-cost dd{margin:0;font-variant-numeric:tabular-nums}
.rr-cost__t{border-top:1px solid var(--line);padding-top:6px;font-weight:600}
.rr-prev{display:flex;flex-direction:column;gap:4px;padding:14px;border-radius:14px;background:var(--brand);color:#fff}
.rr-prev .eyebrow{color:#C9D2E6}
.rr-prev p{margin:0;color:#E4E9F5;font-size:var(--t-sm)}
.choice.is-dis{opacity:.6;cursor:not-allowed}
.rr-pgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.rr-pcard{display:flex;flex-direction:column;gap:4px;align-items:flex-start;padding:14px;border:1px solid var(--line);border-radius:var(--r-md)}
.rr-pcard b{font-size:26px;font-weight:600;font-variant-numeric:tabular-nums}
.rr-pcard>span:not(.eyebrow):not(.st){font-size:12.5px;color:var(--fg-3)}
.rr-h3{margin:0 0 8px;font-size:14px}
.rr-badge{display:flex;gap:12px;align-items:center;padding:12px 14px;border-radius:var(--r-md);background:var(--lemon-soft)}
.rr-badge>.ico{width:26px;height:26px;color:var(--brand);flex:none}
.rr-badge b{display:block}
.rr-badge span{font-size:12.5px;color:var(--fg-2)}
.rr-badge--e{margin:12px;border-radius:14px}
.rr-rwline{display:flex;justify-content:space-between;gap:12px;align-items:center;padding:8px 0;border-top:1px solid var(--line);font-size:var(--t-sm)}
.rr-rwline:first-of-type{border-top:0}
.rr-me{display:flex;flex-direction:column;gap:8px;padding:18px;border-radius:18px;background:var(--brand);color:#fff}
.rr-me .eyebrow,.rr-me .muted{color:#C9D2E6}
.rr-me__big{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.rr-me__big b{font-size:44px;font-weight:600;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.rr-me__big span{font-size:var(--t-sm);color:#E4E9F5}
.rr-me__sub{display:flex;gap:8px;align-items:flex-start;font-size:13px;color:#E4E9F5}
.rr-me__sub .ico{flex:none;margin-top:2px;color:var(--lemon)}
.rr-days{list-style:none;margin:0;padding:0 0 4px}
.rr-days li{display:flex;justify-content:space-between;gap:10px;align-items:flex-start;padding:10px 16px;border-top:1px solid var(--line);font-size:13px}
.rr-days li:first-child{border-top:0}
.rr-days li>div:first-child{display:flex;flex-direction:column;gap:2px;min-width:0}
.rr-days li span{color:var(--fg-2)}
.rr-days__r{display:flex;flex-direction:column;align-items:flex-end;gap:6px;flex:none}
.rr-days__dsp{font-size:12px;color:var(--info)!important}
.rr-cards{display:flex;flex-direction:column;gap:10px}
.rr-card{display:flex;gap:12px;align-items:flex-start;padding:14px;border:1px solid var(--line);border-radius:16px;background:var(--surface)}
.rr-card>div{display:flex;flex-direction:column;gap:3px;min-width:0}
.rr-card span{font-size:12.5px;color:var(--fg-3)}
.rr-card p{margin:2px 0 0;font-size:13px;color:var(--fg-2)}
.rr-card__badge{display:inline-flex;gap:5px;align-items:center;align-self:flex-start;padding:2px 8px;border-radius:999px;background:var(--lemon-soft);color:var(--brand)!important;font-weight:500}
.rr-rw{padding:16px;display:flex;flex-direction:column;gap:6px}
.rr-rw h3{margin:2px 0 0;font-size:var(--t-md)}
.rr-rw__amt{font-size:28px;font-weight:600;font-variant-numeric:tabular-nums}
.rr-steps{list-style:none;margin:6px 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
.rr-steps li{font-size:11.5px;color:var(--fg-3);padding-top:8px;border-top:3px solid var(--line)}
.rr-steps li.done{border-top-color:var(--ok);color:var(--fg-2)}
.rr-steps li.cur{border-top-color:var(--brand);color:var(--fg);font-weight:600}
.rr-how{display:flex;gap:10px;align-items:flex-start;font-size:13.5px;color:var(--fg-2)}
.rr-how .ico{flex:none;margin-top:2px;color:var(--brand)}
@media (max-width:720px){
  .rr-score{grid-template-columns:1fr 1fr 1fr;gap:6px}
  .rr-score b{font-size:20px}
  .rr-pgrid{grid-template-columns:1fr}
}

/* ---------- Public website: direction C (refined) ----------
   Works with every palette: it only uses the --lp-* tokens. */
.lp[data-dir="c"]{--lp-r:22px;--lp-r-lg:30px;--lp-tint-p:color-mix(in srgb,var(--lp-primary) 7%,var(--lp-bg))}
.lp[data-dir="c"] .lp-btn,.lp[data-dir="c"] .lp-btn2{border-radius:999px}
.lp[data-dir="c"] .lp-btn{box-shadow:0 8px 22px -10px color-mix(in srgb,var(--lp-primary) 70%,transparent)}
.lp[data-dir="c"] .lp-btn--lg{min-height:54px;padding:0 26px}
.lp[data-dir="c"] .lp-nav{background:color-mix(in srgb,var(--lp-bg) 80%,transparent)}
.lp[data-dir="c"] .lp-link{border-radius:999px}
/* hero */
.lp[data-dir="c"] .lp-hero{position:relative;padding:84px 0 96px;background:radial-gradient(760px 420px at 88% 8%,color-mix(in srgb,var(--lp-accent) 30%,transparent),transparent 62%),radial-gradient(680px 420px at -6% 104%,color-mix(in srgb,var(--lp-primary) 11%,transparent),transparent 64%),var(--lp-bg)}
.lp[data-dir="c"] .lp-hero::before{content:"";position:absolute;inset:0;background-image:radial-gradient(color-mix(in srgb,var(--lp-ink) 13%,transparent) 1px,transparent 1.2px);background-size:22px 22px;-webkit-mask-image:linear-gradient(180deg,#000 0%,transparent 78%);mask-image:linear-gradient(180deg,#000 0%,transparent 78%);pointer-events:none}
.lp[data-dir="c"] .lp-hero>.lp-in{position:relative}
.lp[data-dir="c"] .lp-hero .lp-eyebrow{display:inline-flex;align-items:center;gap:9px;padding:6px 14px 6px 8px;border-radius:999px;background:var(--lp-bg);border:1px solid var(--lp-line);box-shadow:0 1px 2px rgba(16,24,40,.05);font-family:var(--sans);text-transform:none;letter-spacing:0;font-size:13.5px;font-weight:500;color:var(--lp-ink)}
.lp[data-dir="c"] .lp-hero .lp-eyebrow::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--lp-primary);box-shadow:0 0 0 4px color-mix(in srgb,var(--lp-accent) 70%,transparent)}
.lp[data-dir="c"] .lp-hero__grid{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:48px}
.lp[data-dir="c"] .lp-hero h1{font-size:clamp(36px,4vw,54px);letter-spacing:-.04em;line-height:1.04;margin:22px 0 20px}
.lp[data-dir="c"] .lp-accent{color:var(--lp-primary);background:linear-gradient(var(--lp-accent),var(--lp-accent)) 0 94%/100% .14em no-repeat;padding:0 0 .04em}
.lp[data-dir="c"] .lp-lede{font-size:19px}
.lp[data-dir="c"] .lp-hero__art{padding:24px 0 0 24px}
.lp[data-dir="c"] .lp-hero__stage{padding:0 84px 56px 0}
.lp[data-dir="c"] .lp-hero__art::before{content:"";position:absolute;inset:0 0 34px 0;border-radius:var(--lp-r-lg);background:linear-gradient(160deg,var(--lp-tint-p),color-mix(in srgb,var(--lp-accent) 16%,var(--lp-bg)));border:1px solid var(--lp-line)}
.lp[data-dir="c"] .lp-hero__stage{z-index:1}
.lp[data-dir="c"] .lp-ann{background:var(--lp-primary)}
.lp[data-dir="c"] .lp-hero__art figcaption{position:relative;padding-left:4px}
/* facts strip */
.lp-facts{border-top:1px solid var(--lp-line);border-bottom:1px solid var(--lp-line);background:var(--lp-bg)}
.lp-facts ul{list-style:none;margin:0 auto;padding:18px 24px;max-width:1200px;display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px 28px}
.lp-facts li{display:flex;align-items:center;gap:10px;font-weight:500;font-size:15px;color:var(--lp-ink)}
.lp-facts .eicon{width:34px;height:34px;border-radius:11px;background:var(--lp-tint-p);color:var(--lp-primary)}
/* sections */
.lp[data-dir="c"] .lp-sec{padding:112px 0}
.lp[data-dir="c"] .lp-sec h2{font-size:clamp(30px,3.5vw,46px);letter-spacing:-.035em}
.lp-k{display:inline-flex;align-items:center;gap:8px;margin-bottom:14px;padding:5px 12px;border-radius:999px;background:var(--lp-tint-p);color:var(--lp-primary);font-weight:600;font-size:13.5px}
.lp[data-dir="c"] .lp-center .lp-k,.lp[data-dir="c"] .lp-k.lp-center{display:flex;width:max-content;margin-left:auto;margin-right:auto}
.lp[data-dir="c"] .lp-kicker{padding:5px 12px;border-radius:999px;background:var(--lp-tint-p);align-self:flex-start}
.lp[data-dir="c"] .lp-tint .lp-kicker,.lp[data-dir="c"] .lp-tint .lp-k{background:var(--lp-bg)}
.lp[data-dir="c"] .lp-anchor{border-radius:var(--lp-r);padding:18px 20px;box-shadow:0 1px 2px rgba(16,24,40,.04)}
.lp[data-dir="c"] .lp-anchor .eicon{background:var(--lp-primary);color:#fff;width:42px;height:42px;border-radius:13px}
.lp[data-dir="c"] .lp-anchor:hover{box-shadow:0 14px 30px -18px color-mix(in srgb,var(--lp-primary) 60%,transparent)}
.lp[data-dir="c"] .lp-human{border-radius:var(--lp-r)}
/* product previews sit on a tinted stage */
.lp[data-dir="c"] .lp-fig__art{padding:34px;border-radius:var(--lp-r-lg);background:linear-gradient(150deg,var(--lp-tint-p),color-mix(in srgb,var(--lp-accent) 14%,var(--lp-bg)));border:1px solid var(--lp-line)}
.lp[data-dir="c"] .lp-tint .lp-fig__art{background:linear-gradient(150deg,var(--lp-bg),color-mix(in srgb,var(--lp-accent) 12%,var(--lp-bg)))}
.lp[data-dir="c"] .lp-fig figcaption{padding-left:6px}
.lp[data-dir="c"] .lp-fig--phones .lp-fig__art{padding-top:48px}
.lp[data-dir="c"] #lp-product{padding-bottom:40px}
/* how it works */
.lp[data-dir="c"] .lp-steps li{border-radius:var(--lp-r);border-color:transparent;box-shadow:0 1px 2px rgba(16,24,40,.05),0 12px 32px -22px rgba(16,24,40,.35)}
.lp[data-dir="c"] .lp-steps .eicon{background:var(--lp-primary);color:#fff;border-radius:50%}
.lp[data-dir="c"] .lp-steps::before{background:linear-gradient(90deg,transparent,var(--lp-accent),var(--lp-primary),var(--lp-accent),transparent);height:3px}
/* pricing */
.lp[data-dir="c"] .lp-calc{border-radius:var(--lp-r-lg);box-shadow:0 30px 70px -40px color-mix(in srgb,var(--lp-primary) 55%,transparent)}
.lp[data-dir="c"] .lp-calc__out{background:linear-gradient(160deg,var(--lp-tint-p),color-mix(in srgb,var(--lp-accent) 18%,var(--lp-bg)))}
/* trust: dark band */
.lp[data-dir="c"] #lp-trust{background:var(--lp-dark);color:#C9D2E6}
.lp[data-dir="c"] #lp-trust h2{color:#fff}
.lp[data-dir="c"] #lp-trust .lp-lede{color:#C9D2E6}
.lp[data-dir="c"] #lp-trust .lp-k{background:rgba(255,255,255,.08);color:var(--lp-foot-h)}
.lp[data-dir="c"] .lp-trust>div{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.1);border-radius:var(--lp-r)}
.lp[data-dir="c"] .lp-trust b{color:#fff}
.lp[data-dir="c"] .lp-trust p{color:#C9D2E6}
.lp[data-dir="c"] .lp-trust .eicon{background:rgba(255,255,255,.08);color:var(--lp-foot-h)}
.lp[data-dir="c"] #lp-trust .lp-more{color:var(--lp-foot-h)!important}
/* FAQ and contact */
.lp[data-dir="c"] .lp-faqbox{border-radius:var(--lp-r-lg)}
.lp[data-dir="c"] .lp-final{background:var(--lp-bg)}
.lp[data-dir="c"] .lp-final__copy{padding:44px 40px;border-radius:var(--lp-r-lg);background:radial-gradient(520px 300px at 100% 0%,color-mix(in srgb,var(--lp-accent) 18%,transparent),transparent 70%),var(--lp-primary-h);color:#fff}
.lp[data-dir="c"] .lp-final__copy h2{color:#fff}
.lp[data-dir="c"] .lp-final__copy .lp-lede{color:color-mix(in srgb,#fff 92%,var(--lp-primary-h))}
.lp[data-dir="c"] .lp-final__copy .lp-btn{background:var(--lp-accent);border-color:var(--lp-accent);color:var(--lp-ink)!important;box-shadow:none}
.lp[data-dir="c"] .lp-final__copy .lp-btn:hover{background:color-mix(in srgb,var(--lp-accent) 85%,#fff)}
.lp[data-dir="c"] .lp-mailbox{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.18);color:#fff}
.lp[data-dir="c"] .lp-mailbox .lp-mail{color:#fff!important}
.lp[data-dir="c"] .lp-form{border:1px solid var(--lp-line);box-shadow:0 24px 60px -40px rgba(16,24,40,.45);border-radius:var(--lp-r-lg)}
@media (max-width:1100px){
  .lp[data-dir="c"] .lp-hero__grid{grid-template-columns:1fr;gap:44px}
  .lp[data-dir="c"] .lp-hero__stage{max-width:720px;margin:0 auto}
}
@media (max-width:900px){
  .lp[data-dir="c"] .lp-sec{padding:80px 0}
  .lp[data-dir="c"] .lp-hero{padding:56px 0 72px}
  .lp[data-dir="c"] .lp-fig__art{padding:18px}
  .lp[data-dir="c"] .lp-hero__art{padding:18px 0 0 18px}
  .lp[data-dir="c"] .lp-final__copy{padding:30px 24px}
  .lp-facts ul{justify-content:flex-start}
}
@media (max-width:760px){
  .lp[data-dir="c"] .lp-hero{padding:40px 0 56px}
  .lp[data-dir="c"] .lp-hero__art{padding:18px 0 0}
  .lp[data-dir="c"] .lp-hero__stage{padding:0 0 24px}
  .lp[data-dir="c"] .lp-hero .lp-eyebrow{border-radius:14px;font-size:12.5px;padding:6px 12px 6px 8px}
  .lp[data-dir="c"] .lp-sec{padding:64px 0}
  .lp[data-dir="c"] .lp-lede{font-size:17px}
  .lp-facts ul{flex-direction:column;align-items:flex-start;gap:10px}
}

/* ---------- Website: customer-facing polish (18 Oct 2026) ----------
   No prototype bar on the website; prototype tools live in a corner panel. */
.lp{--bar-h:0px}
.lp-lang{display:inline-flex;gap:2px;padding:2px;border:1px solid var(--lp-line);border-radius:999px;background:var(--lp-bg)}
.lp-lang button{border:0;background:none;padding:4px 9px;border-radius:999px;font:600 12px/1.2 var(--sans);letter-spacing:.02em;color:var(--lp-text-2);cursor:pointer}
.lp-lang button[aria-pressed="true"]{background:var(--lp-ink);color:var(--lp-bg)}
.lp-lang--m{align-self:flex-start;margin:6px 0 0 10px}
@media (max-width:960px){.lp-nav__act>.lp-lang{display:none}}
.lp-proto{position:fixed;left:16px;bottom:16px;z-index:60;font-size:13px}
.lp-proto__btn{display:inline-flex;align-items:center;gap:7px;padding:8px 13px;border-radius:999px;border:1px dashed rgba(255,255,255,.45);background:var(--brand);color:#fff;font:600 12.5px/1 var(--sans);cursor:pointer;box-shadow:var(--sh-2)}
.lp-proto__p{position:absolute;left:0;bottom:46px;width:min(440px,calc(100vw - 32px));max-height:min(72vh,620px);overflow:auto;background:var(--surface);color:var(--fg);border:1px solid var(--line);border-radius:16px;box-shadow:var(--sh-3);padding:16px;display:flex;flex-direction:column;gap:10px}
.lp-proto__p>p{margin:0;font-size:12.5px;color:var(--fg-3)}
.lp-proto__nav{display:flex;flex-wrap:wrap;gap:6px}
.lp-proto__nav a{padding:5px 10px;border-radius:999px;background:var(--surface-2);color:var(--fg-2);text-decoration:none;font-weight:500;font-size:12.5px}
.lp-proto__nav a:hover{background:var(--line)}
.lp-proto .lp-ctl{background:none;border:0;padding:0;border-top:1px solid var(--line);padding-top:10px}
.lp-proto .lp-ctl__in{display:flex;flex-direction:column;align-items:flex-start;gap:10px}
.lp-proto .lp-ctl__g{flex-direction:column;align-items:flex-start;gap:6px}

/* direction C: display type, signature colour, stacked hero with a large product showcase */
.lp[data-dir="c"]{--lp-display:"Bricolage Grotesque","Geist",ui-sans-serif,system-ui,sans-serif}
.lp[data-dir="c"] h1,.lp[data-dir="c"] h2,.lp[data-dir="c"] h3,.lp[data-dir="c"] .lp-anchor b,.lp[data-dir="c"] .lp-steps b,.lp[data-dir="c"] .lp-trust b{font-family:var(--lp-display)}
.lp[data-dir="c"] .lp-sec h2{font-weight:700;letter-spacing:-.03em;line-height:1.06}
.lp[data-dir="c"] h3{font-weight:700;letter-spacing:-.015em}
.lp[data-dir="c"] .lp-hero{padding:72px 0 88px}
.lp[data-dir="c"] .lp-hero__grid{grid-template-columns:minmax(0,1fr);gap:56px;justify-items:center}
.lp[data-dir="c"] .lp-hero__copy{display:flex;flex-direction:column;align-items:center;text-align:center;max-width:1100px}
.lp[data-dir="c"] .lp-hero h1{font-size:clamp(40px,5.7vw,80px);font-weight:700;line-height:.98;letter-spacing:-.045em;margin:24px 0 22px}
.lp[data-dir="c"] .lp-h1a{display:block}
.lp[data-dir="c"] .lp-hero h1 .lp-accent{color:var(--lp-ink);background:none;padding:0}
.lp[data-dir="c"] .lp-lede{margin:0 auto;max-width:62ch}
.lp[data-dir="c"] .lp-hero .lp-cta{justify-content:center}
.lp[data-dir="c"] .lp-hero__note{justify-content:center}
.lp[data-dir="c"] .lp-hero__help{text-align:center}
.lp[data-dir="c"] .lp-btn svg.ico{width:24px;height:24px;padding:5px;border-radius:50%;background:var(--lp-accent);color:var(--lp-ink);margin-right:-10px}
.lp[data-dir="c"] .lp-k{background:color-mix(in srgb,var(--lp-accent) 40%,var(--lp-bg));color:var(--lp-ink)}
.lp[data-dir="c"] .lp-kicker{background:color-mix(in srgb,var(--lp-accent) 40%,var(--lp-bg));color:var(--lp-ink)}
.lp[data-dir="c"] .lp-tint .lp-kicker,.lp[data-dir="c"] .lp-tint .lp-k{background:color-mix(in srgb,var(--lp-accent) 45%,var(--lp-alt))}
.lp[data-dir="c"] .lp-facts .eicon{background:color-mix(in srgb,var(--lp-accent) 45%,var(--lp-bg));color:var(--lp-ink)}
.lp[data-dir="c"] .lp-hero__art{width:100%;max-width:1160px;padding:0}
.lp[data-dir="c"] .lp-hero__art::before{display:none}
.lp[data-dir="c"] .lp-hero__stage{padding:64px 300px 72px 64px;border-radius:32px;overflow:hidden;background:radial-gradient(640px 320px at 78% -6%,color-mix(in srgb,var(--lp-accent) 42%,transparent),transparent 70%),radial-gradient(560px 340px at -4% 108%,color-mix(in srgb,var(--lp-primary) 45%,transparent),transparent 70%),linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px) 0 0/40px 40px,linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px) 0 0/40px 40px,var(--lp-dark);box-shadow:0 40px 80px -48px color-mix(in srgb,var(--lp-dark) 80%,transparent)}
.lp[data-dir="c"] .lp-hero__stage .pvw{zoom:1.22;box-shadow:0 30px 60px -20px rgba(0,0,0,.45)}
.lp[data-dir="c"] .lp-hero__phone{right:56px;bottom:-56px;zoom:1.18;filter:drop-shadow(0 24px 40px rgba(0,0,0,.45))}
.lp[data-dir="c"] .lp-ann{background:var(--lp-accent);color:var(--lp-ink);box-shadow:none}
.lp[data-dir="c"] .lp-ann--a{top:22px;left:64px}
.lp[data-dir="c"] .lp-ann--b{top:22px;right:56px;bottom:auto}
.lp[data-dir="c"] .lp-hero__art figcaption{justify-content:center;padding:0}
/* larger previews in the product sections */
.lp[data-dir="c"] .lp-split{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:56px}
.lp[data-dir="c"] .lp-split--rev{grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr)}
.lp[data-dir="c"] .lp-split--att{grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr)}
.lp[data-dir="c"] .lp-review{grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr)}
.lp[data-dir="c"] .lp-fig__art .pvw{zoom:1.12}
@media (max-width:1100px){
  .lp[data-dir="c"] .lp-hero__stage{padding:44px 230px 56px 40px;max-width:none}
  .lp[data-dir="c"] .lp-hero__stage .pvw{zoom:1.04}
  .lp[data-dir="c"] .lp-hero__phone{zoom:1;right:36px}
  .lp[data-dir="c"] .lp-ann--a{left:40px}
  .lp[data-dir="c"] .lp-split,.lp[data-dir="c"] .lp-split--rev,.lp[data-dir="c"] .lp-split--att,.lp[data-dir="c"] .lp-review{grid-template-columns:1fr;gap:36px}
  .lp[data-dir="c"] .lp-fig__art .pvw{zoom:1}
}
@media (max-width:760px){
  .lp[data-dir="c"] .lp-hero__stage{padding:56px 16px 0;border-radius:24px}
  .lp[data-dir="c"] .lp-hero__phone{zoom:1;margin-bottom:-70px}
  .lp[data-dir="c"] .lp-ann--b{top:16px;left:50%;right:auto;transform:translateX(-50%)}
  .lp[data-dir="c"] .lp-hero h1{line-height:1.02}
}
.lp-nw{white-space:nowrap}

/* ---------- Website direction D: the connected workday (morphing brief v1.1) ----------
   Flat warm surfaces, deliberate radii by role (buttons 12, panels 16, devices 46), no glows. */
.lp[data-dir="d"]{--lpd-paper:color-mix(in srgb,var(--lp-bg) 74%,#EFE4CC);--mx-ease:cubic-bezier(.22,1,.36,1);--lp-display:"Bricolage Grotesque","Geist",ui-sans-serif,system-ui,sans-serif}
.lp[data-dir="d"] h1,.lp[data-dir="d"] h2,.lp[data-dir="d"] h3,.lp[data-dir="d"] .wd-tab__t,.lp[data-dir="d"] .rs-role{font-family:var(--lp-display)}
.lp[data-dir="d"] .lp-sec{padding:104px 0}
.lp[data-dir="d"] .lp-sec h2{font-weight:700;letter-spacing:-.03em;line-height:1.06;font-size:clamp(30px,3.4vw,46px);max-width:18ch}
.lp[data-dir="d"] h3{font-weight:700;letter-spacing:-.015em}
.lp[data-dir="d"] .lp-btn{border-radius:12px}
.lp[data-dir="d"] .lp-btn svg.ico{width:24px;height:24px;padding:5px;border-radius:50%;background:var(--lp-accent);color:var(--lp-ink);margin-right:-8px}
.lp[data-dir="d"] .lp-btn2{border-radius:12px}
.lp[data-dir="d"] .pvw,.lp[data-dir="d"] .pvp,.lp[data-dir="d"] .pvreg{font-variant-numeric:tabular-nums}
.lpd-k{display:inline-flex;align-items:center;gap:10px;margin:0 0 14px;font-weight:600;font-size:14px;color:var(--lp-ink)}
.lpd-k::before{content:"";width:22px;height:4px;border-radius:2px;background:var(--lp-accent)}
.lpd-head{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:24px 56px;align-items:end;margin-bottom:40px}
.lpd-head h2{margin-bottom:0}
.lpd-head .lp-lede{margin:0}
.lpd-demo{display:flex;gap:8px;align-items:flex-start;font-size:13.5px;color:var(--lp-text-2);margin-top:20px}
.lpd-demo .ico{flex:none;margin-top:3px}
.lpd-link{background:none;border:0;color:var(--lp-ink)!important;font-weight:600;min-height:52px;padding:0 6px;text-decoration:underline;text-decoration-color:color-mix(in srgb,var(--lp-ink) 35%,transparent);text-underline-offset:5px}
.lpd-link:hover{text-decoration-color:var(--lp-ink)}
/* hero */
.lpd-hero{padding:64px 0 88px;border-bottom:1px solid var(--lp-line);overflow:hidden}
.lpd-hero__grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:48px;align-items:center}
.lpd-cat{display:flex;align-items:center;gap:10px;margin:0;font-size:14.5px;font-weight:600;color:var(--lp-text-2)}
.lpd-cat::before{content:"";width:10px;height:10px;border-radius:3px;background:var(--lp-accent);box-shadow:0 0 0 1px color-mix(in srgb,var(--lp-ink) 25%,transparent);flex:none}
.lpd-hero h1{font-size:clamp(38px,4.5vw,62px);font-weight:700;line-height:1.02;letter-spacing:-.04em;margin:18px 0 20px}
.lpd-hero .lp-h1a,.lpd-h1b{display:block}
.lpd-comp{margin:0;min-width:0}
.lpd-comp__art{position:relative;height:480px}
.lpd-comp__art::before{content:"";position:absolute;inset:36px -40px 24px 70px;border-radius:24px;background:var(--lpd-paper)}
.lpd-comp__phone{position:absolute;left:0;top:0;z-index:3;filter:drop-shadow(0 18px 34px rgba(16,24,40,.25))}
.lpd-comp__mgr{position:absolute;left:190px;top:22px;width:min(330px,calc(100% - 190px));z-index:2}
.lpd-comp__reg{position:absolute;left:240px;right:0;bottom:24px;z-index:1}
.pvw--frag .pvv__row{grid-template-columns:auto 1fr auto}
.pvreg{width:100%;border-collapse:collapse;font-size:12.5px}
.pvreg th{font-weight:500;color:var(--fg-3);text-align:left;padding:0 0 8px;border-bottom:1px solid #E7EAF0}
.pvreg td{padding:8px 0;border-bottom:1px solid #EEF0F4}
.pvreg .r{text-align:right}
.pvreg__ft{display:flex;align-items:center;gap:10px;margin-top:10px;font-size:12px;flex-wrap:wrap}
.lpd-flow{list-style:none;margin:20px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;position:relative}
.lpd-flow::before{content:"";position:absolute;left:6px;right:6px;top:6px;height:2px;background:repeating-linear-gradient(90deg,var(--lp-ink) 0 6px,transparent 6px 12px);opacity:.35}
.lpd-flow li{position:relative;padding-top:22px;display:flex;flex-direction:column;gap:2px}
.lpd-flow li::before{content:"";position:absolute;left:0;top:0;width:14px;height:14px;border-radius:50%;background:var(--lp-accent);box-shadow:0 0 0 2px var(--lp-ink)}
.lpd-flow b{font-size:14.5px;color:var(--lp-ink)}
.lpd-flow span{font-size:13px;color:var(--lp-text-2)}
.lpd-comp figcaption{display:flex;flex-wrap:wrap;gap:6px 10px;align-items:center;margin-top:14px;font-size:12.5px;color:var(--lp-text-2)}
/* sample workday */
.lpd-wd{background:var(--lpd-paper)}
.wd-tabs{position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin:0 0 32px;padding-top:12px;border-top:2px solid color-mix(in srgb,var(--lp-ink) 14%,transparent)}
.wd-ind{position:absolute;z-index:0;border-radius:16px;background:var(--lp-bg);box-shadow:0 1px 2px rgba(16,24,40,.06),0 10px 24px -16px rgba(16,24,40,.35);transition:left .22s var(--mx-ease),top .22s var(--mx-ease),width .22s var(--mx-ease),height .22s var(--mx-ease)}
.wd-ind::before{content:"";position:absolute;left:16px;right:16px;top:-14px;height:4px;border-radius:2px;background:var(--lp-accent)}
.wd-tab{position:relative;z-index:1;display:flex;flex-direction:column;gap:3px;text-align:left;padding:16px 18px;border:0;border-radius:16px;background:none;cursor:pointer;color:var(--lp-text);font:inherit;min-height:44px}
.wd-tab:hover{background:color-mix(in srgb,var(--lp-ink) 4%,transparent)}
.wd-tab[aria-pressed="true"]:hover{background:none}
.wd-tab:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.wd-tab__t{font-size:18px;font-weight:700;color:var(--lp-ink);letter-spacing:-.01em}
.wd-tab__r{font-size:12.5px;font-weight:600;color:var(--lp-text-2)}
.wd-tab__b{font-size:13.5px;line-height:1.45;color:var(--lp-text-2)}
.wd-body{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:40px;align-items:start}
.wd-detail h3{font-size:22px;margin-bottom:14px;color:var(--lp-ink)}
.wd-take{margin-top:16px;padding-left:12px;border-left:3px solid var(--lp-accent);font-weight:600;color:var(--lp-ink)}
/* morph stages: the frame animates size, radius and tone; screens crossfade at their own size */
.mx{position:relative;transition:height .5s var(--mx-ease)}
.mx__frame{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:0;height:0;pointer-events:none;background:#fff;border:1px solid var(--lp-line);box-shadow:0 1px 2px rgba(16,24,40,.06),0 28px 60px -34px rgba(16,24,40,.45);transition:width .5s var(--mx-ease),height .5s var(--mx-ease),border-radius .5s var(--mx-ease),background-color .35s ease,border-color .35s ease}
.mx__frame[data-tone="device"]{background:#16181C;border-color:#16181C;box-shadow:0 0 0 1.5px #6B7079,0 0 0 3px #2B2E33,0 28px 60px -30px rgba(16,24,40,.55)}  /* an iPhone: dark glass with a titanium edge */
.mx__frame[data-tone="panel"]{background:var(--lp-bg)}
.mx__l{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);opacity:0;visibility:hidden;pointer-events:none;transition:opacity .12s ease,visibility 0s linear .12s}
.mx__l.is-on{opacity:1;visibility:visible;transition:opacity .18s ease .3s,visibility 0s}
.mx--still,.mx--still .mx__frame,.mx--still .mx__l,.wd-ind.mx--still{transition:none!important}
@media (prefers-reduced-motion:reduce){.mx,.mx__frame,.mx__l,.mx__l.is-on,.wd-ind{transition:none!important}}
.mx__l--people,.mx__l--review{width:min(470px,calc(100% - 24px));border-radius:16px;overflow:hidden}
.mx__l--pay{width:min(580px,calc(100% - 24px));border-radius:12px;overflow:hidden}
.mx__l--time,.mx__l--compact{width:236px}
.mx__l--detail{width:min(1080px,100%);border-radius:24px}
.mx__l .pvw{border:0;box-shadow:none;border-radius:0;background:#fff}
.pvp--bare{border:0!important;box-shadow:none!important;border-radius:36px;width:236px}
.pvp__card--leave{gap:8px}
.pvp__kv{display:grid;grid-template-columns:1fr auto;gap:4px 10px;font-size:12px;padding:8px 0;border-top:1px solid #EEF0F4;border-bottom:1px solid #EEF0F4}
.pvp__kv span{color:var(--fg-3)}
.pvp__kv b{text-align:right}
/* employee experience */
.lpd-split{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:24px 56px;align-items:start}
.lpd-split h2{margin-bottom:0}
.lpd-split .lp-list{margin-top:18px}
.lpd-toggle{margin-top:24px;border-radius:12px;min-height:48px;font-weight:600;border-color:var(--lp-ink);color:var(--lp-ink)}
.lpd-toggle:hover{background:var(--lp-soft)}
.ee-bench{margin-top:40px;padding:20px 12px;border-radius:24px;background:var(--lpd-paper)}
.ee-detail{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;padding:32px 28px}
.ee-col{display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center}
.ee-col .pvp{margin-bottom:10px}
.ee-col>b{font-size:16px;color:var(--lp-ink)}
.ee-col>span{font-size:13.5px;color:var(--lp-text-2);max-width:28ch}
.pvp__card--leave .st{white-space:normal;max-width:100%;align-self:flex-start;line-height:1.25}
/* roles */
.rs-grid{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:32px;align-items:start}
.rs-col{border-top:3px solid var(--lp-ink);padding-top:18px}
.rs-role{margin:0;font-size:26px;font-weight:700;color:var(--lp-ink);letter-spacing:-.02em}
.rs-who{margin:2px 0 10px;font-size:14px;color:var(--lp-text-2)}
.rs-col ul{list-style:none;margin:0;padding:0}
.rs-col li{display:flex;gap:12px;align-items:baseline;padding:12px 0;border-bottom:1px solid var(--lp-line);font-size:16px}
.rs-col li::before{content:"";width:8px;height:8px;border-radius:2px;background:var(--lp-accent);box-shadow:0 0 0 1px color-mix(in srgb,var(--lp-ink) 30%,transparent);flex:none;transform:translateY(-1px)}
.rs-mid{display:flex;flex-direction:column;align-items:center;gap:10px;padding-top:56px;max-width:130px;text-align:center;font-size:13px;font-weight:600;color:var(--lp-text-2)}
.rs-mid .ico{width:40px;height:40px;padding:10px;border-radius:50%;background:var(--lp-accent);color:var(--lp-ink)}
.rs-hr{margin:32px 0 12px;padding:16px 18px;border-radius:16px;background:var(--lpd-paper);font-size:15.5px;color:var(--lp-text)}
.rs-hr b{color:var(--lp-ink)}
/* payroll review (the one dark section) */
.lpd-pay{background:var(--lp-dark);color:#C9D2E6}
.lpd-pay h2{color:#fff!important}
.lpd-pay .lp-lede{color:#C9D2E6}
.lpd-pay .lpd-k{color:#fff}
.pd-grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:48px;align-items:center}
.pd-fig{margin:0;min-width:0}
.pd-fig .pvw{zoom:1.15;box-shadow:0 30px 70px -30px rgba(0,0,0,.6)}
.pd-fig figcaption{display:flex;gap:10px;align-items:center;margin-top:14px;font-size:12.5px;color:#C9D2E6}
.pd-fig .lp-pv{background:transparent;border-color:rgba(255,255,255,.25);color:#C9D2E6}
.pd-notes{list-style:none;margin:0;padding:0}
.pd-notes li{display:flex;flex-direction:column;gap:4px;padding:20px 0;border-top:1px solid rgba(255,255,255,.14)}
.pd-notes li:last-child{border-bottom:1px solid rgba(255,255,255,.14)}
.pd-notes b{font-family:var(--lp-display);font-size:21px;color:#fff;letter-spacing:-.01em}
.pd-notes b::before{content:"";display:inline-block;width:10px;height:10px;border-radius:3px;background:var(--lp-accent);margin-right:10px;transform:translateY(-2px)}
.pd-notes span{font-size:15px;color:#C9D2E6}
.pd-avail{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:28px;font-size:14px;color:#C9D2E6}
.pd-links{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}
.pd-links a,.pd-links button{display:inline-flex;align-items:center;gap:8px;padding:10px 14px;border:1px solid rgba(255,255,255,.22);border-radius:12px;background:transparent;color:#fff!important;font:500 14px/1.2 var(--sans);text-decoration:none;cursor:pointer}
.pd-links a:hover,.pd-links button:hover{background:rgba(255,255,255,.07)}
.pd-links .ico{color:var(--lp-accent)}
/* pricing note, setup journey, closing */
.lpd-grow{margin-top:20px;padding:18px 20px;border:1px solid var(--lp-line);border-radius:16px;display:flex;flex-direction:column;gap:6px}
.lpd-grow b{font-family:var(--lp-display);font-size:18px;color:var(--lp-ink)}
.lpd-grow p{margin:0;color:var(--lp-text-2);font-size:15px}
.lpd-setup{background:var(--lpd-paper)}
.su-steps{list-style:none;margin:0 0 28px;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}
.su-steps li{position:relative;padding-top:30px;border-top:2px solid color-mix(in srgb,var(--lp-ink) 22%,transparent);display:flex;flex-direction:column;gap:6px}
.su-steps li::before{content:"";position:absolute;left:0;top:-9px;width:16px;height:16px;border-radius:50%;background:var(--lp-accent);box-shadow:0 0 0 2px var(--lp-ink)}
.su-steps b{font-family:var(--lp-display);font-size:19px;color:var(--lp-ink)}
.su-steps span{font-size:15px;color:var(--lp-text-2)}
.lp[data-dir="d"] .lp-faqbox{border-radius:16px}
.lp[data-dir="d"] .lp-final{background:var(--lp-bg)}
.lp[data-dir="d"] .lp-final__copy{padding:44px 40px;border-radius:16px;background:var(--lp-primary-h);color:#fff}
.lp[data-dir="d"] .lp-final__copy h2{color:#fff}
.lp[data-dir="d"] .lp-final__copy .lp-lede{color:color-mix(in srgb,#fff 92%,var(--lp-primary-h))}
.lp[data-dir="d"] .lp-final__copy .lp-btn{background:var(--lp-accent);border-color:var(--lp-accent);color:var(--lp-ink)!important}
.lp[data-dir="d"] .lp-final__copy .lp-btn svg.ico{background:var(--lp-ink);color:var(--lp-accent)}
.lp[data-dir="d"] .lp-mailbox{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.18);color:#fff}
.lp[data-dir="d"] .lp-mailbox .lp-mail{color:#fff!important}
.lp[data-dir="d"] .lp-form{border:1px solid var(--lp-line);border-radius:16px}
@media (max-width:1100px){
  .lpd-hero__grid,.wd-body,.pd-grid,.lpd-head,.lpd-split{grid-template-columns:minmax(0,1fr)}
  .lpd-comp{max-width:680px;width:100%;margin:0 auto}
  .rs-grid{grid-template-columns:minmax(0,1fr)}
  .rs-mid{flex-direction:row;padding:0;max-width:none}
  .rs-mid .ico{transform:rotate(90deg)}
  .pd-fig .pvw{zoom:1}
}
@media (max-width:760px){
  .lp[data-dir="d"] .lp-sec{padding:64px 0}
  .lpd-hero{padding:40px 0 56px}
  .lpd-comp__art{height:auto;display:flex;flex-direction:column;gap:14px;align-items:center}
  .lpd-comp__art::before{inset:60px -16px 0}
  .lpd-comp__phone,.lpd-comp__mgr,.lpd-comp__reg{position:relative;left:auto;right:auto;top:auto;bottom:auto;width:100%}
  .lpd-comp__phone{width:auto}
  .lpd-flow{grid-template-columns:minmax(0,1fr);gap:12px}
  .lpd-flow::before{left:6px;right:auto;top:8px;bottom:8px;width:2px;height:auto;background:repeating-linear-gradient(180deg,var(--lp-ink) 0 6px,transparent 6px 12px)}
  .lpd-flow li{padding:0 0 0 28px}
  .wd-tabs{grid-template-columns:repeat(2,minmax(0,1fr))}
  .wd-tab{padding:12px 12px}
  .wd-tab__b{font-size:12.5px}
  .ee-detail{grid-template-columns:minmax(0,1fr);gap:32px;padding:24px 12px}
  .su-steps{grid-template-columns:minmax(0,1fr);gap:20px}
  .lp[data-dir="d"] .lp-final__copy{padding:30px 24px}
}

/* ----- Payroll operations: setup, payments, employment events, ROE, deductions, past payroll, year-end (OWN-026) ----- */
.op-bar{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.op-bar .seg{flex-wrap:wrap}
.op-2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:20px;align-items:start}
.op-tbl td,.op-tbl th{vertical-align:top}
.op-tbl td{white-space:normal}
.op-prot td{background:var(--surface-2)}
.op-prot td .ico{vertical-align:-2px;color:var(--fg-3)}
.op-line{display:flex;align-items:center;gap:12px;padding:12px 14px;border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface)}
.op-line>div:first-child{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.op-line>div:first-child b{font-size:var(--t-sm);font-weight:600}
.op-line>div:first-child span{font-size:12.5px;color:var(--fg-2)}
.op-line .btn{flex:none}
.op-diff{font-size:11.5px;color:var(--fg-3);margin-top:2px;font-variant-numeric:tabular-nums}
.op-diff.is-open{color:var(--warn);font-weight:600}
.op-diff.is-ok{color:var(--ok)}
.op-ye th,.op-ye td{white-space:nowrap;vertical-align:top}
.op-ye td:first-child{white-space:normal;min-width:150px}
.op-grid{font-size:12px}
.op-grid th{text-align:center;padding:8px 4px;font-variant-numeric:tabular-nums}
.op-grid th:first-child{text-align:left;padding-left:16px}
.op-grid td{text-align:center;padding:6px 4px}
.op-grid td:first-child{text-align:left;padding-left:16px;white-space:nowrap}
.op-cell{display:inline-grid;place-items:center;width:18px;height:18px;border-radius:5px;font-size:11px;font-weight:700;line-height:1}
.op-cell--ok{background:var(--ok-bg);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--ok) 25%,transparent)}
.op-cell--miss{background:var(--bad-bg);color:var(--bad)}
.op-cell--disp{background:var(--warn-bg);color:var(--warn)}
.op-tot td{border-top:2px solid var(--line-2)}
.op-tracks{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;margin-top:14px}
.op-tracks>div,.op-states>div{display:flex;flex-direction:column;gap:6px;align-items:flex-start;padding:10px 12px;border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface-2);min-width:0}
.op-tracks span,.op-states span{font-size:12px;color:var(--fg-3)}
.op-states{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.op-tl{list-style:none;margin:0;padding:0 0 0 18px;border-left:2px solid var(--line);display:flex;flex-direction:column;gap:14px}
.op-tl li{position:relative;display:flex;flex-direction:column;gap:2px;align-items:flex-start}
.op-tl li::before{content:"";position:absolute;left:-25px;top:4px;width:10px;height:10px;border-radius:50%;background:var(--surface);border:2px solid var(--brand)}
.op-tl b{font-size:var(--t-sm);font-weight:600}
.op-tl span{font-size:12.5px;color:var(--fg-2)}
.op-blocks dt{white-space:normal}
.op-blocks dt .mono{font-size:11.5px;color:var(--fg-3);margin-right:4px}
.op-sim{display:flex;flex-wrap:wrap;gap:8px;align-items:center;padding:10px 12px;border:1px dashed var(--line-2);border-radius:var(--r-md)}
.op-rc{padding:0}
.op-wb{grid-template-columns:repeat(5,minmax(0,1fr))}
.drawer__ft .tag{align-self:center;margin-right:auto}
@media (max-width:1100px){.op-tracks{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:900px){.op-2{grid-template-columns:minmax(0,1fr)}.op-wb{grid-template-columns:repeat(5,minmax(110px,1fr))}}
@media (max-width:640px){
  .op-tracks,.op-states{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .op-line{flex-wrap:wrap}
  .op-line>div:first-child{flex-basis:100%}
}

/* ----- Payroll operations, part 2: run controls, help, obligations, partner workspace (OWN-026, OWN-027) ----- */
.op-run{padding:16px 18px;display:flex;flex-direction:column;gap:12px}
.op-run__row{display:flex;flex-wrap:wrap;gap:14px 24px;align-items:center}
.op-run__id{display:flex;flex-direction:column;gap:2px;min-width:180px}
.op-run__id b{font-size:15px;font-weight:600}
.op-run__id span:last-child{font-size:12.5px;color:var(--fg-2)}
.op-run__kv{display:flex;flex-wrap:wrap;gap:8px 22px;margin:0;flex:1}
.op-run__kv div{display:flex;flex-direction:column;gap:2px}
.op-run__kv dt{font-size:11.5px;color:var(--fg-3)}
.op-run__kv dd{margin:0;font-size:13.5px;font-weight:600;font-variant-numeric:tabular-nums}
.op-run__acts{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.op-run__saved{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;color:var(--ok)}
.op-run__stale{display:flex;gap:12px;align-items:center;padding:10px 12px;border-radius:var(--r-md);background:var(--warn-bg);color:var(--warn)}
.op-run__stale>div{flex:1;display:flex;flex-direction:column;gap:2px}
.op-run__stale span{color:var(--fg-2);font-size:12.5px}
.op-run__foot{display:flex;flex-wrap:wrap;gap:8px 16px;align-items:center;justify-content:space-between;font-size:12.5px;border-top:1px solid var(--line);padding-top:10px}
.op-sim--inline{padding:4px 8px;gap:8px}
.op-helpbar{display:flex;justify-content:flex-end;margin:-4px 0 -6px}
.op-helpbar .linkbtn{display:inline-flex;align-items:center;gap:6px;font-size:13px}
.op-help{display:flex;flex-direction:column;gap:10px;padding:14px;border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface)}
.op-help b{display:block;font-size:14px;font-weight:600;margin-top:2px}
.op-help__row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.op-help__row span:not(.eyebrow){display:block;font-size:13px;margin-top:2px}
.op-cal{list-style:none;margin:8px 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:8px}
.op-cal li{display:flex;flex-direction:column;gap:2px;padding:10px 12px;border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface-2)}
.op-cal b{font-size:13.5px;font-weight:600}
.op-cal span{font-size:12.5px;color:var(--fg-2)}
.op-pick .select{min-width:200px}
.op-wb4{grid-template-columns:repeat(4,minmax(0,1fr))}
.choice.is-dis{opacity:.55;cursor:not-allowed}
.op-gu dd b{font-size:15px}
.side--pt .nav a[aria-current="page"]{background:var(--surface-2)}
.pt-brand{display:flex;gap:10px;align-items:center}
.pt-brand b{display:block;font-size:14px;line-height:1.25}
.pt-brand span{font-size:12px;color:var(--fg-3)}
.pt-logo{display:inline-grid;place-items:center;width:32px;height:32px;border-radius:9px;background:#0E7490;color:#fff;font-weight:700;font-size:12px;letter-spacing:.04em;flex:none}
.pt-logo--sm{width:26px;height:26px;font-size:10.5px;border-radius:7px}
.pt-preview{display:flex;gap:8px;align-items:flex-start;padding:10px 14px;border-radius:var(--r-md);background:var(--surface-2);border:1px dashed var(--line-2);font-size:12.5px;color:var(--fg-2)}
.pt-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:20px}
.pt-card .card__hd h2{font-size:16px}
.pt-ctx{position:sticky;top:0;z-index:5;display:flex;flex-wrap:wrap;gap:10px 14px;align-items:center;padding:12px 16px;border-radius:var(--r-md);background:#0E7490;color:#fff;box-shadow:var(--sh-2)}
.pt-ctx>div{flex:1;min-width:220px;display:flex;flex-direction:column;gap:2px}
.pt-ctx>div b{display:flex;gap:8px;align-items:center;font-size:14px}
.pt-ctx>div span{font-size:12.5px;color:#D6EAF0}
.pt-ctx .btn{background:#fff;color:#0E7490;border-color:#fff}
@media (max-width:640px){
  .op-run__row{flex-direction:column;align-items:flex-start}
  .op-help__row{grid-template-columns:minmax(0,1fr)}
  .op-pick .select{min-width:0;width:100%}
  .op-pick{width:100%}
  .pt-grid{grid-template-columns:minmax(0,1fr)}
}

/* ----- Demo Gap Amendment (OWN-028): firm invitations, settlement, notices, notes, rules, time, connectors, setup ----- */
.tag--warn{background:var(--warn-bg);color:var(--warn)}
.choice--warn{border-color:color-mix(in srgb,var(--warn) 35%,var(--line-2))}
.choice--warn:has(input:checked){border-color:var(--warn);box-shadow:0 0 0 1px var(--warn);background:var(--warn-bg)}
.dg-plain{display:flex;flex-direction:column;gap:8px;padding:14px;border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface-2)}
.dg-plain .lp-list li{font-size:13.5px}
.dg-mail{display:flex;flex-direction:column;gap:8px;padding:14px;border:1px dashed var(--line-2);border-radius:var(--r-md)}
.dg-mail p{margin:0;font-size:13.5px}
.dg-inv{max-width:560px;display:flex;flex-direction:column;gap:16px}
.dg-firm{display:flex;gap:12px;align-items:center}
.dg-firm b{display:block;font-size:15px}
.dg-firm span{font-size:12.5px;color:var(--fg-3)}
.dg-h{font-size:22px;line-height:1.25;margin:0}
.dg-sum{display:flex;flex-direction:column;gap:8px;padding:14px;border-radius:var(--r-md);background:var(--surface-2)}
.dg-orgs{margin:0;padding-left:18px;font-size:13.5px;color:var(--fg-2)}
.dg-dec{display:flex;flex-direction:column;gap:8px;padding:14px;border:1px solid var(--line);border-radius:var(--r-md)}
.dg-dec h2{font-size:15px;margin:0}
.dg-dec p{margin:0;font-size:13px}
.dg-x{display:flex;flex-direction:column;gap:6px}
.dg-al{list-style:none;margin:0 0 0 14px;padding:0 0 0 12px;border-left:2px solid var(--line);display:flex;flex-direction:column;gap:6px}
.dg-al li{display:flex;flex-wrap:wrap;gap:6px 12px;align-items:center;justify-content:space-between;font-size:13px}
.dg-ex{display:flex;flex-direction:column;gap:8px;padding:14px;border:1px dashed var(--line-2);border-radius:var(--r-md)}
.dg-ex p{margin:0;font-size:13px}
.dg-pref{cursor:pointer}
.dg-pref input[type=checkbox]{width:20px;height:20px;accent-color:var(--brand);flex:none}
.dg-note{display:flex;flex-direction:column;gap:6px;padding:12px 14px;border:1px solid var(--line);border-radius:var(--r-md)}
.dg-note p{margin:0;font-size:14px;white-space:pre-wrap;word-break:break-word}
.dg-layers{list-style:none;margin:0;padding:0 20px 8px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;counter-reset:dgl}
.dg-layers li{display:flex;gap:10px;align-items:flex-start;padding:10px 12px;border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface-2)}
.dg-layers li b{display:block;font-size:13.5px}
.dg-layers li span{font-size:12px;color:var(--fg-3)}
.dg-layers__n{width:10px;height:10px;border-radius:50%;background:var(--brand);flex:none;margin-top:4px}
.dg-layers li:nth-child(1) .dg-layers__n{background:var(--line-2)}
.dg-layers li:nth-child(2) .dg-layers__n{background:color-mix(in srgb,var(--brand) 45%,#fff)}
.dg-cat{padding:0 20px 8px}
.dg-cc{display:flex;flex-direction:column;gap:10px;padding:14px;border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface)}
.dg-cc .kv{font-size:12.5px;gap:4px 10px}
.dg-step{display:flex;flex-direction:column;gap:8px;padding:14px;border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface-2)}
.dg-step p{margin:0}
.dg-entry{display:flex;flex-direction:column;gap:8px;padding:14px;border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface-2);margin-bottom:4px}
.dg-entry .seg{align-self:flex-start;flex-wrap:wrap}
.dg-next{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.dg-next li{display:flex;gap:12px;align-items:center;justify-content:space-between;padding:10px 12px;border:1px solid var(--line);border-left:3px solid var(--line-2);border-radius:var(--r-md)}
.dg-next li.is-block{border-left-color:var(--bad)}
.dg-next li>div{display:flex;flex-direction:column;gap:2px;min-width:0}
.dg-next li b{font-size:13.5px;font-weight:600}
.dg-next li span{font-size:12.5px;color:var(--fg-2)}
@media (max-width:900px){.dg-layers{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
@media (max-width:640px){
  .dg-layers{grid-template-columns:minmax(0,1fr)}
  .dg-next li{flex-wrap:wrap}
  .dg-al{margin-left:0}
}
/* Narrow screens: long labels (often French) wrap instead of pushing values off screen; values keep at least half the width */
@media (max-width:560px){.prof-kv{grid-template-columns:minmax(0,max-content) minmax(50%,1fr)}.prof-kv dt{white-space:normal}.prof-kv dd{overflow-wrap:anywhere}}
/* firm invitation rows: details on the left, actions wrap underneath on narrow widths */
.dg-ili{display:flex;flex-wrap:wrap;gap:12px 16px;align-items:center;justify-content:space-between;padding:12px 14px;border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface)}
.dg-ili__main{flex:1 1 320px;min-width:0;display:flex;flex-direction:column;gap:6px}
.dg-ili__top{display:flex;flex-wrap:wrap;gap:6px 12px;align-items:center}
.dg-ili__top b{font-size:var(--t-sm);font-weight:600}
.dg-ili__main>span{font-size:12.5px;overflow-wrap:anywhere}
.dg-ili__req{display:flex;flex-wrap:wrap;gap:6px}
.dg-ili__acts{display:flex;flex-wrap:wrap;gap:6px;justify-content:flex-end}
@media (max-width:560px){.dg-ili__acts{justify-content:flex-start}}
/* list rows: let the text column shrink and drop a long status label under the title on narrow screens (French labels are longer) */
.rc__i>div{min-width:0}
.rc__i .row{flex-wrap:wrap}
/* narrow screens: card headers wrap, so a long status label or button drops below the title instead of off screen */
@media (max-width:560px){.card__hd{flex-wrap:wrap}.card__hd>div:first-child{min-width:0}}

/* ===== Payroll configuration and employee deductions (PCD) ===== */
/* employee Pay and tax settings: four tabs fill the phone width */
.pc-seg{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));width:100%}
.pc-seg button{padding:7px 4px;font-size:12.5px;display:inline-flex;align-items:center;justify-content:center;gap:4px;min-width:0}
.pc-seg button[aria-selected="true"]{background:var(--surface);color:var(--fg);box-shadow:var(--sh-1)}
.pc-seg .count{font-size:10.5px;font-weight:600;background:var(--warn-bg);color:var(--warn);border-radius:99px;padding:0 6px}
.pc-pend{border-top:1px solid var(--line);background:var(--surface-2);display:flex;flex-direction:column;gap:4px}
.pc-old{border-top:1px solid var(--line);padding:10px 16px;font-size:13px;color:var(--fg-2)}
.pc-old summary{cursor:pointer;font-weight:500}
.pc-old ul{margin:8px 0 0;padding-left:18px;display:flex;flex-direction:column;gap:4px}
.pc-note{display:inline-flex;align-items:center;gap:5px;margin-top:4px;font-size:12px;color:var(--warn)}
.pc-bar__t{height:6px;border-radius:6px;background:var(--surface-3);margin-top:6px;overflow:hidden}
.pc-bar__t span{display:block;height:100%;background:var(--brand);border-radius:6px}
.pc-bar b{font-size:13.5px;font-weight:600}
.pc-prog{display:flex;flex-direction:column;gap:6px}
/* review drawer: prior and proposed side by side */
.pc-cmp th[scope="row"]{font-weight:500;color:var(--fg-2);text-align:left;white-space:nowrap}
.pc-tx th[scope="row"]{font-weight:500;text-align:left}
.pc-tx th[scope="row"] .ico{color:var(--fg-3);vertical-align:-2px}
/* step lists in the deduction editor and the rule package lifecycle */
.pc-steps,.pc-life{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.pc-steps li,.pc-life li{font-size:12px;padding:4px 10px;border-radius:99px;border:1px solid var(--line);color:var(--fg-3);background:var(--surface)}
.pc-steps li.done,.pc-life li.done{color:var(--ok);border-color:var(--ok-line);background:var(--ok-bg)}
.pc-steps li.now,.pc-life li.now{color:#fff;background:var(--brand);border-color:var(--brand);font-weight:600}
.tbl tr.is-sel td{background:var(--surface-2)}
/* onboarding: province of employment and readiness split */
.ob-poe{display:flex;flex-direction:column;gap:6px;padding:12px 14px;border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface-2)}
.ob-ready{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden}
.ob-ready li{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 14px;border-top:1px solid var(--line);font-size:var(--t-sm);flex-wrap:wrap}
.ob-ready li:first-child{border-top:0}
/* console roles for statutory rule packages */
.rtag--taxrules{color:#0B6B5C;background:#E6F6F2;border-color:#BFE6DC}
.rtag--release{color:var(--brand);background:var(--lemon-soft);border-color:#EADF9C}
/* onboarding footer: the long submit button wraps under "Saved" on narrow screens */
.ob__foot .row{flex-wrap:wrap;justify-content:flex-end}
.pc-seg--3{grid-template-columns:repeat(3,minmax(0,1fr))}
/* setup drawer: one box per optional plan, with its amount and authorization */
.pc-plan{display:flex;flex-direction:column;gap:8px;padding:10px 12px;border:1px solid var(--line);border-radius:var(--r-md)}

/* ===== CRA data imports (Nyro Workspace console, OWN-036) ===== */
.ci-proto{display:flex;gap:10px;align-items:flex-start;padding:10px 14px;margin-bottom:16px;border:1px solid var(--warn-line);background:var(--warn-bg);color:var(--warn);border-radius:var(--r-md);font-size:var(--t-sm)}
.ci-proto b{font-weight:600}
.ci-actor{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin:4px 0 16px}
.ci-actor .lbl{font-weight:600}
.ci-actor .hint{flex-basis:100%;margin:0}
.ci-actor__r{color:var(--fg-3);font-weight:400}
.ci-err{display:flex;gap:12px;align-items:flex-start;padding:14px 16px;margin-bottom:16px;border:1px solid var(--bad-line);background:var(--bad-bg);border-radius:var(--r-md);color:var(--fg)}
.ci-err>.ico{color:var(--bad);flex:none;margin-top:2px}
.ci-err>div{flex:1;min-width:0}
.ci-err p{margin:4px 0 6px;color:var(--fg-2)}
.ci-err__code{font-size:var(--t-xs);color:var(--fg-3)}
.ci-sum{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-bottom:16px}
.ci-sum--6{grid-template-columns:repeat(6,minmax(0,1fr))}
.ci-sum__i{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:14px 16px;display:flex;flex-direction:column;gap:4px;min-width:0}
.ci-sum__i b{font-size:var(--t-xl);font-weight:600;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.ci-sum__i small{color:var(--fg-3);font-size:var(--t-xs)}
.ci-steps{margin-bottom:16px}
.ci-grid{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:16px;align-items:start;margin-bottom:16px}
.ci-grid>.card,.ci-side>.card{margin:0}
.ci-side{display:flex;flex-direction:column;gap:16px;min-width:0}
.ci-drop{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:8px;padding:32px 16px;border:1.5px dashed var(--line-2);border-radius:var(--r-lg);background:var(--surface-2);transition:border-color .15s,background .15s}
.ci-drop.is-over{border-color:var(--brand);background:var(--info-bg)}
.ci-drop b{font-weight:600;font-size:var(--t-lg)}
.ci-drop small{color:var(--fg-3);font-size:var(--t-xs)}
.ci-drop .btn{min-height:44px}
.ci-drop:focus-within{outline:2px solid var(--focus);outline-offset:2px}
.ci-q{display:flex;flex-direction:column;gap:8px}
.ci-qi{display:flex;gap:12px;align-items:flex-start;padding:12px;border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface)}
.ci-qi.is-dup{border-color:var(--warn-line);background:var(--warn-bg)}
.ci-qi__ico{flex:none;width:32px;height:32px;border-radius:8px;display:grid;place-items:center;background:var(--surface-2);color:var(--fg-2)}
.ci-qi__main{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}
.ci-qi__main>.muted{font-size:var(--t-sm)}
.ci-qi__tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:2px}
.ci-qi__iss{margin:4px 0 0;padding-left:18px;font-size:var(--t-sm);color:var(--fg-2)}
.ci-qi__iss li{margin:2px 0;overflow-wrap:anywhere}
.ci-name{overflow-wrap:anywhere;word-break:break-word}
.ci-hash{font-size:var(--t-xs);color:var(--fg-3);overflow-wrap:anywhere}
.ci-q__tot{display:flex;flex-wrap:wrap;gap:8px 16px;font-size:var(--t-sm);color:var(--fg-2)}
.ci-bad{display:inline-flex;gap:6px;align-items:center;color:var(--bad)}
.ci-empty{padding:20px}
.ci-scen-tag{display:flex;gap:8px;align-items:center;font-size:var(--t-sm);color:var(--info);background:var(--info-bg);border:1px solid var(--info-line);border-radius:var(--r-md);padding:8px 12px}
.ci-chk{display:flex;gap:8px;align-items:flex-start;font-size:var(--t-sm);cursor:pointer}
.ci-chk input{margin-top:3px}
.ci-back{display:inline-flex;align-items:center;gap:6px;margin-bottom:8px}
.ci-fileline{display:flex;flex-wrap:wrap;gap:6px 10px;align-items:center}
.ci-fileline>.muted{font-size:var(--t-sm)}
.ci-src{max-height:420px;overflow:auto}
.tbl--dense td,.tbl--dense th{padding:8px 10px;font-size:var(--t-sm)}
.ci-old{color:var(--fg-3);text-decoration:line-through}
.ci-tl{list-style:none;margin:0;padding:8px 16px 16px;display:flex;flex-direction:column;gap:10px}
.ci-tl li{display:flex;flex-direction:column;gap:2px;padding-left:14px;border-left:2px solid var(--line)}
.ci-tl li b{font-weight:600;font-size:var(--t-sm)}
.ci-tl li span{color:var(--fg-3);font-size:var(--t-xs);overflow-wrap:anywhere}
.btn[aria-disabled="true"]{opacity:.55}
@media (max-width:1100px){.ci-grid{grid-template-columns:minmax(0,1fr)}.ci-sum--6{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:640px){.ci-sum{grid-template-columns:minmax(0,1fr)}.ci-sum--6{grid-template-columns:repeat(2,minmax(0,1fr))}.ci-qi{flex-wrap:wrap}.ci-qi__main{flex-basis:calc(100% - 44px)}.ci-qi>.btn{margin-left:44px}.ci-drop{padding:24px 12px}}
@media (prefers-reduced-motion:reduce){.ci-drop{transition:none}}
/* employer legal and tax details: fixed prefix (RP, RS) beside the 4-digit account input; read-only province */
.lg-pre{display:flex;align-items:center;gap:8px}
.lg-pre .mono{white-space:nowrap;color:var(--fg-2);font-size:14px}
.lg-pre .input{flex:1;min-width:0}
.lg-ro{background:var(--surface-2);display:flex;align-items:center;color:var(--fg-2)}
.lg-fs{border:0;padding:0;margin:0;gap:10px}
/* signup: legal first, middle (optional) and last name side by side; stacked on phones */
.nm-fs{border:0;padding:0;margin:0;gap:8px}
@media (max-width:560px){.nm-grid{grid-template-columns:minmax(0,1fr)}}

/* ---------- Website content amendment (brief v1.0, 26 Oct 2026) ----------
   New navigation, homepage modules LP-03 to LP-13, and the product, audience and resources page templates.
   Same tokens as direction D; radii by role: buttons 12, panels 16, devices 46. */
.lp [id^="lp-"]{scroll-margin-top:calc(var(--bar-h) + 80px)}
.lp-dd__item{text-decoration:none;color:var(--lp-text)!important}
.lp-dd__item[aria-current="page"]{background:var(--lp-soft)}
.lp-dd__menu--aud{width:340px}
.lp-link[aria-current="page"]{background:var(--lp-soft)}
.lp-mmenu__g{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0 20px}
.lp-mmenu__g>div{display:flex;flex-direction:column;gap:2px}
.lp-mmenu__i[aria-current="page"]{font-weight:700;color:var(--lp-ink)!important}
@media (max-width:1180px){
  .lp-links{display:none}
  .lp-burger{display:grid}
  .lp-mmenu{display:flex;flex-direction:column;gap:2px;padding:10px 24px 18px;border-top:1px solid var(--lp-line);background:var(--lp-bg);max-height:calc(100vh - var(--bar-h) - 68px);overflow-y:auto}
  .lp-mmenu .eyebrow{padding:8px 0 4px}
  .lp-mmenu__i{display:flex;align-items:center;gap:10px;min-height:46px;padding:0 4px;border:0;background:none;text-align:left;font-weight:500;font-size:16px;color:var(--lp-text)!important;text-decoration:none;cursor:pointer;border-radius:8px}
  .lp-mmenu hr{border:0;border-top:1px solid var(--lp-line);margin:8px 0;width:100%}
}
@media (max-width:640px){.lp-mmenu__g{grid-template-columns:minmax(0,1fr)}.lp-mmenu{padding:8px 16px 18px}}
/* footer: brand plus five groups */
.lp-foot__grid--6{grid-template-columns:minmax(0,1.3fr) repeat(5,minmax(0,1fr));gap:28px}
.lp-foot__co{margin:0 0 4px;font-size:13px;color:#A9B5CE;line-height:1.5}
.lp-foot__grid--6>div:last-child .lp-foot__co{margin-top:6px}
@media (max-width:1100px){.lp-foot__grid--6{grid-template-columns:repeat(3,minmax(0,1fr))}.lp-foot__grid--6 .lp-foot__brand{grid-column:1/-1;max-width:none}}
@media (max-width:640px){.lp-foot__grid--6{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:400px){.lp-foot__grid--6{grid-template-columns:minmax(0,1fr)}}
/* hero additions */
.lpd-h1b{background:linear-gradient(transparent 70%,var(--lp-accent) 70%,var(--lp-accent) 92%,transparent 92%);width:fit-content;padding:0 2px}
.lpd-scope{margin:12px 0 0;max-width:56ch;font-size:14px;color:var(--lp-text-2);line-height:1.55}
/* shared: availability lists and text links */
.lp-caps{list-style:none;margin:18px 0 0;padding:0;display:flex;flex-direction:column}
.lp-caps li{display:flex;align-items:center;justify-content:space-between;gap:8px 14px;padding:10px 0;border-bottom:1px solid var(--lp-line);font-size:15.5px;flex-wrap:wrap}
.lp-caps li:first-child{border-top:1px solid var(--lp-line)}
.lp-caps li>span:first-child{flex:1 1 220px;min-width:0}
.lp-caps .lp-chip{margin-top:0}
.lp-chip--review{background:var(--warn-bg);color:#7A4A00}
.lp-chip--syn{background:#F3F5F9;color:var(--fg-2)}
.lpd-more{display:inline-flex;align-items:center;gap:8px;margin-top:22px;font-weight:600;color:var(--lp-ink)!important;text-decoration:underline;text-decoration-color:color-mix(in srgb,var(--lp-ink) 30%,transparent);text-underline-offset:5px;min-height:44px}
.lpd-more:hover{text-decoration-color:var(--lp-ink)}
.lpd-more .ico{width:24px;height:24px;padding:5px;border-radius:50%;background:var(--lp-accent);color:var(--lp-ink);flex:none}
.lpd-more--dark{color:#fff!important;text-decoration-color:rgba(255,255,255,.4)}
.lpd-more--dark:hover{text-decoration-color:#fff}
/* sample journey: six steps on one selector */
.wd-tabs--6{grid-template-columns:repeat(6,minmax(0,1fr))}
.wd-tabs--6 .wd-tab{padding:14px 14px}
.wd-tab__d{font-size:12px;font-weight:600;letter-spacing:.02em;color:var(--lp-text-2);font-variant-numeric:tabular-nums}
.wd-tabs--6 .wd-tab__t{font-size:17px;line-height:1.2}
.wd-tabs--6 .wd-tab__b{font-size:13px}
.mx__l--join,.mx__l--review{width:min(470px,calc(100% - 24px));border-radius:16px;overflow:hidden}
.mx__l--leave,.mx__l--access{width:236px}
@media (max-width:1100px){.wd-tabs--6{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:760px){.wd-tabs--6{grid-template-columns:repeat(2,minmax(0,1fr))}.wd-tabs--6 .wd-tab__b{display:none}}
/* payroll (dark): schedules and availability */
.pd-more{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:20px;margin-top:40px}
.pd-box{padding:24px;border:1px solid rgba(255,255,255,.16);border-radius:16px}
.pd-box h3{color:#fff!important;font-size:19px;margin-bottom:12px}
.pd-box>p{margin:14px 0 0;font-size:14.5px;color:#C9D2E6}
.pd-sched{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.pd-sched li{display:flex;flex-direction:column;gap:2px;padding:10px 12px;border-radius:12px;background:rgba(255,255,255,.06)}
.pd-sched b{color:#fff;font-size:15px}
.pd-sched span{font-size:13px;color:#C9D2E6}
.lpd-pay .lp-caps{margin-top:0}
.lpd-pay .lp-caps li{border-color:rgba(255,255,255,.14);color:#E3E8F3;font-size:14.5px}
.lpd-pay .lp-chip--planned{color:#C9D2E6;border-color:rgba(255,255,255,.4)}
.lpd-pay .pd-notes li{padding:16px 0}
@media (max-width:900px){.pd-more{grid-template-columns:minmax(0,1fr)}}
@media (max-width:480px){.pd-sched{grid-template-columns:minmax(0,1fr)}}
/* homepage modules */
.lpd-mod--tint{background:var(--lpd-paper,var(--lp-alt))}
.lpd-mod__grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:40px 64px;align-items:center}
.lpd-mod__grid--rev .lpd-mod__copy{order:2}
.lpd-mod__copy h2{margin-bottom:16px}
.lpd-mod__copy .lp-note{margin-top:18px}
.lpd-mod__fig{margin:0;min-width:0}
.lpd-mod__art{display:flex;justify-content:center}
.lpd-mod__art>.pvw,.lpd-mod__art>.pvo{width:100%;max-width:620px}
.lpd-mod__fig figcaption,.lpp-fig figcaption{display:flex;flex-wrap:wrap;gap:6px 10px;align-items:center;margin-top:14px;font-size:12.5px;color:var(--lp-text-2);justify-content:center}
.lp-phones--2 .lp-phones__i:nth-child(2),.lp-phones--3 .lp-phones__i:nth-child(2){margin-top:28px}
.rp-flow{list-style:none;margin:18px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.rp-flow li{display:inline-flex;align-items:center;gap:8px;font-size:13.5px;font-weight:600;color:var(--lp-ink);padding:6px 12px;border-radius:99px;background:var(--lp-bg);border:1px solid var(--lp-line)}
.rp-flow li:not(:last-child)::after{content:"";width:6px;height:6px;border-top:2px solid var(--lp-text-2);border-right:2px solid var(--lp-text-2);transform:rotate(45deg);margin-left:2px}
@media (max-width:1100px){.lpd-mod__grid{grid-template-columns:minmax(0,1fr)}.lpd-mod__grid--rev .lpd-mod__copy{order:0}}
/* phone states: payslip, missed clock-out, tax slips */
.pvp__card--pay,.pvp__card--fix{gap:8px}
.pvp__net{color:var(--brand);font-size:14px}
.pvp__card--fix .pvp__state{color:#7A4A00;font-size:16.5px}
.pvp__card--fix .st{white-space:normal;align-self:flex-start}
.pvp__slips>div{grid-template-columns:1fr}
.pvp__slips>span{margin-top:8px}
/* leave and report previews */
.pvl{display:flex;flex-direction:column;gap:12px}
.pvl__hd{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;font-size:12px}
.pvl__hd b{display:block;font-size:14px}
.pvl__hd .muted{display:block}
.pvl__tot small{display:block;font-size:10.5px;color:var(--fg-3);white-space:nowrap}
.pvl__list{display:flex;flex-direction:column}
.pvl__list .eyebrow{margin-bottom:4px}
.pvl__row{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid #EEF0F4}
.pvl__row:last-child{border-bottom:0}
.pvl__row b{display:block;font-size:13px}
.pvl__row span{display:block;font-size:12px;color:var(--fg-2)}
.pvl__row small{display:flex;align-items:center;gap:5px;font-size:11.5px;color:var(--fg-3);margin-top:2px}
.pvl__row .st{font-size:11px;flex:none}
.pvx{display:flex;flex-direction:column;gap:12px}
.pvx__hd{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
.pvx__hd b{display:block;font-size:14px}
.pvx__hd .muted{display:block;font-size:12px}
.pvx__meta{display:grid;grid-template-columns:auto 1fr;gap:3px 12px;margin:0;font-size:12px}
.pvx__meta dt{color:var(--fg-3)}
.pvx__meta dd{margin:0}
.pvx__net td{font-weight:700;color:var(--brand);border-bottom:0}
.pvx__ft{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:12px}
.pvx__btn{display:inline-flex;align-items:center;gap:5px;min-height:30px;padding:0 10px;border-radius:8px;border:1px solid var(--line-2);font-weight:600;background:#fff}
.pvv__row--firm{grid-template-columns:auto minmax(0,1fr) auto}
/* self-service: four phones when expanded */
.ee-detail--4{grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;padding:32px 16px}
.lpd-ee__act{display:flex;flex-wrap:wrap;align-items:center;gap:8px 24px;margin-top:24px}
.lpd-ee__act .lpd-toggle,.lpd-ee__act .lpd-more{margin-top:0}
@media (max-width:1100px){.ee-detail--4{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:32px}}
@media (max-width:760px){.ee-detail--4{grid-template-columns:minmax(0,1fr)}}
/* who it's for and the accountant flow */
.pa-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}
.pa-grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.pa-grid--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.pa-col{border-top:3px solid var(--lp-ink);padding-top:16px;display:flex;flex-direction:column;min-width:0}
.pa-role{display:flex;align-items:center;gap:10px;margin:0 0 8px;font-family:var(--lp-display,inherit);font-size:19px;font-weight:700;color:var(--lp-ink);letter-spacing:-.01em;line-height:1.25}
.pa-col>p:not(.pa-role){margin:0;color:var(--lp-text-2);font-size:15.5px}
.pa-col ul{list-style:none;margin:0;padding:0}
.pa-col li{padding:10px 0;border-bottom:1px solid var(--lp-line);font-size:15px}
.pa-col .lpd-more{margin-top:auto;padding-top:14px}
.ff{margin-top:48px;padding:28px;border-radius:16px;background:var(--lpd-paper,var(--lp-alt))}
.ff__hd{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;margin-bottom:20px}
.ff__hd h3{font-size:22px;margin:0}
.ff__steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:20px;position:relative}
.ff__steps li{position:relative;padding-top:26px;display:flex;flex-direction:column;gap:4px}
.ff__steps li::before{content:"";position:absolute;left:0;top:0;width:14px;height:14px;border-radius:50%;background:var(--lp-accent);box-shadow:0 0 0 2px var(--lp-ink)}
.ff__steps li:not(:last-child)::after{content:"";position:absolute;left:22px;right:-12px;top:6px;height:2px;background:repeating-linear-gradient(90deg,var(--lp-ink) 0 6px,transparent 6px 12px);opacity:.35}
.ff__steps b{font-size:15.5px;color:var(--lp-ink)}
.ff__steps span{font-size:14px;color:var(--lp-text-2)}
.ff__n{display:flex;gap:9px;align-items:flex-start;margin:22px 0 0;font-weight:600;color:var(--lp-ink);font-size:15px}
.ff__n .ico{margin-top:3px;flex:none}
.lpd-paths .lp-note{margin-top:24px}
@media (max-width:1100px){.pa-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.ff__steps{grid-template-columns:minmax(0,1fr);gap:16px}.ff__steps li{padding:0 0 0 28px}.ff__steps li::after{display:none}}
@media (max-width:640px){.pa-grid,.pa-grid--3,.pa-grid--2{grid-template-columns:minmax(0,1fr)}.ff{padding:22px 18px}}
/* trust and Quebec */
.tq-grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:40px;align-items:start}
.tq-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 28px}
.tq-i{display:flex;gap:12px;align-items:flex-start}
.tq-i .eicon{background:var(--lp-soft);color:var(--lp-primary)}
.tq-i b{display:block;font-size:16px;color:var(--lp-ink);margin-bottom:2px}
.tq-i p{margin:0;font-size:14.5px;color:var(--lp-text-2)}
.qc{padding:26px;border-radius:16px;border:1px solid var(--lp-line);background:var(--lp-bg);box-shadow:0 1px 2px rgba(16,24,40,.05)}
.qc h3{font-size:24px;margin-bottom:6px}
.qc>p{margin:0 0 14px;color:var(--lp-text-2);font-size:15px}
.qc__list{margin:0;display:flex;flex-direction:column}
.qc__list>div{padding:12px 0;border-top:1px solid var(--lp-line)}
.qc__list dt{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px 10px;font-weight:600;color:var(--lp-ink)}
.qc__list dd{margin:4px 0 0;font-size:14.5px;color:var(--lp-text-2)}
.qc__n{margin:12px 0 0;padding-top:12px;border-top:1px solid var(--lp-line);font-size:13.5px;color:var(--lp-text-2)}
@media (max-width:1100px){.tq-grid{grid-template-columns:minmax(0,1fr)}}
@media (max-width:640px){.tq-list{grid-template-columns:minmax(0,1fr)}.qc{padding:20px 16px}}
/* setup: eight steps and three notes */
.su-steps--8{grid-template-columns:repeat(4,minmax(0,1fr));row-gap:36px}
.su-steps li>.lp-chip{align-self:flex-start;margin:0}
.su-notes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:8px}
.su-notes--2{grid-template-columns:repeat(2,minmax(0,1fr));margin-top:24px}
.su-note{padding:20px;border-radius:16px;background:var(--lp-bg);border:1px solid var(--lp-line)}
.su-note b{display:block;font-family:var(--lp-display,inherit);font-size:17px;color:var(--lp-ink);margin-bottom:6px}
.su-note p{margin:0;font-size:14.5px;color:var(--lp-text-2)}
.su-note--key{background:var(--lp-ink);border-color:var(--lp-ink)}
.su-note--key b{color:#fff}
.su-note--key p{color:#D5DDEC}
@media (max-width:1100px){.su-steps--8{grid-template-columns:repeat(2,minmax(0,1fr))}.su-notes{grid-template-columns:minmax(0,1fr)}}
@media (max-width:760px){.su-steps--8,.su-notes--2{grid-template-columns:minmax(0,1fr)}}
/* pricing: what every band includes, with availability */
.ws-incl3{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.ws-incl3 li{display:flex;align-items:center;justify-content:space-between;gap:6px 12px;flex-wrap:wrap;padding:9px 0;border-bottom:1px solid var(--lp-line,var(--line));font-size:14.5px}
.ws-incl3 li>span:first-child{flex:1 1 200px;min-width:0}
.ws-incl3 .lp-chip{margin-top:0}
.ws-incl3__h{margin:6px 0 0;font-size:14px;font-weight:600;color:var(--fg-2)}
.ws-incl3--not li{color:var(--fg-2)}
/* resource cards */
.rc-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-bottom:28px}
.rc{display:flex;flex-direction:column;gap:6px;padding:20px;border-radius:16px;border:1px solid var(--lp-line);background:var(--lp-bg);text-decoration:none;color:var(--lp-text)!important;min-width:0}
.rc:hover{border-color:var(--lp-ink)}
.rc .eicon{background:var(--lp-soft);color:var(--lp-primary);margin-bottom:6px}
.rc b{font-family:var(--lp-display,inherit);font-size:17px;color:var(--lp-ink);line-height:1.25}
.rc>span:not(.eicon){font-size:14px;color:var(--lp-text-2)}
.rc small{margin-top:auto;padding-top:8px;font-size:12px;color:var(--lp-text-2)}
.rc--row{flex-direction:row;align-items:center;gap:14px;padding:16px}
.rc--row .eicon{margin:0}
.rc--row>span:nth-child(2){flex:1;min-width:0}
.rc--row b{display:block;font-size:16px}
.rc--row small{display:block;padding:2px 0 0;font-size:13px}
.lpd-res .lp-faqbox__t{font-size:clamp(20px,2vw,24px)}
@media (max-width:1100px){.rc-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.rc-grid{grid-template-columns:minmax(0,1fr)}}
/* product, audience and resources pages */
.lpp-hero{padding:48px 0 72px;border-bottom:1px solid var(--lp-line)}
.lpp-hero__grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:40px 56px;align-items:center}
.lpp-hero h1{font-size:clamp(34px,4vw,54px);font-weight:700;line-height:1.04;letter-spacing:-.035em;margin:14px 0 18px;max-width:18ch}
.lpp-hero--plain .lpp-hero__copy{margin-bottom:36px}
.lpp-crumb{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;font-size:13.5px;color:var(--lp-text-2)}
.lpp-crumb a{color:var(--lp-text-2)!important}
.lpp-crumb .ico{width:14px;height:14px}
.lpp-crumb [aria-current]{color:var(--lp-ink);font-weight:600}
.lpp-avail{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;margin:18px 0 0;font-size:14px;color:var(--lp-text-2)}
.lpp-avail .lp-chip{margin-top:0}
.lpp-fig{margin:0;min-width:0;padding:28px 20px;border-radius:24px;background:var(--lpd-paper,var(--lp-alt))}
.lpp-fig__art{display:flex;justify-content:center}
.lpp-fig__art>.pvw,.lpp-fig__art>.pvo{width:100%;max-width:600px}
.lp[data-dir] .lpp-sec{padding:72px 0}
.lpp-tint{background:var(--lp-alt)}
.lp[data-dir] .lpp-sec h2.lpp-h,.lpp-prob h2{font-size:clamp(24px,2.6vw,32px);margin-bottom:20px;max-width:none}
.lpp-h3{font-size:19px;margin:28px 0 4px}
.lpp-prob{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:16px 48px;margin-bottom:48px;padding-bottom:40px;border-bottom:1px solid var(--lp-line)}
.lpp-prob p{margin:0;font-size:18px;color:var(--lp-text);line-height:1.6;max-width:62ch}
.lpp-steps{grid-template-columns:repeat(5,minmax(0,1fr))}
.lpp-steps li:nth-last-child(n+1){min-width:0}
.lpp-cols{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px 64px;align-items:start}
.lpp-lim{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.lpp-lim li{display:flex;gap:10px;align-items:flex-start;font-size:15.5px}
.lpp-lim .ico{margin-top:4px;color:var(--lp-primary);flex:none}
.lpp-narrow{max-width:860px}
.lpp-faq{padding:0}
.lpp-sc{margin:0;padding:0 0 0 22px;display:flex;flex-direction:column;gap:12px;font-size:15.5px}
.lpp-sc li::marker{color:var(--lp-text-2);font-weight:600}
.lpp-links{display:flex;flex-direction:column;gap:10px}
.lpp-rev{margin:20px 0 0;font-size:13px;color:var(--lp-text-2)}
.lpp-adv{margin:-8px 0 8px;color:var(--lp-text-2)}
.lp[data-dir] .lpp-next{padding:72px 0}
.lpp-next__box{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px 40px;padding:36px 40px;border-radius:16px;background:var(--lp-primary-h);color:#fff}
.lpp-next__box h2{color:#fff!important;font-size:clamp(24px,2.6vw,32px);margin:0 0 6px}
.lpp-next__box p{margin:0;color:color-mix(in srgb,#fff 88%,var(--lp-primary-h));max-width:52ch}
.lpp-next__box .lp-cta{margin-top:0;align-items:center}
.lpp-next__box .lp-btn{background:var(--lp-accent);border-color:var(--lp-accent);color:var(--lp-ink)!important}
.lpp-next__box .lp-btn svg.ico{background:var(--lp-ink);color:var(--lp-accent)}
.lpp-mail{display:inline-flex;align-items:center;gap:8px;color:#fff!important;font-weight:600;text-decoration:underline;text-underline-offset:4px;min-height:44px}
@media (max-width:1100px){.lpp-hero__grid,.lpp-cols,.lpp-prob{grid-template-columns:minmax(0,1fr)}.lpp-steps{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:760px){
  .lpp-hero{padding:32px 0 48px}
  .lp[data-dir] .lpp-sec,.lp[data-dir] .lpp-next{padding:52px 0}
  .lpp-steps{grid-template-columns:minmax(0,1fr)}
  .lpp-fig{padding:20px 12px}
  .lpp-next__box{padding:28px 22px}
  .lp-phones--2,.lp-phones--3{justify-content:flex-start;overflow-x:auto;scroll-snap-type:x mandatory;padding:8px 4px 12px}
  .lp-phones--2 .lp-phones__i:nth-child(2),.lp-phones--3 .lp-phones__i:nth-child(2){margin-top:0}
}
.lpd-comp__art{height:540px}
.pa-grid:not(.pa-grid--3):not(.pa-grid--2) .pa-role{min-height:50px}
.lpp-sc{list-style:none;padding:0}
.lpp-sc li{position:relative;padding-left:22px}
.lpp-sc li::before{content:"";position:absolute;left:0;top:.55em;width:9px;height:9px;border-radius:50%;background:var(--lp-accent);box-shadow:0 0 0 1.5px var(--lp-ink)}
.lp h1[tabindex="-1"]:focus,.lp h2[tabindex="-1"]:focus,.lp h3[tabindex="-1"]:focus{outline:none}
.lp-form__priv{display:flex;gap:8px;align-items:flex-start;margin:0;font-size:13px;color:var(--lp-text-2)}
.lp-form__priv .ico{margin-top:2px;flex:none}
@media (max-width:760px){.lpd-comp__art{height:auto}.lpd-comp__mgr,.lpd-comp__reg{display:none}}
.lp[data-dir] .lpp-prob h2{font-size:clamp(24px,2.6vw,32px);margin:0;max-width:none}
.lpp-avail>span:last-child{flex:1 1 240px}
.pvl__row .st,.pvv__row .st{white-space:normal;line-height:1.25;max-width:100%}
.pvl__row>div{min-width:0}
@media (max-width:480px){
  .pvv__row{grid-template-columns:auto minmax(0,1fr)}
  .pvv__row .st,.pvv__row .pvv__btn{grid-column:2;justify-self:start}
  .pvl__row{flex-wrap:wrap}
  .pvl__tot{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pvl__tot>div:nth-child(2){border-right:0}
  .pvl__tot>div:nth-child(-n+2){border-bottom:1px solid #E7EAF0}
}
/* Sign up and Request demo (OWN-041) */
.lp-navdemo{min-height:40px;padding:0 14px;font-size:14.5px;border-radius:10px}
.lpd-sample{margin-top:14px;min-height:44px;padding:0 4px}
.lp-calc__demo{margin:10px 0 0;text-align:center;font-size:14px;color:var(--lp-text-2)}
.lp-calc__demo .linkbtn{font-weight:600;color:var(--lp-ink)}
.lp-btn2--dark{color:#fff!important;border-color:rgba(255,255,255,.55)}
.lp-btn2--dark:hover{background:rgba(255,255,255,.1)}
@media (max-width:1180px){.lp-navdemo{display:none}}
.lp-mmenu__demo{min-height:46px;margin:6px 0 8px;font-weight:600}
.pvv__co{background:var(--surface-2);color:var(--fg-2);display:grid;place-items:center}
/* LP-09 audience showcase (OWN-043): segmented tabs, short copy at about 40%, a large preview at about 60% on warm paper */
.lpd-au h2{margin-bottom:0}
.au-tabs{display:inline-flex;flex-wrap:wrap;gap:4px;margin:28px 0 40px;padding:5px;border-radius:16px;background:var(--lp-alt);border:1px solid var(--lp-line)}
.au-tab{display:inline-flex;align-items:center;gap:8px;border:0;background:none;padding:10px 18px;min-height:44px;border-radius:12px;font:600 15px/1.2 var(--sans);color:var(--lp-text);cursor:pointer;transition:background-color .2s ease,color .2s ease}
.au-tab:hover{background:color-mix(in srgb,var(--lp-ink) 6%,transparent)}
.au-tab[aria-selected="true"]{background:var(--lp-ink);color:#fff}
.au-tab[aria-selected="true"]::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--lp-accent);flex:none}
.au-tab:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.au-body{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,3fr);gap:40px 56px;align-items:center}
.au-panel h3{font-size:clamp(26px,2.7vw,38px);font-weight:700;line-height:1.08;letter-spacing:-.03em;margin:0 0 14px;color:var(--lp-ink);max-width:16ch}
.au-panel .lp-lede{margin:0;font-size:18px}
.au-note{display:flex;gap:9px;align-items:flex-start;margin:18px 0 0;font-weight:600;color:var(--lp-ink)}
.au-note .ico{margin-top:3px;flex:none}
.au-meta{margin:18px 0 0}
.au-meta .lp-chip{margin-top:0}
.au-panel .lpd-more{margin-top:14px}
.au-stage-wrap{padding:28px 20px;border-radius:24px;background:var(--lpd-paper,var(--lp-alt))}
.au-stage .mx__l{width:min(580px,calc(100% - 16px));border-radius:16px;overflow:hidden}
@media (prefers-reduced-motion:reduce){.au-tab{transition:none}}
@media (max-width:1100px){.au-body{grid-template-columns:minmax(0,1fr);gap:28px}.au-tabs{margin-bottom:28px}}
@media (max-width:640px){.au-tabs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));width:100%}.au-tab{justify-content:center;padding:10px 8px;font-size:14px;text-align:center}.au-stage-wrap{padding:16px 8px}}
/* previews used by the showcase */
.pvz{display:flex;flex-direction:column;gap:14px}
.pvz__tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.pvz__tiles>div{padding:12px;border:1px solid #E7EAF0;border-radius:12px;display:flex;flex-direction:column;gap:4px;align-items:flex-start;min-width:0}
.pvz__tiles span{font-size:11.5px;color:var(--fg-3)}
.pvz__tiles b{font-size:20px;font-weight:600;letter-spacing:-.01em;line-height:1.15}
.pvz__tiles small{font-size:11.5px;color:var(--fg-3)}
.pvz__tiles .st{font-size:11px;white-space:normal}
.pvz__list{display:flex;flex-direction:column}
.pvz__row{display:flex;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid #EEF0F4;font-size:13px}
.pvz__row:last-child{border-bottom:0}
.pvz__row>span:first-of-type{flex:1;min-width:0}
.pvz__row>.ico{color:var(--fg-3);flex:none}
.pvz__req{padding:14px;border:1px solid #E7EAF0;border-radius:12px;display:flex;flex-direction:column;gap:10px}
.pvz__who{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.pvz__who>div{flex:1;min-width:140px}
.pvz__who b{display:block;font-size:13.5px}
.pvz__who span{display:block;font-size:12px;color:var(--fg-2)}
.pvz__who .st{font-size:11px}
.pvz__bal{display:flex;flex-wrap:wrap;gap:6px 18px;font-size:12px;color:var(--fg-3)}
.pvz__bal b{color:var(--fg);margin-left:6px}
.pvz__btns{display:flex;gap:8px;justify-content:flex-end}
.pvv__btn--pri{background:var(--brand);color:#fff;border-color:var(--brand)}
.pvz__cl{display:flex;gap:12px;align-items:flex-start;padding:12px 0;border-bottom:1px solid #EEF0F4}
.pvz__clm{flex:1;min-width:0;display:flex;flex-direction:column;gap:7px}
.pvz__clh{display:flex;justify-content:space-between;align-items:center;gap:6px 10px;flex-wrap:wrap}
.pvz__clh b{font-size:13.5px}
.pvz__clh .st{font-size:11px;white-space:normal}
.pvz__clm small{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--fg-2)}
@media (max-width:480px){.pvz__tiles{grid-template-columns:repeat(2,minmax(0,1fr))}.pvz__tiles>div:last-child{grid-column:1/-1}}
.lp[data-dir] .lpd-au h2{max-width:none}
.au-body{grid-template-columns:minmax(0,1fr) minmax(0,1.6fr)}
.au-stage .mx__l{width:min(620px,calc(100% - 16px))}
@media (max-width:1100px){.au-body{grid-template-columns:minmax(0,1fr)}}
/* LP-02 walkthrough (OWN-044): compact step selector, one explanation, preview at about two thirds */
.lp[data-dir] .lpd-wd.lp-sec{padding:64px 0 80px}
.lp[data-dir] .lpd-wd h2{max-width:none}
.wk-head{margin-bottom:24px;align-items:center}
.wk-steps{display:flex;flex-wrap:wrap;align-items:center;gap:4px;width:fit-content;max-width:100%;margin:0 0 24px;padding:5px;border-top:0;border-radius:16px;background:color-mix(in srgb,var(--lp-ink) 5%,transparent)}
.wk-steps .wd-tab{display:inline-flex;flex-direction:row;align-items:center;padding:10px 14px;min-height:44px;border-radius:12px;font:600 15px/1.2 var(--sans);color:var(--lp-text-2);white-space:nowrap}
.wk-steps .wd-tab[aria-selected="true"]{color:var(--lp-ink)}
.wk-steps .wd-tab[aria-selected="true"]:hover{background:none}
.wk-steps .wd-ind{border-radius:12px}
.wk-steps .wd-ind::before{left:14px;right:14px;top:auto;bottom:5px;height:3px}
.wk-sep{width:7px;height:7px;flex:none;border-top:2px solid var(--lp-text-2);border-right:2px solid var(--lp-text-2);transform:rotate(45deg);opacity:.5;margin:0 4px 0 0}
.wk-body{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:28px 48px;align-items:center}
.wk-copy h3{font-size:clamp(26px,2.6vw,36px);font-weight:700;line-height:1.08;letter-spacing:-.03em;margin:0 0 12px;color:var(--lp-ink)}
.wk-copy p{margin:0;font-size:18px;line-height:1.55;color:var(--lp-text-2)}
.wk-copy .lpd-more{margin-top:18px}
.wk-copy .wk-opt{margin-top:2px;font-size:15px}
.wk-opt a{color:var(--lp-ink)!important;font-weight:600;text-underline-offset:4px}
.wk-visual{position:relative;padding:40px 16px 12px;border-radius:24px;background:color-mix(in srgb,#fff 55%,transparent);border:1px solid color-mix(in srgb,var(--lp-ink) 8%,transparent)}
.wk-label{position:absolute;left:20px;top:14px;font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--lp-text-2)}
.pvp__swipe{position:relative;display:flex;align-items:center;justify-content:center;gap:8px;min-height:52px;margin-top:auto;border-radius:99px;background:var(--brand);color:#fff;font-weight:600;font-size:13.5px;padding:0 16px 0 56px}
.pvp__knob{position:absolute;left:5px;top:5px;width:42px;height:42px;border-radius:50%;display:grid;place-items:center;background:var(--lp-accent,#A8E6CB);color:var(--brand)}
@media (max-width:1100px){.wk-body{grid-template-columns:minmax(0,1fr)}.wk-visual{order:-1}}
@media (max-width:760px){
  .wk-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));width:100%}
  .wk-sep{display:none}
  .wk-steps .wd-tab{justify-content:center;text-align:center;white-space:normal;padding:8px 6px;font-size:13.5px;line-height:1.2}
  .wk-visual{padding:36px 8px 8px}
}
.wk-head{grid-template-columns:auto minmax(0,1fr);gap:16px 48px}
.wk-head .lp-lede{justify-self:end;max-width:40ch}
.lp[data-dir] .lpd-wd.lp-sec{padding:48px 0 72px}
@media (max-width:1100px){.wk-head{grid-template-columns:minmax(0,1fr)}.wk-head .lp-lede{justify-self:start}}
@media (max-width:480px){
  .pvv__row>.av{grid-column:1;grid-row:1/span 3;align-self:start}
  .pvv__row>div{grid-column:2}
}
/* Homepage spotlights (OWN-045): short copy at about 40%, a large product preview at about 60% */
.sp__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.5fr);gap:40px 64px;align-items:center}
.sp__grid--rev .sp__copy{order:2}
.sp__copy h2{margin-bottom:14px}
.sp__copy .lp-lede{margin:0}
.sp__line{display:flex;gap:9px;align-items:flex-start;margin:16px 0 0;font-weight:600;color:var(--lp-ink)}
.sp__line .ico{margin-top:3px;flex:none}
.sp__avail{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin:18px 0 0;font-size:14px;color:var(--lp-text-2)}
.sp__avail .lp-chip{margin-top:0}
.sp__act{display:flex;flex-wrap:wrap;align-items:center;gap:8px 24px;margin-top:18px}
.sp__act .lpd-more,.sp__act .lpd-toggle{margin-top:0}
.sp__sub{font-weight:600;color:var(--lp-ink)!important;text-underline-offset:4px}
.sp__fig{position:relative;margin:0;min-width:0;padding:44px 24px 24px;border-radius:24px;background:var(--lpd-paper,var(--lp-alt))}
.sp-label{position:absolute;left:20px;top:14px;font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--lp-text-2)}
.sp__art{display:flex;justify-content:center}
.sp__art>.pvw{width:100%;max-width:640px}
.sp--dark{background:var(--lp-dark);color:#C9D2E6}
.sp--dark h2{color:#fff!important}
.sp--dark .lp-lede,.sp--dark .sp__avail{color:#C9D2E6}
.sp--dark .lpd-k{color:#fff}
.sp--dark .lp-chip--planned{color:#C9D2E6;border-color:rgba(255,255,255,.4)}
.sp--dark .sp__fig{background:rgba(255,255,255,.06)}
.sp--dark .sp-label{color:#A9B5CE}
.sp--dark .pvw{box-shadow:0 30px 70px -30px rgba(0,0,0,.6)}
.sp--tint{background:var(--lpd-paper,var(--lp-alt))}
.sp--tint .sp__fig{background:var(--lp-bg)}
.lpd-ee .ee-bench{margin-top:0}
.lpd-ee .ee-detail--4{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 12px;padding:24px 8px}
.pvz__aud{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:10px;align-items:center;padding:10px 0;border-bottom:1px solid #EEF0F4}
.pvz__aud:last-child{border-bottom:0}
.pvz__aud b{display:block;font-size:13px}
.pvz__aud span:not(.av){display:block;font-size:12px;color:var(--fg-2)}
.pvz__aud small{font-size:11.5px;color:var(--fg-3);white-space:nowrap}
.pvz__roles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.pvz__roles .eyebrow{grid-column:1/-1}
.pvz__roles>div{padding:10px;border:1px solid #E7EAF0;border-radius:10px;display:flex;flex-direction:column;gap:2px;min-width:0}
.pvz__roles b{font-size:12.5px}
.pvz__roles span{font-size:11.5px;color:var(--fg-3)}
/* get started */
.gs{background:var(--lpd-paper,var(--lp-alt))}
.gs h2{margin-bottom:28px}
.gs__steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.gs__steps li{display:flex;flex-direction:column;gap:6px;padding:24px;border-radius:16px;background:var(--lp-bg)}
.gs__steps .eicon{background:var(--lp-soft);color:var(--lp-primary);margin-bottom:6px}
.gs__steps b{font-family:var(--lp-display,inherit);font-size:19px;color:var(--lp-ink)}
.gs__steps span:not(.eicon){font-size:15px;color:var(--lp-text-2)}
.gs__more{margin:8px 0 0}
/* pricing: one visible line of terms, details on request */
.pr-disc{display:flex;gap:9px;align-items:flex-start;max-width:780px;margin:20px auto 0;font-size:14.5px;color:var(--lp-text-2)}
.pr-disc .ico{margin-top:3px;flex:none}
.pr-more{display:flex;justify-content:center;margin-top:14px}
#pr-details{margin-top:24px}
.lpd-faq__more{margin:12px 0 0}
@media (max-width:1100px){.sp__grid{grid-template-columns:minmax(0,1fr)}.sp__grid--rev .sp__copy{order:0}}
@media (max-width:760px){.gs__steps{grid-template-columns:minmax(0,1fr)}.sp__fig{padding:40px 10px 12px}.lpd-ee .ee-detail--4{grid-template-columns:minmax(0,1fr)}}
@media (max-width:480px){.pvz__roles{grid-template-columns:minmax(0,1fr)}.pvz__aud{grid-template-columns:auto minmax(0,1fr)}.pvz__aud small{grid-column:2}}
.sp__grid--rev{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr)}
@media (max-width:1100px){.sp__grid--rev{grid-template-columns:minmax(0,1fr)}}
.sp__grid{grid-template-columns:minmax(0,1fr) minmax(0,1.7fr)}
.sp__grid--rev{grid-template-columns:minmax(0,1.7fr) minmax(0,1fr)}
.lpd-ee .sp__grid{align-items:start}
.lpd-ee .sp__copy{position:sticky;top:calc(var(--bar-h) + 120px);padding-top:56px}
@media (max-width:1100px){.sp__grid,.sp__grid--rev{grid-template-columns:minmax(0,1fr)}.lpd-ee .sp__copy{position:static;padding-top:0}}
.sp__line .sp__sub{font-weight:600;white-space:nowrap}
/* ---------- Hero 3D phone showcase (OWN-046) ----------
   A CSS phone in perspective; the camera (tilt, zoom, framing) and the screens change with data-scene and data-step. */
.p3w{margin:0;min-width:0;display:flex;flex-direction:column;gap:14px}
.p3d{--rx:7deg;--ry:-18deg;--z:.9;--tx:0px;--ty:0px;--k:1;position:relative;height:640px;border-radius:28px;overflow:hidden;perspective:1500px;display:grid;place-items:center;
  background:radial-gradient(120% 90% at 50% 20%,#fff 0%,color-mix(in srgb,var(--lpd-paper,#F6F1E7) 70%,#fff) 55%,var(--lpd-paper,#F1EADB) 100%)}
.p3d__tag{position:absolute;left:18px;top:16px;z-index:5;font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--lp-text-2);background:rgba(255,255,255,.75);border:1px solid var(--lp-line);border-radius:99px;padding:4px 10px}
.p3d__cam{transform-style:preserve-3d;transform:rotateX(var(--rx)) rotateY(var(--ry)) translate3d(var(--tx),var(--ty),0) scale(calc(var(--z) * var(--k)));transition:transform 1.1s cubic-bezier(.22,1,.36,1)}
.p3d__float{transform-style:preserve-3d;animation:p3float 7s ease-in-out infinite}
@keyframes p3float{0%,100%{transform:translateY(0) rotateZ(0)}50%{transform:translateY(-8px) rotateZ(.4deg)}}
.p3d.is-paused .p3d__float{animation-play-state:paused}
.p3d__shadow{position:absolute;left:50%;bottom:34px;width:300px;height:44px;border-radius:50%;background:radial-gradient(closest-side,rgba(16,24,40,.32),rgba(16,24,40,0));transform:translateX(-50%) scale(calc(var(--k) * (1.6 - var(--z) * .6)));opacity:calc(1.5 - var(--z));transition:transform 1.1s cubic-bezier(.22,1,.36,1),opacity 1.1s}
/* the device */
.p3d__phone{position:relative;width:300px;height:620px;border-radius:54px;padding:11px;
  background:linear-gradient(145deg,#4a5059 0%,#1b1e24 22%,#2c3138 55%,#121418 78%,#3b4048 100%);
  box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.18),inset 0 0 0 5px #0a0b0e,0 60px 90px -40px rgba(16,24,40,.55),0 24px 40px -24px rgba(16,24,40,.35)}
.p3d__key{position:absolute;width:4px;border-radius:2px;background:linear-gradient(90deg,#2a2f36,#4a5059)}
.p3d__key--a{left:-3px;top:118px;height:30px}
.p3d__key--b{left:-3px;top:168px;height:56px}
.p3d__key--c{left:-3px;top:236px;height:56px}
.p3d__key--d{right:-3px;top:190px;height:86px}
.p3d__screen{position:absolute;inset:11px;border-radius:44px;overflow:hidden;background:#F4F5F8;color:var(--fg);font-size:13px;line-height:1.4}
.p3d__island{position:absolute;top:22px;left:50%;width:98px;height:29px;border-radius:20px;background:#000;transform:translateX(-50%);z-index:6}
.p3d__glare{position:absolute;inset:11px;border-radius:44px;pointer-events:none;z-index:7;background:linear-gradient(115deg,rgba(255,255,255,.22) 0%,rgba(255,255,255,0) 28%,rgba(255,255,255,0) 72%,rgba(255,255,255,.08) 100%)}
.p3d__status{position:absolute;top:0;left:0;right:0;height:50px;display:flex;align-items:center;justify-content:space-between;padding:6px 26px 0 30px;font-size:14px;z-index:4}
.p3d__status b{font-weight:600;letter-spacing:-.01em}
.p3d__status span{display:flex;align-items:center;gap:5px}
.p3d__status svg{height:11px;fill:currentColor}
.p3d__batt{position:relative;width:24px;height:12px;border-radius:4px;border:1.5px solid currentColor;opacity:.9}
.p3d__batt::after{content:"";position:absolute;inset:1.5px 4px 1.5px 1.5px;border-radius:2px;background:currentColor}
/* screens */
.p3s{position:absolute;inset:54px 0 66px;padding:6px 14px;display:flex;flex-direction:column;gap:12px;opacity:0;transform:translateY(16px) scale(.98);transition:opacity .45s ease,transform .6s cubic-bezier(.22,1,.36,1);pointer-events:none}
.p3d[data-scene="clock"]:is([data-step="0"],[data-step="1"],[data-step="2"]) .p3s--off,
.p3d[data-scene="clock"]:is([data-step="3"],[data-step="4"]) .p3s--on,
.p3d[data-scene="leave"] .p3s--leave,
.p3d[data-scene="approve"] .p3s--mgr,
.p3d[data-scene="pay"]:is([data-step="0"],[data-step="1"]) .p3s--plist,
.p3d[data-scene="pay"]:is([data-step="2"],[data-step="3"],[data-step="4"]) .p3s--pdet{opacity:1;transform:none}
.p3s__head{display:flex;align-items:center;gap:9px}
.p3s__av{width:28px;height:28px;border-radius:9px;display:grid;place-items:center;background:#0F5F5C;color:#fff;flex:none}
.p3s__head b{font-size:14px;flex:1;min-width:0}
.p3s__role{font-size:11px;font-weight:600;padding:3px 9px;border-radius:99px;background:#E8ECF5;color:var(--brand)}
.p3s--mgr .p3s__role{background:var(--lp-accent,#A8E6CB);color:var(--brand)}
.p3s__title{margin:0;font-size:12px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--fg-3)}
.p3s__card{background:#fff;border:1px solid #E5E8EE;border-radius:20px;padding:16px;display:flex;flex-direction:column;gap:11px;box-shadow:0 1px 2px rgba(16,24,40,.04)}
.p3s__card--on{border-color:var(--ok-line);background:linear-gradient(180deg,#F3FBF6,#fff 50%)}
.p3s__state{display:flex;align-items:center;gap:9px;font-size:20px;font-weight:600;letter-spacing:-.02em;line-height:1.2}
.p3s__state .live-dot{width:11px;height:11px}
.p3s__sub{font-size:12.5px;color:var(--fg-3)}
.p3s__site{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--ok);font-weight:500}
.p3s__swipe{position:relative;height:54px;border-radius:99px;background:var(--brand);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:600;font-size:13.5px;overflow:hidden;margin-top:6px}
.p3s__fill{position:absolute;left:0;top:0;bottom:0;width:0;background:color-mix(in srgb,var(--lp-accent,#A8E6CB) 35%,var(--brand));transition:width .9s cubic-bezier(.4,0,.2,1)}
.p3s__swl{position:relative;padding-left:40px}
.p3s__knob{position:absolute;left:4px;top:4px;width:46px;height:46px;border-radius:50%;display:grid;place-items:center;background:var(--lp-accent,#A8E6CB);color:var(--brand);transition:left .9s cubic-bezier(.4,0,.2,1);z-index:1}
.p3d[data-scene="clock"]:is([data-step="2"],[data-step="3"],[data-step="4"]) .p3s__knob{left:calc(100% - 50px)}
.p3d[data-scene="clock"]:is([data-step="2"],[data-step="3"],[data-step="4"]) .p3s__fill{width:100%}
.p3s__tiles{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.p3s__tiles span{display:flex;flex-direction:column;align-items:center;gap:4px;padding:11px 4px;border:1px solid #E5E8EE;border-radius:13px;font-size:12px;font-weight:600;color:var(--fg-2);background:#fff}
.p3s__btn{position:relative;display:flex;align-items:center;justify-content:center;gap:7px;min-height:46px;border-radius:14px;background:var(--brand);color:#fff;font-weight:600;font-size:13.5px;transition:background-color .35s}
.p3s__btn--line{background:#fff;color:var(--brand);border:1.5px solid var(--brand)}
.p3s__btn .p3s__a,.p3s__btn .p3s__b{display:flex;align-items:center;gap:7px;transition:opacity .3s,transform .3s}
.p3s__btn .p3s__b{position:absolute;opacity:0;transform:translateY(8px)}
.p3d[data-scene="leave"]:is([data-step="3"],[data-step="4"]) .p3s__send,
.p3d[data-scene="pay"]:is([data-step="4"]) .p3s__dl{background:var(--ok)}
.p3d[data-scene="leave"]:is([data-step="3"],[data-step="4"]) .p3s__send .p3s__a,
.p3d[data-scene="pay"]:is([data-step="4"]) .p3s__dl .p3s__a{opacity:0;transform:translateY(-8px)}
.p3d[data-scene="leave"]:is([data-step="3"],[data-step="4"]) .p3s__send .p3s__b,
.p3d[data-scene="pay"]:is([data-step="4"]) .p3s__dl .p3s__b{opacity:1;transform:none}
.p3s__kv{display:grid;grid-template-columns:1fr auto;gap:6px 10px;font-size:13px;padding:10px 0;border-top:1px solid #EEF0F4;border-bottom:1px solid #EEF0F4}
.p3s__kv span{color:var(--fg-3)}
.p3s__kv b{text-align:right;padding:0 6px;border-radius:6px;transition:background-color .4s}
.p3d[data-scene="leave"]:is([data-step="1"],[data-step="2"]) .p3s__hl{background:color-mix(in srgb,var(--lp-accent,#A8E6CB) 55%,#fff)}
.p3s__after{display:flex;flex-direction:column;align-items:flex-start;gap:4px;max-height:0;opacity:0;overflow:hidden;transition:max-height .5s,opacity .4s}
.p3s__after small{font-size:12px;color:var(--fg-3)}
.p3s__after .st{white-space:normal}
.p3d[data-scene="leave"]:is([data-step="3"],[data-step="4"]) .p3s--leave .p3s__after,
.p3d[data-scene="approve"]:is([data-step="3"],[data-step="4"]) .p3s__after--ok{max-height:80px;opacity:1}
.p3s__who{display:flex;align-items:center;gap:10px}
.p3s__who b{display:block;font-size:14px}
.p3s__who span{display:block;font-size:12px;color:var(--fg-2)}
.p3s__acts{display:grid;grid-template-columns:1fr 1fr;gap:8px;max-height:60px;transition:max-height .5s,opacity .35s}
.p3s__acts .p3s__btn{min-height:42px}
.p3d[data-scene="approve"]:is([data-step="3"],[data-step="4"]) .p3s__acts{max-height:0;opacity:0;overflow:hidden}
.p3s__item{display:flex;align-items:center;gap:10px;padding:12px 14px;border-radius:16px;background:#fff;border:1px solid #E5E8EE;font-size:13px;transition:background-color .3s,border-color .3s}
.p3s__item>div{flex:1;min-width:0}
.p3s__item b{display:block;font-size:13.5px}
.p3s__item span{display:block;font-size:12px;color:var(--fg-3)}
.p3s__item .st{font-size:11px}
.p3s__item>.ico{color:var(--fg-3);flex:none}
.p3s__item--warn{color:var(--fg-2)}
.p3s__item--warn>.ico{color:var(--warn)}
.p3d[data-scene="pay"][data-step="1"] .p3s__item--cur{background:#EEF2FA;border-color:#C9D4EA}
.p3s__net{display:flex;flex-direction:column;gap:2px;padding:12px 14px;border-radius:14px;background:#F3F6FC}
.p3s__net span{font-size:12px;color:var(--fg-3)}
.p3s__net b{font-size:28px;font-weight:700;letter-spacing:-.02em;color:var(--brand)}
.p3s__nav{position:absolute;left:0;right:0;bottom:0;height:66px;display:flex;justify-content:space-around;align-items:flex-start;padding-top:10px;border-top:1px solid #E5E8EE;background:rgba(255,255,255,.92)}
.p3s__tab{width:44px;height:32px;border-radius:12px;display:grid;place-items:center;color:var(--fg-3);transition:background-color .3s,color .3s}
.p3d[data-scene="clock"] .p3s__tab--clock,.p3d[data-scene="leave"] .p3s__tab--leave,.p3d[data-scene="approve"] .p3s__tab--leave,.p3d[data-scene="pay"] .p3s__tab--pay{background:#E8ECF5;color:var(--brand)}
/* the touch indicator from the reference: a soft grey dot on what is being used */
.p3d__touch{position:absolute;left:50%;top:50%;width:36px;height:36px;margin:-18px 0 0 -18px;border-radius:50%;background:rgba(70,76,90,.42);border:2px solid rgba(255,255,255,.75);box-shadow:0 2px 8px rgba(16,24,40,.25);opacity:0;z-index:8;pointer-events:none;transition:left .9s cubic-bezier(.4,0,.2,1),top .5s,opacity .25s}
.p3d:is([data-scene="clock"][data-step="1"],[data-scene="clock"][data-step="2"],[data-scene="leave"][data-step="2"],[data-scene="approve"][data-step="2"],[data-scene="pay"][data-step="1"],[data-scene="pay"][data-step="3"]) .p3d__touch{opacity:1}
.p3d:is([data-scene="leave"][data-step="2"],[data-scene="approve"][data-step="2"],[data-scene="pay"][data-step="1"],[data-scene="pay"][data-step="3"]) .p3d__touch{animation:p3tap .55s .25s ease-out}
@keyframes p3tap{0%{transform:scale(1)}40%{transform:scale(.72)}100%{transform:scale(1)}}
.sh--still .p3d__cam,.sh--still .p3d__shadow,.sh--still .p3s,.sh--still .p3d__touch,.sh--still .p3s__knob,.sh--still .p3s__fill{transition:none!important}
/* scene picker and pause */
.p3c{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:center}
.p3c__sc{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
.p3c__b{display:flex;flex-direction:column;gap:7px;align-items:stretch;padding:8px 6px 6px;border:0;background:none;border-radius:10px;cursor:pointer;font:600 13px/1.25 var(--sans);color:var(--lp-text-2);text-align:left;min-height:44px}
.p3c__b:hover{background:color-mix(in srgb,var(--lp-ink) 5%,transparent)}
.p3c__b[aria-pressed="true"]{color:var(--lp-ink)}
.p3c__b i{display:block;height:3px;border-radius:2px;background:color-mix(in srgb,var(--lp-ink) 12%,transparent);overflow:hidden}
.p3c__b i b{display:block;height:100%;width:0;background:var(--lp-accent,#A8E6CB);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--lp-ink) 15%,transparent)}
.p3c__b:focus-visible,.p3c__play:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.p3c__play{width:44px;height:44px;border-radius:50%;border:1px solid var(--lp-line);background:var(--lp-bg);color:var(--lp-ink);display:grid;place-items:center;cursor:pointer}
.p3c__play:hover{background:var(--lp-soft)}
.p3w figcaption{display:flex;flex-wrap:wrap;gap:6px 10px;align-items:center;font-size:12.5px;color:var(--lp-text-2)}
@media (prefers-reduced-motion:reduce){.p3d *,.p3d__cam,.p3d__shadow,.p3d__float{transition:none!important;animation:none!important}}
@media (max-width:760px){.p3d{height:560px;--k:.86}.p3c__b{font-size:12px}}
@media (max-width:420px){.p3d{height:500px;--k:.76}.p3c__sc{gap:2px}.p3c__b{padding:8px 3px 6px;font-size:11.5px}}
.p3s__fill{background:var(--ok)}
.p3d__island{width:86px;height:27px}
.p3d__status{padding:6px 20px 0 30px}
.p3d__status span{gap:4px}
.p3d__batt{width:22px;height:11px}
/* one persistent app header; only the role badge changes between employee and manager scenes */
.p3d__app{position:absolute;top:54px;left:0;right:0;height:40px;display:flex;align-items:center;gap:9px;padding:0 14px;z-index:3}
.p3d__app b{font-size:14px;flex:1;min-width:0}
.p3s__role{transition:background-color .4s}
.p3r--mgr{display:none}
.p3d[data-scene="approve"] .p3r--emp{display:none}
.p3d[data-scene="approve"] .p3r--mgr{display:inline}
.p3d[data-scene="approve"] .p3s__role{background:var(--lp-accent,#A8E6CB);color:var(--brand)}
.p3s{inset:98px 0 66px;padding-top:4px}
.p3s__who div span{display:block;font-size:12px;color:var(--fg-2)}
.p3s__who span{display:revert}
.p3s__who .av{display:grid;place-items:center;flex:none}
.pr-more .lpd-toggle{white-space:normal;text-align:center;max-width:100%;height:auto;padding-top:10px;padding-bottom:10px}
/* shared engine: the camera and float are positioned so layout offsets resolve inside the device */
.p3d__cam,.p3d__float{position:relative}
/* ---------- Payroll laptop showcase (OWN-047) ----------
   A CSS laptop in perspective; the camera zooms to what is being reviewed and a mouse cursor clicks through the pay run. */
.sp__fig--dev{padding:40px 0 4px;background:none}
.sp__fig--dev .sp-label{left:4px;top:8px}
.sp--dark .sp__fig--dev{background:none}
.l3w{display:flex;flex-direction:column;gap:14px;width:100%}
.l3d{--rx:12deg;--ry:-14deg;--z:.92;--tx:0px;--ty:0px;--k:1;position:relative;height:500px;border-radius:24px;overflow:hidden;perspective:1700px;display:grid;place-items:center;
  background:radial-gradient(110% 85% at 50% 25%,#3A3E45 0%,#26292E 55%,#17191C 100%)}
.l3d__cam{position:relative;display:flex;flex-direction:column;align-items:center;transform-style:preserve-3d;transform:rotateX(var(--rx)) rotateY(var(--ry)) translate3d(var(--tx),var(--ty),0) scale(calc(var(--z) * var(--k)));transition:transform 1.15s cubic-bezier(.22,1,.36,1);animation:l3float 8s ease-in-out infinite}
@keyframes l3float{0%,100%{translate:0 0}50%{translate:0 -6px}}
.l3d.is-paused .l3d__cam{animation-play-state:paused}
.l3d__shadow{position:absolute;left:50%;bottom:44px;width:620px;height:46px;border-radius:50%;background:radial-gradient(closest-side,rgba(0,0,0,.55),rgba(0,0,0,0));transform:translateX(-50%) scale(calc(var(--k) * (1.6 - var(--z) * .6)));opacity:calc(1.5 - var(--z));transition:transform 1.15s cubic-bezier(.22,1,.36,1),opacity 1.15s}
.l3d__lid{position:relative;width:560px;height:364px;border-radius:18px 18px 6px 6px;padding:16px 14px 18px;background:linear-gradient(160deg,#3c424b,#16191e 35%,#23272e 70%,#0d0f12);box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.14),inset 0 0 0 4px #08090b,0 40px 70px -30px rgba(0,0,0,.6)}
.l3d__lens{position:absolute;top:6px;left:50%;width:6px;height:6px;margin-left:-3px;border-radius:50%;background:#2a3038;box-shadow:inset 0 0 0 1.5px #000}
.l3d__screen{position:absolute;inset:16px 14px 18px;border-radius:5px;overflow:hidden;background:#F4F5F8;color:var(--fg);font-size:11px;line-height:1.4}
.l3d__glare{position:absolute;inset:16px 14px 18px;border-radius:5px;pointer-events:none;background:linear-gradient(120deg,rgba(255,255,255,.16) 0%,rgba(255,255,255,0) 30%,rgba(255,255,255,0) 75%,rgba(255,255,255,.06) 100%)}
.l3d__base{position:relative;width:650px;height:16px;margin-top:-2px;background:linear-gradient(180deg,#c9ccd2 0%,#a5a9b1 45%,#74787f 100%);clip-path:polygon(3% 0,97% 0,100% 62%,99% 100%,1% 100%,0 62%);border-radius:0 0 12px 12px}
.l3d__base span{position:absolute;top:0;left:50%;width:96px;height:6px;margin-left:-48px;border-radius:0 0 8px 8px;background:linear-gradient(180deg,#8d9198,#b5b8be)}
.l3d__top{position:absolute;top:0;left:0;right:0;height:30px;display:flex;align-items:center;gap:7px;padding:0 10px;background:#fff;border-bottom:1px solid #E5E8EE}
.l3d__top b{font-size:11.5px}
.l3d__logo{display:grid}
.l3d__co{margin-left:8px;padding-left:9px;border-left:1px solid #E5E8EE;color:var(--fg-3)}
.l3d__user{margin-left:auto;display:flex;align-items:center;gap:6px}
.l3d__role{font-size:9.5px;font-weight:600;padding:2px 7px;border-radius:99px;background:#E8ECF5;color:var(--brand)}
.l3d .l3u{width:20px;height:20px;font-size:8px}
.l3r--appr,.l3u--appr{display:none}
.l3d[data-scene="approve"] .l3r--pay,.l3d[data-scene="approve"] .l3u--pay{display:none}
.l3d[data-scene="approve"] .l3r--appr{display:inline;background:var(--lp-accent,#A8E6CB)}
.l3d[data-scene="approve"] .l3u--appr{display:grid}
.l3d__side{position:absolute;top:30px;bottom:0;left:0;width:40px;display:flex;flex-direction:column;align-items:center;gap:6px;padding-top:10px;background:#fff;border-right:1px solid #E5E8EE;color:var(--fg-3)}
.l3d__side span{width:26px;height:26px;border-radius:8px;display:grid;place-items:center}
.l3d__side .on{background:#E8ECF5;color:var(--brand)}
.l3d__main{position:absolute;top:30px;left:40px;right:0;bottom:0;padding:10px 14px}
.l3d__title b{display:block;font-size:13px}
.l3d__title span{font-size:10px;color:var(--fg-3)}
.l3d__steps{list-style:none;margin:8px 0 8px;padding:0;display:flex;gap:4px}
.l3d__steps li{flex:1;padding:4px 6px 5px;font-size:9.5px;font-weight:600;color:var(--fg-3);border-bottom:2px solid #E1E5EC;transition:color .3s,border-color .3s}
.l3d[data-scene="inputs"] .l3st--inputs,.l3d[data-scene="register"] .l3st--register,.l3d[data-scene="checks"] .l3st--checks,.l3d[data-scene="approve"] .l3st--approve{color:var(--brand);border-color:var(--lp-accent,#A8E6CB)}
.l3d:is([data-scene="register"],[data-scene="checks"],[data-scene="approve"]) .l3st--inputs,.l3d:is([data-scene="checks"],[data-scene="approve"]) .l3st--register,.l3d[data-scene="approve"] .l3st--checks{color:var(--ok);border-color:var(--ok-line)}
.l3d__body{position:relative;height:214px}
.l3s{position:absolute;inset:0;opacity:0;transform:translateY(12px);transition:opacity .45s ease,transform .6s cubic-bezier(.22,1,.36,1);pointer-events:none}
.l3d[data-scene="inputs"] .l3s--in,.l3d[data-scene="register"] .l3s--reg,.l3d[data-scene="checks"] .l3s--chk,.l3d[data-scene="approve"] .l3s--appr{opacity:1;transform:none}
.l3s__card{background:#fff;border:1px solid #E5E8EE;border-radius:10px;padding:10px 12px;display:flex;flex-direction:column;gap:6px}
.l3s__h{font-size:11.5px}
.l3s__note{margin:2px 0 0;font-size:9.5px;color:var(--fg-3)}
.l3s__row{display:grid;grid-template-columns:auto minmax(0,1fr) auto 18px;gap:8px;align-items:center;padding:7px 0;border-bottom:1px solid #EEF0F4;font-size:11px}
.l3s__row>.ico{color:var(--fg-3)}
.l3s__row em{display:grid;place-items:center;color:var(--ok);opacity:0;transform:scale(.4);transition:opacity .3s,transform .35s cubic-bezier(.34,1.56,.64,1)}
.l3d[data-scene="inputs"]:is([data-step="2"],[data-step="3"],[data-step="4"],[data-step="5"]) .l3s__row--1 em,
.l3d[data-scene="inputs"]:is([data-step="3"],[data-step="4"],[data-step="5"]) .l3s__row--2 em,
.l3d[data-scene="inputs"]:is([data-step="4"],[data-step="5"]) .l3s__row--3 em{opacity:1;transform:none}
.l3s__tbl{width:100%;border-collapse:collapse;font-size:10.5px}
.l3s__tbl th{font-weight:500;color:var(--fg-3);text-align:left;padding:0 4px 5px;border-bottom:1px solid #E7EAF0}
.l3s__tbl td{padding:5px 4px;border-bottom:1px solid #EEF0F4;transition:background-color .4s}
.l3s__tbl .r{text-align:right}
.l3s__badge{display:inline-block;font-size:8.5px;font-weight:600;padding:1px 5px;border-radius:99px;background:var(--warn-bg);color:#7A4A00;margin-left:4px}
.l3s__more td{color:var(--fg-3);font-size:10px}
.l3s__tot td{font-weight:700;color:var(--brand);border-bottom:0;padding-top:7px}
.l3d[data-scene="register"]:is([data-step="1"]) .l3s__hl td,.l3d[data-scene="register"]:is([data-step="2"]) .l3s__tot td{background:color-mix(in srgb,var(--lp-accent,#A8E6CB) 35%,#fff)}
.l3s__chk{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:8px;align-items:center;padding:6px 0;border-bottom:1px solid #EEF0F4;font-size:11px}
.l3s__chk>.ico{color:var(--ok)}
.l3s__chk .st{font-size:9.5px}
.l3s__ic{display:grid}
.l3s__ic .ico{grid-area:1/1;transition:opacity .3s}
.l3s__ic .ico:first-child{color:var(--warn)}
.l3s__ic .ico:last-child{color:var(--ok);opacity:0}
.l3d[data-scene="checks"]:is([data-step="3"],[data-step="4"],[data-step="5"],[data-step="6"]) .l3s__ic .ico:first-child{opacity:0}
.l3d[data-scene="checks"]:is([data-step="3"],[data-step="4"],[data-step="5"],[data-step="6"]) .l3s__ic .ico:last-child{opacity:1}
.l3s__ft{display:flex;align-items:center;justify-content:space-between;gap:8px;padding-top:4px;font-size:10px;color:var(--fg-3)}
.l3s__btn{position:relative;display:inline-flex;align-items:center;justify-content:center;min-height:28px;padding:0 12px;border-radius:8px;background:var(--brand);color:#fff;font-weight:600;font-size:10.5px;white-space:nowrap;transition:background-color .35s,opacity .35s}
.l3s__btn--sm{min-height:22px;padding:0 9px;font-size:9.5px;background:#fff;color:var(--brand);border:1px solid var(--line-2)}
.l3s__btn .l3s__a,.l3s__btn .l3s__b{display:flex;align-items:center;gap:5px;transition:opacity .3s,transform .3s}
.l3s__btn .l3s__b{position:absolute;opacity:0;transform:translateY(6px)}
.l3s__btn .ico{width:12px;height:12px}
.l3s__submit{opacity:.45}
.l3d[data-scene="checks"]:is([data-step="3"],[data-step="4"],[data-step="5"],[data-step="6"]) .l3s__submit{opacity:1}
.l3d[data-scene="checks"]:is([data-step="3"],[data-step="4"],[data-step="5"],[data-step="6"]) .l3s__pend .l3s__btn,
.l3d[data-scene="checks"][data-step="6"] .l3s__submit,
.l3d[data-scene="approve"]:is([data-step="4"],[data-step="5"]) .l3s__go{background:var(--ok);color:#fff;border-color:var(--ok)}
.l3d[data-scene="checks"]:is([data-step="3"],[data-step="4"],[data-step="5"],[data-step="6"]) .l3s__pend .l3s__a,
.l3d[data-scene="checks"][data-step="6"] .l3s__submit .l3s__a,
.l3d[data-scene="approve"]:is([data-step="4"],[data-step="5"]) .l3s__go .l3s__a{opacity:0;transform:translateY(-6px)}
.l3d[data-scene="checks"]:is([data-step="3"],[data-step="4"],[data-step="5"],[data-step="6"]) .l3s__pend .l3s__b,
.l3d[data-scene="checks"][data-step="6"] .l3s__submit .l3s__b,
.l3d[data-scene="approve"]:is([data-step="4"],[data-step="5"]) .l3s__go .l3s__b{opacity:1;transform:none}
.l3s__sum{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border:1px solid #E7EAF0;border-radius:8px;overflow:hidden}
.l3s__sum>div{padding:6px 8px;border-right:1px solid #E7EAF0}
.l3s__sum>div:last-child{border-right:0;background:#F7F9FD}
.l3s__sum span{display:block;font-size:9px;color:var(--fg-3)}
.l3s__sum b{display:block;font-size:12.5px}
.l3s__code{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:10.5px;color:var(--fg-2)}
.l3s__boxes{display:flex;gap:4px}
.l3s__d{width:20px;height:24px;border:1px solid var(--line-2);border-radius:5px;background:#fff;position:relative}
.l3s__d::after{content:"";position:absolute;left:50%;top:50%;width:6px;height:6px;margin:-3px 0 0 -3px;border-radius:50%;background:var(--brand);opacity:0;transform:scale(.3);transition:opacity .2s,transform .25s}
.l3d[data-scene="approve"]:is([data-step="2"],[data-step="3"],[data-step="4"],[data-step="5"]) .l3s__d::after{opacity:1;transform:none}
.l3d[data-scene="approve"][data-step="2"] .l3s__d--2::after{transition-delay:.15s}
.l3d[data-scene="approve"][data-step="2"] .l3s__d--3::after{transition-delay:.3s}
.l3d[data-scene="approve"][data-step="2"] .l3s__d--4::after{transition-delay:.45s}
.l3d[data-scene="approve"][data-step="2"] .l3s__d--5::after{transition-delay:.6s}
.l3d[data-scene="approve"][data-step="2"] .l3s__d--6::after{transition-delay:.75s}
.l3s__act{display:flex;align-items:center;gap:10px;min-height:28px}
.l3s__ok{display:flex;align-items:center;gap:5px;margin:0;font-size:10px;color:var(--ok);font-weight:600;opacity:0;transition:opacity .4s .2s}
.l3d[data-scene="approve"]:is([data-step="4"],[data-step="5"]) .l3s__ok{opacity:1}
/* the mouse cursor: its tip sits on what is being used, and it presses on clicks */
.l3d__cursor{position:absolute;left:70%;top:85%;width:22px;height:22px;margin:-3px 0 0 -6px;opacity:0;z-index:9;pointer-events:none;filter:drop-shadow(0 2px 3px rgba(16,24,40,.35));transition:left .7s cubic-bezier(.4,0,.2,1),top .7s cubic-bezier(.4,0,.2,1),opacity .3s}
.l3d__cursor svg{display:block;width:22px;height:22px}
.l3d__cursor::after{content:"";position:absolute;left:4px;top:1px;width:20px;height:20px;margin:-9px 0 0 -9px;border-radius:50%;border:2px solid rgba(47,107,232,.65);opacity:0}
.l3d:is([data-scene="checks"],[data-scene="approve"]):not([data-step="0"]) .l3d__cursor{opacity:1}
.l3d[data-scene="approve"][data-step="5"] .l3d__cursor{opacity:0}
.l3d:is([data-scene="checks"][data-step="2"],[data-scene="checks"][data-step="5"],[data-scene="approve"][data-step="4"]) .l3d__cursor{animation:l3press .5s .1s ease-out}
.l3d:is([data-scene="checks"][data-step="2"],[data-scene="checks"][data-step="5"],[data-scene="approve"][data-step="4"]) .l3d__cursor::after{animation:l3ring .6s .15s ease-out}
@keyframes l3press{0%,100%{transform:scale(1)}45%{transform:scale(.82)}}
@keyframes l3ring{0%{opacity:.9;transform:scale(.3)}100%{opacity:0;transform:scale(1.8)}}
.sh--still .l3d__cam,.sh--still .l3d__shadow,.sh--still .l3s,.sh--still .l3d__cursor{transition:none!important}
@media (prefers-reduced-motion:reduce){.l3d *,.l3d__cam,.l3d__shadow{transition:none!important;animation:none!important}}
.sp--dark .p3c__b{color:#A9B5CE}
.sp--dark .p3c__b[aria-pressed="true"]{color:#fff}
.sp--dark .p3c__b:hover{background:rgba(255,255,255,.06)}
.sp--dark .p3c__b i{background:rgba(255,255,255,.16)}
.sp--dark .p3c__play{background:transparent;border-color:rgba(255,255,255,.3);color:#fff}
.sp--dark .p3c__play:hover{background:rgba(255,255,255,.08)}
@media (max-width:1280px){.l3d{--k:.9}}
@media (max-width:1100px){.l3d{--k:1}}
@media (max-width:760px){.l3d{height:400px;--k:.66}}
@media (max-width:480px){.l3d{height:320px;--k:.5}}
.l3s__btn--sm{min-width:78px}
.l3s__submit{min-width:126px}
.l3s__go{min-width:92px}
/* centre the device even when it is wider than the stage, so the camera framing stays true on phones */
.l3d,.p3d{display:flex;align-items:center;justify-content:center}
.l3d__cam,.p3d__cam{flex:none}
/* Hero on very dark purple (OWN-048): light text, lemon primary button, a soft violet glow behind the phone */
.lp[data-dir="d"] .lpd-hero{--hero-bg:#1C1E22;background:radial-gradient(70% 90% at 78% 40%,#353840 0%,rgba(53,56,64,0) 70%),linear-gradient(160deg,#26292E 0%,#1C1E22 55%,#141619 100%);border-bottom:0;color:#E9E3F5}
.lp[data-dir="d"] .lpd-hero h1{color:#fff}
.lp[data-dir="d"] .lpd-hero .lpd-h1b{background:none;color:var(--lp-accent,#A8E6CB)}
.lp[data-dir="d"] .lpd-hero .lp-lede{color:#CFC6E3}
.lp[data-dir="d"] .lpd-hero .lpd-cat{color:#D9CFEE}
.lp[data-dir="d"] .lpd-hero .lpd-cat::before{box-shadow:none}
.lp[data-dir="d"] .lpd-hero .lp-btn{background:var(--lp-accent,#A8E6CB);border-color:var(--lp-accent,#A8E6CB);color:#1F2226!important}
.lp[data-dir="d"] .lpd-hero .lp-btn:hover{background:#FFE45C;border-color:#FFE45C}
.lp[data-dir="d"] .lpd-hero .lp-btn svg.ico{background:#1F2226;color:var(--lp-accent,#A8E6CB)}
.lp[data-dir="d"] .lpd-hero .lp-btn2{color:#fff!important;border-color:rgba(255,255,255,.5);background:transparent}
.lp[data-dir="d"] .lpd-hero .lp-btn2:hover{background:rgba(255,255,255,.08)}
.lp[data-dir="d"] .lpd-hero .lpd-link{color:#fff!important;text-decoration-color:rgba(255,255,255,.45)}
.lp[data-dir="d"] .lpd-hero .lpd-link:hover{text-decoration-color:#fff}
.lp[data-dir="d"] .lpd-hero .lp-hero__note{color:#E9E3F5}
.lp[data-dir="d"] .lpd-hero .lp-hero__note .ico{color:#7BE3A6}
.lp[data-dir="d"] .lpd-hero :focus-visible{outline-color:var(--lp-accent,#A8E6CB)}
.lpd-hero .p3d{background:radial-gradient(80% 70% at 50% 38%,rgba(160,118,240,.32) 0%,rgba(92,48,160,.16) 45%,rgba(0,0,0,0) 78%),linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.015));border:1px solid rgba(255,255,255,.08)}
.lpd-hero .p3d__shadow{background:radial-gradient(closest-side,rgba(0,0,0,.6),rgba(0,0,0,0))}
.lpd-hero .p3d__phone{box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.18),inset 0 0 0 5px #0a0b0e,0 0 0 1px rgba(255,255,255,.06),0 60px 110px -40px rgba(120,70,230,.55),0 24px 40px -24px rgba(0,0,0,.6)}
.lpd-hero .p3d__tag{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.18);color:#D9CFEE}
.lpd-hero .p3c__b{color:#B9AED3}
.lpd-hero .p3c__b[aria-pressed="true"]{color:#fff}
.lpd-hero .p3c__b:hover{background:rgba(255,255,255,.06)}
.lpd-hero .p3c__b i{background:rgba(255,255,255,.16)}
.lpd-hero .p3c__play{background:transparent;border-color:rgba(255,255,255,.3);color:#fff}
.lpd-hero .p3c__play:hover{background:rgba(255,255,255,.08)}
.lpd-hero .p3w figcaption{color:#B9AED3}
.lpd-hero .lp-pv{background:transparent;border-color:rgba(255,255,255,.25);color:#D9CFEE}
/* phone showcase controls in very dark purple, in every state (OWN-049) */
.p3s__swipe,.p3s__send,.p3s__dl{background:#2F3237}
.p3s__fill{background:#6A4FB3}
.p3d[data-scene="leave"]:is([data-step="3"],[data-step="4"]) .p3s__send,
.p3d[data-scene="pay"]:is([data-step="4"]) .p3s__dl{background:#2F3237}
.p3s__appr{background:#2F3237}
/* footer on very dark purple to match the hero (OWN-050) */
.lp[data-dir="d"] .lp-foot{background:linear-gradient(180deg,#1F2125 0%,#16171A 100%);color:#CFC6E3}
.lp[data-dir="d"] .lp-foot a,.lp[data-dir="d"] .lp-foot .linkbtn{color:#EDE8F7!important}
.lp[data-dir="d"] .lp-foot a:hover,.lp[data-dir="d"] .lp-foot .linkbtn:hover{color:var(--lp-foot-h)!important}
.lp[data-dir="d"] .lp-foot .lp-mail{color:#fff!important}
.lp[data-dir="d"] .lp-foot__co{color:#B9AED3}
.lp[data-dir="d"] .lp-foot__base{color:#A99FC4;border-top-color:rgba(255,255,255,.12)}
.lp[data-dir="d"] .lp-foot .powered--dark{color:#B9AED3}
.lp[data-dir="d"] .lp-logo--light small{color:#C3B8DD}
.lp[data-dir="d"] .lp-logo--light b i{color:#C4B5F5}
.lp[data-dir="d"] .lp-foot :focus-visible{outline-color:var(--lp-accent,#A8E6CB)}
/* payroll section on very dark purple to match the hero and footer (OWN-051) */
.lp[data-dir="d"] .sp--dark{background:radial-gradient(70% 90% at 75% 45%,#353840 0%,rgba(53,56,64,0) 70%),linear-gradient(160deg,#26292E 0%,#1C1E22 55%,#141619 100%);color:#CFC6E3}
.lp[data-dir="d"] .sp--dark .lp-lede,.lp[data-dir="d"] .sp--dark .sp__avail{color:#CFC6E3}
.lp[data-dir="d"] .sp--dark .lp-chip--planned{color:#CFC6E3;border-color:rgba(255,255,255,.4)}
.lp[data-dir="d"] .sp--dark .sp-label{color:#B9AED3}
.lp[data-dir="d"] .sp--dark :focus-visible{outline-color:var(--lp-accent,#A8E6CB)}
.sp--dark .l3d{background:radial-gradient(80% 70% at 50% 38%,rgba(160,118,240,.32) 0%,rgba(92,48,160,.16) 45%,rgba(0,0,0,0) 78%),linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.015));border:1px solid rgba(255,255,255,.08)}
.sp--dark .l3d__lid{box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.14),inset 0 0 0 4px #08090b,0 0 0 1px rgba(255,255,255,.05),0 50px 110px -40px rgba(120,70,230,.55)}
.lp[data-dir="d"] .sp--dark .p3c__b{color:#B9AED3}
.lp[data-dir="d"] .sp--dark .p3c__b[aria-pressed="true"]{color:#fff}
/* closing call-to-action boxes on very dark purple (OWN-052) */
.lp[data-dir="d"] .lp-final__copy,.lp[data-dir="d"] .lpp-next__box{background:radial-gradient(90% 120% at 85% 10%,#43474E 0%,rgba(67,71,78,0) 60%),linear-gradient(160deg,#26292E 0%,#1C1E22 60%,#141619 100%)}
.lp[data-dir="d"] .lp-final__copy .lp-lede,.lp[data-dir="d"] .lpp-next__box p{color:#CFC6E3}
.lp[data-dir="d"] .lp-final__copy :focus-visible,.lp[data-dir="d"] .lpp-next__box :focus-visible{outline-color:var(--lp-accent,#A8E6CB)}
/* website buttons and highlights in very dark purple (OWN-053) */
.lp{--lp-purple:#2F3237;--lp-purple-h:#43474E}
.lp[data-dir="d"] .lp-btn{background:var(--lp-purple);border-color:var(--lp-purple);color:#fff!important}
.lp[data-dir="d"] .lp-btn:hover{background:var(--lp-purple-h);border-color:var(--lp-purple-h)}
.lp[data-dir="d"] .lp-btn:disabled:hover{background:var(--lp-purple)}
/* on purple panels the main button stays lemon so it stands out */
.lp[data-dir="d"] .lpd-hero .lp-btn,.lp[data-dir="d"] .lp-final__copy .lp-btn,.lp[data-dir="d"] .lpp-next__box .lp-btn{background:var(--lp-accent,#A8E6CB);border-color:var(--lp-accent,#A8E6CB);color:#1F2226!important}
.lp[data-dir="d"] .lpd-hero .lp-btn:hover,.lp[data-dir="d"] .lp-final__copy .lp-btn:hover,.lp[data-dir="d"] .lpp-next__box .lp-btn:hover{background:#FFE45C;border-color:#FFE45C}
.lp[data-dir="d"] .lp-final__copy .lp-btn svg.ico,.lp[data-dir="d"] .lpp-next__box .lp-btn svg.ico{background:#1F2226;color:var(--lp-accent,#A8E6CB)}
.au-tab[aria-selected="true"]{background:var(--lp-purple,#2F3237)}
.lp .ws-howbill{background:linear-gradient(160deg,#2B2E34 0%,#202328 60%,#18191D 100%);color:#DCD4EE}
.lp .ws-howbill .muted{color:#B9AED3;border-top-color:rgba(255,255,255,.14)}
.lp .ws-bands__act .btn--sm:not(.btn--ghost){background:var(--lp-purple);border-color:var(--lp-purple);color:#fff}
.lp .ws-bands__act .btn--sm:not(.btn--ghost):hover{background:var(--lp-purple-h);border-color:var(--lp-purple-h)}
.lp-lang button[aria-pressed="true"]{background:var(--lp-purple,#2F3237);color:#fff}
/* walkthrough steps: dark purple on hover (OWN-054) */
.wk-steps .wd-tab{transition:background-color .2s ease,color .2s ease}
.wk-steps .wd-tab:hover,.wk-steps .wd-tab[aria-selected="true"]:hover{background:var(--lp-purple,#2F3237);color:#fff}
@media (prefers-reduced-motion:reduce){.wk-steps .wd-tab{transition:none}}
/* audience tabs: dark purple on hover too (OWN-055) */
.au-tab:hover,.au-tab[aria-selected="true"]:hover{background:var(--lp-purple,#2F3237);color:#fff}

/* ---------- Organization Settings (OWN-057): grouped side menu, overview cards, settings pages ---------- */
.os{display:grid;grid-template-columns:240px minmax(0,1fr);gap:28px;align-items:start}
.os-main{min-width:0;display:flex;flex-direction:column;gap:20px}
.os-nav{position:sticky;top:calc(var(--bar-h) + 16px);display:flex;flex-direction:column;gap:12px}
.os-nav__hd{display:flex;flex-direction:column;gap:2px;padding:0 10px}
.os-nav__hd b{font-size:var(--t-md);font-weight:600;line-height:1.3}
.os-nav__hd span:last-child{font-size:12px;color:var(--fg-3)}
.os-nav__tog{display:none}
.os-nav__list{display:flex;flex-direction:column;gap:10px}
.os-search input{width:100%}
.os-nav__items{display:flex;flex-direction:column;gap:1px}
.os-grp{font-family:var(--mono);font-size:10.5px;letter-spacing:.07em;text-transform:uppercase;color:var(--fg-3);padding:12px 10px 4px}
.os-grp:first-child{padding-top:2px}
.os-lk{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:9px;color:var(--fg-2);text-decoration:none;font-weight:500;font-size:var(--t-sm);line-height:1.3}
.os-lk>span{flex:1;min-width:0}
.os-lk small{display:block;font-size:11.5px;color:var(--fg-3);font-weight:400}
.os-lk:hover{background:var(--hover-purple);color:var(--fg)}
.os-lk[aria-current="page"]{background:var(--surface);color:var(--brand);font-weight:600;box-shadow:var(--sh-1),inset 3px 0 0 var(--brand)}
.os-lk.is-lock{color:var(--fg-3)}
.os-lk.is-lock .ico--sm{width:13px;height:13px}
.os-nav__n{font-size:12px;color:var(--fg-3);padding:2px 10px 6px}
.os-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:16px}
.os-card{display:flex;flex-direction:column;padding:18px 18px 14px;gap:12px;min-height:212px}
.os-card__hd{display:flex;align-items:center;gap:10px}
.os-card__hd .eicon{width:32px;height:32px;border-radius:10px}
.os-card__hd h2{font-size:var(--t-md);font-weight:600}
.os-card__bd{display:flex;flex-direction:column;gap:10px;flex:1;align-items:flex-start}
.os-card__bd>.meter{width:100%}
.os-card__p{font-size:var(--t-sm);color:var(--fg-2)}
.os-card__sub{display:flex;align-items:center;gap:6px;font-size:12.5px;color:var(--fg-3)}
.os-card__list{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:4px;font-size:var(--t-sm);color:var(--fg-2)}
.os-card__list li::before{content:"";display:inline-block;width:5px;height:5px;border-radius:50%;background:var(--line-2);margin:0 8px 2px 0}
.os-card__ft{display:flex;gap:8px;flex-wrap:wrap}
.os-card__asof{font-size:11.5px;color:var(--fg-3);border-top:1px solid var(--line);padding-top:10px;margin-top:2px}
.os-card__restr{display:flex;gap:8px;align-items:flex-start;padding:12px;border-radius:var(--r-md);background:var(--surface-2);color:var(--fg-2);font-size:var(--t-sm)}
.os-card__err{display:flex;flex-direction:column;gap:8px;align-items:flex-start;font-size:var(--t-sm);color:var(--fg-2)}
.os-big{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.os-big b{font-size:var(--t-3xl);font-weight:600;letter-spacing:-.02em;line-height:1}
.os-big b small{font-size:var(--t-lg);color:var(--fg-3);font-weight:500;letter-spacing:0}
.os-big span{font-size:var(--t-sm);color:var(--fg-2)}
.os-mini{display:grid;grid-template-columns:auto 1fr;gap:6px 12px;margin:0;font-size:var(--t-sm);width:100%}
.os-mini dt{color:var(--fg-3)}
.os-mini dd{margin:0;text-align:right}
.meter--warn i{background:var(--warn)}
.os-skel{display:flex;flex-direction:column;gap:10px;width:100%}
.os-skel i{display:block;height:12px;border-radius:6px;background:linear-gradient(90deg,var(--surface-2),var(--surface-3),var(--surface-2));background-size:200% 100%}
.os-skel i:first-child{height:28px;width:45%}
.os-skel i:last-of-type{width:70%}
@media (prefers-reduced-motion:no-preference){.os-skel i{animation:osSk 1.4s ease-in-out infinite}}
@keyframes osSk{0%{background-position:100% 0}100%{background-position:-100% 0}}
.os-two{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:20px;align-items:start}
.os-acts{margin:0;padding:0;list-style:none}
.os-act{display:flex;gap:12px;align-items:flex-start;padding:14px 20px;border-bottom:1px solid var(--line)}
.os-act:last-child{border-bottom:0}
.os-act__tx{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.os-act__tx b{font-weight:600}
.os-act__tx>span:not(.os-act__meta){font-size:var(--t-sm);color:var(--fg-2)}
.os-act__meta{display:flex;flex-wrap:wrap;gap:6px 12px;align-items:center;font-size:12px;color:var(--fg-3);margin-top:4px}
.os-feed{margin:0;padding:0;list-style:none}
.os-feed li{display:flex;gap:12px;align-items:flex-start;padding:12px 20px;border-bottom:1px solid var(--line)}
.os-feed li:last-child{border-bottom:0}
.os-feed li>div{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;font-size:var(--t-sm)}
.os-feed li>div span{color:var(--fg-2)}
.os-feed time{font-size:12px;color:var(--fg-3)}
.os-empty{padding:32px 20px}
.os-demo{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:10px 14px;border:1px dashed var(--line-2);border-radius:var(--r-md);background:var(--surface)}
.os-list{margin:0;padding:0;list-style:none}
.os-li{display:flex;gap:14px;align-items:flex-start;padding:14px 20px;border-bottom:1px solid var(--line)}
.os-li:last-child{border-bottom:0}
.os-li .eicon{width:32px;height:32px;border-radius:10px}
.os-li__tx{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.os-li__tx b{font-weight:600}
.os-li__tx>span{font-size:var(--t-sm);color:var(--fg-2)}
.os-li__tx small{display:inline-flex;align-items:center;gap:5px;font-size:12px;color:var(--fg-3)}
.os-li__r{display:flex;gap:8px;align-items:center;flex-wrap:wrap;justify-content:flex-end;flex:none;max-width:50%}
.os-li--muted b{color:var(--fg-2)}
.os-list--flat .os-li{padding:12px 0}
.os-sub{display:block;font-weight:600;margin-bottom:4px}
.os-flow{display:flex;flex-wrap:wrap;gap:6px;margin:0;padding:0;list-style:none;counter-reset:osf}
.os-flow li{counter-increment:osf;display:inline-flex;align-items:center;gap:6px;padding:5px 10px 5px 6px;border-radius:99px;background:var(--surface-2);color:var(--fg-3);font-size:12.5px;font-weight:500}
.os-flow li::before{content:counter(osf);display:grid;place-items:center;width:18px;height:18px;border-radius:50%;background:var(--surface);font-size:11px}
.os-flow li.done{background:var(--ok-bg);color:var(--ok)}
.os-flow li.now{background:var(--info-bg);color:var(--info);box-shadow:inset 0 0 0 1px var(--info-line)}
.os-wrap{white-space:normal!important;word-break:break-all;min-width:140px}
.os-trouble{padding:12px 14px;border-radius:var(--r-md);background:var(--surface-2);font-size:var(--t-sm)}
.os-trouble ul{margin:6px 0 0;padding-left:18px;color:var(--fg-2);display:flex;flex-direction:column;gap:4px}
.os-lhgrid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:20px;align-items:start}
.os-lh{margin:0;display:flex;flex-direction:column;gap:8px;position:sticky;top:calc(var(--bar-h) + 16px)}
.os-lh__page{aspect-ratio:8.5/11;background:#fff;border:1px solid var(--line-2);border-radius:6px;box-shadow:var(--sh-2);padding:6% 7%;display:flex;flex-direction:column;gap:6%;font-size:11px;color:#2B3140;overflow:hidden}
.os-lh__zone{position:relative;border:1px dashed var(--info-line);border-radius:4px;padding:14px 10px 10px}
.os-lh__zone--ft{margin-top:auto;display:flex;justify-content:space-between;gap:10px;color:var(--fg-3);font-size:10px}
.os-lh__tag{position:absolute;top:-8px;left:8px;background:#fff;padding:0 4px;font-family:var(--mono);font-size:9px;letter-spacing:.06em;text-transform:uppercase;color:var(--info)}
.os-lh__zone--hd b{display:block;font-size:12.5px;color:var(--fg)}
.os-lh__zone--hd span{display:block}
.os-lh__ct{margin-left:auto;text-align:right;color:var(--fg-3)}
.os-lh__body{display:flex;flex-direction:column;gap:8px}
.os-lh__body b{font-size:12px}
.os-lh__body p{color:var(--fg-3)}
.os-lh__body i{display:block;height:6px;border-radius:3px;background:var(--surface-3)}
.os-mail{margin-top:14px;border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden;background:var(--surface-2);max-width:100%;transition:max-width .2s}
.os-mail--mob{max-width:340px;margin-left:auto;margin-right:auto}
.os-mail__hd{display:flex;flex-direction:column;gap:3px;padding:12px 14px;background:var(--surface);border-bottom:1px solid var(--line);font-size:12.5px;color:var(--fg-3)}
.os-mail__hd b{color:var(--fg);font-size:var(--t-md)}
.os-mail__bd{padding:16px 14px;display:flex;flex-direction:column;gap:10px;font-size:var(--t-sm);align-items:flex-start}
.os-mail__btn{display:inline-block;padding:8px 14px;border-radius:8px;background:var(--brand);color:#fff;font-weight:600}
.os-mail__lock{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--fg-3);border-top:1px solid var(--line);padding-top:10px;width:100%}
.os-steps{display:flex;gap:6px;margin:0 0 4px;padding:0;list-style:none;counter-reset:ost}
.os-steps li{counter-increment:ost;flex:1;font-size:12px;color:var(--fg-3);padding-top:8px;border-top:3px solid var(--surface-3)}
.os-steps li::before{content:counter(ost) ". "}
.os-steps li.done{border-top-color:var(--ok);color:var(--fg-2)}
.os-steps li.now{border-top-color:var(--brand);color:var(--fg);font-weight:600}
.os-prev{display:flex;flex-direction:column;gap:6px;padding:14px;border-radius:var(--r-md);background:var(--surface-2);font-size:var(--t-sm)}
.os-caps{border:1px solid var(--line);border-radius:var(--r-md);padding:10px 14px 12px;margin:0;display:flex;flex-direction:column;gap:8px}
.os-caps legend{font-weight:600;font-size:var(--t-sm);padding:0 4px}
.check.is-off{color:var(--fg-3)}
.os-three{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--line)}
.os-three__i{background:var(--surface);padding:18px 20px;display:flex;flex-direction:column;gap:6px;align-items:flex-start}
.os-three__i .eicon{width:32px;height:32px;border-radius:10px;margin-bottom:4px}
.os-three__i p{font-size:var(--t-sm);color:var(--fg-2)}
.os-stages{display:flex;flex-wrap:wrap;gap:6px;margin:0;padding:0;list-style:none}
.os-stages li{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;color:var(--fg-3);padding:4px 10px 4px 4px;border-radius:99px;background:var(--surface-2)}
.os-stages li span{display:grid;place-items:center;width:20px;height:20px;border-radius:50%;background:var(--surface);font-size:11px;font-weight:600}
.os-stages li.now{background:var(--info-bg);color:var(--info)}
.os-acc--full{font-size:var(--t-sm);font-weight:600;color:var(--fg)}
a.side__foot--lk{color:inherit;text-decoration:none;border-radius:10px}
a.side__foot--lk:hover,a.side__foot--lk[aria-current="page"]{background:var(--surface-2)}
@media (max-width:1100px){
  .os{grid-template-columns:1fr;gap:16px}
  .os-nav{position:relative;top:0;gap:0}
  .os-nav__hd{display:none}
  .os-nav__tog{display:flex;justify-content:flex-start;width:100%;min-height:44px;gap:10px}
  .os-nav__tog>span{flex:1;text-align:left;font-weight:600}
  .os-nav__list{display:none;margin-top:8px;padding:12px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh-2)}
  .os-nav.is-open .os-nav__list{display:flex}
  .os-two,.os-lhgrid{grid-template-columns:1fr}
  .os-lh{position:static;max-width:460px}
}
@media (max-width:680px){
  .os-li{flex-wrap:wrap}
  .os-li__r{max-width:none;width:100%;justify-content:flex-start;padding-left:46px}
  .os-act{flex-wrap:wrap}
  .os-act>.btn{margin-left:44px}
  .os-three{grid-template-columns:1fr}
  .os-feed li{flex-wrap:wrap}
  .os-feed li>.btn{margin-left:44px}
  .os-card{min-height:0}
}
.os-demo .seg{flex-wrap:wrap}
.os-lh__zone--hd .row{flex-wrap:wrap}
.os-lh__zone--hd .row>div{min-width:0}
@media (max-width:680px){.os-lh__ct{margin-left:0;text-align:left;flex-basis:100%}}
@media (max-width:680px){
  .os-main .wb{grid-template-columns:1fr!important;gap:10px}
  .os-main .wb li{flex-direction:row;align-items:center;gap:10px;padding:0}
  .os-main .wb li::before{top:26px;left:12px;right:auto;width:2px;height:12px}
  .os-main .row>.btn{white-space:normal;text-align:left;height:auto;min-height:36px;padding-top:6px;padding-bottom:6px}
  .os-main .prof-kv dd{overflow-wrap:anywhere}
  .os-main .prof-kv dd .st{white-space:normal;margin-top:4px}
}

/* ---------- Role dashboards (OWN-059): greeting, four tiles, progress card, tasks, review and coming up ---------- */
.db-ph .eyebrow{display:block;margin-bottom:6px}
.db-ph h1{font-size:var(--t-3xl)}
.db-tiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.db-tile{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh-1);padding:18px 20px;display:flex;flex-direction:column;gap:6px;min-width:0}
.db-tile span{font-size:var(--t-sm);color:var(--fg-2)}
.db-tile b{font-size:var(--t-3xl);font-weight:600;letter-spacing:-.02em;line-height:1.1;color:var(--fg)}
.db-tile b.is-bad{color:var(--bad)}
.db-tile small{font-size:12.5px;color:var(--fg-3)}
.db-mid{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:20px;align-items:start}
.db-bot{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:20px;align-items:start}
.db-card .card__hd{border-bottom:0;padding-bottom:6px}
.db-lk{font-size:var(--t-sm);font-weight:500;color:var(--link);text-decoration:none;white-space:nowrap}
.db-lk:hover{text-decoration:underline}
.db-bars{margin:0;padding:6px 20px 8px;list-style:none;display:flex;flex-direction:column;gap:14px}
.db-bars li{display:grid;grid-template-columns:minmax(120px,210px) minmax(0,1fr) 28px;gap:14px;align-items:center;font-size:var(--t-sm)}
.db-bars i{display:block;height:10px;border-radius:99px;background:var(--surface-3);overflow:hidden}
.db-bars em{display:block;height:100%;border-radius:99px;background:var(--brand)}
.db-bars b{text-align:right;font-weight:600}
.db-foot{padding:4px 20px 18px;font-size:12.5px;color:var(--fg-3)}
.db-list{margin:0;padding:0 8px 8px;list-style:none}
.db-list li+li{border-top:1px solid var(--line)}
.db-row{display:flex;align-items:center;gap:12px;width:100%;padding:12px;border:0;background:none;text-align:left;cursor:pointer;border-radius:10px;color:inherit}
.db-row:hover{background:var(--surface-2)}
.db-row>div{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.db-row b{font-weight:600;font-size:var(--t-sm);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.db-row span:not(.st):not(.av){font-size:12.5px;color:var(--fg-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.db-row>.st{flex:none}
.db-row>.av{flex:none}
.db-ico{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;flex:none;background:var(--surface-2);color:var(--brand)}
.db-ico--bad{background:var(--bad-bg);color:var(--bad)}
.db-ico--warn{background:var(--warn-bg);color:var(--warn)}
.db-ico--info{background:var(--info-bg);color:var(--info)}
.db-empty{padding:28px 20px}
.db-tot{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:0}
.db-tot div{display:flex;flex-direction:column;gap:2px}
.db-tot dt{font-size:12px;color:var(--fg-3)}
.db-tot dd{margin:0;font-weight:600}
@media (max-width:1180px){.db-mid,.db-bot{grid-template-columns:1fr}}
@media (max-width:900px){.db-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}.db-tot{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.db-ph h1{font-size:var(--t-2xl)}.db-bars li{grid-template-columns:minmax(0,1fr) 28px}.db-bars i{grid-column:1/-1;grid-row:2}.db-row{flex-wrap:wrap}.db-row>.st{margin-left:48px}.db-row b,.db-row span:not(.st):not(.av){white-space:normal}}
@media (max-width:380px){.db-tiles{grid-template-columns:1fr}}

/* ---------- HR operations (OWN-060): org chart, assets, learning, notices, private requests, bank changes ---------- */
.ho-back{display:inline-flex;align-items:center;gap:6px;font-size:var(--t-sm);color:var(--link);text-decoration:none;margin-bottom:6px}
.ho-back:hover{text-decoration:underline}
.oc-ctl{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-end;padding:16px 20px;border-bottom:1px solid var(--line)}
.oc-ctl .field{margin:0}
.oc-ctl .oc-date{display:flex;flex-direction:column;gap:4px}
.oc-ctl .oc-date label{font-size:12px;color:var(--fg-3)}
.oc-dated{display:flex;align-items:center;gap:6px;padding:10px 20px 0;font-size:12.5px;color:var(--info)}
.oc-tree,.oc-tree ul{list-style:none;margin:0;padding:0}
.oc-tree{padding:12px 16px 8px}
.oc-tree ul{margin-left:26px;padding-left:14px;border-left:1px dashed var(--line-2)}
.oc-n{padding:4px 0}
.oc-n.is-dim>.oc-card{opacity:.45}
.oc-card{display:flex;align-items:center;gap:10px;padding:8px 10px;border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface);flex-wrap:wrap}
.oc-card.is-hit{border-color:var(--brand);box-shadow:0 0 0 3px rgba(47,50,55,.12)}
.oc-card>div{flex:1;min-width:140px;display:flex;flex-direction:column;gap:1px}
.oc-card b{font-size:var(--t-sm);font-weight:600}
.oc-card span{font-size:12px;color:var(--fg-3)}
.oc-card .st,.oc-card .tag{flex:none}
.oc-tog{width:28px;height:28px;display:grid;place-items:center;border:0;background:var(--surface-2);border-radius:8px;cursor:pointer;color:var(--fg-2);flex:none}
.oc-tog--x{background:none;cursor:default}
.ho-reach{display:flex;flex-direction:column;gap:4px;font-size:12.5px;color:var(--fg-2);min-width:150px}
.ho-reach i{display:block;height:6px;border-radius:99px;background:var(--surface-3);overflow:hidden}
.ho-reach em{display:block;height:100%;background:var(--brand)}
.ho-thread{list-style:none;margin:0;padding:12px 20px;display:flex;flex-direction:column;gap:10px}
.ho-msg{padding:12px 14px;border-radius:var(--r-md);background:var(--surface-2);max-width:92%}
.ho-msg--hr{background:#EFF8FA;align-self:flex-end}
.ho-msg--int{background:var(--warn-bg);border:1px dashed var(--warn-line);align-self:stretch;max-width:none}
.ho-msg--me{background:#EFF8FA;align-self:flex-end}
.ho-msg__hd{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:4px;font-size:12.5px}
.ho-msg__hd time{margin-left:auto;color:var(--fg-3)}
.ho-msg p{font-size:var(--t-sm);white-space:pre-wrap}
.ho-thread--ee{padding:4px 0}
.ho-compose{display:flex;flex-direction:column;gap:10px;border-top:1px solid var(--line)}
.ho-bklist{list-style:none;margin:0;padding:0}
.ho-bk{padding:14px 20px;border-bottom:1px solid var(--line);display:flex;flex-direction:column;gap:10px}
.ho-bk:last-child{border-bottom:0}
.ho-bk__hd{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.ho-bk__hd>div{flex:1;min-width:180px;display:flex;flex-direction:column;gap:2px}
.ho-bk__hd b{font-weight:600}
.ho-bk__hd span{font-size:12.5px;color:var(--fg-3)}
.ho-steps{display:flex;gap:6px;margin:0;padding:0;list-style:none;flex-wrap:wrap}
.ho-steps li{flex:1;min-width:84px;font-size:11.5px;color:var(--fg-3);padding-top:7px;border-top:3px solid var(--surface-3)}
.ho-steps li.done{border-top-color:var(--ok);color:var(--fg-2)}
.ho-steps li.now{border-top-color:var(--brand);color:var(--fg);font-weight:600}
.ho-tl{list-style:none;margin:8px 0 0;padding:0 0 0 14px;border-left:2px solid var(--line);display:flex;flex-direction:column;gap:10px}
.ho-tl li{display:flex;flex-direction:column;gap:2px;font-size:var(--t-sm)}
.ho-tl li span{font-size:12px;color:var(--fg-3)}
.ho-mods{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.ho-mods li{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--fg-3)}
.ho-mods li.done{color:var(--ok)}
.ho-mods li.now{color:var(--fg);font-weight:600}
.ho-media{aspect-ratio:16/9;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;background:var(--brand);color:#fff;border-radius:var(--r-md) var(--r-md) 0 0;font-size:12.5px;position:relative}
.ho-media--pdf{background:var(--surface-2);color:var(--fg-2)}
.ho-media .tag{position:absolute;right:10px;bottom:10px}
.ho-q{border:0;padding:0;margin:0;display:flex;flex-direction:column;gap:6px}
.ho-q legend{font-weight:600;font-size:var(--t-sm);margin-bottom:6px}
.ho-ee-h{font-size:var(--t-xl);font-weight:600}
.ho-prev{display:flex;flex-direction:column;gap:6px;margin-top:12px;padding:14px;border:1px solid var(--line);border-radius:var(--r-md)}
@media (max-width:680px){.oc-tree ul{margin-left:10px;padding-left:8px}.oc-card .btn{width:100%}.ho-steps li{min-width:64px}}

/* Support requests and support access (OWN-064) */
.sx-tiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-bottom:20px}
.sx-tile{padding:16px 18px;display:flex;gap:12px;align-items:center;min-width:0}
.sx-tile div{display:flex;flex-direction:column;min-width:0}
.sx-tile b{font-size:var(--t-2xl);font-weight:600;line-height:1.1}
.sx-tile span:not(.eicon){font-size:var(--t-sm);color:var(--fg-2)}
.sx-alert{border-color:var(--warn-line)}
.sx-act{display:flex;flex-direction:column;gap:8px;padding-bottom:16px;border-bottom:1px solid var(--line)}
.sx-act:last-child{border-bottom:0;padding-bottom:0}
.sx-views,.sx-hist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.sx-views li{display:flex;gap:8px;align-items:center;font-size:var(--t-sm)}
.sx-views time{margin-left:auto;color:var(--fg-3);font-size:12.5px}
.sx-hist li{display:flex;gap:10px;justify-content:space-between;align-items:flex-start;padding:10px 0;border-top:1px solid var(--line);font-size:var(--t-sm)}
.sx-grid{margin-top:20px;align-items:start}
.sx-banner{display:flex;gap:12px;align-items:center;flex-wrap:wrap;padding:12px 16px;margin-bottom:16px;border-radius:var(--r-md);background:var(--brand);color:#fff;position:sticky;top:0;z-index:5}
.sx-banner > div{display:flex;flex-direction:column;flex:1;min-width:200px}
.sx-banner span{font-size:12.5px;opacity:.85}
.sx-banner .btn{background:#fff;color:var(--brand);border-color:#fff}
@media (max-width:900px){.sx-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:680px){.sx-grid{grid-template-columns:1fr}}

/* Help & Support and console Support (OWN-065) */
.sx-subnav{display:flex;flex-direction:column;gap:2px;margin:2px 0 8px 30px;padding-left:10px;border-left:1px solid rgba(255,255,255,.14)}
.sx-subnav a{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:6px 10px;border-radius:var(--r-sm);font-size:13px;color:inherit;opacity:.8;text-decoration:none}
.sx-subnav a:hover{opacity:1;background:rgba(185,168,236,.22)}
.sx-subnav a[aria-current="page"]{opacity:1;font-weight:600;background:rgba(255,255,255,.1)}
button.sx-tile{font:inherit;text-align:left;cursor:pointer;color:inherit}
button.sx-tile:hover{border-color:var(--brand-3)}
.sx-tiles{grid-template-columns:repeat(5,minmax(0,1fr))}
.sx-tiles--r{grid-template-columns:repeat(4,minmax(0,1fr))}
.sx-filters{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-end;margin-bottom:16px}
.sx-filters .field{min-width:130px;flex:1 1 130px;margin:0}
.sx-filters .search{flex:2 1 240px}
.sx-q{border:0;padding:0;margin:0;display:flex;flex-direction:column;gap:6px}
.sx-q legend{font-weight:600;font-size:var(--t-sm);margin-bottom:6px}
.sx-opt{display:inline-flex;align-items:center;gap:6px;padding:8px 12px;border:1px solid var(--line);border-radius:var(--r-md);cursor:pointer;font-size:var(--t-sm)}
.sx-opt:has(input:checked){border-color:var(--brand);background:#EFF8FA;font-weight:600}
.seg--wrap{flex-wrap:wrap;gap:8px;background:none;padding:0}
.sx-files{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.sx-files li{display:flex;gap:8px;align-items:center;font-size:var(--t-sm)}
.sx-files li .linkbtn{margin-left:auto}
.sx-file{display:inline-flex;gap:6px;align-items:center;font-size:12.5px;padding:4px 8px;border:1px solid var(--line);border-radius:var(--r-sm);margin-top:6px}
.sx-acc{display:flex;flex-direction:column;gap:10px;padding:16px;border:1px solid var(--line);border-radius:var(--r-md)}
.sx-msg{font-size:var(--t-sm);margin-bottom:-8px}
.sx-act-list{list-style:none;margin:0;padding:0}
.sx-act-list li{display:flex;gap:10px;align-items:baseline;flex-wrap:wrap;padding:10px 0;border-bottom:1px solid var(--line);font-size:var(--t-sm)}
.sx-act-list li:last-child{border-bottom:0}
.sx-act-list time{margin-left:auto;color:var(--fg-3);font-size:12.5px}
.sx-sla{display:flex;flex-wrap:wrap;gap:6px 12px;align-items:center;padding-bottom:12px;border-bottom:1px solid var(--line)}
.sx-sla > span:first-child{flex-basis:100%;font-size:12.5px;color:var(--fg-2)}
.sx-bars{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.sx-bars li{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) auto;gap:10px;align-items:center;font-size:var(--t-sm)}
.sx-bar{height:8px;border-radius:4px;background:var(--surface-2);overflow:hidden}
.sx-bar i{display:block;height:100%;background:var(--brand-3)}
.sx-res{border-color:var(--ok);margin-bottom:16px}
.sx-ok{max-width:640px}
.sx-num{width:84px}
.sx-date{width:auto;display:inline-block}
.sx-int-in{border-style:dashed;background:var(--warn-bg)}
.sx-form .stack > .card{margin:0}
.sx-banner b .ico{vertical-align:-2px}
@media (max-width:1100px){.sx-tiles{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:680px){.sx-tiles,.sx-tiles--r{grid-template-columns:repeat(2,minmax(0,1fr))}.sx-bars li{grid-template-columns:1fr auto}.sx-bar{display:none}}

/* HR learning by employee, tests and work locations (OWN-067) */
.ho-pbar{display:flex;align-items:center;gap:8px;min-width:110px}
.ho-pbar .meter{flex:1;margin:0;display:block}
.ho-pbar b{font-size:12.5px;font-weight:600;min-width:36px;text-align:right}
.ho-lsearch{max-width:520px;margin:0 0 16px}
.ho-qz{display:flex;flex-direction:column;gap:12px;margin-top:12px;max-height:56vh;overflow:auto;padding-right:4px}
.ho-qz__q{border:1px solid var(--line);border-radius:var(--r-md);padding:12px;margin:0;display:flex;flex-direction:column;gap:8px}
.ho-qz__q legend{font-weight:600;font-size:var(--t-sm);padding:0 4px}
.ho-qz__q ul{list-style:none;margin:6px 0 0;padding:0;display:flex;flex-direction:column;gap:4px}
.ho-qz__q li{display:flex;gap:6px;align-items:center;font-size:var(--t-sm);color:var(--fg-2)}
.ho-qz__q li.is-ok{color:var(--ok);font-weight:600}
.ho-qz__o{display:flex;gap:8px;align-items:center}
.ho-qz__o input[type="radio"]{flex:none;width:18px;height:18px}
.prof-tiles .ho-pbar{width:100%;margin-top:6px}
.ho-ltbl td{white-space:normal;vertical-align:top}
.ho-ltbl td:first-child{min-width:170px}
.ho-acts{min-width:150px}
.ho-acts .btn{margin:2px 0 2px 4px}
.prof-tiles .ho-pbar{flex-direction:row;align-items:center}
a.todo__item{color:inherit;text-decoration:none}
a.todo__item b{font-weight:600}

/* Turnstile bot check (shown only when Cloudflare needs the visitor to interact) */
.lp-ts{position:fixed;right:16px;bottom:16px;z-index:200}

/* existing organizations can always find Sign in next to Sign up, on every screen size */
.lp-signin{white-space:nowrap}
@media (max-width:480px){
  .lp-nav__act{gap:6px}
  .lp-signin{padding:0 8px;font-size:14px}
  .lp-nav__act .lp-btn{padding:0 12px}
}

/* tables inside a drawer keep their height (the drawer body is a flex column) */
.drawer__bd > .tblwrap{flex-shrink:0}

/* the sidebar submenu (Payroll > Payroll dashboard, Pay runs) */
.nav__sub{display:flex;flex-direction:column;margin:0 0 4px 22px;padding-left:8px;border-left:1px solid var(--line)}
.nav__sub a{padding:7px 10px;font-size:13.5px}

/* HR menu: search, folding groups with counts, breadcrumb, HR settings cards */
.hm .os-nav__hd b{font-size:var(--t-lg)}
.hm-search{position:relative;display:flex;align-items:center;margin:2px 0 4px}
.hm-search .ico{position:absolute;left:10px;color:var(--fg-3);pointer-events:none}
.hm-search .input{padding-left:32px;height:36px;font-size:13.5px}
.hm-grp{display:flex;align-items:center;gap:8px;width:100%;background:none;border:0;cursor:pointer;font-family:var(--mono);font-size:10.5px;letter-spacing:.07em;text-transform:uppercase;color:var(--fg-3);padding:14px 10px 4px;text-align:left}
.hm-grp span:first-child{flex:1}
.hm-grp:hover{color:var(--fg-2)}
.hm-grp:focus-visible{outline:2px solid var(--focus,#2563eb);outline-offset:2px;border-radius:6px}
.hm-items{display:flex;flex-direction:column;gap:1px}
.hm-lk{display:flex;align-items:center}
.hm-lk>span:not(.hm-n){flex:1;min-width:0}
.os-lk>span.hm-n{flex:none}
.hm-n{margin-left:auto;font-family:var(--sans,inherit);font-size:11px;font-weight:600;letter-spacing:0;background:var(--bad);color:#fff;border-radius:99px;padding:1px 7px;line-height:1.5}
.hm-soon{margin-left:auto;font-size:10.5px;color:var(--fg-3);font-weight:500}
.hm-crumb{display:flex;align-items:center;gap:6px;flex-wrap:wrap;font-size:var(--t-sm);color:var(--fg-3);margin:0 0 14px}
.hm-crumb a{color:var(--fg-2);text-decoration:none}
.hm-crumb a:hover{text-decoration:underline}
.hm-crumb [aria-current]{color:var(--fg);font-weight:500}
.hm-sets{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px}
.hm-set{display:flex;align-items:center;gap:14px;padding:16px 18px;text-decoration:none;color:inherit}
.hm-set>div{flex:1;display:flex;flex-direction:column;gap:3px;min-width:0}
.hm-set b{font-weight:600}
.hm-set span{font-size:var(--t-sm);color:var(--fg-2)}
a.hm-set[href]:hover{box-shadow:var(--sh-2);border-color:var(--brand-3,var(--line))}
.hm-set[aria-disabled]{opacity:.7}

/* HR dashboard tiles: each opens its page; red needs attention, green is active or all clear */
a.db-tile--go{text-decoration:none;color:inherit;position:relative;border-left:4px solid var(--line);transition:box-shadow .15s,transform .15s}
a.db-tile--go:hover{box-shadow:var(--sh-2);transform:translateY(-1px)}
a.db-tile--go:focus-visible{outline:2px solid var(--focus,#2563eb);outline-offset:2px}
.db-tile__hd{display:flex;align-items:center;gap:8px}
.db-tile__hd .db-ico{width:28px;height:28px}
a.db-tile--bad{border-left-color:var(--bad);background:color-mix(in srgb,var(--bad-bg) 55%,var(--surface))}
.db-tile--bad b{color:var(--bad)}
a.db-tile--ok{border-left-color:var(--ok);background:color-mix(in srgb,var(--ok-bg) 45%,var(--surface))}
.db-tile--ok b{color:var(--ok)}
.db-ico--ok{background:var(--ok-bg);color:var(--ok)}
.db-ico--n{background:var(--surface-2);color:var(--fg-3)}
.db-tile__go{display:inline-flex;align-items:center;gap:4px;font-size:12px;font-weight:600;color:var(--link);margin-top:2px}
.db-tile--bad .db-tile__go{color:var(--bad)}
.hd-feed{display:flex;align-items:flex-start;gap:12px;flex:1;text-decoration:none;color:inherit;border-radius:10px;padding:2px 4px;margin:-2px -4px}
.hd-feed:hover{background:var(--surface-2)}
.hd-feed>div{flex:1;min-width:0}
a.db-tile--info{border-left-color:var(--info);background:color-mix(in srgb,var(--info-bg) 50%,var(--surface))}
a.db-tile--info b,.db-tile--info .db-tile__go{color:var(--info)}
a.db-tile--warn{border-left-color:var(--warn);background:color-mix(in srgb,var(--warn-bg) 55%,var(--surface))}
a.db-tile--warn b,.db-tile--warn .db-tile__go{color:var(--warn)}

/* HR dashboard look and feel (owner's request): soft tinted tiles with a solid icon badge, a big number and an
   Open link; green active, blue onboarding, purple organization, red needs fixing, amber setup */
.hd{--purple:#2D6979;--purple-bg:#EAF7FB}
.hd .db-ph h1{font-size:clamp(26px,3vw,34px);letter-spacing:-.02em}
.hd-sub{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:6px}
.hd-pill{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:99px;font-size:12.5px;font-weight:600}
.hd-pill--todo{background:var(--purple-bg);color:var(--purple)}
.hd-pill--ok{background:var(--ok-bg);color:var(--ok)}
.hd .db-tiles{gap:16px}
.hd a.db-tile--go{border:1px solid var(--line);border-top:4px solid var(--tone,var(--line));border-left:1px solid var(--line);border-radius:16px;padding:18px 18px 14px;gap:8px;
  background:linear-gradient(180deg,color-mix(in srgb,var(--tone-bg,var(--surface)) 70%,var(--surface)) 0%,var(--surface) 75%);box-shadow:0 1px 2px rgba(16,24,40,.05)}
.hd a.db-tile--go:hover{box-shadow:0 10px 24px -12px color-mix(in srgb,var(--tone,#000) 45%,transparent);transform:translateY(-2px)}
.hd .db-tile--ok{--tone:var(--ok);--tone-bg:var(--ok-bg)}
.hd .db-tile--info{--tone:var(--info);--tone-bg:var(--info-bg)}
.hd .db-tile--bad{--tone:var(--bad);--tone-bg:var(--bad-bg)}
.hd .db-tile--warn{--tone:var(--warn);--tone-bg:var(--warn-bg)}
.hd .db-tile--purple{--tone:var(--purple);--tone-bg:var(--purple-bg)}
.hd .db-tile__hd{font-size:13px;font-weight:600;color:var(--fg-2);gap:10px}
.hd .db-tile__hd .db-ico{width:34px;height:34px;border-radius:10px;background:var(--tone);color:#fff;box-shadow:0 4px 10px -4px var(--tone)}
.hd a.db-tile--go b{font-size:40px;line-height:1;font-weight:700;letter-spacing:-.03em;color:var(--tone,var(--fg));margin-top:6px}
.hd .db-tile small{font-size:12.5px;color:var(--fg-2);min-height:2.6em}
.hd .db-tile__go{color:var(--tone,var(--link));border-top:1px solid color-mix(in srgb,var(--tone,var(--line)) 18%,transparent);padding-top:10px;margin-top:auto;width:100%}
.db-ico--purple{background:var(--purple-bg,#EAF7FB);color:var(--purple,#2D6979)}
.hd .db-card{border-radius:16px;box-shadow:0 1px 2px rgba(16,24,40,.05)}
.hd .db-card .card__hd h2{font-size:16px}
.hd .db-row{border-radius:12px;transition:background .15s}
.hd .db-row .db-ico{width:38px;height:38px;border-radius:12px}
.hd .db-row:hover{background:color-mix(in srgb,var(--purple-bg) 60%,var(--surface))}
.hd-empty{display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;padding:28px 20px 30px}
.hd-empty .db-ico{width:44px;height:44px;border-radius:14px;margin-bottom:4px}
.hd-empty span:last-child{font-size:12.5px;color:var(--fg-3);max-width:34ch}
.hd .os-feed li{border-radius:12px}
@media (max-width:900px){.hd .db-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.hd .db-tiles{grid-template-columns:1fr}.hd a.db-tile--go b{font-size:34px}}
.hd .db-ph{margin-bottom:24px;align-items:flex-end}
.hd .os-feed .hd-feed>div{display:flex;flex-direction:column;gap:2px}
.hd .os-feed .hd-feed>div b{font-size:13.5px}
.hd .os-feed .hd-feed>div span{color:var(--fg-2);font-size:13px}
.hd .os-feed .hd-feed>div time{font-size:12px;color:var(--fg-3)}
.hd .os-feed .hd-feed>.ico{align-self:center;color:var(--fg-3)}
/* HR dashboard icons: rounded squares with a soft gradient and a light inner ring; people show their initials with a
   small badge for what's missing */
.hd .db-tile__hd .db-ico{width:40px;height:40px;border-radius:12px;background:linear-gradient(145deg,color-mix(in srgb,var(--tone) 78%,#fff),var(--tone));
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.25),0 6px 14px -6px var(--tone)}
.hd .db-tile__hd .db-ico .ico{width:20px;height:20px;stroke-width:2.2}
.hd-badge{width:40px!important;height:40px!important;border-radius:12px!important;box-shadow:inset 0 0 0 1px color-mix(in srgb,currentColor 20%,transparent)}
.hd-badge .ico{width:19px;height:19px;stroke-width:2.1}
.hd-av{position:relative;flex:none;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;font-size:13px;font-weight:700;letter-spacing:.02em;color:var(--av-fg);background:var(--av-bg);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--av-fg) 18%,transparent)}
.hd-av i{position:absolute;right:-3px;bottom:-3px;width:20px;height:20px;border-radius:50%;display:grid;place-items:center;background:var(--av-fg);color:#fff;box-shadow:0 0 0 2px var(--surface)}
.hd-av i .ico{width:11px;height:11px;stroke-width:2.6}
.hd-av--info{--av-fg:var(--info);--av-bg:var(--info-bg)}
.hd-av--bad{--av-fg:var(--bad);--av-bg:var(--bad-bg)}
.hd-av--ok{--av-fg:var(--ok);--av-bg:var(--ok-bg)}
.hd-av--purple{--av-fg:var(--purple);--av-bg:var(--purple-bg)}
.hd-empty .db-ico .ico{width:20px;height:20px}

/* Admin dashboard cards in the same look (owner's request): coloured top edge, soft tint, gradient icon badge,
   coloured big number, the title opens the page */
.hd .os-card{border-radius:16px;border-top:4px solid var(--tone,var(--line));background:linear-gradient(180deg,color-mix(in srgb,var(--tone-bg,var(--surface)) 70%,var(--surface)) 0%,var(--surface) 60%);
  box-shadow:0 1px 2px rgba(16,24,40,.05);transition:box-shadow .15s,transform .15s}
.hd .os-card:hover{box-shadow:0 10px 24px -12px color-mix(in srgb,var(--tone,#000) 45%,transparent);transform:translateY(-2px)}
.hd .os-card--ok{--tone:var(--ok);--tone-bg:var(--ok-bg)}
.hd .os-card--info{--tone:var(--info);--tone-bg:var(--info-bg)}
.hd .os-card--bad{--tone:var(--bad);--tone-bg:var(--bad-bg)}
.hd .os-card--warn{--tone:var(--warn);--tone-bg:var(--warn-bg)}
.hd .os-card--purple{--tone:var(--purple);--tone-bg:var(--purple-bg)}
.hd .os-card__hd .eicon{width:40px;height:40px;border-radius:12px;color:#fff;background:linear-gradient(145deg,color-mix(in srgb,var(--tone,var(--brand)) 78%,#fff),var(--tone,var(--brand)));
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.25),0 6px 14px -6px var(--tone,var(--brand))}
.hd .os-card__hd .eicon .ico{width:20px;height:20px;stroke-width:2.2}
.hd .os-card__hd h2 a{color:inherit;text-decoration:none;display:inline-flex;align-items:center;gap:6px}
.hd .os-card__hd h2 a .ico{color:var(--tone,var(--link));opacity:.7;transition:transform .15s}
.hd .os-card__hd h2 a:hover .ico{transform:translateX(2px);opacity:1}
.hd .os-big b{font-size:40px;font-weight:700;letter-spacing:-.03em;color:var(--tone,var(--fg))}
.hd .meter i{background:var(--tone,var(--brand))}
.hd .os-acts .os-act{border-radius:12px}
.hd .card{border-radius:16px}
/* dashboard list icons in the same rounded-square style */
.hd .db-list .db-ico{width:38px;height:38px;border-radius:12px;box-shadow:inset 0 0 0 1px color-mix(in srgb,currentColor 18%,transparent)}
.hd .db-list .db-ico .ico{width:18px;height:18px;stroke-width:2.1}
.hd .nextrun{border-radius:16px;border-top:4px solid var(--purple)}
.hc-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--info);margin-right:6px;vertical-align:middle}

/* Work locations map */
.wl-grid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:16px;padding:0 20px 4px}
.wl-map{position:relative;min-height:380px;border:1px solid var(--line);border-radius:14px;overflow:hidden;background:var(--surface-2)}
.wl-map__in{position:absolute!important;inset:0}
.wl-side{border:1px solid var(--line);border-radius:14px;overflow:auto;max-height:520px;padding:6px}
.wl-side .tbl tr.is-sel td{background:var(--purple-bg,#EAF7FB)}
.wl-pin{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:10px 12px;border-radius:10px;background:var(--warn-bg);color:var(--warn);font-size:13px;font-weight:500}
.wl-pin.is-set{background:var(--ok-bg);color:var(--ok)}
.wl-pick{display:flex;flex-direction:column;gap:6px;max-height:180px;overflow:auto;padding:10px 12px;border:1px solid var(--line);border-radius:10px}
.wl-rules{margin:6px 0 8px;padding-left:18px;display:flex;flex-direction:column;gap:4px}
.leaflet-container{font:inherit}
.leaflet-tooltip{font-size:12px;font-weight:600;border-radius:8px;padding:3px 8px}
@media (max-width:1000px){.wl-grid{grid-template-columns:1fr}.wl-map{min-height:300px}}
/* HR documents (app.hrdocs) */
.dc-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.dc-item{display:flex;flex-direction:column;gap:8px;padding:12px 14px;border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface)}
.dc-wait{display:flex;flex-direction:column;gap:8px;padding:10px 12px;border-radius:var(--r-md);background:var(--surface-2)}
.dc-up{padding:10px 12px;border-radius:var(--r-md);background:var(--surface-2)}
tr.dc-off td{opacity:.62}
/* HR learning (app.hrlearning) */
.ln-lessons{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:8px}
.ln-lessons li{display:flex;flex-direction:column;gap:2px}
/* Performance (app.hrperformance) */
.pf-steps{list-style:none;margin:12px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.pf-steps li{display:flex;align-items:center;gap:6px;padding:6px 10px;border-radius:99px;background:var(--surface-2);color:var(--fg-2);font-size:12.5px}
.pf-steps li span{display:inline-grid;place-items:center;width:20px;height:20px;border-radius:50%;background:var(--surface-3);font-weight:600;font-size:11px}
.pf-steps li.is-done{color:var(--ok)}
.pf-steps li.is-done span{background:var(--ok);color:#fff}
.pf-steps li.is-now{background:var(--brand);color:#fff}
.pf-steps li.is-now span{background:#fff;color:var(--brand)}
.pf-score{display:flex;flex-direction:column;align-items:flex-end;gap:2px;padding:8px 12px;border-radius:var(--r-md);background:var(--surface-2)}
.pf-score span{font-size:12px;color:var(--fg-2)}
.pf-score b{font-size:20px;font-variant-numeric:tabular-nums}

/* Payroll > Reports: printing (or saving as PDF) shows only the report */
@media print {
  body:has(.prp-sheet) .side, body:has(.prp-sheet) .mtop, body:has(.prp-sheet) .hr-tabs, body:has(.prp-sheet) .prp-noprint, body:has(.prp-sheet) .pbar, body:has(.prp-sheet) .ho-back { display: none !important; }
  body:has(.prp-sheet) .ad { display: block !important; }
  body:has(.prp-sheet) .main, body:has(.prp-sheet) .main__in { padding: 0 !important; max-width: none !important; }
  .prp-sheet { box-shadow: none !important; border: 0 !important; }
  .prp-tbl { font-size: 9pt; }
  .prp-tbl th, .prp-tbl td { padding: 4px 6px !important; }
  .prp-sheet .tblwrap { overflow: visible !important; }
}

/* ---------- Dashboards, clean look (owner's request, 2 Nov 2026; replaces the tinted look above) ----------
   Every dashboard (Admin, HR, Payroll, Team and the prototype's role dashboards): a big greeting with the date and
   what needs you as plain text, actions on the same line; white tiles with a label, a big number and one line, no
   colour bands, tints or icon badges, red only for something overdue or blocking; white cards with a title and a
   quiet link; rows with a round avatar or icon, a name, a line under it and an outline button. */
.db-ph,.hd .db-ph{align-items:flex-start;flex-wrap:nowrap;margin-bottom:28px}
.db-ph>div:first-child{min-width:0}
.db-ph .eyebrow{display:none}
.db-ph h1,.hd .db-ph h1{font-size:clamp(28px,3vw,40px);font-weight:700;letter-spacing:-.025em;line-height:1.15;color:var(--fg)}
.db-ph p,.hd-sub{font-size:16px;color:var(--fg-2);margin-top:8px}
.hd-sub{gap:0}
.hd-pill,.hd-pill--todo,.hd-pill--ok{background:none!important;color:var(--fg-2)!important;padding:0;border-radius:0;font-size:16px;font-weight:400}
.hd-pill .ico{display:none}
.hd-pill::before{content:"·";margin:0 8px;color:var(--fg-3)}
.db-ph .ph__actions{flex:none;padding-top:4px;gap:12px}
.db-ph .ph__actions .btn{height:44px;padding:0 20px;font-size:15px;border-radius:10px}
.db-ph .ph__actions .btn .ico{display:none}
@media (max-width:760px){.db-ph,.hd .db-ph{flex-wrap:wrap}}

.db-tiles,.hd .db-tiles{gap:20px}
.db-tile,a.db-tile--go,.hd a.db-tile--go,a.db-tile--bad,a.db-tile--ok,a.db-tile--info,a.db-tile--warn{background:var(--surface)!important;border:1px solid var(--line)!important;
  border-radius:14px!important;box-shadow:none!important;padding:22px 24px 20px!important;gap:0!important;transform:none!important}
a.db-tile--go:hover,.hd a.db-tile--go:hover{border-color:color-mix(in srgb,var(--brand) 35%,var(--line))!important;box-shadow:0 1px 3px rgba(16,24,40,.06)!important}
.db-tile__hd .db-ico,.hd .db-tile__hd .db-ico{display:none!important}
.db-tile>span:first-child,.db-tile__hd,.hd .db-tile__hd{font-size:15px!important;font-weight:500!important;color:var(--fg-2)!important;gap:0!important}
.db-tile b,.hd a.db-tile--go b{font-size:40px!important;font-weight:600!important;letter-spacing:-.02em;line-height:1!important;color:var(--fg)!important;margin:18px 0 14px!important}
.db-tile b.is-bad,.db-tile--bad b,.hd .db-tile--bad b,.hd a.db-tile--bad b{color:var(--bad)!important}
.db-tile small,.hd .db-tile small{font-size:14px!important;color:var(--fg-2)!important;min-height:0!important}
.db-tile__go,.hd .db-tile__go{display:none!important}

.db-card,.hd .db-card,.hd .card,.hd .os-card,.hd .nextrun{border:1px solid var(--line)!important;border-radius:16px!important;box-shadow:none!important;background:var(--surface)!important;transform:none!important}
.hd .os-card:hover{border-color:color-mix(in srgb,var(--brand) 30%,var(--line))!important}
.db-card .card__hd,.hd .card__hd{padding:24px 28px 14px;border-bottom:0}
.db-card .card__hd h2,.hd .db-card .card__hd h2,.hd .card__hd h2{font-size:20px;font-weight:600;letter-spacing:-.01em}
.db-lk,.hd .card__hd a.linkbtn,.hd .card__hd>a:not(.btn){font-size:15px;font-weight:500;color:var(--link)}
.db-list,.hd .db-list{padding:0 20px 14px}
.db-list li+li{border-top:1px solid var(--line)}
.db-row,.hd .db-row{padding:16px 8px;border-radius:12px;gap:14px}
.hd .db-row:hover,.db-row:hover{background:var(--surface-2)}
.db-row b,.hd .db-row b{font-size:14px;font-weight:600;white-space:normal}
.db-row span:not(.st):not(.av):not(.db-cta):not(.hd-av),.hd .db-row span:not(.st):not(.av):not(.db-cta):not(.hd-av){font-size:12.5px;color:var(--fg-2);white-space:normal}
.db-row .db-ico,.hd .db-row .db-ico,.hd .db-list .db-ico,.hd-badge{width:44px!important;height:44px!important;border-radius:50%!important;box-shadow:none!important;background:var(--surface-2)!important;color:var(--fg-2)!important}
.hd-av{width:36px;height:36px;box-shadow:none;background:var(--surface-2);color:var(--fg-2);font-size:12px}
.hd-av i{display:none}
.db-cta{flex:none;display:inline-flex;align-items:center;height:38px;padding:0 18px;border:1px solid var(--line-2,var(--line));border-radius:10px;font-size:14.5px;font-weight:500;color:var(--fg);background:var(--surface)}
.db-row:hover .db-cta{border-color:var(--fg-3)}
.hd-empty,.db-empty{padding:44px 20px 48px}
.hd-empty .db-ico{display:none}
.hd-empty b{font-weight:400;color:var(--fg-2);font-size:16px}

.db-bars{padding:8px 28px 12px;gap:22px}
.db-bars li{font-size:16px;grid-template-columns:minmax(140px,220px) minmax(0,1fr) 32px;gap:20px}
.db-bars i{height:14px;background:var(--surface-2)}
.db-bars em{background:var(--brand)}
.db-bars b{font-size:16px;font-weight:600}
.db-foot{padding:6px 28px 24px;font-size:14px;color:var(--fg-2)}

.hd .os-card{padding:22px 24px 18px}
.hd .os-card__hd .eicon{display:none!important}
.hd .os-card__hd h2{font-size:16px;font-weight:600}
.hd .os-card__hd h2 a .ico{display:none}
.hd .os-big b{font-size:40px;font-weight:600;color:var(--fg)}
.hd .meter i{background:var(--brand)}
.hd .os-card__asof{border-top:0;padding-top:0}
/* clean look: the two middle cards share the width more evenly, and a row's status label goes under its text when the card is narrow */
.db-mid{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr)}
.db-row{flex-wrap:wrap}
.db-row>div{flex:1 1 180px}
.db-mid .db-row b,.db-bot .db-row b{font-size:14px}
@media (max-width:1100px){.db-mid,.db-bot{grid-template-columns:minmax(0,1fr)}}
.db-row>.st{margin-left:58px}
/* clean look: tiles and cards are wide rectangles, not squares (owner's request) */
.db-tile,a.db-tile--go,.hd a.db-tile--go,a.db-tile--bad,a.db-tile--ok,a.db-tile--info,a.db-tile--warn{padding:16px 22px 14px!important;min-height:0!important;aspect-ratio:auto!important}
.db-tile b,.hd a.db-tile--go b{font-size:34px!important;margin:8px 0 6px!important}
.db-tile small,.hd .db-tile small{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.os-card,.hd .os-card{min-height:0!important}
.hd .os-cards{grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}
.hd-empty,.db-empty{padding:22px 20px 26px!important}.db-empty .eicon,.hd-empty .db-ico{display:none!important}.db-card .card__hd,.hd .card__hd{padding-top:20px;padding-bottom:10px}

/* Every button turns very light purple on hover (owner's request, 2 Nov 2026), with dark purple text so it stays
   readable; danger buttons keep their red text. Disabled buttons don't change. */
:root{--hover-purple:#F1ECFA;--hover-purple-line:#D9CFEE;--hover-purple-ink:#4B2F9A}  /* light purple hover on everything clickable (owner request, 5 November 2026) */
.btn:not(:disabled):not([aria-disabled="true"]):hover,
.btn--primary:not(:disabled):hover,.btn--lemon:not(:disabled):hover,.btn--ghost:not(:disabled):hover,
.seg button:not([aria-pressed="true"]):not(:disabled):hover,.db-cta:hover,.db-row:hover .db-cta,.linkbtn.btn:hover{
  background:var(--hover-purple)!important;color:var(--brand)!important;border-color:var(--hover-purple-line)!important;box-shadow:none!important}
.btn--danger:not(:disabled):hover{background:var(--hover-purple)!important;color:var(--bad)!important;border-color:var(--hover-purple-line)!important}
.btn:not(:disabled):hover .ico{color:inherit}
/* clean look on narrow screens: tiles wrap to two per row before their text gets cut, and the "things need you" line
   drops under the date without a stray dot */
.db-tiles,.hd .db-tiles{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))!important}
.db-tile small,.hd .db-tile small{white-space:normal!important;overflow:visible!important}
.hd-sub{flex-wrap:wrap;row-gap:2px}
@media (max-width:1100px){.hd-pill::before{display:none}.hd-sub{flex-direction:column;align-items:flex-start}}
/* tiles: four in a row when the dashboard is wide enough, else two by two (never three plus one) */
.hd,.db-wrap{container-type:inline-size}
.db-tiles,.hd .db-tiles{grid-template-columns:repeat(4,minmax(0,1fr))!important}
@container (max-width:780px){.db-tiles,.hd .db-tiles{grid-template-columns:repeat(2,minmax(0,1fr))!important}}
@container (max-width:380px){.db-tiles,.hd .db-tiles{grid-template-columns:minmax(0,1fr)!important}}
.btn,.db-cta,.seg button{transition:background .15s,color .15s,border-color .15s,box-shadow .15s}

/* Help & Support (live): the conversation, system lines, internal notes and support access cards */
.sp-thread{list-style:none;margin:0;padding:8px 20px 16px;display:flex;flex-direction:column;gap:12px}
.sp-msg{border:1px solid var(--line);border-radius:12px;padding:12px 14px;background:var(--surface)}
.sp-msg--support{background:var(--hover-purple,#F1ECFA);border-color:var(--hover-purple-line,#D9CFEE)}
.sp-msg--int{background:var(--warn-bg);border-style:dashed}
.sp-msg__hd{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:13px}
.sp-msg__hd time,.sp-sys time{margin-left:auto;font-size:12px;color:var(--fg-3)}
.sp-msg p{margin:6px 0 0;font-size:14.5px;line-height:1.5;overflow-wrap:anywhere}
.sp-sys{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--fg-2);padding:0 4px}
.sp-sys span{display:inline-flex;align-items:center;gap:6px}
.sp-acc{border:1px solid var(--line);border-radius:12px;padding:12px 14px;display:flex;flex-direction:column;gap:10px}
.sp-acc__hd{display:flex;align-items:center;justify-content:space-between;gap:8px}
.sp-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 14px;border:1px solid var(--line);border-radius:12px;text-decoration:none;color:inherit}
.sp-row:hover{background:var(--hover-purple,#F1ECFA)}
.sp-row>div{display:flex;flex-direction:column;gap:2px;min-width:0}
.sp-row span{font-size:13px;color:var(--fg-2)}

/* Branding and communications (live): theme tiles and readability checks */
.br-ths{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.br-th{display:flex;align-items:center;gap:10px;padding:10px 12px;border:1px solid var(--line-2);border-radius:var(--r-md);background:var(--surface);cursor:pointer;text-align:left;font:inherit;color:var(--fg);min-height:48px}
.br-th b{font-size:13px;font-weight:600;flex:1;min-width:0}
.br-th.is-on{border-color:var(--brand);box-shadow:0 0 0 1px var(--brand)}
.br-th:disabled{cursor:default;opacity:.7}
.br-th:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.br-th__sw{display:flex;flex:none}
.br-th__sw i{width:16px;height:16px;border-radius:50%;box-shadow:0 0 0 2px #fff,0 0 0 3px var(--line-2);margin-right:-4px}
.br-th__sw--x{width:24px;height:24px;border-radius:50%;background:conic-gradient(#881337,#CA8A04,#166534,#1D4ED8,#6B21A8,#881337);color:#fff;align-items:center;justify-content:center}
.br-chk{list-style:none;margin:0 0 8px;padding:0;display:flex;flex-direction:column;gap:6px}
.br-chk li{display:grid;grid-template-columns:18px 1fr auto auto;gap:8px;align-items:center;font-size:13px}
.br-chk li.ok>svg{color:var(--ok)} .br-chk li.bad>svg{color:var(--bad)} .br-chk li.bad b{color:var(--bad)}
.br-chk .muted{font-size:12px}
.br-pv{position:sticky;top:16px}
@media (max-width:1100px){.br-pv{position:static}}

/* Branding preview: the employee app on an iPhone-shaped frame (19.5 : 9 screen, Dynamic Island, home indicator) */
.br-iphone{position:relative;width:268px;aspect-ratio:9/19.5;margin:0 auto;padding:11px;border-radius:50px;background:linear-gradient(145deg,#3a3d44,#1b1c20 45%,#2c2e33);box-shadow:inset 0 0 0 2px #55585f,0 18px 40px rgba(16,24,40,.22)}
.br-iphone__btn{position:absolute;width:3px;background:#2a2c31;border-radius:2px}
.br-iphone__btn--a{left:-3px;top:96px;height:26px}.br-iphone__btn--b{left:-3px;top:140px;height:46px}.br-iphone__btn--c{left:-3px;top:196px;height:46px}.br-iphone__btn--p{right:-3px;top:160px;height:72px}
.br-iphone__screen{position:relative;height:100%;border-radius:40px;overflow:hidden;display:flex;flex-direction:column;box-shadow:0 0 0 2px #000}
.br-iphone__status{position:relative;display:flex;align-items:center;justify-content:space-between;height:44px;padding:0 22px 0 28px;font-size:12.5px;color:#fff;background:#000;flex:none}
.br-iphone__status b{font-weight:600}
.br-iphone__island{position:absolute;left:50%;top:9px;transform:translateX(-50%);width:84px;height:24px;border-radius:14px;background:#000;box-shadow:0 0 0 1px #111}
.br-iphone__sig{display:flex;align-items:flex-end;gap:1.5px}
.br-iphone__sig>i{width:3px;background:#fff;border-radius:1px}
.br-iphone__sig>i:nth-child(1){height:4px}.br-iphone__sig>i:nth-child(2){height:6px}.br-iphone__sig>i:nth-child(3){height:8px}.br-iphone__sig>i:nth-child(4){height:10px;margin-right:4px}
.br-iphone__sig svg{margin-right:4px}
.br-iphone__bat{width:22px;height:11px;border:1px solid rgba(255,255,255,.6);border-radius:3px;padding:1px;position:relative}
.br-iphone__bat::after{content:"";position:absolute;right:-3px;top:3px;width:1.5px;height:4px;background:rgba(255,255,255,.6);border-radius:0 1px 1px 0}
.br-iphone__bat i{display:block;height:100%;width:80%;background:#fff;border-radius:1.5px}
.br-iphone__app{display:flex;align-items:center;gap:8px;padding:10px 14px;color:#fff;flex:none}
.br-iphone__app b{font-size:13.5px;font-weight:600;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.br-iphone__app .pv__logo{background:#fff;border-radius:6px;padding:2px}
.br-iphone__body{flex:1;display:flex;flex-direction:column;gap:9px;padding:12px;overflow:hidden}
.br-iphone__row{flex-direction:row!important;align-items:center;gap:10px!important;font-size:12.5px;font-weight:600;padding:10px 12px!important}
.br-iphone__row>span:nth-child(2){flex:1}
.br-iphone__tabs{display:flex;justify-content:space-around;padding:7px 6px 20px;background:rgba(255,255,255,.94);border-top:1px solid var(--line);color:#737D93;flex:none}
.br-iphone__tabs span{display:flex;flex-direction:column;align-items:center;gap:2px}
.br-iphone__tabs small{font-size:9.5px;font-weight:500}
.br-iphone__home{position:absolute;left:50%;bottom:7px;transform:translateX(-50%);width:96px;height:4px;border-radius:3px;background:#101828}
.alp-day{display:inline-flex;align-items:center;gap:6px;padding:7px 12px;border:1px solid var(--line-2);border-radius:999px;font-size:13px;cursor:pointer;background:var(--surface)}
.alp-day:has(input:checked){border-color:var(--brand);background:var(--hover-purple, #F1ECFA);font-weight:600}
.alp-day input{margin:0}

/* Province of employment questions (Payroll > Pay and tax setup) */
.poe{display:flex;flex-direction:column;gap:12px;padding:16px;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface-2)}
.poe__facts{margin:0}
.poe__result{display:flex;gap:10px;align-items:flex-start;padding:12px 14px;border-radius:var(--r-md);background:var(--ok-bg);color:var(--ok);border:1px solid var(--ok-line)}
.poe__result b{display:block;color:var(--fg);font-size:14px}
.poe__result span{color:var(--fg-2);font-size:13px}
.poe__result--wait{background:var(--info-bg);color:var(--info);border-color:var(--info-line)}
.poe__result--wait span{color:var(--info)}

/* The three provinces on the employee profile */
.prov3{list-style:none;margin:0;padding:4px 20px 16px;display:flex;flex-direction:column}
.prov3__row{display:flex;gap:12px;align-items:flex-start;padding:12px 0;border-top:1px solid var(--line)}
.prov3__row:first-child{border-top:0}
.prov3__row b{display:block;font-size:15px;font-weight:600;margin:2px 0}
.prov3__lbl{display:block;font-size:12px;color:var(--fg-3);text-transform:uppercase;letter-spacing:.04em;font-family:var(--mono)}
.prov3__note{display:block;font-size:12.5px;color:var(--fg-2)}

/* Employee web portal (prototype): the phone screens in a desktop layout */
.eweb .etop{display:none}
.eweb__main{max-width:1080px}
.eweb .ebody{padding:0 0 40px;gap:20px}
.eweb .ecard{border-radius:var(--r-lg);box-shadow:var(--sh-1)}
.eweb .ehello{font-size:var(--t-3xl)}
.eweb .paycard{border-radius:var(--r-xl);padding:28px}
.eweb .ee-powered{justify-content:flex-start;padding:24px 0 0}
.eweb__layer{position:fixed;inset:0;pointer-events:none;z-index:60}
.eweb__layer>*{pointer-events:auto}
.eweb .sheet-ovl{position:fixed;align-items:center;justify-content:center;padding:24px}
.eweb .sheet{max-width:560px;border-radius:20px;max-height:85vh}
.eweb .sheet__grab{display:none}
.eweb .screen{padding-top:0}
/* wide screens: Home as two balanced columns (greeting across the top); other pages keep one readable column */
.eweb__main{container-type:inline-size}
@container (min-width:860px){
  .eweb--home .ebody{display:block;columns:2;column-gap:24px}
  .eweb--home .ebody>*{break-inside:avoid;margin-bottom:20px;display:block}
  .eweb--home .ebody>:first-child{column-span:all}
  .eweb--home .ebody>.paycard{display:flex}
}
/* Pay on the web: the payslip list beside the selected payslip */
@container (min-width:860px){
  .eweb-split{display:grid;grid-template-columns:minmax(300px,380px) minmax(0,1fr);gap:24px;align-items:start}
  .eweb-split__detail .backbtn{display:none}
}
/* pages other than Home and Pay keep a comfortable reading width */
.eweb__main:not(.eweb--home):not(.eweb--pay)>*{max-width:820px}
.eweb--top .ehead .backbtn{display:none}  /* the side menu replaces the phone's back arrow on top-level pages */
/* Get the mobile app (employee web portal) */
.appbadge{display:inline-flex;gap:9px;align-items:center;background:#000;color:#fff;border:1px solid #A6A6A6;border-radius:9px;padding:6px 14px 6px 11px;text-decoration:none;min-height:46px}
.appbadge__mark{width:26px;height:26px;flex:none}
.appbadge--android .appbadge__mark{width:24px;height:24px}
.appbadge span{display:flex;flex-direction:column;line-height:1.05;font-family:-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif}
.appbadge small{font-size:10.5px;font-weight:500;letter-spacing:.01em}
.appbadge--android small{text-transform:uppercase;font-size:9.5px;letter-spacing:.04em}
.appbadge b{font-size:19px;font-weight:500;letter-spacing:-.01em}
.appbadge:hover{background:#1a1a1a}
.appbadge:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.eew-banner{display:flex;align-items:center;gap:16px;flex-wrap:wrap;padding:16px 18px;margin-bottom:20px;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface);box-shadow:var(--sh-1)}
.eew-banner__tx{flex:1;min-width:220px;display:flex;flex-direction:column;gap:2px}
.eew-banner__tx b{font-size:15px}
.eew-banner__tx span{color:var(--fg-2);font-size:13px}
.eew-getapp{display:flex;align-items:center;gap:10px;margin-top:auto;padding:10px 12px;border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface-2);color:var(--fg);cursor:pointer;text-align:left;font:inherit}
.eew-getapp span{display:flex;flex-direction:column}
.eew-getapp b{font-size:13px;font-weight:600}
.eew-getapp small{font-size:11.5px;color:var(--fg-3)}
.eew-getapp:hover{background:var(--hover-purple,#F1ECFA)}
.eew-app__list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.eew-app__list li{display:flex;gap:10px;align-items:center;font-size:14px}
/* live employee portal: cards that open a page */
.ecard--link{display:block;text-decoration:none;color:inherit}
.ecard--link:hover{border-color:var(--line-2);background:var(--hover-purple,#F1ECFA)}
/* Count boxes everywhere (dashboards, HR and time dashboards, Help & Support): the slim rectangle from the console's
   Organizations page (owner, 5 Nov 2026): the number above its label, a thin line on top, light mint on hover.
   Comes last and wins over the earlier dashboard layers. */
.db-tiles,.hd .db-tiles{gap:12px!important}
.db-tile,a.db-tile--go,.hd a.db-tile--go,a.db-tile--bad,a.db-tile--ok,a.db-tile--info,a.db-tile--warn,button.db-tile{display:flex!important;flex-direction:column!important;align-items:flex-start!important;gap:1px!important;padding:10px 14px!important;min-height:0!important;aspect-ratio:auto!important;background:var(--surface)!important;border:1px solid var(--line)!important;border-top:3px solid var(--surface-3)!important;border-radius:10px!important;box-shadow:none!important;transition:background .15s}
.db-tile:hover,a.db-tile--go:hover,.hd a.db-tile--go:hover,button.db-tile:hover{background:var(--hover-purple)!important;transform:none!important}
.db-tile b,.hd a.db-tile--go b{order:-1;font-size:22px!important;font-weight:600!important;line-height:1.1!important;margin:0!important;letter-spacing:-.02em}
.db-tile>span:first-child,.db-tile__hd,.hd .db-tile__hd{font-size:12.5px!important;font-weight:500!important;color:var(--fg-2)!important}
.db-tile small,.hd .db-tile small{font-size:11.5px!important;color:var(--fg-3)!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.db-tile--bad,a.db-tile--bad,.db-tile:has(b.is-bad){border-top-color:var(--bad-line)!important}

/* a sign-out button beside the person's name at the bottom of every sidebar (owner, 5 Nov 2026) */
.side__foot-row{display:flex;align-items:center;gap:4px;margin-top:auto;border-top:1px solid var(--line);padding-top:12px}
.side__foot-row .side__foot{margin-top:0;border-top:0;padding-top:0}
.side__foot-row .side__foot{flex:1;min-width:0}

/* iPhones on the website, like the owner's reference (5 Nov 2026): a thin even black border, a polished metal edge,
   a Dynamic Island with its camera lens, and Wi-Fi in the status bar */
.pvp{border-width:7px!important;border-color:#0B0B0C!important;border-radius:44px!important;
  box-shadow:inset 0 0 0 1px #000,0 0 0 1px #3A3D42,0 0 0 2.5px #121315,0 0 0 3.5px #6E737B,0 24px 40px -22px rgba(16,24,40,.45)!important}
.pvp--bare{border:0!important;box-shadow:none!important;border-radius:37px!important}
.pvp::before{left:-11px;top:78px;width:3px;background:linear-gradient(90deg,#2B2E33,#7A7F87)}
.pvp::after{right:-11px;top:118px;width:3px;background:linear-gradient(90deg,#7A7F87,#2B2E33)}
.pvp--bare::before{left:-11px}.pvp--bare::after{right:-11px}
.pvp__notch{position:relative;width:72px;height:21px;border-radius:12px;background:#000}
.pvp__notch::after{content:"";position:absolute;right:7px;top:50%;width:7px;height:7px;border-radius:50%;transform:translateY(-50%);background:radial-gradient(circle at 35% 35%,#3B4A7A 0%,#141826 55%,#05060A 100%)}
.mx__frame[data-tone="device"]{background:#0B0B0C!important;border-color:#0B0B0C!important;
  box-shadow:inset 0 0 0 1px #000,0 0 0 1px #3A3D42,0 0 0 2.5px #121315,0 0 0 3.5px #6E737B,0 28px 60px -30px rgba(16,24,40,.55)!important}
.p3d__phone{padding:8px!important;border-radius:52px!important;background:#0B0B0C!important;
  box-shadow:inset 0 0 0 1px #000,0 0 0 1px #3A3D42,0 0 0 2.5px #121315,0 0 0 4px #6E737B,0 60px 90px -40px rgba(16,24,40,.55)!important}
.p3d__screen,.p3d__glare{inset:8px!important;border-radius:45px!important}
.p3d__key{background:linear-gradient(90deg,#2B2E33,#7A7F87)!important}
.p3d__island::after{content:"";position:absolute;right:9px;top:50%;width:10px;height:10px;border-radius:50%;transform:translateY(-50%);background:radial-gradient(circle at 35% 35%,#3B4A7A 0%,#141826 55%,#05060A 100%)}

/* the employee app on the website: one iPhone, four buttons switch its screen */
.ee-tabs{display:flex;flex-wrap:wrap;justify-content:center;margin:18px auto 0;max-width:100%}
.ee-tabs button[aria-pressed="true"]{background:var(--surface);color:var(--fg)}
.ee-cap{text-align:center;font-size:13.5px;color:var(--lp-text-2,var(--fg-2));margin:10px auto 0;max-width:40ch}

/* Payroll page: "by hand" vs "with Nyro Workforce" comparison cards */
.lpp-vs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;margin:-8px 0 56px}
.lpp-vs__card{border-radius:20px;padding:36px 36px 32px}
.lpp-vs__card--no{background:#F4F5F6;border:1px solid var(--lp-line)}
.lpp-vs__card--yes{background:#fff;border:2px solid var(--lemon);box-shadow:0 12px 32px rgba(47,50,55,.08)}
.lpp-vs__card h3{font-size:clamp(22px,2.2vw,28px);line-height:1.25;text-align:center;margin:0 0 28px;color:var(--brand);letter-spacing:-.01em}
.lpp-vs__card ul{list-style:none;margin:0;padding:0;display:grid;gap:22px}
.lpp-vs__card li{display:grid;grid-template-columns:28px minmax(0,1fr);gap:14px;align-items:start}
.lpp-vs__card li b{display:block;font-size:17px;font-weight:600;color:var(--brand);margin-bottom:4px}
.lpp-vs__card li span{color:var(--lp-text);font-size:15px;line-height:1.55}
.lpp-vs__ic{width:26px;height:26px;padding:4px;border-radius:50%;box-sizing:border-box}
.lpp-vs__card--no .lpp-vs__ic{color:#5A5F67;background:#E4E6E9}
.lpp-vs__card--yes .lpp-vs__ic{color:var(--mint-ink);background:var(--lemon)}
@media (min-width:861px){.lpp-vs__card h3{min-height:2.5em;display:flex;align-items:center;justify-content:center}}
@media (max-width:860px){.lpp-vs{grid-template-columns:minmax(0,1fr)}.lpp-vs__card{padding:28px 22px}}

/* Careers page */
.lp-jobs{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.lp-job{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:22px 24px;border:1px solid var(--lp-line);border-radius:16px;background:#fff}
.lp-job h3{margin:0 0 6px;font-size:19px;color:var(--brand)}
.lp-job p{margin:0;color:var(--lp-text)}
.lp-job__meta{display:flex;align-items:center;gap:6px;font-size:14px;margin-bottom:8px!important}
.lp-jobs__none{display:flex;gap:16px;align-items:flex-start;padding:24px;border-radius:16px;background:var(--lemon-soft);color:var(--mint-ink)}
.lp-jobs__none .ico{flex:none;width:26px;height:26px}
.lp-jobs__none b{display:block;font-size:17px;margin-bottom:4px;color:var(--brand)}
.lp-jobs__none p{margin:0;color:var(--lp-text)}
@media (max-width:640px){.lp-job{flex-direction:column;align-items:flex-start}}
.lp-job{align-items:flex-start}
.lp-job__body p{margin:0 0 8px}
.lp-job__body p:last-child{margin:0}
/* Careers: job card and apply form */
.lp-job{display:block}
.lp-job__top{display:flex;justify-content:space-between;align-items:flex-start;gap:20px}
.lp-job__meta{flex-wrap:wrap}
.lp-job__body{margin-top:6px}
.lp-job__notes{margin:12px 0 0!important;font-size:13.5px;color:var(--lp-text);opacity:.85}
.lp-job__priv{display:flex;gap:8px;align-items:flex-start;font-size:14px;color:var(--lp-text)}
.lp-apply{margin-top:18px;padding:22px;border-radius:14px;background:#F7F8F9;border:1px solid var(--lp-line);display:flex;flex-direction:column;gap:12px}
.lp-apply h4{margin:0;font-size:17px;color:var(--brand)}
.lp-apply__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.lp-apply .field{margin:0}
.lp-apply--done{flex-direction:row;align-items:flex-start;background:var(--lemon-soft);border-color:var(--lemon);color:var(--mint-ink)}
.lp-apply--done b{color:var(--brand)}
.lp-apply--done p{margin:4px 0 0;color:var(--lp-text)}
.lp-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.jp-msg{padding:12px 14px;border-radius:10px;background:var(--bg-2,#F4F5F6)}
.jp-msg p{margin:0 0 6px}.jp-msg p:last-child{margin:0}
@media (max-width:640px){.lp-job__top{flex-direction:column}.lp-apply__grid{grid-template-columns:minmax(0,1fr)}}
.pr-disc--fees{margin-top:12px;padding:14px 16px;border-radius:12px;background:var(--lemon-soft);color:var(--lp-text)}
.pr-disc--fees b{color:var(--brand)}
.pl-map{min-height:300px}
.loc-switch b{font-size:15px}
.loc-rules{list-style:none;margin:0;padding:0;display:grid;gap:6px;font-size:13px;color:var(--fg-2,#43474E)}
.loc-rules li{display:flex;gap:8px;align-items:flex-start}
.loc-rules .ico{flex:none;margin-top:2px;color:var(--mint-ink,#174F39)}
.ph-code{display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.ph-code__v{font-family:var(--mono,ui-monospace,monospace);font-size:24px;letter-spacing:4px;padding:8px 14px;border:1px solid var(--line);border-radius:10px;background:var(--lemon-soft,#DDF4EA);color:var(--mint-ink,#174F39)}
.ph-steps{margin:0;padding-left:20px;font-size:13.5px;display:grid;gap:4px}
.ph-list{list-style:none;margin:8px 0 0;padding:0}
.ph-list li{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:8px 0;border-top:1px solid var(--line);font-size:13.5px}

/* file viewer (td1Open): uploaded TD1s, documents and course files open on the page */
.fv{z-index:80}
.fv__win{width:min(900px,100%);height:min(88vh,1000px);background:var(--surface);border-radius:var(--r-xl);box-shadow:var(--sh-3);display:flex;flex-direction:column;overflow:hidden}
.fv__hd{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 16px;border-bottom:1px solid var(--line)}
.fv__hd b{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fv__bd{flex:1;overflow:auto;background:var(--surface-2);display:flex;align-items:flex-start;justify-content:center}
.fv__bd img{max-width:100%;height:auto;display:block}
.fv__bd iframe{width:100%;height:100%;border:0;background:#fff}

/* pay run stages (rvPage): four bars like the dashboard's next pay run; green done, purple now, grey to come */
.runhead__sub{color:var(--fg-2);margin-top:4px}
.rstage{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.rstage li{display:flex;flex-direction:column;gap:8px;min-width:0}
.rstage__bar{height:6px;border-radius:3px;background:var(--line)}
.rstage li.done .rstage__bar{background:var(--ok)}
.rstage li.now .rstage__bar{background:var(--purple)}
.rstage__lbl{font-size:12.5px;color:var(--fg-3)}
.rstage li.done .rstage__lbl{color:var(--fg-2)}
.rstage li.now .rstage__lbl{color:var(--fg);font-weight:600}
@media (max-width:600px){.runhead .nextrun__dates{grid-template-columns:1fr}}

/* employee web: the notification bell at the top right (meBell) */
.eweb-bar{display:flex;justify-content:flex-end;padding:14px 28px 0;position:relative;z-index:20}
.mtop .eweb-bellwrap{margin-left:auto}
.eweb-bellwrap{position:relative}
.eweb-bell{position:relative;width:40px;height:40px;border-radius:50%;border:1px solid var(--line);background:var(--surface);display:grid;place-items:center;cursor:pointer;color:var(--fg)}
.eweb-bell:hover{background:var(--surface-2)}
.eweb-bell__n{position:absolute;top:-4px;right:-4px;min-width:18px;height:18px;padding:0 4px;border-radius:9px;background:var(--bad);color:#fff;font-size:10.5px;font-weight:700;display:grid;place-items:center;border:2px solid var(--bg)}
.eweb-bell__n--in{position:static;border:0}
.eweb-bell__pop{position:absolute;right:0;top:48px;width:min(380px,calc(100vw - 32px));background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh-3);z-index:50;overflow:hidden}
.eweb-bell__hd{display:flex;justify-content:space-between;align-items:center;padding:12px 14px;border-bottom:1px solid var(--line)}
.eweb-bell__bd{max-height:min(70vh,520px);overflow:auto;padding:6px}
.eweb-bell__lbl{font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--fg-3);padding:10px 12px 4px}
@media (max-width:1100px){.eweb-bar{display:none}}
@media (min-width:1101px){.mtop .eweb-bellwrap{display:none}}
.eweb-bell__pop a.db-row{text-decoration:none;color:inherit}
.eweb-bell__pop .db-row>div b{font-weight:600}
.eweb-bell__pop .db-row>div span{display:block;font-size:12.5px;color:var(--fg-3)}
.eweb-bell__pop .db-row>span.eweb-bell__n--in{position:static;border:0;color:#fff !important;font-size:11px !important;font-weight:700;overflow:visible;min-width:22px;height:22px;border-radius:11px;flex:none}

/* employee web: Team approvals (myTeamAp) */
.ap-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.ap-item{display:flex;flex-direction:column;gap:3px;padding:12px 0;border-top:1px solid var(--line)}
.ap-item:first-child{border-top:0;padding-top:0}
.tag--firm{display:inline-flex;align-items:center;gap:4px;margin-top:4px;background:var(--lemon-soft);color:var(--mint-ink)}

/* Intuit's official Connect to QuickBooks button (qboButton): the provided images at their own size */
.qbo-c2qb{align-self:flex-start;padding:0;border:0;background:none;cursor:pointer;line-height:0;border-radius:4px}
.qbo-c2qb img{display:block;max-width:none}
.qbo-c2qb__hover{display:none!important}
.qbo-c2qb:hover .qbo-c2qb__base,.qbo-c2qb:focus-visible .qbo-c2qb__base{display:none!important}
.qbo-c2qb:hover .qbo-c2qb__hover,.qbo-c2qb:focus-visible .qbo-c2qb__hover{display:block!important}
.qbo-c2qb:focus-visible{outline:2px solid var(--focus,#2563eb);outline-offset:3px}

/* Admin dashboard boxes in solid teal blue with white text (owner choice C, 5 November 2026) */
.hd .os-card{background:#0E7490!important;border:1px solid #0E7490!important;color:#fff}
.hd .os-card:hover{border-color:#0B5E75!important}
.hd .os-card h2,.hd .os-card h2 a,.hd .os-card .os-card__p,.hd .os-card .os-card__list,.hd .os-card .os-card__sub,.hd .os-card .os-card__asof,
.hd .os-card .os-card__bd,.hd .os-card .os-card__bd *:not(.st):not(.st *):not(.tag):not(.badge):not(.pill):not(.btn):not(.btn *):not([class*="chip"]):not([class*="chip"] *){color:#fff!important}
.hd .os-card a:not(.btn){color:#fff!important;text-decoration-color:rgba(255,255,255,.6)}
.hd .os-card .os-card__list li::before{background:rgba(255,255,255,.6)}
.hd .os-card .os-card__asof{border-top-color:rgba(255,255,255,.25);color:rgba(255,255,255,.8)!important}
.hd .os-card .meter{background:rgba(255,255,255,.25)}
.hd .os-card .meter>*{background:#fff}
.hd .os-card .btn{background:#6A4FB3!important;color:#fff!important;border-color:#6A4FB3!important}
.hd .os-card .btn:hover{background:#F1ECFA!important;border-color:#D9CFEE!important;color:#4B2F9A!important}
/* Actions requiring attention in the same solid teal; the action to click is purple (owner request, 5 November 2026) */
.hd .card:has(> .os-acts){background:#0E7490!important;border-color:#0E7490!important;color:#fff}
.hd .card:has(> .os-acts) h2,.hd .card:has(> .os-acts) .muted,.hd .card:has(> .os-acts) .os-act__tx,.hd .card:has(> .os-acts) .os-act__tx *{color:#fff!important}
.hd .card:has(> .os-acts) .muted,.hd .card:has(> .os-acts) .os-act__tx span{color:rgba(255,255,255,.82)!important}
.hd .card:has(> .os-acts) .os-act{border-color:rgba(255,255,255,.22)!important}
.hd .card:has(> .os-acts) .hd-badge{background:rgba(255,255,255,.16)!important;color:#fff!important}
.hd .card:has(> .os-acts) .hm-n{background:#fff;color:#0B3D4A}
.hd .card:has(> .os-acts) .os-act .btn{background:#6A4FB3!important;border-color:#6A4FB3!important;color:#fff!important}
.hd .card:has(> .os-acts) .os-act .btn:hover{background:#F1ECFA!important;border-color:#D9CFEE!important;color:#4B2F9A!important}

/* Employee screens look like the phone app (owner choice, 5 November 2026): plain white boxes with dark text, only
   the next pay box solid teal, buttons and links teal blue, light purple on hover. Hover elsewhere stays light purple. */
.ebody .paycard{background:#0E7490!important}
.eweb .btn--primary,.eweb--home .btn,.ebody .btn--primary,.ebody .paycard .btn{background:#0E7490!important;border-color:#0E7490!important;color:#fff!important}
.eweb .btn--primary:hover,.eweb--home .btn:hover,.ebody .btn--primary:hover,.ebody .paycard .btn:hover{background:#F1ECFA!important;border-color:#D9CFEE!important;color:#4B2F9A!important}
.eweb--home .btn svg.ico,.ebody .btn--primary svg.ico{color:currentColor}
.eweb .main a:not(.btn):not(.todo__item):not(.ecard):not(.nav a),.ebody a:not(.btn):not(.todo__item):not(.ecard),.eweb .linkbtn,.ebody .linkbtn{color:#0E7490}
.ebody .todo__item:hover{background:#F1ECFA}
.ebody .todo__item:hover *{color:#4B2F9A}
.hd .os-card .btn:hover svg,.hd .os-act .btn:hover svg{color:#4B2F9A}
.btn.ta-tap{background:#0E7490!important;border-color:#0E7490!important;color:#fff!important}
.btn.ta-tap:hover{background:#F1ECFA!important;border-color:#D9CFEE!important;color:#4B2F9A!important}
.swipe__track:not(.swipe__track--out) .swipe__knob{background:#D4C8F2;color:#3E2585}
.swipe__track:not(.swipe__track--out) .swipe__fill{background:rgba(185,168,236,.4)}
/* the clock-in knob in the website's phone pictures too: light purple, not mint */
.pvp__knob,.p3s__knob{background:#D4C8F2!important;color:#3E2585!important}
.p3s__fill{background:color-mix(in srgb,#D4C8F2 45%,var(--brand))!important}

/* Website phone pictures the same size as the branding preview phone: 268 x 581 with the frame (owner request,
   5 November 2026); the tab bar sits at the bottom of the screen */
.mx__l--time,.mx__l--compact,.mx__l--leave,.mx__l--access{width:254px}
.mx .pvp--bare{width:254px!important;height:567px;max-width:none}
.mx .pvp--bare .pvp__nav{margin-top:auto}
@media (max-width:420px){.mx__l--time,.mx__l--compact,.mx__l--leave,.mx__l--access{width:236px}.mx .pvp--bare{width:236px!important;height:527px}}

/* Website landing page (owner request, 5 November 2026): the earlier dark grey look with its purple tints, but teal
   blue where it had mint. White text on teal buttons; a lighter teal for words on the dark background. */
.lp[data-dir="d"] .lpd-hero .lpd-h1b{color:#5BC0DB!important}
.lp[data-dir="d"] .lpd-hero .lp-btn,.lp[data-dir="d"] .lp-final__copy .lp-btn,.lp[data-dir="d"] .lpp-next__box .lp-btn{color:#fff!important}
.lp[data-dir="d"] .lpd-hero .lp-btn svg.ico,.lp[data-dir="d"] .lp-final__copy .lp-btn svg.ico,.lp[data-dir="d"] .lpp-next__box .lp-btn svg.ico{background:#fff!important;color:#0E7490!important}
.lp .lpp-vs__card--yes{border-color:#0E7490}
.lp .lpp-vs__card--yes .lpp-vs__ic{color:#fff;background:#0E7490}
.lp .lp-jobs__none,.lp .lp-apply--done{background:#E6F4F8;border-color:#9FCBD6;color:#0B3D4A}
.lp[data-dir="d"] .lpd-hero .lp-btn:hover,.lp[data-dir="d"] .lp-final__copy .lp-btn:hover,.lp[data-dir="d"] .lpp-next__box .lp-btn:hover{background:#F1ECFA!important;border-color:#F1ECFA!important;color:#4B2F9A!important}

/* Sign-up pages, option A (owner choice, 5 November 2026): a dark welcome panel on the left like the website's top
   section (purple glow, teal accents, step list), and the form in a white card on a soft grey page */
.ob--su{grid-template-columns:400px minmax(0,1fr);background:#F4F5F6}
.ob--su .ob__rail{position:sticky;overflow:hidden;background:radial-gradient(60% 45% at 85% 30%,rgba(160,118,240,.28) 0%,rgba(160,118,240,0) 70%),linear-gradient(165deg,#26292E 0%,#1C1E22 55%,#16171A 100%);color:#CFC6E3;border-right:0;padding:32px 36px;gap:30px}
.ob--su .ob__rail .logo,.ob--su .ob__rail .logo b{color:#fff}
.ob--su .ob__rail .logo small{color:#B9AED3}
.ob--su .ob__rail .logo b span{color:#C4B5F5}
.su-wel__h{margin:6px 0 0;font-size:30px;line-height:1.15;font-weight:600;letter-spacing:-.025em;color:#fff}
.su-wel__h span{color:#5BC0DB}
.su-wel__l{list-style:none;margin:18px 0 0;padding:0;display:flex;flex-direction:column;gap:10px;font-size:14px;color:#E3DDF0}
.su-wel__l li{display:flex;gap:10px;align-items:center}
.su-wel__l .ico{flex:none;width:20px;height:20px;padding:3px;border-radius:50%;background:rgba(91,192,219,.18);color:#5BC0DB;stroke-width:3}
.ob--su .obsteps{gap:2px;padding-top:4px;border-top:1px solid rgba(255,255,255,.1)}
.ob--su .obsteps li{color:#B9AED3;padding:10px 12px}
.ob--su .obsteps li.now{background:rgba(255,255,255,.08);color:#fff}
.ob--su .obsteps li.done{color:#E3DDF0}
.ob--su .obsteps i{border-color:rgba(255,255,255,.3)}
.ob--su .obsteps li.now i{border-color:#5BC0DB;box-shadow:0 0 0 3px rgba(91,192,219,.18)}
.ob--su .obsteps li.done i{background:#0E7490;border-color:#0E7490;color:#fff}
.ob--su .ws-railsum{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1)}
.ob--su .ws-railsum .eyebrow{color:#B9AED3}
.ob--su .ob__co{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.12);color:#CFC6E3}
.ob--su .ob__co b{color:#fff}
.ob--su .ob__help{color:#B9AED3}
.ob--su .ob__help b{color:#fff}
.ob--su .ob__help a{color:#5BC0DB}
.ob--su .ob__main{padding:56px 40px 80px;align-items:flex-start}
.ob--su .ob__card{max-width:660px;background:#fff;border-radius:20px;padding:36px 40px;box-shadow:0 1px 2px rgba(16,24,40,.05),0 18px 44px -18px rgba(16,24,40,.18);border:1px solid #E7E9EC}
.ob--su .ob__card h1{font-size:34px}
.ob--su .dg-entry{background:#F7FAFB;border-color:#E1ECEF}
.ob--su .dg-entry .eyebrow{color:#0E7490}
.ob--su .dg-entry .seg{background:transparent;gap:8px;padding:0}
.ob--su .dg-entry .seg button{border:1.5px solid #E1E3E5;background:#fff;border-radius:12px;padding:10px 16px;font-weight:500}
.ob--su .dg-entry .seg button[aria-pressed="true"]{border-color:#0E7490;background:#EEF8FA;color:#0B3D4A;box-shadow:none}
.ob--su .input:focus,.ob--su .select:focus{border-color:#0E7490;box-shadow:0 0 0 3px rgba(14,116,144,.15)}
.ob--su .why{background:#EEF8FA;color:#0B3D4A;border-radius:12px}
.ob--su .ob__foot .btn--primary{background:#0E7490;border-color:#0E7490;color:#fff;min-width:180px}
.ob--su .ob__foot .btn--primary:hover{background:#F1ECFA!important;border-color:#D9CFEE!important;color:#4B2F9A!important}
@media (max-width:1100px){.ob--su{grid-template-columns:320px minmax(0,1fr)}.su-wel__h{font-size:24px}.ob--su .ob__card{padding:28px 24px}}
@media (max-width:900px){.ob--su{grid-template-columns:minmax(0,1fr)}.ob--su .ob__main{padding:16px 12px 56px}.ob--su .ob__card{padding:22px 18px;border-radius:16px}}

/* Typography for the whole of Nyro Workforce (owner decision, 5 November 2026): Geist SemiBold for headings, Inter for
   everything else. Page headings 28 to 32px, section headings 20 to 24px, content 14 to 16px, form labels Inter
   Medium 13 to 14px, buttons Inter SemiBold 14px, tables and reports 13 to 14px. Labels in capitals keep Geist Mono. */
:root{--sans:"Inter",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;--head:"Geist","Inter",ui-sans-serif,system-ui,sans-serif}
body{font-family:var(--sans);font-size:14.5px}
h1,h2,h3,.lp h1,.lp h2,.lp h3{font-family:var(--head);font-weight:600}
.lp{--lp-display:var(--head)}
.main h1,.ph h1,.db-ph h1,.hd h1,.ob__card h1,.ws-card h1{font-size:30px;letter-spacing:-.02em;line-height:1.2}
.main h2,.card__hd h2,.ecard__hd h3,.ob__card h2,.sec-h,.os-card__hd h2{font-size:21px;letter-spacing:-.01em;line-height:1.3}
.card__hd h2,.os-card__hd h2,.ecard__hd h3{font-size:20px}
h1{font-size:28px}
h3{font-size:17px}
label,.lbl,.field>label,.field .lbl,legend.lbl{font-family:var(--sans);font-weight:500;font-size:13.5px}
.btn{font-family:var(--sans);font-weight:600;font-size:14px}
.btn--sm{font-size:13px}
.btn--lg{font-size:14px}
.tbl,.tbl th,.tbl td{font-family:var(--sans);font-size:13.5px}
.tbl th{font-weight:500}
input,select,textarea,button{font-family:var(--sans)}

/* "Add employee" and "New notice" buttons in teal blue (owner requests, 5 November 2026); light purple on hover like everything else */
.btn[data-a="ws-em-add"],.btn[data-a="ws-em-add-go"],.btn[data-a="nt-new"],.btn[data-a="ho-nt-new"]{background:#0E7490!important;border-color:#0E7490!important;color:#fff!important}
.btn[data-a="ws-em-add"]:not(:disabled):hover,.btn[data-a="ws-em-add-go"]:not(:disabled):hover,.btn[data-a="nt-new"]:not(:disabled):hover,.btn[data-a="ho-nt-new"]:not(:disabled):hover{background:#F1ECFA!important;border-color:#D9CFEE!important;color:#4B2F9A!important}

/* Every main button is teal blue (owner request, 5 November 2026); light purple on hover comes from the shared
   hover rule. The admin dashboard's boxes keep their purple buttons, as the owner chose. */
.btn.btn--primary,.stsign__card .btn.btn--primary,.rp-tray .btn.btn--primary{background:#0E7490;border-color:#0E7490;color:#fff}
.btn.btn--primary:disabled,.btn.btn--primary:disabled:hover,.btn.btn--primary[aria-disabled="true"]{background:#0E7490!important;border-color:#0E7490!important;color:#fff!important;opacity:.5}

/* Dashboard columns that stack their own boxes (payroll dashboard, 5 November 2026) */
.db-col{display:flex;flex-direction:column;gap:20px;min-width:0}
.db-bot:empty{display:none}
.db-more{padding:10px 20px 14px;border-top:1px solid var(--line)}
.db-more .linkbtn{color:#0E7490;font-weight:600}
/* The pay run date boxes in teal blue with white text (owner request, 5 November 2026) */
.nextrun .datebox{background:#0E7490!important;border-color:#0E7490!important;color:#fff}
.nextrun .datebox span{color:rgba(255,255,255,.85)!important}
.nextrun .datebox b{color:#fff!important}

/* Organization chart in the owner's chosen design (5 November 2026): a top-to-bottom tree of cards on a light dotted
   canvas, joined by lines; teal status label, a menu, a dark pill with the number of direct reports */
.ocx{border:1px solid var(--line);border-radius:16px;background:#fff;overflow:hidden}
.ocx-bar{display:flex;align-items:center;gap:6px;padding:10px 14px;border-bottom:1px solid var(--line)}
.ocx-zb{width:32px;height:32px;display:grid;place-items:center;border:1px solid var(--line);border-radius:8px;background:#fff;cursor:pointer;color:var(--fg-2)}
.ocx-zb:hover{background:#F1ECFA;border-color:#D9CFEE;color:#4B2F9A}
.ocx-zb .ico{width:16px;height:16px}
.ocx-zv{min-width:44px;text-align:center;font-size:13px;color:var(--fg-2)}
.ocx-sp{flex:1}
.ocx-canvas{overflow:auto;max-height:72vh;min-height:360px;background-color:#F6F7F8;background-image:radial-gradient(#D9DDE2 1px,transparent 1px);background-size:18px 18px;padding:28px 24px 40px}
.ocx-zoom{transform-origin:top center;width:max-content;min-width:100%;transition:transform .15s}
.ocx-tree,.ocx-tree ul{list-style:none;margin:0;padding:0;display:flex;justify-content:center}
.ocx-tree ul{padding-top:28px;position:relative}
.ocx-tree li{position:relative;padding:28px 12px 0;display:flex;flex-direction:column;align-items:center}
.ocx-tree>li{padding-top:0}
.ocx-tree li::before,.ocx-tree li::after{content:"";position:absolute;top:0;width:50%;height:28px;border-top:1.5px solid #9AA3AD}
.ocx-tree li::before{right:50%}
.ocx-tree li::after{left:50%;border-left:1.5px solid #9AA3AD}
.ocx-tree li:only-child::before,.ocx-tree li:only-child::after{display:none}
.ocx-tree li:only-child{padding-top:0}
.ocx-tree li:first-child::before,.ocx-tree li:last-child::after{border-top:0}
.ocx-tree li:last-child::before{border-right:1.5px solid #9AA3AD;border-radius:0 8px 0 0}
.ocx-tree li:first-child::after{border-radius:8px 0 0 0}
.ocx-tree>li::before,.ocx-tree>li::after{display:none}
.ocx-tree ul::before{content:"";position:absolute;top:0;left:50%;height:28px;border-left:1.5px solid #9AA3AD}
.ocx-card{position:relative;width:220px;display:flex;flex-direction:column;align-items:center;text-align:center;gap:3px;padding:12px 14px 26px;background:#fff;border:1.5px solid #E3E6EA;border-radius:16px;box-shadow:0 1px 2px rgba(16,24,40,.05),0 8px 20px -12px rgba(16,24,40,.18);margin-bottom:14px}
.ocx-card.is-hit{border-color:#0E7490;box-shadow:0 0 0 3px rgba(14,116,144,.15)}
.ocx-card.is-dim{opacity:.4}
.ocx-card__top{align-self:stretch;display:flex;justify-content:space-between;align-items:center;margin-bottom:4px}
.ocx-st{font-size:11.5px;font-weight:600;padding:2px 9px;border-radius:999px;background:#E6F4F8;color:#0B5566}
.ocx-st--x{background:#FFF4DE;color:#7A4B00}
.ocx-menu{position:relative}
.ocx-more{width:28px;height:24px;display:grid;place-items:center;border:0;background:none;border-radius:6px;cursor:pointer;color:var(--fg-3)}
.ocx-more:hover{background:#F1ECFA;color:#4B2F9A}
.ocx-pop{position:absolute;right:0;top:28px;z-index:5;min-width:170px;display:flex;flex-direction:column;padding:6px;background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:0 12px 30px -10px rgba(16,24,40,.25);text-align:left}
.ocx-pop a,.ocx-pop button{display:block;width:100%;text-align:left;padding:8px 10px;border:0;background:none;border-radius:8px;font-size:13.5px;color:var(--fg);cursor:pointer;text-decoration:none}
.ocx-pop a:hover,.ocx-pop button:hover{background:#F1ECFA;color:#4B2F9A}
.ocx-av{width:56px!important;height:56px!important;font-size:17px!important;border-radius:50%;object-fit:cover;margin-bottom:6px}
.ocx-name{font-family:var(--head);font-weight:600;font-size:15px;color:var(--fg);text-decoration:none}
.ocx-name:hover{color:#0E7490;text-decoration:underline}
.ocx-job{font-size:12.5px;color:var(--fg-2);line-height:1.35}
.ocx-dept{font-size:12px;color:var(--fg-3)}
.ocx-next{font-size:11.5px;color:#0B5566;background:#E6F4F8;border-radius:8px;padding:3px 8px;margin-top:4px}
.ocx-n{position:absolute;left:50%;bottom:-13px;transform:translateX(-50%);display:inline-flex;align-items:center;gap:3px;height:26px;padding:0 10px;border:0;border-radius:999px;background:#1F2226;color:#fff;font-size:12.5px;font-weight:600;cursor:pointer;z-index:1}
.ocx-n:hover{background:#F1ECFA;color:#4B2F9A}
.ocx-n .ico{width:14px;height:14px;stroke-width:2.4}
/* Offboarding (5 November 2026) */
.obd-bar{display:inline-block;width:80px;height:6px;border-radius:3px;background:var(--line);vertical-align:middle;overflow:hidden;margin-right:6px}
.obd-bar>span{display:block;height:100%;background:#0E7490}
.obd-task{display:flex;align-items:center;gap:10px;margin-bottom:12px;background:#FFF4DE;color:#7A4B00}
.obd-task span{flex:1}
.obd-list{list-style:none;margin:0;padding:0}
.obd-step{display:flex;gap:14px;align-items:flex-start;padding:16px 20px;border-top:1px solid var(--line)}
.obd-step:first-child{border-top:0}
.obd-ck{flex:none;width:24px;height:24px;border-radius:50%;border:1.5px solid #B8C1CB;display:grid;place-items:center;margin-top:1px}
.obd-step.is-done .obd-ck{background:#0E7490;border-color:#0E7490;color:#fff}
.obd-ck .ico{width:13px;height:13px;stroke-width:3}
.obd-tx{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.obd-tx>b{font-weight:600}
.obd-tx>span{font-size:13.5px;color:var(--fg-2)}
.obd-step.is-done .obd-tx>b{color:var(--fg-2)}
.obd-by{font-size:12px!important;color:#0B5566!important}
.obd-acts{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.obd-form{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
.obd-form .input,.obd-form .select{flex:1;min-width:220px}
/* HR Tasks (5 November 2026) */
.hrt-list{display:flex;flex-direction:column}
.hrt-row{display:flex;align-items:center;gap:12px;padding:14px 20px;border-top:1px solid var(--line);color:inherit;text-decoration:none}
.hrt-row:first-child{border-top:0}
.hrt-row:hover{background:#F1ECFA}
.hrt-row>div{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.hrt-row>div b{font-weight:600}
.hrt-row>div span{font-size:12.5px;color:var(--fg-3)}
.hrt-n{min-width:26px;height:22px;padding:0 8px;border-radius:999px;background:#0E7490;color:#fff;font-size:12px;font-weight:600;display:grid;place-items:center}
/* Attendance count tiles as separate cards that wrap evenly at any width (owner, 5 November 2026) */
.totals.hr-tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(104px,1fr));gap:12px;border:0;border-radius:0;background:none;overflow:visible}
.totals.hr-tiles .total{border:1px solid var(--line)!important;border-radius:14px;background:#fff!important;padding:14px 16px}
/* The attendance count cards get their colour back (owner, 5 November 2026): a coloured top edge, a soft tint and a
   coloured number, in the fixed order Employees, Working, On a break, Not clocked in, To review */
.totals.hr-tiles .total{border-top-width:4px!important;transition:background .15s}
.totals.hr-tiles .total:nth-child(1){border-top-color:#0E7490!important;background:linear-gradient(180deg,#EEF8FA,#fff 70%)!important}
.totals.hr-tiles .total:nth-child(1) b{color:#0B5566}
.totals.hr-tiles .total:nth-child(2){border-top-color:var(--ok)!important;background:linear-gradient(180deg,var(--ok-bg),#fff 70%)!important}
.totals.hr-tiles .total:nth-child(2) b{color:var(--ok)}
.totals.hr-tiles .total:nth-child(3){border-top-color:var(--warn)!important;background:linear-gradient(180deg,var(--warn-bg),#fff 70%)!important}
.totals.hr-tiles .total:nth-child(3) b{color:var(--warn)}
.totals.hr-tiles .total:nth-child(4){border-top-color:#8A919C!important;background:linear-gradient(180deg,#F1F3F5,#fff 70%)!important}
.totals.hr-tiles .total:nth-child(4) b{color:#4A5059}
.totals.hr-tiles .total:nth-child(5){border-top-color:#6A4FB3!important;background:linear-gradient(180deg,#F1ECFA,#fff 70%)!important}
.totals.hr-tiles .total:nth-child(5) b{color:#4B2F9A}

/* Shift scheduling (owner, 5 Nov 2026): the team week, shift chips (published teal, drafts amber, open dashed, day off grey) */
.sh-bar { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.sh-wklbl { font-weight: 600; min-width: 150px; text-align: center; }
.sh-card .tblwrap { overflow-x: auto; }
.sh-grid { width: 100%; min-width: 880px; border-collapse: separate; border-spacing: 0; table-layout: fixed; }
.sh-grid th, .sh-grid td { border-bottom: 1px solid var(--line); border-right: 1px solid var(--line); padding: 8px; vertical-align: top; text-align: left; }
.sh-grid thead th { font-size: 12.5px; color: var(--fg-2); font-weight: 600; background: var(--bg); }
.sh-grid thead th span { display: block; font-weight: 400; color: var(--fg-3); }
.sh-grid .sh-who { width: 190px; }
.sh-grid tbody th { background: #fff; font-weight: 400; }
.sh-grid tbody th .who b { font-size: 13.5px; }
.sh-grid td { min-height: 64px; height: 64px; background: #fff; }
.sh-grid .sh-today { background: #F3FAFC; }
.sh-grid td.is-over { outline: 2px dashed #0E7490; outline-offset: -3px; background: #EEF8FA; }
.sh-openrow th, .sh-openrow td { background: #FFFDF7; }
.shc { display: block; width: 100%; text-align: left; border-radius: 8px; padding: 5px 7px; margin-bottom: 4px; font: inherit; font-size: 12.5px; font-weight: 600; line-height: 1.3;
  background: #E6F4F8; color: #0B5566; border: 1px solid #B9DFEA; cursor: grab; font-variant-numeric: tabular-nums; }
.shc:hover { background: #F1ECFA; color: #4B2F9A; border-color: #D9CFEE; }
.shc small { display: block; font-weight: 400; font-size: 11.5px; opacity: .85; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.shc em { display: block; font-style: normal; font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.shc--draft { background: #FFF4DE; color: #7A4B00; border-color: #F3DFB4; }
.shc--open { background: transparent; color: #7A4B00; border: 1px dashed #E0B45E; }
.shc--off { background: #F1F2F4; color: #5A5F67; border-color: #E1E3E6; }
.shc--rm { background: #FCEBEB; color: #A32D2D; border-color: #F3C9C9; cursor: pointer; }
.sh-tag { display: inline-block; font-size: 11px; padding: 2px 7px; border-radius: 10px; background: #F1F2F4; color: #5A5F67; margin: 0 4px 4px 0; }
.sh-tag--leave { background: #F1ECFA; color: #4B2F9A; }
.sh-usual { display: block; font-size: 11.5px; color: var(--fg-3); margin-bottom: 4px; }
.sh-add { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 8px; border: 1px dashed var(--line); background: transparent; color: var(--fg-3); cursor: pointer; }
.sh-add:hover { border-color: #D9CFEE; background: #F1ECFA; color: #4B2F9A; }
.sh-legend { display: flex; gap: 16px; flex-wrap: wrap; font-size: 12.5px; color: var(--fg-2); margin-top: 10px; }
.sh-legend i.shc { display: inline-block; width: 12px; height: 12px; padding: 0; margin: 0 6px -2px 0; border-radius: 3px; }
@media (max-width: 700px) { .sh-bar { align-items: stretch; } .sh-grid .sh-who { width: 140px; } }

/* worker types (owner, 5 Nov 2026): labels in the people list */
.wk-tag { display: inline-block; font-size: 11.5px; font-weight: 600; padding: 1px 8px; border-radius: 10px; margin-left: 6px; vertical-align: 1px; }
.wk-tag--contract { background: #FFF4DE; color: #7A4B00; }
.wk-tag--contractor { background: #F1ECFA; color: #4B2F9A; }

/* contractor invoices (owner, 5 Nov 2026) */
.inv-box { background: var(--bg); border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; font-size: 13.5px; }
.inv-ln { padding: 3px 0; }
.inv-total { border-top: 1px solid var(--line); margin-top: 6px; padding-top: 6px; }

/* Employee page, HiBob-style (owner, 6 Nov 2026): large photo and serif name, line-icon shortcuts, a grouped side menu
   (teal line on the open section, solid teal blue on hover), serif card titles and SVG charts with hover values */
.pv{--pv-teal:#0E7490;--pv-teal-2:#0B5D73;--pv-teal-soft:#E6F3F6;--pv-pur:#6A4FB3;--pv-serif:'DM Serif Display',Georgia,serif}
.pv-head{background:var(--surface);border:1px solid var(--line);border-radius:16px;box-shadow:0 1px 2px rgba(20,24,30,.04),0 6px 18px rgba(20,24,30,.05);margin-top:4px}
.pv-hd{display:flex;gap:24px;align-items:center;flex-wrap:wrap;padding:26px 28px}
.pv-ph .pv-photo{width:104px;height:104px;font-size:36px;font-family:var(--pv-serif);font-weight:400;border-radius:50%;object-fit:cover;box-shadow:0 0 0 4px var(--surface),0 0 0 5px var(--line)}
.pv-who{flex:1;min-width:220px}
.pv-name{font-family:var(--pv-serif);font-weight:400;font-size:34px;line-height:1.12;letter-spacing:.005em;color:var(--fg);margin:0}
.pv-job{font-family:var(--pv-serif);font-size:19px;color:var(--fg-2);margin:4px 0 2px}
.pv-sub{font-size:13px;color:var(--fg-3);margin:0}
.pv-pills{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.pv-pill{display:inline-flex;align-items:center;gap:6px;border-radius:20px;padding:3px 11px;font-size:12px;background:var(--surface-2);color:var(--fg-2)}
.pv-pill i{display:none}
.pv-pill--ok{background:var(--pv-teal-soft);color:var(--pv-teal-2)}.pv-pill--ok i{display:block;width:7px;height:7px;border-radius:50%;background:var(--pv-teal)}
.pv-pill--pu{background:#F3EFFB;color:#4B3590}
.pv-acts{display:flex;gap:8px;flex-wrap:wrap}
.pv-icons{display:flex;justify-content:space-around;gap:6px;flex-wrap:wrap;padding:18px 20px 16px;border-top:1px solid var(--line)}
.pv-ic{display:flex;flex-direction:column;align-items:center;gap:8px;min-width:74px;padding:6px 4px;border-radius:12px;font-size:12px;color:var(--fg-2);text-decoration:none;transition:color .15s}
.pv-ic .ico{width:30px;height:30px;stroke-width:1.5;color:var(--brand);transition:color .15s,transform .15s}
.pv-ic:hover,.pv-ic.is-on{color:var(--pv-teal);text-decoration:none}.pv-ic:hover .ico,.pv-ic.is-on .ico{color:var(--pv-teal);transform:translateY(-2px)}
.pv-ic:focus-visible{outline:2px solid var(--pv-teal);outline-offset:2px}
.pv-lay{display:grid;grid-template-columns:230px minmax(0,1fr);gap:24px;margin-top:22px;align-items:start}
.pv-nav{position:sticky;top:16px;display:flex;flex-direction:column}
.pv-q{position:relative;display:block;margin-bottom:8px}.pv-q .ico{position:absolute;left:10px;top:50%;transform:translateY(-50%);color:var(--fg-3)}.pv-q .input{padding-left:32px;width:100%}
.pv-g{font-size:10.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--pv-teal);padding:14px 12px 4px}
.pv-item{display:flex;align-items:center;gap:10px;padding:8px 12px;margin-bottom:1px;border-left:3px solid transparent;border-radius:0 8px 8px 0;color:var(--brand);font-size:13.5px;text-decoration:none;transition:background .12s,color .12s}
.pv-item .ico{color:var(--fg-3);flex:none}
.pv-item span:not(.count){flex:1;min-width:0}
.pv-item.is-on{background:var(--pv-teal-soft);border-left-color:var(--pv-teal);color:var(--pv-teal-2);font-weight:600}.pv-item.is-on .ico{color:var(--pv-teal)}
.pv-item:hover{background:var(--pv-teal);color:#fff;border-left-color:var(--pv-teal-2);text-decoration:none}.pv-item:hover .ico{color:#fff}
.pv-item:focus-visible{outline:2px solid var(--pv-teal);outline-offset:1px}
.pv-body{min-width:0}
.pv-body .card{border-radius:14px;box-shadow:0 1px 2px rgba(20,24,30,.04),0 4px 14px rgba(20,24,30,.04)}
.pv-body .card__hd h2{font-family:var(--pv-serif);font-weight:400;font-size:20px;letter-spacing:.005em}
.pv-tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px}
.pv-tile{display:flex;flex-direction:column;gap:2px;background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:16px 18px;color:var(--fg);text-decoration:none;box-shadow:0 1px 2px rgba(20,24,30,.04);transition:transform .15s,box-shadow .15s,border-color .15s}
.pv-tile span{font-size:12px;color:var(--fg-3)}.pv-tile b{font-family:var(--pv-serif);font-weight:400;font-size:28px;line-height:1.2;color:var(--fg)}.pv-tile small{font-size:12px;color:var(--fg-3)}
a.pv-tile:hover{transform:translateY(-2px);border-color:#CFE3EA;box-shadow:0 8px 22px rgba(14,116,144,.12);text-decoration:none}
.pv-two{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px;align-items:start}
.pv-kv{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:16px 24px;margin:0}
.pv-kv dt{font-size:12px;color:var(--fg-3);margin-bottom:3px}.pv-kv dd{margin:0;font-size:14px}
.pv-avs{display:inline-flex;padding-left:8px}.pv-av{width:32px;height:32px;font-size:11px;margin-left:-8px;border:2px solid var(--surface);border-radius:50%;object-fit:cover}
.pv-av--more{background:var(--brand);color:#fff}
.pv-rows{list-style:none;margin:0;padding:0}
.pv-row{display:flex;align-items:center;gap:12px;padding:10px 0;border-top:1px solid var(--surface-2)}.pv-row:first-child{border-top:0;padding-top:2px}
.pv-row__t{flex:1;min-width:0}.pv-row a{color:var(--fg)}.pv-row a:hover{color:var(--pv-teal)}
.pv-ri{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;flex:none}
.pv-ri--teal{background:var(--pv-teal-soft);color:var(--pv-teal)}.pv-ri--purple{background:#F3EFFB;color:var(--pv-pur)}.pv-ri--warn{background:var(--warn-bg);color:var(--warn)}.pv-ri--grey{background:var(--surface-2);color:var(--fg-2)}
.pv-meter{display:inline-block;width:110px;height:6px;border-radius:6px;background:var(--surface-2);overflow:hidden;vertical-align:middle}.pv-meter i{display:block;height:100%;border-radius:6px;background:linear-gradient(90deg,#0E7490,#2A9AB8)}
.pv-chart{display:block;width:100%;height:auto;overflow:visible}
.pv-chart .pv-grid{stroke:var(--surface-2);stroke-width:1}
.pv-chart .pv-ax{font-size:10px;fill:var(--fg-3);font-family:var(--sans,Inter,sans-serif)}
.pv-hit{cursor:pointer}rect.pv-hit[data-tip]:not([fill]),circle.pv-hit:not([stroke]){fill:transparent}
.pv-chart rect.pv-hit:not([fill]):hover{fill:rgba(14,116,144,.06)}
.pv-ring{display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.pv-ring circle.pv-hit{transition:stroke-width .15s}.pv-ring circle.pv-hit:hover{stroke-width:15}
.pv-ring__big{font-family:var(--pv-serif);font-size:17px;fill:var(--fg)}.pv-ring__small{font-size:7.5px;fill:var(--fg-3)}
.pv-legend{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px;font-size:12.5px;color:var(--fg-2)}
.pv-legend li{display:flex;align-items:center;gap:8px}.pv-legend i{width:9px;height:9px;border-radius:50%;flex:none}.pv-legend b{font-weight:600;color:var(--fg);margin-left:auto;padding-left:12px}
.pv-legend--row{flex-direction:row;flex-wrap:wrap;gap:6px 18px;margin-top:10px}.pv-legend--row b{margin-left:4px;padding-left:0}
.pv-split{display:flex;height:30px;border-radius:8px;overflow:hidden;gap:2px}.pv-split span{display:block;height:100%;transition:opacity .15s}.pv-split span:hover{opacity:.85}
.pv-tip{position:fixed;z-index:200;transform:translate(-50%,-100%);background:#25282D;color:#fff;font-size:12px;font-weight:500;padding:6px 10px;border-radius:8px;pointer-events:none;white-space:nowrap;box-shadow:0 6px 18px rgba(0,0,0,.18)}
@media (max-width:900px){.pv-lay{grid-template-columns:minmax(0,1fr)}.pv-nav{position:static}.pv-hd{padding:20px}.pv-name{font-size:28px}}
/* employee page, round 2 (owner, 6 Nov 2026): full width, tighter header, day cards for the schedule */
.pv-back{display:inline-flex;align-items:center;gap:6px;font-size:13px;color:var(--fg-2);text-decoration:none;margin-bottom:10px;padding:4px 8px 4px 4px;border-radius:8px}
.pv-back:hover{background:var(--pv-teal-soft,#E6F3F6);color:#0B5D73;text-decoration:none}
.pv-hd{padding:22px 26px 18px;gap:22px}
.pv-ph .pv-photo{width:92px;height:92px;font-size:32px}
.pv-name{font-size:32px}.pv-job{margin:2px 0 1px}
.pv-pills{margin-top:10px}
.pv-acts{align-self:flex-start;margin-top:4px}
.pv-icons{padding:14px 20px 12px}
.pv-access{display:flex;gap:8px;align-items:center;margin:0;padding:10px 26px 12px;border-top:1px solid var(--line);font-size:12px;color:var(--fg-3)}
.pv-access .ico{flex:none}
.pv-count{background:var(--pv-teal,#0E7490)!important;color:#fff!important;min-width:20px;height:20px;border-radius:10px;display:inline-grid;place-items:center;font-size:11px;font-weight:600;padding:0 6px}
.pv-item:hover .pv-count{background:#fff!important;color:#0E7490!important}
.pv-days{list-style:none;margin:0 0 4px;padding:0;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:8px}
.pv-days li{display:flex;flex-direction:column;align-items:center;gap:2px;padding:12px 4px;border-radius:12px;background:#E6F3F6;border:1px solid #CFE3EA;text-align:center}
.pv-days span{font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:#0B5D73;margin-bottom:4px}
.pv-days b{font-size:13.5px;font-weight:600;color:var(--fg);font-variant-numeric:tabular-nums}
.pv-days small{font-size:11.5px;color:var(--fg-3);margin-top:4px}
.pv-days li.is-off{background:var(--surface-2);border-color:var(--line)}.pv-days li.is-off span{color:var(--fg-3)}
.pv-days .pv-off{font-weight:500;color:var(--fg-3);margin-top:8px}
@media (max-width:700px){.pv-days{grid-template-columns:repeat(4,minmax(0,1fr))}}
/* employee page on narrow screens: the section menu becomes one row that scrolls sideways, so the section shows at once */
@media (max-width:900px){
  .pv-nav{flex-direction:row;flex-wrap:nowrap;overflow-x:auto;gap:6px;padding-bottom:6px;scrollbar-width:thin}
  .pv-nav .pv-q,.pv-nav .pv-g{display:none}
  .pv-item{flex:none;border-left:0;border-radius:20px;padding:7px 12px;background:var(--surface);border:1px solid var(--line);white-space:nowrap}
  .pv-item.is-on{border-color:#0E7490}
  .pv-lay{gap:14px;margin-top:16px}
  .pv-acts{width:100%}
}
/* emergency contacts (owner, 6 Nov 2026) */
.ec-block{display:flex;flex-direction:column;gap:12px;padding:16px;border:1px solid var(--line);border-radius:12px;background:var(--surface)}
.ec-lbl{font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:#0E7490;margin:0 0 8px}
.ec-confirm{display:flex;gap:10px;align-items:flex-start;padding:12px 14px;border-radius:10px;background:var(--surface-2);font-size:13.5px;line-height:1.45;cursor:pointer}
.ec-confirm input{margin-top:3px;flex:none;width:16px;height:16px;accent-color:#0E7490}
.pv-past td{color:var(--fg-3)}
.pv-cancel{color:#A32D2D!important}

/* employee page: hidden pay rate with an eye button, clickable direct reports (owner, 6 Nov 2026) */
.pv-tile--rate>span{display:flex;align-items:center;justify-content:space-between;gap:8px}
.pv-eye{width:28px;height:28px;margin:-6px -6px -6px 0;color:var(--fg-2)}
.pv-eye:hover{background:#0E7490;color:#fff}
.pv-tile b .pv-mask{font-family:inherit;font-size:24px;letter-spacing:.06em;color:var(--fg-2)}
.pv-avl{display:inline-flex;margin-left:-8px;border-radius:50%;text-decoration:none}.pv-avl .pv-av{margin-left:0}
.pv-avl:first-child{margin-left:0}
.pv-avl:hover .pv-av,.pv-avl:focus-visible .pv-av{border-color:#0E7490;transform:translateY(-2px)}
.pv-av{transition:transform .15s,border-color .15s}

/* profile leave: each request opens its details (owner, 6 Nov 2026) */
.pl-rq{cursor:pointer}.pl-rq:hover td{background:#EEF6F8}

/* documents: "Applies to this person?" answer shows clearly, with what happens next (owner, 6 Nov 2026) */
.dc-ap{display:inline-flex;align-items:center;gap:4px;background:var(--surface);border-color:var(--line);color:var(--fg)}
.dc-ap:hover:not(:disabled){border-color:#0E7490;color:#0E7490}
.dc-ap.is-on,.dc-ap.is-on:disabled{background:#0E7490;border-color:#0E7490;color:#fff;opacity:1;cursor:default}
.dc-ap__todo{font-size:12px;color:var(--warn);font-weight:500}
.dc-ap__said{display:flex;gap:6px;align-items:flex-start;margin:0;font-size:12.5px;color:var(--fg-2);background:#EEF6F8;border-radius:8px;padding:6px 10px}

/* HR Leave requests page, same look as the employee page (owner, 6 Nov 2026) */
.lvx,.lvx-tiles{--pv-serif:'DM Serif Display',Georgia,serif}
.lvx-tiles{margin-bottom:16px}
.lvx{margin-bottom:16px}
.lvx .card__hd h2{font-family:var(--pv-serif);font-weight:400;font-size:24px;letter-spacing:-.01em}
.lvx-away{list-style:none;margin:0;padding:14px 20px 20px;display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px}
.lvx-away__i{width:100%;display:flex;align-items:center;gap:12px;text-align:left;background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:12px 14px;font:inherit;color:var(--fg);cursor:pointer;transition:border-color .15s,box-shadow .15s,transform .15s}
.lvx-away__i:hover{border-color:#CFE3EA;box-shadow:0 8px 22px rgba(14,116,144,.12);transform:translateY(-1px)}
.lvx-away__i>div{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}.lvx-away__i b{font-weight:600;font-size:14px}.lvx-away__i span{font-size:12.5px;color:var(--fg-2)}
.lvx-away__i .chip,.lvx-away__i [class*="st"]{flex:none}
.lvx-tbl td{vertical-align:middle}
.lvx-who{display:flex;align-items:center;gap:10px}.lvx-who>div{display:flex;flex-direction:column}.lvx-who b{font-weight:600}.lvx-who span{font-size:12px;color:var(--fg-3)}
.lvx-note{font-size:12px;color:var(--fg-2);margin-top:4px;max-width:28ch;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lvx .lvq{padding:16px 20px}

/* Time and attendance dashboard: this week's on-time champions (owner, 6 Nov 2026) */
.tac{--pv-serif:'DM Serif Display',Georgia,serif}
.tac .card__hd{align-items:center}
.tac .card__hd h2{font-family:var(--pv-serif);font-weight:400;font-size:24px;letter-spacing:-.01em}
.tac-seg{flex:none}
.tac-list{list-style:none;margin:0;padding:14px 20px 6px;display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:12px}
.tac-p{display:flex;align-items:center;gap:12px;padding:12px 14px;border:1px solid var(--line);border-radius:14px;background:linear-gradient(135deg,#F3FAFB,#fff 60%);color:var(--fg);text-decoration:none;transition:border-color .15s,box-shadow .15s,transform .15s}
.tac-p:hover{border-color:#CFE3EA;box-shadow:0 8px 22px rgba(14,116,144,.12);transform:translateY(-1px);text-decoration:none}
.tac-av{position:relative;flex:none;width:42px;height:42px;border-radius:50%;background:#0E7490;color:#fff;display:grid;place-items:center;font-weight:600;font-size:14px}
.tac-av i{position:absolute;right:-4px;bottom:-4px;width:20px;height:20px;border-radius:50%;background:#6A4FB3;color:#fff;display:grid;place-items:center;border:2px solid #fff}
.tac-av i svg{width:11px;height:11px}
.tac-p>div{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}.tac-p b{font-weight:600}.tac-p span{font-size:12.5px;color:var(--fg-3)}
.tac-p em{font-style:normal;font-size:12px;font-weight:600;color:#0E7490;background:#E6F3F6;border-radius:999px;padding:4px 10px;white-space:nowrap}
.tac-ft{display:flex;gap:8px;align-items:flex-start;padding:10px 20px 16px;font-size:12px;color:var(--fg-3)}
.tac-ft span{flex:1}.tac-ft a{white-space:nowrap;font-weight:600}

.tac-list li{display:flex;flex-direction:column;gap:6px}
.tac-go{align-self:flex-start}
.tac-done{display:flex;gap:6px;align-items:flex-start;font-size:12px;color:var(--ok)}
.tac-hint{margin:0;padding:0 20px 6px;font-size:12px;color:var(--fg-3)}
.rc-wk{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.rc-wk li{display:flex;gap:12px;align-items:flex-start;padding:12px 14px;border:1px solid var(--line);border-radius:14px;background:linear-gradient(135deg,#F3FAFB,#fff 60%)}
.rc-wk__i{flex:none;width:34px;height:34px;border-radius:50%;background:#6A4FB3;color:#fff;display:grid;place-items:center}
.rc-wk li>div{display:flex;flex-direction:column;gap:2px}.rc-wk b{font-weight:600}.rc-wk span{font-size:12.5px;color:var(--fg-2)}
.rc-wk q{font-size:13px;color:var(--fg);font-style:italic;margin-top:4px}
.tac-p .tac-av{color:#fff;font-size:14px;font-weight:600}
.pv-sl-act{display:flex;align-items:center;gap:10px;font-size:12px;white-space:nowrap}

/* test environment banner (staging.nyroworkforce.com) */
.env-banner{position:sticky;top:0;z-index:999;background:#6A4FB3;color:#fff;text-align:center;font-size:12.5px;font-weight:600;padding:5px 12px}