/*
  GCM-042 — "life-coach" accent stylesheet. Includes the kit's shared token/reset/focus/breakpoint
  layer verbatim (never re-declares :root or a palette/font token — `templates/_kit/README.md`)
  and appends only this vertical's own accent rules below: warm, personal, generously rounded —
  no new colour or font literal, every value below is layout/shape-only and composes with
  whichever palette/font preset the render context supplies.

  GCM-110 — professional redesign (operator directive: "take drivercostadelsol-web as the
  example"). Composes GCM-109's `site_header`/`hero_overlay`/`footer_upgraded` (styled in the
  kit's own `base.css.tera`) with, here, layout-only upgrades to the UNCHANGED
  about/services/testimonials/pricing/contact markup: alternating section bands, a consistent
  1.25rem radius + pill-button system (replacing the old four separate accent rules), an elevated
  card grid for services, a featured middle pricing tier, and a quote-card testimonial. No new
  colour/font literal anywhere below — every colour comes from the palette tokens via `var()`/
  `color-mix()`, never a literal.
*/
/*
  Template kit — shared token/reset/focus/breakpoint layer (GCM-041, spec NFR-2/NFR-3/NFR-8).

  Every real per-vertical template's `styles.css.tera` (GCM-042…045) starts with an include
  statement naming this file's path (`_kit/base.css.tera`) — see `templates/_kit/README.md` for
  the exact syntax — then appends ONLY its own vertical-specific accent rules below the include.
  This file is the ONLY place theme tokens (colour/font custom properties) are declared from the
  render context's palette/font values — a real template's own styles never re-declare the root
  token block or hardcode a colour/font literal of their own (mirrors `src/render/engine.rs`'s own
  "renderer holds no colour/font literal" rule, extended to every template that composes this
  kit).

  NOTE: this is a plain CSS comment, not a Tera comment — Tera still parses its own expression and
  statement delimiters anywhere in this file, including inside a CSS comment
  (`templates/_fixture/styles.css.tera` carries the same warning). Deliberately not spelling those
  delimiter characters out in this prose block — only the real substitutions below use them.
*/
:root {
  --color-background: #FAF7F2;
  --color-surface: #FFFFFF;
  --color-text: #2B2420;
  --color-accent: #AE612B;
  --font-heading: "Poppins", serif;
  --font-body: "Inter", sans-serif;
}

*, *::before, *::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--color-background);
  color: var(--color-text);
  font-family: var(--font-body);
  line-height: 1.5;
}

h1, h2, h3 {
  font-family: var(--font-heading);
  color: var(--color-text);
}

a, .kit-price {
  color: var(--color-accent);
}

.kit-section {
  background: var(--color-surface);
  padding: 2rem 1.25rem;
}

/* Skip link (WCAG 2.4.1 Bypass Blocks): visually hidden until it receives keyboard focus, then
   moves fully into view — never `display: none`/`visibility: hidden`, which would also hide it
   from assistive tech and keyboard focus, not just sighted mouse users. */
.kit-skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--color-surface);
  color: var(--color-text);
  padding: 0.5rem 1rem;
  z-index: 100;
}
.kit-skip-link:focus {
  left: 0.5rem;
  top: 0.5rem;
}

/* Focus indicator (WCAG 2.4.7 Focus Visible): every interactive element keeps a strong, visible
   outline for keyboard users. Never suppressed (`outline: none`) anywhere in this kit without an
   equally visible replacement — there is none here, so none is needed. */
:focus-visible {
  outline: 3px solid var(--color-accent);
  outline-offset: 2px;
}

