/* =====================================================================
   WorkPay — promo landing page styles (English)
   Brand greens sampled from app store assets.
   Production build: derived from the Claude Design prototype
   (project/workpay/promo.css), kept pixel-identical with minor
   production hardening at the bottom of this file.
   ===================================================================== */

/* ---------------------------------------------------------------------
   FONTS
   The design uses free substitutes for the proprietary headline face:
     Display : Bricolage Grotesque   (poster / headline)
     UI/body : Plus Jakarta Sans
   They are loaded via Google Fonts in index.html. To ship licensed or
   self-hosted fonts instead, drop the files in assets/fonts/ and define
   @font-face here, then remove the Google Fonts <link> from index.html.
   Example:
     @font-face{
       font-family:'Bricolage Grotesque';
       src:url('../assets/fonts/BricolageGrotesque.woff2') format('woff2');
       font-weight:500 800; font-display:swap;
     }
   --------------------------------------------------------------------- */

:root{
  --wp-green:#0E9A68;
  --wp-green-bright:#12a673;
  --wp-green-deep:#0b7a52;
  --wp-green-card-1:#1aa776;
  --wp-green-card-2:#0c855c;
  --wp-green-ink:#0b5e44;
  --wp-hill:#0c3d36;
  --wp-hill-2:#0a4d40;
  --wp-mint:#e9f6ef;
  --wp-mint-2:#d2ecdf;
  --wp-lottery-bg:#d3edfb;
  --wp-lottery-ink:#0a6fb0;
  --income:#0E9A68;
  --expense:#e0382c;
  --gold:#f2b500;
  --gold-2:#f6c945;
  --ink:#17211d;
  --ink-2:#26332c;
  --muted:#5e6e66;
  --muted-2:#8a978f;
  --line:#e7eeea;
  --surface:#ffffff;
  --page:#ecf6f0;

  --display:'Bricolage Grotesque','Plus Jakarta Sans',system-ui,sans-serif;
  --ui:'Plus Jakarta Sans',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  --app:'Plus Jakarta Sans',system-ui,sans-serif;

  --maxw:1180px;
  --radius:22px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;background:var(--page);color:var(--ink);
  font-family:var(--ui);font-weight:400;line-height:1.5;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
h1,h2,h3,h4,p{margin:0;}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px;}
.display{font-family:var(--display);font-weight:800;letter-spacing:-.01em;line-height:1.02;}

