/* OFM Board, layout A "Board": V3 app look x V4 soft surfaces. Red to white with orange between, light blue ground.
   Desktop: sidebar | main | rail. Phone: sticky search bar, content, rail under it, floating tab bar. */
:root{
  --ground:#EEF3FA; --ground-2:#E4ECF6; --card:#FFFFFF; --warm:#FFF4EE; --warm-2:#FFE6DA;
  --red:#E5392B; --red-2:#C92A1E; --orange:#FF7A45; --blue:#DCE7F5; --blue-ink:#3C5A86;
  --ink:#1B1D24; --ink-2:#555B6B; --line:#E3E9F2; --ok:#1F9D63; --wait:#B87A00; --wait-bg:#FFF3D6; --ok-bg:#E2F5EA;
  --raise:0 10px 24px -14px rgba(60,80,120,.35), 0 2px 6px -2px rgba(60,80,120,.12), inset 0 1px 0 #fff;
  --inset:inset 0 2px 5px rgba(60,80,120,.16), inset 0 -1px 0 #fff;
  --glass:rgba(255,255,255,.86);
  --r:22px; --display:'Unbounded',system-ui,sans-serif; --body:'Wix Madefor Text',system-ui,sans-serif;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --ground:#12161D; --ground-2:#0C1016; --card:#1A2029; --warm:#2A1C19; --warm-2:#3A221D;
  --blue:#1F2C40; --blue-ink:#A9C2E8; --ink:#F1F3F7; --ink-2:#B3BAC8; --line:#262E3A;
  --ok:#4CC98A; --ok-bg:#163A28; --wait:#F0C063; --wait-bg:#3A2E12; --red-2:#FF8A7A;
  --raise:0 12px 26px -14px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,255,255,.05);
  --inset:inset 0 2px 6px rgba(0,0,0,.5), inset 0 -1px 0 rgba(255,255,255,.04);
  --glass:rgba(26,32,41,.86); color-scheme:dark}}
:root[data-theme="dark"]{
  --ground:#12161D; --ground-2:#0C1016; --card:#1A2029; --warm:#2A1C19; --warm-2:#3A221D;
  --blue:#1F2C40; --blue-ink:#A9C2E8; --ink:#F1F3F7; --ink-2:#B3BAC8; --line:#262E3A;
  --ok:#4CC98A; --ok-bg:#163A28; --wait:#F0C063; --wait-bg:#3A2E12; --red-2:#FF8A7A;
  --raise:0 12px 26px -14px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,255,255,.05);
  --inset:inset 0 2px 6px rgba(0,0,0,.5), inset 0 -1px 0 rgba(255,255,255,.04);
  --glass:rgba(26,32,41,.86); color-scheme:dark}
