@import url('https://api.fontshare.com/v2/css?f[]=cabinet-grotesk@400,500,700,800&f[]=satoshi@400,500,700&display=swap');

:root{
  --white:#FFFFFF;
  --paper:#FFFFFF;
  --navy:#1B212D;
  --navy-80:rgba(27,33,45,.82);
  --navy-65:rgba(27,33,45,.65);
  --navy-45:rgba(27,33,45,.45);
  --navy-25:rgba(27,33,45,.25);
  --navy-10:rgba(27,33,45,.1);
  --navy-06:rgba(27,33,45,.06);
  --teal:#0F766D;
  --teal-dark:#0B5850;
  --teal-08:rgba(15,118,109,.08);
  --teal-16:rgba(15,118,109,.16);
  --orange:#ED7546;
  --orange-dark:#D9612F;
  --orange-10:rgba(237,117,70,.1);
  --gold:#F0C465;
  --gold-16:rgba(240,196,101,.16);
  --icon-black:#000000;
  --icon-green:#16A34A;
  --card-stroke:rgba(27,33,45,.09); /* neutral hairline: cards no longer carry a green outline */
  --r-pill:100px;
  --r-btn:10px;
  --r-xl:20px;
  --r-lg:14px;
  --r-md:10px;
  --shadow-card:0 0 1px rgba(27,33,45,.06), 0 0 26px -4px rgba(27,33,45,.12), 0 14px 32px -16px rgba(27,33,45,.16);
  --shadow-card-hover:0 0 1px rgba(27,33,45,.08), 0 0 46px -6px rgba(27,33,45,.22), 0 26px 54px -20px rgba(27,33,45,.26);
  --shadow-nav:0 0 1px rgba(27,33,45,.05), 0 10px 40px -8px rgba(27,33,45,.16), 0 24px 60px -20px rgba(27,33,45,.14);
  --ease:cubic-bezier(.16,1,.3,1);
  --container:1220px;
  /* Public marketing typography (Dipo-direction stand-in until Dipo font
     files are provided). Authenticated app pages keep DM Sans via their
     own stylesheets and are not affected by these variables alone. */
  --font-ui:'Cabinet Grotesk',sans-serif;
  --font-body:'Cabinet Grotesk',sans-serif;
  --space-1:4px;
  --space-2:8px;
  --space-3:12px;
  --space-4:16px;
  --space-6:24px;
  --space-8:32px;
  --space-12:48px;
  --space-16:64px;
}
*{box-sizing:border-box;margin:0;padding:0;}
html,body{max-width:100%;overflow-x:clip;}
html{scroll-behavior:smooth;}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;}
}
body{font-family:var(--font-body);background:var(--white);color:var(--navy);-webkit-font-smoothing:antialiased;overflow-x:hidden;font-weight:400;}
h1,.font-display,h2,h3,h4,h5,h6{font-family:var(--font-ui);letter-spacing:-.025em;font-weight:650;}
a{color:inherit;text-decoration:none;}
img{max-width:100%;display:block;}
button,input,select,textarea,label,nav{font-family:var(--font-ui);}
button{cursor:pointer;border:none;background:none;color:inherit;}
::selection{background:var(--orange);color:var(--white);}
:focus-visible{outline:2px solid var(--teal);outline-offset:3px;border-radius:4px;}
.wrap{max-width:var(--container);margin:0 auto;padding:0 32px;}
@media (max-width:720px){.wrap{padding:0 20px;}}
section{position:relative;}

/* type helpers */
.eyebrow{font-size:11.5px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--teal);display:inline-flex;align-items:center;gap:9px;margin-bottom:16px;}
.eyebrow.on-dark{color:var(--gold);}

/* reveal on scroll */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .85s var(--ease), transform .85s var(--ease);}
.reveal.in{opacity:1;transform:translateY(0);}
.reveal-stagger > *{opacity:0;transform:translateY(20px);transition:opacity .75s var(--ease), transform .75s var(--ease);}
.reveal-stagger.in > *{opacity:1;transform:translateY(0);}
.reveal-stagger.in > *:nth-child(1){transition-delay:.04s;}
.reveal-stagger.in > *:nth-child(2){transition-delay:.1s;}
.reveal-stagger.in > *:nth-child(3){transition-delay:.16s;}
.reveal-stagger.in > *:nth-child(4){transition-delay:.22s;}
.reveal-stagger.in > *:nth-child(5){transition-delay:.28s;}
.reveal-stagger.in > *:nth-child(6){transition-delay:.34s;}
.reveal-stagger.in > *:nth-child(7){transition-delay:.4s;}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:8px;padding:14px 24px;border-radius:var(--r-btn,10px);font-size:14px;font-weight:500;transition:transform .4s var(--ease), box-shadow .4s var(--ease), background .3s, color .3s, border-color .3s;white-space:nowrap;}
.btn .arrow{transition:transform .4s var(--ease);flex-shrink:0;}
.btn:hover .arrow{transform:translateX(4px);}
.btn-orange{background:var(--orange);color:var(--white);}
.btn-orange:hover{background:var(--orange-dark);transform:translateY(-2px);box-shadow:0 14px 28px -10px rgba(237,117,70,.55);}
.btn-teal{background:var(--teal);color:var(--white);}
.btn-teal:hover{background:var(--teal-dark);transform:translateY(-2px);box-shadow:0 14px 28px -10px rgba(15,118,109,.5);}
/* Business/Professional account-type rebuild: the Professional sign-up CTA
   (join.html's "I'm a Professional" choice card + professional-onboarding.html
   Step 1's Continue button) is green, distinct from --teal used elsewhere in
   that wizard; --icon-green is the existing brand green (verified badges). */
