/* Round 115: Community Hub marketing page. All classes prefixed cm-. */
.cm { --cm-ink:#1f2328; --cm-soft:#fff4ec; --cm-peach:#ffe3d3; --cm-green:#2f6f5e; --cm-shadow:0 18px 50px rgba(120,60,30,.14); }
.cm svg.ic { width:1.1em; height:1.1em; vertical-align:-.15em; }
.cm-section { padding:72px 0; }
.cm-section--tint { background:linear-gradient(180deg,#fff9f4,#fff3ea); border-block:1px solid var(--color-border); }
.cm-eyebrow { display:block; text-align:center; font-size:12.5px; letter-spacing:.12em; text-transform:uppercase; font-weight:800; color:var(--color-primary); margin-bottom:10px; }
.cm-row__text .cm-eyebrow { text-align:left; }
.cm-title { text-align:center; font-size:clamp(28px,4vw,40px); line-height:1.15; margin:0 0 12px; }
.cm-sub { text-align:center; color:var(--color-text-muted); max-width:640px; margin:0 auto 38px; font-size:17px; }
.cm-center { text-align:center; margin-top:28px; }
.cm-fine { text-align:center; font-size:12.5px; color:var(--color-text-muted); margin-top:18px; }
.cm-btn-lg { padding:16px 28px; font-size:17px; border-radius:999px; box-shadow:0 10px 26px rgba(216,62,32,.28); }
.cm-btn-lg:hover { transform:translateY(-2px); }
.cm-link-btn { font-weight:700; color:var(--cm-ink); text-decoration:none; padding:14px 6px; border-bottom:2px solid var(--color-primary); }

/* hero */
.cm-hero { position:relative; overflow:hidden; padding:64px 0 56px; background:radial-gradient(1100px 500px at 85% -10%,#ffd9c2 0,transparent 60%),radial-gradient(800px 500px at -10% 110%,#dff0e8 0,transparent 55%),#fffaf6; }
.cm-hero__grid { position:relative; display:grid; grid-template-columns:1.05fr .95fr; gap:48px; align-items:center; }
.cm-hero h1 { font-size:clamp(34px,5.2vw,58px); line-height:1.05; letter-spacing:-.02em; margin:14px 0 16px; }
.cm-lead { font-size:clamp(17px,2vw,20px); color:#3d444d; max-width:560px; margin:0 0 26px; line-height:1.55; }
.cm-pill { display:inline-flex; align-items:center; gap:8px; background:#fff; border:1px solid var(--color-border); padding:8px 14px; border-radius:999px; font-size:13.5px; font-weight:700; color:#8a3a1f; box-shadow:var(--shadow-sm); }
.cm-cta-row { display:flex; gap:18px; align-items:center; flex-wrap:wrap; }
.cm-trust { list-style:none; display:flex; gap:18px; flex-wrap:wrap; padding:0; margin:22px 0 0; font-size:14px; color:#6B5E57; }
.cm-trust li { display:flex; gap:6px; align-items:center; }
.cm-signin { margin:14px 0 0; font-size:14px; color:var(--color-text-muted); }

/* hero mock collage */
.cm-hero__visual { position:relative; min-height:430px; }
.cm-mock,.cm-card,.cm-member { background:#fff; border:1px solid var(--color-border); border-radius:18px; box-shadow:var(--cm-shadow); }
.cm-mock { position:absolute; padding:16px 18px; font-size:14px; }
.cm-mock--story { top:0; left:4%; width:78%; animation:cmFloat 7s ease-in-out infinite; }
.cm-mock--reply { top:52%; right:0; width:66%; animation:cmFloat 8s ease-in-out -2s infinite; }
.cm-mock--xp { bottom:0; left:0; display:flex; gap:12px; align-items:center; padding:12px 16px; animation:cmFloat 9s ease-in-out -4s infinite; }
.cm-mock--recipe { bottom:-6px; right:4%; display:flex; gap:10px; align-items:center; padding:12px 16px; animation:cmFloat 7.5s ease-in-out -1s infinite; }
.cm-mock small,.cm-card small { display:block; color:var(--color-text-muted); font-size:12px; }
.cm-mock h4,.cm-card h4 { margin:8px 0 6px; font-size:17px; line-height:1.25; }
.cm-mock p,.cm-card p { margin:0; color:#6B5E57; line-height:1.45; }
.cm-mock__head { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:8px; }
.cm-av { width:26px; height:26px; border-radius:50%; display:grid; place-items:center; color:#fff; font-weight:800; font-size:12px; flex:none; }
.cm-av--a { background:#8e5ab5; } .cm-av--b { background:#4f8a3f; } .cm-av--c { background:#d9822b; }
.cm-lv { font-size:11.5px; font-weight:700; background:#fff3d6; color:#8a6410; padding:3px 9px; border-radius:999px; margin-left:auto; }
.cm-tag { display:inline-block; font-size:11.5px; font-weight:700; background:var(--cm-peach); color:#9a3a1a; padding:3px 10px; border-radius:999px; }
.cm-react { display:flex; gap:6px; align-items:center; margin-top:12px; font-size:16px; }
.cm-react span { background:var(--color-bg); border:1px solid var(--color-border); border-radius:999px; padding:2px 9px; }
.cm-react em { font-style:normal; font-size:12.5px; color:var(--color-text-muted); margin-left:6px; }
.cm-ring { width:44px; height:44px; border-radius:50%; background:conic-gradient(var(--color-primary) 62%,#eadfd6 0); display:grid; place-items:center; position:relative; flex:none; }
.cm-ring::before { content:''; position:absolute; inset:5px; background:#fff; border-radius:50%; }
.cm-ring b { position:relative; font-size:16px; }
.cm-ring--lg { width:72px; height:72px; } .cm-ring--lg::before { inset:7px; } .cm-ring--lg b { font-size:24px; }
.cm-recipe-ic { width:38px; height:38px; border-radius:12px; background:var(--cm-peach); color:var(--color-primary); display:grid; place-items:center; flex:none; }
@keyframes cmFloat { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-8px); } }

/* stats */
.cm-stats { background:#fff; border-block:1px solid var(--color-border); }
.cm-stats__grid { display:flex; flex-wrap:wrap; justify-content:center; gap:14px 64px; padding:26px 0; text-align:center; }
.cm-stat b { display:block; font-size:clamp(28px,4vw,40px); color:var(--color-primary); line-height:1.1; }
.cm-stat span { font-size:13.5px; color:var(--color-text-muted); }

/* features */
.cm-features { display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:18px; }
.cm-feature { background:#fff; border:1px solid var(--color-border); border-radius:20px; padding:24px 22px; transition:transform .25s,box-shadow .25s; }
.cm-feature:hover { transform:translateY(-4px); box-shadow:var(--cm-shadow); }
.cm-feature h3 { margin:14px 0 6px; font-size:18px; }
.cm-feature p { margin:0; color:#6B5E57; font-size:14.5px; line-height:1.5; }
.cm-ic { width:46px; height:46px; border-radius:14px; background:linear-gradient(135deg,#ffe3d3,#ffd0b8); color:var(--color-primary); display:grid; place-items:center; font-size:22px; }
.cm-ic--sm { width:40px; height:40px; margin:0 auto 10px; font-size:19px; }

/* rows */
.cm-row { display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center; padding:34px 0; }
.cm-row--flip .cm-row__visual { order:-1; }
.cm-row h2 { font-size:clamp(26px,3.4vw,36px); line-height:1.15; margin:0 0 14px; }
.cm-row p { color:#3d444d; font-size:17px; line-height:1.6; }
.cm-checks { list-style:none; padding:0; margin:18px 0 24px; display:grid; gap:9px; }
.cm-checks li { position:relative; padding-left:28px; font-size:15.5px; }
.cm-checks li::before { content:''; position:absolute; left:0; top:3px; width:18px; height:18px; border-radius:50%; background:var(--cm-green) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5 9-10'/%3E%3C/svg%3E") center/11px no-repeat; }
.cm-card { padding:22px; max-width:440px; margin:0 auto; }
.cm-reply-line { margin-top:14px; padding:10px 12px; background:#fdf1ea; border-left:3px solid var(--color-primary); border-radius:8px; font-size:13.5px; }
.cm-wall { display:grid; gap:12px; max-width:420px; margin:0 auto; }
.cm-member { display:flex; align-items:center; gap:12px; padding:14px 16px; }
.cm-member .cm-av { width:40px; height:40px; font-size:16px; }
.cm-member b { display:block; } .cm-member small { color:var(--color-text-muted); font-size:12.5px; }
.cm-follow { margin-left:auto; font-size:13px; font-weight:700; border:1.5px solid var(--color-primary); color:var(--color-primary); border-radius:999px; padding:6px 14px; white-space:nowrap; }
.cm-follow--on { background:var(--color-primary); color:#fff; }
.cm-xp { display:flex; gap:16px; align-items:center; } .cm-xp > div:last-child { flex:1; }
.cm-bar { height:8px; background:#eadfd6; border-radius:8px; margin:8px 0 4px; overflow:hidden; } .cm-bar i { display:block; height:100%; background:var(--color-primary); border-radius:8px; }
.cm-recipe-line { display:flex; gap:12px; align-items:center; margin-top:18px; padding-top:16px; border-top:1px solid var(--color-border); }
.cm-try { margin-left:auto; font-size:12.5px; font-weight:700; background:#e7f3ee; color:var(--cm-green); padding:6px 12px; border-radius:999px; white-space:nowrap; }

/* steps */
.cm-steps { list-style:none; display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:22px; padding:0; margin:34px 0 0; counter-reset:s; }
.cm-steps li { text-align:center; padding:26px 22px; background:#fff; border:1px solid var(--color-border); border-radius:20px; }
.cm-num { width:44px; height:44px; border-radius:50%; background:var(--color-primary); color:#fff; display:inline-grid; place-items:center; font-weight:800; font-size:19px; }
.cm-steps h3 { margin:12px 0 6px; } .cm-steps p { margin:0; color:#6B5E57; }

/* safety */
.cm-safety__grid { display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:18px; margin-top:30px; text-align:center; }
.cm-safety__grid h3 { margin:0 0 4px; font-size:17px; } .cm-safety__grid p { margin:0; color:#6B5E57; font-size:14.5px; }

/* plans */
.cm-plans { display:grid; grid-template-columns:1fr 1fr; gap:22px; margin-top:32px; align-items:stretch; }
.cm-plan { position:relative; background:#fff; border:1px solid var(--color-border); border-radius:24px; padding:30px 28px; display:flex; flex-direction:column; }
.cm-plan .btn { margin-top:auto; text-align:center; }
.cm-plan h3 { margin:0; font-size:22px; }
.cm-price { font-size:44px; font-weight:800; margin:6px 0 0; line-height:1; } .cm-price small { font-size:16px; color:var(--color-text-muted); font-weight:600; }
.cm-price-note { margin:4px 0 0; color:var(--color-text-muted); font-size:13.5px; }
.cm-plan--pro { border:2px solid var(--color-primary); box-shadow:var(--cm-shadow); }
.cm-ribbon { position:absolute; top:-13px; left:50%; transform:translateX(-50%); background:var(--color-primary); color:#fff; font-size:12px; font-weight:800; padding:5px 14px; border-radius:999px; letter-spacing:.04em; }
.cm-badges { display:flex; gap:20px; justify-content:center; flex-wrap:wrap; margin-top:26px; font-size:13.5px; color:#6B5E57; }

/* faq */
.cm-faq { display:grid; gap:10px; margin-top:26px; }
.cm-faq details { background:#fff; border:1px solid var(--color-border); border-radius:14px; padding:4px 18px; }
.cm-faq summary { cursor:pointer; font-weight:700; padding:14px 0; list-style:none; display:flex; justify-content:space-between; gap:12px; }
.cm-faq summary::-webkit-details-marker { display:none; }
.cm-faq summary::after { content:'+'; font-size:22px; color:var(--color-primary); line-height:1; }
.cm-faq details[open] summary::after { content:'\2212'; }
.cm-faq p { margin:0 0 16px; color:#6B5E57; line-height:1.6; }

/* final + sticky */
.cm-final { padding:30px 0 80px; }
.cm-final__box { text-align:center; padding:54px 24px; border-radius:30px; color:#fff; background:linear-gradient(135deg,#D9411E,#F0613D 60%,#FDBA9C); box-shadow:var(--cm-shadow); }
.cm-final__box h2 { margin:0 0 10px; font-size:clamp(26px,4vw,38px); color:#fff; } .cm-final__box p { margin:0 0 24px; font-size:18px; opacity:.95; }
.cm-final__box .btn { background:#fff; color:var(--color-primary-dark); box-shadow:0 10px 26px rgba(0,0,0,.18); }
.cm-sticky { display:none; }

@media (max-width:980px) {
  .cm-hero__grid,.cm-row { grid-template-columns: minmax(0, 1fr); gap:34px; }
  .cm-row--flip .cm-row__visual { order:0; }
  .cm-features { grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .cm-safety__grid { grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .cm-hero__visual { min-height:400px; max-width:520px; margin:0 auto; width:100%; }
}
@media (max-width:640px) {
  .cm-section { padding:52px 0; }
  .cm-hero { padding:36px 0 40px; }
  .cm-features,.cm-steps,.cm-plans { grid-template-columns: minmax(0, 1fr); }
  .cm-cta-row .btn { width:100%; text-align:center; justify-content:center; }
  .cm-hero__visual { min-height:380px; }
  .cm-mock--story { width:92%; left:0; } .cm-mock--reply { width:80%; top:56%; } .cm-mock--recipe { display:none; }
  .cm-sticky { position:fixed; left:0; right:0; bottom:0; z-index:60; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 16px calc(10px + env(safe-area-inset-bottom)); background:#fff; border-top:1px solid var(--color-border); box-shadow:0 -8px 24px rgba(0,0,0,.1); transform:translateY(110%); transition:transform .3s; font-weight:700; font-size:14.5px; }
  .cm-sticky[hidden] { display:flex; visibility:hidden; }
  .cm-sticky.is-on { transform:none; visibility:visible; }
  .cm-final { padding-bottom:96px; }
}
@media (prefers-reduced-motion:reduce) { .cm-mock { animation:none !important; } .cm-feature,.cm-btn-lg { transition:none; } }

.cm-home { padding:72px 0; background:linear-gradient(180deg,#fffaf6,#fff3ea); border-block:1px solid var(--color-border); }
.cm-feature--link { text-decoration:none; color:inherit; display:block; }
@media (max-width:980px) { .cm-features--home { grid-template-columns:repeat(2, minmax(0, 1fr)); } }
@media (max-width:640px) { .cm-home { padding:52px 0; } }