*{box-sizing:border-box;margin:0;padding:0}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
body{background:var(--ground);color:var(--ink);font:400 15px/1.45 var(--body);-webkit-tap-highlight-color:transparent}
html.has-overlay body{overflow:hidden}
h1,h2,h3,.num,.pay b,.brand{font-family:var(--display);letter-spacing:-.01em}
h1{font-size:40px;line-height:1.06;font-weight:700;text-wrap:balance}
h2{font-size:20px;font-weight:600}
h3{font-size:16px;font-weight:600;line-height:1.25}
a{color:inherit;text-decoration:none}
button,select,input{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer}
:focus-visible{outline:3px solid var(--orange);outline-offset:2px;border-radius:12px}
.ic{width:18px;height:18px;flex:none;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* shell */
.app{display:grid;grid-template-columns:240px minmax(0,1fr);max-width:1480px;margin:0 auto;min-height:100dvh}
.sidebar{position:sticky;top:0;height:100dvh;overflow:auto;padding:22px 14px 22px 20px;display:flex;flex-direction:column;gap:6px}
.brand{display:flex;align-items:center;gap:10px;font-weight:700;font-size:18px;padding:0 6px 16px}
.brand .mark{width:36px;height:36px;flex:none;border-radius:11px;box-shadow:var(--raise)}
.navlink{display:flex;align-items:center;gap:10px;padding:11px 14px;border-radius:999px;font-weight:600;min-height:44px}
.navlink[aria-current]{background:var(--card);box-shadow:var(--raise);color:var(--red-2)}
.navlink b{margin-left:auto;font-size:12px;color:var(--ink-2)}
.sidebar h4{font-size:12px;letter-spacing:.08em;text-transform:uppercase;margin:18px 14px 6px;color:var(--ink-2)}
.cat{display:flex;justify-content:space-between;align-items:center;padding:8px 14px;font-weight:500;border-radius:999px;text-align:left;width:100%}
.cat:hover{background:var(--card)}
.cat b{font-size:12px;background:var(--card);border-radius:99px;padding:1px 8px;box-shadow:var(--raise)}
.sidebar .foot{margin-top:auto;display:flex;gap:8px;flex-wrap:wrap;padding:14px 6px 0}
.pillnote{background:var(--card);box-shadow:var(--raise);border-radius:999px;padding:6px 12px;font-size:12px;font-weight:600}

.main{min-width:0;padding:18px 24px 48px}
.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;display:flex;align-items:center;gap:14px;padding:10px 0;margin-bottom:12px;background:var(--ground)}
.top .brand{display:none}
.search{flex:1;display:flex;align-items:center;gap:10px;background:var(--ground-2);box-shadow:var(--inset);border-radius:999px;padding:5px 5px 5px 18px;color:var(--ink-2);min-width:0}
.search input{flex:1;min-width:0;border:0;background:transparent;outline:none;font-size:16px;height:40px;color:var(--ink)}
.search input::placeholder{color:var(--ink-2)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:999px;padding:11px 20px;font-weight:600;white-space:nowrap;min-height:44px}
.btn.red{background:linear-gradient(180deg,#F04A3A,var(--red-2));color:#fff;box-shadow:0 8px 18px -8px rgba(229,57,43,.7),inset 0 1px 0 rgba(255,255,255,.35)}
.btn.red.is-done{background:var(--ok);box-shadow:none}
.btn.soft{background:var(--card);box-shadow:var(--raise)}
.btn.soft[aria-pressed="true"]{box-shadow:var(--inset);background:var(--ground-2);color:var(--red-2)}
.btn.blue{background:var(--blue);color:var(--blue-ink)}
.circle{width:44px;height:44px;border-radius:50%;background:var(--card);box-shadow:var(--raise);display:grid;place-items:center;flex:none;font-weight:700;font-size:13px}
.avatar{background:linear-gradient(135deg,var(--warm-2),var(--card));color:var(--red-2)}
.cols{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:24px;align-items:start}
.rail{position:sticky;top:84px;display:grid;gap:16px}
html[data-view="profile"] .rail,html[data-view="post"] .rail,html[data-view="agencies"] .rail{display:none}
html[data-view="profile"] .cols,html[data-view="post"] .cols,html[data-view="agencies"] .cols{grid-template-columns:minmax(0,1fr)}
html[data-view="agency"] .rail-top{display:none}
.stack{display:grid;gap:16px;min-width:0}
.panel{background:var(--card);border-radius:var(--r);box-shadow:var(--raise);padding:18px;min-width:0}
.head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:10px 0 0}
.head a,.link{color:var(--red-2);font-weight:600;display:inline-flex;gap:6px;align-items:center}

/* banner */
.banner{position:relative;overflow:hidden;border-radius:28px;padding:30px;background:linear-gradient(120deg,#E5392B 0%,#FF6A3D 55%,#FFB08A 100%);color:#fff;box-shadow:0 18px 40px -22px rgba(229,57,43,.8);display:flex;justify-content:space-between;gap:24px;align-items:center}
.banner::after{content:"";position:absolute;right:-80px;top:-80px;width:340px;height:340px;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.35),rgba(255,255,255,0) 70%);pointer-events:none}
.banner > *{position:relative;z-index:1}
.banner p{max-width:46ch;margin-top:10px;font-size:16px}
.banner .pill{display:inline-flex;gap:8px;align-items:center;background:rgba(255,255,255,.22);border-radius:999px;padding:6px 12px;font-weight:600;font-size:13px;margin-bottom:14px}
.quick{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}
.quick button{background:#fff;color:#1B1D24;border-radius:999px;padding:9px 14px;font-weight:600;display:inline-flex;gap:8px;align-items:center;box-shadow:0 6px 14px -8px rgba(0,0,0,.3);min-height:42px}
.quick b{background:var(--red);color:#fff;border-radius:999px;font-size:12px;padding:1px 7px}
.clock{background:#fff;color:#1B1D24;border-radius:20px;padding:14px 16px;box-shadow:var(--raise);min-width:250px}
.clock .row{display:flex;gap:18px}
.clock small{display:block;font-weight:600;font-size:12px;color:#555B6B}
.clock .num{font-size:26px;font-weight:600}
.clock .note{display:flex;gap:6px;align-items:center;margin-top:8px;font-size:12.5px;font-weight:600;color:#555B6B}

/* chips */
.chips{display:flex;gap:8px;flex-wrap:wrap}
.chip{display:inline-flex;align-items:center;gap:8px;padding:9px 14px;border-radius:999px;background:var(--card);box-shadow:var(--raise);font-weight:600;font-size:14px;white-space:nowrap;min-height:40px}
.chip b{font-size:12px;color:var(--ink-2);font-weight:600}
.chip[aria-pressed="true"]{background:var(--ground-2);box-shadow:var(--inset);color:var(--red-2)}
.chip[aria-pressed="true"] b{color:var(--red-2)}
.filters{display:grid;gap:12px}
.filters .row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.sel{appearance:none;background:var(--card) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23999' stroke-width='1.8' fill='none'/%3E%3C/svg%3E") no-repeat right 14px center;box-shadow:var(--raise);border:0;border-radius:999px;padding:0 36px 0 16px;height:42px;font-size:16px;font-weight:600}
.toggle{display:inline-flex;align-items:center;gap:10px;font-weight:600;cursor:pointer;min-height:42px}
.toggle input{appearance:none;width:44px;height:26px;border-radius:99px;background:var(--ground-2);box-shadow:var(--inset);position:relative;cursor:pointer}
.toggle input::after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:var(--card);box-shadow:var(--raise);transition:transform .2s}
.toggle input:checked{background:var(--red)}
.toggle input:checked::after{transform:translateX(18px)}
.count{font-weight:700}

/* job card */
.list{display:grid;gap:12px}
.job{display:grid;grid-template-columns:52px minmax(0,1fr) auto;gap:14px;align-items:start;background:var(--card);border-radius:var(--r);box-shadow:var(--raise);padding:16px;cursor:pointer;transition:transform .15s}
.job:hover{transform:translateY(-1px)}
.logo{width:52px;height:52px;border-radius:16px;display:grid;place-items:center;font:700 18px var(--display);color:#fff;background:linear-gradient(135deg,var(--orange),var(--red));flex:none}
.logo.b{background:linear-gradient(135deg,#7FA3D6,#3C5A86)}
.logo.c{background:linear-gradient(135deg,#FFC2A6,#FF7A45)}
.logo.d{background:#1B1D24}
.meta{display:flex;flex-wrap:wrap;gap:4px 14px;color:var(--ink-2);font-size:13.5px;margin-top:5px}
.meta span,.meta a{display:inline-flex;gap:5px;align-items:center}
.meta .ag{color:var(--ink);font-weight:600}
.meta .ag:hover{color:var(--red-2)}
.ok{color:var(--ok);display:inline-flex}
.tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.tag{background:var(--blue);color:var(--blue-ink);border-radius:999px;padding:4px 10px;font-size:12.5px;font-weight:600;white-space:nowrap}
.tag.night{background:#1B1D24;color:#fff}
.side{display:flex;flex-direction:column;align-items:flex-end;gap:8px}
.badges{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.pay{background:var(--warm);color:var(--red-2);border-radius:999px;padding:7px 12px;white-space:nowrap;font-size:13px}
.pay b{font-size:15px;font-weight:600}
.badge{border-radius:999px;padding:4px 10px;font-size:12px;font-weight:700;display:inline-flex;gap:5px;align-items:center;white-space:nowrap}
.badge .ic{width:14px;height:14px}
.badge.hot{background:var(--red);color:#fff}
.badge.prem{background:var(--blue);color:var(--blue-ink)}
.badge.new{background:var(--wait-bg);color:var(--wait)}
.save{width:40px;height:40px;border-radius:50%;background:var(--ground);box-shadow:var(--inset);display:grid;place-items:center;color:var(--ink-2)}
.save[aria-pressed="true"]{background:var(--red);color:#fff;box-shadow:none}
.save[aria-pressed="true"] .ic{fill:currentColor}
.shift{display:flex;align-items:center;gap:8px;margin-top:10px;font-size:12.5px;font-weight:600;color:var(--ink-2)}
.shiftbar{flex:1;max-width:220px}
.shiftbar-track{position:relative;height:8px;border-radius:99px;background:var(--ground-2);box-shadow:var(--inset)}
.shiftbar-seg{position:absolute;top:0;bottom:0;left:var(--a);width:var(--w);border-radius:99px;background:linear-gradient(90deg,var(--orange),var(--red))}
.shiftbar-seg.is-flex{background:repeating-linear-gradient(90deg,var(--orange) 0 8px,transparent 8px 14px);opacity:.7}
.shiftbar-now{position:absolute;top:-3px;bottom:-3px;left:var(--a);width:3px;margin-left:-1.5px;border-radius:2px;background:var(--ink)}
.shiftbar-ticks{display:flex;justify-content:space-between;font-size:11px;color:var(--ink-2);margin-top:6px;font-weight:600}
.empty{padding:30px;text-align:center;font-weight:600;background:var(--card);border-radius:var(--r);box-shadow:var(--raise)}

/* rail */
.agency{display:flex;align-items:center;gap:12px;padding:9px 0;cursor:pointer}
.agency + .agency{border-top:1px solid var(--line)}
.rank{width:26px;height:26px;border-radius:50%;background:var(--ground);box-shadow:var(--inset);display:grid;place-items:center;font-size:12px;font-weight:700;flex:none}
.rank.gold{background:var(--red);color:#fff;box-shadow:none}
.agency .logo{width:40px;height:40px;border-radius:13px;font-size:15px}
.agency .nm{flex:1;min-width:0;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.agency .nm small{display:block;color:var(--ink-2);font-weight:500}
.star{font-weight:700;font-size:13px;white-space:nowrap}
.tg{background:var(--blue);border-radius:var(--r);padding:18px;display:grid;gap:12px;color:var(--ink)}
.tg .handle{background:var(--card);border-radius:999px;padding:10px 14px;font-weight:600;display:flex;justify-content:space-between;align-items:center;user-select:all}

/* home extras */
.trust{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.trust .panel{display:flex;gap:12px;align-items:center;font-weight:600}
.trust .circle{background:var(--warm);color:var(--red-2);box-shadow:none}
.posts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.post{background:var(--card);border-radius:var(--r);box-shadow:var(--raise);display:grid;grid-template-rows:auto 1fr;overflow:hidden;cursor:pointer;transition:transform .18s}
.post:hover{transform:translateY(-2px)}
.post .pimg{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;background:var(--warm)}
.post .pin{padding:16px 18px 18px;display:grid;gap:8px;align-content:start}
.post .cat{padding:0;width:auto;font-size:12px;font-weight:700;color:var(--red-2);text-transform:uppercase;letter-spacing:.06em}
.post.feature{grid-column:1/-1;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);grid-template-rows:none;background:linear-gradient(120deg,var(--warm),var(--card) 70%)}
.post.feature .pimg{height:100%;aspect-ratio:auto;min-height:280px}
.post.feature .pin{padding:30px;align-content:center;gap:12px}
.post.feature h3{font-size:26px}
.post.feature p{font-size:16px;max-width:52ch}
.post .m{font-size:13px;font-weight:600;color:var(--ink-2)}

/* overlay (job) */
#job-overlay{position:fixed;inset:0;z-index:60;background:var(--ground);opacity:0;transform:translateY(16px);transition:opacity .2s,transform .2s}
#job-overlay.is-open{opacity:1;transform:none}
.ov-scroll{height:100%;overflow:auto;-webkit-overflow-scrolling:touch;padding:max(16px,env(safe-area-inset-top,0px)) max(16px,env(safe-area-inset-right,0px)) 120px max(16px,env(safe-area-inset-left,0px))}
.ov-in{max-width:760px;margin:0 auto;display:grid;gap:18px}
.ov-top{display:flex;justify-content:space-between;align-items:center;position:sticky;top:0;z-index:2;padding:6px 0}
.detail{background:var(--card);border-radius:28px;box-shadow:var(--raise);padding:26px;display:grid;gap:18px}
.dhead{display:flex;gap:16px;align-items:flex-start}
.dhead .logo{width:64px;height:64px;font-size:24px;border-radius:20px}
.dhead h1{font-size:28px}
.bigpay{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.bigpay .num{font-size:34px;color:var(--red-2);font-weight:600}
.facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.fact{background:var(--ground);box-shadow:var(--inset);border-radius:18px;padding:12px;min-width:0}
.fact small{display:block;color:var(--ink-2);font-size:12px;font-weight:600}
.fact b{font-size:15px}
.cols2{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.ul{display:grid;gap:8px;list-style:none;margin-top:10px}
.ul li{display:flex;gap:10px}
.ul li::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--red);margin-top:7px;flex:none}
.applybar{position:fixed;left:0;right:0;bottom:0;z-index:3;display:flex;justify-content:center;padding:12px max(16px,env(safe-area-inset-right,0px)) max(12px,env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px));background:var(--glass);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:0 -10px 30px -20px rgba(60,80,120,.5)}
.applybar .in{max-width:760px;width:100%;display:flex;gap:10px;align-items:center}
.applybar .btn.red{flex:1;max-width:320px}
.applybar .tgh{font-weight:600;user-select:all;display:inline-flex;gap:6px;align-items:center;color:var(--blue-ink)}

/* agency page */
.prof{background:var(--card);border-radius:28px;box-shadow:var(--raise);overflow:hidden}
.cover{height:170px;background:linear-gradient(120deg,#FFE3D6,#FFF4EE 40%,#DCE7F5);position:relative}
.cover::before{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(229,57,43,.2) 1.5px,transparent 1.6px);background-size:18px 18px}
.prof .in{padding:0 28px 26px;margin-top:-46px;position:relative;display:grid;gap:16px}
.ptop{display:flex;gap:18px;align-items:flex-end;flex-wrap:wrap}
.ptop .who{flex:1;min-width:220px}
.ptop h1{font-size:30px}
.bigLogo{width:96px;height:96px;border-radius:30px;border:5px solid var(--card);font-size:34px}
.stats{display:flex;gap:10px;flex-wrap:wrap}
.stat{background:var(--ground);box-shadow:var(--inset);border-radius:18px;padding:10px 14px}
.stat b{font:600 18px var(--display);display:block}
.stat small{color:var(--ink-2);font-weight:600;font-size:12px}
.reviews{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px}
.review{background:var(--warm);border-radius:20px;padding:14px;display:grid;gap:6px}
.stars{color:var(--red);letter-spacing:2px}
.agrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px}
.acard{background:var(--card);border-radius:var(--r);box-shadow:var(--raise);padding:18px;display:grid;gap:12px;cursor:pointer}
.acard .row{display:flex;gap:12px;align-items:center}

/* profile */
.me{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:16px;align-items:start}
.mehead{display:flex;gap:18px;align-items:center;flex-wrap:wrap}
.meav{width:84px;height:84px;border-radius:28px;display:grid;place-items:center;font:700 28px var(--display);color:#fff;background:linear-gradient(135deg,var(--orange),var(--red))}
.progress{height:10px;border-radius:99px;background:var(--ground-2);box-shadow:var(--inset);overflow:hidden}
.progress i{display:block;height:100%;background:linear-gradient(90deg,var(--orange),var(--red));border-radius:99px}
.kv{display:grid;gap:10px}
.kv div{display:flex;justify-content:space-between;gap:12px}
.kv span{color:var(--ink-2);font-weight:600}
.timeline{display:grid;gap:14px}
.timeline div{border-left:3px solid var(--warm-2);padding-left:14px}
.timeline small{color:var(--ink-2);font-weight:600}
.status{border-radius:999px;padding:4px 10px;font-size:12px;font-weight:700;white-space:nowrap}
.status.interview{background:var(--ok-bg);color:var(--ok)}
.status.seen{background:var(--wait-bg);color:var(--wait)}
.status.sent{background:var(--blue);color:var(--blue-ink)}
.apps{display:grid;gap:4px}
.apps a{display:flex;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid var(--line)}
.apps a:last-child{border:0}
.apps .t{flex:1;min-width:0;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* article */
.article{max-width:720px;margin:0 auto;background:var(--card);border-radius:28px;box-shadow:var(--raise);padding:34px;display:grid;gap:16px}
.article h1{font-size:32px}
.article p{font-size:17px;line-height:1.65}
/* blog article (posts.js, rendered by Core.md) */
.ahead{display:grid;gap:10px}
.acat{color:var(--red-2);font-weight:700;font-size:12px;text-transform:uppercase;letter-spacing:.06em}
.article .lead{font-size:19px;line-height:1.5;color:var(--ink-2)}
.ahead .meta{display:inline-flex;align-items:center;gap:6px;font-size:13.5px;font-weight:600;color:var(--ink-2)}
.ahead .meta .ic{width:15px;height:15px}
.acover{display:block;width:calc(100% + 68px);max-width:none;margin:4px -34px;height:auto;aspect-ratio:16/9;object-fit:cover;background:var(--warm)}
.toc{background:var(--ground);border-radius:18px;padding:16px 20px;display:grid;gap:8px}
.toc b{font-family:var(--display);font-size:13px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-2)}
.toc ol{list-style:none;counter-reset:t;display:grid;gap:2px}
.toc li{counter-increment:t}
.toc a{display:flex;gap:10px;padding:5px 0;font-weight:600}
.toc a::before{content:counter(t);flex:none;width:22px;height:22px;border-radius:99px;background:var(--card);color:var(--red-2);font-size:12px;display:grid;place-items:center;box-shadow:var(--raise)}
.toc a:hover{color:var(--red-2)}
.md{display:grid;gap:14px}
.md h2{font-size:23px;margin-top:18px;scroll-margin-top:90px}
.md h3{font-size:18px;margin-top:6px;scroll-margin-top:90px}
.md ul,.md ol{display:grid;gap:8px;padding-left:22px;font-size:17px;line-height:1.55}
.md li::marker{color:var(--red-2);font-weight:700}
.md b{font-weight:700}
.md a.inl{color:var(--red-2);font-weight:600;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1.5px}
.md ul.checks{list-style:none;padding:0}
.md ul.checks li{display:flex;gap:10px;align-items:flex-start}
.md ul.checks .ic{color:var(--ok);margin-top:3px}
.md figure{margin:8px 0;display:grid;gap:8px}
.md figure img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;border-radius:18px;background:var(--warm)}
.md figcaption{font-size:14px;line-height:1.45;color:var(--ink-2);padding:0 4px}
.callout{display:flex;gap:12px;align-items:flex-start;background:var(--warm);border-radius:18px;padding:16px 18px}
.callout .ic{color:var(--red);margin-top:3px}
.article .callout p{font-size:16px;line-height:1.55}
.md-table{overflow-x:auto;border-radius:16px;box-shadow:inset 0 0 0 1px var(--line)}
.md-table table{width:100%;border-collapse:collapse;font-size:15.5px}
.md-table th{text-align:left;font-weight:700;background:var(--ground);padding:10px 14px;white-space:nowrap}
.md-table td{padding:10px 14px;border-top:1px solid var(--line);vertical-align:top}
.more{max-width:720px;width:100%;margin:8px auto 0;display:grid;gap:12px}
.more .posts{grid-template-columns:repeat(3,minmax(0,1fr))}
.more .post .pin p{display:none}

/* tab bar: phone only */
.tabbar{display:none}

@media (max-width:1180px){
  .cols{grid-template-columns:minmax(0,1fr)}
  .rail{position:static;grid-template-columns:repeat(2,minmax(0,1fr))}
  .me{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:900px){
  .app{grid-template-columns:minmax(0,1fr)}
  .sidebar{display:none}
  .main{padding:0 max(16px,env(safe-area-inset-right,0px)) calc(100px + env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px))}
  .top{gap:10px;margin:0 calc(-1 * max(16px,env(safe-area-inset-left,0px))) 12px;padding:10px max(16px,env(safe-area-inset-right,0px)) 10px max(16px,env(safe-area-inset-left,0px));background:var(--glass);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
  .top .brand{display:flex;padding:0}
  .top .brand span{display:none}
  .search .btn{display:none}
  .search{padding-right:16px}
  .tabbar{display:flex;position:fixed;z-index:30;left:max(12px,env(safe-area-inset-left,0px));right:max(12px,env(safe-area-inset-right,0px));bottom:max(12px,env(safe-area-inset-bottom,0px));background:var(--glass);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-radius:999px;box-shadow:var(--raise);padding:6px;justify-content:space-around}
  .tabbar a{flex:1;display:grid;justify-items:center;gap:2px;font-size:11px;font-weight:600;color:var(--ink-2);padding:7px 4px;border-radius:999px;min-height:50px}
  .tabbar a[aria-current]{background:var(--warm);color:var(--red-2)}
  .tabbar .ic{width:20px;height:20px}
}
@media (max-width:640px){
  h1{font-size:27px}
  h2{font-size:18px}
  .banner{flex-direction:column;align-items:stretch;padding:22px;border-radius:24px}
  .banner p{font-size:15px}
  .clock{min-width:0;display:flex;justify-content:space-between;align-items:center;padding:10px 14px}
  .clock .num{font-size:20px}
  .clock .note{display:none}
  .quick{flex-wrap:nowrap;overflow-x:auto;margin:16px -22px 0;padding:0 22px 4px;scrollbar-width:none}
  .quick::-webkit-scrollbar,.chips.scroll::-webkit-scrollbar{display:none}
  .chips.scroll{flex-wrap:nowrap;overflow-x:auto;margin:0 -16px;padding:4px 16px 10px;scrollbar-width:none}
  .filters .row.sel-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .filters .row.sel-row .sel{width:100%}
  .job{grid-template-columns:44px minmax(0,1fr);gap:12px;padding:14px;border-radius:20px}
  .job .logo{width:44px;height:44px;border-radius:14px;font-size:16px}
  .job h3{font-size:15px}
  .job .meta .lng{display:none}
  .job .side{grid-column:1/-1;flex-direction:row;align-items:center;flex-wrap:wrap}
  .job .side .pay{order:-1}
  .job .side .save{margin-left:auto}
  .job .tags .tag:nth-child(n+4){display:none}
  .shiftbar{max-width:none}
  .rail{grid-template-columns:minmax(0,1fr)}
  .trust,.posts{grid-template-columns:minmax(0,1fr)}
  .trust{gap:8px}
  .trust .panel{padding:12px 14px}
  .post.feature{grid-template-columns:minmax(0,1fr)}
  .post.feature .pimg{min-height:0;aspect-ratio:16/9}
  .post.feature .pin{padding:18px 20px 22px}
  .post.feature h3{font-size:21px}
  .more .posts{grid-template-columns:minmax(0,1fr)}
  .detail{padding:18px;border-radius:24px;gap:16px}
  .dhead .logo{width:52px;height:52px;font-size:20px}
  .dhead h1{font-size:22px}
  .bigpay .num{font-size:28px}
  .facts{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .cols2{grid-template-columns:minmax(0,1fr)}
  .applybar .tgh{display:none}
  .applybar .btn.red{max-width:none}
  .prof .in{padding:0 18px 20px}
  .cover{height:120px}
  .bigLogo{width:80px;height:80px;font-size:28px}
  .ptop h1{font-size:24px}
  .ptop .btn{flex:1}
  .article{padding:22px;border-radius:24px}
  .article h1{font-size:25px}
  .article p{font-size:16px}
  .acover{width:calc(100% + 44px);margin:2px -22px}
  .article .lead{font-size:17px}
  .md h2{font-size:20px}
  .md ul,.md ol{font-size:16px}
  .md-table table{font-size:14px}
  .md-table th,.md-table td{padding:8px 10px}
  .md-table.wide{box-shadow:none;border-radius:0;overflow:visible}
  .md-table.wide thead{display:none}
  .md-table.wide table,.md-table.wide tbody,.md-table.wide tr,.md-table.wide td{display:block}
  .md-table.wide tbody{display:grid;gap:8px}
  .md-table.wide tr{background:var(--ground);border-radius:14px;padding:10px 14px}
  .md-table.wide td{border:0;padding:2px 0;display:flex;gap:10px;justify-content:space-between;text-align:right}
  .md-table.wide td::before{content:attr(data-l);font-weight:600;color:var(--ink-2);text-align:left;flex:none}
  .md-table.wide td:first-child{font-weight:700;font-size:15px;text-align:left;padding-bottom:4px}
  .md-table.wide td:first-child::before{display:none}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}
.quick button{white-space:nowrap;flex:none}
.badges{align-items:center}
.job .side{align-items:flex-end}
@media (max-width:640px){.job .side{align-items:center}}
.stack,.apps,.list{grid-template-columns:minmax(0,1fr)}
.apps .status{flex:none}
.sidebar .brand{white-space:nowrap;font-size:16px}
@media (max-width:640px){
  .ptop{flex-direction:column;align-items:flex-start;gap:12px}
  .ptop .who{min-width:0;width:100%}
  .ptop .btn{width:100%}
}

/* creator focus (03.11.2026): creator offers are the product, team jobs sit on the side */
.terms{display:flex;flex-wrap:wrap;gap:6px 14px;margin-top:10px;font-size:13px;font-weight:600;color:var(--ink-2)}
.terms span{display:inline-flex;gap:5px;align-items:center}
.terms .ic{width:15px;height:15px}
.terms .hl{color:var(--red-2)}
.tag.priv{background:var(--warm-2);color:var(--red-2)}
.tag.hl{background:var(--warm);color:var(--red-2)}
.chip.minor{box-shadow:none;background:transparent;border:1px solid var(--line);font-weight:500}
.chip.minor[aria-pressed="true"]{background:var(--ground-2);box-shadow:var(--inset)}
.chip.tgl{cursor:pointer;user-select:none}
.chip.tgl input{position:absolute;opacity:0;width:1px;height:1px}
.chip.tgl:has(input:checked){background:var(--ground-2);box-shadow:var(--inset);color:var(--red-2)}
.chip.tgl:has(input:focus-visible){outline:3px solid var(--orange);outline-offset:2px}
html.mode-team .creator-only{display:none}
html:not(.mode-team) .team-only{display:none}
.sidebar h4.small{margin-top:22px;font-size:11px}
.small-cats .cat{padding:6px 14px;font-size:13.5px;color:var(--ink-2)}
.small-cats .cat b{box-shadow:none;background:transparent}
.cat.strong{font-weight:700;color:var(--red-2)}
.mini-list{display:grid;gap:2px}
.mini-list .job{grid-template-columns:36px minmax(0,1fr) auto;gap:10px;padding:10px 0;box-shadow:none;border-radius:0;background:transparent;align-items:center}
.mini-list .job + .job{border-top:1px solid var(--line)}
.mini-list .job:hover{transform:none}
.mini-list .job .logo{width:36px;height:36px;border-radius:12px;font-size:13px}
.mini-list .job h3{font-size:13.5px;font-family:var(--body);font-weight:700}
.mini-list .job .meta{font-size:12px;margin-top:2px}
.mini-list .job .meta > :not(.ag){display:none}
.mini-list .job .tags,.mini-list .job .shift,.mini-list .job .badges,.mini-list .job .save{display:none}
.mini-list .job .side{grid-column:auto;flex-direction:row}
.mini-list .job .pay{padding:4px 8px;font-size:11.5px}
.mini-list .job .pay b{font-size:12.5px}
.head .count{font-weight:700;color:var(--ink-2)}
.head a b{font-size:12px;color:var(--ink-2)}
.offerbox{background:var(--warm);border-radius:22px;padding:16px;display:grid;gap:12px}
.offerbox .fact{background:var(--card);box-shadow:none}
.acard .share{font-weight:600;color:var(--ink-2)}
.acard .share b{font:600 22px var(--display);color:var(--red-2);margin-right:4px}
.job.creator .pay b{font-size:17px}
@media (max-width:640px){
  .mini-list .job .side{grid-column:auto}
  .mini-list .job .side .save{display:none}
  .terms{font-size:12.5px}
  .offerbox{padding:12px}
}

/* creator filter tags (03.11.2026): desktop = grouped panel, phone = 5 chips + Filters sheet */
.tagpanel{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:14px 22px}
.tg-group h4{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2);margin:0 0 8px}
.tg-group .chips{gap:6px}
.tg-group .chip{font-size:13px;padding:7px 12px;min-height:36px}
.chip[data-tag][aria-pressed="true"]{background:var(--red);color:#fff;box-shadow:none}
.chip[data-tag][aria-pressed="true"] b{color:#fff}
.tagrow{display:none}
.chip.filt{background:var(--ink);color:var(--card);box-shadow:none}
.chip.filt .nsel{background:var(--red);color:#fff;border-radius:99px;padding:0 7px;min-width:20px;text-align:center}
#filter-sheet{position:fixed;inset:0;z-index:70;background:var(--ground);display:flex;flex-direction:column}
#filter-sheet[hidden]{display:none!important}
.sheet-scroll{flex:1;overflow:auto;-webkit-overflow-scrolling:touch;padding:max(16px,env(safe-area-inset-top,0px)) max(16px,env(safe-area-inset-right,0px)) 24px max(16px,env(safe-area-inset-left,0px))}
.sheet-in{max-width:640px;margin:0 auto;display:grid;gap:22px}
.sheet-head{display:flex;justify-content:space-between;align-items:center}
#tag-sheet{display:grid;gap:22px}
#tag-sheet .chip{font-size:15px;min-height:42px}
.sheet-bar{display:flex;gap:10px;padding:12px max(16px,env(safe-area-inset-right,0px)) max(12px,env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px));background:var(--glass);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:0 -10px 30px -20px rgba(60,80,120,.5)}
.sheet-bar .btn.red{flex:1}
@media (max-width:900px){
  .tagpanel{display:none}
  .tagrow{display:flex}
  html.mode-team .tagrow{display:none}
}

/* agency marks: own tile colour per agency, white mark (03.11.2026) */
.logo svg{width:66%;height:66%;display:block}
.logo.ag-allure{background:linear-gradient(135deg,#FF7A45,#E5392B)}
.logo.ag-velvet{background:linear-gradient(135deg,#B4466B,#6E1F3C)}
.logo.ag-nord{background:linear-gradient(135deg,#4A6290,#1E2A44)}
.logo.ag-lumen{background:linear-gradient(135deg,#FFC24D,#E08A12)}
.logo.ag-mira{background:linear-gradient(135deg,#3FB6AE,#16706F)}
.logo.ag-kasta{background:linear-gradient(135deg,#5BBF86,#237A4C)}
/* earnings pill: label above the figure */
.pay small{display:block;font-size:11px;font-weight:600;color:var(--ink-2);line-height:1.1;margin-bottom:1px}
.job.creator .pay{border-radius:16px;padding:7px 12px;line-height:1.2}
.bigpay .lbl{flex-basis:100%;font-weight:600;color:var(--ink-2);font-size:13px}
.mini-list .job{grid-template-columns:36px minmax(0,1fr)}
.mini-list .job .side{grid-column:2;flex-direction:row;align-items:center;justify-content:flex-start;flex-wrap:wrap}

/* Footer + legal pages (03.11.2026) */
html[data-view="imprint"] .rail,html[data-view="privacy"] .rail,html[data-view="terms"] .rail,html[data-view="safety"] .rail{display:none}
html[data-view="imprint"] .cols,html[data-view="privacy"] .cols,html[data-view="terms"] .cols,html[data-view="safety"] .cols{grid-template-columns:minmax(0,1fr)}
.sitefoot{margin-top:40px;padding:22px 24px;background:var(--card);border-radius:var(--r);box-shadow:var(--raise);display:flex;align-items:center;gap:14px 24px;flex-wrap:wrap}
.sf-brand{display:flex;align-items:center;gap:10px;font-family:var(--display);font-weight:600}
.sf-brand .mark{width:28px;height:28px}
.sf-links{display:flex;gap:6px 18px;flex-wrap:wrap;font-weight:600}
.sf-links a{padding:4px 0;border-bottom:2px solid transparent}
.sf-links a:hover,.sf-links a[aria-current]{color:var(--red-2);border-bottom-color:currentColor}
.sf-note{margin-left:auto;display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:13px}
.sf-copy{padding-left:4px}
.legal h2{font-size:19px;margin-top:8px}
.legal p,.legal li{font-size:16px;line-height:1.6}
.legal ul{padding-left:20px;display:grid;gap:6px}
.legal a{color:var(--red-2);text-decoration:underline;text-underline-offset:3px}
.legal mark.todo{background:var(--wait-bg);color:var(--wait);border-radius:6px;padding:0 4px;font-weight:600}
@media (max-width:640px){
  .sitefoot{margin-top:28px;padding:18px;border-radius:20px;flex-direction:column;align-items:flex-start}
  .sf-note{margin-left:0}
  .legal p,.legal li{font-size:15px}
}
.logo.is-img{background:#000;overflow:hidden;padding:0}
.logo.is-img img{width:100%;height:100%;object-fit:cover;display:block}
/* Soft fade under the sticky search bar, so cards scroll away instead of being cut at a hard edge. */
.top::after{content:"";position:absolute;left:0;right:0;top:100%;height:22px;pointer-events:none;background:linear-gradient(var(--ground),rgba(238,243,250,0))}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .top::after{background:linear-gradient(var(--ground),rgba(18,22,29,0))}}
@media (max-width:900px){.top::after{background:linear-gradient(var(--glass),rgba(255,255,255,0))}}
@media (max-width:900px) and (prefers-color-scheme:dark){:root:not([data-theme="light"]) .top::after{background:linear-gradient(var(--glass),rgba(26,32,41,0))}}
/* Footer: plain small grey line at the very bottom, no box (Lasse 03.11.2026). */
.sitefoot{margin-top:56px;padding:18px 0 8px;background:none;border-radius:0;box-shadow:none;display:flex;flex-wrap:wrap;gap:6px 18px;font-size:13px;color:var(--ink-2)}
.sitefoot a{border:0;padding:0;font-weight:500}
.sitefoot a:hover,.sitefoot a[aria-current]{color:var(--red-2)}
/* Cleaner tag panel (Lasse 03.11.): one group per row, label left, flat chips right, hairlines between rows. */
.tagpanel{display:grid;grid-template-columns:minmax(0,1fr);gap:0}
.tg-group{display:grid;grid-template-columns:170px minmax(0,1fr);gap:14px;align-items:center;padding:12px 0}
.tg-group + .tg-group{border-top:1px solid var(--line)}
.tg-group h4{margin:0;font-size:11.5px}
.tg-group .chip{background:var(--ground);box-shadow:none;font-weight:600}
.tg-group .chip b{font-weight:500}
.tg-group .chip:hover{background:var(--ground-2)}
@media (max-width:900px){.tg-group{grid-template-columns:minmax(0,1fr);gap:8px}}
/* newsletter popup */
.nl{position:fixed;inset:0;z-index:80;display:grid;place-items:center;padding:16px;background:rgba(27,29,36,.35);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);opacity:0;transition:opacity .2s}
.nl.is-open{opacity:1}
.nl-card{position:relative;width:min(420px,100%);background:var(--card);border-radius:28px;box-shadow:var(--raise);padding:28px;display:grid;gap:14px;transform:translateY(12px);transition:transform .2s}
.nl.is-open .nl-card{transform:none}
.nl-x{position:absolute;top:14px;right:14px;width:38px;height:38px}
.nl-ic{width:52px;height:52px;border-radius:18px;display:grid;place-items:center;background:linear-gradient(135deg,var(--orange),var(--red));color:#fff}
.nl-card h2{font-size:22px;padding-right:40px}
.nl-sw{display:flex;gap:8px}
.nl-sw .chip{flex:1;justify-content:center}
.nl-in{padding:5px 18px}
.nl-err{color:var(--red-2);font-weight:600;font-size:13px}
.nl-go{width:100%}
.nl-done{display:flex;gap:8px;align-items:center;color:var(--ok);justify-content:center;padding:8px 0}
.nl-card.is-done > :not(.nl-done):not(.nl-x){display:none}
.nl-card.is-done .nl-done{display:flex!important}
@media (max-width:640px){.nl{align-items:end;padding:0}.nl-card{width:100%;border-radius:28px 28px 0 0;padding:24px 20px calc(24px + env(safe-area-inset-bottom,0px))}}
.testbar{flex-basis:100%;display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:6px}.testbar button{border:1px dashed var(--ink-2);border-radius:999px;padding:6px 12px;font-size:12px;font-weight:600;color:var(--ink-2);min-height:32px}.testbar button:hover{color:var(--red-2);border-color:var(--red-2)}
/* Discover (Lasse 03.11.): no role chips; filters live in the right rail instead of Top agencies / Team jobs. */
.rail-filters{display:none}
html[data-view="discover"] .rail-filters{display:grid}
html[data-view="discover"] .rail-top,html[data-view="discover"] .rail-team{display:none}
.rail-filters .tg-group{grid-template-columns:minmax(0,1fr);gap:8px;padding:12px 0}
.rail-filters .tg-group:first-child{padding-top:0}
@media (max-width:1180px){html[data-view="discover"] .rail-filters{display:none}}
/* Phone creator card (Lasse 03.11.): no logo, badges as small marks top right, earnings + save in one row. */
@media (max-width:640px){
  .job.creator{grid-template-columns:minmax(0,1fr);position:relative;padding:16px 16px 14px}
  .job.creator > .logo{display:none}
  .job.creator h3{padding-right:108px}
  .job.creator .side{grid-column:1;flex-direction:row;align-items:center;flex-wrap:nowrap;margin-top:2px}
  .job.creator .side .badges{position:absolute;top:14px;right:14px;gap:4px;flex-wrap:nowrap}
  .job.creator .badge{padding:5px 8px;font-size:11.5px}
  .job.creator .badge.prem{font-size:0;gap:0;padding:6px}
  .job.creator .badge.prem .ic{width:15px;height:15px}
  .job.creator .side .save{margin-left:auto}
}
/* Phone tab bar docked to the screen bottom, no gap (Lasse 03.11.). */
@media (max-width:900px){
  .tabbar{left:0;right:0;bottom:0;border-radius:22px 22px 0 0;padding:6px max(8px,env(safe-area-inset-right,0px)) calc(6px + env(safe-area-inset-bottom,0px)) max(8px,env(safe-area-inset-left,0px))}
  .main{padding-bottom:calc(84px + env(safe-area-inset-bottom,0px))}
}

/* Onboarding (03.11.2026): fullscreen steps on the phone, 480 px card on desktop. */
.ob{position:fixed;inset:0;z-index:85;display:grid;place-items:center;padding:24px;background:rgba(27,29,36,.35);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);opacity:0;transition:opacity .2s}
.ob.is-open{opacity:1}
.ob-card{width:min(480px,100%);max-height:min(820px,calc(100dvh - 48px));display:grid;grid-template-rows:auto minmax(0,1fr) auto;background:var(--ground);border-radius:30px;box-shadow:var(--raise);overflow:hidden;transform:translateY(12px);transition:transform .2s}
.ob.is-open .ob-card{transform:none}
.ob-top{display:grid;grid-template-columns:44px minmax(0,1fr) 44px;gap:14px;align-items:center;padding:16px 18px 6px}
.ob-bar{height:8px;border-radius:99px;background:var(--ground-2);box-shadow:var(--inset);overflow:hidden}
.ob-bar i{display:block;height:100%;width:0;border-radius:99px;background:linear-gradient(90deg,var(--orange),var(--red));transition:width .3s}
.ob-body{overflow:auto;padding:14px 22px 18px;display:grid;gap:14px;align-content:start}
.ob-body h1{font-size:30px}
.ob-body h2{font-size:24px;line-height:1.15;text-wrap:balance}
.ob-foot{display:flex;gap:10px;padding:12px 22px 20px;background:var(--glass);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.ob-foot .btn{flex:1;min-height:52px;font-size:16px}
.ob-foot .ob-skip{flex:0 0 auto}
.ob-foot .btn:disabled{opacity:.45;box-shadow:none;cursor:not-allowed}
.ob-hero{display:grid;gap:18px;padding:18px 0 6px}
.ob-logo{width:76px;height:76px;border-radius:24px;box-shadow:var(--raise)}
.ob-trust{list-style:none;display:grid;gap:10px}
.ob-trust li{display:flex;gap:12px;align-items:center;background:var(--card);box-shadow:var(--raise);border-radius:18px;padding:14px 16px;font-weight:600;font-size:16px}
.ob-trust .ic{color:var(--red-2);width:22px;height:22px}
.ob-tiles{display:grid;gap:12px}
.ob-tile{display:grid;grid-template-columns:48px minmax(0,1fr);grid-template-rows:auto auto;column-gap:14px;align-items:center;text-align:left;background:var(--card);box-shadow:var(--raise);border-radius:22px;padding:16px;min-height:76px;border:2px solid transparent}
.ob-tile b{font:600 17px var(--display)}
.ob-tile small{grid-column:2;font-size:14px;color:var(--ink-2);font-weight:500}
.ob-tic{grid-row:1/3;width:48px;height:48px;border-radius:16px;display:grid;place-items:center;background:var(--warm);color:var(--red-2)}
.ob-tile:not(:has(small)) .ob-tic{grid-row:1}
.ob-tile[aria-pressed="true"]{border-color:var(--red);background:var(--warm)}
.ob-tile[aria-pressed="true"] .ob-tic{background:var(--red);color:#fff}
.ob-l{font-weight:700;font-size:15px;margin-top:6px;display:flex;justify-content:space-between;align-items:baseline}
.ob-val{font:600 16px var(--display);color:var(--red-2)}
.ob-seg{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:8px}
.ob-seg .chip,.ob-chips .chip{justify-content:center;min-height:46px;font-size:15px}
.ob-chips{display:flex;flex-wrap:wrap;gap:8px}
.ob .chip[aria-pressed="true"]{background:var(--red);color:#fff;box-shadow:none}
.ob-in{padding:5px 18px}
.ob-range{width:100%;accent-color:var(--red);height:32px}
.ob-count{font-weight:700;color:var(--red-2);margin-top:-6px}
.ob-list{display:grid;gap:8px}
.ob-opt{display:flex;justify-content:space-between;align-items:center;gap:12px;text-align:left;background:var(--card);box-shadow:var(--raise);border-radius:18px;padding:14px 16px;min-height:54px;font-weight:600;font-size:16px;border:2px solid transparent}
.ob-opt i{width:26px;height:26px;border-radius:50%;background:var(--ground);box-shadow:var(--inset);display:grid;place-items:center;color:transparent}
.ob-opt[aria-pressed="true"]{border-color:var(--red);background:var(--warm)}
.ob-opt[aria-pressed="true"] i{background:var(--red);color:#fff;box-shadow:none}
.ob-opt:disabled{opacity:.45}
.ob-check{display:flex;gap:12px;align-items:center;font-weight:600;font-size:15px;min-height:44px;cursor:pointer}
.ob-check input{appearance:none;width:26px;height:26px;flex:none;border-radius:8px;background:var(--ground-2);box-shadow:var(--inset);display:grid;place-items:center;cursor:pointer}
.ob-check input:checked{background:var(--red)}
.ob-check input:checked::after{content:"";width:12px;height:7px;border:2.5px solid #fff;border-top:0;border-right:0;transform:rotate(-45deg) translateY(-2px)}
.ob-res{display:grid;gap:10px;justify-items:start}
.ob-badge{width:56px;height:56px;border-radius:50%;display:grid;place-items:center;background:var(--ok);color:#fff}
.ob-badge .ic{width:28px;height:28px}
.ob-matches .job{cursor:pointer}
@media (max-width:640px){
  .ob{padding:0;place-items:stretch}
  .ob-card{width:100%;max-height:none;height:100dvh;border-radius:0;padding-top:env(safe-area-inset-top,0px)}
  .ob-foot{padding-bottom:max(20px,env(safe-area-inset-bottom,0px))}
  .ob-body{padding:10px 18px 18px}
  .ob-foot{padding-left:18px;padding-right:18px}
}
.sel-row [data-reset]{display:none!important}   /* Lasse 03.11.: no reset button next to the selects */
img.meav{object-fit:cover;padding:0}
/* Onboarding v2 (03.11.): icon + sentence in every tile, searchable flag lists, platform rows, language levels, selfie. */
.ob-tile small{color:var(--ink);opacity:.78;font-weight:500;line-height:1.35}
.ob-tile:disabled{opacity:.45}
.ob-tiles.two{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px}
.ob-tiles.two .ob-tile{grid-template-columns:minmax(0,1fr);grid-template-rows:auto;row-gap:6px;padding:14px;align-content:start;min-height:0}
.ob-tiles.two .ob-tic{grid-row:auto;width:40px;height:40px;border-radius:14px}
.ob-tiles.two .ob-tile small{grid-column:1;font-size:13px}
.ob-tiles.two .ob-tile b{font-size:15px}
.ob-h3{font-size:18px;margin-top:6px}
.ob-trust li{align-items:flex-start}
.ob-trust li span{display:grid;gap:2px;font-weight:500;font-size:14px}
.ob-trust li b{font-size:16px}
.ob-note{font-size:15px;margin-top:-4px}
.ob-sel{display:flex;flex-wrap:wrap;gap:8px}
.ob-sel:empty{display:none}
.ob .chip.ob-pill{background:var(--red);color:#fff;box-shadow:none;min-height:40px;gap:6px}
.ob .chip.ob-pill .ic{width:14px;height:14px}
.ob-in .ic{color:var(--ink-2)}
.ob-clist{max-height:264px;overflow:auto;background:var(--card);border-radius:18px;box-shadow:var(--raise);padding:6px;display:grid;gap:2px;overscroll-behavior:contain}
.ob-clist.short{max-height:200px}
.ob-crow{display:grid;grid-template-columns:30px minmax(0,1fr) 26px;gap:10px;align-items:center;text-align:left;padding:10px 10px;border-radius:12px;min-height:46px;font-weight:600;font-size:16px}
.ob-crow:hover{background:var(--ground)}
.ob-crow i{width:24px;height:24px;border-radius:50%;background:var(--ground);box-shadow:var(--inset);display:grid;place-items:center;color:transparent}
.ob-crow i .ic{width:14px;height:14px}
.ob-crow[aria-pressed="true"]{background:var(--warm)}
.ob-crow[aria-pressed="true"] i{background:var(--red);color:#fff;box-shadow:none}
.ob-flag{font-size:22px;line-height:1;display:grid;place-items:center}
.ob-flag .ic{width:18px;height:18px;color:var(--red-2)}
.ob-empty{padding:12px;font-weight:600}
.ob-row2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px}
.ob-row2 .ob-l{margin-top:0}
.ob-in input[type="date"]{min-height:40px}
.ob-err{color:var(--red-2);font-weight:700;font-size:14px;margin-top:-6px}
.ob-selfie{display:grid;grid-template-columns:88px minmax(0,1fr);gap:14px;align-items:center;background:var(--card);box-shadow:var(--raise);border-radius:22px;padding:14px}
.ob-selfie img,.ob-selfie > .ob-tic{width:88px;height:88px;border-radius:20px;object-fit:cover}
.ob-selfie > .ob-tic{grid-row:auto;background:var(--warm)}
.ob-selfie > .ob-tic .ic{width:30px;height:30px}
.ob-selfie b{font:600 16px var(--display);display:block}
.ob-selfie small{display:block;font-size:13.5px;margin:2px 0 10px;opacity:.78}
.ob-sbtn{display:flex;gap:8px;flex-wrap:wrap}
.ob-sbtn .btn{min-height:40px;padding:8px 12px;font-size:14px}
.ob-plats{display:grid;gap:8px}
.ob-prow,.ob-lrow{display:grid;grid-template-columns:minmax(0,1fr) auto 40px;gap:10px;align-items:center;background:var(--card);box-shadow:var(--raise);border-radius:18px;padding:8px 8px 8px 14px}
.ob-prow{grid-template-columns:96px minmax(0,1fr) 40px}
.ob-prow .ob-in{padding:2px 14px}
.ob-rm{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;color:var(--ink-2);background:var(--ground);box-shadow:var(--inset)}
.ob-rm .ic{width:16px;height:16px}
.ob-langs{display:grid;gap:8px}
.ob-lv{display:flex;gap:4px}
.ob .ob-lv .chip{min-height:36px;padding:6px 10px;font-size:13px}
.ob-marks{display:flex;justify-content:space-between;font-size:12.5px;font-weight:600;margin-top:-8px;opacity:.75}
.ob .ob-chips .chip .ic{width:14px;height:14px}
@media (max-width:420px){
  .ob-lrow{grid-template-columns:minmax(0,1fr) 40px;row-gap:8px}
  .ob-lrow .ob-lv{grid-column:1/-1;grid-row:2}
  .ob-lrow .ob-rm{grid-column:2;grid-row:1}
}
/* Onboarding round 3: role tiles in step 1 (Creator big), body selector, accounts. */
:root{--fig-off:#D3DCE8}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--fig-off:#3A4558}}
:root[data-theme="dark"]{--fig-off:#3A4558}
.ob-roles .ob-tile.big{padding:20px 18px;min-height:96px}
.ob-roles .ob-tile.big .ob-tic{width:56px;height:56px;border-radius:18px}
.ob-roles .ob-tile.big b{font-size:20px}
.ob-roles .ob-tile.big small{font-size:15px}
.ob-body3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.ob-figbtn{position:relative;display:grid;justify-items:center;align-content:start;gap:8px;background:var(--card);box-shadow:var(--raise);border-radius:22px;padding:22px 8px 14px;border:2px solid transparent;min-height:44px}
.ob-figbtn b{font-size:13.5px;line-height:1.25;text-align:center;font-weight:700}
.ob-figbtn[aria-pressed="true"]{border-color:var(--red);background:var(--warm)}
.ob-fig{width:100%;max-width:74px;height:auto;aspect-ratio:100/240}
.ob-rec{position:absolute;top:-9px;left:50%;transform:translateX(-50%);background:var(--ok);color:#fff;font-size:11px;font-weight:700;border-radius:999px;padding:3px 8px;white-space:nowrap}
.ob-foot{background:var(--ground);backdrop-filter:none;-webkit-backdrop-filter:none}   /* Lasse 03.11.: no white strip behind the Continue button */
.ob-clist{flex-shrink:0;min-height:58px;display:block}.ob-clist > .ob-crow{width:100%;margin-bottom:2px}   /* Safari: the scroll list collapsed to its padding inside the flex step body */

/* Job detail (Lasse 03.11.2026): checklist "Your points" / "Other benefits", Markdown description, reviews, contact. */
.jd-sec{display:grid;gap:12px;padding-top:18px;border-top:1px solid var(--line)}
.jd-sec h2{font-size:19px}
.jd-check{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 22px;align-items:start}
.jd-group{display:grid;gap:10px;min-width:0}
.jd-group h3{font-size:15px}
.jd-gh{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.jd-score{font-size:12.5px;font-weight:700;background:var(--ok-bg);color:var(--ok);border-radius:999px;padding:3px 10px}
.jd-list{list-style:none;display:grid;gap:2px}
.jd-list li{display:flex;gap:10px;align-items:center;padding:7px 0;font-weight:600;font-size:14.5px}
.jd-list li + li{border-top:1px solid var(--line)}
.jd-mk{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;flex:none}
.jd-mk .ic{width:14px;height:14px;stroke-width:2.4}
.jd-list li.yes .jd-mk{background:var(--ok-bg);color:var(--ok)}
.jd-list li.no .jd-mk{background:var(--warm);color:var(--red-2)}
.jd-list li.no{color:var(--ink-2)}
.jd-cta .btn{justify-self:start}
.jd-md{font-size:15.5px}
.jd-md img{border-radius:20px;width:100%;height:auto}
.jd-md h2{font-size:17px;margin-top:6px}
.jd-avg{display:inline-flex;gap:6px;align-items:center;font-size:14px;font-weight:600}
.jd-contact{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.jd-crow{display:flex;align-items:center;gap:12px;background:var(--ground);box-shadow:var(--inset);border-radius:18px;padding:10px 12px;min-width:0}
.jd-cic{width:38px;height:38px;border-radius:12px;background:var(--card);display:grid;place-items:center;color:var(--red-2);flex:none}
.jd-cv{flex:1;min-width:0;display:grid}
.jd-cv small{font-size:12px;font-weight:600;color:var(--ink-2)}
.jd-cv b{font-size:14.5px;user-select:all;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.jd-copy{flex:none;border-radius:999px;padding:6px 12px;font-size:12.5px;font-weight:700;background:var(--card);box-shadow:var(--raise);min-height:34px}
@media (max-width:640px){
  .jd-check,.jd-contact{grid-template-columns:minmax(0,1fr)}
}
#job-overlay .ov-top{display:none}   /* Lasse 03.11.: no X, the browser back button closes the job (hash route) */
.jd-list li.na{color:var(--ink-2)}
.jd-list li.na small{margin-left:auto;font-size:12px;font-weight:600;color:var(--blue-ink)}
.jd-list li.na .jd-mk{background:var(--blue)}
.jd-dash{display:block;width:12px;height:3px;border-radius:2px;background:var(--blue-ink)}
.jd-open{display:flex;align-items:center;gap:inherit;flex:1;min-width:0;color:inherit}.jd-open:hover b{color:var(--red-2)}.jd-crow .jd-open{gap:12px}
/* Banner quick picks as round icon shortcuts (Lasse 03.11., variant B) */
.quick{display:grid;grid-template-columns:repeat(4,minmax(0,76px));gap:12px;flex-wrap:nowrap;overflow:visible;margin-top:18px}
.quick button.qs{all:unset;cursor:pointer;display:grid;justify-items:center;gap:7px;min-width:0;text-align:center}
.qs-ic{position:relative;width:58px;height:58px;border-radius:50%;background:#fff;color:#C92A1E;display:grid;place-items:center;box-shadow:0 8px 18px -8px rgba(0,0,0,.35)}
.qs-ic .ic{width:24px;height:24px}
.qs-ic b{position:absolute;top:-3px;right:-3px;min-width:22px;height:22px;border-radius:999px;background:#1B1D24;color:#fff;font-size:11.5px;font-weight:700;display:grid;place-items:center;padding:0 5px;border:2px solid #fff}
.qs-l{font-size:12.5px;font-weight:700;color:#fff;line-height:1.15;white-space:nowrap}
.quick button.qs:hover .qs-ic{transform:translateY(-1px)}
.quick button.qs:focus-visible .qs-ic{outline:3px solid #fff;outline-offset:3px}
@media (max-width:640px){
  .quick{margin:16px 0 0;padding:0;grid-template-columns:repeat(4,minmax(0,1fr))}
  .qs-ic{width:54px;height:54px}
  .banner h1 br{display:none}
}
.ob-fig{max-width:92px;aspect-ratio:120/200}.ob-figbtn{padding:18px 8px 14px}   /* compact figures (Lasse 03.11.) */
/* backend (03.11.2026): team dead end note, apply error, onboarding motivation line */
.jd-team-note{background:var(--warm);border-radius:16px;padding:12px 14px}
.jd-apply-err{color:var(--red-2);font-weight:600;font-size:13px}
.ob-motiv{background:var(--warm);border-radius:18px;padding:14px 16px;font-size:16px;line-height:1.4}
.ob-motiv b{color:var(--red-2)}
.ob-dead{display:grid;gap:12px}
.ob-dead .jd-crow{background:var(--card)}
[data-jobs] .job .terms{display:none}   /* Lasse 03.11.: no h/week · payouts · contract row on the cards (still in the job detail) */
.tgp-ic{background:linear-gradient(135deg,#37AEE2,#1E96C8)}.tgp-card .btn{width:100%;text-decoration:none}
/* For agencies page (Lasse 03.11.) */
.fa-points{display:flex;gap:8px;flex-wrap:wrap}
.fa-points span{display:inline-flex;gap:6px;align-items:center;background:var(--warm);color:var(--red-2);border-radius:999px;padding:6px 12px;font-weight:700;font-size:13.5px}
.fa-form{display:grid;gap:14px;margin-top:6px}
.fa-form label{display:grid;gap:6px;font-weight:700;font-size:14px}
.fa-form input:not([type=checkbox]),.fa-form textarea{font:inherit;font-size:16px;border:0;border-radius:16px;background:var(--ground-2);box-shadow:var(--inset);padding:12px 14px;color:var(--ink);width:100%}
.fa-form textarea{resize:vertical}
.fa-form .sel{width:100%;height:46px}
.fa-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.fa-check{grid-template-columns:22px minmax(0,1fr)!important;align-items:start;font-weight:600!important}
.fa-check input{width:20px;height:20px;margin-top:2px;accent-color:var(--red)}
.fa-done{display:none;gap:8px;align-items:center;color:var(--ok)}
.fa-form.is-done > :not(.fa-done){display:none}
.fa-form.is-done .fa-done{display:flex}
@media (max-width:640px){.fa-row{grid-template-columns:minmax(0,1fr)}}
html[data-view="foragencies"] .rail{display:none}html[data-view="foragencies"] .cols{grid-template-columns:minmax(0,1fr)}
/* Alex brief 03.11.: owner disclosure + ad marker */
.partner{display:inline-flex;align-items:center;margin-left:8px;padding:2px 8px;border-radius:999px;font-size:11.5px;font-weight:700;background:var(--blue);color:var(--blue-ink);white-space:nowrap;vertical-align:middle}
.adtag{display:inline-flex;align-items:center;padding:2px 6px;border-radius:6px;font-size:10.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-2);border:1px solid var(--line);background:var(--card)}
.owner-note{font-size:14px;font-weight:600;color:var(--blue-ink);background:var(--blue);border-radius:14px;padding:8px 12px;margin-top:4px}
@media (max-width:640px){.job.creator .side .badges .adtag{padding:3px 5px}}
/* T04 (Alex brief): on phones Safari left big areas unpainted while scrolling (not reproducible in Chromium: no
   opacity animation is involved). Cause: very expensive paint per frame: two sticky/fixed bars with backdrop-filter blur
   over a long list of cards that each carry a 3-layer box-shadow. iOS gives up tiling and shows the bare background.
   Phones get solid bars, a single cheap shadow and no hover transform. */
@media (max-width:900px){
  .top,.tabbar,.applybar,.sheet-bar{backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
  .top{background:var(--ground)}
  .tabbar,.applybar,.sheet-bar{background:var(--card)}
  :root{--raise:0 4px 12px -8px rgba(60,80,120,.45)}
  .job,.job:hover{transform:none;transition:none}
}
@media (max-width:900px) and (prefers-color-scheme:dark){:root:not([data-theme="light"]){--raise:0 4px 12px -8px rgba(0,0,0,.7)}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}
/* Agencies grid cleanup (Lasse 03.11.): badge as a corner mark, names never pushed, salary/share on one line,
   footer row aligned at the bottom of every card. */
.acard{position:relative;grid-template-rows:auto auto 1fr auto;align-content:stretch;padding:20px}
.acard .row{align-items:center;padding-right:34px}
.acard .row h3{font-size:17px;line-height:1.2}
.acard .row .badge.prem{position:absolute;top:14px;right:14px;font-size:0;gap:0;padding:7px;border-radius:50%}
.acard .row .badge.prem .ic{width:15px;height:15px}
.acard .share{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 8px;line-height:1.15}
.acard .share b{white-space:nowrap;font-size:21px;margin:0}
.acard .tags{align-content:start;margin:0}
.acard > .meta{padding-top:12px;border-top:1px solid var(--line)}

/* ===== Alex brief 03.11.2026, block 2: language, full cards, home sections, sheets (README.md) ===== */
/* header (T10): phone = logo + language, search, account; desktop = search + language, account, filters, For agencies */
.top{position:sticky}
.top-act{position:relative;display:flex;align-items:center;gap:8px;flex:none}
.langbtn{width:auto;min-width:44px;padding:0 12px;display:flex;gap:6px}
.langbtn b{font-size:12.5px}
.langmenu{position:absolute;right:0;top:calc(100% + 8px);z-index:40;background:var(--card);border-radius:18px;box-shadow:var(--raise),0 18px 40px -18px rgba(0,0,0,.35);padding:6px;display:grid;min-width:200px}
.langmenu button{display:flex;gap:12px;align-items:center;padding:11px 12px;border-radius:12px;font-weight:600;text-align:left;min-height:44px}
.langmenu button b{width:28px;color:var(--ink-2);font-size:12.5px}
.langmenu button[aria-checked="true"]{background:var(--warm);color:var(--red-2)}
.langmenu button[aria-checked="true"] b{color:var(--red-2)}
.only-phone{display:none}
.side-cta{color:var(--red-2);text-align:left;width:100%}
.pageh{font-size:30px}
@media (max-width:1180px){.top .only-desk{display:none}}
@media (max-width:900px){
  .top .search{display:none}
  .top{justify-content:space-between}
  .top .brand span{display:inline;font-size:16px}
  .only-phone{display:grid}
  .pageh{font-size:26px}
}
.disc-search{max-width:none}
@media (min-width:901px){.disc-search{display:none}}

/* empty states (T06) */
.empty-state{display:grid;justify-items:center;gap:8px;text-align:center;padding:30px 20px;background:var(--card);border-radius:var(--r);box-shadow:var(--raise);color:var(--ink)}
.empty-state .ic{width:26px;height:26px;color:var(--red-2)}
.empty-state small{font-size:14px;max-width:46ch;color:var(--ink-2);font-weight:500}
.empty-mini{font-weight:600;padding:6px 0}

/* full card (T03) */
.job.card3{grid-template-columns:52px minmax(0,1fr);align-items:start;row-gap:12px}
.jc-main{min-width:0;display:grid;gap:6px}
.jc-main h3{font-size:16.5px}
.job.card3 .meta{margin-top:0}
.jc-facts .ic{width:15px;height:15px}
.job.card3 .pay{justify-self:start;display:inline-flex;align-items:baseline;gap:8px;flex-wrap:wrap;border-radius:14px;padding:6px 12px;margin-top:2px}
.job.card3 .pay b{font-size:17px}
.job.card3 .pay small{display:inline;margin:0;font-size:12px}
.job.card3 .tags{margin-top:2px}
.job.card3 .tags .tag{display:inline-flex!important}
.jc-bottom{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;gap:10px;padding-top:10px;border-top:1px solid var(--line);min-height:50px}
.jc-bottom .badges{justify-content:flex-start}
.jc-bottom .save{margin-left:auto}
.ag + .ok{margin-left:-8px}
.meta .ok{color:var(--ok)}
.meta .partner{margin-left:0}
@media (max-width:640px){
  .job.card3{grid-template-columns:44px minmax(0,1fr);padding:14px}
  .jc-main h3{font-size:15.5px}
}

/* carousel (T11) */
.car{position:relative;border-radius:26px;overflow:hidden;box-shadow:0 18px 40px -22px rgba(229,57,43,.6)}
.car-track{display:grid;grid-auto-flow:column;grid-auto-columns:100%;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain}
.car-track::-webkit-scrollbar{display:none}
.slide{position:relative;scroll-snap-align:start;min-height:280px;display:flex;align-items:flex-end;background:#1B1D24;color:#fff;overflow:hidden}
.slide img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.75}
.slide::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(201,42,30,.95) 0%,rgba(229,57,43,.82) 45%,rgba(255,122,69,.25) 100%)}
.slide-in{position:relative;z-index:1;padding:28px 28px 46px;display:grid;gap:10px;max-width:560px}
.slide-in h2{font-size:28px;line-height:1.12;text-wrap:balance}
.slide-in p{font-size:15.5px;max-width:44ch}
.slide-badge{justify-self:start;background:rgba(255,255,255,.22);border-radius:999px;padding:5px 12px;font-size:12.5px;font-weight:700;letter-spacing:.02em}
.slide-in .btn{justify-self:start;background:#fff;color:#1B1D24;box-shadow:0 8px 18px -10px rgba(0,0,0,.5)}
.car-dots{position:absolute;left:28px;bottom:16px;display:flex;gap:6px;z-index:2}
.car-dots button{width:8px;height:8px;border-radius:99px;background:rgba(255,255,255,.55);padding:0;transition:width .2s}
.car-dots button[aria-current="true"]{width:22px;background:#fff}
@media (max-width:640px){.slide{min-height:300px}.slide-in{padding:22px 20px 42px}.slide-in h2{font-size:22px}.car-dots{left:20px}.car{border-radius:22px}}

/* agency circles (T12) */
.stories{display:flex;gap:16px;overflow-x:auto;scrollbar-width:none;padding:2px 2px 4px}
.stories::-webkit-scrollbar{display:none}
.story{display:grid;justify-items:center;gap:4px;width:76px;flex:none;text-align:center}
.story .ring{width:68px;height:68px;border-radius:50%;padding:3px;background:conic-gradient(var(--orange),var(--red),var(--orange));display:grid;place-items:center}
.story .ring .logo{width:100%;height:100%;border-radius:50%;border:3px solid var(--ground)}
.story b{font-size:12.5px;font-weight:700;line-height:1.15;max-width:76px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.story small{font-size:11px;font-weight:600;color:var(--ink-2);min-height:13px}
.story.join .ring{background:none;border:2px dashed var(--line);color:var(--ink-2)}
.story.join .ring .ic{width:24px;height:24px}

/* quick tiles (T13) */
.qtiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.qtile{display:grid;grid-template-columns:44px minmax(0,1fr);grid-template-rows:auto auto;column-gap:12px;align-items:center;text-align:left;background:var(--card);box-shadow:var(--raise);border-radius:20px;padding:14px;min-height:76px}
.qtile b{font-size:14.5px;line-height:1.2}
.qtile small{grid-column:2;font-size:12.5px;font-weight:600;color:var(--ink-2)}
.qt-ic{grid-row:1/3;width:44px;height:44px;border-radius:14px;display:grid;place-items:center;background:var(--warm);color:var(--red-2)}
.qtile:first-child{background:linear-gradient(135deg,#F04A3A,var(--red-2));color:#fff}
.qtile:first-child small{color:rgba(255,255,255,.85)}
.qtile:first-child .qt-ic{background:rgba(255,255,255,.2);color:#fff}
@media (max-width:1180px){.qtiles{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.qtiles{gap:10px}.qtile{grid-template-columns:minmax(0,1fr);grid-template-rows:auto;row-gap:8px;padding:14px;align-items:start}.qtile small{grid-column:1}.qt-ic{grid-row:auto;width:40px;height:40px}}

/* category bar (T14) */
.catbar{display:grid;gap:6px}
.kicker{font-size:11.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--red-2)}
.catbar h2{font-size:22px}
.catbar .chips{margin-top:6px}

/* feed banner (T15) */
.feedad{display:grid;grid-template-columns:minmax(0,1fr) 38%;background:var(--warm);border-radius:var(--r);overflow:hidden;box-shadow:var(--raise)}
.feedad .fa-txt{padding:18px;display:grid;gap:10px;align-content:start}
.feedad .partner{justify-self:start;margin:0}
.feedad ul{list-style:none;display:grid;gap:6px;font-size:14px;font-weight:600}
.feedad li{display:flex;gap:8px;align-items:center}
.feedad li .ic{color:var(--red-2);width:17px;height:17px}
.feedad .btn{justify-self:start}
.feedad img{width:100%;height:100%;object-fit:cover;min-height:180px}

/* trust tiles with a target (T16), how it works (T17) */
.trust a.panel{color:inherit}
.trust .go{margin-left:auto;color:var(--red-2)}
.how{background:var(--card);border-radius:var(--r);box-shadow:var(--raise);padding:20px;display:grid;gap:14px}
.how ol{list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.how li{display:grid;gap:8px;align-content:start;font-weight:600;font-size:14.5px}
.how li b{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:var(--red);color:#fff;font:600 15px var(--display)}
@media (max-width:900px){.how ol{grid-template-columns:minmax(0,1fr)}.how li{grid-template-columns:34px minmax(0,1fr);align-items:center}}

/* pages (T19) */
.pager{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;padding-top:6px}
.pager .chip{min-width:44px;justify-content:center}

/* detail (T27–T29) */
.crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;font-size:13px;font-weight:600;color:var(--ink-2)}
.crumbs a:hover{color:var(--red-2)}
.crumbs small{margin-left:auto;font-weight:700;color:var(--ink-2)}
.bigpay .uah{font-size:13px;font-weight:600;color:var(--ink-2)}
.jd-facts{margin-top:-6px}
.jd-intro{font-size:16.5px;line-height:1.55}
.jd-sec h2{font-size:19px}
.jd-age{display:flex;gap:8px;align-items:center;background:var(--warm);color:var(--red-2);border-radius:14px;padding:10px 14px;font-size:14.5px}
.agbox{background:var(--ground);border-radius:20px;padding:16px;display:grid;gap:12px}
.agbox-h{display:flex;gap:12px;align-items:center}
.agbox-h .meta{margin-top:2px}
.agbox-n{font-size:16px}
.agbox-btns{display:flex;flex-wrap:wrap;gap:8px}
.agbox-links{display:flex;flex-wrap:wrap;gap:6px 18px}
.share-row{display:flex;align-items:center;gap:10px;font-weight:700}
.share-row .circle.is-done{background:var(--ok);color:#fff}
.report-link{justify-self:start;font-size:14px;color:var(--ink-2)!important}
.report-link .ic{width:16px;height:16px}
.jd-more{display:grid;gap:10px}
.jd-more .head{margin:0}

/* agencies (T25) */
#agtabs{margin-top:-4px}
#agtabs .chip[aria-pressed="true"]{background:var(--red);color:#fff;box-shadow:none}
.acard-join{border:2px dashed var(--line);background:transparent;box-shadow:none;display:grid;place-items:center;align-content:center;text-align:center;gap:6px;min-height:170px;grid-template-rows:none}
.acard-join small{color:var(--ink-2);font-weight:600}
.acard .partner{margin-left:0}
.ag-title{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.ag-about{font-size:16px;max-width:70ch}
.rv-reply{background:var(--card);border-radius:14px;padding:10px 12px;display:grid;gap:2px;font-size:14px}
.review small{font-weight:600;color:var(--ink-2)}
.agencies-empty{grid-column:1/-1}
.agrid .empty-state{grid-column:1/-1}

/* rail */
.rail-resume{display:flex;gap:12px;align-items:center;text-align:left;width:100%}
.rail-resume .circle{background:var(--red);color:#fff;box-shadow:none}
.rail-resume small{display:block;color:var(--ink-2);font-weight:600}
html[data-view="verification"] .rail,html[data-view="foragencies"] .rail{display:none}
html[data-view="verification"] .cols,html[data-view="foragencies"] .cols{grid-template-columns:minmax(0,1fr)}
.legal ol{padding-left:22px;display:grid;gap:8px}
.legal ol li{font-size:16px;line-height:1.6}
.fa-steps li{font-weight:600}

/* tab bar: resume in the middle */
.tabbar .tab-cta{flex:1;display:grid;justify-items:center;gap:2px;font-size:11px;font-weight:700;color:#fff;background:linear-gradient(180deg,#F04A3A,var(--red-2));padding:7px 4px;border-radius:999px;min-height:50px}

/* sheets: resume (T20), report (T28), review (T26) */
html.has-sheet body{overflow:hidden}
.rf-card{gap:12px;max-height:calc(100dvh - 32px);overflow:auto}
.rf-l{display:grid;gap:6px;font-weight:700;font-size:14px}
.rf-l .sel{width:100%;height:48px;font-size:16px}
.rf-in{font:inherit;font-size:16px;border:0;border-radius:16px;background:var(--ground-2);box-shadow:var(--inset);padding:12px 14px;width:100%;color:var(--ink);resize:vertical}
.hp{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}
.rf-card .fa-check{display:grid;gap:10px;font-size:14px}
.rf-card .fa-check a{color:var(--red-2);text-decoration:underline}
.rp-what{font-weight:600;color:var(--ink-2);font-size:14px}
.rf-done{flex-direction:column;text-align:center}
.rf-done .btn{width:100%}
.rf-card.is-done > :not(.nl-done):not(.nl-x){display:none}
.rf-card.is-done .nl-done{display:flex!important}
.rv-stars{display:flex;gap:6px}
.rv-stars button{width:44px;height:44px;border-radius:12px;background:var(--ground);display:grid;place-items:center;color:var(--ink-2)}
.rv-stars button.on{background:var(--red);color:#fff}
.rv-stars button.on .ic{fill:currentColor}
#rp .chips .chip{white-space:normal;text-align:left}
#rp .chip[aria-pressed="true"]{background:var(--red);color:#fff;box-shadow:none}
.pr-none{display:grid;gap:12px;justify-items:start}
@media (max-width:640px){
  .feedad{grid-template-columns:minmax(0,1fr)}
  .feedad img{order:-1;min-height:0;aspect-ratio:16/7}
  .crumbs small{margin-left:0;flex-basis:100%}
}
.article h1,.article h2,.pageh{overflow-wrap:break-word;hyphens:auto}
.article{min-width:0}
.jc-bottom{padding-top:8px;min-height:0}
.jc-date{display:inline-flex;gap:5px;align-items:center;font-size:13px;font-weight:600;color:var(--ink-2)}
.jc-date .ic{width:15px;height:15px}
.story{width:84px}
.story b{white-space:normal;max-width:84px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.jd-cta .btn{white-space:normal;text-align:left;justify-content:flex-start;max-width:100%}
.agbox-n{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px}
.agbox-n .partner{margin-left:0}
.ag + .ok{margin-left:0}
.jc-ag{align-items:center;gap:4px 8px}
.article h1,.article h2,.pageh{overflow-wrap:anywhere}
@media (max-width:640px){.legal h1{font-size:22px}}
/* Lasse 03.11. (home markup): language = round 44 px icon button like the account button, code tiny under the globe */
.langbtn{width:44px;min-width:44px;padding:0;display:grid;place-items:center;align-content:center;gap:0}
.langbtn .ic{width:17px;height:17px}
.langbtn b{font-size:8.5px;line-height:1;letter-spacing:.04em;margin-top:1px}
.rail-fa .circle{background:var(--ink);color:var(--card)}
/* Telegram card in the right column (Lasse 03.11.) */
.tgcard{display:grid;grid-template-columns:44px minmax(0,1fr) auto;gap:12px;align-items:center}
.tg-ic{background:#229ED9!important;color:#fff;box-shadow:none}
.tg-txt{display:grid;gap:1px;min-width:0}
.tg-txt small{color:var(--ink-2);font-weight:600}
.tg-handle{user-select:all;-webkit-user-select:all;font-weight:700;color:#229ED9;font-size:13.5px}
.tg-join{background:#229ED9;color:#fff;border-radius:999px;min-height:40px;padding:8px 16px}
/* Agency page header (Lasse 03.11.): one clean row under the cover, nothing overlaps it */
.prof .cover{height:96px}
.prof .in{margin-top:0;padding-top:20px}
.ptop{display:flex;flex-wrap:wrap;align-items:center;gap:14px 18px}
.ptop .bigLogo{width:76px;height:76px;border-radius:24px;border:0;font-size:26px}
.ptop .who{flex:1;min-width:0}
.ptop .ag-title h1{font-size:28px}
.ptop .agbox-btns{flex:none}
@media (max-width:640px){
  .prof .cover{height:64px}
  .ptop{flex-direction:row;align-items:center}
  .ptop .bigLogo{width:60px;height:60px;border-radius:18px}
  .ptop .who{width:auto}
  .ptop .ag-title h1{font-size:22px}
  .ptop .agbox-btns{flex-basis:100%}
  .ptop .agbox-btns .btn{flex:1;width:auto}
}
.ptop .who{flex:1 1 280px}
.ptop .ag-title{flex-wrap:nowrap;align-items:center}
.ptop .ag-title h1{min-width:0;overflow-wrap:anywhere}
.ptop .ag-title .ok .ic{width:22px;height:22px}
.tgcard{grid-template-columns:44px minmax(0,1fr)}
.tgcard .tg-join{grid-column:1/-1;width:100%}
/* agency header as a grid: logo | name, buttons under the name (desktop) or full width (phone) */
.ptop{display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-areas:"logo who" "logo btns";gap:10px 18px;align-items:center}
.ptop .bigLogo{grid-area:logo;align-self:start}
.ptop .who{grid-area:who;min-width:0}
.ptop .agbox-btns{grid-area:btns}
.prof .in{container-type:inline-size}
@container (min-width:860px){.ptop{grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:"logo who btns"}}
.ptop .ag-title h1{flex:0 1 auto}
@media (max-width:640px){.ptop{grid-template-areas:"logo who" "btns btns";gap:14px}.ptop .bigLogo{align-self:center}}
/* removed 03.11.: width:min-content + overflow-wrap:anywhere stacked the name one letter per line on phones */
.tglogo{width:44px;height:44px;flex:none;display:block}
.tglogo.sm{width:20px;height:20px}
.tglogo.big{width:56px;height:56px}
.share-row .tglogo{width:28px;height:28px}
.tg-join{display:inline-flex;gap:8px;align-items:center;justify-content:center}
.tg-join .tglogo{box-shadow:0 0 0 2px rgba(255,255,255,.9);border-radius:50%}
/* card v3b (Lasse 03.11.): date, paid badges and save top right; no platform/place line; no bottom row */
.jc-head{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:start}
.jc-side{display:flex;align-items:center;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.jc-side .jc-date{font-size:12px;font-weight:600;color:var(--ink-2);white-space:nowrap}
.jc-side .save{width:36px;height:36px}
.jc-side .save .ic{width:16px;height:16px}
@media (max-width:640px){.jc-side .badge,.jc-side .adtag{display:none}}
/* categories: left sidebar on desktop, chip row only on phones */
@media (min-width:901px){#catchips{display:none}}
/* other agencies directory */
.oa-head{margin-top:18px}
.oa-lead{font-size:14.5px;font-weight:600;color:var(--ink-2);max-width:70ch}
.oa-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:12px}
.oa{background:var(--card);border-radius:var(--r);box-shadow:var(--raise);padding:16px;display:grid;gap:10px;align-content:start}
.oa-top{display:flex;gap:12px;align-items:center}
.oa-logo{width:44px;height:44px;border-radius:14px;font-size:15px;background:var(--ground-2);color:var(--ink-2)}
.oa h3{font-size:16px}
.oa-label{justify-self:start;font-size:11.5px;font-weight:700;border:1px solid var(--line);border-radius:999px;padding:3px 9px;color:var(--ink-2)}
.oa-terms{display:grid;grid-template-columns:auto minmax(0,1fr);gap:6px 12px;font-size:14px}
.oa-terms dt{font-weight:700;color:var(--ink-2)}
.oa-terms dd q{font-style:italic}
.oa-terms dd q + q::before{content:" · ";font-style:normal}
.oa-terms .ns{color:var(--ink-2)}
.oa-foot{display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:13px}
.oa-foot small{color:var(--ink-2);font-weight:600}
.oa-fix{justify-self:start;font-size:13px;text-align:left;color:var(--ink-2)!important}
.oa-fix .ic{width:15px;height:15px}
.oa-end{font-weight:700;padding:6px 0}
@media (max-width:640px){.oa-grid{grid-template-columns:minmax(0,1fr)}.oa-terms{grid-template-columns:minmax(0,1fr)}.oa-terms dd{margin-bottom:4px}}
.jd-vary{font-size:13.5px;font-weight:600;color:var(--ink-2)}
.sf-tm{flex-basis:100%}
/* resume form: country of residence */
.rf-cc{text-align:left;cursor:pointer;min-height:48px}
.rf-cc .ph{color:var(--ink-2)}
.rf-ccbox{display:grid;gap:8px}
/* cookie banner (Ads plan A3): equal buttons */
.cb{position:fixed;left:12px;right:12px;bottom:12px;z-index:90;max-width:640px;margin:0 auto;background:var(--card);border-radius:20px;box-shadow:var(--raise),0 18px 40px -18px rgba(0,0,0,.4);padding:16px;display:grid;gap:12px;font-size:14px}
.cb a{color:var(--red-2);text-decoration:underline}
.cb-btns{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.cb-btns .btn{width:100%}
@media (max-width:900px){.cb{bottom:calc(84px + env(safe-area-inset-bottom,0px))}}
.ptop .ag-title h1{width:auto;overflow-wrap:normal;word-break:normal}.ptop .ag-title{flex-wrap:wrap}
/* cookie banner compact (Lasse 03.11.): one short line + two equal buttons in one row, above the tab bar */
.cb{display:flex;align-items:center;gap:10px 14px;padding:10px 12px;font-size:13px;border-radius:16px}
.cb p{flex:1;min-width:0;line-height:1.35}
.cb-btns{display:flex;gap:8px;flex:none}
.cb-btns .btn{width:auto;min-height:40px;padding:8px 16px;font-size:13.5px}
@media (max-width:900px){.cb{bottom:calc(90px + env(safe-area-inset-bottom,0px));left:10px;right:10px}}
@media (max-width:640px){.cb{flex-wrap:wrap}.cb p{flex-basis:100%}.cb-btns{width:100%}.cb-btns .btn{flex:1}}
/* other agencies' ads (src/external.json): neutral label, quotes, the agency's own ad as the apply button */
.extlabel{display:inline-flex;align-items:center;max-width:100%;font-size:11.5px;font-weight:700;line-height:1.3;border:1px solid var(--line);border-radius:999px;padding:3px 9px;color:var(--ink-2);background:var(--card)}
.dhead .extlabel,.ptop .extlabel{margin-top:8px}
.ext-q{display:grid;gap:8px;margin:0;padding:0;list-style:none}
.ext-q li{border-left:3px solid var(--line);padding:2px 0 2px 12px;font-size:15px;line-height:1.5;overflow-wrap:anywhere}
.ext-q q{font-style:italic}
.ext-quotes .oa-foot{margin-top:2px}
.applybar .ext-go{gap:8px;text-align:center}
.applybar .ext-go .ic{width:16px;height:16px}
.oa-page{justify-self:start;gap:6px}
.oa-page .ic{width:15px;height:15px}
.agency-more .logo{font-size:13px}