
:root {
  --navy: #0b274a;
  --orange: #ff7a00;
  --dark: #0f1a2b;
  --light: #f7f9fc;
  --text: #101828;
}
* { box-sizing: border-box; }
html, body { margin:0; padding:0; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Inter, Arial, sans-serif; color: var(--text); background: white; }
a { color: var(--navy); text-decoration: none; }
a.button { display:inline-block; padding:12px 18px; border-radius:8px; border:1px solid var(--navy); }
a.button.primary { background: var(--orange); color:white; border-color: var(--orange); }
a.button.ghost { background: transparent; color: var(--navy); }
header.top { background: white; border-bottom: 1px solid #e6e8ee; position: static; top:0; z-index: 5; }
.container { width: min(1100px, 92%); margin: 0 auto; }
.navbar { display:flex; align-items:center; justify-content: space-between; padding: 14px 0; gap:18px; }
.logo { display:flex; align-items:center; gap:12px; color: var(--navy); font-weight:700; }
.logo img { height:42px; width:auto; }
nav ul { list-style:none; display:flex; gap:18px; padding:0; margin:0; flex-wrap:wrap; }
nav a { padding:8px 10px; border-radius:6px; }
nav a:hover { background:#f2f4f8; }
.hero { background: var(--orange); color:white; }
.hero .container { display:grid; grid-template-columns: 1.4fr 1fr; gap: 28px; padding: 40px 0; }
.hero h1 { margin: 0 0 12px; font-size: clamp(26px, 3.8vw, 40px); line-height:1.15; }
.hero p.lede { font-size: clamp(16px, 2.1vw, 18px); opacity:0.95; }
.badges { display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap:10px; margin-top:16px; }
.badge { background: rgba(255,255,255,0.15); border:1px solid rgba(255,255,255,0.35); padding:8px 10px; border-radius:8px; text-align:center; font-weight:600; }
.section { padding: 40px 0; }
.section h2 { color: var(--navy); margin: 0 0 14px; font-size: clamp(22px, 2.6vw, 28px); }
.section .sub { color:#475467; margin-top:-6px; }
.grid-2 { display:grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 22px; }
.grid-3 { display:grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 18px; }
.card { border:1px solid #e6e8ee; border-radius:12px; padding:16px; background:white; }
.accordion { border:1px solid #e6e8ee; border-radius:12px; overflow:hidden; background:white; }
.accordion-item + .accordion-item { border-top:1px solid #e6e8ee; }
.accordion-header { width:100%; text-align:left; padding:16px; background:white; border:0; display:flex; align-items:center; justify-content:space-between; font-weight:700; color: var(--navy); cursor:pointer; }
.accordion-header .price { font-weight:800; }
.accordion-content { display:none; padding:0 16px 16px; color:#475467; }
.accordion-item.open .accordion-content { display:block; }
.kv { display:flex; gap:10px; align-items:center; color:#475467; }
.kv::before { content:"•"; color: var(--orange); font-weight:bold; }
.cta-row { display:flex; gap:12px; flex-wrap:wrap; margin-top:14px; }
.notice { background:#fff7ed; border:1px solid #ffedd5; color:#9a3412; padding:10px 12px; border-radius:8px; }
footer { background: #0f172a; color:#cbd5e1; padding: 30px 0; }
footer a { color:#cbd5e1; }
small.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; color:#475467; }
@media (max-width: 860px) {
  .hero .container { grid-template-columns: 1fr; }
  .badges { grid-template-columns: 1fr; }
  .grid-2 { grid-template-columns: 1fr; }
  .grid-3 { grid-template-columns: 1fr; }
}


/* Payment embeds */
.payment-block { margin-top: 10px; }
.payment-block .alt-pay { margin-top: 6px; font-size: 0.95rem; }
.payment-block .alt-pay a { text-decoration: underline; }

/* Cash App section */
.cashapp-wrap { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.cashapp-button { display:inline-block; padding:10px 16px; border-radius:8px; background:#00d632; color:#000; font-weight:600; }
.cashapp-qr img { width: 160px; height: 160px; }
.cashapp-qr figcaption { text-align:center; margin-top:6px; font-weight:600; }

/* --- Added helpers --- */
.showcase-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px}
.showcase-grid figure{margin:0}
.showcase-grid img{width:100%;height:auto;display:block;border-radius:12px}
.showcase-grid figcaption{margin-top:8px;font-weight:600}
.faq-item{border:1px solid #e6e6e6;border-radius:10px;padding:10px;margin:10px 0;background:#fff}
.faq-item>summary{font-weight:700;cursor:pointer;outline:none}
.faq-item[open]{box-shadow:0 2px 10px rgba(0,0,0,0.04)}
.serve-inline{display:block}
.serve-inline *{display:inline}
.serve-inline li{display:inline;margin:0 6px}
.serve-inline li+li::before{content:'|';margin-right:6px}
.social-links{display:flex;gap:12px;list-style:none;margin:8px 0 0 0;padding:0;flex-wrap:wrap}
.social-links a{text-decoration:underline}

/* Larger price for consultation items only */
div[aria-label="Consultation types"].accordion .accordion-header .price{font-size:1.25rem;font-weight:700}
@media (min-width:768px){
  div[aria-label="Consultation types"].accordion .accordion-header .price{font-size:1.35rem}
}
