/*
 * Example one page website (example-one-page.html): the R3 500 Black Friday package.
 * Deliberately NOT the Merkcoco look: it stands in for a client's own site, so it's light, plain
 * and built around one brand colour (--brand) that the demo bar can swap.
 * Merkcoco's own pieces (demo bar, "included" notes) use the .mk- prefix and the Merkcoco gradient.
 */
:root {
  --brand: #0F766E;          /* swapped by the demo bar; every option keeps white text ≥ 4.5:1 */
  --brand-ink: #FFFFFF;      /* text ON the brand colour: the demo bar switches it to dark for light colours */
  --brand-text: var(--brand); /* the brand colour AS text on white: deepened by the demo bar until it reads at 4.5:1 */
  --brand-soft: color-mix(in srgb, var(--brand) 9%, var(--bg));
  --brand-line: color-mix(in srgb, var(--brand) 28%, var(--bg));
  --ink: #16181D;
  --ink-2: #4A4F5A;          /* 8.4:1 on white */
  --ink-3: #6B7280;          /* 4.8:1 on white */
  --bg: #FFFFFF;
  /* Fonts: the demo bar's font picker swaps these (Google Fonts, loaded only when picked). */
  --font-body: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-head: var(--font-body);
  /* Background family. The demo bar's background palette recomputes all of these (and flips the
     ink to light on dark backgrounds); these are the white page defaults. */
  --surface: #FFFFFF;        /* cards: services, reviews, FAQ, form */
  --field: #FFFFFF;          /* form inputs */
  --field-line: #C9CAC4;
  --head-bg: rgba(255, 255, 255, .94);
  --bg-2: #F6F6F4;
  --line: #E4E4E0;
  --r: 16px;
  --r-lg: 24px;
  --maxw: 1160px;
  --gutter: clamp(16px, 4vw, 40px);
  --mk-grad: linear-gradient(135deg, #9900CD 0%, #B21A99 55%, #D33A59 100%);   /* Merkcoco --grad-safe */
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: var(--font-body);
  font-size: 1rem; line-height: 1.6;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3, p, ul, ol, dl, dd, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
button, input, textarea, select { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--brand-text); outline-offset: 3px; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: clamp(64px, 9vw, 112px); scroll-margin-top: 72px; }
.section--alt { background: var(--bg-2); }
.kicker { font-size: .8125rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--brand-text); }
.h2 { font-size: clamp(1.75rem, 1.2rem + 2vw, 2.75rem); line-height: 1.15; letter-spacing: -0.02em; font-weight: 700; }
.lead { font-size: 1.125rem; color: var(--ink-2); }
.section__head { display: grid; gap: 12px; max-width: 40rem; margin-bottom: clamp(32px, 5vw, 56px); }
.section__head--center { margin-inline: auto; text-align: center; justify-items: center; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 12px 22px; border-radius: 999px; border: 2px solid var(--brand);
  background: var(--brand); color: var(--brand-ink); font-weight: 600; text-decoration: none; cursor: pointer;
  transition: transform .2s, box-shadow .2s;
}
.btn:hover { transform: translateY(-1px); box-shadow: 0 10px 20px -12px rgba(0,0,0,.45); }
.btn--ghost { background: transparent; color: var(--brand-text); border-color: var(--brand-text); }
.btn svg { width: 18px; height: 18px; }

/* ── Placeholders: where the client's own logo and photos go ── */
.ph {
  position: relative; display: grid; place-items: center; align-content: center; gap: 8px; text-align: center;
  border: 2px dashed var(--brand-line); border-radius: var(--r);
  background:
    repeating-linear-gradient(135deg, transparent 0 14px, color-mix(in srgb, var(--brand) 5%, transparent) 14px 28px),
    var(--brand-soft);
  color: var(--brand-text); padding: 16px;
}
.ph svg { width: 34px; height: 34px; opacity: .85; }
.ph__label { font-size: .8125rem; font-weight: 600; letter-spacing: .04em; }
.ph__hint { font-size: .75rem; color: var(--ink-3); max-width: 22ch; }
.ph--logo { width: 148px; height: 44px; padding: 4px 12px; border-radius: 10px; grid-auto-flow: column; gap: 8px; }
.ph--logo svg { width: 20px; height: 20px; }
.ph--round { border-radius: 50%; padding: 0; }

