:root{
  --navy:#1B2D4F; --navy-deep:#12203A; --navy-soft:#2C4470;
  --ink:#1C2840; --slate:#51607C; --mist:#8492AB; --muted:#6B7891;
  --paper:#FFFFFF; --canvas:#EEF1F6; --surface:#F7F8FB;
  --line:#DDE3EC; --line-soft:#E8ECF3;
  --blue:#2D6FCB; --blue-bg:#E8F0FB; --blue-ink:#174887;
  --green:#1D9E75; --green-bg:#E2F4EC; --green-ink:#0B5E43;
  --amber-bg:#FCF0DC; --amber-ink:#7A4C08;
  --purple-bg:#EDEBFB; --purple-ink:#43399B;
  --r-sm:6px; --r-md:10px; --r-lg:14px; --maxw:1140px;
}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:'Inter',system-ui,sans-serif;font-size:15px;color:var(--ink);background:var(--paper);line-height:1.6;-webkit-font-smoothing:antialiased;overflow-wrap:break-word}
h1,h2,h3,h4,.display{font-family:'Archivo',sans-serif;color:var(--navy);line-height:1.15}
a{color:var(--blue-ink);text-decoration:none}
a:hover{color:var(--blue)}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
.eyebrow{display:inline-block;font-size:12.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--blue-ink);margin-bottom:10px}
.btn{display:inline-flex;align-items:center;gap:8px;justify-content:center;font:inherit;font-weight:600;font-size:15px;cursor:pointer;padding:12px 20px;border-radius:var(--r-sm);border:1px solid transparent;white-space:nowrap}
.btn-primary{background:var(--navy);color:#fff}.btn-primary:hover{background:var(--navy-deep);color:#fff}
.btn-accent{background:var(--blue);color:#fff}.btn-accent:hover{background:var(--blue-ink);color:#fff}
.btn-ghost{background:#fff;color:var(--navy);border-color:var(--line)}.btn-ghost:hover{background:var(--surface)}
.btn-sm{padding:8px 14px;font-size:14px}
.btn-light{background:#fff;color:var(--navy)}.btn-light:hover{background:#eef2f8}
.btn-outline-light{background:transparent;color:#fff;border-color:rgba(255,255,255,.4)}.btn-outline-light:hover{background:rgba(255,255,255,.1);color:#fff}

/* utility bar + nav */
.utilbar{background:var(--navy-deep);color:#cdd8ec;font-size:12.5px}
.utilbar .wrap{display:flex;align-items:center;justify-content:flex-end;gap:10px;flex-wrap:wrap;min-height:38px;height:auto;padding-top:5px;padding-bottom:5px}
.utilbar a{color:#fff;font-weight:600;white-space:nowrap}
@media(max-width:600px){
  .utilbar .wrap{justify-content:center}
  .utilbar .wrap span{flex-basis:100%;text-align:center}
}
@media(max-width:380px){ .utilbar .wrap span{display:none} }
.nav{background:#fff;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:30}
.nav .wrap{display:flex;align-items:center;gap:14px;height:66px;position:relative}
.brand{display:flex;align-items:center;gap:10px;font-family:'Archivo';font-weight:700;color:var(--navy);font-size:17px}
.brand .mark{width:34px;height:34px;border-radius:8px;background:var(--navy);color:#fff;display:grid;place-items:center;font-weight:700;font-size:15px}
.brand small{display:block;font-family:'Inter';font-weight:500;font-size:11px;color:var(--slate);margin-top:-2px}
.nav-menu{display:flex;flex:1;align-items:center;gap:14px;min-width:0}
.nav-links{display:flex;gap:2px;margin-right:auto}
.nav-links a{padding:8px 11px;border-radius:var(--r-sm);font-size:14.5px;font-weight:600;color:var(--ink);white-space:nowrap}
.nav-links a:hover{background:var(--surface);color:var(--navy)}
.nav-cta{display:flex;gap:8px;align-items:center;flex-shrink:0}
.nav-cta .btn{padding-left:18px;padding-right:18px}
.nav-toggle{display:none;align-items:center;justify-content:center;width:42px;height:38px;margin-left:auto;border:1px solid var(--line);border-radius:var(--r-sm);background:#fff;cursor:pointer}
.nav-toggle span{position:relative}
.nav-toggle span,.nav-toggle span::before,.nav-toggle span::after{display:block;width:18px;height:2px;background:var(--navy);border-radius:2px;transition:transform .25s ease,opacity .2s}
.nav-toggle span::before,.nav-toggle span::after{content:"";position:absolute;left:0}
.nav-toggle span::before{top:-6px}
.nav-toggle span::after{top:6px}
.nav.open .nav-toggle span{background:transparent}
.nav.open .nav-toggle span::before{transform:translateY(6px) rotate(45deg)}
.nav.open .nav-toggle span::after{transform:translateY(-6px) rotate(-45deg)}
/* account dropdown */
.acct{position:relative;display:flex}
.acct-toggle{display:inline-flex;align-items:center;gap:8px;max-width:230px;padding:4px 10px 4px 4px;border:1px solid var(--line);border-radius:999px;background:#fff;color:var(--ink);font:inherit;font-weight:600;font-size:14px;line-height:1;cursor:pointer;transition:background var(--dur) var(--ease),border-color var(--dur) var(--ease)}
.acct-toggle:hover{background:var(--surface)}
.acct-avatar{flex:0 0 auto;width:28px;height:28px;border-radius:50%;background:var(--navy);color:#fff;display:grid;place-items:center;font-size:12px;font-weight:700}
.acct-name{max-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--slate)}
.acct-caret{flex:0 0 auto;color:var(--mist);transition:transform var(--dur) var(--ease)}
.acct.open .acct-caret{transform:rotate(180deg)}
.acct-menu{position:absolute;right:0;top:calc(100% + 8px);min-width:210px;background:#fff;border:1px solid var(--line);border-radius:var(--r-md);box-shadow:0 16px 30px rgba(18,32,58,.12);padding:6px;display:none;z-index:60}
.acct.open .acct-menu{display:block}
.acct-head{font-size:12.5px;color:var(--slate);padding:8px 10px 7px;border-bottom:1px solid var(--line-soft);margin-bottom:4px;word-break:break-all}
.acct-head-name{display:block;font-weight:600;color:var(--ink);font-size:13.5px}
.acct-head-email{display:block;color:var(--slate);font-size:12px;margin-top:2px}
.cookie-banner{position:fixed;left:0;right:0;bottom:0;z-index:80;display:flex;gap:14px;align-items:center;justify-content:center;flex-wrap:wrap;background:var(--navy);color:#fff;padding:12px 18px;font-size:14px;box-shadow:0 -4px 16px rgba(18,32,58,.18)}
.cookie-banner a{color:#fff;text-decoration:underline}
.legal{font-size:15px;line-height:1.65;color:var(--ink)}
.legal h3{margin:22px 0 6px;font-size:18px}
.legal ul{margin:0 0 8px 18px}
.legal li{margin-bottom:4px}
.acct-item{display:block;padding:9px 10px;border-radius:var(--r-sm);font-size:14px;font-weight:600;color:var(--ink)}
.acct-item:hover{background:var(--surface);color:var(--navy)}
.acct-item-sep{border-top:1px solid var(--line-soft);margin-top:4px;padding-top:11px}
@media(max-width:1280px){
  .nav-toggle{display:inline-flex}
  .nav-menu{position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:stretch;gap:2px;background:#fff;border-top:1px solid var(--line);border-bottom:1px solid var(--line);box-shadow:0 16px 30px rgba(18,32,58,.10);padding:10px 24px 16px;display:none}
  .nav.open .nav-menu{display:flex}
  .nav-links{flex-direction:column;gap:0;margin-right:0}
  .nav-links a{padding:11px 8px;font-size:15px}
  .nav-links a::after{display:none}
  .nav-cta{flex-direction:column;align-items:stretch;gap:8px;margin-top:8px;padding-top:12px;border-top:1px solid var(--line)}
  .nav-cta .btn{width:100%;justify-content:center}
  .nav-cta .role-pill{align-self:flex-start}
  .acct{width:100%;flex-direction:column;align-items:stretch}
  .acct-toggle{width:100%;max-width:none;justify-content:flex-start;padding:8px 12px}
  .acct-name{max-width:none}
  .acct-caret{margin-left:auto}
  .acct-menu{position:static;min-width:0;border:0;box-shadow:none;padding:0;margin-top:6px}
  .acct-head{display:none}
}
@media(max-width:560px){ .brand small{display:none} }

/* hero */
.hero{background:linear-gradient(180deg,#fff,var(--surface));border-bottom:1px solid var(--line);position:relative;overflow:hidden}
/* Aurora: two soft radial-gradient layers drifting on their own slow cycles behind the
   hero. Low alpha keeps the dark hero text fully legible; transform-only motion is GPU
   friendly. Sits at z-index:0 under the content (.hero .wrap is lifted to z-index:1). */
.hero::before,.hero::after{content:"";position:absolute;inset:-30%;z-index:0;pointer-events:none}
.hero::before{
  background:
    radial-gradient(38% 46% at 22% 30%, rgba(45,111,203,.16), transparent 70%),
    radial-gradient(40% 48% at 78% 24%, rgba(27,45,79,.13), transparent 72%);
  animation:auroraA 26s var(--ease) infinite alternate;
}
.hero::after{
  background:
    radial-gradient(42% 50% at 70% 72%, rgba(29,158,117,.12), transparent 70%),
    radial-gradient(38% 46% at 30% 80%, rgba(45,111,203,.12), transparent 72%);
  animation:auroraB 38s var(--ease) infinite alternate;
}
@keyframes auroraA{ from{transform:translate3d(-4%,-2%,0) scale(1.02)} to{transform:translate3d(5%,3%,0) scale(1.08)} }
@keyframes auroraB{ from{transform:translate3d(3%,2%,0) scale(1.05)} to{transform:translate3d(-5%,-3%,0) scale(1)} }
/* On small screens drop to a single calmer layer (less paint, no jank). */
@media(max-width:560px){ .hero::after{display:none} }
.hero .wrap{padding:56px 24px 40px;position:relative;z-index:1}
.hero h1{font-size:clamp(32px,4.6vw,46px);max-width:18ch;margin-bottom:14px}
.hero p.lede{font-size:18px;color:var(--slate);max-width:60ch;margin-bottom:26px}
.hero-cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:6px}
@media(max-width:640px){.hero-cta{justify-content:center}}
.searchbar{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end;background:#fff;padding:14px;border:1px solid var(--line);border-radius:var(--r-md);box-shadow:0 12px 30px rgba(18,32,58,.10);max-width:880px}
.searchbar .f{flex:1 1 240px;display:flex;flex-direction:column}
.searchbar label{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--slate);margin:0 0 5px 2px}
.searchbar input,.searchbar select{height:48px;box-sizing:border-box;border:1px solid var(--line);border-radius:var(--r-sm);padding:0 14px;font:inherit;font-size:15px;color:var(--ink);background:#fff}
.searchbar .go{display:flex;align-items:flex-end;flex:0 0 auto}
.searchbar .go .btn{height:48px;padding:0 30px;font-size:15px;background:var(--navy);border-color:var(--navy)}
.searchbar .go .btn:hover{background:var(--navy-deep);border-color:var(--navy-deep)}
@media(max-width:640px){.searchbar .go{flex:1 1 100%}.searchbar .go .btn{width:100%}}
.quick{margin-top:16px;display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.quick .lbl{font-size:13.5px;color:var(--slate);font-weight:600}
.quick a{font-size:13.5px;font-weight:600;color:var(--blue-ink);background:var(--blue-bg);border:1px solid #d4e2f6;padding:5px 12px;border-radius:999px}
.trust{margin-top:18px;font-size:13.5px;color:var(--slate)}

/* stats band */
.stats{background:var(--navy)}
.stats .wrap{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;padding:26px 24px}
.stats .s .n{font-family:'Archivo';font-weight:700;font-size:34px;color:#fff;line-height:1}
.stats .s .l{font-size:13px;color:#aebbd6;margin-top:5px}
@media(max-width:700px){.stats .wrap{grid-template-columns:repeat(2,1fr);gap:18px}}

/* sections */
.section{padding:60px 0}
.section.alt{background:var(--surface)}
.shead{text-align:center;max-width:680px;margin:0 auto 36px}
.shead h2{font-size:clamp(24px,3.4vw,32px);margin-bottom:10px}
.shead p{color:var(--slate);font-size:16.5px}

/* featured job rows */
.jobs{display:flex;flex-direction:column;gap:12px;max-width:920px;margin:0 auto}
.job{display:flex;gap:16px;background:#fff;border:1px solid var(--line);border-radius:var(--r-md);padding:18px 20px;transition:box-shadow .15s,border-color .15s}
.job:hover{box-shadow:0 8px 22px rgba(18,32,58,.09);border-color:var(--mist)}
.job .state{flex:0 0 auto;width:48px;height:48px;border-radius:var(--r-sm);background:var(--navy);color:#fff;display:grid;place-items:center;font-family:'Archivo';font-weight:700;font-size:15px}
.job .m{flex:1;min-width:0}
.job h3{font-size:18px;margin-bottom:4px}
.eline{font-size:13.5px;color:var(--slate);font-weight:600;display:flex;align-items:center;gap:6px;margin-bottom:9px}
.eline .lock{display:inline-flex;align-items:center;gap:5px;color:var(--navy-soft)}
.eline .lock svg{width:13px;height:13px}
.jmeta{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center;font-size:13.5px;color:var(--slate)}
.jmeta .sal{color:var(--navy);font-weight:700}
.tag{font-size:11px;font-weight:700;padding:2px 9px;border-radius:999px}
.tag-direct{color:var(--green-ink);background:var(--green-bg);border:1px solid #c7e8d8}
.chip-spec{font-size:12px;font-weight:600;color:var(--purple-ink);background:var(--purple-bg);border:1px solid #ddd9f4;padding:3px 10px;border-radius:999px}
.job .side{display:flex;align-items:center}
.center-cta{text-align:center;margin-top:28px}

/* how it works */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;max-width:980px;margin:0 auto}
@media(max-width:760px){.steps{grid-template-columns:1fr}}
.step{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:26px}
.step .num{width:38px;height:38px;border-radius:50%;background:var(--blue-bg);color:var(--blue-ink);display:grid;place-items:center;font-family:'Archivo';font-weight:700;font-size:16px;margin-bottom:14px}
.step h3{font-size:18px;margin-bottom:7px}
.step p{color:var(--slate);font-size:15px}

/* specialty + region grids */
.grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;max-width:980px;margin:0 auto}
@media(max-width:760px){.grid4{grid-template-columns:repeat(2,1fr)}}
.tile{background:#fff;border:1px solid var(--line);border-radius:var(--r-md);padding:16px 18px;font-weight:600;color:var(--navy);display:flex;justify-content:space-between;align-items:center}
.tile:hover{border-color:var(--mist)}
.tile span.c{font-size:13px;color:var(--slate);font-weight:500}

/* dual audience */
.audience{display:grid;grid-template-columns:1fr 1fr;gap:20px;max-width:980px;margin:0 auto}
@media(max-width:760px){.audience{grid-template-columns:1fr}}
.acard{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:30px}
.acard h3{font-size:22px;margin-bottom:8px}
.acard ul{list-style:none;margin:14px 0 20px}
.acard li{display:flex;gap:9px;align-items:flex-start;padding:6px 0;color:var(--ink);font-size:15px}
.acard li svg{width:18px;height:18px;color:var(--green);flex:0 0 auto;margin-top:3px}

/* identity band */
.idband{background:var(--navy);color:#fff}
.idband .wrap{display:grid;grid-template-columns:1.2fr 1fr;gap:36px;align-items:center;padding:54px 24px}
@media(max-width:760px){.idband .wrap{grid-template-columns:1fr}}
.idband h2{color:#fff;font-size:30px;margin-bottom:14px}
.idband p{color:#c6d2e8;font-size:16.5px}
.idcard{background:#fff;border-radius:var(--r-lg);padding:22px}
.idcard .row{display:flex;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid var(--line);font-size:14.5px;color:var(--ink)}
.idcard .row:last-child{border-bottom:0}
.idcard .row .who{color:var(--slate);width:92px;flex:0 0 auto}
.idcard .hidden{color:var(--navy-soft);font-weight:600;display:inline-flex;align-items:center;gap:6px}

/* testimonials */
.tgrid{display:grid;grid-template-columns:1fr 1fr;gap:20px;max-width:980px;margin:0 auto}
@media(max-width:760px){.tgrid{grid-template-columns:1fr}}
.tcard{background:#fff;border:1px solid var(--line);border-left:3px solid var(--blue);border-radius:var(--r-md);padding:24px}
.tcard p{font-size:16px;color:var(--ink)}
.tcard .who{margin-top:12px;font-size:13.5px;color:var(--slate);font-weight:600}

/* faq */
.faq{max-width:820px;margin:0 auto;display:flex;flex-direction:column;gap:12px}
.fitem{background:#fff;border:1px solid var(--line);border-radius:var(--r-md);padding:18px 20px}
.fitem h4{font-size:16px;margin-bottom:6px}
.fitem p{color:var(--slate);font-size:15px}

/* cta band */
.cta{background:var(--navy-deep);color:#fff;text-align:center}
.cta .wrap{padding:56px 24px}
.cta h2{color:#fff;font-size:32px;margin-bottom:12px}
.cta p{color:#c6d2e8;font-size:17px;margin-bottom:24px}
.cta .row{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}

/* footer */
.footer{background:#fff;border-top:1px solid var(--line)}
.footer .wrap{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:24px;padding:44px 24px 28px}
@media(max-width:760px){.footer .wrap{grid-template-columns:1fr 1fr}}
.footer h5{font-family:'Archivo';font-size:13px;text-transform:uppercase;letter-spacing:.05em;color:var(--slate);margin-bottom:12px}
.footer a{display:block;color:var(--ink);font-size:14px;padding:4px 0;font-weight:500}
.footer a:hover{color:var(--blue)}
.footer .about{color:var(--slate);font-size:14px;max-width:34ch}
.footer-bottom{border-top:1px solid var(--line)}
.footer-bottom .wrap{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:16px 24px;font-size:13px;color:var(--mist)}

/* ---- app component classes (beyond the marketing landing) ---- */
.container{max-width:var(--maxw);margin:0 auto;padding:0 24px}
.muted{color:var(--slate)}
.card{background:#fff;border:1px solid var(--line);border-radius:var(--r-md);padding:18px 20px}
.divider{height:1px;background:var(--line);border:0;margin:16px 0}
.meta{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.comp{font-weight:700;color:var(--navy)}
.practice-line{font-size:14px;color:var(--slate);font-weight:600}
.chip{font-size:12px;font-weight:600;color:var(--ink);background:var(--surface);border:1px solid var(--line);padding:3px 10px;border-radius:999px}
.role-pill{font-size:11px;font-weight:700;padding:3px 9px;border-radius:999px;background:var(--surface);color:var(--slate);border:1px solid var(--line)}
.btn-block{width:100%}
.btn-wrap{white-space:normal;overflow:visible;height:auto;line-height:1.3;padding-top:10px;padding-bottom:10px}
.row-actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-start;align-items:center;margin-top:10px}

.page-head{padding:30px 0 6px}
.page-head h1{font-size:30px}
.page-head p{color:var(--slate);max-width:70ch}
/* On phones, center the page title banners (hero + page-head). Block titles with a
   max-width also need auto side margins so the block itself centers, not just its text. */
@media(max-width:640px){
  .hero .wrap,.hero .container{text-align:center}
  .hero h1.display,.hero p.lede,.hero .eyebrow{margin-left:auto;margin-right:auto}
  .page-head{text-align:center}
  .page-head p{margin-left:auto;margin-right:auto}
}

.section-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:14px}
.section-head h2{font-size:22px}
.section-head .count{font-size:13.5px;color:var(--slate)}
.section-head .count strong{color:var(--navy)}

.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:640px){.form-grid{grid-template-columns:1fr}}
/* Grid cells must be able to shrink below min-content so a long unbreakable
   value (an email, an id) wraps instead of widening the track off-screen. */
.form-grid>*{min-width:0}
.field-label{display:block;font-size:13px;font-weight:600;color:var(--ink);margin:0 0 5px}
.input,textarea.input,select.input{width:100%;font:inherit;font-size:15px;padding:10px 12px;border:1px solid var(--line);border-radius:var(--r-sm);background:#fff;color:var(--ink)}
.hint{font-size:12.5px;color:var(--slate);margin-top:4px}
.tag-identifying{font-size:10.5px;font-weight:700;color:var(--amber-ink);background:var(--amber-bg);border:1px solid #f0dcb4;padding:1px 7px;border-radius:999px;vertical-align:middle}
.tag-public{font-size:10.5px;font-weight:700;color:var(--green-ink);background:var(--green-bg);border:1px solid #c7e8d8;padding:1px 7px;border-radius:999px;vertical-align:middle}

.detail-grid{display:grid;grid-template-columns:1fr 320px;gap:22px;align-items:start}
@media(max-width:860px){.detail-grid{grid-template-columns:1fr}}
.explainer{background:var(--blue-bg);border:1px solid #d4e2f6;border-radius:var(--r-md);padding:16px 18px}
.explainer h4{margin:0 0 6px;color:var(--blue-ink);font-size:13px;text-transform:uppercase;letter-spacing:.03em}
.explainer p{margin:0;font-size:14px;color:var(--navy-soft)}
.apply-card{position:sticky;top:80px}
@media(max-width:860px){ .apply-card{position:static;top:auto} }
.employer-line .lock{display:inline-flex;align-items:center;gap:5px;color:var(--navy-soft)}
.employer-line .lock svg{width:13px;height:13px}

.compare{display:grid;grid-template-columns:1fr 1fr;gap:18px}
@media(max-width:720px){.compare{grid-template-columns:1fr}}
.compare .side-label{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;margin-bottom:8px}
.side-private .side-label{color:var(--amber-ink)}
.side-public .side-label{color:var(--green-ink)}

.notice{border-radius:var(--r-sm);padding:12px 14px;font-size:14px}
.notice-ok{background:var(--green-bg);border:1px solid #c7e8d8;color:var(--green-ink)}
.notice-info{background:var(--blue-bg);border:1px solid #d4e2f6;color:var(--blue-ink)}
.notice-warn{background:var(--amber-bg);border:1px solid #f0dcb4;color:var(--amber-ink)}
.empty{text-align:center;padding:44px 20px;color:var(--slate)}
.empty h3{color:var(--navy)}
.statusline strong{color:var(--navy)}

/* dashboards */
.dash{display:grid;grid-template-columns:230px minmax(0,1fr);gap:26px;align-items:start;padding:24px 0 50px}
@media(max-width:820px){.dash{grid-template-columns:minmax(0,1fr)}}
/* The content column is minmax(0,1fr), not 1fr: a grid item's automatic minimum
   is its min-content, so a wide table (or any wide child) would otherwise force
   the track past the viewport and push the page off-screen on mobile. The 0
   minimum lets the column shrink so the in-table scroll container does its job. */
/* Restore side gutters whenever the 1140px max-width no longer supplies them
   (the base .dash zeroes horizontal padding for the full-bleed desktop grid),
   and tighten them on small phones. */
@media(max-width:1140px){.wrap.dash{padding-left:24px;padding-right:24px}}
@media(max-width:560px){.wrap.dash{padding-left:16px;padding-right:16px}}
.side-nav{display:flex;flex-direction:column;gap:2px;position:sticky;top:80px}
.side-nav a{padding:10px 12px;border-radius:var(--r-sm);font-weight:600;color:var(--ink);font-size:14px;display:flex;align-items:center;gap:9px}
.side-nav a.active{background:var(--blue-bg);color:var(--blue-ink)}
.side-nav .nav-group-label{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--mist);padding:14px 12px 4px}
.side-nav .nav-group-label:first-child{padding-top:2px}
.side-nav a:hover{background:var(--surface)}
/* Mobile desk-menu toggle: hidden (and out of the grid) on desktop so the sidebar
   layout is unchanged; shown as a card button under 820. */
.side-nav-toggle{display:none}
.side-nav-caret{flex:0 0 auto;transition:transform var(--dur) var(--ease)}
@media(max-width:820px){
  /* In the single-column mobile layout the sticky sidebar would float over the
     page content as you scroll. Collapse it behind a toggle, mirroring the top-nav
     and account menus, so it no longer pushes content far down. */
  .side-nav-toggle{display:flex;align-items:center;justify-content:space-between;width:100%;
    background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);
    padding:11px 14px;font-weight:600;color:var(--navy);font-size:14px;margin-bottom:18px;cursor:pointer}
  .side-nav-toggle[aria-expanded="true"] .side-nav-caret{transform:rotate(180deg)}
  .side-nav{display:none;position:static;top:auto;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);padding:8px;margin-bottom:18px}
  .side-nav.open{display:flex}
}
.metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:20px}
@media(max-width:760px){.metrics{grid-template-columns:repeat(2,1fr)}}
.metric{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);padding:16px}
.metric .v{font-family:'Archivo';font-weight:700;font-size:26px;color:var(--navy);line-height:1}
.metric .k{font-size:12.5px;color:var(--slate);margin-top:5px}
.panel{background:#fff;border:1px solid var(--line);border-radius:var(--r-md);padding:18px 20px;margin-bottom:18px}
.panel h3{font-size:16px;margin-bottom:12px}
.panel .phead{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:12px}
.list-row{display:flex;align-items:center;gap:12px;padding:11px 0;border-bottom:1px solid var(--line-soft)}
.cand-row{padding:14px 0;border-bottom:1px solid var(--line-soft)}
.cand-row:last-child{border-bottom:0}
.cand-head{display:flex;align-items:flex-start;gap:12px}
.cand-head .grow{flex:1;min-width:0}
.cand-head .fit{flex:0 0 auto;white-space:nowrap;margin-left:auto}
.list-row:last-child{border-bottom:0}
.list-row .grow{flex:1;min-width:0}
.avatar{width:38px;height:38px;border-radius:50%;background:var(--blue-bg);color:var(--blue-ink);display:grid;place-items:center;font-weight:700;font-size:13px;flex:0 0 auto}
.status{font-size:11.5px;font-weight:700;padding:3px 9px;border-radius:999px}
.status-new{background:var(--blue-bg);color:var(--blue-ink)}
.status-active{background:var(--green-bg);color:var(--green-ink)}
.status-review{background:var(--amber-bg);color:var(--amber-ink)}
.status-closed{background:var(--surface);color:var(--slate);border:1px solid var(--line)}
.progress{height:8px;background:var(--line-soft);border-radius:999px;overflow:hidden;margin-top:6px}
.progress>span{display:block;height:100%;background:var(--blue)}
.pipeline{display:grid;grid-template-columns:repeat(5,1fr);gap:10px}
@media(max-width:820px){.pipeline{grid-template-columns:repeat(2,1fr)}}
.pcol{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);padding:12px}
.pcol h5{font-size:11.5px;text-transform:uppercase;letter-spacing:.04em;color:var(--slate);margin-bottom:9px;font-family:'Archivo'}
.pcard{background:#fff;border:1px solid var(--line);border-radius:var(--r-sm);padding:9px 10px;margin-bottom:7px;font-size:13px}
.pcard .nm{font-weight:600;color:var(--navy)}
table.tbl{width:100%;border-collapse:collapse;font-size:14px}
table.tbl th{text-align:left;font-size:11.5px;text-transform:uppercase;letter-spacing:.03em;color:var(--slate);padding:9px 10px;border-bottom:1px solid var(--line)}
table.tbl td{padding:12px 10px;border-bottom:1px solid var(--line-soft)}
table.tbl tr:last-child td{border-bottom:0}
@media(max-width:820px){table.tbl{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch}}
.hero-inner{padding:44px 0 28px}
.employer-line{font-size:13.5px;color:var(--slate);font-weight:600;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.region{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
@media(max-width:760px){.region{grid-template-columns:repeat(2,1fr)}}
.region-col{background:#fff;border:1px solid var(--line);border-radius:var(--r-md);padding:14px 16px}
.region-col h4{font-family:'Archivo';font-size:14px;color:var(--navy);margin-bottom:8px}
.region-col a{display:block;font-size:13.5px;color:var(--blue-ink);padding:3px 0}

/* wizard */
.wizard{max-width:880px;margin:0 auto}
.wrail{display:flex;gap:14px;margin:6px 0 22px;flex-wrap:wrap}
.wrail .ws{display:flex;align-items:center;gap:8px;font-size:13.5px;font-weight:600;color:var(--slate)}
.wrail .ws .b{width:26px;height:26px;border-radius:50%;background:var(--surface);border:1px solid var(--line);display:grid;place-items:center;font-size:13px}
.wrail .ws.active{color:var(--navy)}.wrail .ws.active .b{background:var(--navy);color:#fff;border-color:var(--navy)}
.wrail .ws.done .b{background:var(--green-bg);color:var(--green-ink);border-color:#c7e8d8}
.step-pane{display:none}.step-pane.show{display:block}
.wnav{display:flex;justify-content:space-between;gap:10px;margin-top:18px}

/* internal record split */
.rec-grid{display:grid;grid-template-columns:1fr 320px;gap:22px;align-items:start}
@media(max-width:860px){.rec-grid{grid-template-columns:1fr}}
.kv{display:flex;gap:10px;padding:8px 0;border-bottom:1px solid var(--line-soft);font-size:14px}
.kv:last-child{border-bottom:0}
.kv .k{color:var(--slate);width:120px;flex:0 0 auto}
.kv .v{color:var(--ink);min-width:0;overflow-wrap:break-word}
.private-box{background:#fffaf2;border:1px solid #f0dcb4;border-radius:var(--r-md);padding:14px 16px}
.private-box .lbl{font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--amber-ink);margin-bottom:8px}
.fit{font-family:'Archivo';font-weight:700;color:var(--navy)}
.merge{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:720px){.merge{grid-template-columns:1fr}}

/* ============================================================
   Motion system: transitions, button polish, loaders, reveals
   ============================================================ */
:root{ --ease:cubic-bezier(.22,.61,.36,1); --ease-out:cubic-bezier(.16,1,.3,1); --dur:.22s; }
html{ scroll-behavior:smooth; scroll-padding-top:84px; }

/* page content eases in on every load */
html.js main.page-fade{ animation:pageIn .42s var(--ease-out) both; }
@keyframes pageIn{ from{opacity:0;transform:translateY(6px)} to{opacity:1;transform:none} }

/* buttons: smooth transitions, hover lift, press, focus ring, signature sheen */
.btn{ position:relative; overflow:hidden; transition:transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), background-color var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease); }
.btn:hover{ transform:translateY(-1px); }
.btn:active{ transform:translateY(0) scale(.985); }
.btn:focus-visible{ outline:none; box-shadow:0 0 0 3px var(--blue-bg), 0 0 0 4px var(--blue); }
.btn-primary, .btn-accent{ box-shadow:0 1px 2px rgba(18,32,58,.12); }
.btn-primary:hover, .btn-accent:hover{ box-shadow:0 8px 18px rgba(18,32,58,.20); }
.btn-primary::after, .btn-accent::after{ content:""; position:absolute; top:0; left:-130%; width:55%; height:100%; background:linear-gradient(100deg,transparent,rgba(255,255,255,.38),transparent); transform:skewX(-18deg); transition:left .6s var(--ease-out); pointer-events:none; }
.btn-primary:hover::after, .btn-accent:hover::after{ left:130%; }

/* button loading state (used on POST submits while Claude works) */
.btn.is-loading{ color:transparent !important; pointer-events:none; }
.btn.is-loading::before{ content:""; position:absolute; top:50%; left:50%; width:16px; height:16px; margin:-8px 0 0 -8px; border-radius:50%; border:2px solid rgba(255,255,255,.5); border-top-color:#fff; animation:spin .6s linear infinite; }
.btn-ghost.is-loading::before, .btn-light.is-loading::before, .btn-outline-light.is-loading::before{ border-color:rgba(27,45,79,.30); border-top-color:var(--navy); }
@keyframes spin{ to{ transform:rotate(360deg) } }

/* standalone spinner + inline loading note */
.spinner{ display:inline-block; width:18px; height:18px; border-radius:50%; border:2px solid var(--line); border-top-color:var(--blue); animation:spin .6s linear infinite; vertical-align:middle; }
.loading-note{ display:inline-flex; align-items:center; gap:9px; color:var(--slate); font-size:14px; }

/* card and row hover lift */
.job, .tile, .acard, .tcard, .metric, .region-col, .panel{ transition:transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease); }
.job:hover, .tile:hover, .region-col:hover{ transform:translateY(-2px); box-shadow:0 10px 24px rgba(18,32,58,.08); border-color:#cdd6e6; }
.acard:hover, .tcard:hover{ transform:translateY(-2px); box-shadow:0 14px 30px rgba(18,32,58,.10); }

/* nav gains a soft shadow once you scroll */
.nav{ transition:box-shadow .25s var(--ease), background-color .25s var(--ease); }
.nav.scrolled{ box-shadow:0 1px 0 var(--line), 0 8px 22px rgba(18,32,58,.06); }

/* animated underline on nav links */
.nav-links a{ position:relative; }
.nav-links a::after{ content:""; position:absolute; left:0; right:0; bottom:-5px; height:2px; background:var(--blue); border-radius:2px; transform:scaleX(0); transform-origin:left; transition:transform .25s var(--ease); }
.nav-links a:hover::after{ transform:scaleX(1); }
.nav-links a.active{ color:var(--navy); }
.nav-links a.active::after{ transform:scaleX(1); }

/* top navigation progress bar */
#nprog{ position:fixed; top:0; left:0; height:3px; width:0; background:linear-gradient(90deg,var(--blue),var(--green)); box-shadow:0 0 8px rgba(45,111,203,.5); z-index:2000; opacity:0; transition:width .2s var(--ease), opacity .3s var(--ease); }
#nprog.run{ opacity:1; }

/* hero entrance (orchestrated, landing + board) */
html.js .hero .eyebrow, html.js .hero .display, html.js .hero .lede, html.js .hero .searchbar, html.js .hero .quick, html.js .hero .trust{ animation:heroIn .6s var(--ease-out) both; }
html.js .hero .display{ animation-delay:.06s } html.js .hero .lede{ animation-delay:.12s }
html.js .hero .searchbar{ animation-delay:.18s } html.js .hero .quick{ animation-delay:.24s } html.js .hero .trust{ animation-delay:.30s }
@keyframes heroIn{ from{opacity:0;transform:translateY(14px)} to{opacity:1;transform:none} }

/* scroll-triggered reveals */
html.js .reveal{ opacity:0; transform:translateY(18px); }
html.js .reveal.in{ opacity:1; transform:none; transition:opacity .6s var(--ease-out), transform .6s var(--ease-out); }
html.js .reveal-stagger > *{ opacity:0; transform:translateY(16px); }
html.js .reveal-stagger.in > *{ opacity:1; transform:none; transition:opacity .5s var(--ease-out), transform .5s var(--ease-out); }
html.js .reveal-stagger.in > *:nth-child(2){ transition-delay:.06s }
html.js .reveal-stagger.in > *:nth-child(3){ transition-delay:.12s }
html.js .reveal-stagger.in > *:nth-child(4){ transition-delay:.18s }
html.js .reveal-stagger.in > *:nth-child(5){ transition-delay:.24s }
html.js .reveal-stagger.in > *:nth-child(6){ transition-delay:.30s }

/* skeleton shimmer (loading placeholder utility) */
.skeleton{ position:relative; overflow:hidden; background:var(--surface); border-radius:var(--r-sm); }
.skeleton::after{ content:""; position:absolute; inset:0; transform:translateX(-100%); background:linear-gradient(90deg,transparent,rgba(255,255,255,.6),transparent); animation:shimmer 1.3s infinite; }
@keyframes shimmer{ 100%{ transform:translateX(100%) } }

/* logo slot */
.brand-logo{ width:34px; height:34px; border-radius:50%; display:block; object-fit:cover; }

/* respect reduced motion */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto }
  *, *::before, *::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
  html.js .reveal, html.js .reveal-stagger > *{ opacity:1 !important; transform:none !important; }
  .btn-primary::after, .btn-accent::after{ display:none }
  /* aurora holds its static layered wash, no drift */
  .hero::before, .hero::after{ animation:none }
}


/* branded first-load splash */
#splash{display:none}
html.js #splash{display:grid;position:fixed;inset:0;z-index:3000;place-items:center;background:var(--surface)}
html.js.no-splash #splash{display:none}
#splash.hide{opacity:0;pointer-events:none;transition:opacity .5s var(--ease)}
.splash-mark{position:relative;width:84px;height:84px}
.splash-mark img{width:84px;height:84px;border-radius:50%;display:block;animation:splashPulse 1.6s var(--ease) infinite}
.splash-ring{position:absolute;inset:-9px;border-radius:50%;border:3px solid transparent;border-top-color:var(--blue);border-right-color:var(--green);animation:spin 1s linear infinite}
.splash-word{margin-top:18px;font-family:'Archivo';font-weight:700;color:var(--navy);font-size:15px;letter-spacing:.01em;opacity:0;animation:fadeUp .6s var(--ease-out) .15s forwards}
@keyframes splashPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.05)}}
@keyframes fadeUp{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* Reusable branded "working" overlay for synchronous AI waits. Reuses .splash-mark /
   .splash-ring (and the spin keyframe) so it reads as the same product, smaller and
   captioned. */
.working{display:none;position:fixed;inset:0;z-index:2900;place-items:center;background:color-mix(in srgb, var(--surface) 82%, transparent);backdrop-filter:blur(2px)}
.working.is-on{display:grid}
.working-card{display:grid;justify-items:center;gap:14px;text-align:center}
.working-msg{font-size:14px;color:var(--muted)}

/* portal shell + view-as banner */
.portal-nav{border-bottom:1px solid var(--line)}
.imp-banner{background:var(--amber-bg);border-bottom:1px solid #f0dcb4;color:var(--amber-ink);position:sticky;top:0;z-index:40}
.imp-banner .wrap{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:46px;padding:8px 24px;font-size:14px;flex-wrap:wrap}
.imp-banner strong{color:var(--amber-ink)}
.imp-banner form{margin:0}
.portal-nav.scrolled{box-shadow:0 1px 0 var(--line), 0 8px 22px rgba(18,32,58,.06)}

/* free-slot picker */
.slotgrid{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.slot{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--line);border-radius:var(--r-md);padding:9px 12px;font-size:13.5px;color:var(--ink);cursor:pointer;background:var(--surface);transition:border-color var(--dur) var(--ease),background var(--dur) var(--ease)}
.slot:hover{border-color:var(--blue)}
.slot input{accent-color:var(--blue);margin:0}
.slot:has(input:checked){border-color:var(--blue);background:var(--blue-bg);color:var(--blue-ink);font-weight:600}

/* how-it-works audience tabs */
.howtabs{display:inline-flex;gap:4px;background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:4px;margin-bottom:26px}
.howtab{border:0;background:transparent;padding:9px 20px;border-radius:999px;font-family:inherit;font-weight:600;font-size:14px;color:var(--slate);cursor:pointer;transition:background var(--dur) var(--ease),color var(--dur) var(--ease)}
.howtab:hover{color:var(--ink)}
.howtab.is-active{background:var(--navy);color:#fff}
.howpanel.is-hidden{display:none}
.dtabs{display:inline-flex;gap:4px;background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:4px;margin-bottom:22px}
.dtab{border:0;background:transparent;padding:8px 18px;border-radius:999px;font-family:inherit;font-weight:600;font-size:14px;color:var(--slate);cursor:pointer;transition:background var(--dur) var(--ease),color var(--dur) var(--ease);display:inline-flex;align-items:center;gap:7px}
.dtab:hover{color:var(--ink)}
.dtab.is-active{background:var(--navy);color:#fff}
.dtab .tab-badge{background:var(--blue-bg);color:var(--blue-ink);border-radius:999px;font-size:11px;font-weight:700;padding:1px 7px;min-width:18px;text-align:center}
.dtab.is-active .tab-badge{background:rgba(255,255,255,.22);color:#fff}
.dpanel.is-hidden{display:none}

/* destructive action */
.btn-danger{background:#b3261e;color:#fff;border:1px solid #b3261e}
.btn-danger:hover{background:#9a201a}

/* ===== On-page AI assistant (bottom-right) ===== */
.jbh-chat{position:fixed;right:20px;bottom:20px;z-index:1000;font-family:var(--font-body,inherit)}
.jbh-chat-fab{width:56px;height:56px;border-radius:50%;border:0;background:var(--navy);color:#fff;cursor:pointer;box-shadow:0 8px 24px rgba(18,32,58,.28);display:flex;align-items:center;justify-content:center;transition:transform var(--dur) var(--ease),background var(--dur) var(--ease)}
.jbh-chat-fab:hover{background:var(--navy-deep);transform:translateY(-2px)}
.jbh-chat-fab .ic-close{display:none}
.jbh-chat.open .jbh-chat-fab .ic-open{display:none}
.jbh-chat.open .jbh-chat-fab .ic-close{display:block}
.jbh-chat-panel{position:absolute;right:0;bottom:70px;width:360px;max-width:calc(100vw - 32px);height:480px;max-height:calc(100vh - 120px);background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:0 18px 50px rgba(18,32,58,.30);flex-direction:column;overflow:hidden;display:none}
.jbh-chat.open .jbh-chat-panel{display:flex;animation:jbhpop var(--dur) var(--ease)}
@keyframes jbhpop{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.jbh-chat-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:13px 16px;background:var(--navy);color:#fff}
.jbh-chat-title{font-family:var(--font-display,inherit);font-weight:700;font-size:15px;line-height:1.1}
.jbh-chat-sub{font-size:11px;opacity:.7;margin-top:2px}
.jbh-chat-close{background:transparent;border:0;color:#fff;font-size:22px;line-height:1;cursor:pointer;opacity:.85}
.jbh-chat-close:hover{opacity:1}
.jbh-chat-log{flex:1;overflow-y:auto;padding:14px;display:flex;flex-direction:column;gap:10px;background:var(--surface)}
.jbh-msg{max-width:84%;padding:9px 12px;border-radius:12px;font-size:14px;line-height:1.45;white-space:pre-wrap;word-wrap:break-word}
.jbh-assistant{align-self:flex-start;background:#fff;border:1px solid var(--line);color:var(--ink);border-bottom-left-radius:4px}
.jbh-user{align-self:flex-end;background:var(--blue-bg);color:var(--blue-ink);border-bottom-right-radius:4px}
.jbh-typing{color:var(--mist);font-style:italic}
.jbh-chat-form{display:flex;gap:8px;padding:10px;border-top:1px solid var(--line);background:#fff}
.jbh-chat-input{flex:1;border:1px solid var(--line);border-radius:999px;padding:9px 14px;font-family:inherit;font-size:14px;outline:none}
.jbh-chat-input:focus{border-color:var(--blue)}
.jbh-chat-send{width:38px;height:38px;flex-shrink:0;border:0;border-radius:50%;background:var(--blue);color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center}
.jbh-chat-send:hover{background:var(--blue-ink)}
@media(max-width:480px){.jbh-chat{right:14px;bottom:14px}.jbh-chat-panel{height:70vh}}
@media(prefers-reduced-motion:reduce){.jbh-chat-panel{animation:none}.jbh-chat-fab{transition:none}}

/* signed-out confirmation */
.signout-wrap{min-height:62vh;display:grid;place-items:center;padding:56px 24px 72px}
.signout-card{width:100%;max-width:520px;text-align:center;background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:48px 40px;box-shadow:0 18px 40px rgba(18,32,58,.06)}
.signout-badge{width:64px;height:64px;border-radius:50%;background:var(--green-bg);border:1px solid var(--green-bg);color:var(--green-ink);display:grid;place-items:center;margin:0 auto 22px}
.signout-card h1{font-family:'Archivo';font-weight:700;color:var(--navy);font-size:clamp(26px,3.4vw,30px);line-height:1.15;margin:0 0 10px}
.signout-card p{color:var(--slate);font-size:16px;line-height:1.6;margin:0 auto 28px;max-width:40ch}
.signout-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
@media(max-width:480px){.signout-card{padding:36px 24px}.signout-actions .btn{width:100%}}

/* staff directory: sliding toggle + filters */
.dir-bar{margin:6px 0 16px}
.seg{position:relative;display:inline-flex;background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:4px}
.seg-thumb{position:absolute;top:4px;left:4px;bottom:4px;width:calc(50% - 4px);background:var(--navy);border-radius:999px;transition:transform var(--dur) var(--ease);z-index:0}
.seg[data-active="clients"] .seg-thumb{transform:translateX(100%)}
.seg-btn{position:relative;z-index:1;flex:1;display:inline-flex;align-items:center;justify-content:center;text-decoration:none;border:0;background:transparent;font:inherit;font-weight:600;font-size:14px;color:var(--slate);padding:8px 26px;border-radius:999px;cursor:pointer;white-space:nowrap;transition:color var(--dur) var(--ease)}
.seg-btn.active{color:#fff}
.seg-cnt{opacity:.7;margin-left:5px}
.dir-filters{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:14px}
.dir-q,.dir-f{font:inherit;font-size:14px;padding:9px 12px;border:1px solid var(--line);border-radius:var(--r-sm);background:#fff;color:var(--ink);box-sizing:border-box}
.dir-q{min-width:240px;flex:1 1 260px;max-width:380px}
.dir-f{min-width:150px}
.dir-count{margin-left:auto;font-size:13px;white-space:nowrap}
.dir-scroll{overflow-x:auto;max-width:100%;-webkit-overflow-scrolling:touch}
.dir-name{color:var(--navy);text-decoration:none;border-bottom:1px solid transparent}
.dir-name:hover{border-bottom-color:currentColor}
.news-list{display:flex;flex-direction:column;gap:14px}
.news-card{background:#fff;border:1px solid var(--line);border-radius:14px;padding:18px 20px}
.news-card .news-meta{display:flex;align-items:center;gap:10px;font-size:12.5px;color:var(--slate);margin-bottom:6px}
.news-title{margin:0 0 6px;font-size:19px;line-height:1.3}
.news-title a{color:var(--navy);text-decoration:none}
.news-title a:hover{text-decoration:underline}
.news-summary{margin:0 0 10px;color:var(--slate)}
.news-src{font-size:12.5px;color:var(--slate);display:flex;align-items:center;gap:8px}
.news-src .news-dot{opacity:.6}
.dir-pager{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:16px;flex-wrap:wrap}
.dir-pager .pg-info{font-size:13px;color:var(--slate)}
.dir-pager .pg-btns{display:flex;gap:10px;align-items:center}

/* sign-in chooser */
.choose-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:8px}
@media(max-width:640px){.choose-grid{grid-template-columns:1fr}}
.choose-card{display:block;text-decoration:none;border:1px solid var(--line);border-radius:var(--r-sm);padding:22px;background:#fff;transition:border-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease)}
.choose-card:hover{border-color:var(--navy);box-shadow:0 2px 10px rgba(16,42,67,.08)}
.choose-card h3{margin:0 0 6px;color:var(--navy)}
.choose-go{display:inline-block;margin-top:12px;font-weight:600;color:var(--navy)}

/* Data hygiene dashboard: server-computed CSS bars + inline SVG donuts. The only
   dynamic values (bar width %, donut stroke math) are set with inline style
   attributes on the elements; everything static lives here. */
.hy-section-label{font-family:'Archivo';font-weight:700;color:var(--navy);font-size:15px;margin:0 0 4px}
.hy-bars{display:flex;flex-direction:column;gap:12px}
.hy-bar-top{display:flex;justify-content:space-between;align-items:baseline;font-size:13.5px;margin-bottom:5px}
.hy-bar-top .hy-lbl{color:var(--ink);font-weight:600}
.hy-bar-top .hy-val{color:var(--slate)}
.hy-track{height:9px;border-radius:999px;background:var(--surface);border:1px solid var(--line);overflow:hidden}
.hy-fill{height:100%;border-radius:999px;background:var(--blue)}
.hy-donut-row{display:flex;flex-wrap:wrap;gap:22px;align-items:center}
.hy-donut{display:flex;gap:14px;align-items:center}
.hy-donut svg{flex:0 0 auto}
.hy-donut-num{font-family:'Archivo';font-weight:700;font-size:20px;fill:var(--navy)}
.hy-legend{font-size:13px;color:var(--slate)}
.hy-legend .hy-legend-row{display:flex;align-items:center;gap:7px;padding:2px 0}
.hy-dot{width:10px;height:10px;border-radius:3px;flex:0 0 auto}
.hy-note{font-size:12.5px;color:var(--mist);margin-top:10px}

/* ===== Public AI section: "intelligent match" animation + benefit tiles ===== */
.ai-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:34px;align-items:center;max-width:980px;margin:0 auto}
@media(max-width:760px){.ai-grid{grid-template-columns:1fr;gap:26px}}

/* the animation canvas */
.ai-stage{position:relative;background:linear-gradient(160deg,#fff 35%,var(--blue-bg));border:1px solid var(--line);border-radius:var(--r-lg);padding:24px 22px;box-shadow:0 18px 40px rgba(18,32,58,.06)}
.ai-stage svg{display:block;width:100%;height:auto}
.ai-stage rect{fill:#fff;stroke:var(--line);stroke-width:1.5}
.ai-stage .ai-bar{fill:#d8e1f0;stroke:none}
.ai-stage .ai-bar-soft{fill:#e8edf6}
.ai-stage .ai-ava{fill:var(--navy);stroke:none}
.ai-role-best rect:first-of-type{stroke:var(--blue);stroke-width:2;fill:var(--blue-bg)}
.ai-check circle{fill:var(--green);stroke:none}
.ai-check path{fill:none;stroke:#fff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ai-link{fill:none;stroke:var(--blue);stroke-width:2.4;stroke-linecap:round}
.ai-node-bg{fill:#fff;stroke:var(--line);stroke-width:1.5}
.ai-ring-track{fill:none;stroke:var(--line-soft);stroke-width:4}
.ai-ring{fill:none;stroke:var(--green);stroke-width:4;stroke-linecap:round;stroke-dasharray:100}
.ai-score{font-family:'Archivo',sans-serif;font-weight:800;font-size:17px;fill:var(--navy)}

/* resting (pre-reveal) state, only when JS will animate it in */
html.js .ai-stage .ai-piece{opacity:0}
html.js .ai-stage .ai-node{opacity:0}
html.js .ai-stage .ai-link{stroke-dashoffset:100}
html.js .ai-stage .ai-ring{stroke-dashoffset:100}

/* play once when the stage scrolls into view (.in from the shared observer) */
html.js .ai-stage.in .ai-piece{opacity:1;transition:opacity .5s var(--ease-out)}
html.js .ai-stage.in .ai-profile{transition-delay:.05s}
html.js .ai-stage.in .ai-role-1{transition-delay:.18s}
html.js .ai-stage.in .ai-role-best{transition-delay:.30s}
html.js .ai-stage.in .ai-role-3{transition-delay:.42s}
html.js .ai-stage.in .ai-node{opacity:1;transition:opacity .4s var(--ease-out) .55s}
html.js .ai-stage.in .ai-link-1{stroke-dashoffset:0;transition:stroke-dashoffset .5s var(--ease-out) .55s}
html.js .ai-stage.in .ai-link-2{stroke-dashoffset:0;transition:stroke-dashoffset .5s var(--ease-out) .92s}
html.js .ai-stage.in .ai-ring{stroke-dashoffset:6;transition:stroke-dashoffset 1.1s var(--ease-out) .7s} /* 94% filled */

/* benefit tiles */
.ai-benefits{display:flex;flex-direction:column;gap:14px}
.ai-benefits .acard{padding:20px 22px}
.ai-benefits .acard h3{font-size:18px;display:flex;align-items:center;gap:11px;margin-bottom:6px}
.ai-benefits .acard p{color:var(--slate);font-size:14.5px;margin:0}
.ai-ic{flex:0 0 auto;width:32px;height:32px;border-radius:9px;background:var(--blue-bg);color:var(--blue-ink);display:inline-grid;place-items:center}
.ai-ic svg{width:18px;height:18px;display:block}
.ai-trust{max-width:760px;margin:28px auto 0;text-align:center;color:var(--slate);font-size:15.5px}
.ai-trust strong{color:var(--navy);font-weight:700}

/* count-up stat row (home stats band) */
.mini-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;max-width:760px;margin:32px auto 0;text-align:center}
@media(max-width:600px){.mini-stats{grid-template-columns:1fr;gap:14px}}
.mini-stats .ms{background:var(--surface);border:1px solid var(--line-soft);border-radius:var(--r-md);padding:20px 14px}
.ms-n{font-family:'Archivo',sans-serif;font-weight:800;font-size:30px;color:var(--navy);line-height:1}
.ms-l{font-size:13.5px;color:var(--slate);margin-top:7px}

/* reduced motion: show the final connected state, no movement */
@media (prefers-reduced-motion: reduce){
  html.js .ai-stage .ai-piece, html.js .ai-stage .ai-node{opacity:1}
  html.js .ai-stage .ai-link{stroke-dashoffset:0}
  html.js .ai-stage .ai-ring{stroke-dashoffset:6}
}