/* Site header + footer for the /platform/ landing page. Copied from styles.css so the page uses the same chrome as the rest of the site without loading the full site stylesheet (which would restyle the landing content). Loaded after landing.css. */
.site-header,.site-footer{--navy:#121C30; --cyan:#00B8DB; --blue:#2B7FFF; --coral:#EF6262; --light:#F4F7FB; --pale:#EAF3FF; --pale2:#D2E4FF; --palered:#FBEAEB; --grey:#566074; --ink:#1B2436; --line:#E5EBF4; --white:#fff; --grad:linear-gradient(120deg,#2B7FFF 0%,#00B8DB 100%); --grad-soft:linear-gradient(135deg,#EAF3FF 0%,#FBEAEB 100%); --shadow:0 10px 30px rgba(18,28,48,.08); --shadow-lg:0 30px 70px rgba(18,28,48,.16); --radius:18px; --radius-sm:12px; --maxw:1180px; --ease:cubic-bezier(.16,1,.3,1); font-size:17px; line-height:1.6; font-family:'DM Sans',system-ui,Arial,sans-serif; color:var(--ink)}
.site-footer h5{font-family:'Outfit',system-ui,Arial,sans-serif; color:var(--navy); line-height:1.1; margin:0 0 .5em; font-weight:700; letter-spacing:-.015em}
.site-header ul,.site-footer ul{margin:0;padding:0}
.site-header img,.site-footer img{max-width:100%; height:auto; display:block}
.skip-link{position:absolute; left:-9999px; top:0; background:var(--navy); color:#fff; padding:12px 18px; border-radius:0 0 8px 0; z-index:3000}
.skip-link:focus{left:0}
.site-header .btn{position:relative; display:inline-flex; align-items:center; gap:8px; font-family:'Outfit'; font-weight:600; font-size:1rem; padding:14px 28px; border-radius:50px; border:2px solid transparent; cursor:pointer; transition:transform .3s var(--ease),box-shadow .3s var(--ease),background .3s; text-align:center; overflow:hidden}
.site-header .btn-primary{background:var(--grad); color:#fff; background-size:160% 160%; box-shadow:0 10px 26px rgba(0,184,219,.35)}
.site-header .btn-primary:hover{transform:translateY(-3px); box-shadow:0 18px 36px rgba(0,184,219,.5); background-position:100% 50%}
.site-header .btn .arrow{transition:transform .3s var(--ease)}
.site-header .btn:hover .arrow{transform:translateX(4px)}
.site-header{position:sticky; top:0; z-index:1000; background:rgba(255,255,255,.8); backdrop-filter:blur(14px); border-bottom:1px solid transparent; transition:border-color .3s, box-shadow .3s}
.site-header.scrolled{border-bottom-color:var(--line); box-shadow:0 4px 24px rgba(18,28,48,.05)}
.nav{display:flex; align-items:center; justify-content:space-between; height:76px; flex-wrap:nowrap}
.nav .logo img{height:34px}
.nav .logo{flex:0 0 auto}
.nav-links{display:flex; align-items:center; gap:30px; list-style:none; margin:0; padding:0; flex-wrap:nowrap; white-space:nowrap}
.nav-links a{position:relative; color:var(--navy); font-family:'Outfit'; font-weight:500; font-size:.98rem; padding:4px 0}
.nav-links a::after{content:""; position:absolute; left:0; bottom:-2px; width:0; height:2px; background:var(--grad); transition:width .3s var(--ease)}
.nav-links a:hover::after{width:100%}
.nav-actions{display:flex; align-items:center; gap:14px}
.nav-actions .login{color:var(--navy); font-family:'Outfit'; font-weight:500}
.nav-actions .login:hover{color:var(--blue)}
.menu-toggle{display:none; background:none; border:0; width:44px; height:44px; cursor:pointer}
.menu-toggle span{display:block; width:24px; height:2px; background:var(--navy); margin:5px auto; transition:.3s}
.nav.open .menu-toggle span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav.open .menu-toggle span:nth-child(2){opacity:0}
.nav.open .menu-toggle span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.site-footer{background:var(--navy); color:#C7D2E2; padding:64px 0 28px}
.footer-top{display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:40px; padding-bottom:40px; border-bottom:1px solid rgba(255,255,255,.1)}
.footer-brand img{height:34px; margin-bottom:16px}
.footer-brand p{font-size:.94rem; max-width:320px}
.footer-col h5{color:#fff; font-size:.8rem; letter-spacing:.1em; text-transform:uppercase; margin-bottom:16px}
.footer-col ul{list-style:none; padding:0; margin:0}
.footer-col li{margin-bottom:11px}
.footer-col a{color:#C7D2E2; font-size:.95rem; transition:color .2s}
.footer-col a:hover{color:var(--cyan)}
.footer-bottom{display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:14px; padding-top:24px; font-size:.88rem}
.footer-bottom a{color:#C7D2E2}
.social{display:flex; gap:12px}
.social a{width:38px; height:38px; border-radius:50%; background:rgba(255,255,255,.08); display:grid; place-items:center; transition:background .25s,transform .25s}
.social a:hover{background:var(--cyan); transform:translateY(-3px)}
.social svg{width:18px; height:18px; fill:#fff}
@media (max-width:960px){.footer-top{grid-template-columns:1fr 1fr}}
@media (max-width:460px){.footer-top{grid-template-columns:1fr}}
.has-dropdown{position:relative}
.nav-drop{display:inline-flex; align-items:center; gap:6px; cursor:pointer; color:var(--navy); font-family:'Outfit'; font-weight:500; font-size:.98rem; padding:4px 0; background:none; border:0}
.nav-drop .caret{font-size:.66rem; transition:transform .25s var(--ease)}
.has-dropdown:hover .caret,.has-dropdown:focus-within .caret{transform:rotate(180deg)}
.nav-drop.active{color:var(--blue)}
.dropdown{list-style:none; margin:0; padding:8px; position:absolute; top:calc(100% + 14px); left:50%; transform:translateX(-50%) translateY(8px); min-width:236px; background:#fff; border:1px solid var(--line); border-radius:14px; box-shadow:var(--shadow-lg); opacity:0; visibility:hidden; transition:opacity .25s var(--ease),transform .25s var(--ease); z-index:1001}
.dropdown::before{content:""; position:absolute; top:-14px; left:0; right:0; height:14px}
.has-dropdown:hover .dropdown,.has-dropdown:focus-within .dropdown{opacity:1; visibility:visible; transform:translateX(-50%) translateY(0)}
.dropdown li{margin:0}
.dropdown a{display:block; padding:10px 14px; border-radius:9px; color:var(--navy); font-family:'Outfit'; font-weight:500; font-size:.95rem; white-space:nowrap}
.dropdown a::after{display:none}
.dropdown a:hover,.dropdown a[aria-current="page"]{background:var(--pale); color:var(--blue)}
@media (max-width:1024px){.nav-links,.nav-actions .login{display:none}.menu-toggle{display:block}.nav.open .nav-links{display:flex; position:absolute; top:76px; left:0; right:0; flex-direction:column; align-items:flex-start; background:#fff; padding:20px 24px; gap:16px; border-bottom:1px solid var(--line); box-shadow:var(--shadow); white-space:normal}.nav.open .nav-actions .login{display:block}.nav.open .has-dropdown{width:100%}.nav.open .nav-drop{display:flex; justify-content:space-between; width:100%}.nav.open .dropdown{position:static; transform:none; opacity:1; visibility:visible; box-shadow:none; border:0; background:transparent; padding:6px 0 2px 14px; min-width:0}.nav.open .dropdown a{padding:8px 0}.nav.open .dropdown a:hover,.nav.open .dropdown a[aria-current="page"]{background:transparent}}
.site-header .container,.site-footer .container{width:100%; max-width:var(--maxw); margin:0 auto; padding:0 24px}
/* neutralise landing.css chrome rules so this matches the main site exactly */
.site-header{background:rgba(255,255,255,.8)}.site-header.scrolled{background:rgba(255,255,255,.8)}
.nav-links{font-weight:400}.nav-links a{opacity:1}.nav-links a:hover{opacity:1;color:var(--navy)}.dropdown a:hover,.dropdown a[aria-current="page"]{color:var(--blue)}
.site-footer .footer-brand{max-width:none}.site-footer .footer-brand p{margin:0;color:inherit}.site-footer .footer-bottom{color:inherit}
/* Oct 6: phone menu: "Who we serve" folds open/closed when tapped (the caret used to do nothing).
   Toggled by a small script on every page that adds .is-open to .has-dropdown. Desktop hover menu unchanged. */
@media (max-width:1024px){
  .nav.open .has-dropdown .dropdown{display:none}
  .nav.open .has-dropdown.is-open .dropdown{display:block}
  .nav.open .has-dropdown:hover .caret,.nav.open .has-dropdown:focus-within .caret{transform:none}
  .nav.open .has-dropdown.is-open .caret{transform:rotate(180deg)}
  .nav.open .nav-drop{min-height:44px; align-items:center; cursor:pointer; background:none; border:0; padding:0; text-align:left}
  .nav.open .nav-drop .caret{display:inline-grid; place-items:center; width:32px; height:32px; font-size:.8rem}
}
/* Oct 6: square header button, same as the homepage header (Ashlesha) */
.site-header .btn{border-radius:0; box-shadow:none; background:#1D66DD; padding:9px 18px; font-size:.94rem; border-width:1px; white-space:nowrap; transform:none}
.site-header .btn:hover,.site-header .btn-primary:hover{background:var(--navy); box-shadow:none; transform:none}
@media (max-width:480px){ .site-header .btn{padding:11px 14px; font-size:.9rem} .site-header .btn .arrow{display:none} }
@media (max-width:360px){ .site-header .btn{padding:10px 12px; font-size:.86rem} }
/* Oct 6: every page uses the homepage header (Ashlesha). These are the .home-v3 header rules without the
   .home-v3 scope, so older pages (employers, pricing, blog posts, platform...) match the homepage. */
.site-header .btn{border-radius:0; box-shadow:none; background:#1D66DD; padding:9px 18px; font-size:.94rem; font-weight:600; letter-spacing:.005em; border-width:1px; white-space:nowrap}
.site-header .btn:hover,.site-header .btn-primary:hover{background:var(--navy); box-shadow:none; transform:none}
.nav .logo{min-height:44px; display:inline-flex; align-items:center}
.nav .logo img{width:auto}
.menu-toggle{min-width:44px; min-height:44px}
.nav-actions .login{white-space:nowrap}
.nav-drop{min-height:44px}
.nav-links .nav-login{display:none}
@media (min-width:1025px){ .nav-drop,.nav-actions .login{min-height:44px; display:inline-flex; align-items:center} }
@media (max-width:1024px){ .nav-actions{margin-left:auto; margin-right:8px} }
@media (max-width:480px){
  .site-header .btn{padding:11px 14px; font-size:.9rem}
  .site-header .btn .arrow{display:none}
  .nav.open .nav-actions .login{display:none}
  .nav-links .nav-login{display:block}
}
@media (max-width:360px){ .nav .logo img{height:28px; width:auto} .site-header .btn{padding:10px 12px; font-size:.86rem} }
@media (max-height:500px) and (orientation:landscape){ .nav{height:56px} }