.join-page,
.join-page *,
.join-page *::before,
.join-page *::after { box-sizing: border-box; }
.join-page { background: #fff; }
.join-page svg { display: block; width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.join-hero { position: relative; overflow: hidden; padding: clamp(3.5rem, 7vw, 6rem) 0 clamp(2.75rem, 5vw, 4rem); color: var(--color-white); background: radial-gradient(circle at 85% 20%, rgba(0,168,84,.15), transparent 34%), linear-gradient(135deg,#08140f 0%,#0d261a 58%,#07331e 100%); }
.join-hero::after { position:absolute; right:-110px; bottom:-175px; width:360px; height:360px; content:""; border:1px solid rgba(0,168,84,.15); border-radius:50%; box-shadow:0 0 0 44px rgba(0,168,84,.035),0 0 0 88px rgba(0,168,84,.02); pointer-events:none; }
.join-hero .container { position:relative; z-index:1; }
.join-hero__eyebrow,.join-heading__eyebrow,.join-cta__eyebrow { margin:0 0 .7rem; color:var(--color-primary); font-family:var(--font-display); font-size:1.1rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; }
.join-hero__title { margin:0; color:var(--color-white); font-family:var(--font-heading); font-size:clamp(3.6rem,7vw,6.5rem); line-height:.92; text-transform:uppercase; }
.join-hero__title::after,.join-heading h2::after { display:block; width:54px; height:3px; margin-top:.9rem; content:""; background:var(--color-primary); }
.join-hero__intro { max-width:700px; margin:1.3rem 0 0; color:rgba(255,255,255,.74); font-size:1.1rem; line-height:1.7; }
.join-hero__actions { display:flex; flex-wrap:wrap; gap:.8rem; margin-top:2rem; }
.join-hero .button--outline { color:#fff; border-color:rgba(255,255,255,.38); background:transparent; }

.join-heading { margin-bottom:clamp(2rem,4vw,3rem); }
.join-heading--center { text-align:center; }
.join-heading h2 { margin:0; color:var(--color-black); font-family:var(--font-heading); font-size:clamp(2.5rem,5vw,4.2rem); line-height:.95; text-transform:uppercase; }
.join-heading--center h2::after { margin-inline:auto; }
.join-heading > p:last-child { max-width:720px; margin:1rem 0 0; color:var(--color-muted); line-height:1.75; }
.join-heading--center > p:last-child { margin-inline:auto; }

.join-benefits,.join-kit,.join-links { padding:clamp(4rem,8vw,7rem) 0; }
.join-benefits__grid,.join-kit__grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1rem; }
.join-benefit-card,.join-kit__grid article { padding:1.7rem; border:1px solid rgba(0,74,45,.1); border-radius:16px; background:#fff; box-shadow:0 16px 38px rgba(5,34,20,.07); transition:transform var(--transition-base),box-shadow var(--transition-base),border-color var(--transition-base); }
.join-benefit-card:hover,.join-benefit-card:focus-within,.join-kit__grid article:hover,.join-kit__grid article:focus-within { border-color:rgba(0,139,70,.28); box-shadow:0 22px 44px rgba(5,34,20,.12); transform:translateY(-5px); }
.join-benefit-card > span,.join-kit__grid article > span { display:grid; width:48px; height:48px; padding:10px; place-items:center; margin-bottom:1rem; border-radius:14px; color:var(--color-primary-dark); background:rgba(0,168,84,.09); }
.join-benefit-card h3,.join-kit__grid h3 { margin:0 0 .55rem; color:var(--color-primary-dark); font-family:var(--font-display); font-size:1.25rem; text-transform:uppercase; }
.join-benefit-card p,.join-kit__grid p { margin:0; color:var(--color-muted); line-height:1.65; }

.join-steps { padding:clamp(4rem,8vw,7rem) 0; background:#f5f9f7; }
.join-steps__list { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1rem; margin:0; padding:0; list-style:none; counter-reset:join-step; }
.join-steps__list li { position:relative; min-height:270px; padding:1.7rem; overflow:hidden; border:1px solid transparent; border-radius:18px; background:#fff; box-shadow:0 14px 34px rgba(5,34,20,.08); transition:transform var(--transition-base),box-shadow var(--transition-base),border-color var(--transition-base); }
.join-steps__list li:hover,.join-steps__list li:focus-within { border-color:rgba(0,139,70,.24); box-shadow:0 22px 44px rgba(5,34,20,.13); transform:translateY(-5px); }
.join-steps__number { position:absolute; right:14px; top:5px; color:rgba(0,74,45,.07); font-family:var(--font-heading); font-size:5rem; line-height:1; }
.join-steps__icon { display:block; width:46px; height:46px; margin-bottom:1.5rem; color:var(--color-primary); }
.join-steps__list h3 { margin:0 0 .7rem; color:var(--color-primary-dark); font-family:var(--font-display); font-size:1.35rem; text-transform:uppercase; }
.join-steps__list p { margin:0; color:var(--color-muted); line-height:1.7; }

.join-audiences { padding:clamp(4rem,8vw,7rem) 0; color:#fff; background:linear-gradient(135deg,#07140f,#0a3822); }
.join-audiences__layout { display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:clamp(2rem,7vw,6rem); align-items:center; }
.join-audiences .join-heading h2 { color:#fff; }
.join-audiences .join-heading > p:last-child { color:rgba(255,255,255,.7); }
.join-audiences__cards { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem; }
.join-audiences__cards article { padding:1.4rem; border:1px solid rgba(255,255,255,.12); border-radius:14px; background:rgba(255,255,255,.06); transition:transform var(--transition-base),background-color var(--transition-base),border-color var(--transition-base); }
.join-audiences__cards article:hover,.join-audiences__cards article:focus-within { border-color:rgba(0,168,84,.45); background:rgba(255,255,255,.1); transform:translateY(-5px); }
.join-audiences__cards span { display:block; margin-bottom:.35rem; color:var(--color-primary); font-family:var(--font-display); font-weight:700; text-transform:uppercase; }
.join-audiences__cards strong { font-size:.98rem; line-height:1.5; }

.join-kit { background:#fff; }
.join-links { background:#f5f9f7; }
.join-links__grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1rem; }
.join-links__grid a { position:relative; display:block; padding:1.6rem 3.2rem 1.6rem 1.6rem; border:1px solid rgba(0,74,45,.11); border-radius:15px; color:inherit; background:#fff; box-shadow:0 12px 30px rgba(5,34,20,.06); text-decoration:none; transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease; }
.join-links__grid a::after { position:absolute; right:1.4rem; top:50%; content:"→"; color:var(--color-primary); font-size:1.35rem; transform:translateY(-50%); }
.join-links__grid a:hover,.join-links__grid a:focus-visible { border-color:rgba(0,168,84,.35); box-shadow:0 18px 38px rgba(5,34,20,.1); transform:translateY(-3px); }
.join-links__grid span { display:block; margin-bottom:.4rem; color:var(--color-muted); font-size:.9rem; }
.join-links__grid strong { color:var(--color-primary-dark); font-family:var(--font-display); font-size:1.15rem; text-transform:uppercase; }

.join-cta { padding:clamp(3.5rem,7vw,5.5rem) 0; }
.join-cta__card { position:relative; display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:2rem; padding:clamp(2rem,4vw,3rem) clamp(1.5rem,5vw,4rem); overflow:hidden; border-radius:17px; color:var(--color-white); background:radial-gradient(circle at 90% 10%,rgba(0,168,84,.2),transparent 35%),linear-gradient(135deg,#07331e 0%,#052519 100%); box-shadow:0 18px 44px rgba(0,64,34,.18); }
.join-cta__eyebrow { margin:0 0 .45rem; }
.join-cta__card h2 { margin:0; color:var(--color-white); font-family:var(--font-heading); font-size:clamp(2.4rem,4vw,3.7rem); line-height:1; text-transform:uppercase; }
.join-cta__card p:last-child { max-width:650px; margin:.85rem 0 0; color:rgba(255,255,255,.72); line-height:1.7; }
.join-cta__card .button { flex:0 0 auto; }

@media (max-width: 980px) {
  .join-benefits__grid,.join-kit__grid,.join-steps__list { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .join-audiences__layout { grid-template-columns:1fr; }
}
@media (max-width: 720px) {
  .join-hero { padding:3rem 0 2.5rem; }
  .join-benefits__grid,.join-kit__grid,.join-steps__list,.join-audiences__cards,.join-links__grid { grid-template-columns:1fr; }
  .join-steps__list li { min-height:0; }
  .join-cta__card { grid-template-columns:1fr; }
  .join-cta__card .button { width:fit-content; }
}
@media (prefers-reduced-motion: reduce) {
  .join-benefit-card,.join-kit__grid article,.join-steps__list li,.join-audiences__cards article,.join-links__grid a { transition:none; }
  .join-benefit-card:hover,.join-benefit-card:focus-within,.join-kit__grid article:hover,.join-kit__grid article:focus-within,.join-steps__list li:hover,.join-steps__list li:focus-within,.join-audiences__cards article:hover,.join-audiences__cards article:focus-within,.join-links__grid a:hover,.join-links__grid a:focus-visible { transform:none; }
}