/* ==========================================================================
   NEXUS Mobile Detailing of Ponte Vedra – design system
   Mobile-first, zero external UI dependencies, fast-loading.
   Brand hook: Ponte Vedra Beach sits right where the manicured golf-club
   coastline meets the Atlantic – a literal "nexus" of land and sea. We
   echo that with a warm brass accent (club/coastal premium) against a
   deep navy base, plus a subtle dune-line motif instead of the generic
   "water droplet" clichés most detailers use.
   ========================================================================== */

:root {
  /* Color */
  --ink: #10202b;          /* deep navy-charcoal – headers, footer, hero */
  --ink-2: #17303f;
  --accent: #c1903f;       /* brass/gold – primary CTA, premium-coastal accent */
  --accent-dark: #9c7332;
  --accent-soft: #faf1e2;
  --gold: #2d7f86;         /* ocean teal – small secondary highlight for "most popular" etc */
  --bg: #f6f8fa;
  --surface: #ffffff;
  --text: #16232f;
  --text-muted: #56697a;
  --border: #e1e7ec;
  --success: #1fa971;

  /* Type */
  --font-head: "Segoe UI", -apple-system, BlinkMacSystemFont, sans-serif;
  --font-body: "Segoe UI", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;

  /* Rhythm */
  --radius: 14px;
  --radius-sm: 8px;
  --shadow-sm: 0 1px 3px rgba(12, 26, 40, 0.08);
  --shadow-md: 0 8px 24px rgba(12, 26, 40, 0.12);
  --shadow-lg: 0 20px 48px rgba(12, 26, 40, 0.18);
  --container: 1180px;
  --gap: clamp(1.25rem, 3vw, 2.5rem);

  color-scheme: light;
}

/* -------------------------------------------------- reset & base -------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: hidden; }
body {
  margin: 0;
  overflow-x: hidden;
  font-family: var(--font-body);
  color: var(--text);
  background: var(--bg);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4 { font-family: var(--font-head); font-weight: 700; line-height: 1.15; margin: 0 0 .5em; letter-spacing: -0.01em; }
h1 { font-size: clamp(2rem, 5vw, 3.1rem); }
h2 { font-size: clamp(1.6rem, 3.4vw, 2.3rem); }
h3 { font-size: 1.25rem; }
p { margin: 0 0 1em; color: var(--text-muted); }
ul { margin: 0; padding: 0; list-style: none; }
button { font: inherit; cursor: pointer; }
.container { max-width: var(--container); margin-inline: auto; padding-inline: 1.25rem; }
section { padding-block: clamp(2.75rem, 6vw, 5rem); }
.eyebrow {
  display: inline-flex; align-items: center; gap: .5rem;
  font-size: .78rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--accent-dark); margin-bottom: .75rem;
}
.eyebrow::before { content: ""; width: 22px; height: 2px; background: var(--accent); display: inline-block; }
.section-head { max-width: 640px; margin-bottom: clamp(1.75rem, 4vw, 2.75rem); }
.section-head.center { margin-inline: auto; text-align: center; }
.text-center { text-align: center; }
.muted { color: var(--text-muted); }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip-link {
  position: absolute; left: -999px; top: 0; background: var(--accent); color: #fff;
  padding: .75rem 1.25rem; z-index: 200; border-radius: 0 0 8px 0;
}
.skip-link:focus { left: 0; }

/* -------------------------------------------------- buttons ------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .85rem 1.5rem; border-radius: 999px; font-weight: 700; font-size: .95rem;
  border: 2px solid transparent; transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
  white-space: nowrap;
}
.btn:active { transform: scale(.97); }
.btn-primary { background: var(--accent); color: #fff; box-shadow: var(--shadow-sm); }
.btn-primary:hover { background: var(--accent-dark); box-shadow: var(--shadow-md); }
.btn-ghost { background: transparent; border-color: rgba(255,255,255,.55); color: #fff; }
.btn-ghost:hover { background: rgba(255,255,255,.12); }
.btn-outline { background: transparent; border-color: var(--ink); color: var(--ink); }
.btn-outline:hover { background: var(--ink); color: #fff; }
.btn-dark { background: var(--ink); color: #fff; }
.btn-dark:hover { background: var(--ink-2); }
.btn-block { width: 100%; }
.btn-sm { padding: .6rem 1.1rem; font-size: .85rem; }
.btn-icon { width: 1.1em; height: 1.1em; flex: none; }

/* -------------------------------------------------- top utility bar ----- */
.utility-bar {
  background: var(--ink); color: #cfe3e6; font-size: .82rem;
  display: none;
}
.utility-bar .container { display: flex; justify-content: space-between; align-items: center; padding-block: .45rem; }
.utility-bar a { display: inline-flex; align-items: center; gap: .4rem; }
.utility-bar a:hover { color: #fff; }
@media (min-width: 860px) { .utility-bar { display: block; } }

/* -------------------------------------------------- header/nav ---------- */
.site-header {
  position: sticky; top: 0; z-index: 100; background: rgba(255,255,255,.98);
  border-bottom: 1px solid var(--border);
}
.nav-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-block: .85rem; }
.logo { display: flex; align-items: center; gap: .6rem; font-family: var(--font-head); }
.logo-mark {
  width: 40px; height: 40px; border-radius: 10px; background: var(--ink);
  display: grid; place-items: center; color: var(--accent); font-weight: 800; font-size: 1rem; flex: none;
}
.logo-img { height: 56px; width: auto; display: block; }
.logo-text { display: flex; flex-direction: column; line-height: 1.05; }
.logo-text strong { font-size: 1.05rem; color: var(--ink); font-weight: 800; }
.logo-text span { font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: var(--accent-dark); font-weight: 700; }

