/* Remote Talent — feature pages
   Shared with landing.html. Tokens per Brand Guidelines v1.0. */

:root{
  --ink:#0a0a0a; --paper:#fafaf7; --paper2:#f3f1ec; --paper3:#ece9e1;
  --rule:#dad6cc; --rule-soft:#ece9e1; --sub:#6b6862; --sub2:#8c8a83;
  --blue:#1d4ed8; --blue-tint:#e8edfb;
  --paid:#15803d; --paid-tint:#e6f4ec;
  --pending:#c98412; --pending-tint:#fbf1de;
  --overdue:#b42318; --overdue-tint:#fbe7e3;
  --draft:#7c5cd6; --draft-tint:#efeafd;
  --font:"Inter",-apple-system,BlinkMacSystemFont,system-ui,sans-serif;
  --shadow-sm:0 1px 2px rgba(10,10,10,.05);
  --shadow-md:0 4px 16px -4px rgba(10,10,10,.10),0 1px 3px rgba(10,10,10,.05);
  --shadow-lg:0 24px 60px -18px rgba(10,10,10,.22),0 4px 12px -4px rgba(10,10,10,.08);
  --nav-h:64px;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--nav-h) + 16px);-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--font);
  font-feature-settings:"cv11","ss01";-webkit-font-smoothing:antialiased;overflow-x:hidden}
h1,h2,h3,h4,p,figure{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
img,svg{max-width:100%;display:block}
button{font-family:inherit;cursor:pointer}
a{color:inherit;text-decoration:none}

.wrap{max-width:1180px;margin:0 auto;padding:0 24px}
@media(max-width:640px){.wrap{padding:0 18px}}
.eyebrow{font-size:10px;font-weight:500;letter-spacing:1.6px;text-transform:uppercase;color:var(--sub)}
.lede{font-size:clamp(16px,1.6vw,18px);line-height:1.55;letter-spacing:-.2px;color:var(--sub)}
.body{font-size:15px;line-height:1.55;color:var(--sub)}
.cap{font-size:12px;line-height:1.5;color:var(--sub2)}
.num{font-variant-numeric:tabular-nums}

.skip{position:absolute;left:-9999px;top:0;background:var(--ink);color:var(--paper);
  padding:10px 16px;border-radius:0 0 8px 0;z-index:200;font-size:13px;font-weight:600}
.skip:focus{left:0}
a:focus-visible,button:focus-visible{outline:2px solid var(--blue);outline-offset:3px;border-radius:4px}

/* ── Buttons ── */
.btn{display:inline-flex;align-items:center;gap:8px;white-space:nowrap;padding:11px 18px;
  font-weight:600;font-size:14px;letter-spacing:-.1px;border-radius:999px;
  border:1px solid transparent;background:transparent;color:var(--ink);
  transition:transform .18s cubic-bezier(.2,.7,.3,1),box-shadow .18s,border-color .18s,background .18s}
.btn:hover{transform:translateY(-1px)}
.btn.primary{background:var(--ink);color:var(--paper);box-shadow:var(--shadow-sm)}
.btn.primary:hover{box-shadow:var(--shadow-md)}
.btn.ghost{border-color:var(--rule);background:rgba(255,255,255,.6)}
.btn.ghost:hover{border-color:var(--ink);background:#fff}
.btn.lg{padding:14px 24px;font-size:15px}

/* ── Nav ── */
.nav{position:sticky;top:0;z-index:60;height:var(--nav-h);background:rgba(250,250,247,.9);
  backdrop-filter:saturate(180%) blur(14px);-webkit-backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid var(--rule)}
.nav .wrap{height:100%;display:flex;align-items:center;gap:28px}
.brand{display:flex;align-items:flex-end;gap:9px;flex-shrink:0}
.brand .word{display:flex;flex-direction:column;line-height:1}
.brand .r{font-size:9px;font-weight:600;letter-spacing:-.2px}
.brand .t{font-size:20px;font-weight:800;letter-spacing:-1px}
.brand .mark{width:17px;height:17px;margin-bottom:2px}
.navlinks{display:flex;gap:24px;margin-left:auto;align-items:center;overflow-x:auto;
  -webkit-overflow-scrolling:touch;scrollbar-width:none}
.navlinks::-webkit-scrollbar{display:none}
.navlinks a{font-size:13.5px;font-weight:500;color:var(--sub);white-space:nowrap;transition:color .16s}
.navlinks a:hover{color:var(--ink)}
.navlinks a.on{color:var(--ink);font-weight:600}
.navcta{flex-shrink:0}
@media(max-width:900px){.navcta{display:none}.navlinks{margin-left:16px}}

/* ── Feature hero ── */
.fhero{padding:64px 0 56px;position:relative;overflow:hidden}
.fhero::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(680px 380px at 88% 10%,rgba(29,78,216,.05),transparent 68%)}
.fhero .wrap{position:relative}
.crumb{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--sub2);margin-bottom:18px}
.crumb a{color:var(--sub2)}
.crumb a:hover{color:var(--ink)}
.fhero h1{font-size:clamp(34px,4.8vw,52px);line-height:1.06;letter-spacing:-1.7px;
  font-weight:600;margin:12px 0 0;max-width:15ch;text-wrap:balance}
