/* Shared styles for the offer blocks written by tools/gen-offer.py
   (homepage hero prices, "what we do" cards, price menu, process, FAQ). */

/* Hero price chips */
.of-chips{display:flex;flex-wrap:wrap;gap:8px;margin:22px 0 4px}
.of-chip{display:flex;align-items:baseline;gap:6px;padding:9px 14px;border-radius:999px;border:1px solid var(--border);background:rgba(255,255,255,.04);font-size:13px;color:var(--muted);text-decoration:none;transition:border-color .15s}
.of-chip strong{color:var(--white);font-size:15px;font-weight:700;letter-spacing:-.01em}
.of-chip:hover{border-color:var(--border-red)}
.of-hero-note{font-size:12.5px;color:var(--muted);margin-top:10px}

/* What we do — 4 cards with photos */
.of-services{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:36px}
.of-svc{display:flex;flex-direction:column;background:var(--card);border:1px solid var(--border);border-radius:16px;overflow:hidden;text-decoration:none;color:inherit;transition:transform .2s,border-color .2s}
.of-svc:hover{transform:translateY(-3px);border-color:var(--border-red)}
.of-svc-img{aspect-ratio:4/3;background:#0d0e10;overflow:hidden}
.of-svc-img img{width:100%;height:100%;object-fit:cover;display:block}
.of-svc-img.fit img{object-fit:contain;background:#fff}
.of-svc-body{padding:18px 18px 20px;display:flex;flex-direction:column;gap:8px;flex:1}
.of-svc-k{font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--red)}
.of-svc h3{font-size:20px;letter-spacing:-.02em;margin:0;color:var(--white)}
.of-svc p{font-size:13.5px;line-height:1.6;color:var(--muted);margin:0;flex:1}
.of-svc-price{font-size:15px;color:var(--white);font-weight:700;margin-top:6px}
.of-svc-price span{font-weight:400;color:var(--muted);font-size:12.5px}
.of-svc-more{font-size:13px;color:var(--red);font-weight:600}

/* Price menu */
.of-menu{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:32px}
.of-card{position:relative;display:flex;flex-direction:column;background:var(--card);border:1px solid var(--border);border-radius:16px;padding:26px 24px}
.of-card.featured{border-color:var(--border-red);box-shadow:0 0 0 1px var(--border-red) inset}
.of-badge{position:absolute;top:-11px;left:22px;background:var(--red);color:#fff;font-size:10.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;padding:5px 10px;border-radius:999px}
.of-card-k{font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.of-card h3{font-size:22px;letter-spacing:-.02em;margin:6px 0 0;color:var(--white)}
.of-price{display:flex;align-items:baseline;gap:8px;margin:14px 0 4px}
.of-price strong{font-size:44px;letter-spacing:-.04em;line-height:1;color:var(--white)}
.of-price strong.quote{font-size:30px}
.of-price span{font-size:13px;color:var(--muted)}
.of-card ul{list-style:none;margin:14px 0 0;padding:0;display:flex;flex-direction:column;gap:9px;flex:1}
.of-card li{position:relative;padding-left:22px;font-size:14px;line-height:1.5;color:var(--white)}
.of-card li::before{content:"";position:absolute;left:2px;top:7px;width:10px;height:6px;border-left:2px solid var(--red);border-bottom:2px solid var(--red);transform:rotate(-45deg)}
.of-card li.muted{color:var(--muted)}
.of-card li.muted::before{border-color:var(--muted2)}
.of-card-note{font-size:12.5px;color:var(--muted);margin-top:14px;line-height:1.5}
.of-card-note b{color:var(--white)}
.of-btn{display:block;text-align:center;margin-top:18px;padding:13px 16px;border-radius:999px;font-weight:700;font-size:14px;text-decoration:none;border:1px solid var(--border);color:var(--white);background:transparent;cursor:pointer;font-family:inherit;width:100%}
.of-btn:hover{border-color:var(--white)}
.of-btn.red{background:var(--red);border-color:var(--red);color:#fff}
.of-btn.red:hover{background:var(--red-dark)}

.of-more{margin-top:18px;background:var(--card);border:1px solid var(--border);border-radius:16px;padding:22px 24px}
.of-more-h{display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap}
.of-more-h h3{font-size:17px;margin:0;color:var(--white)}
.of-more-h span{font-size:12.5px;color:var(--muted)}
.of-more-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px 24px;margin-top:14px}
.of-more-item{display:flex;justify-content:space-between;gap:10px;font-size:14px;padding:9px 0;border-bottom:1px solid var(--border);color:var(--white)}
.of-more-item b{white-space:nowrap}

.of-examples{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:18px}
.of-ex{border:1px dashed var(--border);border-radius:14px;padding:16px 18px}
.of-ex-k{font-size:12px;color:var(--muted)}
.of-ex-v{font-size:18px;color:var(--white);font-weight:700;margin-top:4px;letter-spacing:-.01em}
.of-ex-s{font-size:12px;color:var(--muted);margin-top:4px;line-height:1.5}
.of-footnote{font-size:12.5px;color:var(--muted);margin-top:16px;line-height:1.6}

/* Process */
.of-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:32px;counter-reset:ofstep}
.of-step{background:var(--card);border:1px solid var(--border);border-radius:16px;padding:22px}
.of-step-n{width:34px;height:34px;border-radius:50%;background:var(--red-light);color:var(--red);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:14px}
.of-step h3{font-size:17px;margin:14px 0 6px;color:var(--white)}
.of-step p{font-size:13.5px;line-height:1.6;color:var(--muted);margin:0}

.of-cta-row{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}

@media(max-width:1000px){
  .of-services{grid-template-columns:repeat(2,1fr)}
  .of-menu{grid-template-columns:1fr 1fr}
  .of-steps{grid-template-columns:1fr 1fr}
  .of-more-grid,.of-examples{grid-template-columns:1fr 1fr}
}
@media(max-width:640px){
  .of-services,.of-menu,.of-steps,.of-more-grid,.of-examples{grid-template-columns:1fr}
  .of-price strong{font-size:38px}
  .of-chip{font-size:12px;padding:8px 12px}
}

/* Hero buttons rendered as <button> */
button.btn-primary,button.btn-ghost{font-family:inherit;cursor:pointer}
button.btn-ghost{background:transparent}
button.btn-ghost:hover{border-color:var(--white)}

.of-svc-img img[src*="Encanto-Banner"]{object-position:72% 30%}

/* Homepage hero offer card (replaces the audit calendar) */
.of-hero-card{display:flex;flex-direction:column}
.of-hc-img{display:block;width:100%;height:auto;aspect-ratio:auto;border-bottom:1px solid rgba(0,0,0,.08)}
.of-hc-body{padding:22px 24px 24px;color:#111}
.of-hc-k{font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--red)}
.of-hc-price{display:flex;align-items:baseline;gap:10px;margin-top:6px;flex-wrap:wrap}
.of-hc-price strong{font-size:46px;letter-spacing:-.04em;line-height:1;color:#111}
.of-hc-price span{font-size:13.5px;color:#555}
.of-hc-list{list-style:none;margin:14px 0 0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:8px 14px}
.of-hc-list li{position:relative;padding-left:20px;font-size:13.5px;line-height:1.4;color:#222}
.of-hc-list li::before{content:"";position:absolute;left:2px;top:5px;width:9px;height:5px;border-left:2px solid var(--red);border-bottom:2px solid var(--red);transform:rotate(-45deg)}
.of-hc-sub{font-size:12.5px;color:#666;margin-top:14px}
.of-hc-btns{display:flex;gap:8px;margin-top:16px}
.of-hc-go{flex:1.4;background:var(--red);color:#fff;border:0;border-radius:999px;padding:14px 16px;font:700 14px/1 inherit;font-family:inherit;cursor:pointer}
.of-hc-go:hover{background:var(--red-dark)}
.of-hc-call{flex:1;text-align:center;border:1px solid #d8d8dd;border-radius:999px;padding:13px 14px;font-weight:700;font-size:14px;color:#111;text-decoration:none}
.of-hc-call:hover{border-color:#111}
a.of-btn{box-sizing:border-box}
@media(max-width:640px){.of-hc-list{grid-template-columns:1fr}.of-hc-price strong{font-size:40px}}

/* Homepage AI price finder */
.of-ai{margin:22px 0 6px;background:rgba(255,255,255,.05);border:1px solid var(--border);border-radius:18px;padding:16px;max-width:620px}
.of-ai-h{display:flex;gap:12px;align-items:center}
.of-ai-h img{width:40px;height:40px;border-radius:50%;object-fit:cover;background:#fff;border:2px solid var(--red);flex:none}
.of-ai-h strong{display:block;font-size:16px;color:var(--white)}
.of-ai-h span{display:block;font-size:13px;color:var(--muted);margin-top:2px}
.of-ai-opts{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:14px}
.of-ai-opt{display:flex;align-items:center;gap:8px;text-align:left;background:#fff;color:#111;border:0;border-radius:12px;padding:12px 12px;font:600 14px/1.25 inherit;font-family:inherit;cursor:pointer;transition:transform .12s,box-shadow .12s}
.of-ai-opt:hover{transform:translateY(-1px);box-shadow:0 6px 18px rgba(0,0,0,.25)}
.of-ai-opt span{font-size:18px;flex:none}
.of-ai-form{display:flex;gap:8px;margin-top:10px}
.of-ai-form input{flex:1;min-width:0;border:1px solid var(--border);background:rgba(0,0,0,.25);color:var(--white);border-radius:999px;padding:12px 16px;font-size:16px;font-family:inherit;outline:none}
.of-ai-form input:focus{border-color:var(--white)}
.of-ai-form button{flex:none;background:var(--red);color:#fff;border:0;border-radius:999px;padding:12px 18px;font:700 14px/1 inherit;font-family:inherit;cursor:pointer}
@media(max-width:640px){.of-ai-opts{grid-template-columns:1fr}.of-ai-form button{padding:12px 14px}}