/* how-it-works.css — layout for /how-it-works.html.
   Moved out of the page's inline <style> block on September 22, 2026, so the
   page follows the rule in CLAUDE.md that no page carries its own <style>.
   The rules above the pilot-path section are unchanged from that block. This
   page still defines its own tokens rather than loading lhc-core.css, which
   is a separate conversion. */

:root{--navy:#2c2d72;--navy-deep:#1e1f52;--accent:#F4A06A;--accent-deep:#D5742A;--lav:#ECECF7;--lav-soft:#F4F4FB;--peach:#FFF5EE;--text:#2a3040;--text-light:#5a6577;--text-muted:#8a8fa0;--border:#e0dce8;--white:#fff;--bg:#fafaf9;}
*{margin:0;padding:0;box-sizing:border-box;}
body{font-family:'Source Serif 4',Georgia,serif;color:var(--text);background:var(--bg);-webkit-font-smoothing:antialiased;}
h1,h2,h3,h4{font-family:'League Spartan',sans-serif;}
a{color:var(--navy);}

.hero{background:var(--navy);color:#fff;padding:4.5rem 2rem 3.5rem;text-align:center;position:relative;overflow:hidden;isolation:isolate;}
.hero::before{content:'';position:absolute;inset:0;background-image:url(/images/hero/home.png);background-size:cover;background-position:center;mix-blend-mode:screen;opacity:.45;pointer-events:none;}
.hero::after{content:'';position:absolute;inset:0;background:linear-gradient(to bottom,rgba(44,45,114,.4),rgba(44,45,114,.5));pointer-events:none;}
.hero-inner{max-width:640px;margin:0 auto;position:relative;z-index:1;}
.hero h1{font-weight:800;font-size:clamp(1.8rem,4vw,2.6rem);letter-spacing:-.02em;margin-bottom:.75rem;}
.hero h1 span{color:var(--accent);}
.hero p{font-size:1.05rem;line-height:1.6;color:rgba(255,255,255,.75);max-width:520px;margin:0 auto;}

.container{max-width:900px;margin:0 auto;padding:2.5rem 2rem;}
.section-label{font-family:'League Spartan',sans-serif;font-size:.65rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--accent);margin-bottom:.4rem;}
.section-title{font-weight:800;font-size:1.5rem;color:var(--navy);margin-bottom:.75rem;}

/* Cycle steps */
.cycle-section{background:var(--white);}
.cycle-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem;}
.cycle-step{text-align:left;padding:1.25rem;display:flex;flex-direction:column;}
.cycle-step img{width:100%;max-width:100%;height:auto;margin:0 0 .75rem;display:block;}
.cycle-step h3{font-weight:800;font-size:1rem;color:var(--navy);margin-bottom:.35rem;}
.cycle-step p{font-size:.9rem;color:var(--text-light);line-height:1.55;}

/* Role cards */
.role-section{background:var(--lav-soft);}
.role-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem;}
.role-card{background:var(--white);border:1px solid var(--border);border-radius:14px;padding:1.5rem;display:flex;gap:1.25rem;align-items:start;}
.role-card img{width:80px;height:80px;border-radius:10px;object-fit:contain;flex-shrink:0;}
.role-card h3{font-weight:700;font-size:1rem;color:var(--navy);margin-bottom:.3rem;}
.role-card p{font-size:.9rem;color:var(--text-light);line-height:1.55;}

/* Story cards */
.story-section{background:var(--white);}
.story-grid{display:grid;gap:1.25rem;}
.story-card{background:var(--bg);border:1px solid var(--border);border-radius:14px;padding:1.75rem 2rem;display:grid;grid-template-columns:auto 1fr;gap:1.5rem;align-items:start;}
.story-icon{width:80px;height:80px;border-radius:12px;flex-shrink:0;overflow:hidden;}.story-icon img{width:100%;height:100%;object-fit:contain;}
.story-card h3{font-weight:700;font-size:1.05rem;color:var(--navy);margin-bottom:.35rem;}
.story-card .story-who{font-family:'League Spartan',sans-serif;font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--accent);margin-bottom:.4rem;}
.story-card p{font-size:.95rem;color:var(--text);line-height:1.65;margin-bottom:.5rem;}
.story-card p:last-child{margin-bottom:0;}

