/* Theme extras — components the prototype declared inline, plus mobile
   stacking. Desktop rendering is unchanged from the prototype. */

.jc-stat-card{
  background: color-mix(in srgb, var(--c-light) 4%, var(--c-dark));
  border: 1px solid color-mix(in srgb, var(--c-light) 10%, transparent);
  border-radius: 16px;
  padding: 28px;
}

/* FAQ accordion (native <details>, styled to match the prototype) */
.jc-faq{ border-bottom: 1px solid color-mix(in srgb, var(--c-dark) 8%, transparent); }
.jc-faq > summary{
  list-style: none; cursor: pointer;
  padding: 24px 0; display: grid; grid-template-columns: 1fr auto; gap: 16px; align-items: center;
}
.jc-faq > summary::-webkit-details-marker{ display: none; }
.jc-faq .jc-faq-q{ font-family: var(--font-heading); font-weight: 700; font-size: 19px; color: var(--c-dark); letter-spacing: -0.01em; }
.jc-faq .jc-faq-plus{
  width: 32px; height: 32px; border-radius: 50%; border: 1.5px solid var(--c-dark);
  display: grid; place-items: center; font-family: var(--font-heading); font-size: 18px; line-height: 1;
  transition: transform .2s ease, background .2s ease, color .2s ease;
}
.jc-faq[open] .jc-faq-plus{ transform: rotate(45deg); background: var(--c-dark); color: var(--c-light); }
.jc-faq .jc-faq-a{ font-size: 17px; color: var(--c-dark); max-width: 60ch; margin: 0; line-height: 1.6; padding-bottom: 24px; }

/* ─── Mobile stacking (≤ 880px) ─────────────────────────── */
@media (max-width: 880px){
  .jc-hero-grid,.jc-about-preview,.jc-recent,.jc-contact-grid,
  .jc-svc-block,.jc-smb-detail,.jc-case,.jc-how,.jc-pricing,
  .jc-3up,.jc-4up,.jc-process-4,.jc-principles,.jc-trust,
  .jc-foot-cta,.jc-foot-grid,.jc-nudge,.jc-smbnudge{
    grid-template-columns: 1fr !important;
    direction: ltr !important;
  }
  .jc-svc-block > *,.jc-smb-detail > *{ direction: ltr !important; }
  .jc-6up{ grid-template-columns: 1fr 1fr !important; }
  .jc-6up > .svc-card{ grid-column: auto !important; }
  .jc-foot-legal{ flex-direction: column; gap: 12px; align-items: flex-start; }
}
@media (max-width: 560px){
  .jc-6up{ grid-template-columns: 1fr !important; }
  .site-cta{ display:none !important; }
}

/* ─── Client plaque grid (SMB) ──────────────────────────── */
.client-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:48px}
@media(max-width:880px){.client-grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.client-grid{grid-template-columns:1fr}}
.client-card{background:var(--c-light);border:1px solid var(--c-light-gray);border-radius:16px;padding:28px;display:flex;flex-direction:column;gap:14px;transition:transform .18s ease,border-color .18s ease;position:relative}
.client-card:hover{transform:translateY(-3px);border-color:var(--c-dark)}
.client-chip{width:56px;height:56px;border-radius:14px;display:grid;place-items:center;overflow:hidden;background:color-mix(in srgb, var(--c-orange) 10%, transparent)}
.client-chip img{max-width:42px;max-height:42px;object-fit:contain;filter:grayscale(1);opacity:.8;transition:filter .18s ease,opacity .18s ease}
.client-card:hover .client-chip img{filter:grayscale(0);opacity:1}
.client-chip .mono{font-family:var(--font-heading);font-weight:700;font-size:20px;letter-spacing:.02em;color:var(--c-orange)}
.client-name{font-family:var(--font-heading);font-weight:700;font-size:19px;color:var(--c-dark);letter-spacing:-.01em;margin:2px 0 0}
.client-meta{font-family:var(--font-heading);font-weight:500;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--c-mid-gray)}
.client-did{font-family:var(--font-body);font-style:italic;font-size:15px;color:var(--c-dark);line-height:1.5;margin:0}
.client-link{font-family:var(--font-heading);font-weight:500;font-size:13px;color:var(--c-dark);text-decoration:none !important;border-bottom:1.5px solid var(--c-orange);padding-bottom:2px;margin-top:auto;align-self:flex-start}
.client-link:hover{color:var(--c-orange)}