.nav-actions { display: flex; align-items: center; gap: .6rem; }
.nav-toggle {
  display: inline-flex; background: none; border: 1px solid var(--border); border-radius: 8px;
  padding: .5rem; margin-left: .25rem;
}
.nav-toggle svg { width: 22px; height: 22px; }
@media (min-width: 960px) { .nav-toggle { display: none; } }

.main-nav {
  position: fixed; inset: 0 0 0 auto; width: min(320px, 88vw); background: var(--surface);
  transform: translateX(100%); transition: transform .25s ease; z-index: 110;
  box-shadow: var(--shadow-lg); overflow-y: auto; padding: 1.25rem;
}
.main-nav.is-open { transform: translateX(0); }
.nav-close { margin-left: auto; display: flex; background: none; border: none; padding: .5rem; }
.nav-close svg { width: 22px; height: 22px; }
.nav-list { display: flex; flex-direction: column; gap: .1rem; margin-top: 1rem; }
.nav-list > li { border-bottom: 1px solid var(--border); }
.nav-list > li > a, .nav-group-label {
  display: flex; align-items: center; justify-content: space-between; padding: .85rem .2rem;
  font-weight: 600; color: var(--ink);
}
.nav-sub { display: none; padding-left: .85rem; padding-bottom: .5rem; }
.nav-group.is-open .nav-sub { display: block; }
.nav-group.is-open .chevron { transform: rotate(180deg); }
.nav-sub li a { display: block; padding: .55rem .2rem; color: var(--text-muted); font-size: .93rem; }
.nav-sub li a:hover { color: var(--accent-dark); }
.chevron { width: 16px; height: 16px; transition: transform .2s ease; flex: none; }
.nav-cta { display: flex; flex-direction: column; gap: .6rem; margin-top: 1.25rem; }

.nav-overlay {
  /* Must stay below .site-header's own z-index (100) – .site-header is
     position:sticky with a z-index, which makes it its own stacking
     context, so .main-nav's z-index:110 only wins *inside* the header.
     If this overlay's z-index is higher than the header's, it paints on
     top of the whole header – including the open mobile nav panel – and
     every tap inside the slide-out menu (Services accordion, Book Now,
     Text Us, any link) silently hits the overlay instead. */
  position: fixed; inset: 0; background: transparent; pointer-events: none; z-index: 95;
}
.nav-overlay.is-open { pointer-events: auto; }