.kit-contact-form {
  display: grid;
  gap: 1rem;
  max-width: 32rem;
}
.kit-field {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.kit-field label {
  font-weight: 600;
}
.kit-field input,
.kit-field textarea {
  padding: 0.6rem;
  border: 1px solid var(--color-text);
  border-radius: 4px;
  font: inherit;
  background: var(--color-background);
  color: var(--color-text);
}
.kit-contact-form button {
  justify-self: start;
  padding: 0.6rem 1.2rem;
  background: var(--color-accent);
  color: var(--color-surface);
  border: none;
  border-radius: 4px;
  font: inherit;
  cursor: pointer;
}

/* GCM-134/FR-18: the section call-to-action button — the ONE styling rule for
   `.kit-cta-button` (`templates/_kit/sections/components.tera`'s `cta_button` component), shared
   by every section in every template. Unlike `.kit-whatsapp-button` above (deliberately
   WhatsApp-branded, a documented exception to this file's token-only rule), this button uses
   ONLY the palette/font tokens declared at the top of this file — the same
   `background: var(--color-accent); color: var(--color-surface);` pairing
   `.kit-hero-cta`/`.kit-site-header-cta`/the contact form's submit button already use and the
   kit's CI contrast matrix already proves AA under every registered preset, so this button
   matches every theme rather than needing its own contrast proof. `display: inline-flex` +
   `margin-top` place it as a block-level-feeling element at the end of the section's text flow
   (GCM-134: "end of the section body, after the text, before the next section") without
   disturbing any other section layout. The `:focus-visible` ring is the kit's existing global
   rule above — no separate declaration needed here. */
.kit-cta-button {
  display: inline-flex;
  align-items: center;
  margin-top: 1.25rem;
  padding: 0.75rem 1.75rem;
  background: var(--color-accent);
  color: var(--color-surface);
  border-radius: 999px;
  text-decoration: none;
  font-weight: 600;
}
.kit-cta-button:hover {
  filter: brightness(1.08);
}

.kit-package-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 1rem;
}

/* Visually-hidden accessible label (the standard clip pattern): rendered for assistive tech but
   removed from the visual page \u2014 used where an icon is the visible affordance and the accessible
   name still has to be real text (first user: the WhatsApp FAB below). Unlike `.kit-skip-link`
   this never needs to become visible on focus, so the simpler pattern is correct here. */
.kit-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* GCM-046/FR-14, restyled by GCM-122: the WhatsApp `wa.me` CTA is a floating action button pinned
   to the viewport's bottom-left corner \u2014 WhatsApp's own logo on its brand green, reachable from
   anywhere on the page without scrolling to one spot (mirrors the drivercostadelsol reference
   site's floating WhatsApp button, the restyle's explicit model).

   \u26a0\ufe0f Deliberate, documented exception to this file's "no colour literal" rule: the greens below
   are WhatsApp's OWN brand colours. The whole point of the restyle is that visitors recognise
   the button as WhatsApp instantly under EVERY palette preset \u2014 which a palette token, by
   definition, cannot provide. The literals colour only the icon disc: the button carries no
   visible text (its accessible name is the `.kit-visually-hidden` label), so GCM-041's AA
   text-contrast matrix is unaffected, and the white logo on WhatsApp green is WhatsApp's own
   official button styling. Every other rule in this file remains token-only.

   `position: fixed` keeps the element out of normal flow, so it can never shift layout (no CLS
   cost against NFR-2), and the 4rem (64px) disc — the reference button's exact size — clears the
   kit's 44px tap-target floor (NFR-8). Structure mirrors the reference: the `<p>` wrapper is the
   fixed 4rem box (it also hosts the hover glow and the status dot, which must escape the disc's
   clipping); the anchor is the disc itself, `overflow: hidden` so the shine sweep clips to the
   circle. Every animation/transition (idle pulse ring, status-dot pulse, hover shine sweep) runs
   only under `prefers-reduced-motion: no-preference`, the same guard `.kit-hero-overlay`'s zoom
   already uses — under reduced motion the button is a static disc whose hover feedback is the
   gradient lightening alone. */
