/* Team Track — public site. Same neumorphic system as the app and portals:
   identical tokens to web/employee/src/neu.css so the site, the portals and
   the app read as one product. */
:root{
  --bg:#E9EDF5; --card:#EDF1F8; --inset:#E2E7F0; --accent:#1D5BE0;
  --text:#10141C; --subtle:#8A93A6; --sh-dark:#C4CBD9; --sh-light:#FFFFFF;
  --danger:#E05555; --ok:#2FB56B; --radius:22px;
  --ease:cubic-bezier(.2,.7,.3,1);
}
[data-theme="dark"]{
  --bg:#0E1218; --card:#161B24; --inset:#11151D; --accent:#F2A05F;
  --text:#EFF2F7; --subtle:#6C7688; --sh-dark:#070A0E; --sh-light:#1F2733;
}
*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth}
body{
  background:var(--bg);color:var(--text);
  font-family:'Manrope',system-ui,-apple-system,sans-serif;
  line-height:1.6;transition:background .4s var(--ease),color .4s var(--ease);
  overflow-x:hidden;
}
.wrap{max-width:1080px;margin:0 auto;padding:0 22px}
.neu{background:var(--card);border-radius:var(--radius);padding:26px;
  box-shadow:7px 7px 16px var(--sh-dark),-7px -7px 16px var(--sh-light)}
.inset{background:var(--inset);border-radius:16px;padding:18px;
  box-shadow:inset 4px 4px 9px var(--sh-dark),inset -4px -4px 9px var(--sh-light)}
.accent{color:var(--accent)}
.label{font-size:10px;letter-spacing:1.6px;font-weight:800;
  color:var(--subtle);text-transform:uppercase}
h1{font-size:clamp(34px,6vw,58px);font-weight:800;line-height:1.1;letter-spacing:-1px}
h2{font-size:clamp(24px,3.4vw,34px);font-weight:800;letter-spacing:-.5px;margin-bottom:10px}
h3{font-size:18px;font-weight:800;margin-bottom:6px}
p{color:var(--text);opacity:.86}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
.btn{display:inline-flex;align-items:center;gap:9px;padding:14px 26px;
  border-radius:16px;font-weight:800;font-size:15px;border:none;cursor:pointer;
  background:var(--card);color:var(--text);
  box-shadow:6px 6px 13px var(--sh-dark),-6px -6px 13px var(--sh-light);
  transition:transform .18s var(--ease),box-shadow .18s var(--ease)}
.btn:hover{transform:translateY(-2px);text-decoration:none;
  box-shadow:9px 9px 18px var(--sh-dark),-9px -9px 18px var(--sh-light)}
.btn:active{transform:translateY(0);
  box-shadow:inset 5px 5px 11px var(--sh-dark),inset -5px -5px 11px var(--sh-light)}
