/* web3vacancy LIGHT base (owner 2026-10-19: white like igamingjobs, own secondary colour).
   Loaded after styles.css + w3v-accent.css (generated: igj with the orange swapped for var(--gold*)).
   html[data-vibe] picks the accent. Neutrals stay igj's. */
:root{--display:"Space Grotesk",system-ui,sans-serif;--font:"Manrope",system-ui,sans-serif;--mono:"IBM Plex Mono",ui-monospace,monospace}

/* ---- accent candidates (deep enough to read on white) ---- */
:root,html[data-vibe="violet"]{
  --gold:#6e56cf; --gold-2:#8b7be0; --gold-ink:#4733a8; --gold-deep:#5a43c0; --peach:#b9acf5;
  --glow:110,86,207; --glow2:110,86,207; --loop:hue-rotate(228deg) saturate(.85);
}
html[data-vibe="indigo"]{
  --gold:#3b5bdb; --gold-2:#5c7cfa; --gold-ink:#2b44b0; --gold-deep:#3049c4; --peach:#a5b8ff;
  --glow:59,91,219; --glow2:59,91,219; --loop:hue-rotate(205deg) saturate(.9);
}
html[data-vibe="blue"]{
  --gold:#1f6feb; --gold-2:#4c8ff5; --gold-ink:#1554c0; --gold-deep:#1a5fd4; --peach:#9cc2ff;
  --glow:31,111,235; --glow2:31,111,235; --loop:hue-rotate(190deg) saturate(.9);
}
html[data-vibe="emerald"]{
  --gold:#0f9f78; --gold-2:#22b88f; --gold-ink:#0a7a5c; --gold-deep:#0c8a68; --peach:#86dcc0;
  --glow:15,159,120; --glow2:15,159,120; --loop:hue-rotate(130deg) saturate(.8);
}
html[data-vibe="cyan"]{
  --gold:#0891b2; --gold-2:#22a9cc; --gold-ink:#066f89; --gold-deep:#077e9b; --peach:#8fd6e8;
  --glow:8,145,178; --glow2:8,145,178; --loop:hue-rotate(170deg) saturate(.85);
}
html[data-vibe="graphite"]{
  --gold:#2a2d33; --gold-2:#4a4f57; --gold-ink:#0a0b0f; --gold-deep:#1d2025; --peach:#9aa0a8;
  --glow:42,45,51; --glow2:42,45,51; --loop:saturate(0);
}
:root{--gold-soft:rgba(var(--glow),.10);--gold-line:rgba(var(--glow),.32);--ring:0 0 0 3px rgba(var(--glow),.22)}

h1,h2,h3,h4{font-family:var(--display)}

/* logo: the igj pill, w3v accent on "vacancy" (placeholder until the logo is decided) */
.logo-pill{font-family:var(--display);letter-spacing:-.04em}
.logo-pill i{font-style:normal;color:var(--peach)}

/* igj gambling art stays hidden; coin loops tinted to the accent */
.cta-art,img[src*="rise-dice"],img[src*="rise-cards"],img[src*="rise-chips"]{display:none}
.sa video,.to-art,.spot-art{filter:var(--loop)}

/* preview-only switchers (SAMPLE_JOBS=1) */
.vibe-switch{position:fixed;right:16px;bottom:16px;z-index:10000;display:flex;gap:4px;padding:5px;border-radius:12px;
  background:rgba(255,255,255,.92);border:1px solid rgba(10,11,15,.12);box-shadow:0 8px 24px rgba(10,11,15,.12);backdrop-filter:blur(10px);font:500 11.5px/1 var(--mono)}
