/* Careers page (index.html): Store Creator role. Brand: Inter, navy, green, yellow, pink, the four-colour strip. */

body{margin:0;background:#FFFFFF}
a{color:#0F172A}a:hover{color:#17A863}
.cp{color:#0F172A;font-family:"Inter","Segoe UI",system-ui,sans-serif;-webkit-font-smoothing:antialiased}
.cp *{box-sizing:border-box}
.wrap{max-width:1200px;margin:0 auto;padding:0 40px}
.nav{border-bottom:1px solid #E2E8F0;background:#FFFFFF}
.nav-in{display:flex;align-items:center;gap:20px;height:72px}
.lock{display:flex;align-items:center;gap:12px;text-decoration:none;color:#0F172A}
.lock img{height:36px;width:auto;display:block}
.lock .wm{display:grid;gap:2px;padding-left:12px;border-left:1px solid #E2E8F0}
.lock .wm b{font-size:19px;font-weight:800;line-height:1}
.lock .wm span{font-size:11px;color:#475569}
.navr{margin-left:auto;display:flex;align-items:center;gap:16px}
.navr .home{font-weight:600;font-size:15px;text-decoration:none}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 24px;border-radius:30px;font-weight:600;font-size:15px;text-decoration:none;border:1px solid transparent}
.btn.g{background:#2BD47D;color:#0F172A}
.btn.g:hover{color:#0F172A}
.btn.o{border-color:#CBD5E1;background:#FFFFFF;color:#0F172A}
.btn.on-navy{border-color:#334155;color:#FFFFFF}
.label{display:inline-block;background:#FFC93C;color:#0F172A;border-radius:30px;padding:8px 16px;line-height:1.2;font-size:11.5px;font-weight:800;letter-spacing:2px;text-transform:uppercase}
.hero{padding:88px 0 72px;background:#F3F6F4;border-bottom:1px solid #E2E8F0}
.hero-in{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:56px;align-items:center}
.hero h1{margin:20px 0 18px;font-size:64px;line-height:1.04;font-weight:800;letter-spacing:-2.2px}
.hero h1 span{color:#17A863}
.hero p{margin:0 0 28px;font-size:19px;line-height:1.55;color:#475569;max-width:32em}
.tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}
.tags span{border:1px solid #CBD5E1;background:#FFFFFF;border-radius:30px;padding:8px 16px;font-size:13.5px;font-weight:600}
.earn{background:#0F172A;color:#FFFFFF;border-radius:22px;padding:36px;display:grid;gap:14px}
.earn small{font-size:13px;color:#94A3B8;font-weight:600;letter-spacing:1.5px;text-transform:uppercase}
.earn b{font-size:56px;font-weight:800;letter-spacing:-1.5px;color:#2BD47D;line-height:1}
.earn p{margin:0;font-size:15px;color:#CBD5E1;line-height:1.55}
.earn .row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:8px}
.earn .row div{background:#1E293B;border-radius:14px;padding:14px 16px}
.earn .row strong{display:block;font-size:22px;font-weight:800}
.earn .row span{font-size:13px;color:#94A3B8}
.sec{padding:96px 0}
.sec.tint{background:#F3F6F4}
.h2{margin:14px 0 36px;font-size:44px;line-height:1.08;font-weight:800;letter-spacing:-1.4px;max-width:18em}
.cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.card{background:#FFFFFF;border:1px solid #E2E8F0;border-radius:14px;padding:28px;display:grid;gap:12px;align-content:start}
.card .ic{width:44px;height:44px;border-radius:12px;display:grid;place-items:center}
.card h3{margin:0;font-size:20px;font-weight:800;letter-spacing:-.3px}
.card ul{margin:0;padding-left:18px;display:grid;gap:8px;font-size:15px;line-height:1.5;color:#475569}
.steps{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:20px;position:relative}
.step{display:grid;gap:10px;align-content:start}
.step .n{width:48px;height:48px;border-radius:50%;background:#2BD47D;display:grid;place-items:center;font-weight:800;font-size:18px}
.step:last-child .n{background:#FFC93C}
.step h3{margin:0;font-size:18px;font-weight:800}
.step p{margin:0;font-size:14.5px;line-height:1.55;color:#475569}
.pay{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px;align-items:center;background:#E8F7EF;border-radius:22px;padding:44px 48px}
.pay h2{margin:0 0 12px;font-size:34px;font-weight:800;letter-spacing:-1px}
.pay p{margin:0;font-size:16px;line-height:1.6;color:#475569}
.pay ol{margin:0;padding-left:20px;display:grid;gap:10px;font-size:15.5px;line-height:1.5}
.faq details{border-bottom:1px solid #E2E8F0;padding:18px 0}
.faq summary{cursor:pointer;font-size:18px;font-weight:600;list-style:none;display:flex;justify-content:space-between;gap:16px}
.faq summary::-webkit-details-marker{display:none}
.faq details p{margin:12px 0 0;font-size:15px;line-height:1.6;color:#475569}
.band{background:#0F172A;color:#FFFFFF;border-radius:22px;padding:64px 48px;text-align:center;display:grid;justify-items:center;gap:16px}
.band h2{margin:0;font-size:48px;font-weight:800;letter-spacing:-1.5px}
.band h2 span{color:#2BD47D}
.band p{margin:0;font-size:17px;color:#CBD5E1}
.strip{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));height:8px;margin-top:64px}
.ico{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
@media (max-width:1000px){
  .hero-in,.pay{grid-template-columns:1fr}
  .cols{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr 1fr}
}
@media (max-width:640px){
  .wrap{padding:0 16px}
  .lock .wm span,.navr .home{display:none}
  .hero{padding:48px 0}
  .hero h1{font-size:40px;letter-spacing:-1.2px}
  .hero .btn{width:100%}
  .h2{font-size:32px}
  .sec{padding:64px 0}
  .steps{grid-template-columns:1fr}
  .pay{padding:28px 20px}
  .band{padding:44px 20px}
  .band h2{font-size:34px}
  .band .btn{width:100%}
}

.skip{position:absolute;left:12px;top:-60px;z-index:20;background:#0F172A;color:#FFFFFF;padding:12px 16px;border-radius:12px;font-weight:600;text-decoration:none}
.skip:focus{top:12px;color:#FFFFFF}
.cp :focus-visible{outline:3px solid #17A863;outline-offset:2px}
.btn{cursor:pointer}
.strip i{display:block}
.webonly-note{display:none}
html[data-shell] .webonly-note{display:block;background:#FFF4D6;padding:14px 16px;font-size:14px;line-height:1.5;text-align:center}
/* accessibility: big enough targets; the deep green a touch darker on the grey-green background (3:1 for large text) */
.hero h1 span{color:#159C5C}
.lock,.navr .home{min-height:44px;min-width:44px;display:flex;align-items:center;justify-content:center}
.faq summary{min-height:44px;align-items:center}
.faq details p a,.doc a{display:inline-block;min-height:24px}