/* FAQ accordion */
.faq-section{background:var(--lav-soft);}
.faq-item{background:var(--white);border:1px solid var(--border);border-radius:10px;margin-bottom:.5rem;overflow:hidden;}
.faq-q{font-family:'League Spartan',sans-serif;font-weight:700;font-size:.95rem;color:var(--navy);padding:1rem 1.25rem;cursor:pointer;display:flex;justify-content:space-between;align-items:center;background:none;border:none;width:100%;text-align:left;}
.faq-q:hover{background:var(--lav-soft);}
.faq-q::after{content:'+';font-size:1.2rem;color:var(--accent);flex-shrink:0;margin-left:1rem;transition:transform .2s;}
.faq-item.open .faq-q::after{content:'−';}
.faq-a{padding:0 1.25rem;max-height:0;overflow:hidden;transition:max-height .3s ease,padding .3s ease;}
.faq-item.open .faq-a{max-height:500px;padding:0 1.25rem 1rem;}
.faq-a p{font-size:.92rem;color:var(--text-light);line-height:1.6;margin-bottom:.5rem;}

@media(max-width:640px){
  .hero{padding:3.5rem 1.25rem 2.5rem;}
  .cycle-grid{grid-template-columns:1fr 1fr;}
  .role-grid{grid-template-columns:1fr;}
  .story-card{grid-template-columns:1fr;}
}

/* ---------------------------------------------------------------------------
   Contributing a pilot you already built.
   A path for a group that arrives with something already running, drawn as a
   spine of steps so a reader can see who leads each one and which are optional.
   --------------------------------------------------------------------------- */

.pilot-section{background:var(--peach);}
.pilot-intro{font-size:1rem;line-height:1.7;color:var(--text);max-width:64ch;margin-bottom:1.75rem;}

.pilot-start{
  background:var(--white);border:1px solid var(--border);border-left:4px solid var(--navy);
  border-radius:14px;padding:1.4rem 1.5rem;margin-bottom:1.5rem;
}
.pilot-start{display:grid;grid-template-columns:auto 1fr;column-gap:1.1rem;align-items:start;}
.pilot-start .pilot-icon{grid-row:1 / span 2;}
.pilot-start h3{font-weight:800;font-size:1rem;color:var(--navy);margin-bottom:.7rem;}
.pilot-start ul{list-style:none;display:grid;gap:.6rem;}
.pilot-start li{
  font-size:.93rem;line-height:1.6;color:var(--text);padding-left:1.4rem;position:relative;
}
.pilot-start li::before{
  content:'';position:absolute;left:0;top:.55em;
  width:7px;height:7px;border-radius:50%;background:var(--accent);
}

.pilot-why{
  font-family:'League Spartan',sans-serif;font-weight:700;font-size:1rem;
  color:var(--navy);line-height:1.5;max-width:70ch;margin-bottom:1.75rem;
}

/* the spine */
.pilot-flow{list-style:none;position:relative;margin-bottom:0;}
.pilot-flow::before{
  content:'';position:absolute;left:17px;top:18px;bottom:-1.5rem;
  width:2px;background:var(--border);
}
.pilot-step{position:relative;padding-left:3.25rem;padding-bottom:1.6rem;}
.pilot-step:last-child{padding-bottom:0;}
.pilot-num{
  position:absolute;left:0;top:0;width:36px;height:36px;border-radius:50%;
  background:var(--navy);color:#fff;display:flex;align-items:center;justify-content:center;
  font-family:'League Spartan',sans-serif;font-weight:800;font-size:.95rem;
  border:3px solid var(--peach);box-sizing:content-box;margin-left:-3px;margin-top:-3px;
}
.pilot-step.is-others .pilot-num{background:var(--accent);color:var(--navy);}

.pilot-body{
  background:var(--white);border:1px solid var(--border);border-radius:14px;
  padding:1.15rem 1.25rem;
  display:grid;grid-template-columns:auto 1fr;column-gap:1.1rem;align-items:start;
}
.pilot-text{min-width:0;}

