/* Join page, built on the live Leadership Indicator web layer.
   Tokens and @font-face come from spinstate-brand.css, loaded first.
   Class vocabulary is deliberately the indicator's (eyebrow2, display, lede2,
   small, btn, cover-arc, inner) so the two pages read as one site, plus the V2
   report's ground-alternation (g-forest / g-paper / g-mint) and arc motif. */

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-text, 'Aktiv Grotesk', system-ui, sans-serif);
  background: var(--forest, #142B2E);
  color: var(--forest, #142B2E);
  -webkit-font-smoothing: antialiased;
}
:root { --pale: #E7F3ED; --measure: 680px; }

/* ---- grounds, alternating, never twice running ------------------------- */
.jsec { position: relative; overflow: hidden; }
.g-forest { background: var(--forest, #142B2E); color: #fff; }
.g-paper  { background: var(--pale);            color: var(--forest, #142B2E); }
.g-mint   { background: var(--mint, #40BF9E);   color: var(--forest, #142B2E); }

.inner {
  position: relative; z-index: 2; width: 100%;
  max-width: var(--measure); margin: 0 auto; padding: 78px 28px;
}
.jhero .inner { padding: 56px 28px 64px; }

/* ---- the orbit arc, one per section, corners alternate down the page ---- */
.jarc { position: absolute; border-radius: 50%; border-style: solid; z-index: 0; pointer-events: none; }
.jarc.tl { width: 600px; height: 600px; left: -260px; top: -360px; border-width: 22px; }
.jarc.br { width: 560px; height: 560px; right: -330px; bottom: -330px; border-width: 22px; }
.jarc.tr { width: 360px; height: 360px; right: -210px; top: -210px; border-width: 22px; }
.jarc.bl { width: 420px; height: 420px; left: -250px; bottom: -250px; border-width: 22px; }
.g-forest .jarc { border-color: var(--mint, #40BF9E); opacity: .12; }
.g-forest .jarc.tl { border-color: var(--lilac, #ADB2E0); opacity: .15; }
.g-paper  .jarc { border-width: 15px; border-color: var(--mint-dark, #2C8C73); opacity: .07; }
.g-mint   .jarc { border-color: #fff; opacity: .14; }

/* the hero keeps the indicator's signature full-strength cover arcs */
.jhero { min-height: 100vh; display: flex; flex-direction: column; justify-content: center; }
.cover-arc { position: absolute; border-radius: 50%; border-style: solid; z-index: 0; pointer-events: none; }
.cover-arc--mint { width: 58vw; height: 58vw; border-width: 6.5vw; border-color: var(--mint, #40BF9E); bottom: -28vw; right: -22vw; opacity: .85; }
.cover-arc--soft { width: 52vw; height: 52vw; border-width: 5vw; border-color: var(--mint-dark, #2C8C73); top: -30vw; left: -24vw; opacity: .45; }
.jhero img.logo { height: 30px; margin-bottom: 40px; }

/* ---- type, lifted from the indicator so the ramp matches ---------------- */
.eyebrow2 {
  font-family: var(--font-eyebrow, 'Aktiv Grotesk'); font-weight: 600; font-size: 11px;
  letter-spacing: .2em; text-transform: uppercase; color: var(--mint-dark, #2C8C73);
}
.g-forest .eyebrow2 { color: var(--mint, #40BF9E); }
.g-mint   .eyebrow2 { color: var(--forest, #142B2E); }

.display {
  font-family: var(--font-display, 'Degular'); font-weight: 600; letter-spacing: -.015em;
  font-size: 42px; line-height: 1.05; color: var(--forest); margin: 12px 0 0; max-width: 15ch;
}
.display .accent { color: var(--mint-dark); }
.g-forest .display { color: #fff; }
.g-forest .display .accent { color: var(--mint, #40BF9E); }
.g-mint   .display .accent { color: #fff; }

h2.jh {
  font-family: var(--font-display, 'Degular'); font-weight: 600; letter-spacing: -.015em;
  font-size: 30px; line-height: 1.12; margin: 12px 0 0; max-width: 20ch;
}
.g-forest h2.jh { color: #fff; }
h2.jh .accent { color: var(--mint-dark); }
.g-forest h2.jh .accent { color: var(--mint, #40BF9E); }

.lede2 { font-size: 19px; line-height: 1.5; max-width: 46ch; margin: 16px 0 6px; color: rgba(20,43,46,.78); }
.g-forest .lede2 { color: rgba(255,255,255,.78); }
.g-mint   .lede2 { color: rgba(20,43,46,.82); }

.jp { font-size: 16.5px; line-height: 1.65; max-width: 58ch; margin: 14px 0 0; color: rgba(20,43,46,.76); }
.g-forest .jp { color: rgba(255,255,255,.78); }
.jp strong { font-weight: 600; color: var(--forest); }
.g-forest .jp strong { color: #fff; }

.small { font-size: 13px; line-height: 1.5; color: rgba(20,43,46,.6); margin: 0; }
.g-forest .small { color: rgba(255,255,255,.6); }

/* ---- the ask ------------------------------------------------------------ */
.btn {
  display: inline-block; background: var(--mint, #40BF9E); color: var(--forest, #142B2E);
  border: none; cursor: pointer; font-family: var(--font-eyebrow, 'Aktiv Grotesk');
  font-weight: 700; font-size: 13px; letter-spacing: .07em; text-transform: uppercase;
  padding: 15px 30px; border-radius: 999px; text-decoration: none; margin-top: 30px;
}
.btn:hover { background: var(--mint-dark, #2C8C73); color: #fff; }
.g-mint .btn { background: var(--forest, #142B2E); color: var(--mint, #40BF9E); }

.jtlink { color: var(--mint-dark, #2C8C73); text-decoration: none; border-bottom: 1px solid rgba(44,140,115,.35); }
.g-forest .jtlink { color: var(--mint, #40BF9E); border-bottom-color: rgba(64,191,158,.4); }

/* ---- the three, on the paper ground ------------------------------------- */
.jthree { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 34px; }
.jcard { background: #fff; border: 1.5px solid rgba(20,43,46,.08); border-radius: 18px; padding: 20px 20px 22px; }
.jcard .jk { font-family: var(--font-eyebrow, 'Aktiv Grotesk'); font-weight: 700; font-size: 10px;
  letter-spacing: .16em; text-transform: uppercase; color: var(--mint-dark, #2C8C73); margin: 0 0 9px; }
.jcard p { margin: 0; font-size: 14.5px; line-height: 1.55; color: rgba(20,43,46,.78); }

/* the closing mint beat at a section foot */
.jbeat { font-family: var(--font-display, 'Degular'); font-weight: 600; font-size: 16.5px;
  line-height: 1.45; color: var(--mint-dark, #2C8C73); margin-top: 26px; max-width: 54ch; }
.g-forest .jbeat { color: var(--mint, #40BF9E); }

/* the one-rule breather, big and quiet */
.jrule { font-family: var(--font-display, 'Degular'); font-weight: 600; font-size: 34px;
  line-height: 1.15; letter-spacing: -.015em; margin: 14px 0 0; max-width: 18ch; }

/* what happens inside, a list that is not a bulleted list */
.jbeats { margin-top: 26px; }
.jbeats .jrow { padding: 20px 0; border-top: 1px solid rgba(255,255,255,.16); }
.jbeats .jrow:last-child { border-bottom: 1px solid rgba(255,255,255,.16); }
.jbeats .jrow .jt { font-family: var(--font-display, 'Degular'); font-weight: 600; font-size: 19px; color: #fff; }
.jbeats .jrow .jw { font-family: var(--font-eyebrow, 'Aktiv Grotesk'); font-weight: 700; font-size: 10px;
  letter-spacing: .14em; text-transform: uppercase; color: var(--mint, #40BF9E); margin-bottom: 6px; }
.jbeats .jrow .jp { margin-top: 7px; }

/* ---- footer ------------------------------------------------------------- */
.jfoot { background: var(--forest, #142B2E); }
.jfoot .inner { padding: 34px 28px 40px; display: flex; justify-content: space-between;
  align-items: flex-start; gap: 26px; flex-wrap: wrap; border-top: 1px solid rgba(255,255,255,.14); }
.jfoot img { height: 18px; margin-bottom: 12px; display: block; }
.jfoot .jfl { font-size: 12px; line-height: 1.6; color: rgba(255,255,255,.58); margin: 0; }
.jfbrand { flex: 1 1 240px; }
.jflegal { flex: 1 1 280px; }
.jflegal .jfl + .jfl { margin-top: 10px; }
.jfoot .jtlink { color: rgba(255,255,255,.72); border-bottom-color: rgba(255,255,255,.28); }
.jfoot .jtlink:hover { color: var(--mint, #40BF9E); border-bottom-color: rgba(64,191,158,.5); }

@media (max-width: 720px) {
  .jthree { grid-template-columns: 1fr; }
  .inner { padding: 56px 22px; }
  .jhero .inner { padding: 44px 22px 52px; }
}
@media (max-width: 560px) {
  .display { font-size: 32px; }
  h2.jh { font-size: 25px; }
  .jrule { font-size: 26px; }
  .lede2 { font-size: 17.5px; }
  .jarc.tl { width: 420px; height: 420px; left: -200px; top: -260px; }
  .jarc.br { width: 400px; height: 400px; right: -240px; bottom: -240px; }
}