/* ============================================================
   UpNxtWork — Shared Design System
   Purple #7C3AED · Dark #0F0A1E · Green #10B981 · Amber #F59E0B
   Display: Plus Jakarta Sans · Body: Inter · Mono: JetBrains Mono
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@500;600;700;800&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@500;600&display=swap');

:root{
  color-scheme: light;
  --purple:#7C3AED;
  --purple-dark:#5B21B6;
  --purple-light:#EDE4FF;
  --dark:#0F0A1E;
  --green:#10B981;
  --green-light:#D1FAE5;
  --amber:#F59E0B;
  --amber-light:#FEF3C7;
  --red:#DC2626;
  --red-light:#FEE2E2;
  --surface:#FFFFFF;
  --surface-2:#FAFAFA;
  --border:#E8E4F3;
  --text:#0F0A1E;
  --text-muted:#6B7280;
  --radius:14px;
  --radius-sm:8px;
  --shadow:0 1px 2px rgba(15,10,30,.04), 0 8px 24px rgba(15,10,30,.06);
  --shadow-lg:0 12px 32px rgba(15,10,30,.12);
  --font-head:'Plus Jakarta Sans',sans-serif;
  --font-body:'Inter',sans-serif;
  --font-mono:'JetBrains Mono',monospace;
}

/* Fixed, non-adaptive dark — for deliberately-dark decorative blocks (e.g. the startup CTA card),
   which should stay dark even when the rest of the site is in light mode, and vice versa. */