.kit-whatsapp-cta {
  position: fixed;
  bottom: 2rem;
  left: 2rem;
  z-index: 50;
  margin: 0;
  width: 4rem;
  height: 4rem;
}
.kit-whatsapp-button {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  overflow: hidden;
  background: linear-gradient(135deg, #25d366, #1da851);
  color: #ffffff;
  box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.35);
}
.kit-whatsapp-button:hover,
.kit-whatsapp-button:focus-visible {
  transform: scale(1.1) translateY(-0.25rem);
  background: linear-gradient(135deg, #4ade80, #25d366);
}
.kit-whatsapp-icon {
  width: 2rem;
  height: 2rem;
}
/* The hover shine — the reference button's light streak that sweeps across the disc. It parks
   fully off-canvas on either side (clipped by the anchor's `overflow: hidden`), so without the
   motion-gated transition below it is simply never seen. */
.kit-whatsapp-shine {
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
}
.kit-whatsapp-button:hover .kit-whatsapp-shine,
.kit-whatsapp-button:focus-visible .kit-whatsapp-shine {
  transform: translateX(100%);
}
/* The hover glow — the reference's blurred green halo behind the disc. Drawn as the wrapper's
   `::before` (the wrapper's own `z-index: 50` makes it a stacking context, so `z-index: -1`
   keeps the halo behind the anchor but never behind the page), shown via `:focus-within` too so
   keyboard focus gets the same feedback. */
.kit-whatsapp-cta::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: 50%;
  background: rgba(74, 222, 128, 0.6);
  filter: blur(1.5rem);
  opacity: 0;
  transition: opacity 300ms ease;
}
.kit-whatsapp-cta:hover::before,
.kit-whatsapp-cta:focus-within::before {
  opacity: 1;
}
/* The "online" indicator dot on the disc's top-right edge — a sibling of the anchor (inside it,
   the disc's `overflow: hidden` would slice it off). Same greens family as the disc, separated
   from it by the white ring, exactly the reference's treatment. */
.kit-whatsapp-status {
  position: absolute;
  top: 0;
  right: 0;
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  background: #4ade80;
  border: 2px solid #ffffff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}
@media (prefers-reduced-motion: no-preference) {
  .kit-whatsapp-button {
    animation: kit-whatsapp-pulse 2.4s ease-out infinite;
    transition: transform 300ms ease;
  }
  .kit-whatsapp-shine {
    transition: transform 700ms ease;
  }
  .kit-whatsapp-status {
    animation: kit-whatsapp-status-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
  }
}
/* The pulse is an expanding-and-fading ring drawn as a second box-shadow layer (the first layer
   is the constant drop shadow above — animating both together keeps the drop shadow steady while
   only the ring grows), so it needs no extra element and repaints nothing but the button. */
@keyframes kit-whatsapp-pulse {
  0% {
    box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.35), 0 0 0 0 rgba(37, 211, 102, 0.55);
  }
  70% {
    box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.35), 0 0 0 1.1rem rgba(37, 211, 102, 0);
  }
  100% {
    box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.35), 0 0 0 0 rgba(37, 211, 102, 0);
  }
}
@keyframes kit-whatsapp-status-pulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}

/* GCM-272 (FR-14/FR-25): the `booking` section's INLINE WhatsApp fallback — deliberately NOT
   `position: fixed` (unlike `.kit-whatsapp-cta` above), so it sits in normal flow inside
   `#gliont-booking` rather than stacking a second floating disc on top of the site-wide FAB. Same
   documented brand-colour exception as the floating button (WhatsApp's own greens, recognisability
   over every palette preset); shaped like the kit's other in-section CTA (`.kit-cta-button`) so it
   reads as "a button that belongs to this section", visually distinct from the floating FAB. */
.kit-whatsapp-cta-inline {
  margin: 1rem 0 0;
}
.kit-whatsapp-button-inline {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.75rem 1.75rem;
  border-radius: 999px;
  text-decoration: none;
  font-weight: 600;
  background: linear-gradient(135deg, #25d366, #1da851);
  color: #ffffff;
}
.kit-whatsapp-button-inline:hover,
.kit-whatsapp-button-inline:focus-visible {
  filter: brightness(1.08);
}
.kit-whatsapp-icon-inline {
  width: 1.25rem;
  height: 1.25rem;
  flex: none;
}

img {
  max-width: 100%;
  height: auto;
}

/* Three responsive breakpoints (NFR-8): mobile-first base above; tablet + desktop below. Every
   template composing this kit inherits this layout scaffold verbatim. */
@media (min-width: 768px) {
  .kit-section {
    padding: 3rem 2.5rem;
  }
}
@media (min-width: 1280px) {
  .kit-section {
    padding: 4rem 6rem;
  }
}

/* ---------------------------------------------------------------------------------------------
   GCM-109 — template-kit "professional layer" (opt-in: only rendered output that calls
   `site_header`/`hero_overlay`/`footer_upgraded` in `sections/components.tera` ever reaches these
   selectors — a template that keeps calling `hero`/`footer` never emits the classes below).
   Every value here is layout/shape-only, built from the same `--color-*`/`--font-*` tokens
   declared at the top of this file — no new colour or font literal.
   --------------------------------------------------------------------------------------------- */

.kit-site-header {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--color-surface);
  border-bottom: 1px solid color-mix(in srgb, var(--color-text) 12%, transparent);
}
.kit-site-header-inner {
  max-width: 72rem;
  margin: 0 auto;
  padding: 1rem 1.25rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}