@media (min-width: 960px) {
  .main-nav {
    position: static; width: auto; transform: none; box-shadow: none; padding: 0; overflow: visible;
  }
  .nav-close { display: none; }
  .nav-list { flex-direction: row; align-items: center; gap: 1.6rem; margin: 0; }
  .nav-list > li { border-bottom: none; position: relative; }
  .nav-list > li > a, .nav-group-label { padding: .4rem 0; font-size: .95rem; cursor: pointer; }
  .nav-sub {
    /* No margin-top here on purpose: a gap between the trigger and this
       dropdown is dead space the pointer has to cross. Since .nav-sub
       is a child of .nav-group, hovering the dropdown itself keeps
       .nav-group:hover true – but only once the cursor is over one of
       the two boxes. A margin-top created ~10px of empty space between
       them where the pointer was over neither, so moving the mouse down
       toward "Full Detail" etc. dropped the hover state and slammed the
       menu shut before you could click anything. Flush + its own
       padding below removes that gap entirely. */
    position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm);
    box-shadow: var(--shadow-md); min-width: 230px; padding: .5rem;
  }
  /* Deliberately .is-open only, no :hover rule here – JS mirrors hover
     into the same .is-open class (mouseenter/mouseleave) so opening via
     hover and opening via click share one state. That's what lets a
     click toggle it closed again even while the mouse never left the
     trigger: a plain :hover rule would just override a JS-driven close
     the instant the pointer is still sitting over the element. */
  .nav-group.is-open .nav-sub { display: block; }
  .nav-sub li a { border-radius: 6px; padding: .6rem .7rem; }
  .nav-sub li a:hover { background: var(--accent-soft); }
  .nav-cta { display: none; } /* redundant with header's Call Now + page CTAs once nav sits inline */
}

/* -------------------------------------------------- sticky mobile bar --- */
.mobile-action-bar {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 90;
  display: grid; grid-template-columns: 1fr 1fr 1.3fr; background: var(--ink);
  box-shadow: 0 -6px 20px rgba(0,0,0,.18);
}
.mobile-action-bar a {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .2rem;
  color: #fff; padding: .6rem .3rem .75rem; font-size: .72rem; font-weight: 700;
  border-right: 1px solid rgba(255,255,255,.12);
}
.mobile-action-bar a:last-child { border-right: none; background: var(--accent); }
.mobile-action-bar svg { width: 20px; height: 20px; }
@media (min-width: 960px) { .mobile-action-bar { display: none; } }
body { padding-bottom: 70px; }
@media (min-width: 960px) { body { padding-bottom: 0; } }

/* tighten the header on very small phones so logo + call button + hamburger
   never crowd or wrap onto two lines */
@media (max-width: 380px) {
  .nav-row { gap: .5rem; padding-block: .65rem; }
  .logo-mark { width: 34px; height: 34px; font-size: .85rem; }
  .logo-text strong { font-size: .92rem; }
  .logo-text span { font-size: .58rem; letter-spacing: .08em; }
  .nav-actions .btn-sm { padding: .5rem .75rem; font-size: .78rem; }
}