.btn.primary{background:var(--accent);color:#fff}
[data-theme="dark"] .btn.primary{color:#10141C}
.btn svg{width:17px;height:17px;stroke-width:2.2}

/* ---------------------------------------------------------------- icons
   One stroke-icon system, sized by the box it sits in. Replaces the emoji
   the site used to lean on: emoji render differently on every platform and
   in a neumorphic layout they read as stickers rather than as part of the
   surface. */
.i{width:1em;height:1em;display:inline-block;vertical-align:-.125em;
  fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}
.i.solid{fill:currentColor;stroke:none}

/* top bar */
nav{position:sticky;top:0;z-index:40;backdrop-filter:blur(14px);
  background:color-mix(in srgb,var(--bg) 82%,transparent);
  border-bottom:1px solid color-mix(in srgb,var(--subtle) 18%,transparent);
  transition:box-shadow .3s var(--ease),background .3s var(--ease)}
nav.scrolled{box-shadow:0 10px 30px -18px var(--sh-dark);
  background:color-mix(in srgb,var(--bg) 94%,transparent)}
nav .wrap{display:flex;align-items:center;gap:14px;padding-top:13px;padding-bottom:13px}
nav .links{margin-left:auto;display:flex;gap:20px;align-items:center;font-size:14px;font-weight:700}
nav .links a{color:var(--subtle);position:relative}
nav .links a::after{content:'';position:absolute;left:0;right:0;bottom:-5px;height:2px;
  border-radius:2px;background:var(--accent);transform:scaleX(0);transform-origin:left;
  transition:transform .28s var(--ease)}
nav .links a:hover{color:var(--accent);text-decoration:none}
nav .links a:hover::after{transform:scaleX(1)}

/* The brand mark. A fixed pale chip in BOTH themes: the logo carries a dark
   slate figure that disappears against the dark theme's near-black surface,
   so it keeps its own light plate and reads like an app icon. */
.mark{width:36px;height:36px;border-radius:11px;flex-shrink:0;display:grid;
  place-items:center;background:#EDF1F8;padding:4px;
  box-shadow:5px 5px 11px var(--sh-dark),-5px -5px 11px var(--sh-light);
  transition:transform .35s var(--ease)}
.mark img{width:100%;height:100%;display:block}
a.brandlink{display:flex;align-items:center;gap:12px;color:inherit}
a.brandlink:hover{text-decoration:none}
a.brandlink:hover .mark{transform:rotate(-6deg) scale(1.06)}
.brand{font-weight:800;font-size:19px;letter-spacing:-.3px}

/* Theme switch. A pill toggle rather than a tapped icon: the knob physically
   slides between two ends, so the control shows which of the two states you
   are in even before you read the icon. Built from the same tokens as every
   other surface — a groove pressed into the page, a knob raised out of it. */
.tsw{position:relative;width:58px;height:30px;flex-shrink:0;padding:0;border:none;
  border-radius:999px;cursor:pointer;background:var(--inset);
  box-shadow:inset 3px 3px 7px var(--sh-dark),inset -3px -3px 7px var(--sh-light);
  transition:background .4s var(--ease)}
.tsw .knob{position:absolute;top:3px;left:3px;width:24px;height:24px;border-radius:50%;
  display:grid;place-items:center;color:var(--accent);background:var(--card);
  box-shadow:3px 3px 7px var(--sh-dark),-2px -2px 6px var(--sh-light);
  transition:transform .42s cubic-bezier(.5,1.6,.4,1),color .3s var(--ease)}
.tsw .knob svg{width:14px;height:14px}
[data-theme="dark"] .tsw .knob{transform:translateX(28px)}
.tsw:hover .knob{box-shadow:4px 4px 9px var(--sh-dark),-3px -3px 7px var(--sh-light)}
.tsw:active .knob{width:28px;border-radius:999px}
[data-theme="light"] .tsw .i-sun{display:none}
[data-theme="dark"] .tsw .i-moon{display:none}

/* Reading progress. A thin accent line that fills as the page scrolls —
   the only chrome on the site that moves continuously, so it stays hairline. */
.progress{position:fixed;top:0;left:0;height:2px;width:100%;z-index:60;
  background:var(--accent);transform:scaleX(0);transform-origin:left;
  transition:transform .1s linear}

/* reveal-on-scroll */
.rv{opacity:0;transform:translateY(26px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.rv.in{opacity:1;transform:none}
footer{padding:46px 0 34px;color:var(--subtle);font-size:13px;text-align:center}
footer a{color:var(--subtle)}
.legal{padding:44px 0 20px}
.legal h2{margin-top:30px;font-size:22px}
.legal p,.legal li{font-size:15px;opacity:.9;margin-bottom:10px}
.legal ul{padding-left:22px}
@media(max-width:640px){nav .links{gap:13px;font-size:12.5px}.brand{display:none}}

/* Respect people who ask for less motion. */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.001ms !important;
    animation-iteration-count:1 !important;transition-duration:.01ms !important}
  .rv{opacity:1;transform:none}
}