.kit-site-header-brand {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.25rem;
  color: var(--color-text);
}
/* GCM-150 / FR-20 — the site-wide logo. Bounded height so any aspect ratio the coach uploads
   fits without disturbing the layout (`object-fit: contain` never crops); `max-width: 100%`
   keeps a wide wordmark inside the column on a phone. Inside the sticky header it sits at the
   brand text's optical size; standalone (plain-`hero` templates, first child of `<main>`) it is
   a little larger and centred on the section column. Token-only — no colours of its own. */
.kit-site-logo {
  display: block;
  height: 4rem;
  max-width: 100%;
  width: auto;
  object-fit: contain;
  margin: 1.5rem auto 0;
}
.kit-site-header-brand-logo {
  display: inline-flex;
  align-items: center;
  line-height: 0;
}
.kit-site-header-brand-logo .kit-site-logo {
  height: 2.5rem;
  margin: 0;
}
.kit-site-header-nav {
  display: none;
  gap: 1.5rem;
}
.kit-site-header-nav a {
  color: var(--color-text);
  text-decoration: none;
  font-weight: 600;
}
.kit-site-header-nav a:hover,
.kit-site-header-nav a:focus-visible {
  color: var(--color-accent);
}
.kit-site-header-cta {
  display: inline-flex;
  align-items: center;
  padding: 0.55rem 1.25rem;
  background: var(--color-accent);
  color: var(--color-surface);
  border-radius: 999px;
  text-decoration: none;
  font-weight: 600;
  white-space: nowrap;
}
@media (min-width: 768px) {
  .kit-site-header-inner {
    padding: 1rem 2.5rem;
  }
  .kit-site-header-nav {
    display: flex;
  }
}
@media (min-width: 1280px) {
  .kit-site-header-inner {
    padding: 1rem 6rem;
  }
}

.kit-hero-overlay {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 6rem 1.25rem;
  background-color: var(--color-surface);
}
/* The photo/fallback-gradient layer is its own pseudo-element (rather than a background directly
   on `.kit-hero-overlay`) so the zoom animation below can animate `transform` instead of
   `background-size` — animating `background-size` itself between percentages would fight `cover`
   and tile the image for the whole animation; `transform: scale()` never disturbs the cover fit,
   at any point in the animation, including a static first frame. */
.kit-hero-overlay::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--kit-hero-image, linear-gradient(135deg, var(--color-accent), var(--color-surface)));
  background-size: cover;
  background-position: center;
}
.kit-hero-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    color-mix(in srgb, var(--color-text) 35%, transparent),
    color-mix(in srgb, var(--color-text) 65%, transparent)
  );
}
.kit-hero-card {
  position: relative;
  z-index: 1;
  max-width: 40rem;
  padding: 2.5rem 2rem;
  background: var(--color-surface);
  color: var(--color-text);
  border-radius: 1.25rem;
  text-align: center;
  box-shadow: 0 1.5rem 3rem color-mix(in srgb, var(--color-text) 25%, transparent);
}
.kit-hero-card h1,
.kit-hero-card .kit-lede {
  color: var(--color-text);
}
.kit-hero-cta {
  display: inline-flex;
  align-items: center;
  margin-top: 1.5rem;
  padding: 0.75rem 1.75rem;
  background: var(--color-accent);
  color: var(--color-surface);
  border-radius: 999px;
  text-decoration: none;
  font-weight: 600;
}
@media (prefers-reduced-motion: no-preference) {
  .kit-hero-overlay::before {
    animation: kit-hero-zoom 18s ease-out both;
  }
}
@keyframes kit-hero-zoom {
  from {
    transform: scale(1.12);
  }
  to {
    transform: scale(1);
  }
}

