/* Our Common Grounds page styles.
   Same page system as Care Share Do and Cagora: wrap width, band rhythm, type
   scale, pills and cards. Palette is a quieter deep green and gold, because
   this is the parent company, not a place people sign up.
   Colours are a placeholder until Rob signs off the brand. */

:root{
  --ink:#1d2622; --ink-2:#3a4741; --ink-3:#64716b;
  --paper:#f6f3ec; --card:#ffffff; --line:#e3ded3;
  --deep:#13221d; --deep-2:#1a2f28; --on-deep:#eef4f0; --on-deep-2:#a9bdb5;
  --ocg:#2c5f52; --ocg-deep:#173a31; --ocg-soft:#e3efe9;
  --gold:#c98f1c; --gold-bright:#f6c453; --gold-soft:#fbf0d6;
  --vote:#2c5f52; --partner:#3e8fb0; --wiki:#6b7a74; --reward:#b8701a;
  --plat:#8a96a3; --goldtier:#c99a2e; --silver:#9aa3ab; --bronze:#a8693a;
  --here-bg:#fbf0d6; --here-line:#f6c453; --here-ink:#8a6200;
  --spectrum:linear-gradient(90deg,#E01B18 0%,#F4551E 7%,#F58220 13%,#F2A81E 19%,#A8AF2B 25%,#5CB85C 38%,#0F7A63 66%,#14453A 100%);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font:400 18px/1.6 Figtree,system-ui,-apple-system,"Segoe UI",sans-serif;-webkit-font-smoothing:antialiased}
a{color:var(--ocg)}
a:hover{color:var(--ocg-deep)}
img{max-width:100%;height:auto}
.wrap{max-width:980px;margin:0 auto;padding:0 20px}
.wrap.narrow{max-width:980px} /* same as .wrap, to match the Care Share Do pages; kept so existing markup still works */
h1,h2,h3{font-family:'Bricolage Grotesque',Figtree,sans-serif;margin:0;line-height:1.08;letter-spacing:-.015em;text-wrap:balance}
h1{font-size:clamp(32px,5vw,48px);font-weight:800}
h2{font-size:clamp(26px,3.6vw,38px);font-weight:800}
h3{font-size:clamp(19px,2.2vw,22px);font-weight:700}
p{margin:0 0 16px}
:focus-visible{outline:3px solid var(--ocg);outline-offset:3px;border-radius:6px}
.muted{color:var(--ink-3)}
.fine{font-size:14.5px;color:var(--ink-3)}

/* bands */
.band{padding:76px 0}
.band.alt{background:var(--card)}
.band.tight{padding:48px 0}
.band.deep{background:var(--deep-2);color:var(--on-deep)}
.band.deep h2,.band.deep h3{color:#fff}
.band.deep p{color:var(--on-deep-2)}
.band.deep .kicker{color:var(--gold-bright)}
.band.deep a{color:var(--gold-bright)}
.kicker{font-size:14px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--ocg);margin:0 0 14px}
.lede{font-size:clamp(19px,2.2vw,22px);line-height:1.5;color:var(--ink-2);max-width:60ch;margin-top:18px}
.prose{max-width:none}
.prose h2{margin-top:44px;margin-bottom:12px}
.prose h3{margin-top:30px;margin-bottom:8px}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:8px;font-weight:700;font-size:17px;padding:12px 26px;border-radius:999px;text-decoration:none;border:2px solid transparent;cursor:pointer}
.btn.primary{background:var(--gold-bright);color:#2a2208;box-shadow:0 2px 10px rgba(27,36,48,.14)}
.btn.primary:hover{background:#f9d57f;color:#2a2208}
.btn.ghost{background:transparent;color:var(--ink);border-color:var(--ink-3)}
.btn.ghost:hover{border-color:var(--ink);color:var(--ink)}
.cta-row{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-top:26px}
.more{display:inline-block;margin-top:14px;font-weight:700;font-size:16px;text-decoration:none}
.more:hover{text-decoration:underline}

/* hero */
.hero{padding:72px 0 56px}
.hero .prehead{font-size:17px;color:var(--ink-3);margin-bottom:14px}
.hero h1{max-width:20ch}

/* countdown band, shared look with the Care Share Do start page */
.count{background:var(--deep);color:var(--on-deep);border-radius:18px;padding:22px 22px 20px;display:grid;gap:14px;position:relative;overflow:hidden}
.count::before{content:"";position:absolute;left:0;right:0;top:0;height:5px;background:var(--spectrum)}
.count .today{font-size:13px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--on-deep-2)}
.count .counters{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:16px}
.count .counter{display:grid;gap:2px;min-width:0}
.count .counter b{font-family:'Bricolage Grotesque',Figtree,sans-serif;font-weight:800;font-size:clamp(38px,8vw,52px);line-height:1;font-variant-numeric:tabular-nums;letter-spacing:-.02em;color:var(--gold-bright)}
.count .counter span{color:var(--on-deep-2);font-size:15.5px}
.count p{margin:0}
.count a{color:var(--on-deep);font-weight:700}

/* grids and cards */
.grid{display:grid;gap:20px}
.grid.two{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.grid.three{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.grid.four{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.card{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:24px;min-width:0}
.card h3{margin-bottom:8px}
.card p{color:var(--ink-2)}
.card p:last-child{margin-bottom:0}
.card .lead{font-weight:600;color:var(--ink);margin-bottom:10px}
.card.top{border-top:4px solid var(--ocg)}
.card.soft{background:var(--paper)}

/* theory of change rhythm: Care, Share, Do, Thrive */
.toc{list-style:none;margin:30px 0 0;padding:0;display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));counter-reset:t}
.toc li{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:22px;position:relative;overflow:hidden;counter-increment:t}
.toc li::before{content:"";position:absolute;left:0;right:0;top:0;height:5px;background:var(--c,var(--ocg))}
.toc li b{display:block;font-family:'Bricolage Grotesque',Figtree,sans-serif;font-size:24px;font-weight:800;color:var(--c,var(--ocg));margin:2px 0 8px}
.toc li p{margin:0;color:var(--ink-2);font-size:16.5px}
.toc .c1{--c:#E01B18}.toc .c2{--c:#c98a0e}.toc .c3{--c:#2E86DE}.toc .c4{--c:#0F7A63}

/* pillars, same tile as the network about page */
.pillargrid{list-style:none;margin:28px 0 0;padding:0;display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(238px,1fr))}
.pillargrid li{background:var(--card);border:1px solid var(--line);border-top:4px solid var(--ocg);border-radius:14px;padding:22px;display:flex;flex-direction:column;gap:8px;min-width:0}
.pillargrid .nm{font-family:'Bricolage Grotesque',Figtree,sans-serif;font-weight:800;font-size:20px;line-height:1.15;letter-spacing:-.01em;color:var(--ink);text-decoration:none}
.pillargrid .nm:hover{color:var(--ocg-deep)}
.pillargrid p{color:var(--ink-2);margin:0;flex:1;font-size:15.5px}
.pillargrid .dom{font-size:14.5px;font-weight:600;color:var(--ocg);text-decoration:none;word-break:break-word}
.pillargrid .dom:hover{text-decoration:underline}
.pillarmore{margin:24px 0 0;color:var(--ink-2)}

.mvw{display:grid;gap:22px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));margin-top:24px}
.mvw h3{font-size:13px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3);margin-bottom:8px;font-family:Figtree,sans-serif}
.mvw p{color:var(--ink-2);margin:0}