.fhero .lede{margin-top:18px;max-width:600px}
.fhero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px;align-items:center}

/* ── Sections ── */
.sec{padding:76px 0}
.sec.tint{background:var(--paper2);border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.sec.ink{background:var(--ink);color:var(--paper)}
.sec.ink .lede,.sec.ink .body{color:rgba(250,250,247,.66)}
.sec.ink .eyebrow{color:rgba(250,250,247,.55)}
@media(max-width:640px){.sec{padding:56px 0}}
.sec-head{max-width:680px}
.sec-head .eyebrow{margin-bottom:14px}
.sec-head h2{font-size:clamp(26px,3.6vw,36px);line-height:1.14;letter-spacing:-.8px;font-weight:600}
.sec-head .lede{margin-top:16px}

.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,430px);gap:54px;
  align-items:center;margin-top:48px}
.split.rev{grid-template-columns:minmax(0,430px) minmax(0,1fr)}
@media(max-width:960px){.split,.split.rev{grid-template-columns:1fr;gap:38px}
  .split.rev .split-media{order:-1}}

.phone{position:relative;width:100%;max-width:320px;margin:0 auto;border-radius:44px;
  background:var(--ink);padding:9px;box-shadow:var(--shadow-lg)}
.phone img{width:100%;height:auto;border-radius:36px;display:block;background:var(--paper2)}
.phone-pair{display:flex;gap:20px;justify-content:center;align-items:flex-start}
.phone-pair .phone{max-width:245px}
.phone-pair .phone:nth-child(2){margin-top:36px}
@media(max-width:560px){.phone-pair{gap:12px}
  .phone-pair .phone{max-width:47%;padding:6px;border-radius:30px}
  .phone-pair .phone img{border-radius:25px}}

.flist{display:flex;flex-direction:column;margin-top:28px}
.fitem{display:flex;gap:15px;padding:16px 0;border-top:1px solid var(--rule-soft)}
.fitem:last-child{border-bottom:1px solid var(--rule-soft)}
.fnum{font-size:10px;font-weight:600;letter-spacing:1px;color:var(--sub2);flex-shrink:0;
  width:22px;padding-top:3px;font-variant-numeric:tabular-nums}
.fbody h4{font-size:15px;font-weight:600;letter-spacing:-.2px;margin-bottom:4px}
.fbody p{font-size:13.5px;line-height:1.5;color:var(--sub)}
.sec.ink .fitem{border-color:rgba(250,250,247,.13)}
.sec.ink .fbody p{color:rgba(250,250,247,.62)}
.sec.ink .fnum{color:rgba(250,250,247,.42)}