.kit-footer-upgraded {
  background: var(--color-surface);
  padding: 2.5rem 1.25rem;
}
.kit-footer-upgraded-inner {
  max-width: 72rem;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.kit-footer-upgraded-brand {
  font-family: var(--font-heading);
  font-weight: 700;
  margin: 0;
  color: var(--color-text);
}
.kit-footer-upgraded-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
}
.kit-footer-upgraded-nav a {
  color: var(--color-text);
  text-decoration: none;
  font-weight: 600;
}
.kit-footer-upgraded-nav a:hover,
.kit-footer-upgraded-nav a:focus-visible {
  color: var(--color-accent);
}
.kit-footer-upgraded-copyright {
  margin: 0;
  color: var(--color-text);
}
@media (min-width: 768px) {
  .kit-footer-upgraded {
    padding: 3rem 2.5rem;
  }
}
@media (min-width: 1280px) {
  .kit-footer-upgraded {
    padding: 3rem 6rem;
  }
}

/* ---------------------------------------------------------------------------------------------
   GCM-164 / FR-23 — the four optional-section kit components (`gallery`, `portfolio`, `team`,
   `faq`; `sections/components.tera`), plus GCM-168 / FR-25's `booking` embed slot below. Token-only, like every rule above: no colour/font literal,
   only `--color-*`/`--font-*` custom properties already declared at the top of this file — the
   same pairings (`--color-background` cards on a `--color-surface` section, `--color-text`
   headings, `--color-accent` on hover/focus) already proven AA under every registered preset by
   the rest of this kit, so these new components inherit that proof rather than needing their own.

   The outer guard (this whitespace-trimmed if-block, so a template declaring NONE of the four
   sections emits not one extra byte here) plus each inner per-section if-block below is gated on
   the same declared-only `sections` map `engine::render` inserts into this Tera context for BOTH the
   html and the css render (this file is include-d verbatim by every per-template
   `styles.css.tera`) — so a template ships only the component CSS it actually uses. This is
   NFR-13's other half: without the outer guard, appending this block would grow every existing
   coaching template's `styles.css` (none of the ten declares gallery/portfolio/team/faq) even
   though their `index.html` never changed, breaking AC-4's "byte-identical to `origin/develop`".
   --------------------------------------------------------------------------------------------- */







/* GCM-168 / FR-25 / NFR-11 — the booking-bot embed slot. Token-only (no colour/font literal),
   same pairing every other optional-section component above uses: a `--color-background` card on
   the page, `--color-text` body copy. `min-height` keeps the container a visible, non-collapsed
   box even before any script has loaded (or on a Free/unbound site, where none ever will) — never
   an invisible/zero-height slot that would make the page look broken (FR-25's own UI/UX note). */
.kit-booking-embed {
  margin-top: 1.5rem;
  padding: 1.5rem;
  border-radius: 0.75rem;
  background: var(--color-background);
  color: var(--color-text);
  min-height: 4rem;
}


.kit-about-image,
.kit-services-image {
  border-radius: 1.25rem;
}

/* Alternating section bands (`.kit-hero-overlay`/`.kit-site-header`/`.kit-footer-upgraded` are
   styled separately in the kit — this only bands the five plain `<section>` elements about
   through contact, in DOM order, giving the page distinct visual zones). */
main .kit-section:nth-of-type(even) {
  background: var(--color-background);
}
/* GCM-138 — the heading/lede column is centred as a *box* (auto margins) but its text was still
   left-aligned, and the two boxes are different widths (60rem vs 42rem): on a wide viewport the
   heading started 9rem left of the lede, the lede left of the 32rem contact form, while the
   GCM-136 button sat truly centred — four visibly different left edges in one section (operator
   staging report, `#about`/`#pricing`/`#contact`, 2026-08-25). Centre the text too, so every
   section child shares one axis with the form, cards and button. Layout-only. */
