/* DevHero components — loaded after needs.css (and ops.css on the globe page). BRNZ look: navy, lime, hairlines, square corners.
   Value tiers v0…v4 (budget <1k, 1k–10k, 10k–100k, 100k–1M, ≥1M USD · rate <25, 25–50, 50–100, 100–150, ≥150 USD/h) share one ramp. */
:root{--v0:#4a5878;--v1:#8fa0c8;--v2:#5ec8e5;--v3:#c6f432;--v4:#ffc94d}

/* brand */
.brand .wm i,.wm i{font-style:normal;color:var(--signal);font-size:1em;letter-spacing:inherit;margin-inline-start:0;vertical-align:baseline}

/* kinds */
.ktag.k-t{color:var(--on);background:var(--signal);border-color:var(--signal)}
.ktag.k-f{color:#5ec8e5;border-color:rgba(94,200,229,.5);background:rgba(94,200,229,.08)}
.ktag.k-c{color:#ffc94d;border-color:rgba(255,201,77,.5);background:rgba(255,201,77,.08)}
.kcards{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:0;margin-top:6px;border-top:1px solid var(--line);border-inline-start:1px solid var(--line)}
.kcard{display:flex;flex-direction:column;gap:12px;text-decoration:none;color:inherit;border-inline-end:1px solid var(--line);border-bottom:1px solid var(--line);padding:clamp(20px,2vw,30px);background:transparent}
.kcard:hover{background:var(--signal-soft)}
.kcard .kn{font-family:var(--display);font-weight:400;font-size:clamp(38px,3.4vw,56px);line-height:1;letter-spacing:-.045em;color:var(--signal)}
.kcard p{margin:0;color:var(--muted);line-height:1.55}
.kcard small{color:var(--dim);font-size:12.5px}
.panel .kcards{border:0}
.panel .kcard{border:1px solid var(--line);margin-bottom:-1px}

/* statuses */
.sb{font-style:normal;font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;padding:2px 6px;border:1px solid var(--line);color:var(--muted);line-height:1.4;white-space:nowrap;display:inline-block}
.sb-open{color:var(--on);background:var(--signal);border-color:var(--signal)}
.sb-soon{color:var(--on);background:#f2a65a;border-color:#f2a65a}
.sb-nodl{color:#b9c7e6;border-color:rgba(143,160,200,.45)}
.sb-plan{color:#c9b6ff;border-color:rgba(176,150,255,.55);border-style:dashed}
.kindnote.plannote{border-inline-start-color:#b096ff}
body[data-page=project] .hero .wrap{align-items:start}
.st-open .dot{background:#c6f432;box-shadow:0 0 0 3px rgba(198,244,50,.16)}
.st-soon .dot{background:#f2a65a;box-shadow:0 0 0 3px rgba(242,166,90,.18)}
.st-nodl .dot{background:#8fa0c8}

/* value legend on the globe */
.lg-none i{background:rgba(143,160,200,.45)} .lg-v0 i{background:var(--v0)} .lg-v1 i{background:var(--v1)} .lg-v2 i{background:var(--v2)} .lg-v3 i{background:var(--v3)} .lg-v4 i{background:var(--v4)}
.gfoot .metric{display:inline-grid;grid-template-columns:repeat(2,auto);background:rgba(11,18,32,.85)}
.gfoot .metric button{padding:9px 14px}
.gfoot .legend[hidden]{display:none}
.fm .val{font-style:normal;font-size:12.5px;letter-spacing:-.01em;color:var(--signal);font-weight:700}
.fi.sel .fm .val{color:var(--ink)}

/* globe side filters */
.kseg{grid-template-columns:repeat(4,minmax(0,1fr))}
.rng{display:grid;gap:6px;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.rng span{display:flex;justify-content:space-between;gap:10px}
.rng b{font-weight:700;letter-spacing:0;text-transform:none;font-size:13px;color:var(--signal)}
.rng input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:24px;background:transparent;margin:0}
.rng input[type=range]::-webkit-slider-runnable-track{height:2px;background:linear-gradient(90deg,var(--v0),var(--v1),var(--v2),var(--v3),var(--v4))}
.rng input[type=range]::-moz-range-track{height:2px;background:linear-gradient(90deg,var(--v0),var(--v1),var(--v2),var(--v3),var(--v4))}
.rng input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;margin-top:-7px;background:var(--signal);border:2px solid var(--paper);box-shadow:0 0 0 1px var(--signal)}
.rng input[type=range]::-moz-range-thumb{width:14px;height:14px;background:var(--signal);border:2px solid var(--paper);border-radius:0}
[dir="rtl"] .rng input[type=range]{direction:rtl}
.jsonly{display:inline-flex;align-items:center;gap:7px;font-size:12px;color:var(--muted);white-space:nowrap}
.jsonly input{accent-color:var(--signal);width:16px;height:16px}

/* money in tables */
.ptable td.money{white-space:nowrap}
.ptable td.money b{display:block;font-weight:700;color:var(--signal);font-size:.95rem}
.ptable td.money small{display:block;color:var(--dim);font-size:.75rem;margin-top:2px}
.ptable td.what small .ktag{margin-inline-end:4px}
.scrollx{overflow-x:auto}

/* project page */
.pricebig{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));border:1px solid var(--line);margin:6px 0 22px;max-width:720px}
.pricebig>div{padding:14px 16px;border-inline-end:1px solid var(--line2);display:flex;flex-direction:column;gap:5px;min-width:0}
.pricebig>div:last-child{border-inline-end:0}
.pricebig b{font-family:var(--display);font-weight:400;font-size:clamp(26px,2.6vw,40px);letter-spacing:-.04em;line-height:1;color:var(--signal);overflow-wrap:anywhere}
.pricebig small{color:var(--dim);font-size:12px;line-height:1.35}
.h1-req{display:flex;flex-direction:column;gap:10px}
.h1-req .h1-sub{font-size:clamp(14px,1.1vw,17px);letter-spacing:.06em;text-transform:uppercase;color:var(--muted);font-weight:400;line-height:1.3}
h1.h1-req{font-size:clamp(30px,3.6vw,56px);line-height:1.05}
.kindnote{border-inline-start:2px solid var(--signal);padding:4px 0 4px 12px;color:var(--muted);font-size:14px;max-width:62ch}
[dir="rtl"] .kindnote{padding:4px 12px 4px 0}

/* home */
.heropanel{align-self:start}
.heropanel .h4{margin:0 0 10px;letter-spacing:.17em;text-transform:uppercase}
.toplist{list-style:none;margin:0;padding:0;counter-reset:tl}
.toplist li{border-top:1px solid var(--line2)}
.toplist li:first-child{border-top:0}
.toplist a{display:grid;grid-template-columns:auto minmax(0,1fr);gap:2px 14px;padding:12px 0;text-decoration:none;color:var(--ink)}
.toplist a:hover .tt{color:var(--signal)}
.toplist .tv{grid-row:span 2;font-family:var(--display);font-size:clamp(18px,1.5vw,24px);letter-spacing:-.03em;color:var(--signal);min-width:6.5ch;line-height:1.1}
.toplist .tt{font-size:14.5px;line-height:1.35;overflow-wrap:anywhere}
.toplist small{color:var(--dim);font-size:12px;line-height:1.4}
.toplist small .ktag{font-size:.62rem}
.two-tops{gap:clamp(24px,3vw,56px)}
.two-tops .h4{margin:0 0 6px;text-transform:uppercase}
.checks{list-style:none;margin:clamp(22px,2.5vw,36px) 0 0;padding:0;display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr))}
.checks li{position:relative;padding-inline-start:28px;color:#d5dceb;line-height:1.5}
.checks li::before{content:"";position:absolute;inset-inline-start:0;top:.35em;width:12px;height:7px;border-left:2px solid var(--signal);border-bottom:2px solid var(--signal);transform:rotate(-45deg)}
.vs{display:grid;gap:0;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));border-top:1px solid var(--line);border-inline-start:1px solid var(--line)}
.vs .card{border-inline-end:1px solid var(--line);border-bottom:1px solid var(--line)}
.vs ul{margin:12px 0 0;padding-inline-start:18px;display:grid;gap:10px;line-height:1.5}
.vs-no .num{color:#f2a65a}
.vs-no li{color:var(--muted)}
.vs-yes{background:var(--signal-soft)!important}
.vs-yes li{color:var(--ink)}
.closer{border-bottom:0}

/* tiles with pictograms */
.tile .tico{color:var(--signal)}
.olist .pic,.otypes .pic{width:26px;height:26px;color:var(--signal)}

/* account: alerts */
#al-minb{max-width:320px;margin:4px 0 8px}

@media (max-width:640px){
  .pricebig{grid-template-columns:1fr 1fr}
  .pricebig>div:nth-child(2){border-inline-end:0}
  .toplist .tv{min-width:5ch}
  .kseg button{font-size:9.5px}
}
/* small phones: keep the whole DEVHERO wordmark (needs.css hides the second part below 420px) */
@media (max-width:419px){.brand{font-size:15px}.brand .wm{letter-spacing:.06em!important;margin-inline-end:-.06em}.brand .wm i{display:inline!important}.top .lang{max-width:4.9rem}}
/* desktop header: long nav labels in some languages — drop "How it works" (still in the menu and footer) before the bar overflows */
@media (max-width:1499px){.top .wrap>nav a[href$="#how"]{display:none}}
@media (min-width:760px) and (max-width:1279px){.top .wrap>nav a[href*="/freelance/"]{display:none}}
@media (max-width:1365px){.top .brand .bsub{display:none}}
/* hero facts: up to six figures — keep each figure on one line, wrap into rows instead */
.facts{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
@media (min-width:600px){.facts b{white-space:nowrap;overflow-wrap:normal}}
@media (max-width:599px){.facts{grid-template-columns:repeat(2,minmax(0,1fr))}.facts b{font-size:clamp(24px,7vw,34px)}}
/* small screens: long kind labels ("Mission sous contrat") may wrap instead of pushing the page wider */
@media (max-width:599px){.ktag{white-space:normal;max-width:100%}.toplist small{overflow-wrap:anywhere}}
@media (min-width:1100px){.hero .facts{grid-auto-flow:row;grid-auto-columns:auto;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 22px}}