/* ── Merkcoco notes: what's included, shown on top of the example ── */
.mk-note {
  display: inline-flex; align-items: center; gap: 8px; width: fit-content; max-width: 100%;
  padding: 6px 12px 6px 6px; border-radius: 999px; background: #121212; color: #fff;
  font-size: .75rem; font-weight: 500; line-height: 1.3; box-shadow: 0 8px 18px -10px rgba(0,0,0,.6);
}
.mk-note b { display: grid; place-items: center; flex: none; width: 22px; height: 22px; border-radius: 50%; background: var(--mk-grad) border-box; font-size: .6875rem; }
.mk-note--float { position: absolute; z-index: 3; }
body.notes-off .mk-note { display: none; }

/* ── Demo bar (Merkcoco's, not part of the client's site) ── */
.mk-bar {
  position: sticky; top: 0; z-index: 60; background: #0A0A0A; color: #fff; font-size: .8125rem;
  border-bottom: 1px solid rgba(255,255,255,.1);
}
.mk-bar__inner { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; min-height: 52px; padding-block: 8px; }
.mk-bar__brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: #fff; }
.mk-bar__mark { width: 30px; height: 18px; background: currentColor; -webkit-mask: url("../assets/brand/mark.svg") center / contain no-repeat; mask: url("../assets/brand/mark.svg") center / contain no-repeat; }
.mk-bar__text { color: rgba(255,255,255,.72); }
.mk-bar__text strong { color: #fff; font-weight: 600; }
.mk-bar__tools { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-left: auto; }
.mk-swatches { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.mk-swatches > span { color: rgba(255,255,255,.54); margin-right: 2px; }
.mk-swatch { flex: none; width: 22px; height: 22px; border-radius: 50%; border: 2px solid rgba(255,255,255,.25); background: var(--c); cursor: pointer; padding: 0; }
.mk-swatch:hover { transform: scale(1.12); }
/* Background swatches: a little bigger, so the four "vibes" read as the fun choice they are. */
.mk-swatch--bg { width: 28px; height: 28px; }
/* "Any colour": a rainbow swatch wrapping a native colour input. */
.mk-swatch--custom { position: relative; overflow: hidden; background: conic-gradient(#EF4444, #F59E0B, #FACC15, #22C55E, #06B6D4, #3B82F6, #A855F7, #EC4899, #EF4444); }
.mk-swatch--custom input { position: absolute; inset: -6px; width: calc(100% + 12px); height: calc(100% + 12px); opacity: 0; cursor: pointer; border: 0; padding: 0; }
.mk-swatch--custom.is-on { border-color: #fff; box-shadow: 0 0 0 2px #0A0A0A, 0 0 0 4px #fff; }
.mk-swatch--custom:focus-within { outline: 2px solid #C77DFF; outline-offset: 3px; }
.mk-swatch[aria-pressed="true"] { border-color: #fff; box-shadow: 0 0 0 2px #0A0A0A, 0 0 0 4px #fff; }
.mk-toggle { display: inline-flex; align-items: center; gap: 8px; background: none; border: 1px solid rgba(255,255,255,.22); border-radius: 999px; color: #fff; padding: 6px 12px; cursor: pointer; }
.mk-toggle__dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,.3); }
.mk-toggle[aria-pressed="true"] .mk-toggle__dot { background: #C77DFF; }
.mk-cta { display: inline-flex; align-items: center; min-height: 34px; padding: 6px 16px; border-radius: 999px; background: var(--mk-grad) border-box; color: #fff; font-weight: 600; text-decoration: none; }
.mk-bar :focus-visible { outline-color: #C77DFF; }
@media (max-width: 760px) {
  .mk-bar__text { display: none; } .mk-swatches > span { display: none; }
  /* With 16 swatches the bar wraps to three rows on phones: let it scroll away so it never
     covers the example site's own sticky header. */
  .mk-bar { position: relative; }
  body .site-head { top: 0; }   /* outranks the base .site-head rule further down */
}

/* ── Site header ── */
.site-head { position: sticky; top: var(--bar-h, 52px);   /* --bar-h: the demo bar's real height, set by the page script */ z-index: 50; background: var(--head-bg); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); }
.site-head__inner { position: relative; display: flex; align-items: center; gap: 24px; min-height: 72px; }
.site-head__logo { text-decoration: none; }
.site-nav { display: flex; gap: 22px; margin-left: auto; font-size: .9375rem; }
.site-nav a { text-decoration: none; color: var(--ink-2); }
.site-nav a:hover { color: var(--brand-text); }
.site-head__call { margin-left: 8px; min-height: 42px; padding: 8px 18px; white-space: nowrap; }
@media (max-width: 860px) {
  .site-nav { display: none; }
  .site-head__call { margin-left: auto; }
  /* No room beside the logo: hang the note just below the header instead. */
  .site-head .mk-note { position: absolute; left: var(--gutter); top: calc(100% + 10px); }
  main .hero { padding-top: 76px; }   /* outranks the base .hero rule below */
}

/* ── Hero ── */
.hero { padding-block: clamp(48px, 7vw, 96px); background: linear-gradient(180deg, var(--brand-soft), var(--bg)); }
.hero__grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 64px); align-items: center; }
.hero__copy { display: grid; gap: 22px; justify-items: start; }
.hero__title { font-size: clamp(2.25rem, 1.4rem + 3.6vw, 4rem); line-height: 1.05; letter-spacing: -0.03em; font-weight: 800; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 12px; }
.hero__trust { display: flex; flex-wrap: wrap; gap: 10px 22px; color: var(--ink-2); font-size: .9375rem; }
.hero__trust li { display: flex; align-items: center; gap: 8px; }
.hero__trust svg { width: 18px; height: 18px; color: var(--brand-text); }
.hero__media { position: relative; }
.hero__media .ph { aspect-ratio: 4 / 3.4; border-radius: var(--r-lg); }
.hero__media .mk-note--float { left: 16px; top: 16px; }
@media (max-width: 860px) { .hero__grid { grid-template-columns: 1fr; } }

/* ── About ── */
.about__grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(32px, 6vw, 80px); align-items: center; }
.about__media { position: relative; }
.about__media .ph { aspect-ratio: 1; border-radius: var(--r-lg); }
.about__media .mk-note--float { right: 16px; bottom: 16px; }
.about__copy { display: grid; gap: 18px; }
.stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 12px; }
.stats div { padding: 18px; border-radius: var(--r); background: var(--bg-2); }
.stats dt { font-size: .8125rem; color: var(--ink-3); }
.stats dd { font-size: 1.75rem; font-weight: 800; color: var(--brand-text); letter-spacing: -0.02em; }
@media (max-width: 860px) { .about__grid { grid-template-columns: 1fr; } .about__media { max-width: 420px; } }
@media (max-width: 480px) { .stats { gap: 8px; } .stats div { padding: 14px 12px; } .stats dd { font-size: 1.375rem; } }
@media (max-width: 340px) { .stats { grid-template-columns: 1fr; } }

/* ── Services ── */
.services { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 18px; }
.service { display: grid; gap: 12px; align-content: start; padding: 26px; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--line); }
.service__icon { width: 52px; height: 52px; border-radius: 14px; padding: 0; }
.service__icon svg { width: 24px; height: 24px; }
.service h3 { font-size: 1.125rem; }
.service p { color: var(--ink-2); font-size: .9375rem; }
.service .service__price { margin-top: 4px; font-weight: 700; color: var(--brand-text); font-size: .9375rem; }

/* ── Gallery ── */
.gallery { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.gallery .ph { aspect-ratio: 4 / 3; }
.gallery li:first-child { grid-row: span 2; }
.gallery li:first-child .ph { height: 100%; aspect-ratio: auto; }
@media (max-width: 700px) { .gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); } .gallery li:first-child { grid-row: auto; grid-column: span 2; } .gallery li:first-child .ph { aspect-ratio: 16 / 9; } }

/* ── Reviews ── */
.reviews { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 18px; }
.review { display: grid; gap: 16px; align-content: start; padding: 26px; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--line); }
.stars { display: flex; gap: 2px; color: #E8A317; }
.stars svg { width: 18px; height: 18px; }
.review blockquote { color: var(--ink-2); }
.review figcaption { display: flex; align-items: center; gap: 12px; }
.review .ph--round { width: 44px; height: 44px; flex: none; }
.review .ph--round svg { width: 20px; height: 20px; }
.review cite { font-style: normal; font-weight: 600; display: block; }
.review small { color: var(--ink-3); }

/* ── FAQ ── */
.faq { display: grid; gap: 12px; max-width: 46rem; margin-inline: auto; }
.faq details { border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); }
.faq summary { display: flex; justify-content: space-between; gap: 16px; padding: 18px 22px; font-weight: 600; cursor: pointer; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--brand-text); font-size: 1.4rem; line-height: 1; transition: transform .2s; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { padding: 0 22px 20px; color: var(--ink-2); }

/* ── Contact ── */
.contact__grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(28px, 5vw, 56px); align-items: start; }
.form { display: grid; gap: 16px; padding: clamp(22px, 4vw, 36px); border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--line); box-shadow: 0 24px 48px -32px rgba(0,0,0,.25); }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form label { display: grid; gap: 6px; font-size: .875rem; font-weight: 600; }
.form input, .form textarea { width: 100%; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--field-line); background: var(--field); color: var(--ink); font-weight: 400; }
.form input:focus, .form textarea:focus { outline: 3px solid color-mix(in srgb, var(--brand) 35%, transparent); border-color: var(--brand); }
.form__status { font-size: .875rem; color: var(--brand-text); font-weight: 600; }
@media (max-width: 560px) { .form__row { grid-template-columns: 1fr; } }
.details { display: grid; gap: 14px; }
.details li { display: grid; grid-template-columns: 40px 1fr; gap: 12px; align-items: center; }
.details li > span:first-child { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--brand-soft); color: var(--brand-text); }
.details svg { width: 20px; height: 20px; }
.details a { font-weight: 600; text-decoration: none; }
.details a:hover { color: var(--brand-text); }
.details small { display: block; color: var(--ink-3); }
.hours { margin-top: 8px; padding: 18px 20px; border-radius: var(--r); background: var(--bg-2); display: grid; grid-template-columns: auto 1fr; gap: 6px 18px; font-size: .9375rem; }
.hours dt { color: var(--ink-3); }
.map { position: relative; margin-top: 8px; }
.map .ph { aspect-ratio: 16 / 9; }
@media (max-width: 860px) { .contact__grid { grid-template-columns: 1fr; } }