/* Margo's hand-drawn icons. Square, transparent, and never scaled past their
   drawn size, so the line weight stays even against the rest of the page. */
.pilot-icon{width:72px;height:72px;object-fit:contain;flex-shrink:0;display:block;}
.pilot-who{
  font-family:'League Spartan',sans-serif;font-size:.68rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.07em;color:var(--text-muted);
  display:block;margin-bottom:.3rem;
}
.pilot-body h3{
  font-weight:800;font-size:1.05rem;color:var(--navy);margin-bottom:.4rem;line-height:1.25;
  display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;
}
.pilot-optional{
  font-family:'League Spartan',sans-serif;font-size:.65rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.07em;
  background:var(--lav);color:var(--navy);padding:.2rem .55rem;border-radius:20px;
}
.pilot-body p{font-size:.93rem;line-height:1.65;color:var(--text-light);margin-bottom:.5rem;}
.pilot-body p:last-child{margin-bottom:0;}

.pilot-assets{list-style:none;display:flex;flex-wrap:wrap;gap:.4rem;margin:.65rem 0;}
.pilot-assets li{
  font-family:'League Spartan',sans-serif;font-size:.78rem;font-weight:600;
  background:var(--lav-soft);border:1px solid var(--border);color:var(--navy);
  padding:.3rem .65rem;border-radius:20px;
}

.pilot-return{position:relative;padding-left:3.25rem;}
.pilot-return-mark{
  position:absolute;left:0;top:0;width:36px;height:36px;border-radius:50%;
  background:var(--peach);color:var(--accent-deep);
  display:flex;align-items:center;justify-content:center;
  font-size:1.5rem;line-height:1;font-weight:800;
  border:2px dashed var(--accent-deep);box-sizing:content-box;margin-left:-2px;margin-top:-2px;
}
.pilot-return-body{
  background:var(--white);border:1px dashed var(--accent-deep);border-radius:14px;
  padding:1.15rem 1.25rem;
  display:grid;grid-template-columns:auto 1fr;column-gap:1.1rem;align-items:start;
}
.pilot-return-body h3{font-weight:800;font-size:1rem;color:var(--navy);margin-bottom:.4rem;}
.pilot-return-body p{font-size:.93rem;line-height:1.65;color:var(--text-light);}


@media(max-width:640px){
  .pilot-step,.pilot-return{padding-left:2.85rem;}
  .pilot-body,.pilot-return-body,.pilot-start{grid-template-columns:1fr;row-gap:.6rem;}
  .pilot-start .pilot-icon{grid-row:auto;}
  .pilot-icon{width:54px;height:54px;}
  .pilot-return-mark{width:32px;height:32px;font-size:1.3rem;}
  .pilot-flow::before{left:15px;}
  .pilot-num{width:32px;height:32px;font-size:.88rem;}
}

/* ---- why shared infrastructure stalls ---- */
.stalls-section{background:var(--lav-soft,#F4F4FB);}
.section-intro{font-size:.95rem;color:var(--text-light);line-height:1.6;max-width:44rem;margin-bottom:1.4rem;}
.stalls-grid{display:grid;grid-template-columns:minmax(9rem,1fr) 1.5fr 1.5fr;gap:.55rem 1.1rem;align-items:start;}
.stalls-head{font-family:'League Spartan',sans-serif;font-size:.65rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.09em;color:var(--text-light);padding-bottom:.2rem;}
.stalls-why{font-family:'League Spartan',sans-serif;font-weight:700;font-size:.95rem;color:var(--navy);
  background:var(--white);border-radius:10px;padding:.7rem .85rem;}
.stalls-do,.stalls-change{font-size:.9rem;line-height:1.55;color:var(--text);
  background:var(--white);border-radius:10px;padding:.7rem .85rem;}
.stalls-change{color:var(--text-light);}
@media (max-width:760px){
  .stalls-grid{grid-template-columns:1fr;gap:.35rem;}
  .stalls-head{display:none;}
  .stalls-why{margin-top:.9rem;}
  .stalls-do::before{content:'What the Commons does: ';font-weight:700;color:var(--navy);}
  .stalls-change::before{content:'What changes: ';font-weight:700;color:var(--navy);}
}