:root{--ink:#0F0A1E}

.theme-toggle{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:7px 10px;border-radius:999px;
  border:1.5px solid var(--border);background:var(--surface);cursor:pointer;font-size:13px;font-weight:600;color:var(--text-muted);
  transition:background-color .2s ease,border-color .2s ease;min-width:34px;min-height:34px;
}
.theme-toggle:hover{border-color:var(--purple)}
.theme-toggle-icon{display:inline-flex;width:16px;height:16px}
.theme-toggle-icon svg{width:100%;height:100%}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;max-width:100%}
body{overflow-x:hidden;max-width:100%;
  margin:0;font-family:var(--font-body);color:var(--text);
  background:var(--surface-2);-webkit-font-smoothing:antialiased;
  line-height:1.55;
}
h1,h2,h3,h4{font-family:var(--font-head);margin:0;letter-spacing:-0.02em;color:var(--dark)}
.detail-line,.field input,.field textarea,code{overflow-wrap:break-word;word-break:break-word}
img{max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
button{font-family:inherit;cursor:pointer}

.container{max-width:1180px;margin:0 auto;padding:0 24px}
.container-narrow{max-width:760px;margin:0 auto;padding:0 24px}
.profile-hero{text-align:center;padding:50px 24px 20px}
.profile-avatar{width:100px;height:100px;border-radius:50%;object-fit:cover;margin:0 auto 20px;display:block;border:2px solid var(--border)}

/* ---------- Nav ---------- */
.topnav{
  position:sticky;top:0;z-index:50;background:rgba(255,255,255,.85);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--border);
}
.topnav .row{display:flex;align-items:center;justify-content:space-between;height:68px}
.brand{display:flex;align-items:center;gap:10px;font-family:var(--font-head);font-weight:800;font-size:19px;color:var(--dark)}
.brand img{height:32px;width:auto}
.nav-links{display:flex;gap:28px;align-items:center}
.nav-links a{font-size:14.5px;font-weight:600;color:var(--text-muted)}
.nav-links a:hover{color:var(--purple)}
.nav-actions{display:flex;gap:10px;align-items:center}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:11px 22px;border-radius:999px;font-weight:700;font-size:14.5px;
  border:1.5px solid transparent;transition:transform .12s ease,box-shadow .12s ease;
  white-space:nowrap;
}
.btn:active{transform:scale(.97)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(124,58,237,.4)}
.btn-outline:hover{border-color:var(--purple);background:var(--purple-light)}
.btn-primary{background:var(--purple);color:#fff;box-shadow:0 4px 14px rgba(124,58,237,.32)}
.btn-primary:hover{background:var(--purple-dark)}
.btn-outline{background:#fff;color:var(--dark);border-color:var(--border)}
.btn-outline:hover{border-color:var(--purple);color:var(--purple)}
.btn-ghost{background:transparent;color:var(--text-muted)}
.btn-ghost:hover{color:var(--dark)}
.btn-sm{padding:7px 16px;font-size:13px}
.btn-green{background:var(--green);color:#fff}
.btn-disabled,.btn:disabled{background:#E5E7EB!important;color:#9CA3AF!important;box-shadow:none!important;cursor:not-allowed}
.btn-block{width:100%}

/* ---------- Cards / surfaces ---------- */
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:26px;transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}
.card-shadow{box-shadow:var(--shadow)}

/* ---------- Badges ---------- */
.badge{display:inline-flex;align-items:center;gap:6px;padding:4px 11px;border-radius:999px;font-size:12.5px;font-weight:700}
.badge-purple{background:var(--purple-light);color:var(--purple-dark)}
.badge-green{background:var(--green-light);color:#047857}
.badge-amber{background:var(--amber-light);color:#B45309}
.badge-red{background:var(--red-light);color:#B91C1C}
.badge-grey{background:#F1F1F4;color:var(--text-muted)}

/* ---------- Forms ---------- */
.field{margin-bottom:18px}
.field label{display:block;font-size:13.5px;font-weight:700;color:var(--dark);margin-bottom:7px}
.field .hint{font-size:12.5px;color:var(--text-muted);margin-top:5px}
input[type=text],input[type=email],input[type=password],input[type=number],input[type=url],input[type=date],input[type=datetime-local],select,textarea{
  width:100%;padding:12px 14px;border:1.5px solid var(--border);border-radius:var(--radius-sm);
  font-family:inherit;font-size:14.5px;background:var(--surface);color:var(--text);
}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--purple);box-shadow:0 0 0 3px var(--purple-light)}
textarea{resize:vertical;min-height:90px}

/* ---------- Skill checklist ---------- */
.skill-domain{margin-bottom:22px}
.skill-domain-enter{animation:domainFadeIn .28s cubic-bezier(.16,1,.3,1) forwards}
.skill-domain-exit{animation:domainFadeOut .18s ease forwards}
@keyframes domainFadeIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}
@keyframes domainFadeOut{from{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-6px)}}
.chip-enter{animation:chipFadeIn .3s ease backwards}
@keyframes chipFadeIn{from{opacity:0;transform:scale(.9)}to{opacity:1;transform:scale(1)}}
.card-enter{animation:cardFadeIn .35s cubic-bezier(.16,1,.3,1) backwards}
@keyframes cardFadeIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
@media (prefers-reduced-motion: reduce){
  .skill-domain-enter,.skill-domain-exit,.chip-enter,.card-enter{animation:none}
}
.skill-domain h4{font-size:14px;color:var(--purple-dark);text-transform:uppercase;letter-spacing:.04em;margin-bottom:10px}
.skill-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:8px}
.skill-chip{
  display:flex;align-items:center;gap:8px;padding:9px 12px;border:1.5px solid var(--border);
  border-radius:var(--radius-sm);font-size:13.5px;cursor:pointer;background:#fff;user-select:none;
}
.skill-chip:hover{border-color:var(--purple)}
.skill-chip.checked{background:var(--purple-light);border-color:var(--purple);font-weight:600}
.skill-chip input{margin:0}
.skill-level{margin-left:auto;font-size:10.5px;font-weight:700;color:var(--purple);font-family:var(--font-mono);background:var(--purple-light);padding:2px 6px;border-radius:4px}

/* ---------- Match meter ---------- */
.match-meter{display:flex;align-items:center;gap:10px}
.match-bar{flex:1;height:8px;border-radius:99px;background:#EEE;overflow:hidden}
.match-bar-fill{height:100%;border-radius:99px;background:var(--green)}
.match-bar-fill.low{background:#D1D5DB}
.match-pct{font-family:var(--font-mono);font-weight:700;font-size:13px;min-width:42px;text-align:right}

/* ---------- Tables ---------- */
table{width:100%;border-collapse:collapse}
th,td{text-align:left;padding:12px 14px;font-size:13.5px;border-bottom:1px solid var(--border)}
th{color:var(--text-muted);font-weight:700;font-size:12px;text-transform:uppercase;letter-spacing:.04em}
tr:last-child td{border-bottom:none}

/* ---------- Dashboard layout ---------- */
.dash-shell{display:flex;min-height:calc(100vh - 68px)}
.dash-sidebar{width:230px;flex-shrink:0;background:#fff;border-right:1px solid var(--border);padding:24px 14px}
.dash-sidebar a{display:flex;align-items:center;gap:10px;padding:10px 14px;border-radius:var(--radius-sm);font-size:14px;font-weight:600;color:var(--text-muted);margin-bottom:4px}
.dash-sidebar a span{display:inline}
.dash-sidebar a.active,.dash-sidebar a:hover{background:var(--purple-light);color:var(--purple-dark)}
.dash-main{flex:1;padding:32px;max-width:980px}
.dash-header{margin-bottom:28px}
.dash-header h1{font-size:26px;margin-bottom:4px}
.dash-header p{color:var(--text-muted);font-size:14.5px;margin:0}

.stat-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:14px;margin-bottom:28px}
.stat-box{background:#fff;border:1px solid var(--border);border-radius:var(--radius);padding:18px}

/* Founder dashboard: warmer hero + benefit strip so it never feels empty */
.founder-hero{
  background:linear-gradient(135deg,var(--purple-light) 0%,var(--surface) 100%);
  border-radius:var(--radius);padding:28px;margin-bottom:20px;border:1px solid var(--border);
}
.founder-benefit-strip{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px;margin-bottom:24px}
.founder-benefit-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:20px;transition:transform .2s ease,box-shadow .2s ease}
.founder-benefit-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg)}
.founder-benefit-icon{width:44px;height:44px;border-radius:12px;background:var(--purple-light);color:var(--purple);display:flex;align-items:center;justify-content:center;margin-bottom:12px}
.founder-benefit-icon svg{width:22px;height:22px}
.founder-benefit-card h4{font-size:14.5px;margin-bottom:4px}
.founder-benefit-card p{font-size:12.5px;color:var(--text-muted);margin:0}

/* Signature moment: hero verification stamp draws itself in */
.stamp-wrap{width:88px;height:88px;flex-shrink:0}
.verify-stamp{width:100%;height:100%}
.stamp-circle{stroke-dasharray:327;stroke-dashoffset:327;animation:drawCircle 1s cubic-bezier(.65,0,.35,1) forwards;animation-delay:.5s}
.stamp-check{stroke-dasharray:70;stroke-dashoffset:70;animation:drawCheck .5s ease-out forwards;animation-delay:1.35s}
@keyframes drawCircle{to{stroke-dashoffset:0}}
@keyframes drawCheck{to{stroke-dashoffset:0}}

/* Orchestrated hero entrance - each element rises in with its own delay (--d) */
.hero-anim{opacity:0;transform:translateY(16px);animation:heroRise .6s cubic-bezier(.16,1,.3,1) forwards;animation-delay:var(--d,0s)}
@keyframes heroRise{to{opacity:1;transform:translateY(0)}}

@media(max-width:640px){
  .stamp-wrap{width:60px;height:60px}
  .nav-get-started{display:none}
}
@media (prefers-reduced-motion: reduce){
  .hero-anim{opacity:1;transform:none;animation:none}
  .stamp-circle,.stamp-check{stroke-dashoffset:0;animation:none}
}

/* Homepage journey pipeline (How it works) */
.journey-flow{display:flex;align-items:flex-start;gap:0;max-width:1100px;margin:0 auto}
.journey-step{flex:1 1 0;min-width:0;text-align:center;padding:0 8px}
.journey-icon{
  width:56px;height:56px;margin:0 auto 12px;border-radius:50%;background:var(--purple-light);
  display:flex;align-items:center;justify-content:center;color:var(--purple);position:relative;z-index:2;
}
.journey-icon svg{width:26px;height:26px}
.journey-num{display:block;font-family:var(--font-head);font-weight:800;font-size:12px;color:var(--purple);letter-spacing:1px;margin-bottom:6px}
.journey-step h3{font-size:16px;margin-bottom:8px}
.journey-step p{font-size:13.5px;color:var(--text-muted);margin:0}
.journey-connector{flex:0 0 auto;width:60px;height:2px;background:var(--border);margin-top:28px;position:relative}
.journey-connector::after{
  content:"";position:absolute;right:-1px;top:50%;transform:translateY(-50%);
  width:0;height:0;border-top:4px solid transparent;border-bottom:4px solid transparent;border-left:6px solid var(--border);
}

@media(max-width:860px){
  .journey-flow{flex-direction:column;align-items:stretch;gap:0;max-width:480px}
  .journey-step{text-align:left;display:flex;gap:16px;align-items:flex-start;padding:0}
  .journey-icon{margin:0;flex-shrink:0}
  .journey-connector{width:2px;height:28px;margin:0 0 0 27px}
  .journey-connector::after{
    right:auto;top:auto;bottom:-1px;left:50%;transform:translateX(-50%);
    border-left:4px solid transparent;border-right:4px solid transparent;border-top:6px solid var(--border);border-bottom:none;
  }
}
.stat-box .num{font-family:var(--font-head);font-size:26px;font-weight:800;color:var(--dark)}
.stat-box .lbl{font-size:12.5px;color:var(--text-muted);font-weight:600}

.project-card{border:1px solid var(--border);border-radius:var(--radius);padding:20px;margin-bottom:14px;background:#fff}
.project-card h3{font-size:17px;margin-bottom:6px}
.project-card .meta{display:flex;gap:14px;flex-wrap:wrap;font-size:12.5px;color:var(--text-muted);margin:8px 0}

.empty-state{text-align:center;padding:56px 20px;color:var(--text-muted)}
.empty-state .empty-icon{
  width:56px;height:56px;margin:0 auto 16px;border-radius:50%;
  background:var(--purple-light);position:relative;
}
.empty-state .empty-icon::before{
  content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:22px;height:16px;border:2.5px solid var(--purple);border-radius:3px;
}
.empty-state .empty-icon::after{
  content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-70%);
  width:12px;height:2.5px;background:var(--purple);border-radius:2px;
}
.empty-state h3{color:var(--dark);margin-bottom:8px;font-size:17px}
.empty-state p{max-width:360px;margin:0 auto 16px;font-size:13.5px}

.toast{position:fixed;bottom:24px;right:24px;background:var(--dark);color:#fff;padding:14px 20px;border-radius:var(--radius-sm);font-size:14px;box-shadow:var(--shadow-lg);z-index:250;max-width:320px}
.toast.error{background:var(--red)}
.toast.success{background:var(--green)}
@media(max-width:640px){
  .toast{bottom:82px;left:16px;right:16px;max-width:none}
}

.auth-shell{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:40px 20px;background:linear-gradient(180deg,#fff 0%,var(--surface-2) 100%)}
.auth-card{width:100%;max-width:420px}
.role-tabs{display:flex;gap:8px;margin-bottom:24px;background:#F1EEFB;padding:5px;border-radius:999px}
.role-tab{flex:1;text-align:center;padding:9px;border-radius:999px;font-weight:700;font-size:13.5px;color:var(--text-muted)}
.role-tab.active{background:#fff;color:var(--purple-dark);box-shadow:0 1px 4px rgba(0,0,0,.08)}

.footer{border-top:1px solid var(--border);padding:40px 0;margin-top:60px;color:var(--text-muted);font-size:13.5px}
.footer a{position:relative;transition:color .2s ease}
.footer a:hover{color:var(--purple)}
.footer a::after{content:"";position:absolute;left:0;bottom:-2px;width:0;height:1px;background:var(--purple);transition:width .25s ease}
.footer a:hover::after{width:100%}
.trust-strip .trust-item,.hs-stat-strip .stat,.stat-box{transition:transform .2s ease,box-shadow .2s ease}
.trust-strip .trust-item:hover,.hs-stat-strip .stat:hover,.stat-box:hover{transform:translateY(-3px)}

.tab-strip{display:flex;gap:6px;margin-bottom:16px;flex-wrap:wrap}
.tab-btn{padding:8px 14px;border-radius:999px;font-size:13px;font-weight:700;color:var(--text-muted);background:#fff;border:1.5px solid var(--border);cursor:pointer}
.tab-btn.active{background:var(--dark);color:#fff;border-color:var(--dark)}

@keyframes skeleton-pulse{0%{opacity:.6}50%{opacity:1}100%{opacity:.6}}
.skeleton{background:#ECEAF5;border-radius:var(--radius-sm);animation:skeleton-pulse 1.4s ease-in-out infinite}
.skeleton-card{height:90px;border-radius:var(--radius);margin-bottom:12px}
.skeleton-line{height:14px;margin-bottom:8px;width:70%}

.coming-soon-hero{text-align:center;padding:100px 20px 60px}
.coming-soon-hero .badge{margin-bottom:18px}
.coming-soon-hero h1{font-size:38px;margin-bottom:14px}
.coming-soon-hero p{max-width:520px;margin:0 auto;color:var(--text-muted);font-size:16px}

@media(max-width:860px){
  .dash-shell{flex-direction:column;padding-bottom:70px}
  .dash-sidebar{
    position:fixed;bottom:0;left:0;right:0;width:100%;z-index:100;
    display:flex;flex-direction:row;justify-content:space-around;
    border-right:none;border-top:1px solid var(--border);border-bottom:none;
    padding:8px 4px;background:#fff;box-shadow:0 -2px 12px rgba(15,10,32,.08);
  }
  .dash-sidebar a{
    flex-direction:column;gap:2px;font-size:11px;text-align:center;
    padding:6px 8px;margin-bottom:0;white-space:normal;flex:1;
  }
  /* On mobile, the bottom bar shows nothing but a single Menu trigger.
     Every section lives inside the drawer it opens, not split between
     a few visible icons and a hidden "More" pile. */
  .dash-sidebar > a{display:none}
  .sidebar-more-btn{
    display:flex;flex-direction:column;align-items:center;gap:3px;
    font-size:12px;text-align:center;padding:10px 8px;width:100%;
    background:none;border:none;color:var(--text-muted);font-weight:600;
    font-family:inherit;cursor:pointer;
  }
  .sidebar-more-btn svg{width:22px;height:22px}
  .sidebar-more-panel{
    display:none;position:fixed;bottom:64px;left:12px;right:12px;z-index:101;
    background:#fff;border-radius:var(--radius);box-shadow:var(--shadow-lg);
    padding:8px;border:1px solid var(--border);max-height:70vh;overflow-y:auto;
  }
  .sidebar-more-panel.open{display:block}
  .sidebar-more-panel a{
    display:flex!important;flex-direction:row!important;align-items:center;gap:10px;
    padding:14px;font-size:14.5px;text-align:left;border-radius:var(--radius-sm);
    color:var(--text-muted);font-weight:600;
  }
  .sidebar-more-panel a.active,.sidebar-more-panel a:hover{background:var(--purple-light);color:var(--purple-dark)}
  .dash-main{padding:20px 16px 160px;max-width:100%}
  .dash-header h1{font-size:22px}
  .stat-row{grid-template-columns:repeat(2,1fr)}
  .nav-links{display:none}
  .project-card,.card{padding:18px}
  table{font-size:12.5px}
  th,td{padding:8px 6px}
  .modal-box{padding:20px;max-width:100%}
  .role-tabs{flex-wrap:wrap}
}
@media(min-width:861px){
  .sidebar-more-btn{display:none}
  .dash-sidebar > a{display:flex}
  .sidebar-more-panel{display:contents}
}
@media(max-width:480px){
  .stat-row{grid-template-columns:1fr}
  .filter-row{flex-direction:column}
  .filter-row input,.filter-row select{max-width:100%}
  .btn{padding:12px 20px}
  .skill-grid{grid-template-columns:1fr}
}

/* ============================================================
   Mobile-wide fixes — catches inline styles too (grids, modals,
   fixed-position overlays) that plain class rules can't reach.
   ============================================================ */
/* These must hold at tablet width and unusual screen-share resolutions too,
   not just phones - genuine overflow safety, not cosmetic compacting. */
@media(max-width:860px){
  [style*="position:fixed"][style*="inset:0"]{padding:16px!important;align-items:flex-start!important}
  [style*="position:fixed"][style*="inset:0"] > div{max-width:100%!important;width:100%!important;padding:20px!important;max-height:85vh;overflow-y:auto;margin-top:8px}
  table{display:block;overflow-x:auto;white-space:nowrap;-webkit-overflow-scrolling:touch}
}
@media(max-width:640px){
  [style*="grid-template-columns"]{grid-template-columns:1fr!important}
  .trust-strip,.hs-stat-strip{gap:10px!important}
  .trust-strip .trust-item,.hs-stat-strip .stat{min-width:0!important;flex:1 1 45%!important}
  .container,.container-narrow{padding-left:16px;padding-right:16px}
  .card .card{padding:14px}
  .row-actions,.hs-section .row-actions{flex-wrap:wrap}
  .meta{row-gap:6px}
  .auth-card{max-width:100%;width:100%}
  .auth-shell{padding:24px 16px}
  .topnav .row{height:auto;min-height:60px;flex-wrap:wrap;padding-top:8px;padding-bottom:8px;gap:8px}
  .nav-actions{flex-wrap:wrap;justify-content:flex-end}
  .nav-actions .btn{padding:8px 14px;font-size:13px}
}
@media(max-width:380px){
  h1{font-size:22px!important}
  .dash-header h1{font-size:20px!important}
  .btn{font-size:13px;padding:10px 16px}
  .nav-actions{gap:6px!important}
  .theme-toggle{padding:6px 8px;font-size:12px}
  .brand{font-size:15px!important}
  .brand img{height:26px!important}
}

/* ============================================================
   Motion & polish — makes the site feel alive and trustworthy
   ============================================================ */
@media (prefers-reduced-motion: no-preference) {
  .reveal{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s ease}
  .reveal.in-view{opacity:1;transform:translateY(0)}
}
@media (prefers-reduced-motion: reduce) {
  .reveal{opacity:1;transform:none}
}

.card,.project-card,.row-card{transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}
.card:hover,.project-card:hover{transform:translateY(-2px);box-shadow:var(--shadow)}
.row-card:hover{transform:translateX(2px)}

.btn{transition:transform .15s ease,box-shadow .15s ease,background-color .15s ease}
.btn-primary:hover{transform:translateY(-1px);box-shadow:0 6px 18px rgba(124,58,237,.4)}
.btn-green:hover{transform:translateY(-1px);box-shadow:0 6px 18px rgba(16,185,129,.35)}

.skill-chip{transition:transform .12s ease,border-color .12s ease,background-color .12s ease}
.skill-chip:hover{transform:scale(1.02)}

.stat-box{transition:transform .18s ease,box-shadow .18s ease}
.stat-box:hover{transform:translateY(-2px);box-shadow:var(--shadow)}

.tab-btn{transition:background-color .15s ease,color .15s ease,transform .1s ease}
.tab-btn:active{transform:scale(.96)}

.badge{transition:transform .15s ease}

a{transition:color .15s ease}

.match-bar-fill{transition:width .8s cubic-bezier(.4,0,.2,1)}

.trust-strip{
  display:flex;flex-wrap:wrap;justify-content:center;gap:28px;
  padding:28px 20px;opacity:.75;
}
.trust-strip .trust-item{
  display:flex;align-items:center;gap:8px;font-size:13px;font-weight:600;color:var(--text-muted);
}
.trust-strip .trust-item .dot{width:6px;height:6px;border-radius:50%;background:var(--green)}

@keyframes float-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
.stagger-in > *{animation:float-in .5s ease both}
.stagger-in > *:nth-child(1){animation-delay:.05s}
.stagger-in > *:nth-child(2){animation-delay:.12s}
.stagger-in > *:nth-child(3){animation-delay:.19s}
.stagger-in > *:nth-child(4){animation-delay:.26s}

.verified-ribbon{
  display:inline-flex;align-items:center;gap:6px;background:var(--green-light);color:#047857;
  padding:5px 12px;border-radius:999px;font-size:12.5px;font-weight:700;
}
.verified-ribbon::before{content:"✓";background:var(--green);color:#fff;width:14px;height:14px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:10px}

.help-widget-btn{position:fixed;bottom:20px;right:20px;z-index:150;width:56px;height:56px;border-radius:50%}
.help-widget-panel{position:fixed;bottom:86px;right:20px;z-index:150;width:min(320px,calc(100vw - 40px))}
/* Dashboard pages have their own fixed bottom nav on mobile (z-index:100),
   which sits in roughly this same bottom strip of the screen. Without this,
   the WhatsApp button would visually collide with it. Push both up clear of
   that bar specifically when it's present. */
@media(max-width:860px){
  .dash-shell ~ .help-widget-btn, body:has(.dash-shell) .help-widget-btn{bottom:86px}
  .dash-shell ~ .help-widget-panel, body:has(.dash-shell) .help-widget-panel{bottom:152px}
}
@media(max-width:640px){
  #portfolioSlugRow{flex-direction:column;align-items:stretch!important}
  #portfolioSlugRow span{white-space:normal!important;word-break:break-all}
}
/* Real bottom clearance for the floating help widget on public/non-dashboard
   pages, applied once to body (not repeated .container divs), so the very
   last content on any page never sits behind the floating button. Skipped
   on dashboard pages, which already have their own sufficient clearance via
   .dash-shell and .dash-main, stacking both would just add unneeded blank
   space at the bottom of every dashboard page. */
@media(max-width:860px){
  body:not(:has(.dash-shell)){padding-bottom:90px}
}