/* ============================================================================
   offering.css — shared UI for the offering: services reveal, pricing tiers,
   contractor blocks. Consumes tokens from theme.css. Loaded by index.html,
   pricing.html and join.html. (Content itself lives in content.js.)
   ============================================================================ */

/* ---- section headings (used on previews + full pages) ---- */
.osec-h{font-family:var(--display);font-size:clamp(20px,2.4vw,28px);color:var(--fg);
  letter-spacing:.02em;line-height:1.15;margin-bottom:8px}
.osec-sub{color:var(--mute);font-size:14px;line-height:1.6;margin-bottom:20px;max-width:72ch}
.block-title{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--amber);
  margin:28px 0 12px}
.bcta{display:inline-block;font-family:var(--mono);font-size:14px;font-weight:700;letter-spacing:.07em;
  padding:14px 26px;background:var(--btn);border:1px solid var(--btn);color:var(--btn-text);
  margin-top:20px;cursor:pointer;transition:transform .12s,filter .14s}
.bcta:hover{filter:brightness(1.06);transform:translateY(-1px)}
.seemore{display:inline-block;margin-top:16px;color:var(--accent);font-size:13px;letter-spacing:.05em}
.seemore:hover{text-decoration:underline}

/* ---- services: hover/tap reveal (index) ---- */
.svc{flex-direction:column;align-items:stretch}
.svc-row{display:flex;align-items:center;gap:18px;width:100%}
.svc-row .svc-h{flex:1}
.svc .go{transition:.14s}
.svc.open .go,.svc:hover .go{color:var(--accent)}
.svc-ex{list-style:none;margin:0;padding:0;max-height:0;overflow:hidden;opacity:0;
  border-left:2px solid var(--accent);
  transition:max-height .32s ease,opacity .24s ease,margin .3s ease,padding .3s ease}
.svc:hover .svc-ex,.svc.open .svc-ex{max-height:340px;opacity:1;margin-top:14px;padding:2px 0 2px 16px}
.svc-ex li{font-size:13.5px;color:var(--fg);padding:5px 0;line-height:1.45}
.svc-ex .svc-start{margin-top:8px}
.svc-ex .svc-start a{color:var(--accent);font-size:12.5px;letter-spacing:.05em}
.svc-ex .svc-start a:hover{text-decoration:underline}

/* ---- pricing tiers (preview + full) ---- */
.tiers{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.tier{display:flex;flex-direction:column;border:1px solid transparent;background:var(--bg2);
  padding:22px 20px;transition:border-color .16s,transform .16s}
.tier:hover{border-color:var(--accent)}
.tier .tag{align-self:flex-start;font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--btn-text);background:var(--accent);padding:3px 9px;margin-bottom:13px}
.tier h3{font-family:var(--display);font-size:20px;letter-spacing:.02em;color:var(--fg);margin-bottom:8px}
.tier .price{font-size:24px;color:var(--accent);font-weight:600;margin-bottom:6px}
.tier .blurb{font-size:13px;color:var(--mute);line-height:1.5;margin-bottom:14px}
.tier ul{list-style:none;margin:0 0 14px;padding:0;flex:1}
.tier ul li{font-size:13px;color:var(--fg);padding:5px 0 5px 22px;position:relative;line-height:1.4}
.tier ul li::before{content:"\2713";position:absolute;left:0;color:var(--teal)}
.tier .foot{font-size:11.5px;color:var(--mute);font-style:italic;margin-bottom:16px;line-height:1.4}
.tier .tcta{display:block;text-align:center;font-family:var(--mono);font-size:13px;font-weight:700;
  letter-spacing:.14em;padding:12px;border:1px solid var(--fg);background:transparent;color:var(--fg);
  cursor:pointer;transition:.14s}
.tier .tcta:hover{background:var(--btn);border-color:var(--btn);color:var(--btn-text)}

/* ---- guarantees / risk reversal ---- */
.guarantees{list-style:none;margin:0;padding:18px 20px;display:grid;
  grid-template-columns:repeat(2,1fr);gap:10px 24px;border:1px dashed var(--accent);background:var(--bg2)}
.guarantees li{font-size:13px;color:var(--fg);padding-left:24px;position:relative;line-height:1.4}
.guarantees li::before{content:"\2726";position:absolute;left:0;color:var(--accent)}

/* ---- value anchor ---- */
.anchor{padding:16px 18px;border-left:3px solid var(--accent);background:var(--bg2);
  font-size:14px;color:var(--fg);line-height:1.6}

/* ---- how it works ---- */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.step{border:1px solid var(--dim);background:var(--bg2);padding:16px 18px}
.step h4{font-family:var(--display);color:var(--accent);font-size:15px;margin-bottom:7px;letter-spacing:.02em}
.step p{font-size:13px;color:var(--mute);line-height:1.5}

/* ---- faq ---- */
.faq .q{font-size:14px;color:var(--fg);font-weight:600;margin:18px 0 4px}
.faq .q::before{content:"\25B8\00a0";color:var(--accent)}
.faq .a{font-size:13px;color:var(--mute);line-height:1.6}

/* ---- contractor blocks ---- */
.why{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.why .card{border:1px solid var(--dim);background:var(--bg2);padding:16px 18px}
.why h4{font-size:15px;color:var(--fg);margin-bottom:6px}
.why p{font-size:13px;color:var(--mute);line-height:1.5}
.pay{list-style:none;margin:0;padding:18px 20px;border:1px solid var(--dim);background:var(--bg2)}
.pay li{font-size:13.5px;color:var(--fg);padding:7px 0 7px 26px;position:relative;line-height:1.45}
.pay li::before{content:"\2713";position:absolute;left:0;color:var(--teal)}
.roles{display:flex;flex-wrap:wrap;gap:10px;margin:0;padding:0;list-style:none}
.roles .chip{font-size:12.5px;color:var(--fg);border:1px solid var(--dim);padding:7px 13px;letter-spacing:.04em}

/* ---- "start a project" form (pricing page) ---- */
.oform{max-width:620px;margin-top:8px}
.oform .frow{margin-bottom:13px}
.oform label{display:block;font-size:12px;color:var(--teal);margin-bottom:5px;letter-spacing:.04em}
.oform input,.oform textarea,.oform select{width:100%;background:var(--bg2);border:1px solid var(--dim);
  color:var(--fg);font-family:var(--mono);font-size:13px;padding:11px 12px;outline:none;transition:border-color .15s}
.oform input:focus,.oform textarea:focus,.oform select:focus{border-color:var(--accent)}
.oform textarea{min-height:96px;resize:vertical}
.oform select option{background:var(--bg2);color:var(--fg)}
.formnote2{display:block;margin-top:10px;font-size:12px;letter-spacing:.04em;min-height:1.2em}
.formnote2.ok{color:var(--teal)} .formnote2.err{color:var(--ember)}

@media(max-width:860px){
  .tiers,.steps{grid-template-columns:1fr}
}
@media(max-width:680px){
  .why,.guarantees{grid-template-columns:1fr}
}