/* Crew&Co theme, Oct 2026: black and mint, with white sections as breaks.
   Loaded after styles.css on public pages only. Delete the <link> to roll back. */

:root{--lilac:#2BFF9E;--peach:#2BFF9E;--mint-ink:#078A4E}
.tone-mint,.tone-lilac,.tone-peach{--accent:var(--mint)}

/* header: dark, sticky, frosted */
.top{position:sticky;top:0;z-index:50;padding:14px var(--pad);background:rgba(25,25,25,.88);-webkit-backdrop-filter:saturate(1.3) blur(14px);backdrop-filter:saturate(1.3) blur(14px);border-bottom:1px solid #2a2a2a}
.nav a{position:relative}
.nav a:not(.btn)::after{content:"";position:absolute;left:0;right:0;bottom:8px;height:3px;border-radius:3px;background:var(--mint);transform:scaleX(0);transform-origin:left;transition:transform .25s ease}
.nav a:not(.btn):hover::after,.nav a[aria-current]::after{transform:scaleX(1)}
.nav a:not(.btn):hover{color:#fff}
@media (max-width:900px){.has-menu .nav a:not(.btn)::after{display:none}.top:not(.has-menu){position:static}}

/* the second call to action: white instead of peach */
.btn.peach,.nav .btn.peach{background:#fff;color:#191919}
.btn.peach:hover,.nav .btn.peach:hover{background:var(--mint);color:#191919}
.light .btn.peach{background:#191919;color:#fff}
.light .btn.peach:hover{background:var(--mint);color:#191919}
.btn:not(.line):hover,.btn.peach:hover{box-shadow:0 10px 28px rgba(43,255,158,.28)}

/* hero: black with a mint glow */
.hero{background:#121212}
.hero::before{background:radial-gradient(44% 62% at 86% 16%,rgba(43,255,158,.22),transparent 70%),radial-gradient(32% 46% at 6% 100%,rgba(43,255,158,.08),transparent 70%)}
.hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:4px;background:var(--mint)}
.count div:nth-child(n) b{color:#fff}
.count div:nth-child(4) b{color:var(--mint)}
.roll i:nth-of-type(n){color:var(--mint)}

/* dark sections: plain black, a hairline between them and a mint tab over each heading */
.sec[class*="tone-"]:not(.light):not(.band):not(.end){background:#191919}
.sec.rule,.sec[class*="tone-"]:not(.tight){border-top:0}
.sec{position:relative}
.sec[class*="tone-"]:not(.tight):not(.band):not(.end):not(.light)::before{content:"";position:absolute;top:0;left:0;right:0;height:1px;background:#2e2e2e}
.sec[class*="tone-"]:not(.tight):not(.band)>h2:first-child::before,
.sec[class*="tone-"]:not(.tight):not(.band)>.pill:first-child::before{content:"";display:block;width:64px;height:8px;border-radius:999px;background:var(--mint);margin-bottom:22px}
.sec[class*="tone-"]:not(.tight):not(.band)>.pill:first-child{flex-direction:column;align-items:flex-start;border:0;padding:0;background:none;gap:0}
.sec[class*="tone-"]:not(.tight):not(.band)>.pill:first-child::before{margin-bottom:16px}

/* white sections: the contrast breaks */
.light,.light[class*="tone-"]{background:#fff}
.light h2 .mint,.light .mint{color:#191919;background:linear-gradient(transparent 60%,var(--mint) 60%,var(--mint) 92%,transparent 92%);-webkit-background-clip:border-box;background-clip:border-box;padding:0 .08em}
.light .card{background:#fff;border:1px solid #e6e6e0;box-shadow:inset 0 5px 0 var(--mint)}
.light .card:hover{border-color:#191919}
.light .tag{border-color:#191919;color:#191919;background:none}
.light .list li::before{background:var(--mint)}
.light summary::after{color:var(--mint-ink)}
.light .post h2,.light[class*="tone-"] .post h2{color:#191919}
.light .post li::marker{color:var(--mint-ink)}
.light .post .example{background:#f6f6f2;border:1px solid #e6e6e0;border-left:5px solid var(--mint)}
.light .credits ul.logos{background:#f6f6f2;border-radius:24px;padding:clamp(22px,4vw,40px) clamp(22px,4vw,44px);width:100%;justify-content:center}
.light .kit-tag{border-color:#191919;color:#191919}

/* mint band stays the loudest divider */
.band,.band[class*="tone-"]{background:var(--mint);color:#191919}

/* gradients become solid mint */
.hero:not(.light):not(.band) h1 .bold.bold,.price b,.sec.end.end h2,.sec.mission .mint{color:var(--mint);background:none;-webkit-background-clip:border-box;background-clip:border-box}
.light .price b{color:#191919}
.mission-q{border-image:none;border-left:4px solid var(--mint)}

/* cards and steps on dark: one colour */
.sec .grid>.card:nth-child(n),.choose>.card:nth-child(n){box-shadow:inset 0 5px 0 var(--mint)}
.card{border:1px solid #2e2e2e}
.card:hover,.js .card.rv.in:hover{border-color:var(--mint)}
.sec:not(.light):not(.band) .grid>.step:nth-child(n){border-top-color:var(--mint)}
.sec:not(.light):not(.band) .grid>.step:nth-child(n) b{-webkit-text-stroke-color:var(--mint)}
.list li:nth-child(n)::before{background:var(--mint)}
.kit-tag{border-color:var(--mint);color:var(--mint)}
.uni-note{border-left-color:var(--mint)}

/* closing section: black with a mint glow */
.sec.end.end{background:radial-gradient(60% 80% at 90% 0%,rgba(43,255,158,.14),transparent 70%),#101010}
.end[class*="tone-"]::before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:var(--mint)}

/* footer */
.foot{border-top:1px solid #2e2e2e}
.foot a{text-decoration:none}
/* hirer account bar */
.hirer-bar{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:6px 16px;padding:8px var(--pad);background:var(--mint);color:#191919;font-size:15px;font-weight:600;text-align:center}
.hirer-bar a{display:inline-flex;align-items:center;min-height:36px;padding:0 18px;border-radius:999px;background:#191919;color:#fff;text-decoration:none;font-size:13px;font-weight:600;text-transform:uppercase;letter-spacing:.06em}
.hirer-bar a:hover{background:#fff;color:#191919}
@media (max-width:600px){.hirer-bar{font-size:14px;gap:6px 12px}.hirer-bar span b{display:none}}