/* ECOSYSTEM HQ — community.html (25 Oct 2026). Same language as the book pages: wide, white, San Francisco,
   one blue (#006AFF), a join card with room around it. Extends style.css. */
.cm .wrap,.cm-sec .wrap{max-width:1240px;padding:0 clamp(20px,4vw,56px)}
.cm-hero{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(36px,6vw,96px);align-items:start;
  padding-top:clamp(48px,7vw,104px);padding-bottom:clamp(64px,8vw,120px)}
.cm-kick{font:700 12px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--arc-ink)}
.cm-hero h1{font-size:clamp(44px,6.4vw,84px);line-height:1;letter-spacing:-.035em;margin:20px 0 24px}
.cm-lead{font-size:clamp(18px,1.6vw,21px);line-height:1.55;color:var(--body);max-width:36em}
.cm-ticks{list-style:none;margin:30px 0 0;padding:0;display:grid;gap:14px;max-width:36em}
.cm-ticks li{display:flex;gap:14px;align-items:flex-start;font-size:16.5px;line-height:1.5;color:var(--body)}
.cm-ticks li b{color:var(--fg)}
.cm-ticks i{flex:none;width:24px;height:24px;border-radius:50%;background:var(--arc);color:#fff;display:grid;place-items:center;font-style:normal;font-size:12px;font-weight:800;margin-top:1px}

.cm-card{position:sticky;top:96px;background:#f5f5f7;border-radius:30px;padding:clamp(28px,3vw,44px)}
.cm-card .amt{font-size:clamp(52px,5vw,68px);font-weight:700;letter-spacing:-.04em;line-height:1}
.cm-card .amt small{font-size:18px;font-weight:600;letter-spacing:0;color:var(--mute)}
.cm-card .sub{margin-top:10px;font-size:14px;color:var(--mute)}
.cm-join{display:block;text-align:center;margin-top:26px;background:var(--arc);color:#fff;text-decoration:none;font-weight:700;font-size:16px;
  letter-spacing:.04em;text-transform:uppercase;padding:21px 28px;border-radius:999px;transition:background .25s,transform .25s,box-shadow .25s}
.cm-join:hover{background:#0051c7;transform:translateY(-2px);box-shadow:0 18px 40px rgba(0,106,255,.28)}
.cm-join:active{transform:scale(.97)}
.cm-next{margin-top:18px;display:flex;gap:12px;align-items:center;padding:14px 16px;border-radius:16px;background:#fff;border:1px solid #e6e8ec;font-size:14px;line-height:1.45}
.cm-next[hidden]{display:none}
.cm-next b{display:block;color:var(--fg)}
.cm-next .d{flex:none;width:46px;height:50px;border-radius:12px;background:var(--arc);color:#fff;display:grid;place-items:center;text-align:center;line-height:1}
.cm-next .d span{display:block;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.cm-next .d strong{display:block;font-size:20px;font-weight:800}
.cm-card ul{list-style:none;margin:22px 0 0;padding:0;display:grid;gap:10px}
.cm-card li{display:flex;gap:10px;font-size:14.5px;line-height:1.45;color:var(--body)}
.cm-card li::before{content:"✓";color:var(--arc-ink);font-weight:800;flex:none}
.cm-card .fine{margin:20px 0 0;padding-top:16px;border-top:1px solid #e3e4e8;font-size:13px;line-height:1.55;color:var(--mute)}

.cm-sec{padding:clamp(72px,9vw,128px) 0;border-top:1px solid var(--line)}
.cm-sec.alt{background:var(--panel)}
.cm-sec h2{font-size:clamp(32px,4.2vw,54px);line-height:1.05;letter-spacing:-.03em;margin:16px 0 18px;max-width:18em}
.cm-sec .cm-lead{margin-bottom:clamp(32px,4vw,52px)}

/* the courses */
.cm-courses{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:16px}
.cm-course{background:#fff;border:1px solid #e6e8ec;border-radius:22px;padding:24px 24px 22px;display:flex;flex-direction:column;gap:8px;
  transition:border-color .3s,transform .3s var(--ease-out,ease)}
.cm-course:hover{border-color:var(--arc);transform:translateY(-3px)}
.cm-course .k{font:700 11px/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--arc-ink)}
.cm-course h3{font-size:19px;line-height:1.25;letter-spacing:-.015em;margin:4px 0 2px}
.cm-course p{font-size:14px;line-height:1.55;color:var(--body);margin:0}
.cm-course .when{margin-top:auto;padding-top:12px;font-size:12.5px;font-weight:600;color:var(--mute)}
.cm-course.open .when{color:#087f44}
.cm-lesson{margin-top:clamp(36px,4vw,56px);display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;counter-reset:ls}
.cm-lesson div{border-top:2px solid var(--fg);padding-top:14px;font-size:14px;line-height:1.5;color:var(--body);counter-increment:ls}
.cm-lesson div::before{content:counter(ls);display:block;font-weight:800;font-size:13px;color:var(--arc-ink);margin-bottom:6px}
.cm-lesson b{display:block;color:var(--fg);font-size:15.5px;margin-bottom:2px}

/* the week */
.cm-week{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.cm-day{background:#fff;border-radius:22px;padding:26px 24px;border:1px solid #e6e8ec}
.cm-day .when{font:700 12px/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--arc-ink)}
.cm-day h3{font-size:20px;letter-spacing:-.015em;margin:12px 0 8px}
.cm-day p{font-size:14px;line-height:1.55;color:var(--body);margin:0}

/* joining */
.cm-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;counter-reset:st}
.cm-steps li{counter-increment:st;padding:26px 24px;border-radius:22px;background:#f5f5f7}
.cm-steps li::before{content:counter(st);display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:var(--fg);color:#fff;font-weight:800;font-size:15px;margin-bottom:18px}
.cm-steps b{display:block;font-size:17px;letter-spacing:-.01em;margin-bottom:6px;color:var(--fg)}
.cm-steps span{font-size:14px;line-height:1.55;color:var(--body)}

/* arenas */
.cm-arenas{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px}
.cm-arena{background:#fff;border:1px solid #e6e8ec;border-radius:22px;padding:24px 20px}
.cm-arena .k{font:700 11px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--arc-ink)}
.cm-arena h3{font-size:18px;line-height:1.25;margin:10px 0 8px;letter-spacing:-.01em}
.cm-arena p{font-size:13.5px;line-height:1.55;color:var(--body);margin:0}
.cm-arena .book{display:inline-block;margin-top:14px;font-size:12.5px;font-weight:600;color:var(--arc-ink);text-decoration:none}

/* the standard */
.cm-std{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(30px,5vw,80px);align-items:center}
.cm-grades{display:grid;gap:12px}
.cm-grade{display:flex;gap:16px;align-items:flex-start;background:#fff;border:1px solid #e6e8ec;border-radius:18px;padding:18px 20px}
.cm-grade .dot{width:30px;height:30px;font-size:13px;flex:none}
.cm-grade b{display:block;font-size:16px}
.cm-grade span{font-size:14px;line-height:1.5;color:var(--body)}

/* honest + who */
.cm-honest{max-width:44em;border-left:3px solid var(--arc);padding-left:clamp(18px,2vw,28px)}
.cm-honest p{font-size:17px;line-height:1.65;color:var(--body);margin:0 0 14px}
.cm-honest b{color:var(--fg)}
.cm-who{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(30px,5vw,80px)}
.cm-who p{font-size:17px;line-height:1.65;color:var(--body);margin:0 0 14px}
.cm-vision{font-size:clamp(22px,2.4vw,30px);line-height:1.3;letter-spacing:-.02em;font-weight:700;color:var(--fg);margin:0}
.cm-vision span{color:var(--arc-ink)}

/* where it sits */
.cm-ladder{margin-top:clamp(40px,5vw,64px);border-top:1px solid var(--line)}
.cm-rung{display:grid;grid-template-columns:120px minmax(0,1fr) auto;gap:18px;align-items:baseline;padding:18px 0;border-bottom:1px solid var(--line)}
.cm-rung .lv{font:700 11px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--mute)}
.cm-rung h4{font-size:17px;margin:0}
.cm-rung p{font-size:14px;color:var(--body);margin:3px 0 0}
.cm-rung .pr{font-weight:700;white-space:nowrap}
.cm-rung.here{background:#fff;border:1px solid var(--arc);border-radius:18px;padding:18px 20px;margin:8px 0}
.cm-rung.here .lv{color:var(--arc-ink)}
.cm-rung a{color:inherit;text-decoration:none}

.cm-final{text-align:center;max-width:44em;margin:0 auto}
.cm-final h2{margin-left:auto;margin-right:auto}
.cm-final .cm-join{display:inline-block;padding:21px 44px;margin-top:20px}
.cm-final .alt{display:block;margin-top:18px;font-size:14px;color:var(--mute)}
.cm-final .alt a{color:var(--arc-ink);font-weight:600;text-decoration:none}

@media(max-width:1000px){
  .cm-hero,.cm-std,.cm-who{grid-template-columns:1fr}
  .cm-card{position:static}
  .cm-week,.cm-steps{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cm-arenas{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cm-lesson{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:560px){
  .cm-week,.cm-steps,.cm-arenas{grid-template-columns:1fr}
  .cm-rung{grid-template-columns:1fr auto}
  .cm-rung .lv{grid-column:1/-1}
}
@media(prefers-reduced-motion:reduce){.cm-course,.cm-join{transition:none}}
/* fixes: the hero keeps its top and bottom space (.cm .wrap resets padding); steps stay visible on the grey section */
.cm .wrap.cm-hero{padding-top:clamp(48px,7vw,104px);padding-bottom:clamp(64px,8vw,120px)}
.cm-sec.alt .cm-steps li{background:#fff;border:1px solid #e6e8ec}
.cm-who .cm-vision{font-size:clamp(22px,2.4vw,30px);line-height:1.3;color:var(--fg)}