main .kit-section > h2 {
  max-width: 60rem;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}
main .kit-section > p {
  max-width: 42rem;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

/* Services: the section's own images become an elevated card grid (no markup change needed —
   `.kit-services` is the grid container, its heading/lede span the full row). */
.kit-services {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.5rem;
  align-items: start;
}
.kit-services h2,
.kit-services > p {
  grid-column: 1 / -1;
}
.kit-services-image {
  box-shadow: 0 0.75rem 1.5rem color-mix(in srgb, var(--color-text) 15%, transparent);
  transition: transform 200ms ease;
}
.kit-services-image:hover {
  transform: translateY(-0.25rem);
}

/* Testimonials: the one fixed quote becomes a centred quote card rather than a bare
   border-left blockquote. */
.kit-testimonials {
  text-align: center;
}
.kit-testimonials blockquote {
  max-width: 42rem;
  margin: 0 auto;
  padding: 2rem;
  background: var(--color-surface);
  border-radius: 1.25rem;
  border-left: none;
  font-style: italic;
  box-shadow: 0 0.5rem 1.5rem color-mix(in srgb, var(--color-text) 12%, transparent);
}
.kit-testimonials blockquote::before {
  content: "\201C";
  display: block;
  font-family: var(--font-heading);
  font-size: 3rem;
  font-style: normal;
  line-height: 1;
  color: var(--color-accent);
}

/* Pricing: package cards, one visually featured tier (the middle card when 3+ ship — a fixed
   position, not a new data field per GCM-110's own scope). */
.kit-package-list {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  align-items: end;
}
.kit-package {
  /* GCM-041 AA fix: `.kit-price` (inside this card) inherits `a, .kit-price { color:
     var(--color-accent); }` from the kit, verified AA only against `--color-surface` (white) —
     the section band above puts `.kit-pricing` (the 4th `.kit-section`, even) on
     `--color-background` instead, which drops `warm-neutral`/`sunrise-energy`'s accent below the
     4.5:1 floor (axe-core caught it, PR #38). Every other template's `.kit-package` implicitly
     sits on the kit's default `.kit-section` surface background; this restores that same pairing
     explicitly, since life-coach is the only template that overrides it per-section. */
  background: var(--color-surface);
  border-radius: 1.25rem;
  padding: 1.75rem 1.5rem;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-text) 20%, transparent);
  transition: transform 200ms ease;
}
.kit-package-list .kit-package:nth-child(2) {
  border: 2px solid var(--color-accent);
  box-shadow: 0 1rem 2rem color-mix(in srgb, var(--color-accent) 25%, transparent);
  transform: scale(1.03);
}

.kit-contact-form {
  margin-left: auto;
  margin-right: auto;
}
.kit-contact-form button {
  border-radius: 999px;
}

/* GCM-136 — section CTA alignment. This template is the only one that centres its section
   column (`main .kit-section > h2/p` + `.kit-contact-form` above use `max-width` + auto margins);
   the kit's `.kit-cta-button` (GCM-134, `display: inline-flex`, no margins) knows nothing about
   that column, so it hugged the section's left padding edge — visibly detached from the centred
   heading/lede/form it belongs to (operator report, staging `#contact`, 2026-08-25). Make the
   anchor a shrink-wrapped block so the same auto-margin centring applies. Layout-only: colour,
   padding, radius and the hover/focus rules stay the kit's. */
main .kit-section > .kit-cta-button {
  display: flex;
  width: fit-content;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
}
/* Inside the services card grid the anchor would otherwise become one grid cell (a button sat
   in a card column); span the full row like the heading/lede and centre it there. */
.kit-services > .kit-cta-button {
  grid-column: 1 / -1;
  justify-self: center;
  margin-left: 0;
  margin-right: 0;
}

@media (prefers-reduced-motion: reduce) {
  .kit-services-image,
  .kit-package {
    transition: none;
  }
}