/* ── Cards ── */
.cards{display:grid;gap:18px;margin-top:42px}
.cards.c2{grid-template-columns:repeat(2,1fr)}
.cards.c3{grid-template-columns:repeat(3,1fr)}
.cards.c4{grid-template-columns:repeat(4,1fr)}
@media(max-width:900px){.cards.c3,.cards.c4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.cards.c2,.cards.c3,.cards.c4{grid-template-columns:1fr}}
.card{background:#fff;border:1px solid var(--rule);border-radius:16px;padding:22px;
  transition:transform .22s cubic-bezier(.2,.7,.3,1),box-shadow .22s,border-color .22s}
.card:hover{transform:translateY(-3px);box-shadow:var(--shadow-md);border-color:var(--sub2)}
.card .kicker{font-size:10px;letter-spacing:1.4px;text-transform:uppercase;color:var(--sub2);font-weight:500}
.card h4{font-size:16.5px;font-weight:600;letter-spacing:-.35px;margin:11px 0 8px}
.card p{font-size:13.5px;line-height:1.55;color:var(--sub)}
.card .tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:15px}
.tag{font-size:10.5px;font-weight:500;padding:4px 9px;border-radius:999px;background:var(--paper2);
  color:var(--sub);border:1px solid var(--rule-soft);white-space:nowrap}
.tag.b{background:var(--blue-tint);color:var(--blue);border-color:transparent}
.tag.g{background:var(--paid-tint);color:var(--paid);border-color:transparent}
.sec.tint .card{background:var(--paper)}

/* ── Stats ── */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;margin-top:42px;
  background:var(--rule);border:1px solid var(--rule);border-radius:14px;overflow:hidden}
@media(max-width:760px){.stats{grid-template-columns:repeat(2,1fr)}}
.stat{background:var(--paper);padding:22px 20px}
.sec.tint .stat{background:var(--paper2)}
.stat .v{font-size:clamp(24px,3vw,30px);font-weight:700;letter-spacing:-1px;font-variant-numeric:tabular-nums}
.stat .k{font-size:11.5px;color:var(--sub);margin-top:5px;line-height:1.4}