/* the money: split bars */
.split{display:flex;height:46px;border-radius:10px;overflow:hidden;margin-top:18px}
.split div{display:grid;place-items:center;color:#fff;font-weight:700;font-size:15px;min-width:0;text-shadow:0 1px 1px rgba(0,0,0,.25)}
.s-vote{background:var(--vote)} .s-partner{background:var(--partner)} .s-wiki{background:var(--wiki)}
.split-key{display:grid;gap:8px;margin-top:14px}
.split-key div{display:grid;grid-template-columns:14px 1fr auto;gap:10px;align-items:baseline}
.split-key i{width:12px;height:12px;border-radius:3px;display:inline-block;transform:translateY(1px)}
.split-key b{font-variant-numeric:tabular-nums}
.cal{display:grid;border:1px solid var(--line);border-radius:14px;background:var(--card);overflow:hidden;margin-top:18px}
.cal div{display:grid;grid-template-columns:150px 1fr;gap:14px;padding:14px 16px;border-top:1px solid var(--line)}
.cal div:first-child{border-top:0}
.cal b{font-size:15.5px}
.tablewrap{overflow-x:auto;margin-top:18px}
table{border-collapse:collapse;width:100%;font-variant-numeric:tabular-nums;font-size:16px;background:var(--card);border-radius:12px;overflow:hidden}
th,td{text-align:left;padding:10px 14px;border-bottom:1px solid var(--line);white-space:nowrap}
th{font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);font-weight:700}