.btn-green{background:var(--icon-green);color:var(--white);}
.btn-green:hover{background:#12813A;transform:translateY(-2px);box-shadow:0 14px 28px -10px rgba(22,163,74,.5);}
.btn-outline{border:1.5px solid var(--navy);color:var(--navy);background:transparent;}
.btn-outline:hover{border-color:var(--navy);transform:translateY(-2px);}
.btn-outline-light{border:1.5px solid rgba(255,255,255,.28);color:var(--white);background:transparent;}
.btn-outline-light:hover{border-color:#fff;transform:translateY(-2px);}
.btn-ghost{padding:0;color:var(--navy-65);font-weight:500;font-size:13.5px;}
.btn-ghost:hover{color:var(--teal);}
.btn-ghost .arrow{margin-left:1px;}
.btn-sm{padding:11px 20px;font-size:13px;}
.btn-lg{padding:16px 30px;font-size:15px;}
.btn[disabled]{opacity:.55;pointer-events:none;}

/* nav -- floating raised pill bar, inset from the viewport edges with a
   rounded frame and a shadow that surrounds the whole bar (not just a
   flat line underneath), so it visually lifts off the page like a card. */
header.site-nav{position:fixed;top:16px;left:20px;right:20px;z-index:1000;max-width:calc(var(--container) + 40px);margin:0 auto;border-radius:var(--r-xl);padding:14px 0;background:rgba(255,255,255,.92);backdrop-filter:blur(14px) saturate(1.4);-webkit-backdrop-filter:blur(14px) saturate(1.4);box-shadow:var(--shadow-nav);border:1px solid rgba(27,33,45,.05);transition:top .4s var(--ease), padding .4s var(--ease), background .4s var(--ease), box-shadow .4s var(--ease);}
header.site-nav.scrolled{top:10px;padding:11px 0;background:rgba(255,255,255,.97);box-shadow:0 0 1px rgba(27,33,45,.08), 0 16px 44px -14px rgba(27,33,45,.22);}
/* ---- Mobile "shaking" fix: iOS Safari repaints a position:fixed
   element's backdrop-filter blur on every scroll frame. Combined with
   the JS scroll listener toggling .scrolled (which also animates
   padding, resizing the fixed box mid-scroll), this produced a visible
   vibration/flicker in the header while scrolling on phones. Below a
   mobile breakpoint we drop the live blur for a solid background and
   stop animating padding on scroll -- the header keeps a fixed height,
   so there's nothing left for the compositor to fight over. Desktop
   keeps the original blurred/shrinking nav untouched. ---- */
@media (max-width:900px){
  /* top/left/right/padding are now identical in the base and .scrolled
     states -- on mobile the header no longer resizes or shifts position
     at all while scrolling, only its background/shadow change, so there's
     nothing left to visibly shake or drift on touch. */
  header.site-nav{top:10px;left:12px;right:12px;padding:12px 0;border-radius:var(--r-lg);background:#fff;backdrop-filter:none;-webkit-backdrop-filter:none;transition:box-shadow .4s var(--ease);}
  header.site-nav.scrolled{background:#fff;}
}
.nav-inner{display:flex;align-items:center;justify-content:space-between;gap:24px;}
.logo{display:flex;align-items:center;gap:9px;flex-shrink:0;}
.logo img{height:34px;width:auto;display:block;}
@media (max-width:720px){.logo img{height:28px;}}
.nav-links{display:flex;gap:6px;align-items:center;background:var(--white);border-radius:var(--r-xl);box-shadow:var(--shadow-card);padding:5px 6px;}
.nav-links a{font-size:12.5px;font-weight:500;color:var(--navy-65);transition:color .25s, background .25s;position:relative;padding:8px 14px;border-radius:var(--r-pill);}
.nav-links a:hover{color:var(--navy);background:var(--navy-06);}
.nav-right{display:flex;align-items:center;gap:18px;flex-shrink:0;}
.menu-toggle{display:none;align-items:center;justify-content:center;gap:9px;width:40px;height:40px;padding:0;border-radius:50%;background:var(--navy-06);transition:background .35s var(--ease), transform .25s var(--ease);}
.menu-toggle:hover{background:var(--navy-10);}
.menu-toggle:active{transform:scale(.9);}
.menu-toggle .lines{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;width:17px;}
.menu-toggle .lines span{display:block;height:1.6px;width:100%;background:var(--navy);border-radius:2px;transition:transform .45s var(--ease), opacity .25s var(--ease), width .3s var(--ease);}
.menu-toggle .lines span:last-child{width:70%;align-self:flex-end;}
.menu-toggle .mlabel{font-size:12.5px;font-weight:500;}
.menu-toggle.open .lines span:first-child,
body:has(#mobileOverlay.open) #menuToggle .lines span:first-child{transform:translateY(3.3px) rotate(45deg);width:100%;}
.menu-toggle.open .lines span:last-child,
body:has(#mobileOverlay.open) #menuToggle .lines span:last-child{transform:translateY(-3.3px) rotate(-45deg);width:100%;}

/* Real header hamburger morphs into an X in place -- no separate close icon
   needed. !important because this button also carries the .menu-toggle
   class for its morph-to-X styling, and the shared .menu-toggle{display:flex}
   mobile rule further down the sheet has equal specificity and was winning
   on source order, which is what made the redundant "Close" pill show up
   inside the drawer on mobile. */
.mobile-close{display:none !important;}

/* While the drawer is open, the header collapses to just the logo + the
   hamburger/X toggle -- the header's own "Join ProfilePro" button is hidden
   so it isn't duplicated with the button already at the bottom of the
   drawer. */
body:has(#mobileOverlay.open) .nav-right .btn-orange.btn-sm,
body:has(#mobileOverlay.open) #navLoggedOutLinks .nav-login{display:none !important;}

.mobile-overlay{position:fixed;top:92px;left:16px;right:16px;max-height:calc(100vh - 108px);z-index:1100;background:var(--paper);border-radius:28px;box-shadow:0 30px 70px -18px rgba(27,33,45,.32),0 10px 26px -10px rgba(27,33,45,.16);display:flex;flex-direction:column;padding:18px 22px 20px;overflow-y:auto;transform:translateY(-14px) scale(.97);opacity:0;pointer-events:none;transition:transform .5s var(--ease), opacity .4s var(--ease);}
.mobile-overlay.open{transform:translateY(0) scale(1);opacity:1;pointer-events:auto;}
.mobile-overlay .mo-foot .btn-orange{background:var(--teal);}
.mobile-overlay .mo-foot .btn-orange:hover{background:var(--teal-dark);}
.mobile-overlay .mo-links{display:flex;flex-direction:column;}
.mobile-overlay .mo-links a{font-family:'Cabinet Grotesk',sans-serif;font-size:14.5px;font-weight:500;color:var(--navy);padding:11px 0;border-bottom:1px solid var(--navy-06);display:flex;align-items:center;justify-content:space-between;letter-spacing:-.01em;opacity:0;transform:translateY(14px);transition:opacity .5s var(--ease), transform .5s var(--ease);}
.mobile-overlay.open .mo-links a{opacity:1;transform:translateY(0);}
.mobile-overlay.open .mo-links a:nth-child(1){transition-delay:.06s;}
.mobile-overlay.open .mo-links a:nth-child(2){transition-delay:.11s;}
.mobile-overlay.open .mo-links a:nth-child(3){transition-delay:.16s;}
.mobile-overlay.open .mo-links a:nth-child(4){transition-delay:.21s;}
.mobile-overlay.open .mo-links a:nth-child(5){transition-delay:.26s;}
.mobile-overlay.open .mo-links a:nth-child(6){transition-delay:.31s;}
.mobile-overlay .mo-links a svg{opacity:.35;flex-shrink:0;}
.mobile-overlay .mo-foot{margin-top:14px;display:flex;flex-direction:column;gap:14px;}

/* generic layout bits */
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center;}
@media (max-width:860px){.two-col{grid-template-columns:1fr;gap:40px;}}

/* HERO */
.hero{padding:158px 0 84px;overflow:hidden;position:relative;}
.hero-orb{position:absolute;border-radius:50%;filter:blur(90px);pointer-events:none;}
.hero-orb.o1{width:480px;height:480px;background:var(--teal);top:-210px;right:-140px;opacity:.13;}
.hero-orb.o2{width:340px;height:340px;background:var(--gold);bottom:-160px;left:-130px;opacity:.18;}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:50px;align-items:center;}
@media (max-width:900px){.hero-grid{grid-template-columns:1fr;}}
.hero-head{max-width:600px;}
.hero h1{font-size:clamp(30.5px,5vw,52px);font-weight:400;line-height:1.08;letter-spacing:-.02em;}
.hero p.sub{margin-top:22px;font-size:17px;line-height:1.6;color:var(--navy-65);max-width:480px;font-weight:400;}
.hero-ctas{display:flex;gap:12px;margin-top:32px;flex-wrap:wrap;align-items:center;}
.ask-pearl-link{margin-top:24px;font-size:13.5px;color:var(--navy-45);display:inline-flex;align-items:center;gap:8px;}
.ask-pearl-link span.hl{color:var(--teal);font-weight:500;}
.ask-pearl-link:hover span.hl{text-decoration:underline;}
.ask-pearl-link .dot{width:6px;height:6px;border-radius:50%;background:var(--gold);flex-shrink:0;}

.hero-stage{position:relative;height:500px;}
.float-card{position:absolute;background:var(--white);border-radius:var(--r-md);box-shadow:0 30px 60px -24px rgba(27,33,45,.18);border:1px solid var(--navy-06);padding:18px 20px;animation:drift 7.5s ease-in-out infinite;}
@keyframes drift{0%,100%{transform:translateY(0);}50%{transform:translateY(-13px);}}
.float-card.profile{top:4%;left:0;width:220px;animation-delay:.1s;}
.float-card.job{top:0;right:2%;width:220px;animation-delay:1s;}
.float-card.msg{bottom:22%;left:16%;width:240px;animation-delay:.55s;}
.float-card.stat{bottom:4%;right:10%;width:210px;animation-delay:1.5s;}
.fc-row{display:flex;align-items:center;gap:10px;}
.avatar{width:36px;height:36px;border-radius:50%;flex-shrink:0;background:linear-gradient(135deg,var(--teal),var(--navy));display:flex;align-items:center;justify-content:center;color:#fff;font-weight:600;font-size:12px;font-family:'Cabinet Grotesk',sans-serif;}
.fc-name{font-weight:600;font-size:13px;}
.fc-role{font-size:11px;color:var(--navy-45);font-weight:400;}
.fc-tags{display:flex;gap:6px;margin-top:12px;flex-wrap:wrap;}
.fc-pill{font-size:11px;font-weight:500;color:var(--navy-65);background:var(--navy-06);padding:4px 9px;border-radius:100px;}
.fc-eyebrow{font-size:11px;font-weight:600;color:var(--orange);text-transform:uppercase;letter-spacing:.06em;margin-bottom:6px;}
.fc-title{font-weight:600;font-size:14px;}
.fc-meta{font-size:11px;color:var(--navy-45);margin-top:3px;font-weight:400;}
.fc-foot{display:flex;justify-content:space-between;align-items:center;margin-top:14px;}
.fc-kind{font-size:11px;font-weight:500;color:var(--navy-45);}
.fc-price{font-weight:600;font-size:12px;color:var(--teal);}
.fc-quote{font-size:12.5px;color:var(--navy-65);line-height:1.5;font-style:italic;}
.stat-row{display:flex;align-items:center;gap:8px;}
.stat-row .dot-green{width:7px;height:7px;border-radius:50%;background:#2FAE6B;flex-shrink:0;}
.stat-big{font-family:'Cabinet Grotesk',sans-serif;font-size:13.5px;font-weight:600;}
@media (max-width:900px){
  .hero{padding:126px 0 30px;}
  .hero-stage{height:400px;}
  .float-card{transform:scale(.85);}
  .float-card.profile{left:-6%;}
  .float-card.job{right:-8%;}
  .float-card.stat{right:-6%;}
}
@media (max-width:560px){
  .hero-stage{height:auto;margin-top:40px;position:static;display:grid;grid-template-columns:1fr 1fr;gap:12px;}
  .float-card{position:static;width:auto !important;animation:none;transform:none;}
}

/* ===== HERO — VIDEO BACKGROUND (Fiverr/Upwork-style) ===== */
.hero-video{
  padding:172px 0 90px;
  min-height:600px;
  display:flex;
  align-items:center;
  color:var(--white);
}
.hero-media{
  position:absolute;
  inset:0;
  z-index:0;
  overflow:hidden;
  background:var(--navy); /* shows instantly while poster/video loads */
}
.hero-bg-video{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center 40%;
  opacity:0;
  transition:opacity .8s var(--ease);
}
.hero-bg-video.is-ready{opacity:1;}
@media (max-width:560px){
  /* Portrait phone screens crop this landscape video much harder than
     desktop does (object-fit:cover has to cut a lot more off the sides
     to fill a tall narrow box), which was cutting the subject out of
     frame. Nudging the focal point up/centered keeps more of her
     visible instead of over-cropping. */
  .hero-bg-video{object-position:center 25%;}
}
/* soft dark overlay so hero text stays readable over any footage —
   light enough that the video reads clearly through it */
.hero-overlay{
  position:absolute;
  inset:0;
  background:
    linear-gradient(180deg, rgba(12,16,22,.42) 0%, rgba(14,18,25,.38) 45%, rgba(10,14,20,.66) 100%),
    radial-gradient(120% 90% at 18% 15%, rgba(15,118,109,.22), transparent 60%);
}
.hero-video .hero-content{
  position:relative;
  z-index:2;
  max-width:640px;
  margin:0 auto;
  text-align:center;
}
.hero-panel{
  max-height:0;
  opacity:0;
  overflow:hidden;
}
.hero-panel.active{max-height:600px;opacity:1;}
.hero-panel-tagline{margin-top:26px;font-size:18px;font-weight:500;color:rgba(255,255,255,.92);}
.hero-explore-jobs{margin-top:16px;}
.hero-video h1{color:var(--white);font-weight:500;}
.hero-video p.sub{color:rgba(255,255,255,.85);max-width:520px;margin-left:auto;margin-right:auto;}
.hero-video .ask-pearl-link.on-dark{color:rgba(255,255,255,.7);}
.hero-video .ask-pearl-link.on-dark span.hl{color:var(--gold);}

/* Find Work / Hire Professional toggle, Upwork-style: two separate frosted pills, the active one gets a white ring */
.hero-toggle{
  display:inline-flex;
  gap:10px;
  margin-top:28px;
}
.hero-toggle a,.hero-toggle button{
  padding:14px 28px;
  border-radius:var(--r-pill);
  font-size:13.5px;
  font-weight:500;
  color:rgba(255,255,255,.9);
  background:rgba(255,255,255,.14);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  border:1.5px solid transparent;
  transition:background .3s var(--ease), border-color .3s, color .3s;
  white-space:nowrap;
}
.hero-toggle a:hover,.hero-toggle button:hover{background:rgba(255,255,255,.22);color:var(--white);}
.hero-toggle .active{border-color:rgba(255,255,255,.95);color:var(--white);}

/* search bar sits on top of the video */
.hero-video .hero-search{
  margin:28px auto 0;
  max-width:460px;
}
.hero-video .hero-search form{
  box-shadow:0 24px 60px -18px rgba(0,0,0,.6);
}

/* popular searches, moved into the hero — 4 pills, sized to fit one row */
.hero-popular{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  align-items:center;
  gap:8px;
  margin-top:18px;
}
.hero-popular .pill{
  border:1.5px solid rgba(255,255,255,.28);
  color:rgba(255,255,255,.92);
  background:rgba(255,255,255,.08);
  font-size:12px;
  padding:8px 15px;
}
.hero-popular .pill:hover{background:rgba(255,255,255,.18);border-color:rgba(255,255,255,.5);color:var(--white);}

@media (max-width:900px){
  .hero-video{padding:130px 0 56px;min-height:0;}
  /* the centered hero copy is a desktop/"web view" treatment -- on
     tablet/mobile keep the original left-aligned layout, which reads
     better at narrower widths and matches the compact toggle/pill rows
     below. */
  .hero-video .hero-content{text-align:left;margin:0;}
  .hero-video p.sub{margin-left:0;margin-right:0;}
  .hero-video .hero-search{margin-left:0;margin-right:0;}
  .hero-popular{justify-content:flex-start;}
}
@media (max-width:560px){
  /* Content was hugging the top of the full-height hero, leaving a big
     empty gap below it (down past the video) on phones. Push the whole
     copy block toward the bottom of the hero instead of vertically
     centering it, which closes that gap and also reveals more of the
     top of the video (helps keep the subject in frame). */
  .hero-video{padding:92px 0 44px;min-height:100vh;min-height:100svh;align-items:flex-end;}
  .hero-video .hero-content{max-width:100%;}
  .hero-video p.sub{margin-top:12px;}
  .hero-toggle{width:100%;margin-top:18px;}
  .hero-toggle a,.hero-toggle button{flex:1;text-align:center;padding:11px 10px;}
  .hero-video .hero-search{margin-top:16px;}
  .hero-video .hero-search form{padding:5px 5px 5px 18px;}
  .hero-video .hero-search input{padding:10px 0;font-size:14px;}
  .hero-video .hero-search-btn{width:38px;height:38px;}
  /* keep all pills on a single row like Upwork — scrolls instead of wrapping */
  .hero-popular{flex-wrap:nowrap;justify-content:flex-start;overflow-x:auto;-ms-overflow-style:none;scrollbar-width:none;padding-bottom:2px;margin-left:-2px;margin-top:12px;}
  .hero-popular::-webkit-scrollbar{display:none;}
  .hero-popular .pill{flex-shrink:0;padding:7px 13px;font-size:11.5px;}
  .hero-video .ask-pearl-link{margin-top:16px;}
}
@media (prefers-reduced-motion: reduce){
  .hero-bg-video{display:none;}
}

/* section heads shared */
.sec-top{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;margin-bottom:30px;}
.sec-top h2{font-size:clamp(24.5px,3.6vw,38px);font-weight:600;max-width:540px;line-height:1.12;letter-spacing:-.02em;}
.sec-note{font-size:15px;color:var(--navy-65);max-width:540px;font-weight:400;line-height:1.55;}

/* OPPORTUNITIES / rail */
.rail-section{padding:72px 0 64px;background:var(--paper);overflow-x:hidden;}
.filter-pills{display:flex;flex-wrap:wrap;gap:9px;margin:28px 0 40px;}
.pill{padding:9px 17px;border-radius:100px;border:1.5px solid var(--navy-10);font-size:12.5px;font-weight:500;color:var(--navy-65);transition:all .3s var(--ease);}
.pill:hover,.pill.active{background:#F0F9F6;color:#0F766D;border-color:#0F766D;}
.rail-viewport{overflow-x:auto;cursor:grab;padding:6px 0;scrollbar-width:none;margin:0 -32px;padding-left:32px;}
.rail-viewport::-webkit-scrollbar{display:none;}
.rail-viewport.dragging{cursor:grabbing;}
.rail-track{display:flex;gap:18px;width:max-content;padding-right:32px;}
.opp-card{width:250px;flex-shrink:0;background:var(--white);border-radius:var(--r-md);border:1px solid var(--navy-06);box-shadow:var(--shadow-card);padding:23px;transition:transform .4s var(--ease), box-shadow .4s var(--ease);}
.opp-card:hover{transform:translateY(-7px);box-shadow:var(--shadow-card-hover);}
.opp-title{font-family:'Cabinet Grotesk',sans-serif;font-size:16px;font-weight:600;}
.opp-meta{font-size:12px;color:var(--navy-45);margin-top:5px;}
.opp-foot{display:flex;justify-content:space-between;align-items:center;margin-top:22px;padding-top:15px;border-top:1px solid var(--navy-06);}
.opp-kind{font-size:11px;font-weight:600;color:var(--orange);}
.opp-view{font-size:12px;font-weight:600;color:var(--navy);display:inline-flex;align-items:center;gap:4px;}
.rail-bottom{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:16px;margin-top:34px;}
.rail-note{font-size:13px;color:var(--navy-45);}
.rail-hint{font-size:11px;color:var(--navy-25);display:flex;align-items:center;gap:6px;}
.drag-arrow{display:inline-block;animation:dragNudge 1.6s ease-in-out infinite;}
@keyframes dragNudge{0%,100%{transform:translateX(0);}50%{transform:translateX(4px);}}

/* HOW IT WORKS / rail */
.how-rail-section{padding:72px 0 64px;background:var(--white);overflow-x:hidden;}
.how-rail-section .rail-viewport{overflow-x:auto;cursor:grab;padding:6px 0;scrollbar-width:none;margin:0 -32px;padding-left:32px;}
.how-rail-section .rail-viewport::-webkit-scrollbar{display:none;}
.how-rail-section .rail-viewport.dragging{cursor:grabbing;}
.how-rail-section .rail-track{display:flex;gap:18px;width:max-content;padding-right:32px;align-items:stretch;}
.how-rail-card{display:flex;flex-direction:column;width:270px;flex-shrink:0;background:var(--paper);border:1px solid var(--navy-06);border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow-card);transition:transform .4s var(--ease), box-shadow .4s var(--ease);color:var(--navy);}
a.how-rail-card:hover{transform:translateY(-7px);box-shadow:var(--shadow-card-hover);}
.how-rail-img{width:100%;height:150px;flex-shrink:0;overflow:hidden;background:var(--navy-06);}
.how-rail-img img{width:100%;height:100%;object-fit:cover;display:block;}
.how-rail-body{padding:20px 22px 24px;display:flex;flex-direction:column;flex:1;}
.how-rail-num{font-family:'Cabinet Grotesk',sans-serif;font-size:12.5px;font-weight:600;color:var(--orange);margin-bottom:10px;}
.how-rail-card h3{font-size:16px;font-weight:600;letter-spacing:-.01em;}
.how-rail-card p{font-size:13px;color:var(--navy-65);line-height:1.55;margin-top:8px;font-weight:400;}
.how-rail-card .btn{margin-top:auto;align-self:stretch;justify-content:center;}
.how-rail-card h3{margin-top:0;}
.how-rail-body>p{margin-bottom:0;}
.how-rail-pricing{background:var(--navy);color:#fff;border-color:var(--navy);}
.how-rail-pricing .how-rail-num{color:var(--gold);}
.how-rail-price{font-size:15px;font-weight:600;margin-top:6px;}
.how-rail-price span{color:var(--gold);}
.how-rail-note{display:block;font-size:12px;color:rgba(255,255,255,.6);margin-top:14px;line-height:1.5;font-weight:400;}

/* HIRING */
.hire-section{padding:72px 0;}
.hire-sub{font-size:15px;color:var(--navy-65);margin-top:16px;font-weight:500;}
.need-chips{display:flex;flex-wrap:wrap;gap:9px;margin-top:20px;margin-bottom:44px;}
.chip{padding:9px 17px;border-radius:100px;border:1.5px solid var(--navy-10);font-size:13px;font-weight:500;transition:all .3s var(--ease);}
.chip:hover,.chip.active{background:#F0F9F6;color:#0F766D;border-color:#0F766D;}
.pro-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;margin-bottom:40px;}
.pro-card{background:var(--white);border:1px solid var(--navy-06);border-radius:var(--r-md);box-shadow:var(--shadow-card);padding:24px;transition:transform .35s var(--ease), box-shadow .35s var(--ease);}
.pro-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-card-hover);}
.pro-top{display:flex;align-items:center;gap:13px;}
.pro-avatar{width:48px;height:48px;border-radius:15px;flex-shrink:0;background:linear-gradient(135deg,var(--orange),var(--gold));display:flex;align-items:center;justify-content:center;color:#fff;font-family:'Cabinet Grotesk',sans-serif;font-weight:600;font-size:15px;}
.pro-name{font-weight:600;font-size:15px;}
.pro-role{font-size:12.5px;color:var(--navy-45);margin-top:2px;font-weight:400;}
.pro-avail{margin-left:auto;font-size:11.5px;font-weight:600;color:#2FAE6B;display:flex;align-items:center;gap:5px;flex-shrink:0;}
.pro-avail .d{width:6px;height:6px;border-radius:50%;background:#2FAE6B;display:inline-block;}
.pro-skills{display:flex;gap:6px;flex-wrap:wrap;margin-top:16px;}
.skill-pill{font-size:11px;background:var(--navy-06);color:var(--navy-65);padding:4px 10px;border-radius:100px;font-weight:500;}
.pro-foot{margin-top:18px;padding-top:15px;border-top:1px solid var(--navy-06);font-size:12.5px;font-weight:600;color:var(--teal);display:flex;align-items:center;gap:4px;}
@media (max-width:700px){.pro-grid{grid-template-columns:1fr;}}

/* DISCOVER PROFESSIONALS (homepage) -- reuses .pro-card/.pro-avatar/.pro-skills
   above, adds a wider responsive grid since this section shows up to ~8
   dynamically-loaded cards instead of 4 fixed ones. */
.discover-section{padding:72px 0;background:var(--paper);}
.discover-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:34px;}
@media (max-width:980px){.discover-grid{grid-template-columns:repeat(2,1fr);}}
@media (max-width:560px){.discover-grid{grid-template-columns:1fr;}}
.discover-card{display:flex;flex-direction:column;height:100%;}
.discover-card .pro-top{align-items:flex-start;}
.discover-card .pro-role{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;line-height:1.35;}
.discover-avatar-img{width:48px;height:48px;border-radius:15px;object-fit:cover;flex-shrink:0;}
.discover-featured-badge{margin-left:auto;font-size:11px;font-weight:600;letter-spacing:.03em;text-transform:uppercase;color:#8a6a10;background:var(--gold-16);padding:4px 9px;border-radius:100px;flex-shrink:0;white-space:nowrap;}

/* ---------- Verified (KYC) badge -- see ppVerifiedBadgeHTML() in
   app-shell.js. Green (var(--icon-green)) is deliberate: distinct from the
   gold "Featured" badge above, so the two are never confused at a glance. */
.pp-verified-badge{display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:600;letter-spacing:.02em;color:#0f7a34;background:rgba(22,163,74,.12);padding:3px 8px 3px 6px;border-radius:100px;flex-shrink:0;white-space:nowrap;vertical-align:middle;margin-left:3px;}
.pp-verified-badge svg{color:var(--icon-green);flex-shrink:0;}
.pp-verified-badge.compact{padding:0;background:none;border-radius:50%;line-height:0;margin-left:6px;}
.pp-verified-badge.compact svg{color:var(--icon-green);}
.discover-card .pro-foot{margin-top:auto;color:var(--teal);}
.discover-skel{background:var(--white);border:1px solid var(--navy-06);border-radius:var(--r-md);padding:24px;height:168px;position:relative;overflow:hidden;}
.discover-skel::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(27,33,45,.05),transparent);animation:dirshimmer 1.3s infinite;}
@keyframes dirshimmer{0%{transform:translateX(-100%);}100%{transform:translateX(100%);}}

/* STORIES / social proof */
.stories-section{padding:72px 0;background:var(--paper);}
.stories-grid{display:grid;grid-template-columns:1.3fr 1fr;gap:20px;}
@media (max-width:860px){.stories-grid{grid-template-columns:1fr;}}
.story-feature{background:var(--navy);border-radius:var(--r-xl);padding:40px;color:#fff;position:relative;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end;min-height:420px;}
.story-feature .sf-photo{position:absolute;inset:0;}
.story-feature .sf-photo img{width:100%;height:100%;object-fit:cover;opacity:.55;}
.story-feature .sf-scrim{position:absolute;inset:0;background:linear-gradient(180deg, rgba(27,33,45,.15) 10%, rgba(27,33,45,.92) 92%);}
.story-feature .sf-content{position:relative;}
.sample-tag{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.2);padding:6px 12px;border-radius:100px;margin-bottom:18px;color:rgba(255,255,255,.85);}
.sample-tag .d{width:5px;height:5px;border-radius:50%;background:var(--gold);}
.story-feature .quote{font-family:'Cabinet Grotesk',sans-serif;font-size:21px;line-height:1.4;font-weight:500;max-width:480px;}
.story-feature .who{margin-top:22px;display:flex;align-items:center;gap:12px;}
.story-feature .who .name{font-weight:600;font-size:14px;}
.story-feature .who .role{font-size:12px;color:rgba(255,255,255,.55);margin-top:2px;}
.story-feature .work-type{margin-top:20px;display:flex;gap:8px;flex-wrap:wrap;}
.story-feature .wt-pill{font-size:11.5px;font-weight:500;padding:5px 12px;border-radius:100px;border:1px solid rgba(255,255,255,.22);color:rgba(255,255,255,.8);}
.stories-side{display:flex;flex-direction:column;gap:20px;}
.story-mini{background:var(--white);border:1px solid var(--navy-06);border-radius:var(--r-lg);box-shadow:var(--shadow-card);padding:24px;flex:1;display:flex;flex-direction:column;justify-content:center;}
.story-mini .sample-tag{background:var(--navy-06);border-color:transparent;color:var(--navy-45);margin-bottom:14px;}
.story-mini .sample-tag .d{background:var(--orange);}
.story-mini .quote{font-size:14px;line-height:1.55;color:var(--navy-80);font-style:italic;}
.story-mini .who{margin-top:14px;display:flex;align-items:center;gap:10px;}
.story-mini .who .name{font-weight:600;font-size:13px;}
.story-mini .who .role{font-size:11px;color:var(--navy-45);}

/* PEARL */
.pearl-section{padding:64px 0 60px;background:var(--navy);color:var(--white);position:relative;overflow:hidden;}
.pearl-glow{position:absolute;border-radius:50%;filter:blur(110px);}
.pearl-glow.g1{width:560px;height:560px;background:var(--teal);opacity:.32;top:-240px;left:-180px;}
.pearl-glow.g2{width:420px;height:420px;background:var(--gold);opacity:.14;bottom:-200px;right:-140px;}
.pearl-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:56px;align-items:center;position:relative;}
@media (max-width:900px){.pearl-grid{grid-template-columns:1fr;}}
.pearl-visual{display:flex;justify-content:center;position:relative;}
.pearl-orb-wrap{position:relative;width:min(340px,72%);}
.pearl-orb-wrap img{width:100%;height:auto;filter:drop-shadow(0 40px 70px rgba(0,0,0,.45));animation:pearlFloat 6s ease-in-out infinite;}
@keyframes pearlFloat{0%,100%{transform:translateY(0) rotate(0deg);}50%{transform:translateY(-16px) rotate(2deg);}}
.pearl-copy h2{font-size:clamp(27px,4.2vw,41.5px);font-weight:600;line-height:1.1;}
.pearl-copy .subtitle{font-size:15px;color:var(--gold);font-weight:500;margin-top:10px;}
.pearl-copy p{margin-top:16px;color:rgba(255,255,255,.62);font-size:15px;line-height:1.7;max-width:460px;}
.pearl-console{margin-top:26px;max-width:460px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);border-radius:26px;backdrop-filter:blur(14px);padding:8px;box-shadow:0 40px 90px -30px rgba(0,0,0,.6);}
.pearl-console-inner{background:rgba(255,255,255,.03);border-radius:20px;padding:22px 20px;min-height:210px;max-height:340px;display:flex;flex-direction:column;}
.pearl-thread{overflow-y:auto;flex:1;}
.pearl-ask-form{display:flex;gap:8px;margin-top:14px;border-top:1px solid rgba(255,255,255,.1);padding-top:14px;}
.pearl-ask-form input{flex:1;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);border-radius:100px;padding:10px 16px;color:#fff;font-size:13px;}
.pearl-ask-form input::placeholder{color:rgba(255,255,255,.4);}
.pearl-ask-form input:focus{outline:none;border-color:var(--teal);}
.pearl-ask-form button{width:36px;height:36px;flex-shrink:0;border-radius:50%;background:var(--teal);color:#fff;display:flex;align-items:center;justify-content:center;font-size:15px;transition:background .3s;}
.pearl-ask-form button:hover{background:var(--teal-dark);}

/* On phones this whole section (orb + heading + copy + the chat preview
   console) stacked up taller than one screen. Shrink the orb, tighten
   the gaps/padding and cap the console height so it comes closer to
   fitting a single mobile viewport. */
@media (max-width:600px){
  .pearl-section{padding:44px 0 40px;}
  .pearl-grid{gap:22px;}
  .pearl-orb-wrap{width:min(190px,52%);margin:0 auto;}
  .pearl-copy h2{font-size:25px;}
  .pearl-copy .subtitle{margin-top:6px;font-size:13.5px;}
  .pearl-copy p{margin-top:10px;font-size:13.5px;line-height:1.55;}
  .pearl-console{margin-top:18px;}
  /* Was a fixed max-height that clipped the option pills / ask-form
     once the thread grew — let it size to its content instead, and
     only scroll the message thread itself. */
  .pearl-console-inner{padding:16px 14px;min-height:0;max-height:none;}
  .pearl-thread{max-height:170px;}
  .pearl-topbar{margin-bottom:12px;}
  .pearl-thread{min-height:40px;gap:8px;}
  .p-msg{padding:10px 13px;font-size:12.5px;}
  .pearl-options{margin-top:12px;gap:7px;}
  .pearl-ask-form{margin-top:10px;padding-top:10px;flex-shrink:0;}
}

/* Pearl side/floating access */
.pearl-side-tab{position:fixed;right:0;top:52%;transform:translateY(-50%) rotate(180deg);writing-mode:vertical-rl;display:flex;align-items:center;gap:8px;padding:14px 8px;background:var(--navy);color:#fff;border-radius:12px 0 0 12px;font-size:12px;font-weight:500;letter-spacing:.03em;z-index:900;box-shadow:-6px 0 24px -10px rgba(27,33,45,.3);transition:padding .3s var(--ease);}
.pearl-side-tab:hover{padding-right:14px;}
.pst-dot{width:6px;height:6px;border-radius:50%;background:var(--gold);flex-shrink:0;}
.pearl-float-btn{display:none;}
@media (max-width:900px){
  .pearl-side-tab{display:none;}
  .pearl-float-btn{display:flex;position:fixed;right:18px;bottom:22px;width:52px;height:52px;border-radius:50%;background:var(--navy);color:#fff;align-items:center;justify-content:center;z-index:900;box-shadow:0 16px 34px -12px rgba(27,33,45,.5);}
}
.pearl-topbar{display:flex;align-items:center;gap:10px;margin-bottom:20px;}
.pearl-dot{width:8px;height:8px;border-radius:50%;}
.pearl-topbar .pname{font-family:'Cabinet Grotesk',sans-serif;font-weight:600;font-size:13px;margin-left:4px;}
.pearl-topbar .status{font-size:11px;color:rgba(255,255,255,.45);margin-left:auto;border:1px solid rgba(255,255,255,.16);padding:4px 10px;border-radius:100px;font-weight:500;}
.pearl-thread{flex:1;display:flex;flex-direction:column;gap:12px;min-height:70px;}
.p-msg{max-width:84%;padding:12px 16px;border-radius:15px;font-size:13.5px;line-height:1.5;color:#fff;animation:msgIn .5s var(--ease);}
@keyframes msgIn{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:translateY(0);}}
.p-msg.bot{background:rgba(255,255,255,.08);align-self:flex-start;border-bottom-left-radius:5px;}
.p-msg.user{background:var(--teal);align-self:flex-end;border-bottom-right-radius:5px;font-weight:500;}
.typing-dots{display:inline-flex;gap:4px;align-items:center;padding:4px 2px;}
.typing-dots span{width:5px;height:5px;border-radius:50%;background:rgba(255,255,255,.6);animation:tdot 1.2s infinite;}
.typing-dots span:nth-child(2){animation-delay:.15s;}
.typing-dots span:nth-child(3){animation-delay:.3s;}
@keyframes tdot{0%,60%,100%{transform:translateY(0);opacity:.5;}30%{transform:translateY(-4px);opacity:1;}}
.pearl-options{display:flex;flex-wrap:wrap;gap:9px;margin-top:20px;}
.p-option{border:1px solid rgba(255,255,255,.18);color:#fff;padding:10px 16px;border-radius:100px;font-size:12.5px;font-weight:500;transition:all .3s var(--ease);background:rgba(255,255,255,.02);}
.p-option:hover{background:var(--gold);color:var(--navy);border-color:var(--gold);transform:translateY(-2px);}
.pearl-restart{margin-top:16px;font-size:11.5px;color:rgba(255,255,255,.4);display:flex;align-items:center;gap:6px;align-self:center;}
.pearl-restart:hover{color:var(--gold);}

/* ACADEMY */
.academy-section{padding:80px 0;background:linear-gradient(180deg,var(--white) 0%, #F2F6F5 100%);}
.academy-sub{font-size:15px;color:var(--navy-65);max-width:560px;margin-bottom:48px;font-weight:400;line-height:1.55;}
.academy-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;}
@media (max-width:1000px){.academy-grid{grid-template-columns:repeat(2,1fr);}}
@media (max-width:560px){.academy-grid{grid-template-columns:1fr;}}
.course-card{border-radius:var(--r-lg);overflow:hidden;background:var(--navy);color:#fff;position:relative;min-height:250px;display:flex;flex-direction:column;justify-content:flex-end;padding:24px;transition:transform .5s var(--ease), box-shadow .5s var(--ease);}
.course-card:hover{transform:translateY(-8px);box-shadow:0 0 1px rgba(0,0,0,.1), 0 0 50px -6px rgba(27,33,45,.4), 0 30px 60px -22px rgba(27,33,45,.35);}
.course-card:hover .course-img{transform:scale(1.06);}
.course-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;transition:transform .6s var(--ease);}
.course-card::before{content:'';position:absolute;inset:0;opacity:.82;z-index:1;}
.course-card.c1::before{background:radial-gradient(circle at 20% 20%, rgba(23,138,128,.88), rgba(12,79,73,.93) 75%);}
.course-card.c2::before{background:radial-gradient(circle at 80% 20%, rgba(237,117,70,.88), rgba(158,75,42,.93) 75%);}
.course-card.c3::before{background:radial-gradient(circle at 30% 80%, rgba(42,50,66,.88), rgba(16,20,28,.93) 75%);}
.course-card.c4::before{background:radial-gradient(circle at 70% 75%, rgba(217,166,63,.88), rgba(122,90,30,.93) 75%);}
.course-num{z-index:2;}
.course-card h3{position:relative;font-size:18px;font-weight:600;line-height:1.25;z-index:2;}
.course-meta{position:relative;font-size:12px;opacity:.75;margin-top:9px;font-weight:400;z-index:2;}
.course-go{position:relative;margin-top:16px;font-size:12.5px;font-weight:600;display:inline-flex;align-items:center;gap:5px;z-index:2;}

/* VISUAL BREAK */
.visual-break{position:relative;height:58vh;min-height:360px;max-height:480px;overflow:hidden;}
.visual-break img{width:100%;height:100%;object-fit:cover;filter:saturate(.9) contrast(1.02);}
.visual-break::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg, rgba(27,33,45,.05) 0%, rgba(27,33,45,.6) 100%);}
.vb-tint{position:absolute;inset:0;background:linear-gradient(120deg, rgba(15,118,109,.22), rgba(237,117,70,.1));mix-blend-mode:color;}
.vb-caption{position:absolute;left:32px;bottom:34px;color:#fff;max-width:400px;z-index:2;}
.vb-caption p{font-family:'Cabinet Grotesk',sans-serif;font-size:18px;font-weight:600;line-height:1.35;}

/* RESOURCES */
.resources-section{padding:80px 0;}
.res-shelf{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;}
@media (max-width:900px){.res-shelf{grid-template-columns:repeat(2,1fr);}}
@media (max-width:560px){.res-shelf{grid-template-columns:1fr;}}
.res-item{background:var(--paper);border-radius:var(--r-md);padding:24px;border:1px solid var(--navy-06);box-shadow:var(--shadow-card);transition:transform .4s var(--ease), background .4s var(--ease), box-shadow .4s var(--ease);display:flex;flex-direction:column;}
.res-item:hover{transform:translateY(-6px);background:var(--white);box-shadow:var(--shadow-card-hover);}
.res-free{align-self:flex-start;font-size:11px;font-weight:600;letter-spacing:.04em;color:var(--teal);background:var(--teal-08);padding:4px 10px;border-radius:100px;margin-bottom:14px;}
.res-item h4{font-size:15px;font-weight:600;font-family:'Cabinet Grotesk',sans-serif;}
.res-item p{font-size:13px;color:var(--navy-65);margin-top:8px;line-height:1.5;flex:1;}
.res-get{margin-top:18px;font-size:12.5px;font-weight:600;color:var(--navy);display:inline-flex;align-items:center;gap:5px;padding-top:14px;border-top:1px solid var(--navy-06);}
.res-get:hover{color:var(--orange);}
.res-more{margin-top:36px;text-align:center;}
.res-coming-soon{font-size:13px;font-weight:500;color:var(--navy-45);}

/* BLOG */
.blog-section{padding:80px 0;background:var(--paper);}
.blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;}
@media (max-width:900px){.blog-grid{grid-template-columns:repeat(2,1fr);}}
@media (max-width:640px){.blog-grid{grid-template-columns:1fr;}}
.article-more-wrap{max-width:830px;}
.article-more-wrap .blog-grid{grid-template-columns:repeat(2,1fr);}
@media (max-width:640px){.article-more-wrap .blog-grid{grid-template-columns:1fr;}}
.blog-card{background:var(--white);border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--navy-06);box-shadow:var(--shadow-card);transition:transform .4s var(--ease), box-shadow .4s var(--ease);display:flex;flex-direction:column;}
.blog-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-card-hover);}
.blog-img{position:relative;aspect-ratio:16/10;height:auto;overflow:hidden;background:var(--navy-06);}
.blog-img img{width:100%;height:100%;object-fit:cover;object-position:center;transition:transform .6s var(--ease);}
.blog-card:hover .blog-img img{transform:scale(1.06);}
.blog-cat{position:absolute;top:14px;left:14px;background:rgba(18,26,32,.5);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);color:var(--gold);font-size:10.5px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;padding:5px 11px;border-radius:100px;}
.blog-body{padding:22px 22px 24px;display:flex;flex-direction:column;flex:1;}
.blog-body h3{font-size:15.5px;font-weight:600;line-height:1.3;color:var(--teal);}
.blog-body p{font-size:13px;color:var(--navy-65);margin-top:9px;line-height:1.55;flex:1;}
.blog-foot{margin-top:16px;display:flex;justify-content:space-between;align-items:center;padding-top:14px;border-top:1px solid var(--navy-06);}
.blog-date{font-size:11.5px;color:var(--navy-45);}
.blog-read{font-size:12px;font-weight:600;color:var(--orange);display:inline-flex;align-items:center;gap:4px;}
.blog-read:hover{color:var(--orange-dark);}
.blog-note{margin-top:34px;font-size:13px;color:var(--navy-45);text-align:center;}
.blog-viewmore{margin-top:38px;text-align:center;}
.blog-viewmore .btn{margin:0 auto;}
/* Mobile only: the 3 homepage blog cards slide through horizontally
   instead of stacking (or getting hidden down to just the first). */
@media (max-width:640px){
  .blog-grid-single{
    display:flex;
    grid-template-columns:unset;
    gap:14px;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    margin:0 -20px;
    padding:4px 20px 10px;
  }
  .blog-grid-single::-webkit-scrollbar{display:none;}
  .blog-grid-single .blog-card{display:flex;flex:0 0 84%;scroll-snap-align:center;}
}

/* ---- newsletter join ---- */
.newsletter-section{padding:70px 0 90px;background:var(--paper);}
.newsletter-inner{max-width:600px;margin:0 auto;text-align:center;}
.newsletter-inner h2{font-size:clamp(21.5px,3vw,29px);font-weight:600;letter-spacing:-.02em;margin-bottom:10px;}
.newsletter-inner p{color:var(--navy-45);font-size:15px;margin-bottom:28px;}
.newsletter-form{display:flex;align-items:center;gap:6px;background:var(--white);border:1px solid var(--navy-10);border-radius:var(--r-pill);padding:6px 6px 6px 22px;max-width:460px;margin:0 auto;}
.newsletter-form input{flex:1;border:none;outline:none;background:transparent;font-size:14px;font-family:inherit;color:var(--navy);padding:10px 0;}
.newsletter-form input::placeholder{color:var(--navy-45);}
.newsletter-form .btn{white-space:nowrap;}
@media (max-width:480px){
.newsletter-form{flex-direction:column;align-items:stretch;background:none;border:none;border-radius:0;padding:0;gap:12px;}
.newsletter-form input{width:100%;background:var(--white);border:1px solid var(--navy-10);border-radius:var(--r-pill);padding:13px 18px;}
.newsletter-form .btn{width:100%;justify-content:center;}
}
.newsletter-success{display:none;align-items:center;justify-content:center;gap:8px;max-width:460px;margin:0 auto;background:var(--teal-08);color:var(--teal-dark);border-radius:var(--r-pill);padding:13px 20px;font-size:13.5px;font-weight:500;}
.newsletter-success.show{display:flex;}

/* FINAL / GET STARTED */
.final-section{padding:96px 0;background:var(--navy);color:#fff;text-align:center;position:relative;overflow:hidden;}
.final-glow{position:absolute;width:600px;height:600px;background:var(--teal);opacity:.22;border-radius:50%;filter:blur(120px);top:-260px;left:50%;transform:translateX(-50%);}
.final-section h2{position:relative;font-size:clamp(25px,4vw,39.5px);font-weight:600;max-width:640px;margin:0 auto;line-height:1.15;}
.final-section .sub{position:relative;margin-top:16px;color:rgba(255,255,255,.6);font-size:15px;max-width:480px;margin-left:auto;margin-right:auto;}
.choice-row{position:relative;display:flex;gap:18px;justify-content:center;margin-top:44px;flex-wrap:wrap;}
.choice-card{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);border-radius:var(--r-lg);padding:30px 32px;width:280px;text-align:left;transition:all .4s var(--ease);}
.choice-card:hover{background:rgba(255,255,255,.1);transform:translateY(-6px);border-color:rgba(255,255,255,.28);}
.choice-card h3{font-size:17px;font-weight:600;}
.choice-card p{font-size:13px;color:rgba(255,255,255,.55);margin-top:8px;line-height:1.5;}
.choice-card .go{margin-top:18px;font-size:13px;font-weight:600;color:var(--gold);display:flex;align-items:center;gap:5px;}
.final-pearl-link{position:relative;margin-top:34px;font-size:13px;color:rgba(255,255,255,.5);display:inline-flex;align-items:center;gap:7px;}
.final-pearl-link:hover{color:var(--gold);}

/* SOCIALS + FOOTER */
footer{padding:56px 0 40px;}
.foot-top{display:flex;justify-content:space-between;align-items:flex-start;flex-wrap:wrap;gap:32px;padding-bottom:36px;border-bottom:1px solid var(--navy-06);}
.foot-links{display:flex;gap:28px;flex-wrap:wrap;}
.foot-links a{font-size:13px;color:var(--navy-65);}
.foot-links a:hover{color:var(--navy);}
.foot-social{display:flex;gap:10px;}
.social-icon{width:38px;height:38px;border-radius:50%;border:1px solid var(--navy-10);display:flex;align-items:center;justify-content:center;transition:all .35s var(--ease);color:var(--navy-65);}
.social-icon:hover{background:var(--navy);border-color:var(--navy);color:#fff;transform:translateY(-3px);}
.foot-bottom{margin-top:24px;display:flex;justify-content:space-between;font-size:12px;color:var(--navy-25);flex-wrap:wrap;gap:10px;}
.foot-bottom a{color:var(--navy-25);}
.foot-bottom a:hover{color:var(--navy);}
.foot-bottom-links a{margin-right:16px;}
.arrow-nudge{display:inline-block;transition:transform .3s var(--ease);}
.legal-section{padding:90px 0 70px;}
.legal-wrap{max-width:720px;}
.legal-wrap h2{font-size:clamp(23.5px,3.4vw,32.5px);margin-bottom:6px;}
.legal-updated{font-size:12.5px;color:var(--navy-45);margin-bottom:28px;}
.legal-wrap h3{font-size:16px;margin:26px 0 8px;}
.legal-wrap p{font-size:15px;line-height:1.7;color:var(--navy-65);}
.legal-wrap a{color:var(--teal);text-decoration:underline;}
.legal-back{display:inline-block;margin-top:32px;}

@media (max-width:900px){
  .nav-links,.nav-right .btn-ghost,.nav-right .btn-outline{display:none;}
  .menu-toggle{display:flex;}
  .nav-inner{gap:10px;}
  .nav-right{gap:8px;}
  /* Search icon isn't needed in the mobile header — search is still
     reachable from within the mobile menu itself. */
  .nav-search-wrap{display:none;}
  /* "Join ProfilePro" -> "Join" on the mobile header button only. The
     HTML text stays "Join ProfilePro" (unchanged everywhere else, incl.
     the slide-out mobile menu's own join button); here we just visually
     swap it for a shorter label via a pseudo-element. */
  .nav-right .btn-orange.btn-sm{font-size:0;padding:9px 16px;gap:0;}
  .nav-right .btn-orange.btn-sm::before{content:"Join";font-size:12.5px;}
}
@media (max-width:400px){
  .nav-right .btn-orange.btn-sm{padding:8px 14px;}
  .nav-right .btn-orange.btn-sm::before{font-size:12px;}
  .menu-toggle{padding:9px 12px 9px 14px;}
}

/* MODALS / FORMS */
.modal-backdrop{position:fixed;inset:0;background:rgba(27,33,45,.55);backdrop-filter:blur(6px);z-index:1400;opacity:0;pointer-events:none;transition:opacity .4s var(--ease);display:flex;align-items:flex-start;justify-content:center;padding:60px 20px;overflow-y:auto;}
.modal-backdrop.open{opacity:1;pointer-events:auto;}
.modal-card{background:var(--white);border-radius:28px;max-width:560px;width:100%;padding:38px 34px 34px;position:relative;transform:translateY(24px) scale(.98);opacity:0;transition:transform .45s var(--ease), opacity .4s var(--ease);box-shadow:0 60px 120px -30px rgba(0,0,0,.35);}
.modal-backdrop.open .modal-card{transform:translateY(0) scale(1);opacity:1;}
.modal-close{position:absolute;top:22px;right:22px;width:34px;height:34px;border-radius:50%;background:var(--navy-06);display:flex;align-items:center;justify-content:center;transition:background .3s;}
.modal-close:hover{background:var(--navy-10);}
.modal-eyebrow{font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--orange);margin-bottom:10px;}
.modal-card h3{font-size:23px;font-weight:600;letter-spacing:-.01em;}
.modal-card .msub{font-size:13.5px;color:var(--navy-65);margin-top:8px;line-height:1.5;}
.f-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:26px;}
.f-grid .full{grid-column:1/-1;}
@media (max-width:520px){.f-grid{grid-template-columns:1fr;}}
.f-field label{display:block;font-size:12px;font-weight:500;color:var(--navy-80);margin-bottom:7px;}
.f-field input,.f-field select,.f-field textarea{width:100%;border:1px solid var(--navy-10);border-radius:12px;padding:12px 14px;font-size:13.5px;color:var(--navy);background:var(--white);transition:border-color .25s, background .25s;}
.f-field textarea{resize:vertical;min-height:80px;}
/* iOS Safari auto-zooms the whole page on focus of any input/select/
   textarea with a computed font-size under 16px. On phones that made
   every .f-field-based form (Schedule Interview, post-job, business
   forms, profile setup, etc.) visibly jump/zoom the moment a field was
   tapped, and every subsequent tap landed on the wrong element because
   the viewport had zoomed and panned. 16px on touch-sized screens avoids
   the auto-zoom entirely; desktop keeps the smaller 14.5px above. */
@media (max-width:640px){
  .f-field input,.f-field select,.f-field textarea{font-size:15px;}
}
.f-field input:focus,.f-field select:focus,.f-field textarea:focus{outline:none;border-color:var(--teal);background:var(--white);}
.form-actions{margin-top:26px;display:flex;align-items:center;gap:16px;flex-wrap:wrap;}
.form-note{font-size:11.5px;color:var(--navy-45);line-height:1.5;}
.thankyou{text-align:center;padding:20px 0 6px;display:none;}
.thankyou.show{display:block;}
.thankyou .tick{width:56px;height:56px;border-radius:50%;background:var(--teal-08);color:var(--teal);display:flex;align-items:center;justify-content:center;margin:0 auto 18px;}
.thankyou h3{font-size:19px;}
.thankyou p{font-size:13.5px;color:var(--navy-65);margin-top:10px;max-width:380px;margin-left:auto;margin-right:auto;line-height:1.55;}
.modal-form.hide{display:none;}

@media (max-width:640px){
  .modal-card{padding:30px 22px 26px;}
}

/* ARTICLE / BLOG POST */
.article-hero{padding:150px 0 0;}
.article-wrap{max-width:760px;margin:0 auto;padding:0 32px;}
@media (max-width:720px){.article-wrap{padding:0 20px;}}
.article-back{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:600;color:var(--navy-45);margin-bottom:24px;}
.article-back:hover{color:var(--teal);}
.article-cat{display:inline-block;font-size:11px;font-weight:600;color:var(--orange);text-transform:uppercase;letter-spacing:.06em;background:var(--orange-08,rgba(237,117,70,.1));padding:6px 13px;border-radius:100px;}
.article-wrap h1{font-size:clamp(25px,4.2vw,38px);font-weight:600;line-height:1.15;letter-spacing:-.02em;margin-top:16px;}
.article-meta{display:flex;align-items:center;gap:10px;margin-top:16px;font-size:13px;color:var(--navy-45);}
.article-meta .dot{width:3px;height:3px;border-radius:50%;background:var(--navy-25);}
.article-cover{margin-top:32px;border-radius:var(--r-lg);overflow:hidden;aspect-ratio:16/9;background:var(--navy-06);}
.article-cover img{width:100%;height:100%;object-fit:cover;}
.article-body{padding:44px 0 90px;}
.article-body p{font-size:15.5px;line-height:1.75;color:var(--navy-80);margin-bottom:22px;}
.article-body h2{font-size:21px;font-weight:600;margin:38px 0 14px;letter-spacing:-.01em;}
.article-body h3{font-size:17px;font-weight:600;margin:28px 0 10px;}
.article-body ul{margin:0 0 22px;padding-left:22px;}
.article-body li{font-size:15.5px;line-height:1.7;color:var(--navy-80);margin-bottom:9px;}
.article-body strong{font-weight:600;color:var(--navy);}
.article-cta{margin-top:44px;padding:32px;border-radius:var(--r-lg);background:var(--paper);box-shadow:var(--shadow-card);display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;}
.article-cta h4{font-size:16px;font-weight:600;}
.article-cta p{font-size:13.5px;color:var(--navy-65);margin-top:4px;}
.article-more{padding:0 0 100px;}
.article-more h3{font-size:15px;font-weight:600;color:var(--navy-45);text-transform:uppercase;letter-spacing:.05em;margin-bottom:20px;}

/* PEARL FLOATING CHAT WINDOW */
.pearl-modal-backdrop{position:fixed;inset:0;background:rgba(15,20,28,.45);backdrop-filter:blur(3px);z-index:1200;display:none;align-items:flex-end;justify-content:flex-end;padding:0;}
.pearl-modal-backdrop.open{display:flex;}
.pearl-modal{width:380px;max-width:calc(100vw - 40px);height:min(600px, calc(100vh - 100px));margin:20px;background:var(--navy);color:#fff;border-radius:22px;box-shadow:0 40px 90px -20px rgba(0,0,0,.55);display:flex;flex-direction:column;overflow:hidden;border:1px solid rgba(255,255,255,.08);animation:pearlModalIn .35s var(--ease);}
@keyframes pearlModalIn{from{opacity:0;transform:translateY(24px) scale(.97);}to{opacity:1;transform:translateY(0) scale(1);}}
.pearl-modal-head{display:flex;align-items:center;justify-content:space-between;padding:16px 18px;border-bottom:1px solid rgba(255,255,255,.08);flex-shrink:0;}
.pmh-id{display:flex;align-items:center;gap:10px;}
.pmh-avatar{width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.08);color:var(--gold);display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.pmh-name{font-family:'Cabinet Grotesk',sans-serif;font-weight:600;font-size:14px;color:#fff;}
.pmh-status{font-size:11px;color:rgba(255,255,255,.5);display:flex;align-items:center;gap:5px;margin-top:1px;}
.pmh-live-dot{width:6px;height:6px;border-radius:50%;background:#3DDC97;display:inline-block;}
.pearl-modal-close{width:32px;height:32px;border-radius:50%;color:rgba(255,255,255,.7);display:flex;align-items:center;justify-content:center;transition:background .25s, color .25s;flex-shrink:0;}
.pearl-modal-close:hover{background:rgba(255,255,255,.1);color:#fff;}
.pearl-modal-thread{flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:12px;padding:18px;}
.pearl-modal .pearl-options{padding:0 18px;margin-top:0;}
.pearl-modal-form{padding:14px 18px 18px;margin-top:0;border-top:1px solid rgba(255,255,255,.08);}
body.pearl-modal-open{overflow:hidden;}

@media (max-width:640px){
  .pearl-modal-backdrop{align-items:flex-end;justify-content:center;padding:0 10px 10px;}
  .pearl-modal{width:100%;max-width:480px;height:min(80vh, 640px);margin:0;border-radius:24px;}
}

/* =========================================================
   NAV 2.0 — mega menus, simple dropdown, search popover
   ========================================================= */
.nav-item{position:relative;}
.nav-link-btn{display:inline-flex;align-items:center;gap:5px;font-size:12.5px;font-weight:500;color:var(--navy-65);padding:8px 14px;border-radius:var(--r-pill);background:none;transition:color .25s, background .25s;}
/* "Why ProfilePro" splits the label (a real link to about.html) from a
   small separate caret button that just opens the mini-dropdown. */
.nav-caret-btn{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;margin-left:-8px;border-radius:50%;color:var(--navy-45);background:none;transition:color .25s, background .25s;}
.nav-caret-btn:hover{color:var(--navy);background:var(--navy-06);}
.nav-item.open .nav-caret-btn{color:var(--navy);background:var(--navy-06);}
.nav-link-btn:hover{color:var(--navy);background:var(--navy-06);}
.nav-item.open .nav-link-btn{background:var(--navy-06);}
.nav-item.open .nav-link-btn{color:var(--navy);}
.nav-caret{transition:transform .3s var(--ease);flex-shrink:0;margin-top:1px;}
.nav-item.open .nav-caret{transform:rotate(180deg);}

.mega-menu,.simple-dropdown{position:absolute;top:calc(100% + 22px);background:var(--white);border-radius:var(--r-lg);border:1px solid var(--navy-06);box-shadow:0 34px 70px -24px rgba(27,33,45,.3);opacity:0;pointer-events:none;transform:translateY(10px);transition:opacity .25s var(--ease), transform .25s var(--ease);z-index:1200;}
.nav-item.open .mega-menu,.nav-item.open .simple-dropdown{opacity:1;pointer-events:auto;transform:translateY(0);}

.mega-menu{left:50%;transform:translateX(-50%) translateY(10px);width:640px;padding:28px 30px 24px;}
.nav-item.open .mega-menu{transform:translateX(-50%) translateY(0);}
.mega-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:22px 28px;}
.mega-col h4{font-size:11.5px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--navy-45);margin-bottom:10px;}
.mega-col a{display:block;font-size:13.5px;color:var(--navy-80);padding:6px 0;}
.mega-col a:hover{color:var(--teal);}
.mega-foot{margin-top:20px;padding-top:22px;border-top:1px solid var(--navy-06);display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;}
.mega-foot-note{font-size:12.5px;color:var(--navy-45);line-height:1.5;flex:1 1 220px;}
.mega-foot .btn{flex-shrink:0;padding:14px 26px;font-size:13.5px;}
.mega-foot .btn-teal, .mega-foot .btn-orange{color:var(--white);}
@media (max-width:1080px){.mega-foot{align-items:flex-start;}.mega-foot .btn{margin-left:auto;}}

.simple-dropdown{left:0;min-width:230px;padding:9px;}
.simple-dropdown a{display:block;padding:10px 14px;border-radius:10px;font-size:13.5px;font-weight:500;color:var(--navy-80);}
.simple-dropdown a:hover{background:var(--navy-06);color:var(--navy);}

.nav-search-wrap{position:relative;}
.nav-search-btn{width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--navy-65);transition:background .25s,color .25s;flex-shrink:0;}
.nav-search-btn:hover{background:var(--navy-06);color:var(--navy);}
.nav-search-pop{position:absolute;top:calc(100% + 16px);right:0;width:320px;background:var(--white);border:1px solid var(--navy-06);border-radius:var(--r-pill);box-shadow:0 30px 60px -20px rgba(27,33,45,.3);padding:6px 6px 6px 18px;display:flex;align-items:center;gap:8px;opacity:0;pointer-events:none;transform:translateY(8px);transition:opacity .25s var(--ease), transform .25s var(--ease);z-index:1200;}
.nav-search-wrap.open .nav-search-pop{opacity:1;pointer-events:auto;transform:translateY(0);}
.nav-search-pop input{flex:1;border:none;outline:none;background:transparent;font-size:13px;padding:9px 0;color:var(--navy);}
.nav-search-pop input::placeholder{color:var(--navy-45);}
.nav-search-pop button{width:32px;height:32px;flex-shrink:0;border-radius:50%;background:var(--navy);color:#fff;display:flex;align-items:center;justify-content:center;transition:background .25s;}
.nav-search-pop button:hover{background:var(--teal-dark);}
.nav-login{font-size:13.5px;font-weight:500;color:var(--navy-65);white-space:nowrap;}
.nav-login:hover{color:var(--navy);}

/* ---- Logged-in account nav (desktop): name/avatar -> dropdown, reuses
   .nav-item / .simple-dropdown so it inherits the same open/close JS and
   styling as the rest of the nav. ---- */
.nav-account-btn{background:var(--navy-06);border-radius:var(--r-pill);padding:6px 14px 6px 6px;}
.nav-account-btn:hover{background:var(--navy-10);}
.nav-account-avatar{width:26px;height:26px;border-radius:50%;background:var(--teal-dark);color:#fff;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:600;font-family:'Cabinet Grotesk',sans-serif;flex-shrink:0;}
.nav-account-item .simple-dropdown{left:auto;right:0;min-width:220px;}
.nav-account-email{display:block;padding:8px 14px 6px;font-size:11.5px;color:var(--navy-45);border-bottom:1px solid var(--navy-06);margin-bottom:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}

/* ---- Logged-in account section (mobile overlay) ---- */
.mo-account{flex-direction:column;gap:2px;margin-top:6px;}
.mo-account-email{font-size:12.5px;color:var(--navy-45);padding:2px 0 8px;}

@media (max-width:1080px){.mega-menu{width:520px;}}
@media (max-width:900px){
  /* Keep the search icon itself visible/tappable in the mobile header --
     it was previously fully hidden here (display:none), so on phones the
     header search was gone entirely rather than just moved into the
     hamburger drawer. Only the "Log in" text link and the logged-in
     account chip collapse into the drawer on mobile. */
  .nav-login{display:none;}
  .nav-account-item{display:none;}
}
@media (max-width:480px){
  /* The search popover is a fixed 320px wide panel anchored to the
     right edge of the icon -- on narrow phones that overflows off the
     left side of the screen. Let it size to the viewport instead. */
  .nav-search-pop{width:calc(100vw - 32px);right:-8px;}
}

/* mobile overlay accordions (Find Work / Hire Professionals / Why ProfilePro) */
.mo-search{margin-bottom:10px;}
.mo-search form{display:flex;align-items:center;gap:8px;background:var(--navy-06);border-radius:var(--r-pill);padding:6px 6px 6px 18px;}
.mo-search input{flex:1;border:none;outline:none;background:transparent;font-size:15px;padding:12px 0;color:var(--navy);}
.mo-search button{width:38px;height:38px;flex-shrink:0;border-radius:50%;background:var(--navy);color:#fff;display:flex;align-items:center;justify-content:center;}
.mo-group{border-bottom:1px solid var(--navy-06);}
.mo-group summary{list-style:none;cursor:pointer;font-family:'Cabinet Grotesk',sans-serif;font-size:14.5px;font-weight:500;color:var(--navy);padding:11px 0;display:flex;align-items:center;justify-content:space-between;letter-spacing:-.01em;}
.mo-group summary::-webkit-details-marker{display:none;}
.mo-group summary .mo-chevron{transition:transform .3s var(--ease);color:var(--navy-25);flex-shrink:0;}
.mo-group[open] summary .mo-chevron{transform:rotate(180deg);}
.mo-sub{padding:0 0 12px 2px;display:flex;flex-direction:column;gap:1px;}
.mo-sub-cat{font-size:10.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--navy-45);margin:10px 0 3px;}
.mo-sub-cat:first-child{margin-top:0;}
/* Higher specificity than ".mobile-overlay .mo-links a" (which was winning
   the cascade and forcing these sub-items to render at the big bold
   top-level size) so these actually come out small/light like intended. */
.mobile-overlay .mo-sub a{font-family:'Cabinet Grotesk',sans-serif;font-size:11.5px;font-weight:400;letter-spacing:normal;color:var(--navy-55,rgba(27,33,45,.55));padding:6px 0;border-bottom:none;display:block;opacity:1;transform:none;}
.mo-plain{font-family:'Cabinet Grotesk',sans-serif;font-size:14.5px;font-weight:500;color:var(--navy);padding:11px 0;border-bottom:1px solid var(--navy-06);display:flex;align-items:center;justify-content:space-between;letter-spacing:-.01em;}
.mo-plain svg{opacity:.35;flex-shrink:0;}
.mo-utility{display:flex;flex-direction:column;gap:2px;margin-top:6px;}
.mo-utility a{font-size:15px;font-weight:500;color:var(--navy-65);padding:10px 0;}

/* =========================================================
   HERO SEARCH + POPULAR SEARCHES
   ========================================================= */
.hero-search{margin-top:30px;max-width:520px;}
.hero-search form{display:flex;align-items:center;gap:6px;background:var(--white);border:1.5px solid var(--navy-10);border-radius:var(--r-pill);padding:6px 6px 6px 22px;box-shadow:0 20px 44px -24px rgba(27,33,45,.3);}
.hero-search input{flex:1;min-width:0;border:none;outline:none;background:transparent;font-size:15px;padding:12px 0;color:var(--navy);}
.hero-search input::placeholder{color:var(--navy-45);}
.hero-search-btn{flex-shrink:0;width:44px;height:44px;border-radius:50%;background:var(--navy);color:var(--gold);display:flex;align-items:center;justify-content:center;transition:background .3s, transform .3s var(--ease);}
.hero-search-btn:hover{background:var(--teal-dark);transform:scale(1.05);}
@media (max-width:560px){
  .hero-search form{padding:5px 5px 5px 18px;}
  .hero-search input{font-size:13.5px;}
  .hero-search-btn{width:40px;height:40px;}
}

.popular-section{padding:26px 0 46px;}
.popular-label{font-size:12.5px;font-weight:600;color:var(--navy-45);margin-right:6px;}
.popular-row{display:flex;flex-wrap:wrap;gap:9px;align-items:center;}
.popular-row a.pill{display:inline-flex;}

/* =========================================================
   EXPLORE BY ROLE
   ========================================================= */
.roles-section{padding:72px 0;}
.roles-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;}
@media (max-width:1080px){.roles-grid{grid-template-columns:repeat(3,1fr);}}
@media (max-width:720px){.roles-grid{grid-template-columns:repeat(2,1fr);}}
@media (max-width:420px){.roles-grid{grid-template-columns:1fr;}}
.role-card{background:var(--white);border:1px solid var(--navy-06);border-radius:var(--r-md);padding:26px 20px;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:14px;box-shadow:var(--shadow-card);transition:transform .35s var(--ease), box-shadow .35s var(--ease);}
.role-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-card-hover);}
.role-card-icon{width:auto;height:auto;flex-shrink:0;color:var(--teal-dark);display:flex;align-items:center;justify-content:center;}
.role-card-name{font-family:'Cabinet Grotesk',sans-serif;font-weight:400;font-size:14.5px;}

/* =========================================================
   WHY PROFILEPRO (how it works + difference)
   ========================================================= */
.why-section{padding:80px 0;background:var(--paper);}
.how-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-bottom:56px;}
@media (max-width:860px){.how-grid{grid-template-columns:1fr;}}
.how-card{background:var(--white);border:1px solid var(--navy-06);border-radius:var(--r-lg);box-shadow:var(--shadow-card);padding:26px;}
.how-num{font-family:'Cabinet Grotesk',sans-serif;font-size:12.5px;font-weight:600;color:var(--orange);margin-bottom:14px;}
.how-card h3{font-size:16px;font-weight:600;margin-bottom:8px;}
.how-card p{font-size:13.5px;color:var(--navy-65);line-height:1.6;}
.diff-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;}
@media (max-width:900px){.diff-grid{grid-template-columns:repeat(2,1fr);}}
@media (max-width:560px){.diff-grid{grid-template-columns:1fr;}}
.diff-card{background:var(--white);border:1px solid var(--navy-06);border-radius:var(--r-md);box-shadow:var(--shadow-card);padding:22px;text-align:left;}
.diff-card h4{font-size:14px;font-weight:600;margin-bottom:7px;}
.diff-card p{font-size:12.5px;color:var(--navy-65);line-height:1.55;}
.why-sub-label{font-size:15px;font-weight:600;color:var(--navy);margin:0 0 20px;font-family:'Cabinet Grotesk',sans-serif;}

/* =========================================================
   RESOURCES PAGE
   ========================================================= */
.res-hero{padding:150px 0 40px;background:var(--paper);}
.res-hero h1{font-size:clamp(29px,4vw,41.5px);margin-bottom:10px;}
.res-hero p{color:var(--navy-65);font-size:15px;max-width:560px;}
.res-cat-block{padding:44px 0;border-top:1px solid var(--navy-06);}
.res-cat-block:first-of-type{border-top:none;padding-top:8px;}
.res-cat-title{font-size:19px;font-weight:600;margin-bottom:18px;}

/* =========================================================
   LOGIN / COMING SOON PAGE
   ========================================================= */
.stub-hero{padding:170px 0 100px;min-height:70vh;display:flex;align-items:center;}
.stub-card{max-width:480px;}
.stub-card h1{font-size:clamp(25px,3.6vw,34px);margin-bottom:14px;}
.stub-card p{color:var(--navy-65);font-size:15px;line-height:1.6;margin-bottom:28px;}
.stub-form{display:flex;gap:8px;flex-wrap:wrap;}
.stub-form input{flex:1;min-width:200px;border:1px solid var(--navy-10);border-radius:var(--r-pill);padding:13px 20px;font-size:14px;color:var(--navy);background:var(--white);}
.stub-form input:focus{outline:none;border-color:var(--teal);background:var(--white);}
.stub-thanks{display:none;align-items:center;gap:10px;color:var(--teal-dark);font-weight:500;font-size:14px;margin-top:6px;}
.stub-thanks.show{display:flex;}

/* =========================================================
   HOMEPAGE MOBILE SECTION SPACING
   Each home section was keeping its full desktop top/bottom
   padding on phones, which stacked up into a lot of dead
   space scrolling between sections. Trim it down on small
   screens; the pearl/hero sections have their own tighter
   mobile rules above already.
   ========================================================= */
@media (max-width:640px){
  .rail-section,.how-rail-section{padding:44px 0 40px;}
  .hire-section,.discover-section,.stories-section,.roles-section{padding:44px 0;}
  .academy-section,.resources-section,.blog-section,.why-section{padding:48px 0;}
  .newsletter-section{padding:44px 0 56px;}
  .final-section{padding:60px 0;}
  .popular-section{padding:20px 0 32px;}
  .sec-top{margin-bottom:22px;}
}

/* =========================================================
   COOKIE CONSENT BANNER
   Injected by cookie-consent.js on public marketing pages only.
   ========================================================= */
.cookie-banner{position:fixed;left:0;right:0;bottom:0;z-index:2000;padding:14px 16px;opacity:0;transform:translateY(16px);transition:opacity .35s var(--ease), transform .35s var(--ease);pointer-events:none;}
.cookie-banner.is-visible{opacity:1;transform:translateY(0);pointer-events:auto;}
.cookie-banner-inner{max-width:680px;margin:0 auto;display:flex;align-items:center;gap:16px;flex-wrap:wrap;background:var(--white);border-left:4px solid var(--teal);border-radius:var(--r-md);box-shadow:0 16px 40px -18px rgba(27,33,45,.3);padding:14px 18px;}
.cookie-banner-text{flex:1 1 260px;font-size:12.5px;line-height:1.5;color:var(--navy-65);margin:0;}
.cookie-banner-text a{color:var(--teal-dark);text-decoration:underline;}
.cookie-banner-actions{display:flex;gap:8px;flex-shrink:0;}
.cookie-banner-actions .btn{padding:9px 16px;font-size:12.5px;}
@media (max-width:560px){
  .cookie-banner{padding:0;}
  .cookie-banner-inner{border-radius:0;border-left:none;border-top:3px solid var(--teal);flex-direction:column;align-items:stretch;text-align:left;padding:14px 16px;gap:12px;}
  .cookie-banner-actions{width:100%;}
  .cookie-banner-actions .btn{flex:1;justify-content:center;}
}

/* =========================================================
   FAQ
   ========================================================= */
.faq-section{padding:80px 0;}
.faq-list{max-width:760px;}
.faq-item{border-bottom:1px solid var(--navy-06);}
.faq-item:first-child{border-top:1px solid var(--navy-06);}
.faq-q{width:100%;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:22px 4px;text-align:left;font-size:15.5px;font-weight:600;color:var(--navy);}
.faq-chevron{flex-shrink:0;color:var(--navy-45);transition:transform .3s var(--ease);}
.faq-item.open .faq-chevron{transform:rotate(180deg);}
.faq-a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .35s var(--ease);}
.faq-a>div{overflow:hidden;}
.faq-item.open .faq-a{grid-template-rows:1fr;}
.faq-a p{padding:0 4px 22px;max-width:640px;font-size:14px;color:var(--navy-65);line-height:1.6;}
.faq-a a{color:var(--teal);text-decoration:underline;}

/* =========================================================
   CONTACT
   ========================================================= */
.contact-section{padding:80px 0;background:var(--navy);text-align:center;}
.contact-copy{max-width:520px;margin:0 auto;}
.contact-copy h2{margin-bottom:12px;color:#fff;}
.contact-copy p{font-size:15px;color:rgba(255,255,255,.65);line-height:1.55;}
.contact-card{background:var(--white);border-radius:var(--r-lg);padding:36px 34px;max-width:640px;margin:36px auto 0;text-align:left;box-shadow:0 40px 90px -30px rgba(0,0,0,.45);}
.contact-form{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
.contact-form .full{grid-column:1/-1;}
@media (max-width:560px){.contact-form{grid-template-columns:1fr;}}
.contact-note{font-size:12px;color:var(--navy-45);margin-top:-6px;line-height:1.5;}

@media (max-width:640px){
  .faq-section,.contact-section{padding:48px 0;}
  .faq-q{font-size:14px;padding:18px 2px;}
}

/* =========================================================
   PROFILEPRO 2026 RESPONSIVE DENSITY SYSTEM
   Shared, brand-led corrections for every customer-facing page.
   ========================================================= */
.wrap{width:100%;max-width:var(--container);padding-inline:clamp(20px,3vw,32px);}
.btn{font-family:var(--font-ui);font-weight:650;min-height:44px;}
.nav-links a,.mobile-overlay a{font-family:var(--font-ui);}
.hero{padding-block:clamp(112px,10vw,144px) clamp(48px,6vw,72px);}
.rail-section,.how-rail-section,.hire-section,.discover-section,.stories-section,
.roles-section,.academy-section,.resources-section,.blog-section,.why-section,
.faq-section,.contact-section{padding-block:clamp(48px,5vw,64px);}
.newsletter-section{padding-block:clamp(48px,5vw,64px);}
.final-section{padding-block:clamp(56px,6vw,72px);}
.sec-top{margin-bottom:clamp(24px,3vw,36px);}
.two-col{gap:clamp(32px,5vw,56px);}
.contact-card{margin-top:var(--space-8);padding:clamp(24px,4vw,36px);}

@media (max-width:768px){
  header.site-nav{top:8px;left:8px;right:8px;border-radius:16px;}
  .mobile-overlay{top:76px;left:8px;right:8px;max-height:calc(100dvh - 88px);overscroll-behavior:contain;}
  .hero{padding-block:104px 40px;min-height:auto;}
  .hero-grid,.two-col,.contact-form{grid-template-columns:minmax(0,1fr);}
  .hero-stage{min-height:0;}
  .story-feature{min-height:320px;padding:28px;}
  .modal-backdrop{padding:16px 12px;align-items:center;}
  .modal{max-height:calc(100dvh - 32px);overflow:auto;}
  table{max-width:100%;}
}

@media (max-width:480px){
  :root{--r-xl:16px;--r-lg:12px;}
  .wrap{padding-inline:16px;}
  .hero{padding-block:92px 32px;}
  .rail-section,.how-rail-section,.hire-section,.discover-section,.stories-section,
  .roles-section,.academy-section,.resources-section,.blog-section,.why-section,
  .faq-section,.contact-section,.newsletter-section{padding-block:36px;}
  .final-section{padding-block:48px;}
  .hero-ctas,.stub-form,.cookie-banner-actions{width:100%;}
  .hero-ctas .btn,.stub-form .btn,.cookie-banner-actions .btn{width:100%;justify-content:center;}
  .btn{white-space:normal;text-align:center;justify-content:center;}
  .login-tab,.login-foot-note button,.ob-change-role button,.ob-toggle-pw,
  .ob-logo-btn,.btn-ghost,.hero-popular .pill,.job-card-title{min-height:44px;display:inline-flex;align-items:center;}
  footer a{min-height:44px;display:inline-flex;align-items:center;}
  input,select,textarea{font-size:15px !important;}
  .rail-viewport,.how-rail-section .rail-viewport{margin-inline:0;padding-left:0;max-width:100%;}
  .contact-card{padding:22px 18px;}
  .story-feature{min-height:280px;padding:24px 20px;}
}

@supports (padding: max(0px)){
  @media (max-width:720px){
    body{padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right);}
    .cookie-banner-inner{padding-bottom:max(14px,env(safe-area-inset-bottom));}
  }
}

/* Phones: tiny faint scrollbars (Stage 16e) */
@media (max-width:720px){
  /* Stage 16e: tiny, faint, short scrollbars on phones for scrollable panels, lists and sheets (was fully hidden).
     The page itself keeps no native bar (no layout shift): pp-overlays.js draws its short page scroller. */
  html,body{scrollbar-width:none;-ms-overflow-style:none;}
  html::-webkit-scrollbar,body::-webkit-scrollbar{display:none;width:0;height:0;}
  *:not(html):not(body)::-webkit-scrollbar{display:block;width:3px;height:3px;background:transparent;}
  *:not(html):not(body)::-webkit-scrollbar-track{background:transparent;}
  *:not(html):not(body)::-webkit-scrollbar-thumb{background:rgba(27,33,45,.16);background-clip:padding-box;border-radius:3px;border-top:14px solid transparent;border-bottom:14px solid transparent;}
}
@supports not selector(::-webkit-scrollbar){@media (max-width:720px){*:not(html):not(body){scrollbar-width:thin;scrollbar-color:rgba(27,33,45,.16) transparent;}}}

/* ===== PHONES: every popup / "more" / "+" menu is a slide-up sheet; scrollbars hidden; headers + bottom bar fixed ===== */
@media (max-width:760px){
  html,body,*{scrollbar-width:none!important;-ms-overflow-style:none!important}
  *::-webkit-scrollbar{display:none!important;width:0!important;height:0!important}
  html:has(body.app-body){scrollbar-gutter:auto!important}

  /* centred cards become bottom sheets (My profile's own settings excluded) */
  body:not([data-app-page="profile"]) .modal-backdrop,
  body:not([data-app-page="profile"]) .wm-modal-backdrop:not([hidden]){display:flex!important;align-items:flex-end!important;justify-content:center!important;padding:0!important}
  body:not([data-app-page="profile"]) .modal-backdrop .modal-card,
  body:not([data-app-page="profile"]) .wm-modal-backdrop .wm-modal{width:100%!important;max-width:none!important;margin:0!important;max-height:90vh;overflow-y:auto;border-radius:22px 22px 0 0!important;padding-bottom:calc(22px + env(safe-area-inset-bottom))}
  body:not([data-app-page="profile"]) .modal-backdrop.open .modal-card{transform:translateY(0)!important;opacity:1!important;animation:ppSheetUp .26s ease-out}
  body:not([data-app-page="profile"]) .modal-backdrop:not(.open) .modal-card{transform:translateY(100%)!important}
  body:not([data-app-page="profile"]) .wm-modal-backdrop:not([hidden]) .wm-modal{animation:ppSheetUp .26s ease-out}

  /* small menus (plus, more, filter, export) slide up from the bottom too */
  .wmu-add-menu:not([hidden]),.wms-menu:not([hidden]),.wm-pur-menu:not([hidden]),.rm-create-menu{
    position:fixed!important;left:0!important;right:0!important;top:auto!important;bottom:0!important;width:100%!important;max-width:none!important;min-width:0!important;
    max-height:75vh;overflow-y:auto;z-index:100001!important;border:0!important;border-radius:22px 22px 0 0!important;
    padding:14px 12px calc(14px + env(safe-area-inset-bottom))!important;background:#fff;
    box-shadow:0 0 0 100vmax rgba(15,20,25,.38),0 -10px 40px rgba(15,20,25,.2)!important;animation:ppSheetUp .24s ease-out}
  .wmu-add-menu:not([hidden])::before,.wms-menu:not([hidden])::before,.wm-pur-menu:not([hidden])::before,.rm-create-menu::before{content:"";display:block;width:38px;height:4px;border-radius:4px;background:#d5dad7;margin:0 auto 10px}
  .wmu-add-item,.wms-menu button,.wm-pur-menu button,.rm-create-menu button{padding:14px 12px!important;font-size:15px!important}

  /* headers stay put */
  .app-nav,.wm-topbar,.room-topbar{position:sticky!important;top:0!important}
  .app-bottom-nav{position:fixed!important;bottom:0!important}
}
@keyframes ppSheetUp{from{transform:translateY(100%)}to{transform:translateY(0)}}