/* ── Footer ── */
.site-foot { background: #111317; color: rgba(255,255,255,.72); padding-block: 48px 32px; font-size: .9375rem; }
.site-foot__top { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 24px; align-items: center; padding-bottom: 28px; border-bottom: 1px solid rgba(255,255,255,.12); }
.site-foot .ph--logo { --brand-line: rgba(255,255,255,.35); background: rgba(255,255,255,.06); color: #fff; }
.socials { display: flex; gap: 10px; }
.socials a { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; border: 1px solid rgba(255,255,255,.25); color: #fff; }
.socials a:hover { background: var(--brand); border-color: var(--brand); color: var(--brand-ink); }
.socials svg { width: 18px; height: 18px; }
.site-foot__bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; padding-top: 22px; font-size: .8125rem; }
.site-foot__bottom a { color: #fff; }

/* ── Floating WhatsApp button ── */
.wa-float {
  position: fixed; right: 20px; bottom: 20px; z-index: 40; display: flex; align-items: center; gap: 10px;
  padding: 12px 18px 12px 14px; border-radius: 999px; background: #17784A;   /* white text 5.3:1 */ color: #fff; text-decoration: none; font-weight: 600;
  box-shadow: 0 14px 28px -14px rgba(0,0,0,.55);
}
.wa-float svg { width: 24px; height: 24px; }
.wa-float .mk-note--float { right: 0; bottom: calc(100% + 10px); white-space: nowrap; max-width: none; }
@media (max-width: 480px) { .wa-float__text, .wa-float .mk-note { display: none; } .wa-float { padding: 14px; } }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* ── Generic ↔ finished example (hover, focus, tap, or the demo bar switch) ──
   .pair stacks its two layers in one grid cell, so it is always as big as the larger of the
   two and nothing jumps when they swap. [data-swap] is the element that reacts. */
.pair { display: grid; }
.pair--inline { display: inline-grid; vertical-align: baseline; }
.site-head__logo .pair--inline, .site-foot__top .pair--inline, figcaption > .pair--inline { vertical-align: middle; }
.pair > .g, .pair > .x { grid-area: 1 / 1; }
/* Sequential, not a cross fade: the outgoing layer fades out first, then the incoming one fades
   in, in both directions, so the two are never visible on top of each other (a cross fade reads
   as doubled text). */
.g { transition: opacity .2s ease .14s, visibility 0s linear .14s; }   /* coming back: wait for .x to go */
.x { transition: opacity .14s ease, visibility 0s linear .14s; }       /* going away: fast */
.pair > .x, .pair--media > .x { opacity: 0; visibility: hidden; }
/* Active state. The trigger is either the pair itself (a headline) or a card around it. */
[data-swap]:is(:hover, :focus-within, .is-on) > .g,
[data-swap]:is(:hover, :focus-within, .is-on) :is(.pair, .pair--media) > .g,
body.show-examples :is(.pair, .pair--media) > .g {
  opacity: 0; visibility: hidden; transition: opacity .14s ease, visibility 0s linear .14s;
}
[data-swap]:is(:hover, :focus-within, .is-on) > .x,
[data-swap]:is(:hover, :focus-within, .is-on) :is(.pair, .pair--media) > .x,
body.show-examples :is(.pair, .pair--media) > .x {
  opacity: 1; visibility: visible; transition: opacity .2s ease .14s, visibility 0s linear .14s;
}

/* Photos and map: the placeholder sets the size; the example image covers it. */
.pair--media { position: relative; height: 100%; }
.pair--media > .x { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; object-fit: cover; }
.hero__media .pair--media > .x, .about__media .pair--media > .x { border-radius: var(--r-lg); }
.gallery .pair--media > .x, .map .pair--media > .x { border-radius: var(--r); overflow: hidden; }
.ex-photo img { width: 100%; height: 100%; object-fit: cover; }
.ex-photo figcaption {
  position: absolute; left: 10px; bottom: 10px; max-width: calc(100% - 20px);
  padding: 5px 12px; border-radius: 999px; background: rgba(255,255,255,.92); color: #16181D;
  font-size: .8125rem; font-weight: 600;
}
.gallery li:first-child .pair--media { height: 100%; }
.ex-logo { height: 40px; width: auto; }
.ex-avatar { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--brand); color: var(--brand-ink); font-weight: 700; font-size: .875rem; }

/* Contact heading with the mascot beside it (a transparent cutout: no frame, no radius). */
.contact__head { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 32px; align-items: center; margin-bottom: clamp(32px, 5vw, 56px); }
.contact__head .section__head { margin-bottom: 0; }
.contact__mascot { width: clamp(200px, 24vw, 300px); height: auto; aspect-ratio: 760 / 716; }
.contact__mascot .ph { height: 100%; }
.contact__mascot.pair--media > .x { object-fit: contain; border-radius: 0; }
@media (max-width: 700px) {
  .contact__head { grid-template-columns: 1fr; }
  .contact__mascot { justify-self: center; width: min(260px, 70vw); }
}

/* Dark page backgrounds: the (dark) example logo in the header flips to white. */
body.bg-dark .site-head .ex-logo { filter: invert(1); }

/* ───────── Design tool (js/builder.js, opened from the checklist via #build) ───────── */
/* While building, only the template layer shows: it's what the client types over. */
body.building .x { display: none !important; }
body.building .g { opacity: 1 !important; visibility: visible !important; }
body.building .mk-note, body.building [data-examples-toggle], body.building [data-notes-toggle], body.building .mk-cta { display: none; }
body.building { padding-bottom: 88px; }
body.building .wa-float { bottom: 100px; }

body.editing [data-bk] {
  border-radius: 6px; outline: 2px dashed transparent; outline-offset: 3px; cursor: text;
  transition: outline-color .15s, background-color .15s;
}
body.editing [data-bk]:hover { outline-color: color-mix(in srgb, var(--brand-text) 55%, transparent); }
body.editing [data-bk]:focus { outline: 2px solid var(--brand-text); background: color-mix(in srgb, var(--brand) 8%, transparent); }

/* Bottom bar */
.bk-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 70; display: none; align-items: center; justify-content: space-between; gap: 12px 20px; flex-wrap: wrap;
  padding: 14px max(16px, calc((100% - 1160px) / 2)); background: #0A0A0A; color: #fff; font-size: .875rem;
  border-top: 1px solid transparent; border-image: var(--mk-grad) 1; box-shadow: 0 -12px 30px -18px rgba(0,0,0,.6);
}
body.building .bk-bar { display: flex; }
.bk-bar__text { color: rgba(255,255,255,.75); }
.bk-bar__text strong { color: #fff; }
.bk-bar__text em { font-style: normal; color: #C77DFF; }
.bk-bar__actions { display: flex; gap: 10px; margin-left: auto; }
.bk-btn { white-space: nowrap;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 42px; padding: 8px 18px; border-radius: 999px;
  border: 1px solid transparent; background: var(--mk-grad) border-box; color: #fff; font-weight: 600; font-size: .875rem; cursor: pointer; text-decoration: none;
}
.bk-btn--ghost { background: transparent; border-color: rgba(255,255,255,.3); }
.bk-btn:disabled { opacity: .6; cursor: default; }
@media (max-width: 640px) { .bk-bar__actions [data-bk-count] { display: none; } .bk-bar__actions { width: 100%; } .bk-bar__actions .bk-btn { flex: 1; } body.building { padding-bottom: 130px; } body.building .wa-float { bottom: 140px; } }

/* Headings take the heading font (the same as the body font unless a pairing sets it). */
.hero__title, .h2, .service h3, .review cite, .stats dd, .faq summary { font-family: var(--font-head); }

/* Font picker in the demo bar: a button plus a listbox whose options show in their own font */
.mk-font { position: relative; display: inline-flex; align-items: center; gap: 8px; color: rgba(255,255,255,.54); }
.mk-font__btn {
  display: inline-flex; align-items: center; gap: 8px; min-height: 32px; padding: 4px 32px 4px 14px; border-radius: 999px;
  border: 1px solid rgba(255,255,255,.25); color: #fff; font-size: .875rem; cursor: pointer; min-width: 120px;
  background: #161616 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 4.5 6 7.5 9 4.5' fill='none' stroke='%23fff' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E") right 12px center / 12px no-repeat;
}
.mk-font__btn:hover, .mk-font__btn[aria-expanded="true"] { border-color: rgba(255,255,255,.55); }
.mk-font__btn:focus-visible { outline: 2px solid #C77DFF; outline-offset: 2px; }
.mk-font__list {
  position: absolute; top: calc(100% + 8px); left: 0; z-index: 80; min-width: 250px; max-height: 70vh; overflow: auto;
  margin: 0; padding: 6px; list-style: none; border-radius: 16px; background: #161616; border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 24px 50px -20px rgba(0,0,0,.8);
}
.mk-font__list[hidden] { display: none; }
.mk-font__list:focus { outline: none; }
.mk-font__list li {
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 10px 14px; border-radius: 10px; cursor: pointer; color: #fff;
}
.mk-font__list li.is-active { background: rgba(255,255,255,.08); }
.mk-font__list li[aria-selected="true"] { background: rgba(199,125,255,.16); }
.mk-font__list li[aria-selected="true"]::after { content: "✓"; color: #C77DFF; font-family: ui-sans-serif, system-ui, sans-serif; }
.mk-font__name { font-size: 1.1875rem; line-height: 1.2; }
.mk-font__list small { margin-left: auto; color: rgba(255,255,255,.5); font-size: .75rem; white-space: nowrap; }
@media (max-width: 760px) { .mk-font > span { display: none; } }
/* Merkcoco's own pieces (demo bar, notes, design bar) never take the client's chosen font. */
.mk-bar, .mk-note, .bk-bar { font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; }