/* ── Steps ── */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:42px;counter-reset:st}
@media(max-width:900px){.steps{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.steps{grid-template-columns:1fr}}
.step{counter-increment:st;position:relative;padding:22px;background:#fff;
  border:1px solid var(--rule);border-radius:16px}
.sec.tint .step{background:var(--paper)}
.step::before{content:counter(st,decimal-leading-zero);font-size:10px;font-weight:700;
  letter-spacing:1.2px;color:var(--sub2);font-variant-numeric:tabular-nums}
.step h4{font-size:15.5px;font-weight:600;letter-spacing:-.3px;margin:10px 0 7px}
.step p{font-size:13px;line-height:1.5;color:var(--sub)}

/* ── Definition table ── */
.dtable{width:100%;border-collapse:collapse;font-size:13.5px;margin-top:10px}
.dtable th,.dtable td{padding:13px 14px;text-align:left;border-bottom:1px solid var(--rule-soft);
  vertical-align:top}
.dtable thead th{font-size:9.5px;letter-spacing:1.3px;text-transform:uppercase;color:var(--sub2);
  font-weight:500;border-bottom:1px solid var(--rule)}
.dtable td:first-child{font-weight:600;white-space:nowrap}
.dtable tbody tr:last-child td{border-bottom:0}
.tscroll{overflow-x:auto;-webkit-overflow-scrolling:touch;margin-top:32px;
  border:1px solid var(--rule);border-radius:14px;background:#fff}
.sec.tint .tscroll{background:var(--paper)}
.tscroll table{min-width:520px}

/* ── Status pills ── */
.pill{display:inline-flex;align-items:center;gap:5px;padding:4px 10px;border-radius:999px;
  font-size:9.5px;font-weight:700;letter-spacing:1.1px;text-transform:uppercase;white-space:nowrap}
.pill i{width:5px;height:5px;border-radius:50%;background:currentColor}
.pill.draft{background:var(--draft-tint);color:var(--draft)}
.pill.pending{background:var(--pending-tint);color:var(--pending)}
.pill.paid{background:var(--paid-tint);color:var(--paid)}
.pill.overdue{background:var(--overdue-tint);color:var(--overdue)}
.pill.blue{background:var(--blue-tint);color:var(--blue)}
.pills-row{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px}

/* ── Callout ── */
.callout{margin-top:36px;padding:22px 24px;background:var(--blue-tint);border-radius:16px;
  font-size:13.5px;line-height:1.6;color:#16389c}
.callout b{color:#0f2a7d;font-weight:600}
.sec.ink .callout{background:rgba(250,250,247,.07);color:rgba(250,250,247,.72)}
.sec.ink .callout b{color:var(--paper)}

/* ── Next / cross-links ── */
.next{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:40px}
@media(max-width:900px){.next{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.next{grid-template-columns:1fr}}
.nextcard{display:block;padding:20px;border:1px solid rgba(250,250,247,.18);border-radius:14px;
  transition:border-color .2s,transform .2s cubic-bezier(.2,.7,.3,1),background .2s}
.nextcard:hover{border-color:rgba(250,250,247,.45);transform:translateY(-2px);
  background:rgba(250,250,247,.05)}
.nextcard .k{font-size:9.5px;letter-spacing:1.4px;text-transform:uppercase;
  color:rgba(250,250,247,.45);font-weight:500}
.nextcard h4{font-size:15.5px;font-weight:600;letter-spacing:-.3px;margin:9px 0 6px;color:var(--paper)}
.nextcard p{font-size:12.5px;line-height:1.5;color:rgba(250,250,247,.58)}

/* ── CTA ── */
.cta{text-align:center}
.cta h2{font-size:clamp(30px,4.6vw,46px);line-height:1.08;letter-spacing:-1.5px;font-weight:600}
.cta .lede{margin:18px auto 0;max-width:520px}
.cta-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:30px}
.sec.ink .btn.ghost{border-color:rgba(250,250,247,.28);background:transparent;color:var(--paper)}
.sec.ink .btn.ghost:hover{border-color:var(--paper);background:rgba(250,250,247,.06)}

/* ── Footer ── */
.foot{background:var(--ink);color:var(--paper);padding:52px 0 32px;border-top:1px solid rgba(250,250,247,.12)}
.foot-grid{display:grid;grid-template-columns:minmax(0,1.6fr) repeat(3,minmax(0,1fr));gap:36px}
@media(max-width:820px){.foot-grid{grid-template-columns:1fr 1fr;gap:30px}}
@media(max-width:520px){.foot-grid{grid-template-columns:1fr}}
.foot .brand .r,.foot .brand .t{color:var(--paper)}
.foot-tag{font-size:13.5px;line-height:1.6;color:rgba(250,250,247,.6);margin-top:16px;max-width:280px}
.foot h5{font-size:10px;letter-spacing:1.5px;text-transform:uppercase;
  color:rgba(250,250,247,.45);font-weight:500;margin-bottom:14px}
.foot li{margin-bottom:9px}
.foot li a{font-size:13.5px;color:rgba(250,250,247,.72);transition:color .16s}
.foot li a:hover{color:var(--paper)}
.foot-bot{margin-top:42px;padding-top:24px;border-top:1px solid rgba(250,250,247,.14);
  display:flex;flex-wrap:wrap;gap:12px 24px;align-items:center}
.foot-bot p{font-size:11.5px;color:rgba(250,250,247,.45);line-height:1.6}
.foot-bot .r{margin-left:auto}
@media(max-width:640px){.foot-bot .r{margin-left:0}}

/* ── Reveal ── */
.js .rv{opacity:0;transform:translateY(16px);
  transition:opacity .6s cubic-bezier(.2,.7,.3,1),transform .6s cubic-bezier(.2,.7,.3,1)}
.js .rv.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.js .rv{opacity:1;transform:none;transition:none}}

/* Apple's official badge artwork — scaled only, never redrawn or recoloured. */
.appstore{display:inline-block;line-height:0;border-radius:8px;
  transition:transform .18s cubic-bezier(.2,.7,.3,1),opacity .18s}
.appstore:hover{transform:translateY(-1px);opacity:.86}
.appstore img{height:48px;width:auto;display:block}
@media(max-width:520px){.appstore img{height:44px}}