/* ---- buttons / store badges ---- */
.btns{display:flex;flex-wrap:wrap;gap:14px;}
.store-badge{
  display:inline-flex;align-items:center;gap:12px;
  background:#0d1714;color:#fff;border-radius:14px;padding:11px 20px 11px 16px;
  border:1px solid rgba(255,255,255,.08);transition:transform .15s ease,box-shadow .15s ease;
  box-shadow:0 8px 24px rgba(7,40,30,.25);
}
.store-badge:hover{transform:translateY(-2px);box-shadow:0 12px 30px rgba(7,40,30,.32);}
.store-badge svg{width:26px;height:26px;flex:none;}
.store-badge .sb-sm{font-size:11px;line-height:1.1;opacity:.82;}
.store-badge .sb-lg{font-size:18px;font-weight:700;line-height:1.15;font-family:var(--display);letter-spacing:-.01em;}
.store-badge[data-soon]{position:relative;}
.badge-soon{
  position:absolute;top:-9px;right:-8px;background:var(--gold);color:#3a2c00;
  font-size:10px;font-weight:800;letter-spacing:.04em;padding:3px 7px;border-radius:999px;text-transform:uppercase;
}
.btn-text{display:inline-flex;align-items:center;gap:7px;font-weight:700;color:#fff;font-size:15px;}
.btn-pill{
  display:inline-flex;align-items:center;gap:9px;background:#fff;color:var(--wp-green-deep);
  font-weight:800;font-family:var(--display);font-size:15px;padding:13px 24px;border-radius:999px;
  border:none;cursor:pointer;transition:transform .15s ease;
}
.btn-pill:hover{transform:translateY(-2px);}
.btn-pill.ghost{background:transparent;color:#fff;border:2px solid rgba(255,255,255,.5);}

/* ============================ HEADER ============================ */
.site-header{
  position:sticky;top:0;z-index:60;backdrop-filter:saturate(1.3) blur(10px);
  background:rgba(236,246,240,.82);border-bottom:1px solid rgba(13,120,80,.10);
}
.site-header .wrap{display:flex;align-items:center;gap:16px;height:64px;}
.brand{display:flex;align-items:center;gap:10px;font-family:var(--display);font-weight:800;font-size:20px;color:var(--wp-green-ink);}
.brand .logo{width:34px;height:34px;border-radius:10px;background:var(--wp-green);display:grid;place-items:center;color:#fff;box-shadow:0 4px 12px rgba(14,154,104,.4);}
.brand .logo svg{width:20px;height:20px;}
.nav-spacer{flex:1;}
.lang-switch{display:flex;align-items:center;gap:4px;font-weight:700;font-size:13px;color:var(--muted);}
.lang-switch a{padding:5px 9px;border-radius:8px;}
.lang-switch a.active{background:var(--wp-green);color:#fff;}
.header-cta{display:inline-flex;align-items:center;gap:8px;white-space:nowrap;background:var(--wp-green-deep);color:#fff;font-weight:800;font-family:var(--display);font-size:14px;padding:9px 18px;border-radius:999px;}
@media(max-width:640px){.header-cta .ht{display:none;}.header-cta{padding:9px;border-radius:50%;}}

/* ============================ HERO ============================ */
.hero{position:relative;overflow:hidden;color:#fff;
  background:linear-gradient(165deg,#13a473 0%,#0c875d 52%,#0a6f4d 100%);}
.hero-scene{position:absolute;inset:0;z-index:0;pointer-events:none;}
.hero-scene svg{position:absolute;width:100%;height:100%;}
.hero-scene img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.hero .wrap{position:relative;z-index:2;display:grid;grid-template-columns:1.05fr .95fr;gap:40px;
  align-items:center;padding-top:60px;padding-bottom:30px;min-height:600px;}
.hero-copy{max-width:560px;}
.eyebrow{display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,.16);
  border:1px solid rgba(255,255,255,.25);padding:7px 14px;border-radius:999px;font-size:12.5px;
  font-weight:700;letter-spacing:.03em;margin-bottom:20px;}
.eyebrow .dot{width:7px;height:7px;border-radius:50%;background:var(--gold-2);}
.hero h1{font-size:clamp(40px,6.2vw,74px);margin-bottom:18px;text-shadow:0 3px 16px rgba(5,40,28,.25);}
.hero .sub{font-size:clamp(17px,2vw,21px);font-weight:500;color:rgba(255,255,255,.92);max-width:480px;margin-bottom:30px;}
.hero .micro{margin-top:18px;font-size:12.5px;color:rgba(255,255,255,.7);}
.hero-art{position:relative;display:flex;justify-content:center;align-items:flex-end;min-height:560px;}
.hero-art .device{transform:rotate(-3deg);}
.scroll-cue{position:absolute;left:50%;bottom:14px;transform:translateX(-50%);z-index:3;color:rgba(255,255,255,.7);font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;display:flex;flex-direction:column;align-items:center;gap:6px;}
.scroll-cue .chev{width:18px;height:18px;animation:bob 1.6s ease-in-out infinite;}
@keyframes bob{0%,100%{transform:translateY(0);}50%{transform:translateY(5px);}}

/* sparkles + bokeh */
.spark{position:absolute;}
@media(max-width:900px){
  .hero .wrap{grid-template-columns:1fr;text-align:center;padding-top:40px;}
  .hero-copy{margin:0 auto;}
  .hero .btns{justify-content:center;}
  .hero-art{min-height:480px;margin-top:10px;}
}

/* ============================ DEVICE / PHONE ============================ */
.device{
  width:300px;flex:none;background:#0d1714;border-radius:42px;padding:11px;
  box-shadow:0 30px 70px rgba(6,38,27,.45),0 6px 18px rgba(6,38,27,.3);position:relative;
}
.device::after{content:"";position:absolute;top:16px;left:50%;transform:translateX(-50%);
  width:96px;height:7px;border-radius:99px;background:rgba(255,255,255,.18);}
.screen{background:#f4f7f5;border-radius:33px;overflow:hidden;height:600px;position:relative;font-family:var(--app);color:#16201c;}
.screen.scroll-mask{height:600px;}
.screen .pad{padding:16px 16px 0;}

.app-bar{display:flex;align-items:center;gap:10px;padding:18px 18px 10px;}
.app-bar .title{font-weight:800;font-size:19px;font-family:var(--display);letter-spacing:-.01em;}
.app-bar .ab-icons{margin-left:auto;display:flex;gap:14px;color:#16201c;}
.app-bar .ab-icons svg{width:21px;height:21px;}
.app-bar.detail .title{font-size:18px;}
.app-bar .back{display:grid;place-items:center;}
.app-bar .back svg{width:22px;height:22px;}

.lottery{display:flex;align-items:center;gap:11px;background:var(--wp-lottery-bg);border-radius:16px;padding:12px 13px;margin:0 16px 14px;}
.lottery .dice{width:30px;height:30px;flex:none;color:#16201c;}
.lottery .lt-txt{font-size:11.5px;line-height:1.32;}
.lottery .lt-txt b{font-size:13px;}
.lottery .open{margin-left:auto;color:var(--wp-green);font-weight:800;font-size:13px;white-space:nowrap;}
.lottery .x{color:#5a6b63;width:15px;height:15px;flex:none;}

.pay-card{margin:0 16px 16px;border-radius:20px;padding:18px 18px 18px;color:#fff;
  background:linear-gradient(160deg,var(--wp-green-card-1),var(--wp-green-card-2));
  box-shadow:0 12px 26px rgba(11,120,82,.30);}
.pay-card .pc-head{display:flex;align-items:center;gap:10px;font-weight:700;font-size:14.5px;margin-bottom:12px;}
.pay-card .pc-ic{width:34px;height:34px;border-radius:10px;background:rgba(255,255,255,.18);display:grid;place-items:center;}
.pay-card .pc-ic svg{width:19px;height:19px;}
.pay-card .amount{font-family:var(--display);font-weight:800;font-size:40px;letter-spacing:-.02em;line-height:1;}
.pay-card .gross{font-size:13px;opacity:.85;margin-top:6px;}
.chips{display:flex;gap:8px;margin-top:14px;flex-wrap:wrap;}
.chip{display:inline-flex;align-items:center;gap:6px;background:rgba(255,255,255,.16);
  border-radius:999px;padding:7px 12px;font-size:12.5px;font-weight:700;}
.chip svg{width:14px;height:14px;}
.pay-card .disc{font-size:10.5px;line-height:1.4;opacity:.8;margin-top:13px;}

.month-row{display:flex;align-items:center;padding:4px 16px 12px;}
.month-row .mr-title{font-family:var(--display);font-weight:800;font-size:24px;}
.month-row .mr-nav{margin-left:auto;display:flex;gap:8px;}
.month-row .mr-nav button{width:34px;height:34px;border-radius:11px;border:none;background:#e3efe9;color:var(--wp-green-deep);display:grid;place-items:center;}
.month-row .mr-nav svg{width:16px;height:16px;}

.segmented{display:flex;gap:0;background:#fff;border:1px solid var(--line);border-radius:13px;margin:0 16px 12px;padding:4px;}
.segmented .seg{flex:1;display:grid;place-items:center;padding:8px 0;border-radius:9px;color:#67756d;}
.segmented .seg.on{background:#dff0e8;color:var(--wp-green-deep);}
.segmented .seg svg{width:18px;height:18px;}

.cal{margin:0 16px;}
.cal .dow{display:grid;grid-template-columns:repeat(7,1fr);font-size:11px;font-weight:700;color:#7a877f;padding:0 2px 6px;}
.cal .dow .sun{color:#e0556a;}
.cal .grid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;}
.cal .cell{background:#fff;border-radius:9px;min-height:46px;padding:5px 5px 4px;font-size:11px;}
.cal .cell .d{font-weight:700;color:#3a463f;font-size:11px;}
.cal .cell.muted{background:#f0f3f1;}
.cal .cell.muted .d{color:#b7c1ba;}
.cal .cell .amt{display:block;margin-top:9px;font-weight:800;color:var(--wp-green);font-size:11px;}
.cal .cell.tint-b{background:#eef4fb;}
.cal .cell.tint-y{background:#fbf6ec;}

.fab{position:absolute;right:14px;bottom:74px;display:inline-flex;align-items:center;gap:9px;
  background:var(--wp-green-deep);color:#fff;font-weight:800;font-family:var(--display);font-size:15px;
  padding:14px 20px;border-radius:999px;box-shadow:0 10px 22px rgba(11,90,60,.45);border:3px solid #0a3b29;}
.fab svg{width:19px;height:19px;}

.tabbar{position:absolute;left:0;right:0;bottom:0;height:62px;background:#fff;border-top:1px solid var(--line);
  display:flex;align-items:center;justify-content:space-around;padding:0 8px;}
.tabbar .tab{display:flex;flex-direction:column;align-items:center;gap:3px;font-size:11px;font-weight:600;color:#7a877f;}
.tabbar .tab svg{width:21px;height:21px;}
.tabbar .tab.on{color:var(--wp-green);}
.tabbar .tab.on .ic{background:#dff0e8;border-radius:999px;padding:3px 14px;margin-bottom:1px;}

/* ---- stats screen ---- */
.revenue-card{margin:0 16px 14px;border-radius:20px;padding:18px;color:#fff;
  background:linear-gradient(160deg,#15a072,#0c7e57);box-shadow:0 12px 26px rgba(11,120,82,.30);}
.revenue-card .rc-label{font-size:11px;font-weight:800;letter-spacing:.13em;opacity:.85;}
.revenue-card .rc-amt{font-family:var(--display);font-weight:800;font-size:38px;letter-spacing:-.02em;margin-top:6px;}
.stat-2{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:0 16px 14px;}
.stat-box{background:#fff;border-radius:16px;padding:15px;box-shadow:0 2px 10px rgba(20,60,40,.05);}
.stat-box .sb-ic{color:var(--wp-green);}
.stat-box .sb-ic svg{width:21px;height:21px;}
.stat-box .sb-num{font-family:var(--display);font-weight:800;font-size:30px;margin-top:8px;line-height:1;}
.stat-box .sb-cap{font-size:12.5px;color:var(--muted);margin-top:5px;}
.trend{background:#fff;border-radius:16px;margin:0 16px 14px;padding:16px 14px 10px;box-shadow:0 2px 10px rgba(20,60,40,.05);}
.trend .tt{font-family:var(--display);font-weight:800;font-size:17px;margin-bottom:6px;}
.bars{display:flex;align-items:flex-end;gap:6px;height:150px;padding-top:8px;}
.bars .bar{flex:1;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:6px;height:100%;}
.bars .bar .b{width:100%;max-width:26px;border-radius:6px 6px 3px 3px;background:#dfeee7;}
.bars .bar.peak .b{background:linear-gradient(180deg,#16a072,#0c7e57);}
.bars .bar .lab{font-size:10px;color:#8a978f;font-weight:600;}
.bars .bar.peak .lab{color:var(--wp-green-deep);font-weight:800;}
.bars .bar .val{font-size:10px;font-weight:800;color:var(--wp-green-deep);}

/* ---- ledger screen ---- */
.led-summary{background:#fff;border-radius:16px;margin:6px 16px 14px;padding:16px;box-shadow:0 2px 10px rgba(20,60,40,.05);}
.led-summary .ls-month{text-align:center;font-family:var(--display);font-weight:800;font-size:18px;margin-bottom:12px;}
.led-summary .ls-grid{display:grid;grid-template-columns:repeat(3,1fr);text-align:center;gap:6px;}
.led-summary .ls-grid .k{font-size:11.5px;color:var(--muted);}
.led-summary .ls-grid .v{font-weight:800;font-size:13.5px;margin-top:3px;letter-spacing:-.01em;}
.v.pos{color:var(--income);}.v.neg{color:var(--expense);}
.led-row{display:flex;align-items:center;gap:13px;padding:14px 16px;border-bottom:1px solid #eef2f0;}
.led-row .lr-ic{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;flex:none;}
.led-row .lr-ic.auto{background:#cdebd9;color:var(--wp-green-deep);}
.led-row .lr-ic.up{background:transparent;color:var(--expense);}
.led-row .lr-ic.down{background:transparent;color:var(--income);}
.led-row .lr-ic svg{width:20px;height:20px;}
.led-row .lr-main{display:flex;flex-direction:column;}
.led-row .lr-main .t{display:block;font-weight:700;font-size:16px;}
.led-row .lr-main .s{display:block;font-size:12.5px;color:var(--muted);margin-top:2px;}
.led-row .lr-amt{margin-left:auto;font-weight:800;font-size:15px;}

/* ============================ SECTIONS ============================ */
section{position:relative;}
.section{padding:88px 0;}
.section-head{max-width:680px;margin:0 auto 52px;text-align:center;}
.section-head .kicker{font-weight:800;font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--wp-green);margin-bottom:12px;}
.section-head h2{font-family:var(--display);font-weight:800;font-size:clamp(30px,4.2vw,46px);line-height:1.05;letter-spacing:-.01em;}
.section-head p{margin-top:14px;font-size:17px;color:var(--muted);}

/* feature trio */
.feat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;}
.feat-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:26px;box-shadow:0 4px 18px rgba(20,60,40,.04);}
.feat-card .fc-ic{width:50px;height:50px;border-radius:14px;background:var(--wp-mint);color:var(--wp-green-deep);display:grid;place-items:center;margin-bottom:16px;}
.feat-card .fc-ic svg{width:25px;height:25px;}
.feat-card h3{font-family:var(--display);font-weight:800;font-size:20px;margin-bottom:8px;}
.feat-card p{font-size:14.5px;color:var(--muted);}

/* split feature (image + copy) */
.split{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;}
.split.rev .split-media{order:2;}
.split-media{display:flex;justify-content:center;}
.split-copy h2{font-family:var(--display);font-weight:800;font-size:clamp(28px,3.6vw,40px);line-height:1.08;margin-bottom:16px;}
.split-copy .lead{font-size:17px;color:var(--muted);margin-bottom:22px;}
.tick-list{display:flex;flex-direction:column;gap:14px;}
.tick{display:flex;gap:12px;align-items:flex-start;}
.tick .tk-ic{width:26px;height:26px;border-radius:8px;background:var(--wp-mint);color:var(--wp-green-deep);display:grid;place-items:center;flex:none;margin-top:1px;}
.tick .tk-ic svg{width:15px;height:15px;}
.tick .tk-t{font-weight:700;font-size:15.5px;}
.tick .tk-s{font-size:13.5px;color:var(--muted);}
@media(max-width:900px){.split{grid-template-columns:1fr;gap:34px;}.split.rev .split-media{order:0;}}

/* pay methods */
.pay-methods{background:linear-gradient(170deg,#0e9a68,#0a6f4d);color:#fff;}
.pay-methods .section-head .kicker{color:var(--gold-2);}
.pay-methods .section-head h2{color:#fff;}
.pay-methods .section-head p{color:rgba(255,255,255,.85);}
.method-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;}
.method{background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.18);border-radius:18px;padding:24px 20px;text-align:center;}
.method .m-ic{width:54px;height:54px;border-radius:16px;background:rgba(255,255,255,.16);display:grid;place-items:center;margin:0 auto 14px;}
.method .m-ic svg{width:28px;height:28px;}
.method.feat-trucker{background:var(--gold);color:#3a2c00;border-color:var(--gold-2);}
.method.feat-trucker .m-ic{background:rgba(58,44,0,.14);}
.method h3{font-family:var(--display);font-weight:800;font-size:19px;margin-bottom:6px;}
.method p{font-size:13.5px;opacity:.9;}
.method .m-tag{display:inline-block;margin-top:10px;font-size:11px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;background:rgba(58,44,0,.15);padding:3px 9px;border-radius:999px;}
@media(max-width:760px){.method-grid{grid-template-columns:1fr 1fr;}.feat-grid{grid-template-columns:1fr;}}

/* trucker band */
.trucker{background:var(--wp-hill);color:#fff;overflow:hidden;}
.trucker .split-copy h2{color:#fff;}
.trucker .split-copy .lead{color:rgba(255,255,255,.8);}
.trucker .tick .tk-ic{background:rgba(242,181,0,.2);color:var(--gold-2);}
.trucker .tick .tk-s{color:rgba(255,255,255,.66);}
.route-card{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:24px;padding:30px;width:100%;max-width:420px;}
.route-card .rc-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:22px;}
.route-card .rc-top .mi{font-family:var(--display);font-weight:800;font-size:34px;color:var(--gold-2);}
.route-card .rc-top .mi small{font-size:15px;color:rgba(255,255,255,.7);font-weight:600;}
.route{display:flex;flex-direction:column;gap:0;}
.route .stop{display:flex;gap:14px;align-items:flex-start;}
.route .stop .marker{display:flex;flex-direction:column;align-items:center;}
.route .stop .dot{width:14px;height:14px;border-radius:50%;background:var(--gold-2);border:3px solid var(--wp-hill);}
.route .stop .line{width:2px;flex:1;min-height:30px;background:rgba(255,255,255,.22);}
.route .stop:last-child .line{display:none;}
.route .stop .st-body{padding-bottom:20px;}
.route .stop .st-name{font-weight:700;font-size:15px;}
.route .stop .st-meta{font-size:12.5px;color:rgba(255,255,255,.6);margin-top:2px;}
.route .stop .st-pay{margin-left:auto;font-weight:800;color:var(--gold-2);font-size:14px;}
.route .stop .st-row{display:flex;width:100%;}

/* employer */
.employer .badge-row{display:flex;gap:10px;flex-wrap:wrap;margin-top:6px;}
.emp-pill{display:inline-flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--line);border-radius:999px;padding:10px 16px;font-weight:700;font-size:13.5px;box-shadow:0 2px 8px rgba(20,60,40,.05);}
.emp-pill svg{width:16px;height:16px;color:var(--wp-green-deep);}
.emp-board{background:#fff;border:1px solid var(--line);border-radius:24px;padding:8px;width:100%;max-width:440px;box-shadow:0 14px 40px rgba(20,60,40,.10);overflow:hidden;}
.emp-board .eb-head{display:flex;align-items:center;gap:10px;padding:16px 18px 12px;font-family:var(--display);font-weight:800;font-size:17px;}
.emp-board .eb-head .live{margin-left:auto;font-size:11px;font-weight:800;color:var(--wp-green);display:inline-flex;align-items:center;gap:6px;}
.emp-board .eb-head .live .pulse{width:8px;height:8px;border-radius:50%;background:var(--wp-green);box-shadow:0 0 0 0 rgba(14,154,104,.5);animation:pulse 1.8s infinite;}
@keyframes pulse{70%{box-shadow:0 0 0 8px rgba(14,154,104,0);}100%{box-shadow:0 0 0 0 rgba(14,154,104,0);}}
.worker-row{display:flex;align-items:center;gap:12px;padding:13px 16px;border-top:1px solid #f0f3f1;}
.worker-row .av{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;font-weight:800;color:#fff;font-size:14px;flex:none;}
.worker-row .wr-main{display:flex;flex-direction:column;min-width:0;}
.worker-row .wr-main .n{display:block;font-weight:700;font-size:15px;}
.worker-row .wr-main .r{display:block;font-size:12px;color:var(--muted);margin-top:1px;}
.worker-row .status{margin-left:auto;font-size:11px;font-weight:800;padding:5px 10px;border-radius:999px;}
.status.in{background:#dff0e8;color:var(--wp-green-deep);}
.status.out{background:#f0f3f1;color:#7a877f;}
.worker-row .wr-pay{font-weight:800;font-size:14px;color:var(--wp-green-deep);min-width:64px;text-align:right;}

/* trust strip */
.trust{background:var(--wp-mint);}
.trust-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;}
.trust-item{text-align:center;}
.trust-item .ti-num{font-family:var(--display);font-weight:800;font-size:40px;color:var(--wp-green-deep);line-height:1;}
.trust-item .ti-cap{font-size:14px;color:var(--muted);margin-top:8px;}
.trust-item .stars{color:var(--gold);display:inline-flex;gap:2px;}
.trust-item .stars svg{width:20px;height:20px;}
@media(max-width:760px){.trust-grid{grid-template-columns:1fr 1fr;gap:30px 20px;}}

/* FAQ */
.faq{max-width:780px;margin:0 auto;}
.faq details{background:#fff;border:1px solid var(--line);border-radius:16px;margin-bottom:12px;overflow:hidden;}
.faq summary{list-style:none;cursor:pointer;padding:20px 22px;font-weight:700;font-size:17px;display:flex;align-items:center;gap:14px;}
.faq summary::-webkit-details-marker{display:none;}
.faq summary .q-ic{margin-left:auto;width:24px;height:24px;flex:none;color:var(--wp-green);transition:transform .2s ease;}
.faq details[open] summary .q-ic{transform:rotate(45deg);}
.faq .a{padding:0 22px 20px;color:var(--muted);font-size:15px;line-height:1.65;}

/* final CTA */
.final-cta{background:linear-gradient(160deg,#13a473,#0a6f4d);color:#fff;text-align:center;overflow:hidden;position:relative;}
.final-cta .fc-scene{position:absolute;inset:0;opacity:.5;pointer-events:none;}
.final-cta .fc-scene img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.final-cta .wrap{position:relative;z-index:2;}
.final-cta h2{font-family:var(--display);font-weight:800;font-size:clamp(32px,5vw,56px);line-height:1.02;margin-bottom:16px;}
.final-cta p{font-size:18px;color:rgba(255,255,255,.9);max-width:520px;margin:0 auto 30px;}
.final-cta .btns{justify-content:center;}

/* footer */
.site-footer{background:#0a1512;color:#cdd8d2;font-size:14px;}
.site-footer .wrap{padding:54px 24px 30px;}
.foot-top{display:flex;justify-content:space-between;gap:30px;flex-wrap:wrap;margin-bottom:30px;}
.foot-brand{display:flex;align-items:center;gap:10px;font-family:var(--display);font-weight:800;font-size:20px;color:#fff;}
.foot-brand .logo{width:34px;height:34px;border-radius:10px;background:var(--wp-green);display:grid;place-items:center;}
.foot-brand .logo svg{width:20px;height:20px;color:#fff;}
.foot-links{display:flex;gap:26px;flex-wrap:wrap;}
.foot-links a{color:#aab8b1;font-weight:600;}
.foot-links a:hover{color:#fff;}
.disclaimer{border-top:1px solid rgba(255,255,255,.1);padding-top:22px;color:#8a978f;font-size:12.5px;line-height:1.6;max-width:760px;}
.foot-copy{margin-top:18px;font-size:12.5px;color:#67746d;}

/* reveal-on-scroll */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .7s ease,transform .7s ease;}
.reveal.in{opacity:1;transform:none;}
@media(prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none;}.chev{animation:none;}}

/* =====================================================================
   PRODUCTION HARDENING  (additions beyond the prototype)
   ===================================================================== */

/* Skip link for keyboard / screen-reader users */
.skip-link{
  position:absolute;left:50%;top:-60px;transform:translateX(-50%);
  z-index:100;background:var(--wp-green-deep);color:#fff;
  font-weight:700;font-size:14px;padding:10px 18px;border-radius:0 0 10px 10px;
  transition:top .15s ease;
}
.skip-link:focus{top:0;outline:none;}

/* Visible focus ring for keyboard navigation only */
a:focus-visible,
button:focus-visible,
summary:focus-visible,
.store-badge:focus-visible{
  outline:3px solid var(--gold);
  outline-offset:3px;
  border-radius:6px;
}
.faq summary:focus-visible{outline-offset:-3px;}

/* Honour reduced-motion for the in-page smooth scroll too */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  .emp-board .eb-head .live .pulse{animation:none;}
}

/* ===== Themes section (added) ===== */
.theme-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:18px;margin-top:34px}
.theme-chip{background:#fff;border:1px solid #e6ece9;border-radius:18px;padding:18px 14px;text-align:center;box-shadow:0 6px 20px rgba(13,40,30,.05)}
.theme-chip .tc-sw{display:flex;gap:7px;justify-content:center;margin-bottom:12px}
.theme-chip .tc-sw span{width:34px;height:42px;border-radius:10px;border:1px solid rgba(0,0,0,.08)}
.theme-chip .tc-sw span:nth-child(1){background:var(--a)}
.theme-chip .tc-sw span:nth-child(2){background:var(--b)}
.theme-chip .tc-sw span:nth-child(3){background:var(--c)}
.theme-chip .tc-name{font-weight:700;font-size:15px;color:#16201c}
.ex-strip{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:30px}
.ex-pill{background:#eef5f1;color:#0b5a3e;border:1px solid #d8e8e0;border-radius:999px;padding:9px 16px;font-weight:600;font-size:14px}