/* ─── Booking systems band (SMB) ────────────────────────── */
.book-band{background:var(--c-light-gray)}
.book-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:48px}
@media(max-width:880px){.book-grid{grid-template-columns:1fr}}
.book-plan{background:var(--c-light);border:1px solid color-mix(in srgb, var(--c-dark) 8%, transparent);border-radius:16px;padding:28px;display:flex;flex-direction:column;gap:10px;position:relative;transition:transform .18s ease,border-color .18s ease}
.book-plan:hover{transform:translateY(-3px);border-color:var(--c-dark)}
.book-plan.featured{background:var(--c-dark);border-color:var(--c-dark)}
.book-badge{position:absolute;top:-12px;left:28px;font-family:var(--font-heading);font-weight:500;font-size:10px;letter-spacing:.18em;text-transform:uppercase;background:var(--c-orange);color:var(--c-light);padding:4px 12px;border-radius:999px}
.book-name{font-family:var(--font-heading);font-weight:700;font-size:20px;color:var(--c-dark);margin:0}
.book-plan.featured .book-name{color:var(--c-light)}
.book-scope{font-family:var(--font-heading);font-weight:500;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--c-mid-gray);margin-top:-4px}
.book-price{font-family:var(--font-heading);font-weight:700;font-size:44px;line-height:1;color:var(--c-orange);letter-spacing:-.03em;margin-top:6px}
.book-price small{font-family:var(--font-heading);font-weight:500;font-size:14px;letter-spacing:0;color:var(--c-mid-gray)}
.book-plan.featured .book-price{color:var(--c-light)}
.book-setup{font-family:var(--font-heading);font-size:12px;color:var(--c-mid-gray)}
.book-feat{list-style:none;margin:10px 0 0;padding:14px 0 0;border-top:1px solid var(--c-light-gray);display:flex;flex-direction:column;gap:8px;flex:1}
.book-plan.featured .book-feat{border-top-color:color-mix(in srgb, var(--c-light) 15%, transparent)}
.book-feat li{font-size:15px;color:var(--c-dark);line-height:1.45;display:grid;grid-template-columns:auto 1fr;gap:10px;align-items:baseline}
.book-feat li::before{content:'✓';font-family:var(--font-heading);font-weight:700;font-size:13px;color:var(--c-orange)}
.book-plan.featured .book-feat li{color:color-mix(in srgb, var(--c-light) 85%, transparent)}
.book-stats{display:flex;gap:40px;flex-wrap:wrap;margin-top:32px}
.book-stat .n{font-family:var(--font-heading);font-weight:700;font-size:32px;color:var(--c-orange);letter-spacing:-.02em;line-height:1}
.book-stat .l{font-family:var(--font-body);font-size:14px;color:var(--c-dark);margin-top:6px;max-width:24ch}
.book-fine{display:flex;gap:24px;flex-wrap:wrap;margin-top:24px;font-family:var(--font-heading);font-size:12px;letter-spacing:.04em;color:var(--c-mid-gray)}
.book-addons{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:16px}
@media(max-width:880px){.book-addons{grid-template-columns:1fr}}
.book-addon{background:var(--c-light);border:1px dashed color-mix(in srgb, var(--c-dark) 18%, transparent);border-radius:12px;padding:16px 20px}
.book-addon .an{font-family:var(--font-heading);font-weight:700;font-size:14px;color:var(--c-dark)}
.book-addon .ap{font-family:var(--font-heading);font-weight:500;font-size:12px;color:var(--c-orange);margin:2px 0 4px}
.book-addon .ad{font-size:13px;color:var(--c-dark);opacity:.7;line-height:1.5}
.book-soon{font-family:var(--font-heading);font-size:9px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;background:color-mix(in srgb, var(--c-orange) 14%, transparent);color:var(--c-orange);padding:2px 8px;border-radius:999px;margin-left:6px;vertical-align:middle}