/* Every card uses the hero panel's style: dark, with big rounded corners.
   Small "screens" inside cards (payment box, Google result, chat, map tiles)
   stay light so they still read as previews. Loaded last. */
:root { --card: #12110f; --card-2: #1b1a17; --card-line: #2b2825; --card-text: #f4f1ec; --card-muted: #a8a39b; --card-r: 28px; }

.bx, .tier, .wk, .steps-row li, .rev, .lmap,
.price-notes > div, .area-groups > div, .loc-facts > div, .faq-layout .faq details {
  background: var(--card); color: var(--card-text); border: 1px solid var(--card-line); border-radius: var(--card-r);
}
.bx h3, .tier h3, .steps-row h3, .price-notes h3, .area-groups h3, .wk-meta b, .rev figcaption b { color: #fff; }
.bx p, .tier-for, .tier-per, .steps-row p, .wk-meta small, .rev figcaption small, .price-notes .muted, .loc-facts dt { color: var(--card-muted); }
.bx:hover, .wk:hover { border-color: rgba(255,106,0,.55); }

/* grids that used 1px hairline gaps become separate rounded cards */
.price-notes, .area-groups, .loc-facts { background: none; border: 0; border-radius: 0; overflow: visible; gap: 10px; }
.price-notes > div, .area-groups > div, .loc-facts > div { border-radius: 24px; }

/* services */
.svc-ic, .bx-web .svc-ic { background: rgba(255,106,0,.16); }
.svc-price, .bx-web .svc-price { color: #ffb27a; }
.bx-web { background: var(--card); border-color: var(--card-line); color: var(--card-text); }
.bx-web p { color: var(--card-muted); }
.bx-mock figcaption, .bx-mock a { color: var(--card-muted); }
.mock-pay, .mock-serp { border-color: transparent; }

/* pricing */
.tier ul { border-top-color: rgba(255,255,255,.12); }
.tier li { color: #e6e1d9; }
.tier li.tier-plus { color: #fff; }
.tier .btn-ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,.3); }
.tier .btn-ghost:hover { background: #fff; color: var(--ink); border-color: #fff; }
.tier-pick { background: var(--card-2); border: 1.5px solid var(--accent); }
.price-notes li { color: #e6e1d9; }
.pay-chips span { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.14); color: #f4f1ec; }
.price-notes .btn, .price-notes .btn-ghost { color: #ffb27a; }
.price-notes .btn-ghost { background: transparent; border-color: rgba(255,255,255,.3); }

/* work */
.wk-shot { border-color: rgba(255,255,255,.08); border-radius: 18px; }
.wk-go { background: rgba(255,255,255,.08); color: #fff; }
.wk:hover { color: var(--card-text); }

/* process */
.step-n { background: #fff; color: var(--ink); box-shadow: 0 0 0 5px rgba(255,106,0,.2); }
.step-when { background: rgba(255,106,0,.16); color: #ffb27a; }

/* reviews */
.rev blockquote { color: var(--card-text); }

/* service areas */
.area-groups .chips a { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.12); color: #e9e4dc; }
.area-groups .chips a:hover { background: var(--accent); border-color: var(--accent); color: #fff; }
.area-groups .chips a.is-key { background: rgba(255,106,0,.16); border-color: rgba(255,106,0,.4); color: #ffb27a; }
.area-groups .chips a[aria-current="page"] { background: #fff; border-color: #fff; color: var(--ink); }
.lmap { overflow: hidden; }
.lmap-legend { color: var(--card-muted); border-top-color: var(--card-line); }
.lmap-legend i { box-shadow: 0 0 0 1px var(--card-line); }
.lmap-canvas { border-radius: 0; }

/* FAQ */
.faq-layout .faq details { padding: 0 22px; }
.faq-layout .faq summary { color: #fff; }
.faq-layout .faq summary::after { color: #ffb27a; }
.faq-layout .faq details[open] { background: var(--card-2); border-color: rgba(255,106,0,.45); }
.faq-layout .faq details p { color: #c9c4bc; }
.faq-layout .faq details p a { color: #ffb27a; }

/* location pages */
.loc-facts dd { color: var(--card-text); }
.loc-side .chips a, .loc-main .chips a { background: #fff; }
@media (min-width: 960px) and (min-height: 540px) { .area-layout .area-groups { gap: 6px; } .area-layout .area-groups > div { border-radius: 20px; } }

/* -- pills: same dark glass style as the hero's "Web design studio in Harare" -- */
.tier-badge, .step-when, .area-groups .chips a.is-key {
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.16); color: #fff; }
.tier-badge { backdrop-filter: blur(8px); background: #1b1a17; }
.area-groups .chips a.is-key:hover { background: rgba(255,255,255,.16); color: #fff; border-color: rgba(255,255,255,.3); }

/* -- service icons on white -- */
.svc-ic, .bx-web .svc-ic { background: #fff; }

/* -- Custom websites card: light -- */
.bx-web { background: #f3f1ec; border-color: #e6e3dd; color: var(--ink); }
.bx-web h3 { color: var(--ink); }
.bx-web p, .bx-mock figcaption, .bx-mock a { color: var(--muted); }
.bx-web .svc-price { color: var(--accent-ink); }

/* -- Pesepay preview: dark glass checkout panel -- */
.mock-pay { background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.12); border-radius: 20px; box-shadow: none; padding: 14px; }
.m-methods span { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.14); color: #f4f1ec; border-radius: 999px; }
.m-methods span:first-child { background: rgba(255,106,0,.18); border-color: rgba(255,106,0,.5); color: #ffb27a; }
.m-paybtn { border-radius: 999px; }
.mock-pay small { color: var(--card-muted); }

/* -- Google result preview: dark glass search card -- */
.mock-serp { background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.12); border-radius: 20px; }
.m-q { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.14); color: #f4f1ec; }
.m-res b { color: #fff; }
.m-res small { color: var(--card-muted); }

/* -- booking + quote dialogs: hero-style dark panel (they used the pill radius by mistake) -- */
dialog { border-radius: 28px; border: 1px solid var(--card-line); background: var(--card); color: var(--card-text); width: min(560px, calc(100vw - 24px)); max-height: calc(100vh - 32px); padding: 0; box-shadow: 0 40px 100px -30px rgba(0,0,0,.85); overflow: hidden; }
dialog::backdrop { background: rgba(8,8,7,.6); backdrop-filter: blur(4px); }
.dlg-head { padding: 22px 24px 16px; border-bottom: 1px solid var(--card-line); }
.dlg-head h2 { color: #fff; font-size: 1.35rem; }
.dlg-head .label { color: #ffb27a; }
.dlg-x { color: #fff; width: 36px; height: 36px; border-radius: 50%; background: rgba(255,255,255,.08); font-size: 22px; line-height: 1; }
.dlg-x:hover { background: rgba(255,255,255,.16); }
.dlg-body { padding: 18px 24px 22px; max-height: calc(100vh - 210px); }
.dlg-foot { padding: 14px 24px; border-top: 1px solid var(--card-line); }
.dlg-foot .total { color: #ffb27a; }
dialog .choice { border-radius: 16px; border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.05); color: #f4f1ec; }
dialog .choice:hover { border-color: rgba(255,106,0,.6); background: rgba(255,255,255,.08); }
dialog .choice[aria-pressed="true"] { border-color: var(--accent); background: rgba(255,106,0,.16); }
dialog .choice small, dialog .choice .p { color: var(--card-muted); }
dialog .row-chips .choice { border-radius: 999px; }
dialog .sub, dialog .muted { color: var(--card-muted); }
dialog .field { border-radius: 14px; border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.05); color: #fff; }
dialog .field::placeholder { color: #8f8a82; }
dialog .field:focus { border-color: var(--accent); background: rgba(255,255,255,.08); }
dialog .box { border-radius: 18px; border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.04); color: var(--card-text); }
dialog .box dt { color: var(--card-muted); }
dialog .lines li { color: var(--card-muted); }
dialog .lines li.t { color: #fff; border-top-color: rgba(255,255,255,.14); }
dialog .estimate .big { color: #fff; }
dialog .linkbtn { color: var(--card-muted); }
dialog .linkbtn:hover { color: #fff; }
dialog .btn { background: var(--accent); border-color: var(--accent); color: #fff; }
dialog .btn:hover { background: #fff; border-color: #fff; color: var(--ink); }
dialog .btn-ghost { background: transparent; border-color: rgba(255,255,255,.3); color: #fff; }
dialog .err { color: #ff8a7a; }
dialog p[style*="var(--serif)"] { color: #fff; }
@media (max-width: 560px) { dialog { width: calc(100vw - 16px); border-radius: 24px; } .dlg-body { padding: 16px 18px 20px; } .dlg-head, .dlg-foot { padding-left: 18px; padding-right: 18px; } }