/* history timeline */
.timeline{list-style:none;margin:30px 0 0;padding:0;border-left:3px solid var(--ocg-soft);display:grid;gap:26px}
.timeline li{position:relative;padding-left:26px}
.timeline li::before{content:"";position:absolute;left:-9px;top:6px;width:15px;height:15px;border-radius:50%;background:var(--card);border:3px solid var(--ocg)}
.timeline .when{font-size:14px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ocg)}
.timeline h3{margin:4px 0 6px}
.timeline p{color:var(--ink-2);margin:0}

/* placeholder marker, for anything still to write */
.placeholder{background:var(--gold-soft);border:1px dashed var(--gold);border-radius:14px;padding:16px 20px;font-size:15.5px;color:#5b4410;margin-top:16px}
.placeholder b{font-weight:700}

details.faq{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:16px 20px;margin-bottom:10px}
details.faq summary{cursor:pointer;font-weight:700;list-style:none}
details.faq summary::-webkit-details-marker{display:none}
details.faq summary::after{content:"+";float:right;color:var(--ink-3);font-weight:700}
details.faq[open] summary::after{content:"\2212"}
details.faq p{margin:12px 0 0;color:var(--ink-2)}

/* contact form, same as the network about page */
.cform{display:grid;gap:15px;max-width:560px;margin-top:26px}
.cform label{display:grid;gap:6px;font-weight:600;font-size:15.5px}
.cform label span{font-weight:400;font-size:14.5px;color:var(--ink-3)}
.cform input[type=text],.cform input[type=email],.cform textarea{font:400 16px/1.5 Figtree,system-ui,sans-serif;color:var(--ink);background:var(--card);border:1px solid var(--line);border-radius:10px;padding:11px 13px;width:100%;max-width:100%}
.cform input:focus,.cform textarea:focus{border-color:var(--ocg);outline:none;box-shadow:0 0 0 3px var(--ocg-soft)}
.cform .hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.source{font-size:14.5px;color:var(--ink-3);margin:0}

/* final call to action */
.closer{background:var(--deep);color:var(--on-deep);padding:76px 0;text-align:center}
.closer h2{color:#fff;max-width:22ch;margin:0 auto}
.closer p{color:var(--on-deep-2);max-width:56ch;margin:18px auto 0}
.closer .btn.ghost{color:#fff;border-color:rgba(255,255,255,.55)}
.closer .btn.ghost:hover{color:#fff;border-color:#fff}
.closer .cta-row{justify-content:center}

@media (max-width:560px){
  .band{padding:56px 0}
  .hero{padding:48px 0 40px}
  .cal div{grid-template-columns:1fr;gap:2px}
}

/* home page: why now with the countdown beside it, and the join counters in the closer */
.home-why{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(0,1fr);gap:32px;align-items:start;margin-top:22px}
.home-why-copy p{color:var(--ink-2)}
@media (max-width:820px){.home-why{grid-template-columns:minmax(0,1fr);gap:18px}}
.home-join{display:flex;flex-wrap:wrap;justify-content:center;gap:16px 44px;margin:28px auto 4px}
.home-join > div{display:grid;gap:2px;min-width:0}
.home-join b{font-family:'Bricolage Grotesque',Figtree,sans-serif;font-weight:800;font-size:clamp(34px,6vw,46px);line-height:1;color:var(--gold-bright);font-variant-numeric:tabular-nums}
.home-join span{color:var(--on-deep-2);font-size:15px}