.vibe-switch a{padding:7px 9px;border-radius:8px;color:#4a4f57;text-decoration:none}
.vibe-switch a[aria-current="true"]{background:var(--gold);color:#fff}

/* rose: the pink-to-red of the grid reference (owner 2026-10-19) */
html[data-vibe="rose"]{
  --gold:#e5366f; --gold-2:#f0567f; --gold-ink:#b8204f; --gold-deep:#cc2a5e; --peach:#ffadc4;
  --glow:229,54,111; --glow2:240,68,56; --loop:hue-rotate(-42deg) saturate(1.05);
}

/* ---- background: faint grid + a haze rising from the bottom of the screen (ref: grid poster) ---- */
html::before{content:"";display:block;position:fixed;inset:0;z-index:0;pointer-events:none;
  background-image:linear-gradient(to right,rgba(10,11,15,.055) 1px,transparent 1px),linear-gradient(to bottom,rgba(10,11,15,.055) 1px,transparent 1px);
  background-size:64px 64px;background-position:center top;
  -webkit-mask-image:linear-gradient(180deg,rgba(0,0,0,.35),#000 55%);mask-image:linear-gradient(180deg,rgba(0,0,0,.35),#000 55%)}
html::after{content:"";display:block;position:fixed;left:-10%;right:-10%;bottom:-12vh;height:46vh;z-index:0;pointer-events:none;
  background:radial-gradient(45% 90% at 50% 100%,rgba(var(--glow),.30),transparent 70%),
    radial-gradient(35% 80% at 12% 100%,rgba(var(--glow2),.24),transparent 70%),
    radial-gradient(35% 80% at 88% 100%,rgba(var(--glow2),.24),transparent 70%);
  filter:blur(28px);animation:w3v-haze 14s ease-in-out infinite alternate}
@keyframes w3v-haze{0%{transform:translate3d(-2%,0,0) scaleY(.94)}100%{transform:translate3d(2%,-2%,0) scaleY(1.06)}}
@media (prefers-reduced-motion:reduce){html::after{animation:none}}

/* ---- logo: stacked wordmark in a black tile (brand-lab 06, hirelabs recipe: Unbounded caps + one accent square) ---- */
.w3v-mark{display:inline-grid;flex:none;padding:7px 10px 8px;border-radius:10px;background:#0b0c10;color:#fff;text-decoration:none;
  font:700 13px/.94 "Unbounded",system-ui,sans-serif;letter-spacing:.02em;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 0 0 1px rgba(255,255,255,.06),0 6px 16px rgba(var(--glow),.22)}
.w3v-mark span{display:flex;align-items:baseline}
.w3v-mark i{display:inline-block;width:.3em;height:.3em;background:var(--gold);margin-left:.12em}
.w3v-mark:hover{box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 0 0 1px rgba(255,255,255,.06),0 8px 22px rgba(var(--glow),.32)}
.w3v-mark:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.site-footer .w3v-mark{font-size:15px;justify-self:start;align-self:start;width:max-content;max-width:none;height:auto!important;overflow:visible;line-height:.94!important;padding:8px 11px 9px!important;color:#fff!important}

/* w3v: the current web3vacancy brand colours (green #00D395 primary, yellow #FFD24A secondary) */
html[data-vibe="w3v"]{
  --gold:#00c48b; --gold-2:#00d395; --gold-ink:#00875f; --gold-deep:#00a877; --peach:#7df0cb;
  --glow:0,211,149; --glow2:255,210,74; --loop:hue-rotate(135deg) saturate(.95);
}

/* ---- sky (owner ref 2026-10-19: juicesales Dribbble): sky-blue top with soft clouds fading to white,
   dashed construction guides with dots at the crossings, white glass nav. Only when data-vibe="sky". ---- */
html[data-vibe="sky"]{
  --gold:#1f8ef1; --gold-2:#4aa8f5; --gold-ink:#1468c0; --gold-deep:#1a7ad6; --peach:#a9d6ff;
  --glow:31,142,241; --glow2:120,190,245; --loop:hue-rotate(190deg) saturate(.8);
  --sky-h:820px;
  /* neutral tint for the generated w3v-tint-sky.css: igj greys move onto the sky's blue-grey */
  --nh:208; --ns:22%;
}
html[data-vibe="sky"]{background:#fbfcfd}
html[data-vibe="sky"] body,html[data-vibe="sky"].lock-in body{background:transparent}
html[data-vibe="sky"]::after{display:none}
/* sky + clouds: absolute (scrolls away with the hero), never behind the job list */
html[data-vibe="sky"]::before{position:absolute;inset:0 0 auto 0;height:var(--sky-h);z-index:1;opacity:1;
  -webkit-mask-image:none;mask-image:none;background-size:auto;
  background:
    linear-gradient(180deg,rgba(251,252,253,0) 52%,#fbfcfd 100%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1600' height='820'%3E%3Cfilter id='c' x='0' y='0'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.0021 .0046' numOctaves='5' seed='11'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 2.1 0 0 0 -0.95'/%3E%3CfeGaussianBlur stdDeviation='2.6'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23c)'/%3E%3C/svg%3E") center top/max(1600px,100%) 820px no-repeat,
    linear-gradient(180deg,#58b8ea 0%,#8bcdf1 34%,#cfe9f8 64%,#fbfcfd 100%)}
/* dashed guides + dots, framing the content column like the reference */
html[data-vibe="sky"] body{position:relative}
html[data-vibe="sky"] body::after{content:"";display:block;position:absolute;left:0;right:0;top:0;bottom:0;z-index:1;pointer-events:none;width:auto;
  background:
    radial-gradient(circle,#fff 0 3.5px,rgba(255,255,255,0) 4px) calc(var(--gx) - 5px) 205px/10px 10px no-repeat,
    radial-gradient(circle,#fff 0 3.5px,rgba(255,255,255,0) 4px) calc(100% - var(--gx) + 5px) 205px/10px 10px no-repeat,
    repeating-linear-gradient(90deg,rgba(70,120,170,.28) 0 6px,transparent 6px 12px) 0 209px/100% 1px no-repeat,
    repeating-linear-gradient(180deg,rgba(70,120,170,.22) 0 6px,transparent 6px 12px) var(--gx) 0/1px 100% no-repeat,
    repeating-linear-gradient(180deg,rgba(70,120,170,.22) 0 6px,transparent 6px 12px) calc(100% - var(--gx)) 0/1px 100% no-repeat}

/* white glass nav like the reference */
html[data-vibe="sky"] .navpill{background:rgba(255,255,255,.55);border:1px solid rgba(255,255,255,.85);box-shadow:0 8px 30px rgba(30,90,140,.12);backdrop-filter:blur(14px) saturate(1.3);-webkit-backdrop-filter:blur(14px) saturate(1.3)}
html[data-vibe="sky"] .navpill .nav-links a.on{background:#fff;color:#0b0c10;box-shadow:0 1px 2px rgba(10,11,15,.08)}
/* hero tiles sit on the sky: frosted instead of grey */
html[data-vibe="sky"] .toprail .tile{background:rgba(255,255,255,.6)!important;border-color:rgba(255,255,255,.9)!important;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}

/* banners (stats strip + hiring-partner strip) stay exactly as on igj (owner 2026-10-19) */

.site-footer .w3v-mark span{color:#fff}

/* ===== reference visuals on the igj structure (owner 2026-10-19: hero + sections stay igj, only the look changes) ===== */
:root{--gx:max(24px,calc(50% - 680px))}
html[data-vibe="sky"] .gsec{position:relative}
html[data-vibe="sky"] .gsec::after{content:"";position:absolute;left:calc(-1 * var(--gx));right:calc(-1 * var(--gx));top:-28px;height:9px;pointer-events:none;z-index:1;
  background:
    radial-gradient(circle,#fff 0 3px,rgba(70,120,170,.45) 3.2px 4.2px,transparent 4.6px) calc(var(--gx) - 4.5px) 0/9px 9px no-repeat,
    radial-gradient(circle,#fff 0 3px,rgba(70,120,170,.45) 3.2px 4.2px,transparent 4.6px) calc(100% - var(--gx) - 4.5px) 0/9px 9px no-repeat,
    repeating-linear-gradient(90deg,rgba(70,120,170,.28) 0 6px,transparent 6px 12px) 0 4px/100% 1px no-repeat}
/* closing hiring band: full-bleed clouds like the reference's last section, same igj content */
html[data-vibe="sky"] .cta-band{max-width:none;border-radius:0;margin:72px 0 0;padding:140px max(24px,calc(50% - 600px)) 170px;border:0;box-shadow:none;color:#0b0c10;
  background:
    linear-gradient(180deg,#f6f9fc 0%,rgba(246,249,252,0) 30%,rgba(246,249,252,0) 72%,#f6f9fc 100%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1600' height='700'%3E%3Cfilter id='c' x='0' y='0'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.0021 .0046' numOctaves='5' seed='4'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 2.1 0 0 0 -0.95'/%3E%3CfeGaussianBlur stdDeviation='2.6'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23c)'/%3E%3C/svg%3E") center/max(1600px,100%) 100% no-repeat,
    linear-gradient(180deg,#cfe9f8,#8bcdf1 55%,#cfe9f8)!important}
html[data-vibe="sky"] .cta-band.gsec::after{left:0;right:0;top:-5px}
html[data-vibe="sky"] .cta-band h2{color:#0b0c10}
html[data-vibe="sky"] .cta-band .muted{color:#33475b}

/* the sky shows straight through the header: no band, no hard edge under it */
html[data-vibe="sky"] .site-header,html[data-vibe="sky"] .site-header.is-pinned{background:transparent!important;border:0!important;box-shadow:none!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important}

/* ===== visual QA pass 2026-10-19 (40 confirmed findings, workflow wf_2b06e799): edges, alignment, contrast ===== */
/* guides sit ON the content edge (.wrap max 1360 with 40px padding; 16px on phones). vw, not %, so every box agrees */
html[data-vibe="sky"]{--gx:max(40px,calc(50vw - 640px));--faint:hsl(208 14% 54%)}
@media (max-width:760px){html[data-vibe="sky"]{--gx:16px}}
html[data-vibe="sky"] body::after{background:
    repeating-linear-gradient(180deg,rgba(70,120,170,.22) 0 6px,transparent 6px 12px) var(--gx) 0/1px 100% no-repeat,
    repeating-linear-gradient(180deg,rgba(70,120,170,.22) 0 6px,transparent 6px 12px) calc(100vw - var(--gx)) 0/1px 100% no-repeat}
/* section dividers span the viewport; dots measured from the edges so they land on the crossings */
html[data-vibe="sky"] .gsec::after{left:calc(50% - 50vw);right:calc(50% - 50vw);
  background:
    radial-gradient(circle,#fff 0 3px,rgba(70,120,170,.45) 3.2px 4.2px,transparent 4.6px) left calc(var(--gx) - 4.5px) top 0/9px 9px no-repeat,
    radial-gradient(circle,#fff 0 3px,rgba(70,120,170,.45) 3.2px 4.2px,transparent 4.6px) right calc(var(--gx) - 4.5px) top 0/9px 9px no-repeat,
    repeating-linear-gradient(90deg,rgba(70,120,170,.28) 0 6px,transparent 6px 12px) 0 4px/100% 1px no-repeat}
html[data-vibe="sky"] .cta-band.gsec::after{left:0;right:0;top:-5px}
html[data-vibe="sky"] main>.gsec:first-child::after{top:16px}

/* navbar: no box on the sky; the links pill keeps a soft white ring (the pinned glass layer still fades in) */
html[data-vibe="sky"] .navpill{background:none;border-color:transparent;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}
html[data-vibe="sky"] .navpill .nav-links{box-shadow:0 0 0 1px rgba(255,255,255,.9),0 4px 14px rgba(30,90,140,.10)}

/* buttons: flat black primary, flat light secondary (no igj chrome / glow) */
html[data-vibe="sky"] .btn:not(.btn-primary){background:#f1f4f7;background-image:none;border-color:transparent;box-shadow:none;color:#0b0c10}
html[data-vibe="sky"] .btn:not(.btn-primary):hover{background:#e8edf2;box-shadow:0 6px 16px rgba(30,90,140,.08)}
html[data-vibe="sky"] .nav .btn:not(.btn-primary),html[data-vibe="sky"] .navpill .btn:not(.btn-primary){background:#fff;box-shadow:0 0 0 1px rgba(70,120,170,.16)}
html[data-vibe="sky"] .btn-primary,html[data-vibe="sky"] .pj-plan:has(input:checked) .pj-pick{background:#0b0c10;background-image:none;border:1px solid #0b0c10;color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 8px 20px rgba(10,11,15,.18)}
html[data-vibe="sky"] .btn-primary:hover{background:#1a1c22;background-image:none;filter:none;box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 10px 24px rgba(10,11,15,.22)}
html[data-vibe="sky"] .btn-primary::before{content:none}
html[data-vibe="sky"] .btn-primary .price-chip{background:rgba(255,255,255,.12);color:#fff;box-shadow:none}

/* board: no box around the list; white cards with a soft blue ring; readable chips */
html[data-vibe="sky"] .jlist{border:0;box-shadow:none;background:none;border-radius:0}
html[data-vibe="sky"] .jrow{background:#fff}
html[data-vibe="sky"] .jrow:not(.jrow-pin){box-shadow:0 0 0 1px rgba(70,120,170,.12),0 1px 2px rgba(30,60,90,.04)!important}
html[data-vibe="sky"] .jrow:not(.jrow-pin):hover{box-shadow:0 0 0 1px rgba(70,120,170,.22),0 8px 22px rgba(30,90,140,.08)!important}
html[data-vibe="sky"] .jrow.jrow-pin,html[data-vibe="sky"] .jrow.jrow-pin:hover{box-shadow:0 0 0 1px rgba(31,142,241,.32),0 6px 18px rgba(31,142,241,.10)!important;background:linear-gradient(180deg,#f3f9ff,#fff)!important}
html[data-vibe="sky"] .panel.filters{background:#fff;border-color:transparent;box-shadow:0 0 0 1px rgba(70,120,170,.12),0 18px 40px rgba(30,60,90,.06)}
html[data-vibe="sky"] .fchip.on{background:#0b0c10;color:#fff;box-shadow:0 4px 12px rgba(10,11,15,.18)}
html[data-vibe="sky"] .fchip.on b{color:#a9d6ff}
html[data-vibe="sky"] .fchip.on .ico{color:#7cc0ff}
html[data-vibe="sky"] .spot{border:0;box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 10px 26px -8px rgba(20,50,80,.28)}
html[data-vibe="sky"] .spot-cta{background:#fff;border:0;box-shadow:0 2px 8px rgba(0,0,0,.25);color:#0b0c10}
html[data-vibe="sky"] .spot:hover .spot-cta,html[data-vibe="sky"] .spot-cta:hover{background:#eef6ff}

/* closing band: pale sky rising into clouds, fading into the page colour at both ends (no seams); guides run through it */
html[data-vibe="sky"] .cta-band{background:
    repeating-linear-gradient(180deg,rgba(70,120,170,.22) 0 6px,transparent 6px 12px) var(--gx) 0/1px 100% no-repeat,
    repeating-linear-gradient(180deg,rgba(70,120,170,.22) 0 6px,transparent 6px 12px) calc(100% - var(--gx)) 0/1px 100% no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1600' height='700'%3E%3Cfilter id='c' x='0' y='0'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.0021 .0046' numOctaves='5' seed='4'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 2.1 0 0 0 -0.95'/%3E%3CfeGaussianBlur stdDeviation='2.6'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23c)'/%3E%3C/svg%3E") center/max(1600px,100%) 100% no-repeat,
    linear-gradient(180deg,#fbfcfd 0%,#e3f2fb 28%,#bfe1f6 60%,#d9eefa 80%,#fbfcfd 100%)!important}

/* footer + FAQ: dashed construction lines, not solid grey rules; FAQ as a white card with corner brackets */
html[data-vibe="sky"] .site-footer{border-top:0;margin-top:0}
html[data-vibe="sky"] .site-footer .footer-bar{border-top:1px dashed rgba(70,120,170,.28)}
html[data-vibe="sky"] .seo-text .faq-list{position:relative;background:#fff;border:0;border-radius:0;box-shadow:0 18px 40px rgba(30,60,90,.08)}
html[data-vibe="sky"] .seo-text .faq-list::before{content:"";position:absolute;inset:-6px;pointer-events:none;--c:#0b0c10;background-repeat:no-repeat;
  background-image:linear-gradient(var(--c),var(--c)),linear-gradient(var(--c),var(--c)),linear-gradient(var(--c),var(--c)),linear-gradient(var(--c),var(--c)),linear-gradient(var(--c),var(--c)),linear-gradient(var(--c),var(--c)),linear-gradient(var(--c),var(--c)),linear-gradient(var(--c),var(--c));
  background-position:0 0,0 0,100% 0,100% 0,0 100%,0 100%,100% 100%,100% 100%;
  background-size:8px 1.5px,1.5px 8px,8px 1.5px,1.5px 8px,8px 1.5px,1.5px 8px,8px 1.5px,1.5px 8px}

/* banner sub line: no orphan word on phones (owner rule); preview switcher stays on screen */
.vibe-switch{flex-wrap:wrap;max-width:calc(100vw - 32px)}

/* ===== owner round 2026-10-19 (late): no dots, logo as a nav pill, light lock-in sky ===== */
/* dividers: dashed line only, no dots; the first one keeps clear of the navbar */
html[data-vibe="sky"] .gsec::after{background:repeating-linear-gradient(90deg,rgba(70,120,170,.26) 0 6px,transparent 6px 12px) 0 4px/100% 1px no-repeat}
html[data-vibe="sky"] main>.gsec:first-child::after{top:22px}
/* logo = same pill as the navbar's pills (height, full rounding), stacked wordmark inside */
html[data-vibe="sky"] .navpill .w3v-mark{height:44px;padding:0 18px;border-radius:999px;align-content:center;font-size:12px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 0 0 1px rgba(255,255,255,.9),0 4px 14px rgba(30,90,140,.14)}
/* scroll lock-in: a bright sky instead of igj's fade to near-black (it turned into dark cloudy blue) */
html[data-vibe="sky"] body::before,
html[data-vibe="sky"] .board .feedtop::before,html[data-vibe="sky"].lock-in .board .feedtop::before{
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1600' height='900'%3E%3Cfilter id='c' x='0' y='0'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.0021 .0046' numOctaves='5' seed='9'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 2.1 0 0 0 -1.05'/%3E%3CfeGaussianBlur stdDeviation='2.6'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23c)'/%3E%3C/svg%3E") center top/max(1600px,100vw) 100vh no-repeat fixed,
    linear-gradient(180deg,#a9d8f5 0%,#cdeafa 38%,#e9f5fd 70%,#f7fbfe 100%) fixed!important}
html[data-vibe="sky"].lock-in{--ground:#e9f5fd}
html[data-vibe="sky"].lock-in body{background:transparent}
/* docked search band: a frosted sky layer from under the navbar to just below the search, fading out softly
   (was a flat white strip with a hard bottom edge). Only while docked. */
html[data-vibe="sky"] .board .feedtop,html[data-vibe="sky"].lock-in .board .feedtop{background:transparent!important;box-shadow:none!important}
html[data-vibe="sky"] .board .feedtop::before{display:none!important}
html[data-vibe="sky"].lock-in .board .feedtop::before{display:block!important;content:"";position:absolute;left:-6px;right:-6px;top:-96px;bottom:-34px;height:auto!important;z-index:-1;pointer-events:none;
  background:linear-gradient(180deg,rgba(222,240,252,.9) 0,rgba(233,245,253,.82) 70%,rgba(233,245,253,0) 100%)!important;
  -webkit-backdrop-filter:blur(12px) saturate(1.15);backdrop-filter:blur(12px) saturate(1.15);
  -webkit-mask-image:linear-gradient(180deg,#000 0,#000 calc(100% - 38px),transparent);mask-image:linear-gradient(180deg,#000 0,#000 calc(100% - 38px),transparent)}
html[data-vibe="sky"].lock-in .board .feedtop{isolation:isolate;z-index:20}

/* scroll: the top sky (scrolls with the page, ends in near-white) fades out while the board is docked,
   so it never lays a white block with a hard edge over the docked sky */
html[data-vibe="sky"]::before{transition:opacity .6s ease}
html[data-vibe="sky"].lock-in::before{opacity:0}
/* side guides sit 24px outside the content so cards, rows and labels never touch them (owner) */
html[data-vibe="sky"]{--gx:max(14px,calc(50vw - 664px))}
@media (max-width:760px){html[data-vibe="sky"]{--gx:6px}}
/* logo strip: dashed like every other divider; the next section's divider is dropped so there is no double line */
html[data-vibe="sky"] .logoband{border-top:1px dashed rgba(70,120,170,.28);border-bottom:1px dashed rgba(70,120,170,.28)}
html[data-vibe="sky"] .seo-text.gsec::after{display:none}
/* docked band: soften its left/right edges too (no vertical seam on the sky) */
html[data-vibe="sky"].lock-in .board .feedtop::before{left:-40px;right:-40px;
  -webkit-mask-image:linear-gradient(180deg,#000 0,#000 calc(100% - 38px),transparent),linear-gradient(90deg,transparent,#000 40px,#000 calc(100% - 40px),transparent);
  -webkit-mask-composite:source-in;mask-image:linear-gradient(180deg,#000 0,#000 calc(100% - 38px),transparent),linear-gradient(90deg,transparent,#000 40px,#000 calc(100% - 40px),transparent);mask-composite:intersect}

/* ===== light Spotlight + light top bars (owner: "lighter to match the vibe") ===== */
/* coin loops are shot on black: invert + multiply turns the black into the card colour, coins stay silver-blue */
html[data-vibe="sky"] .spot .sa video{filter:invert(1) hue-rotate(180deg) saturate(1.2) brightness(1.04);mix-blend-mode:multiply}
/* Spotlight card */
html[data-vibe="sky"] .spot{color:#0b0c10;border:0;
  background:radial-gradient(520px 260px at 82% 50%,rgba(255,255,255,.95),rgba(255,255,255,0) 70%),linear-gradient(135deg,#ffffff 0%,#eaf5fd 55%,#d6ecfa 100%)!important;
  box-shadow:0 0 0 1px rgba(70,120,170,.14),0 18px 40px rgba(30,90,140,.12)!important}
html[data-vibe="sky"] .spot-t{color:#0b0c10}
html[data-vibe="sky"] .spot-c{color:#55708a}
html[data-vibe="sky"] .spot-c b{color:#0b0c10}
html[data-vibe="sky"] .spot-pay{color:#0b0c10}
html[data-vibe="sky"] .spot .tag-dark{background:rgba(255,255,255,.8);color:#33475b;border-color:rgba(70,120,170,.18);box-shadow:none}
html[data-vibe="sky"] .spot-cta{background:#0b0c10;color:#fff;box-shadow:0 8px 20px rgba(10,11,15,.18)}
html[data-vibe="sky"] .spot:hover .spot-cta,html[data-vibe="sky"] .spot-cta:hover{background:#1a1c22}
html[data-vibe="sky"] .spot-bar button{background:rgba(11,12,16,.12)}
html[data-vibe="sky"] .spot-bar i{background:#0b0c10}
html[data-vibe="sky"] .spot .job-logo{box-shadow:0 0 0 1px rgba(70,120,170,.18)}
/* top bars: straight on the sky, dark text, no box, no border */
/* docked band: no backdrop blur (browsers draw the blurred rectangle unmasked = hard clipped edges); an almost-opaque sky gradient hides the rows instead */
html[data-vibe="sky"].lock-in .board .feedtop::before{-webkit-backdrop-filter:none!important;backdrop-filter:none!important;
  background:linear-gradient(180deg,rgba(214,236,251,.97) 0,rgba(226,242,252,.95) 70%,rgba(233,245,253,0) 100%)!important}
/* inverted coin loops: invert alone turns the orange footage blue (no extra hue rotation) */
html[data-vibe="sky"] .spot .sa video{filter:invert(1) saturate(1.15) brightness(1.03)!important;mix-blend-mode:multiply}
/* banner blends its art with the sky (not with an isolated transparent layer, which showed a white box) */
/* banner art: the header is its own layer, so multiply has no sky to blend with; fade the inverted video
   out on every side instead, the leftover white reads as a soft cloud on the sky */
/* footer bar: line runs edge to edge like every divider, text gets air below it, bar sits higher */
html[data-vibe="sky"] .site-footer .footer-bar{position:relative;border-top:0!important;margin-top:36px;padding-top:24px;padding-bottom:28px}
html[data-vibe="sky"] .site-footer .footer-bar::before{content:"";position:absolute;top:0;left:calc(50% - 50vw);right:calc(50% - 50vw);height:1px;
  background:repeating-linear-gradient(90deg,rgba(70,120,170,.26) 0 6px,transparent 6px 12px)}
/* stats strip: solid white bar (owner) */
/* hiring-partner banner: its own light surface so it separates from the sky (owner) */
/* Telegram button keeps its igj blue */
html[data-vibe="sky"] .btn.btn-telegram{color:#fff;background:linear-gradient(180deg,#3cb6ea,#1f98d6);border-color:rgba(0,0,0,.08);box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 6px 16px rgba(34,158,217,.25)}
html[data-vibe="sky"] .btn.btn-telegram:hover{background:linear-gradient(180deg,#45bdf0,#2299d8)}
/* FAQ: plain rounded white card like the board cards (corner brackets removed, owner) */
html[data-vibe="sky"] .seo-text .faq-list::before{content:none!important;display:none!important}
html[data-vibe="sky"] .seo-text .faq-list{border-radius:22px;background:#fff;box-shadow:0 0 0 1px rgba(70,120,170,.12),0 18px 40px rgba(30,60,90,.06)}

/* ===== buttons with glow (owner 2026-10-19; technique from web3.career's animated-gradient CTA, our sky colours) ===== */
@property --bang{syntax:"<angle>";inherits:false;initial-value:0deg}
@keyframes w3-bspin{to{--bang:360deg}}
@keyframes w3-bflow{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
/* primary: black pill, drifting blue→cyan gradient ring, soft sky glow */
html[data-vibe="sky"] .btn-primary,html[data-vibe="sky"] .spot-cta{position:relative;isolation:isolate;border:1.5px solid transparent!important;color:#fff!important;
  background:linear-gradient(#0b0c10,#0b0c10) padding-box,conic-gradient(from var(--bang),#1f8ef1,#7ad3ff,#ffffff,#4aa8f5,#1f8ef1) border-box!important;
  box-shadow:0 0 0 1px rgba(31,142,241,.12),0 8px 22px rgba(31,142,241,.28),0 0 28px rgba(122,211,255,.22)!important;animation:w3-bspin 5s linear infinite}
html[data-vibe="sky"] .btn-primary:hover,html[data-vibe="sky"] .spot-cta:hover{background:linear-gradient(#15171d,#15171d) padding-box,conic-gradient(from var(--bang),#1f8ef1,#7ad3ff,#ffffff,#4aa8f5,#1f8ef1) border-box!important;
  box-shadow:0 0 0 1px rgba(31,142,241,.2),0 10px 28px rgba(31,142,241,.38),0 0 40px rgba(122,211,255,.35)!important;transform:translateY(-1px)}
html[data-vibe="sky"] .btn-primary .price-chip{background:linear-gradient(90deg,#1f8ef1,#7ad3ff,#1f8ef1);background-size:300% 100%;color:#06121f;animation:w3-bflow 6s ease infinite}
/* white secondary buttons: clean, glow on hover */
html[data-vibe="sky"] .btn:not(.btn-primary):not(.btn-telegram){transition:box-shadow .25s,transform .25s}
html[data-vibe="sky"] .btn:not(.btn-primary):not(.btn-telegram):hover{box-shadow:0 0 0 1px rgba(31,142,241,.28),0 8px 22px rgba(31,142,241,.18)!important;transform:translateY(-1px)}
/* Telegram: always its own blue with white text, also inside the navbar (was white on white) */
html[data-vibe="sky"] .navpill .btn.btn-telegram,html[data-vibe="sky"] .btn.btn-telegram{color:#fff!important;background:linear-gradient(180deg,#3cb6ea,#1f98d6)!important;border-color:transparent!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 6px 18px rgba(34,158,217,.32)!important}
html[data-vibe="sky"] .btn.btn-telegram:hover{box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 8px 26px rgba(34,158,217,.45)!important;transform:translateY(-1px)}
@media (prefers-reduced-motion:reduce){html[data-vibe="sky"] .btn-primary,html[data-vibe="sky"] .spot-cta,html[data-vibe="sky"] .btn-primary .price-chip{animation:none}}
/* inner pages: the page header sits on the sky, no solid band */
html[data-vibe="sky"] .page-hero{background:transparent!important;border:0!important;box-shadow:none!important}
/* docked band spans the whole viewport (fixed; .feedtop has no transform unless pulling), so it has no side edges at all */
html[data-vibe="sky"].lock-in .board .feedtop::before{position:fixed!important;left:0!important;right:0!important;top:0!important;bottom:auto!important;height:192px!important;
  -webkit-mask-image:linear-gradient(180deg,#000 0,#000 150px,transparent 192px)!important;mask-image:linear-gradient(180deg,#000 0,#000 150px,transparent 192px)!important;
  -webkit-mask-composite:source-over;mask-composite:add}
/* w3v tile art (glass blocks / glass pin): larger, fully inside the tile, gentle float */
html[data-vibe="sky"] .toprail .tile .art{width:96px!important;height:auto;right:10px!important;bottom:4px!important;filter:drop-shadow(0 10px 18px rgba(30,90,140,.18));animation:w3-float 7s ease-in-out infinite}
html[data-vibe="sky"] .toprail .tile .a-cards{animation-delay:-3s}
@keyframes w3-float{50%{transform:translateY(-6px)}}
@media (prefers-reduced-motion:reduce){html[data-vibe="sky"] .toprail .tile .art{animation:none}}
html[data-vibe="sky"] .toprail .tile .a-cards{bottom:-8px!important;right:4px!important}
/* Spotlight uses the w3v glass-cube loop (already light): no inversion, soft fade into the card */
html[data-vibe="sky"] .spot .sa video{filter:none!important;mix-blend-mode:multiply;opacity:.95}

/* ===================================================================================
   REFERENCE COPY (owner 2026-10-19: "literally copy buttons and bg, keep our structure").
   Values sampled from the reference video: sky #46c1e8 → white by mid-hero, page #fcfcfe,
   ink #0d1010, primary #0d1010 + blue-violet glow, secondary #e7edee, grey dashed guides,
   small radii (no pills), crisp white cards. This block is last and wins.
   =================================================================================== */
html[data-vibe="sky"]{--nh:220;--ns:6%;--ink:#0d1010;--body:#3a4041;--muted:#62696b;--faint:#8b9294;
  --rr-btn:10px;--rr-card:14px;--rr-sm:8px;--ref-line:#d9dfe2;--ref-glow:0 10px 24px -6px rgba(88,110,240,.45),0 4px 10px -4px rgba(88,110,240,.30)}
html[data-vibe="sky"],html[data-vibe="sky"] body{background:#fcfcfe}
/* sky: vivid at the very top, white before the board */
html[data-vibe="sky"]::before{background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1600' height='820'%3E%3Cfilter id='c' x='0' y='0'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.0021 .0046' numOctaves='5' seed='11'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 2.1 0 0 0 -0.95'/%3E%3CfeGaussianBlur stdDeviation='2.6'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23c)'/%3E%3C/svg%3E") center top/max(1600px,100%) 820px no-repeat,
    linear-gradient(180deg,#46c1e8 0%,#7fd1ef 14%,#c1e8f6 30%,#effafb 46%,#fcfcfe 58%)!important}
/* scroll/dock: plain white page, white glass band (no blue wash) */
html[data-vibe="sky"] body::before,html[data-vibe="sky"].lock-in body::before{background:#fcfcfe!important}
html[data-vibe="sky"].lock-in{--ground:#fcfcfe}
html[data-vibe="sky"].lock-in .board .feedtop::before{background:linear-gradient(180deg,rgba(252,252,254,.96) 0,rgba(252,252,254,.94) 150px,rgba(252,252,254,0) 192px)!important}
/* guides + dividers: neutral grey dashes */
html[data-vibe="sky"] body::after{background:
    repeating-linear-gradient(180deg,var(--ref-line) 0 6px,transparent 6px 12px) var(--gx) 0/1px 100% no-repeat,
    repeating-linear-gradient(180deg,var(--ref-line) 0 6px,transparent 6px 12px) calc(100vw - var(--gx)) 0/1px 100% no-repeat}
html[data-vibe="sky"] .gsec::after,html[data-vibe="sky"] .site-footer .footer-bar::before{background:repeating-linear-gradient(90deg,var(--ref-line) 0 6px,transparent 6px 12px) 0 4px/100% 1px no-repeat!important}
html[data-vibe="sky"] .logoband{border-top:1px dashed var(--ref-line)!important;border-bottom:1px dashed var(--ref-line)!important}
html[data-vibe="sky"] .cta-band{background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1600' height='700'%3E%3Cfilter id='c' x='0' y='0'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.0021 .0046' numOctaves='5' seed='4'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 2.1 0 0 0 -0.95'/%3E%3CfeGaussianBlur stdDeviation='2.6'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23c)'/%3E%3C/svg%3E") center/max(1600px,100%) 100% no-repeat,
    linear-gradient(180deg,#fcfcfe 0%,#c1e8f6 34%,#7fd1ef 62%,#c1e8f6 84%,#fcfcfe 100%)!important}

/* ---- buttons: small radius, solid, glow under the black one ---- */
html[data-vibe="sky"] .btn{border-radius:var(--rr-btn)!important;animation:none!important;transform:none}
html[data-vibe="sky"] .btn-primary,html[data-vibe="sky"] .spot-cta{background:#0d1010!important;border:1px solid #0d1010!important;color:#fff!important;box-shadow:var(--ref-glow)!important}
html[data-vibe="sky"] .btn-primary:hover,html[data-vibe="sky"] .spot-cta:hover{background:#1c2020!important;box-shadow:0 14px 30px -6px rgba(88,110,240,.55),0 4px 10px -4px rgba(88,110,240,.35)!important;transform:translateY(-1px)}
html[data-vibe="sky"] .btn-primary .price-chip{background:rgba(255,255,255,.14)!important;color:#fff!important;animation:none!important;border-radius:6px}
html[data-vibe="sky"] .btn:not(.btn-primary):not(.btn-telegram):not(.spot-cta):not(.gate-cta){background:#e7edee!important;border:1px solid transparent!important;color:#0d1010!important;box-shadow:none!important}
html[data-vibe="sky"] .btn:not(.btn-primary):not(.btn-telegram):not(.spot-cta):not(.gate-cta):hover{background:#dde4e6!important;transform:none}
html[data-vibe="sky"] .navpill .btn:not(.btn-primary):not(.btn-telegram){background:rgba(255,255,255,.9)!important;border-color:rgba(255,255,255,.95)!important}
html[data-vibe="sky"] .btn.btn-telegram{border-radius:var(--rr-btn)!important}

/* ---- navbar: framed segmented control, raised white active tab; logo = black rounded rect ---- */
html[data-vibe="sky"] .navpill .nav-links{background:rgba(255,255,255,.28)!important;border:1px solid rgba(255,255,255,.75)!important;border-radius:12px!important;padding:4px!important;box-shadow:none!important}
html[data-vibe="sky"] .navpill .nav-links a{border-radius:8px!important;color:#0d1010!important}
html[data-vibe="sky"] .navpill .nav-links a.on,html[data-vibe="sky"] .navpill .nav-links a[aria-current]{background:#fff!important;color:#0d1010!important;box-shadow:0 1px 3px rgba(13,16,16,.14)!important}
html[data-vibe="sky"] .navpill .w3v-mark{border-radius:var(--rr-btn)!important;box-shadow:var(--ref-glow)!important}

/* ---- surfaces: crisp white, hairline border, soft neutral shadow, small radii ---- */
html[data-vibe="sky"] .toprail .tile{background:#fff!important;border:1px solid #eceff1!important;border-radius:var(--rr-card)!important;box-shadow:0 18px 40px -12px rgba(15,23,42,.12)!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
html[data-vibe="sky"] .feedsearch{background:#fff!important;border:1px solid #e6e9eb!important;border-radius:12px!important;box-shadow:0 10px 30px -12px rgba(15,23,42,.14)!important}
html[data-vibe="sky"] .jrow{border-radius:12px!important;background:#fff!important}
html[data-vibe="sky"] .jrow:not(.jrow-pin){box-shadow:0 0 0 1px #eceff1,0 1px 2px rgba(15,23,42,.04)!important}
html[data-vibe="sky"] .jrow:not(.jrow-pin):hover{box-shadow:0 0 0 1px #dfe3e6,0 10px 24px -10px rgba(15,23,42,.14)!important}
html[data-vibe="sky"] .jrow.jrow-pin,html[data-vibe="sky"] .jrow.jrow-pin:hover{background:#fff!important;box-shadow:0 0 0 1px #0d1010,0 8px 20px -8px rgba(88,110,240,.35)!important}
html[data-vibe="sky"] .panel.filters{background:#fff!important;border:1px solid #eceff1!important;border-radius:var(--rr-card)!important;box-shadow:0 18px 40px -16px rgba(15,23,42,.10)!important}
html[data-vibe="sky"] .fchip{border-radius:var(--rr-sm)!important;background:#fff!important;border:1px solid #e3e7e9!important;color:#0d1010!important}
html[data-vibe="sky"] .fchip.on{background:#0d1010!important;border-color:#0d1010!important;color:#fff!important}
html[data-vibe="sky"] .tag,html[data-vibe="sky"] .jr-tags .tag{border-radius:6px!important}
html[data-vibe="sky"] .spot{border-radius:16px!important;background:#fff!important;box-shadow:0 0 0 1px #eceff1,0 24px 50px -20px rgba(15,23,42,.18)!important}
html[data-vibe="sky"] .seo-text .faq-list{border-radius:var(--rr-card)!important;box-shadow:0 0 0 1px #eceff1,0 18px 40px -16px rgba(15,23,42,.10)!important}
html[data-vibe="sky"] .logo-pill,html[data-vibe="sky"] .w3v-mark{border-radius:var(--rr-btn)}
/* navbar: every piece shares the logo's shape (44px tall, 10px corners) */
html[data-vibe="sky"] .navpill .w3v-mark{height:44px!important;border-radius:10px!important}
@media(min-width:1101px){html[data-vibe="sky"] .navpill .nav-links{height:44px!important;box-sizing:border-box;border-radius:10px!important;display:flex;align-items:center}} /* desktop only: below 1100px the base hides it for the pill row + Post a job */
html[data-vibe="sky"] .navpill .nav-links a{height:34px;display:inline-flex;align-items:center;border-radius:7px!important}
html[data-vibe="sky"] .navpill .btn,html[data-vibe="sky"] .navpill .nav-me{height:44px!important;border-radius:10px!important}
html[data-vibe="sky"] .navpill::before{border-radius:14px!important}

/* ===== real sky + grass plates (Higgsfield gpt_image_2_5; owner: clouds up top, grass at the bottom) ===== */
html[data-vibe="sky"]{--sky-img:url("/static/img/w3v-sky.webp");--grass-img:url("/static/img/w3v-grass.webp")}
/* hero: photographic sky, fading into the white page before the board */
html[data-vibe="sky"]::before{background:
    linear-gradient(180deg,rgba(252,252,254,0) 0%,rgba(252,252,254,0) 52%,#fcfcfe 92%),
    var(--sky-img) center top/max(1600px,100vw) auto no-repeat,
    #46c1e8!important}
/* closing band: meadow */
html[data-vibe="sky"] .cta-band{background:
    linear-gradient(180deg,#fcfcfe 0%,rgba(252,252,254,0) 26%),
    var(--grass-img) center bottom/max(1600px,100%) auto no-repeat,
    #8fd6f1!important;padding-bottom:220px!important}
/* docked: clouds pinned to the top of the screen, grass to the bottom, white in between */
html[data-vibe="sky"] body::before,html[data-vibe="sky"].lock-in body::before{background:
    linear-gradient(180deg,rgba(252,252,254,0) 0,rgba(252,252,254,0) 22vh,#fcfcfe 46vh,#fcfcfe 62vh,rgba(252,252,254,0) 80vh),
    var(--sky-img) center top/max(1600px,100vw) auto no-repeat,
    var(--grass-img) center bottom/max(1600px,100vw) auto no-repeat,
    #fcfcfe!important}
/* the band behind the docked search is the same sky, so rows slide under clouds (no visible strip) */
html[data-vibe="sky"].lock-in .board .feedtop::before{background:var(--sky-img) center top/max(1600px,100vw) auto no-repeat fixed,#46c1e8!important}
/* docked: each plate fades itself (fade layers sized exactly like the images), so sky→white→grass is seamless at any screen size */
html[data-vibe="sky"]{--plate-w:max(1600px,100vw);--sky-h:calc(var(--plate-w) * .4286);--grass-h:calc(var(--plate-w) * .4286)}
html[data-vibe="sky"] body::before,html[data-vibe="sky"].lock-in body::before{background:
    linear-gradient(180deg,rgba(252,252,254,0) 35%,#fcfcfe 92%) center top/var(--plate-w) var(--sky-h) no-repeat,
    var(--sky-img) center top/var(--plate-w) var(--sky-h) no-repeat,
    linear-gradient(0deg,rgba(252,252,254,0) 38%,#fcfcfe 78%) center bottom/var(--plate-w) var(--grass-h) no-repeat,
    var(--grass-img) center bottom/var(--plate-w) var(--grass-h) no-repeat,
    #fcfcfe!important}
/* docked: clouds and grass on SEPARATE fixed layers, each masked to transparent (not to white), page white between */
html[data-vibe="sky"]::after{content:""!important;display:block!important;position:fixed;left:0;right:0;top:0;height:var(--sky-h);z-index:0;pointer-events:none;
  background:var(--sky-img) center top/var(--plate-w) var(--sky-h) no-repeat;opacity:0;transition:opacity .6s ease;
  -webkit-mask-image:linear-gradient(180deg,#000 30%,transparent 92%);mask-image:linear-gradient(180deg,#000 30%,transparent 92%)}
html[data-vibe="sky"].lock-in::after{opacity:1}
html[data-vibe="sky"] body::before,html[data-vibe="sky"].lock-in body::before{background:var(--grass-img) center bottom/var(--plate-w) var(--grass-h) no-repeat,transparent!important;
  -webkit-mask-image:linear-gradient(0deg,#000 0,#000 calc(var(--grass-h) * .45),transparent calc(var(--grass-h) * .95));mask-image:linear-gradient(0deg,#000 0,#000 calc(var(--grass-h) * .45),transparent calc(var(--grass-h) * .95))}
@media (prefers-reduced-motion:reduce){html[data-vibe="sky"]::after{transition:none}}
/* docked v3: ONE sky = the hero clouds, full screen; grass image contributes only the grass along the bottom */
html[data-vibe="sky"]::after{height:100vh!important;background:var(--sky-img) center top/cover no-repeat,#46c1e8!important;
  -webkit-mask-image:none!important;mask-image:none!important}
html[data-vibe="sky"] body::before,html[data-vibe="sky"].lock-in body::before{background:var(--grass-img) center bottom/var(--plate-w) var(--grass-h) no-repeat,transparent!important;
  -webkit-mask-image:linear-gradient(0deg,#000 0,#000 calc(var(--grass-h) * .10),transparent calc(var(--grass-h) * .24))!important;
  mask-image:linear-gradient(0deg,#000 0,#000 calc(var(--grass-h) * .10),transparent calc(var(--grass-h) * .24))!important;z-index:1}
html[data-vibe="sky"].lock-in .board .feedtop::before{background:var(--sky-img) center top/cover no-repeat fixed,#46c1e8!important}
/* docked band ends exactly at the search bar's bottom edge: cards slide under the search, never tinted */
html[data-vibe="sky"].lock-in .board .feedtop::before{height:150px!important;
  -webkit-mask-image:linear-gradient(180deg,#000 0,#000 146px,transparent 150px)!important;mask-image:linear-gradient(180deg,#000 0,#000 146px,transparent 150px)!important}
/* filters stay on top in the docked state (above the band and the scrolling rows) */
html[data-vibe="sky"].lock-in .board .filters,html[data-vibe="sky"].lock-in .board .panel.filters{position:sticky;z-index:30}
/* docked v4: clouds at the hero's own size (no upscaling = no blur); their white haze flows into the page and the grass strip */
html[data-vibe="sky"]::after{height:100vh!important;background:
    linear-gradient(180deg,rgba(252,252,254,0) calc(var(--sky-h) * .55),#fcfcfe var(--sky-h)) center top/100% 100% no-repeat,
    var(--sky-img) center top/var(--plate-w) var(--sky-h) no-repeat,#fcfcfe!important}
html[data-vibe="sky"].lock-in .board .feedtop::before{background:var(--sky-img) center top/var(--plate-w) var(--sky-h) no-repeat fixed,#46c1e8!important}
/* the docked cloud layer reuses html::after, which still carried the old haze blur + drift: remove both */
html[data-vibe="sky"]::after{filter:none!important;animation:none!important;transform:none!important;left:0!important;right:0!important;bottom:auto!important}
/* docking is one smooth crossfade: no entrance ring/sweep/panel jump, the search band fades in */
html[data-vibe="sky"].lock-enter .feedsearch,html[data-vibe="sky"].lock-enter .feedsearch::after,html[data-vibe="sky"].lock-enter .board .filters{animation:none!important}
html[data-vibe="sky"] .board .feedtop::before{display:block!important;content:"";position:fixed!important;left:0!important;right:0!important;top:0!important;bottom:auto!important;height:150px!important;z-index:-1;pointer-events:none;
  background:var(--sky-img) center top/var(--plate-w) var(--sky-h) no-repeat fixed,#46c1e8!important;
  -webkit-mask-image:linear-gradient(180deg,#000 0,#000 146px,transparent 150px)!important;mask-image:linear-gradient(180deg,#000 0,#000 146px,transparent 150px)!important;
  opacity:0;transition:opacity .6s ease!important}
html[data-vibe="sky"].lock-in .board .feedtop::before{opacity:1}
html[data-vibe="sky"] .feedsearch,html[data-vibe="sky"] .navpill,html[data-vibe="sky"] .navpill::before,html[data-vibe="sky"] .board .filters{transition:box-shadow .6s ease,border-color .6s ease,background-color .6s ease,opacity .6s ease,transform .6s ease!important}

/* ===== docked background = ONE image (clouds → white → grass), owner 2026-10-19. Same image, same
   sizing for the full-screen layer and the strip behind the search, so nothing can misalign. ===== */
html[data-vibe="sky"]{--docked-img:url("/static/img/w3v-docked.webp")}
html[data-vibe="sky"]::after{top:0!important;height:100vh!important;-webkit-mask-image:none!important;mask-image:none!important;
  background:var(--docked-img) center/cover no-repeat,#fcfcfe!important}
html[data-vibe="sky"] body::before,html[data-vibe="sky"].lock-in body::before{background:none!important;-webkit-mask-image:none!important;mask-image:none!important}
html[data-vibe="sky"] .board .feedtop::before,html[data-vibe="sky"].lock-in .board .feedtop::before{background:var(--docked-img) center/cover no-repeat fixed,#46c1e8!important}
/* preview: alternative docked meadow (W3V_DOCKED=2) */
html[data-vibe="sky"][data-dk="2"]{--docked-img:url("/static/img/w3v-docked-2.webp")}
/* rows: igj's 6px gap is two transparent 3px borders; keep the white fill inside them (padding-box) and the ring inset */
html[data-vibe="sky"] .jrow{background:#fff padding-box!important;background-clip:padding-box!important;border-top:3px solid transparent!important;border-bottom:3px solid transparent!important}
html[data-vibe="sky"] .jrow:not(.jrow-pin){box-shadow:inset 0 0 0 1px #e6e9eb,inset 0 2px 0 #fff!important}
html[data-vibe="sky"] .jrow:not(.jrow-pin):hover{box-shadow:inset 0 0 0 1px #d5dade,inset 0 2px 0 #fff!important}
html[data-vibe="sky"] .jrow.jrow-pin,html[data-vibe="sky"] .jrow.jrow-pin:hover{box-shadow:inset 0 0 0 1.5px #0d1010!important;background:#fff padding-box!important}
/* Spotlight loop crisp (owner 2026-10-20: "blurry, can't see anything"): igj's radial mask faded everything
   beyond the centre and the .95 multiply washed the rest. Keep only a soft left/top/bottom edge into the card. */
html[data-vibe="sky"] .spot .sa video{opacity:1!important;filter:contrast(1.14) saturate(1.12)!important;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 34%,#000 100%),linear-gradient(180deg,transparent 0,#000 18%,#000 82%,transparent 100%)!important;
  mask-image:linear-gradient(90deg,transparent 0,#000 34%,#000 100%),linear-gradient(180deg,transparent 0,#000 18%,#000 82%,transparent 100%)!important;
  -webkit-mask-composite:source-in;mask-composite:intersect}
/* Spotlight loop: video back (owner 2026-10-20 wants a real loop), crisp, fading into the card on ALL four
   sides so the asset's own sky never shows a hard edge or a corner wedge at the card's rounded corner */
html[data-vibe="sky"] .spot .sa video{display:block!important;opacity:1!important;mix-blend-mode:normal!important;filter:none!important;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 30%,#000 86%,transparent 100%),linear-gradient(180deg,transparent 0,#000 24%,#000 76%,transparent 100%)!important;
  mask-image:linear-gradient(90deg,transparent 0,#000 30%,#000 86%,transparent 100%),linear-gradient(180deg,transparent 0,#000 24%,#000 76%,transparent 100%)!important;
  -webkit-mask-composite:source-in;mask-composite:intersect}
html[data-vibe="sky"] .spot .sa.sa-coins{right:-10px!important}
/* navbar dead-centre between the banner and the first divider (owner 2026-10-20; was 6px high) */
@media(min-width:861px){html[data-vibe="sky"] .navpill{margin-top:20px!important}html[data-vibe="sky"] main>.gsec:first-child::after{top:16px}}
/* Spotlight rotation: no crossfade overlap (owner 2026-10-20 saw two titles ghosting) — outgoing slide leaves at once,
   incoming fades in */
html[data-vibe="sky"] .spot-slide:not(.is-on){transition:opacity 0s,visibility 0s!important}
html[data-vibe="sky"] .spot-slide.is-on{transition:opacity .3s ease!important}
/* navbar box flush with the search bar and cards below (owner 2026-10-20): the column is 224..1504, cards start 4px in */
@media(min-width:861px){html[data-vibe="sky"] .navpill{margin-left:4px!important}}
/* top bands on the sky palette (owner 2026-10-20: igj's grey/black + coin loop "doesn't match our vibe"):
   deep navy night-sky, glass cubes instead of coins. Still dark and contrasty as the owner asked earlier. */
html[data-vibe="sky"] .topstrip{background:#07122a!important;color:#9fb4d6!important}
html[data-vibe="sky"] .takeover{background:radial-gradient(60% 170% at 80% 50%,rgba(70,193,232,.28),transparent 62%),linear-gradient(180deg,#0e2246,#07122a)!important}
html[data-vibe="sky"] .takeover .to-art{display:none!important}
html[data-vibe="sky"] .takeover::after{content:"";position:absolute;right:120px;top:50%;width:560px;height:100%;transform:translateY(-50%);z-index:-1;pointer-events:none;
  background:url("/static/img/w3v-drift-still.webp") center/cover no-repeat;mix-blend-mode:screen;opacity:.55;
  -webkit-mask-image:radial-gradient(ellipse 50% 60% at 50% 50%,#000 40%,transparent 100%);mask-image:radial-gradient(ellipse 50% 60% at 50% 50%,#000 40%,transparent 100%)}
html[data-vibe="sky"] .takeover .to-cta{background:#fff!important;color:#0d1010!important}
/* hero fade driven by the docked class, not Chrome's view-timeline (owner 2026-10-20: hero stayed blurred after
   leaving the docked state — the scroll-driven animation goes stale after the programmatic glide). Keep LAST. */
html[data-vibe="sky"] .con-head{animation:none!important;will-change:opacity,filter,transform}  /* driven by the hero-fade script in home.js */
/* docked: the dashed guides stay visible up to the top of the screen (owner 2026-10-20); the docked band behind the
   search used to paint over them. Vertical guides at the column edges never touch cards, so lifting them is safe. */
html[data-vibe="sky"].lock-in body::after{position:fixed;top:0;bottom:0;height:auto;z-index:25}
/* top bands v2 (owner 2026-10-20 "fix the strip up top"): dark where the text is, opening into the real sky on the
   right; no generated art (owner: the cube loop is "out of touch with reality"). */
html[data-vibe="sky"] .topstrip{background:#081633!important;color:#a9bddc!important;border-bottom:1px solid rgba(122,211,255,.14)}
html[data-vibe="sky"] .takeover{background:
    linear-gradient(90deg,#081633 0%,#081633 36%,rgba(8,22,51,.8) 50%,rgba(8,22,51,.2) 70%,rgba(8,22,51,0) 84%),
    var(--sky-img) center 35%/cover no-repeat,#2a8fd0!important}
html[data-vibe="sky"] .takeover::after{content:none!important}
html[data-vibe="sky"] .takeover .to-art{display:none!important}
html[data-vibe="sky"] .takeover .to-cta{background:#0d1010!important;color:#fff!important;border:1px solid rgba(255,255,255,.2)!important;box-shadow:0 10px 24px -6px rgba(8,22,51,.5)!important}
/* inner pages (no board), owner 2026-10-20: plain white up top so information reads easily, grass at the bottom of the
   content (above the footer, so footer text stays on white). The home page keeps the full sky. */
html[data-vibe="sky"]:not(:has(#home-live))::before{display:none!important}
html[data-vibe="sky"]:not(:has(#home-live)) .navpill .nav-links{background:#f1f4f6!important;border-color:#e3e8eb!important}
/* pinned/docked: navbar sits higher so it clears the docked search (owner 2026-10-20 "too close to search");
   the 20px centring margin is for the top of the page only */
@media(min-width:861px){html[data-vibe="sky"] .site-header.is-pinned .navpill{transform:translateY(-12px)!important}}
/* sky a touch calmer (owner 2026-10-20 "hurts eyes"): same dim on every sky layer so the docked strip behind the search
   still matches the full-screen layer pixel for pixel */
html[data-vibe="sky"]{--sky-dim:brightness(.9) saturate(.84)}
html[data-vibe="sky"]::after,
html[data-vibe="sky"] .board .feedtop::before,html[data-vibe="sky"].lock-in .board .feedtop::before{filter:var(--sky-dim)!important}
/* hero plate fades into the white page: no filter there (it turned the white end grey = hard edge); a tint that is
   gone before the white instead */
html[data-vibe="sky"]::before{filter:none!important;background:
    linear-gradient(180deg,rgba(14,40,70,.13) 0%,rgba(14,40,70,.10) 40%,rgba(14,40,70,0) 80%),
    linear-gradient(180deg,rgba(252,252,254,0) 0%,rgba(252,252,254,0) 52%,#fcfcfe 92%),
    var(--sky-img) center top/max(1600px,100vw) auto no-repeat,
    #46c1e8!important}
html[data-vibe="sky"]::before{-webkit-mask-image:linear-gradient(180deg,#000 0,#000 55%,transparent 96%)!important;mask-image:linear-gradient(180deg,#000 0,#000 55%,transparent 96%)!important}
/* no crossfades until the page has loaded (owner 2026-10-20: refresh "renders in blocks") */
html[data-vibe="sky"]:not(.w3-ready)::after,html[data-vibe="sky"]:not(.w3-ready)::before,
html[data-vibe="sky"]:not(.w3-ready) .board .feedtop::before,html[data-vibe="sky"]:not(.w3-ready) .feedsearch,
html[data-vibe="sky"]:not(.w3-ready) .navpill,html[data-vibe="sky"]:not(.w3-ready) .navpill::before,
html[data-vibe="sky"]:not(.w3-ready) .board .filters{transition:none!important}
/* banner = one contrasty strip, no clouds (owner 2026-10-20): solid navy end to end, a faint sky-blue glow on the right
   for depth, white CTA */
html[data-vibe="sky"] .takeover{background:radial-gradient(40% 180% at 85% 50%,rgba(70,193,232,.22),transparent 70%),linear-gradient(180deg,#0b1d40,#081633)!important}
html[data-vibe="sky"] .takeover .to-cta{background:#fff!important;color:#0d1010!important;border:0!important;box-shadow:0 10px 24px -8px rgba(0,0,0,.45)!important}
/* banner: same strip, colour runs dark navy -> bright sky blue left to right (owner 2026-10-20), no clouds */
html[data-vibe="sky"] .takeover{background:linear-gradient(90deg,#081633 0%,#0a2350 30%,#0f4a9a 58%,#1f8ef1 82%,#46c1e8 100%)!important}
/* banner gradient capped well below the sky's brightness so the strip always reads darker than the page beneath */
html[data-vibe="sky"] .takeover{background:linear-gradient(90deg,#060f24 0%,#081a3d 30%,#0c2f66 60%,#124590 85%,#1752a6 100%)!important}
/* horizontal dividers stop at the vertical guides on both sides (owner 2026-10-20 "cropped both sides") */
html[data-vibe="sky"] .gsec::after{left:calc(50% - 50vw + var(--gx))!important;right:calc(50% - 50vw + var(--gx))!important}
html[data-vibe="sky"] .cta-band.gsec::after{left:var(--gx)!important;right:var(--gx)!important}
/* grass: one strip directly ABOVE the footer on every page (owner 2026-10-20); the closing "Hiring?/Looking for" band
   has no grass; the footer itself stays on white */
html[data-vibe="sky"] .cta-band{background:transparent!important;padding-bottom:64px!important}
html[data-vibe="sky"] .site-footer::before{content:"";display:block;height:220px;margin-bottom:8px;pointer-events:none;background:
    linear-gradient(180deg,#fcfcfe 0%,rgba(252,252,254,0) 55%) center bottom/var(--plate-w) 220px no-repeat,
    var(--grass-img) center bottom/var(--plate-w) auto no-repeat}
html[data-vibe="sky"] .site-footer{background:#fcfcfe!important}
html[data-vibe="sky"] .site-footer{padding-top:0!important}html[data-vibe="sky"] .site-footer::before{margin-bottom:44px}
/* top of page sits in the grid (owner 2026-10-20): no full-width dark bands, the dashed guides run to the very top.
   Stats line = dark text on the sky; hiring partner = white card on the navbar's exact edges (228..1504 at 1728)
   with its 14px corners. Card 80 + margins 12/10 = the old 102px, so the pinned-header offset is unchanged. */
html[data-vibe="sky"] .topstrip{background:transparent!important;color:#2b3a47!important;border:0!important}
html[data-vibe="sky"] .topstrip b,html[data-vibe="sky"] .topstrip strong{color:#0d1010!important}
html[data-vibe="sky"] .takeover{background:transparent!important;color:#0d1010!important;overflow:visible!important}
html[data-vibe="sky"] .takeover .to-in{box-sizing:border-box;height:80px!important;width:auto!important;max-width:none!important;
  margin:12px max(44px,calc(50% - 636px)) 10px max(44px,calc(50% - 636px))!important;padding:0 12px 0 12px!important;
  background:#fff;border-radius:14px;box-shadow:0 0 0 1px #e6e9eb,0 10px 28px -14px rgba(15,23,42,.22)}
html[data-vibe="sky"] .takeover .to-h{color:#0d1010!important}
html[data-vibe="sky"] .takeover .to-k{color:#1f8ef1!important}
html[data-vibe="sky"] .takeover .to-s{color:#62696b!important}
html[data-vibe="sky"] .takeover .to-logo{box-shadow:0 0 0 1px #e6e9eb,0 4px 12px -4px rgba(15,23,42,.18)!important;margin-left:0!important}
html[data-vibe="sky"] .takeover .to-cta{background:#0d1010!important;color:#fff!important;border:0!important;margin-right:0!important;box-shadow:var(--ref-glow)!important}
/* top stack on one rhythm (owner 2026-10-20 "top should be like bottom"): 11px = the Spotlight-to-first-row gap,
   between stats line, partner card and navbar. Banner keeps its 102px (11 + 80 + 11) so the pinned offset holds;
   padding not margins (margins collapsed out of the banner and pushed the page down 12px). Card edges = the visible
   navbar pieces (logo left .. Post-a-job right). */
html[data-vibe="sky"] .takeover{height:102px!important;padding:11px 0!important;box-sizing:border-box!important}
html[data-vibe="sky"] .takeover .to-in{margin:0 max(55px,calc(50% - 625px)) 0 max(55px,calc(50% - 631px))!important;height:80px!important}
@media(min-width:861px){
  html[data-vibe="sky"] .navpill{margin-top:-9px!important}
  html[data-vibe="sky"] .site-header.is-pinned .navpill{transform:translateY(18px)!important}
}
html[data-vibe="sky"] .topstrip,html[data-vibe="sky"] .topstrip .ts-i{color:#1d3347!important}
/* partner card on the navbar's own centred box (robust at every width): .to-in stays a normal .wrap, the white card is
   drawn behind it, inset to the visible navbar pieces (wrap padding 40 + navpill offset 4 + piece inset 11 / 9) */
html[data-vibe="sky"] .takeover .to-in{margin:0 auto!important;max-width:var(--maxw)!important;width:100%!important;position:relative;isolation:isolate;
  background:none!important;box-shadow:none!important;border-radius:0!important;padding:0 61px 0 67px!important}
html[data-vibe="sky"] .takeover .to-in::before{content:"";position:absolute;inset:0 49px 0 55px;z-index:-1;background:#fff;border-radius:14px;
  box-shadow:0 0 0 1px #e6e9eb,0 10px 28px -14px rgba(15,23,42,.22)}
/* docked: navbar to search = 11px, same as Spotlight to the first row */
@media(min-width:861px){html[data-vibe="sky"] .site-header.is-pinned .navpill{transform:translateY(20px)!important}}
/* owner 2026-10-20 round: grass strip shows the blue sky above the grass again (220px + a 55% white fade hid it):
   taller strip, only the top edge fades into the page */
html[data-vibe="sky"] .site-footer::before{height:380px!important;background:
    linear-gradient(180deg,#fcfcfe 0%,rgba(252,252,254,0) 22%) center bottom/var(--plate-w) 380px no-repeat,
    var(--grass-img) center bottom/var(--plate-w) auto no-repeat!important}
/* bigger gap partner card -> navbar (11 -> 20); no hairline glued to the navbar's top edge */
@media(min-width:861px){
  html[data-vibe="sky"] .navpill{margin-top:0!important}
  html[data-vibe="sky"] .site-header.is-pinned .navpill{transform:translateY(11px)!important}
}
html[data-vibe="sky"] .takeover{border-bottom:0!important}
/* search -> Spotlight = 11px, same as Spotlight -> first row (was 6) */
html[data-vibe="sky"] .spot{margin-top:5px!important}
/* inner pages: white buttons vanished on the white page; give them the nav-links grey so they read as chips like on home */
html[data-vibe="sky"]:not(:has(#home-live)) .navpill .nav-hire,html[data-vibe="sky"]:not(:has(#home-live)) .navpill .nav-signin{background:#f1f4f6!important;box-shadow:0 0 0 1px #e3e8eb!important}
/* stats strip removed (owner 2026-10-20) */
html[data-vibe="sky"] .topstrip{display:none!important}
/* menu pill on the sky: solid like the Get hired / Log in chips beside it (owner: "needs to be more visible") */
html[data-vibe="sky"] .navpill .nav-links{background:rgba(255,255,255,.9)!important;border-color:rgba(255,255,255,.9)!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
html[data-vibe="sky"] .navpill .nav-links a{color:#0d1010!important}
html[data-vibe="sky"] .navpill .nav-links sup{color:#1f8ef1!important;opacity:1!important}
/* sticky offsets without the 34px stats strip */
html[data-vibe="sky"] .site-header{top:0!important}html[data-vibe="sky"] .site-header.has-takeover{top:-102px!important}
@media(max-width:860px){html[data-vibe="sky"] .site-header.has-takeover{top:-76px!important}}
/* ONE grid (owner 2026-10-20): navbar pieces and the partner card share the content column's edges
   (wrap padding 40 / 16 on phones) on every page, like the board, job page and inner pages below */
@media(min-width:861px){html[data-vibe="sky"] .navpill{margin-left:0!important;margin-right:0!important;padding-left:0!important;padding-right:0!important;width:auto!important}}
html[data-vibe="sky"] .takeover .to-in{padding:0 52px!important}
html[data-vibe="sky"] .takeover .to-in::before{inset:0 40px!important}
@media(max-width:760px){html[data-vibe="sky"] .takeover .to-in{padding:0 26px!important}html[data-vibe="sky"] .takeover .to-in::before{inset:0 16px!important}}
/* job page sidebar "Get hired on autopilot": web3 glass blocks art, white like the home tile (was igj grey + dice) */
html[data-vibe="sky"] .jv-talent{background:#fff!important;border-top:1px solid #eceff1!important}
html[data-vibe="sky"] .jv-talent .art{display:block!important;width:120px!important;height:auto!important;right:18px!important;bottom:18px!important;top:auto!important;opacity:1!important;filter:drop-shadow(0 10px 18px rgba(30,90,140,.18));animation:w3-float 7s ease-in-out infinite}
@media (prefers-reduced-motion:reduce){html[data-vibe="sky"] .jv-talent .art{animation:none}}
/* logo sits 12px in, on the partner card logo line (owner: "logo more to the right") */
@media(min-width:861px){html[data-vibe="sky"] .navpill .w3v-mark{margin-left:12px!important}}
@media(min-width:861px){html[data-vibe="sky"] .navpill .nav-actions{margin-right:12px!important}}
/* For employers (/post) on the same grid as every page (owner 2026-10-20: "cramped in the center") */
html[data-vibe="sky"] .pj-page{max-width:var(--maxw)!important}
html[data-vibe="sky"] .pj-plans{max-width:none!important}
html[data-vibe="sky"] .pj-bar{max-width:none!important}
/* hero: white card + the web3 token loop (was igj dark casino banner) */
html[data-vibe="sky"] .pr-hero{background:#fff!important;color:#0d1010!important;border:1px solid #eceff1!important;box-shadow:0 18px 40px -12px rgba(15,23,42,.12)!important;border-radius:var(--rr-card,14px)!important;padding:40px 44px 38px!important;min-height:220px;box-sizing:border-box;display:flex;flex-direction:column;justify-content:center}
html[data-vibe="sky"] .pr-hero-art{mix-blend-mode:normal!important;opacity:1!important;right:0;top:0!important;bottom:0;height:100%;width:56%!important;object-fit:cover;transform:none!important;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 38%);mask-image:linear-gradient(90deg,transparent 0,#000 38%)}
html[data-vibe="sky"] .pr-hero-k{color:#1f8ef1!important}
html[data-vibe="sky"] .pr-hero h1{color:#0d1010!important}
html[data-vibe="sky"] .pr-hero p{color:#4a5560!important}
/* Hiring Partner plan: the navy-to-blue strip the owner liked */
html[data-vibe="sky"] .pj-partner-plan{background:linear-gradient(150deg,#060f24 0%,#081a3d 30%,#0c2f66 60%,#124590 85%,#1752a6 100%)!important;border-color:#0c2f66!important}
@media(min-width:861px){html[data-vibe="sky"] .pj-top{grid-template-columns:1fr!important}html[data-vibe="sky"] .pj-usp{grid-template-columns:repeat(4,minmax(0,1fr))!important}}
html[data-vibe="sky"] .pj-prev .pj-win{width:100%!important;left:0!important;transform:none!important}
html[data-vibe="sky"] .pj-partner-plan .pj-flag{background:rgba(255,255,255,.08)!important;color:#bcd6ff!important;border-color:rgba(255,255,255,.1)!important}
/* guide article on the grid (owner 2026-10-20: blog posts "cramped") */
html[data-vibe="sky"] .ga{max-width:var(--maxw)!important;padding-top:28px!important}
html[data-vibe="sky"] .ga-head{padding:28px 0 36px;margin-bottom:36px;border-bottom:1px solid #e6e9eb}
html[data-vibe="sky"] .ga-k{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:#1f8ef1}
html[data-vibe="sky"] .ga-head h1{font:600 clamp(36px,4.6vw,60px)/1.04 var(--display);letter-spacing:-.035em;margin:12px 0 16px;max-width:900px;text-wrap:balance}
html[data-vibe="sky"] .ga-lede{font-size:19px;line-height:1.55;color:#4a5560;max-width:720px;margin:0;text-wrap:pretty}
html[data-vibe="sky"] .ga-grid{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:64px;align-items:start}
html[data-vibe="sky"] .ga-main{max-width:740px}
html[data-vibe="sky"] .ga .guide-body{font-size:17.5px;line-height:1.75;color:#2b333b}
html[data-vibe="sky"] .ga .guide-body p{margin:0 0 1.15em;text-wrap:pretty}
html[data-vibe="sky"] .ga .guide-body h2{font:600 30px/1.15 var(--display);letter-spacing:-.025em;margin:2em 0 .6em;color:#0d1010;text-wrap:balance}
html[data-vibe="sky"] .ga .guide-body h3,html[data-vibe="sky"] .ga .guide-body h4{font:600 21px/1.25 var(--display);letter-spacing:-.015em;margin:1.6em 0 .5em;color:#0d1010;text-wrap:balance}
html[data-vibe="sky"] .ga .guide-body ul,html[data-vibe="sky"] .ga .guide-body ol{padding-left:1.3em;margin:0 0 1.2em}
html[data-vibe="sky"] .ga .guide-body li{margin:.35em 0}
html[data-vibe="sky"] .ga .guide-body a{color:#1f8ef1;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
html[data-vibe="sky"] .ga .guide-body table{width:100%;border-collapse:collapse;margin:1.4em 0;font-size:15px;background:#fff;border-radius:14px;overflow:hidden;box-shadow:0 0 0 1px #e6e9eb}
html[data-vibe="sky"] .ga .guide-body th,html[data-vibe="sky"] .ga .guide-body td{padding:11px 14px;text-align:left;border-bottom:1px solid #eef1f3}
html[data-vibe="sky"] .ga .guide-body th{background:#f6f8f9;font-weight:600}
html[data-vibe="sky"] .ga-side{position:sticky;top:96px;display:flex;flex-direction:column;gap:14px}
html[data-vibe="sky"] .ga-talent{position:relative;overflow:hidden;background:#fff!important;border:1px solid #eceff1!important;border-radius:14px!important;padding:22px 22px 22px!important;min-height:170px;box-shadow:0 18px 40px -12px rgba(15,23,42,.12)}
html[data-vibe="sky"] .ga-talent h3{font:600 19px/1.2 var(--display);margin:0 0 6px;max-width:170px}
html[data-vibe="sky"] .ga-talent p{font-size:14px;color:#62696b;margin:0 0 14px;max-width:170px}
html[data-vibe="sky"] .ga-talent .art{position:absolute;right:12px;bottom:12px;width:104px;height:auto;filter:drop-shadow(0 10px 18px rgba(30,90,140,.18));animation:w3-float 7s ease-in-out infinite}
html[data-vibe="sky"] .ga-card{background:#fff;border:1px solid #eceff1;border-radius:14px;padding:20px 22px}
html[data-vibe="sky"] .ga-card h3{font:600 17px/1.25 var(--display);margin:0 0 8px}
html[data-vibe="sky"] .ga-card p{font-size:14px;margin:0 0 14px}
html[data-vibe="sky"] .ga-more a{display:block;padding:9px 0;border-top:1px solid #eef1f3;font-size:14.5px;color:#0d1010;text-decoration:none;line-height:1.35}
html[data-vibe="sky"] .ga-more a:hover{color:#1f8ef1}
html[data-vibe="sky"] .ga-more .ga-all{color:#1f8ef1;font-weight:600}
@media(max-width:980px){html[data-vibe="sky"] .ga-grid{grid-template-columns:1fr;gap:40px}html[data-vibe="sky"] .ga-side{position:static}html[data-vibe="sky"] .ga-main{max-width:none}}
@media (prefers-reduced-motion:reduce){html[data-vibe="sky"] .ga-talent .art{animation:none}}
/* /post preview plan switcher: site style (white pill, black active + glow), not igj's dark/orange */
html[data-vibe="sky"] .pj-prev-seg{background:#fff!important;border:0!important;box-shadow:0 0 0 1px #e6e9eb,0 14px 30px -10px rgba(15,23,42,.22)!important;padding:4px!important}
html[data-vibe="sky"] .pj-prev-seg .seg-btn{color:#0d1010!important;background:transparent!important;box-shadow:none!important}
html[data-vibe="sky"] .pj-prev-seg .seg-btn:hover{background:#f1f4f6!important}
html[data-vibe="sky"] .pj-prev-seg .seg-btn .mono{color:#62696b!important}
html[data-vibe="sky"] .pj-prev-seg .seg-btn.is-on{background:#0d1010!important;color:#fff!important;box-shadow:var(--ref-glow)!important}
html[data-vibe="sky"] .pj-prev-seg .seg-btn.is-on .mono{color:#9fd0ff!important}
html[data-vibe="sky"] .pj-plan:has(input:checked) .pj-pick{background:#0d1010!important;color:#fff!important;border-color:transparent!important;box-shadow:var(--ref-glow)!important}
/* pin/unpin grows evenly from every side (owner 2026-10-20: "goes from down to up"): the navbar no longer slides
   (its 11px pinned offset comes from the sticky top instead of an animated translate); only the backdrop scales
   from the centre, with an even shadow */
@media(min-width:861px){
  html[data-vibe="sky"] .site-header.is-pinned .navpill{transform:none!important}
  html[data-vibe="sky"] .site-header.has-takeover{top:-91px!important}
}
html[data-vibe="sky"] .navpill::before{transform-origin:50% 50%!important;transform:scale(.97)!important}
html[data-vibe="sky"] .site-header.is-pinned .navpill::before{transform:none!important;
  box-shadow:0 0 0 1px rgba(10,11,15,.06),0 0 32px rgba(15,23,42,.10)!important}
/* pinned header sticks 11px lower (even pin animation), which left the partner card's bottom edge + shadow peeking
   above the navbar in the docked state: clip the banner's bottom 11px while pinned (owner 2026-10-20) */
@media(min-width:861px){html[data-vibe="sky"] .site-header.is-pinned .takeover{clip-path:inset(0 0 11px 0)}}
/* talent panel on the cloud sky (owner 2026-10-20: assets match the clouds): loop fills the panel, the frame's calm
   lower third carries the selling points in dark ink over a soft white fade; base colour = the loop's bottom edge */
html[data-vibe="sky"] .tp-outer .tp-panel{background:#e0ebf8!important}
html[data-vibe="sky"] .tp-outer .tp-loop{height:100%!important;mix-blend-mode:normal!important;object-position:50% 0;
  -webkit-mask-image:none!important;mask-image:none!important}
html[data-vibe="sky"] .tp-outer .tp-panel::after{display:block!important;content:""!important;position:absolute;inset:auto 0 0 0;height:52%;z-index:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.72) 55%,rgba(255,255,255,.86) 100%)!important;border:0!important;opacity:1!important}
html[data-vibe="sky"] .tp-outer .tp-panel-bottom{position:relative;z-index:1}
html[data-vibe="sky"] .tp-outer .tp-usps b{color:#0d1010!important}
html[data-vibe="sky"] .tp-outer .tp-usps span{color:#3d4852!important}
html[data-vibe="sky"] .tp-outer .tp-usps li>svg{color:#1f8ef1!important;background:rgba(31,142,241,.14)!important}
@media(max-width:999px){html[data-vibe="sky"] .tp-outer .tp-loop{height:170px!important}html[data-vibe="sky"] .tp-outer .tp-panel::after{display:none!important}}
/* v2: loop in the top 64% fading into the panel's sky colour (igj layout); no veil, text below on clean sky */
html[data-vibe="sky"] .tp-outer .tp-loop{height:64%!important;object-fit:cover;object-position:50% 0;
  -webkit-mask-image:linear-gradient(180deg,#000 62%,transparent 100%)!important;mask-image:linear-gradient(180deg,#000 62%,transparent 100%)!important}
html[data-vibe="sky"] .tp-outer .tp-panel::after{display:none!important}
@media(min-width:1000px){html[data-vibe="sky"] .tp-outer .tp-loop{top:-64px!important;height:calc(60% + 64px)!important}}
/* apply gate: igj beige leftovers -> site greys (owner 2026-10-20 apply gate port) */
html[data-vibe="sky"] .tgate-how li{background:#f1f4f6!important;color:#3d4852!important}
html[data-vibe="sky"] .ap-steps li i{border-color:#d9dfe2!important}
html[data-vibe="sky"] .ap-steps li+li:before{background:#d9dfe2!important}
/* handshake icon replaces the ✦ sparkle on Hiring Partner labels (owner 2026-10-20: sparkle "looks AI sloppish") */
.hs-ic{display:inline-block;vertical-align:-2px;margin-right:6px;flex:none}
.to-logo .hs-big{margin:0;vertical-align:middle}
html[data-vibe="sky"] .takeover .to-logo:has(.hs-big){display:grid;place-items:center;color:#1f8ef1}
/* PARTNER_BELOW preview: partner card sits under the navbar (outside the sticky header) on the same grid */
html[data-vibe="sky"] .site-header.partner-below{top:0!important}
html[data-vibe="sky"] .takeover.takeover-below{position:relative;z-index:2;margin-top:0}
/* padding, not margin: a margin collapses out of the sticky header and the docked navbar touched the top */
@media(min-width:861px){html[data-vibe="sky"] .site-header.partner-below{padding-top:11px!important}}
/* square tight to the Y like a full stop (owner 2026-10-20 "the dot is kinda far"); cancels the trailing letter-spacing */
.w3v-mark i{margin-left:0!important}
.w3v-mark i{background:#1f8ef1!important} /* logo square = brand blue, always (owner 2026-10-20) */
/* account modal buttons in the site style (owner 2026-10-20: "delete my profile and CV looks bad"): 10px corners,
   flat; Sign out = white secondary; Delete = white with a red label + red ring (clearly destructive, not a chrome capsule) */
html[data-vibe="sky"] .hlt-modal .hlt-btn{border-radius:10px!important;background-image:none!important;box-shadow:none!important;filter:none!important;font-family:var(--font)!important;font-weight:700!important}
html[data-vibe="sky"] .hlt-modal .hlt-btn.sec{background:#fff!important;color:#0d1010!important;border:1px solid #e6e9eb!important}
html[data-vibe="sky"] .hlt-modal .hlt-btn.sec:hover{background:#f6f8f9!important}
html[data-vibe="sky"] .hlt-modal .hlt-btn.danger{background:#fff!important;color:#c21f2f!important;border:1px solid rgba(194,31,47,.35)!important}
html[data-vibe="sky"] .hlt-modal .hlt-btn.danger:hover{background:#fff5f5!important;border-color:rgba(194,31,47,.6)!important}
html[data-vibe="sky"] .hlt-modal .hlt-btn.danger .hlt-i{color:#c21f2f!important}
/* the modal's main button (Send link etc.) lost its fill when the gradient was removed: solid ink like the site */
html[data-vibe="sky"] .hlt-modal .hlt-btn:not(.sec):not(.danger):not(.tg):not([style*="2AABEE"]){background:#0d1010!important;color:#fff!important;border:0!important}
html[data-vibe="sky"] .hlt-modal .hlt-btn:not(.sec):not(.danger):not(.tg):not([style*="2AABEE"]):hover{background:#1c2124!important}
/* Telegram buttons stay Telegram blue (owner 2026-10-20) */
html[data-vibe="sky"] .hlt-modal .hlt-btn[style*="2AABEE"]{background:#2AABEE!important;color:#fff!important;border:0!important}
html[data-vibe="sky"] .hlt-modal .hlt-btn[style*="2AABEE"]:hover{background:#229ed9!important}
/* Phones: the Hiring Partner card grows with its text (fixed 102/80px clipped a 3-line title, 2026-10-20) */
@media(max-width:860px){html[data-vibe="sky"] .takeover{height:auto!important}html[data-vibe="sky"] .takeover .to-in{height:auto!important;min-height:80px;padding-top:12px!important;padding-bottom:12px!important}}
html[data-vibe="sky"] .takeover .to-h,html[data-vibe="sky"] .takeover .to-s{text-wrap:balance} /* owner rule: no orphan word on a last line */
/* Telegram apply gate (Spotlight/promo jobs): the tint layer re-boxed the gate panel with no padding
   and the sky .btn rule turned the CTA grey. Plain panel, Telegram-blue button (2026-10-21). */
html[data-vibe="sky"] .apply-tg-pitch.gate{border:0!important;background:none!important;padding:0!important}
html[data-vibe="sky"] .apply-dialog .gate-cta{background:#2AABEE!important;color:#fff!important;border:0!important;box-shadow:0 6px 18px rgba(42,171,238,.28)!important}
html[data-vibe="sky"] .apply-dialog .gate-cta:hover{background:#1f9ad9!important}
html[data-vibe="sky"] .apply-dialog .gate-cta svg{color:#fff;fill:currentColor}
html[data-vibe="sky"] .apply-dialog .gate-steps{margin-top:18px}