/* -------------------------------------------------- hero ---------------- */
.hero {
  position: relative; background: var(--ink); color: #fff; overflow: hidden;
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><path d='M-10 24 Q 25 4 60 24 T 150 24' stroke='rgba(255,255,255,0.07)' fill='none' stroke-width='1'/><path d='M-10 70 Q 25 50 60 70 T 150 70' stroke='rgba(255,255,255,0.07)' fill='none' stroke-width='1'/><path d='M-10 116 Q 25 96 60 116 T 150 116' stroke='rgba(255,255,255,0.07)' fill='none' stroke-width='1'/></svg>"),
    linear-gradient(100deg, rgba(12,26,40,.82) 0%, rgba(12,26,40,.45) 55%, rgba(12,26,40,.3) 100%),
    url("../images/hero-bg.jpg");
  background-size: auto, cover, cover;
  background-position: center, center, center;
  background-repeat: repeat, no-repeat, no-repeat;
}
.hero .container { padding-block: clamp(2.75rem, 7vw, 5.5rem); display: grid; gap: 2.5rem; align-items: center; }
.hero-badges { display: flex; flex-wrap: wrap; gap: .6rem; margin-bottom: 1.1rem; }
.hero-badge {
  display: inline-flex; align-items: center; gap: .4rem; background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.18); border-radius: 999px; padding: .35rem .8rem; font-size: .78rem; font-weight: 600;
}
.hero h1 { color: #fff; max-width: 22ch; }
.hero .lede { color: #cfe0e6; font-size: 1.08rem; max-width: 52ch; }
.hero-ctas { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.5rem; }
.hero-trust { display: flex; flex-wrap: wrap; gap: .9rem 1.4rem; margin-top: 2rem; font-size: .85rem; color: #b9cdd4; }
.hero-trust strong { color: #fff; display: block; font-size: 1.3rem; font-family: var(--font-head); }

/* image placeholder slots (swap in real photos by matching filenames) */
.img-slot {
  position: relative; overflow: hidden; background: #e3e9ee; display: block;
  aspect-ratio: var(--ar, 4/3); border-radius: var(--radius-sm);
}
.img-slot img { width: 100%; height: 100%; object-fit: cover; }
.img-slot .img-slot-label {
  display: none; position: absolute; inset: 0; align-items: center; justify-content: center; text-align: center;
  font-size: .74rem; font-weight: 600; color: #5c7182; padding: 1rem; line-height: 1.35;
  background:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16'><rect width='16' height='16' fill='none'/><circle cx='2' cy='2' r='1.1' fill='%23c3ccd3'/></svg>"),
    repeating-linear-gradient(135deg, #eef2f5, #eef2f5 12px, #e5eaef 12px, #e5eaef 24px);
}
.img-slot.is-empty .img-slot-label { display: flex; }
.img-slot.round { border-radius: 999px; }

/* -------------------------------------------------- service rows -------- */
.service-rows { display: flex; flex-direction: column; gap: clamp(2.75rem, 6vw, 4.5rem); }
.service-row { display: grid; grid-template-columns: 1fr; gap: 1.75rem; align-items: center; }
@media (min-width: 860px) {
  .service-row { grid-template-columns: 1fr 1fr; gap: clamp(2.5rem, 5vw, 4rem); }
  .service-row.reverse .service-row-media { order: 2; }
}
.service-row-media .img-slot { box-shadow: var(--shadow-md); }
.service-row-body .package-list { margin: 1.1rem 0 1.4rem; gap: .6rem; }
.service-row-price { display: flex; align-items: baseline; gap: .55rem; margin: 0 0 1.1rem; }
.service-row-price strong { font-family: var(--font-head); font-size: 1.7rem; font-weight: 800; color: var(--ink); }
.service-row-price span { font-size: .85rem; color: var(--text-muted); }
.service-row-ctas { display: flex; flex-wrap: wrap; gap: .75rem; }

/* -------------------------------------------------- packages / pricing -- */
.packages-grid { display: grid; gap: 1.25rem; grid-template-columns: 1fr; }
@media (min-width: 720px) { .packages-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1080px) { .packages-grid { grid-template-columns: repeat(4, 1fr); } }
.package-card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 1.6rem; display: flex; flex-direction: column; gap: 1rem; position: relative;
  box-shadow: var(--shadow-sm); transition: transform .18s ease, box-shadow .18s ease;
}
.package-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.package-card.featured { border-color: var(--accent); box-shadow: var(--shadow-md); }
.package-ribbon {
  position: absolute; top: -12px; left: 1.4rem; background: var(--gold); color: #ffffff;
  font-size: .7rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
  padding: .3rem .7rem; border-radius: 999px; box-shadow: var(--shadow-sm);
}
.package-icon {
  width: 52px; height: 52px; border-radius: 12px; background: var(--accent-soft); color: var(--accent-dark);
  display: grid; place-items: center;
}
.package-icon svg { width: 28px; height: 28px; }
.package-card h3 { margin-bottom: 0; }
.package-price { font-family: var(--font-head); font-size: 1.9rem; font-weight: 800; color: var(--ink); }
.package-price sup { font-size: .95rem; font-weight: 700; color: var(--text-muted); }
.package-list { display: flex; flex-direction: column; gap: .5rem; }
.package-list li { display: flex; gap: .55rem; font-size: .9rem; color: var(--text); }
.package-list svg { width: 17px; height: 17px; flex: none; margin-top: .15rem; color: var(--success); }
.package-note { font-size: .78rem; color: var(--text-muted); margin: 0; }

/* -------------------------------------------------- why / features ------ */
.features-grid { display: grid; gap: 1.5rem; grid-template-columns: 1fr; }
@media (min-width: 760px) { .features-grid { grid-template-columns: repeat(3, 1fr); } }
.feature-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.6rem; }
.feature-icon {
  width: 46px; height: 46px; border-radius: 10px; background: var(--ink); color: var(--accent);
  display: grid; place-items: center; margin-bottom: .9rem;
}
.feature-icon svg { width: 24px; height: 24px; }

/* -------------------------------------------------- steps --------------- */
.steps { display: grid; gap: 1.4rem; grid-template-columns: 1fr; counter-reset: step; }
@media (min-width: 760px) { .steps { grid-template-columns: repeat(3, 1fr); } }
.step { position: relative; padding-left: 3.2rem; }
.step::before {
  counter-increment: step; content: counter(step);
  position: absolute; left: 0; top: 0; width: 2.4rem; height: 2.4rem; border-radius: 50%;
  background: var(--ink); color: var(--accent); font-family: var(--font-head); font-weight: 800;
  display: grid; place-items: center;
}

/* -------------------------------------------------- reviews -------------- */
.reviews-grid { display: grid; gap: 1.25rem; grid-template-columns: 1fr; }
@media (min-width: 760px) { .reviews-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1080px) { .reviews-grid { grid-template-columns: repeat(3, 1fr); } }
.review-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.5rem; }
.stars { color: #e0a63a; letter-spacing: .1em; margin-bottom: .6rem; font-size: 1rem; } /* true amber – star ratings stay recognizable regardless of brand accent */
.review-name { font-weight: 700; color: var(--ink); margin-top: .8rem; display: block; font-size: .92rem; }
.review-source { font-size: .78rem; color: var(--text-muted); }
.google-badge { display: inline-flex; align-items: center; gap: .5rem; font-size: .85rem; font-weight: 700; color: var(--ink); }

/* -------------------------------------------------- service area -------- */
.area-grid { display: grid; gap: 1rem; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 700px) { .area-grid { grid-template-columns: repeat(4, 1fr); } }
.area-chip {
  display: flex; align-items: center; justify-content: space-between; gap: .5rem;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: .9rem 1rem; font-weight: 700; color: var(--ink); font-size: .92rem;
}
.area-chip:hover { border-color: var(--accent); color: var(--accent-dark); }
.area-chip svg { width: 16px; height: 16px; color: var(--accent); flex: none; }

/* -------------------------------------------------- CTA band ------------ */
.cta-band {
  background: var(--ink); color: #fff; border-radius: var(--radius);
  padding: clamp(1.75rem, 4vw, 3rem); display: grid; gap: 1.5rem; align-items: center; text-align: center;
}
@media (min-width: 760px) { .cta-band { grid-template-columns: 1fr auto; text-align: left; } }
.cta-band h2, .cta-band p { color: #fff; margin: 0; }
.cta-band p { color: #cfe0e6; margin-top: .4rem; }
.cta-band .hero-ctas { margin-top: 0; justify-content: center; }
@media (min-width: 760px) { .cta-band .hero-ctas { justify-content: flex-end; } }

/* -------------------------------------------------- forms --------------- */
.form-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: clamp(1.5rem, 4vw, 2.25rem); box-shadow: var(--shadow-sm); }
.booking-embed { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: clamp(1.5rem, 4vw, 2.5rem); box-shadow: var(--shadow-sm); max-width: 820px; margin-inline: auto; }
.booking-embed .calendly-inline-widget { width: 100%; }
.form-grid { display: grid; gap: 1rem; grid-template-columns: 1fr; }
@media (min-width: 640px) { .form-grid.two-col { grid-template-columns: 1fr 1fr; } }
.field { display: flex; flex-direction: column; gap: .4rem; }
.field label { font-weight: 700; font-size: .85rem; color: var(--ink); }
.field input, .field select, .field textarea {
  border: 1.5px solid var(--border); border-radius: var(--radius-sm); padding: .75rem .9rem;
  font: inherit; color: var(--text); background: #fff;
}
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.field-note { font-size: .78rem; color: var(--text-muted); }
.form-status { font-size: .9rem; font-weight: 600; padding: .75rem 1rem; border-radius: var(--radius-sm); display: none; }
.form-status.is-visible { display: block; }
.form-status.ok { background: #e5f7ee; color: var(--success); }
.form-status.err { background: #fdecec; color: #b3261e; }

/* -------------------------------------------------- footer --------------- */
.site-footer { background: var(--ink); color: #b9cdd4; }
.site-footer .container { padding-block: clamp(2.25rem, 5vw, 3.5rem); display: grid; gap: 2.25rem; grid-template-columns: 1fr; }
@media (min-width: 860px) { .site-footer .container { grid-template-columns: 1.3fr 1fr 1fr 1fr; } }
.site-footer h4 { color: #fff; font-size: .95rem; margin-bottom: 1rem; }
.site-footer a:hover { color: #fff; }
.footer-links { display: flex; flex-direction: column; gap: .55rem; font-size: .9rem; }
.footer-logo { display: flex; align-items: center; gap: .6rem; margin-bottom: .9rem; }
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,.12); padding-block: 1.1rem; font-size: .8rem;
  display: flex; flex-wrap: wrap; gap: .75rem; justify-content: space-between;
}

/* -------------------------------------------------- misc pages ---------- */
.page-hero { background: var(--ink); color: #fff; padding-block: clamp(2.5rem, 6vw, 3.5rem); }
.page-hero h1 { color: #fff; margin-bottom: .5rem; max-width: 34ch; }
.breadcrumbs { font-size: .82rem; color: #9fb7bf; margin-bottom: 1rem; }
.breadcrumbs a:hover { color: #fff; }
.two-col-layout { display: grid; gap: 2.5rem; grid-template-columns: 1fr; }
@media (min-width: 900px) { .two-col-layout { grid-template-columns: 1.2fr .8fr; } }
.faq-item { border-bottom: 1px solid var(--border); padding-block: 1rem; }
.faq-item summary { font-weight: 700; color: var(--ink); cursor: pointer; }
.faq-item p { margin-top: .6rem; margin-bottom: 0; }
.badge-list { display: flex; flex-wrap: wrap; gap: .6rem; }
.badge-list span { background: var(--accent-soft); color: var(--accent-dark); font-size: .78rem; font-weight: 700; padding: .35rem .7rem; border-radius: 999px; }
.local-callout { background: var(--accent-soft); border: 1px solid #bfe6e2; border-radius: var(--radius); padding: 1.25rem 1.5rem; font-size: .92rem; color: var(--ink); }

/* -------------------------------------------------- pricing tier tables - */
.tier-group-label { font-family: var(--font-head); font-weight: 700; font-size: .8rem; text-transform: uppercase; letter-spacing: .05em; color: var(--accent-dark); margin: 1.75rem 0 .6rem; }
.tier-group-label:first-child { margin-top: 0; }
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--border); border-radius: var(--radius-sm); }
.tier-table { width: 100%; min-width: 420px; border-collapse: collapse; background: var(--surface); }
.tier-table th, .tier-table td { padding: .7rem .9rem; text-align: left; border-bottom: 1px solid var(--border); font-size: .9rem; }
.tier-table tr:last-child td { border-bottom: none; }
.tier-table th { font-family: var(--font-head); font-size: .74rem; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); background: var(--bg); }
.tier-table td:last-child, .tier-table th:last-child { text-align: right; }
.tier-table td:last-child { font-weight: 700; color: var(--ink); white-space: nowrap; }
.tier-table td:nth-child(2) { color: var(--text-muted); white-space: nowrap; }
.tier-note { font-size: .82rem; color: var(--text-muted); margin-top: .6rem; }

/* -------------------------------------------------- section variants ---- */
.section-alt { background: var(--surface); }
.section-dark { background: var(--ink); color: #fff; }
.section-dark h2, .section-dark p { color: #fff; }
.section-dark .muted { color: #b9cdd4; }