/* Equip Recycling combined stylesheet for e-waste pages (built 2026-10-27).
   Order: Equip brand tokens > shared e-waste components (page-rhythm, page-hero, infographic-figure, map-static, card-pin,
   copied unchanged from the MARRS/TWR e-waste sheets) > page layer + visible links + type-bump > e-waste city page block.
   Equip brand values come from the live site equiprecycling.com (read 2026-10-27 from computed styles): dark green #182822,
   orange #F29620 (CTA #EB7D00), secondary green #257830, Roboto body 17px, 4px button radius. The licensed heading face
   "paralucent" is not loaded on Rockin pages, so headings fall back to Roboto. Where a live value fails contrast, a darker
   value from the same hue is used and noted. */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap');

:root {
  /* 1. Brand colour + type */
  --color-primary: #182822;            /* live primary (dark green) */
  --color-primary-foreground: #ffffff; /* 15.4:1 on #182822 */
  --color-accent: #EB7D00;             /* live CTA button orange */
  --color-accent-foreground: #182822;  /* dark text on the orange, as on the live buttons (5.5:1) */
  --color-accent-hover: #F29620;       /* live accent orange, hover/lighten */
  --font-display: 'paralucent', Roboto, Arial, Helvetica, sans-serif; /* live headings; falls back to Roboto when not loaded */
  --font-body: Roboto, Arial, Helvetica, sans-serif;    /* live body font */
  --font-footer-heading: Roboto, Arial, Helvetica, sans-serif;
  --weight-display: 600;               /* live headings are weight 600 */

  /* 2. Neutrals */
  --color-background: #ffffff;
  --color-foreground: #182822;         /* headings and body; the live body grey #62706B is 4.9:1, muted-foreground below */
  --color-muted: #f5f7f6;              /* live light panel grey */
  --color-muted-foreground: #4d5a55;   /* 7.2:1 on white; de-emphasised copy (darker than the live #62706B) */
  --color-border: #d9e3e0;             /* live border */
  --color-card: #ffffff;

  /* 2b. RGB channel triplets */
  --color-primary-rgb: 24, 40, 34;
  --color-accent-rgb: 235, 125, 0;
  --color-primary-foreground-rgb: 255, 255, 255;
  --color-accent-foreground-rgb: 24, 40, 34;
  --color-muted-rgb: 245, 247, 246;
  --color-green-light: #257830;        /* live secondary green, icon/checkmark circles only (white on it is 5.5:1) */
  --color-green-hover: #235a2e;        /* darker green for text links (8.2:1 on white) */

  /* 2c. Header/footer surface: live header is white with a dark top bar; footer is the dark green. */
  --color-header: #ffffff;
  --color-header-foreground: #182822;
  --color-nav-foreground: #182822;
  --color-footer: #182822;
  --color-footer-foreground: rgba(255, 255, 255, 0.85);
  --color-footer-foreground-rgb: 255, 255, 255;
  --color-footer-link: #d9e3e0;

  /* 3. Shape + elevation: live buttons have a 4px radius */
  --radius-btn: 4px;
  --radius-full: 999px;
  --radius-xl: 1.25rem;
  --radius-lg: 0.75rem;
  --radius-md: 0.5rem;
  --shadow-card: 0 1px 3px rgba(24,40,34,0.08), 0 1px 2px rgba(24,40,34,0.05);
  --shadow-lift: 0 12px 28px -12px rgba(24,40,34,0.28);

  /* 4. Layout scale */
  --container-max: 1280px;
  --prose-max: 45rem;
  --prose-wide-max: 56rem;
  --space-section-y: clamp(2.5rem, 5vw, 4.5rem);
  --space-md: 1.5rem;
  --form-height: 620px;                /* the GoHighLevel form (data-height 611) needs more room than a 380px CTM form */
}

/* Tokens the shared library reads that the brand tokens above do not define */
:root {
  --radius-sm: 0.375rem;
  --color-accent-shade: var(--color-accent-hover);
  --color-link: var(--color-green-hover);
  --color-link-hover: var(--color-primary);
}

/* ==========================================================================
   RockinTech Design Template System - Shared Component Library
   Niche-agnostic. Every rule below reads only CSS custom properties (tokens),
   never a hardcoded color/font/radius. To reskin for a new brand or vertical,
   swap the tokens.css file this stylesheet is loaded alongside - do not edit
   this file per client.

   Reverse-engineered structural source: innovasmilesdental.com (Next.js /
   Tailwind / shadcn-ui site). See ../innova-dental/README.md for the analysis
   this was built from.
   ========================================================================== */

.page-flow, .page-flow *, .page-flow *::before, .page-flow *::after { box-sizing: border-box; }
.page-flow {
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--color-foreground);
  -webkit-font-smoothing: antialiased;
}
.page-flow img { max-width: 100%; display: block; }
.page-flow a { color: inherit; text-decoration: none; }
.page-flow h1, .page-flow h2, .page-flow h3, .page-flow h4 {
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin: 0 0 0.5em;
  color: var(--color-foreground);
}
.page-flow h1 { font-size: clamp(2rem, 4vw + 1rem, 3.25rem); }
.page-flow h2 { font-size: clamp(1.5rem, 2vw + 1rem, 2.25rem); }
.page-flow h3 { font-size: 1.25rem; }
.page-flow p { margin: 0 0 1em; color: var(--color-foreground); }
.page-flow ul, .page-flow ol { margin: 0 0 1em; padding-left: 1.25em; }

.eyebrow {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-primary);
  margin-bottom: 0.75rem;
}

/* ---------- Layout ---------- */
.rockin-page .container { max-width: var(--container-max); margin: 0 auto; padding: 0 1.25rem; }
.prose { max-width: var(--prose-max); margin: 0 auto; }
.prose--wide { max-width: var(--prose-wide-max); margin: 0 auto; }

.section { padding: var(--space-section-y) 0; }
.section--muted { background: var(--color-muted); }
.section--dark { background: var(--color-primary); color: var(--color-primary-foreground); }
.section--dark h1, .section--dark h2, .section--dark h3 { color: var(--color-primary-foreground); }
.section--dark p { color: rgba(var(--color-primary-foreground-rgb), 0.85); }
.section--tint { background: var(--color-muted); background: color-mix(in srgb, var(--color-primary) 5%, var(--color-background)); }
.section--rounded { border-radius: var(--radius-xl); overflow: hidden; }
.section--divider-top { border-top: 1px solid var(--color-border); }
.text-center { text-align: center; }

.grid { display: grid; gap: var(--space-md); }
.grid-2 { grid-template-columns: repeat(1, 1fr); }
.grid-3 { grid-template-columns: repeat(1, 1fr); }
.grid-4 { grid-template-columns: repeat(1, 1fr); }
@media (min-width: 640px) {
  .grid-2 { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 960px) {
  .grid-3 { grid-template-columns: repeat(3, 1fr); }
  .grid-4 { grid-template-columns: repeat(4, 1fr); }
}

.split { display: grid; gap: 2.5rem; align-items: center; }
@media (min-width: 960px) { .split { grid-template-columns: 1fr 1fr; } }
.split--reverse { direction: rtl; }
.split--reverse > * { direction: ltr; }

/* ---------- Buttons & badges ---------- */
.btn:not([class*="h-btn"]):not([class*="cms-slider-btn"]) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.95rem;
  padding: 0.85rem 1.75rem;
  border-radius: var(--radius-full);
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease;
  white-space: nowrap;
}
.btn:not([class*="h-btn"]):not([class*="cms-slider-btn"]):hover { transform: translateY(-1px); }
.btn-primary {
  background: var(--color-accent);
  color: var(--color-accent-foreground);
  box-shadow: 0 8px 20px -6px rgba(var(--color-accent-rgb), 0.55);
}
.btn-secondary {
  background: var(--color-primary);
  color: var(--color-primary-foreground);
}
.btn-outline {
  background: transparent;
  border-color: var(--color-border);
  color: var(--color-primary);
}
.btn-outline:hover { border-color: var(--color-primary); background: rgba(var(--color-primary-rgb), 0.05); }
.btn-ghost { background: none; color: var(--color-primary); padding: 0.5rem 0.25rem; text-decoration: underline; }
.btn-sm { padding: 0.5rem 1.1rem; font-size: 0.85rem; }

.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.78rem;
  font-weight: 600;
  padding: 0.4rem 0.9rem;
  border-radius: var(--radius-full);
}
.badge--solid { background: var(--color-primary); color: var(--color-primary-foreground); }
.badge--tint { background: rgba(var(--color-primary-rgb), 0.08); color: var(--color-primary); }
.badge--outline { background: var(--color-card); border: 1px solid var(--color-border); color: var(--color-foreground); }
.badge--glass { background: rgba(255,255,255,0.12); backdrop-filter: blur(6px); color: #fff; border: 1px solid rgba(255,255,255,0.2); }
.badge--accent { background: rgba(var(--color-accent-rgb), 0.15); color: var(--color-accent-shade); }

.pill-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.6rem 1.1rem;
  border-radius: var(--radius-full);
  border: 1px solid var(--color-border);
  background: var(--color-card);
  font-size: 0.85rem;
  font-weight: 500;
  transition: all 0.15s ease;
}
.pill-link:hover { border-color: var(--color-primary); background: rgba(var(--color-primary-rgb), 0.05); color: var(--color-primary); }

/* ---------- Cards ---------- */
.card {
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 1.75rem;
  box-shadow: var(--shadow-card);
}
.card--hover { transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease; }
.card--hover:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); border-color: rgba(var(--color-primary-rgb), 0.35); }
.card--emphasis { border: 2px solid var(--color-primary); background: rgba(var(--color-primary-rgb), 0.04); }

.icon-circle {
  width: 3rem; height: 3rem;
  border-radius: var(--radius-full);
  background: rgba(var(--color-primary-rgb), 0.10);
  color: var(--color-primary);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.35rem;
  flex-shrink: 0;
}

/* ---------- Header ---------- */
.announcement-bar {
  background: var(--color-muted);
  color: var(--color-muted-foreground);
  font-size: 0.8rem;
  text-align: center;
  padding: 0.4rem 1rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.utility-bar {
  background: var(--color-primary);
  color: var(--color-primary-foreground);
  font-size: 0.8rem;
}
.utility-bar .container { display: flex; justify-content: flex-end; gap: 1.5rem; padding-top: 0.4rem; padding-bottom: 0.4rem; flex-wrap: wrap; }
.utility-bar a { opacity: 0.85; }
.utility-bar a:hover { opacity: 1; text-decoration: underline; }

.rockin-sample-header {
  position: sticky; top: 0; z-index: 50;
  background: var(--color-primary);
  color: var(--color-primary-foreground);
}
.rockin-sample-header .container { display: flex; align-items: center; justify-content: space-between; padding-top: 0.9rem; padding-bottom: 0.9rem; gap: 1.5rem; }
.rockin-sample-header .logo { font-family: var(--font-display); font-weight: var(--weight-display); font-size: 1.35rem; color: var(--color-primary-foreground); }
.rockin-sample-header nav { display: none; gap: 1.5rem; font-size: 0.9rem; font-weight: 500; }
.rockin-sample-header nav a:hover { opacity: 0.8; }
@media (min-width: 960px) { .rockin-sample-header nav { display: flex; } }

/* ---------- Hero variants ---------- */
.hero { padding: clamp(2.5rem, 6vw, 5rem) 0; }
.hero-centered { text-align: center; }
.hero-centered .prose { max-width: var(--prose-wide-max); }
.hero-centered .cta-row { justify-content: center; }
.hero-split { }
.hero-split .hero-media {
  border-radius: var(--radius-xl);
  overflow: hidden;
  aspect-ratio: 4/3;
  background: var(--color-muted);
  background: linear-gradient(135deg, color-mix(in srgb, var(--color-primary) 12%, white), color-mix(in srgb, var(--color-accent) 25%, white));
  display: flex; align-items: center; justify-content: center;
}
.hero-media svg { width: 40%; height: 40%; opacity: 0.5; color: var(--color-primary); }
.rating-row { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 1.25rem; font-weight: 600; font-size: 0.92rem; }
.stars { color: #F5A623; letter-spacing: 2px; }
.cta-row { display: flex; gap: 1rem; flex-wrap: wrap; margin: 1.5rem 0 1rem; }

/* Compare "vs" hero */
.hero-vs { text-align: center; }
.hero-vs .vs-row { display: flex; align-items: center; justify-content: center; gap: 1.5rem; margin-bottom: 1rem; }
.hero-vs .vs-mark { font-style: italic; font-size: 1.5rem; color: var(--color-muted-foreground); }
.hero-vs .vs-logo { width: 90px; height: 90px; border-radius: var(--radius-full); background: var(--color-card); border: 1px solid var(--color-border); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 0.75rem; text-align: center; }

/* ---------- Stat strip / trust bar ---------- */
.stat-strip { display: flex; flex-wrap: wrap; justify-content: center; gap: 2.5rem; padding: 1.5rem 0; font-weight: 600; font-size: 0.95rem; }
.stat-strip .stat { display: flex; align-items: center; gap: 0.5rem; }
.stat-strip .sep { color: var(--color-border); font-weight: 400; }

/* ---------- Trust / pledge grid ---------- */
.trust-grid .card { text-align: left; }
.trust-grid .icon-circle { margin-bottom: 1rem; }

/* ---------- Testimonials ---------- */
.testimonial-card {
  background: var(--color-muted);
  background: linear-gradient(160deg, var(--color-muted), color-mix(in srgb, var(--color-muted) 50%, white));
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 1.75rem;
  position: relative;
}
.testimonial-card .quote-mark { position: absolute; top: 1rem; right: 1.25rem; font-size: 2.5rem; color: rgba(var(--color-primary-rgb), 0.18); font-family: Georgia, serif; }
.testimonial-card p.quote { font-style: italic; color: var(--color-foreground); margin: 0.75rem 0 1.25rem; }
.testimonial-footer { display: flex; align-items: center; gap: 0.75rem; }
.avatar-initials { width: 2.5rem; height: 2.5rem; border-radius: 50%; background: rgba(var(--color-primary-rgb), 0.12); color: var(--color-primary); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 0.85rem; }
.testimonial-footer .name { font-weight: 700; font-size: 0.9rem; }
.testimonial-footer .platform { font-size: 0.78rem; color: var(--color-muted-foreground); }

/* ---------- Accordion (FAQ) - native details element, no JS required ---------- */
.accordion { border-top: 1px solid var(--color-border); }
.accordion details { border-bottom: 1px solid var(--color-border); padding: 1.1rem 0; }
.accordion summary {
  cursor: pointer;
  font-weight: 600;
  font-size: 1.05rem;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.accordion summary::-webkit-details-marker { display: none; }
.accordion summary::after { content: "+"; font-size: 1.4rem; color: var(--color-primary); flex-shrink: 0; transition: transform 0.2s ease; }
.accordion details[open] summary::after { content: "\2212"; }
.accordion .accordion-body { padding-top: 0.75rem; color: var(--color-muted-foreground); }
.faq-category-nav { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-bottom: 2rem; }

/* ---------- Comparison table (us vs competitor) ---------- */
.compare-cols { display: grid; gap: 1.5rem; }
@media (min-width: 800px) { .compare-cols { grid-template-columns: 1fr 1fr; } }
.compare-col { border-radius: var(--radius-xl); padding: 2rem; border: 1px solid var(--color-border); background: var(--color-muted); }
.compare-col--ours { border: 1px solid rgba(var(--color-primary-rgb), 0.35); background: rgba(var(--color-primary-rgb), 0.04); }
.compare-col h3 { display: flex; align-items: center; gap: 0.5rem; }
.compare-col ul { list-style: none; padding: 0; margin: 0; }
.compare-col li { display: flex; gap: 0.6rem; padding: 0.5rem 0; align-items: flex-start; }

table.compare-table { width: 100%; border-collapse: collapse; font-size: 0.92rem; }
table.compare-table th, table.compare-table td { padding: 0.85rem 1rem; border-bottom: 1px solid var(--color-border); text-align: left; }
table.compare-table thead th { border-bottom: 2px solid rgba(var(--color-primary-rgb), 0.25); font-weight: 700; }
table.compare-table td.col-ours, table.compare-table th.col-ours { background: rgba(var(--color-primary-rgb), 0.05); color: var(--color-primary); font-weight: 600; }
.icon-yes { color: #1a9c5e; }
.icon-unknown { color: var(--color-muted-foreground); }

/* ---------- Generic data table (pricing, symptom, cost tables) ---------- */
table.data-table { width: 100%; border-collapse: collapse; font-size: 0.95rem; }
table.data-table th, table.data-table td { padding: 0.75rem 1rem; border: 1px solid var(--color-border); text-align: left; }
table.data-table thead th { background: var(--color-muted); font-weight: 700; }
table.data-table tbody tr:nth-child(even) { background: rgba(var(--color-muted-rgb), 0.6); }

/* ---------- Pricing cards ---------- */
.price-card { border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: 1.5rem; background: var(--color-card); }
.price-card .price { font-family: var(--font-display); font-size: 1.5rem; color: var(--color-primary); margin: 0.5rem 0; }
.price-card--emphasis { border: 2px solid var(--color-primary); background: rgba(var(--color-primary-rgb), 0.05); }
.disclaimer-box { border: 1px solid rgba(var(--color-accent-rgb), 0.45); background: rgba(var(--color-accent-rgb), 0.08); border-radius: var(--radius-md); padding: 1.25rem 1.5rem; font-size: 0.9rem; }

/* ---------- Location / map ---------- */
.location-card { border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-card); overflow: hidden; }
.location-card .map-embed { width: 100%; aspect-ratio: 16/9; border: 0; background: var(--color-muted); }
.location-card .body { padding: 1.5rem; }
.hours-list .row { display: flex; gap: 0.75rem; font-size: 0.92rem; padding: 0.25rem 0; }
.hours-list .day { width: 6.5rem; flex-shrink: 0; font-weight: 600; }

/* ---------- Blog ---------- */
.blog-grid { display: grid; gap: 2rem; grid-template-columns: 1fr; }
@media (min-width: 720px) { .blog-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .blog-grid { grid-template-columns: 1fr 1fr 1fr; } }
.blog-card { border: 1px solid var(--color-border); border-radius: var(--radius-lg); overflow: hidden; background: var(--color-card); }
.blog-card .thumb { aspect-ratio: 16/9; background: var(--color-muted); }
.blog-card .body { padding: 1.25rem; }
.blog-card .category { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-primary); }
.article-layout { display: grid; gap: 3rem; grid-template-columns: 1fr; }
@media (min-width: 900px) { .article-layout { grid-template-columns: 1fr 280px; } }

/* Neutralize the theme's own .container clearfix on this element. A
   theme's global stylesheet commonly defines
   ".container::before, .container::after { content:' '; display:table; }"
   as an old-style clearfix, harmless as long as .container stays
   display:block. .article-layout is deliberately given BOTH classes
   (".article-layout container") so it gets .container's max-width/
   centering, but .article-layout also sets display:grid -- and once a
   grid container's own ::before/::after have real generated content and
   display:table, browsers treat them as actual grid items, not
   pseudo-decoration. That silently adds two extra, invisible 0-height
   grid rows (one before the first real child, one after the last), and
   this element's own "gap: 3rem" (48px) inserts full-size gaps around
   EVERY row boundary, phantom rows included -- producing a dead 48px
   band above the very first section and another below the very last
   one, with nothing in the visible markup or this file's own rules
   explaining it. Fix: kill the clearfix pseudo-elements outright on this
   specific combination -- this element's own display:grid already
   establishes a block formatting context, so the old float-clearfix
   trick is unnecessary here anyway. Ported 2026-09-13, per Varun, from a
   confirmed real incident on a dental client's site -- check for this on
   any theme in any niche that ships this same Bootstrap-style .container
   clearfix. */
.article-layout.container::before, .article-layout.container::after { content: none; display: none; }
.toc-sidebar { position: sticky; top: 6rem; align-self: start; border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: 1.25rem; background: var(--color-muted); }
.toc-sidebar ul { list-style: none; padding: 0; margin: 0; font-size: 0.88rem; }
.toc-sidebar li { padding: 0.35rem 0; }
.callout-box { border-left: 4px solid var(--color-primary); background: var(--color-muted); border-radius: 0 var(--radius-md) var(--radius-md) 0; padding: 1.25rem 1.5rem; margin: 1.5rem 0; }
/* Author-card sizing: inline-flex so the card hugs its own content
   instead of stretching full-width; tight line-height + a small
   name-to-meta margin (not the surrounding prose's line-height, which
   reads as too loose for a two-line byline); the photo (a div with a
   background-image, not an img element -- object-fit does nothing on it) is
   centered via align-self against the two text lines; the meta line is
   set exactly 2px smaller than the name line via calc(1em - 2px) so the
   difference holds regardless of the surrounding font-size. Ported
   2026-09-13, per Varun, from the dental library's fixed version. */
.author-card { display: inline-flex; align-items: center; gap: 1rem; border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: 0.85rem 1.25rem; max-width: 100%; }
.author-card .photo { width: 3rem; height: 3rem; border-radius: 50%; background: var(--color-muted); background-size: cover; background-position: center; flex-shrink: 0; align-self: center; }
.author-card p { white-space: nowrap; line-height: 1.25; margin: 0; }
.author-card p:first-child { margin-bottom: 0.2rem; }
.author-card p.muted { font-size: calc(1em - 2px); }

/* ---------- Before/After slider (vanilla JS, no deps) ---------- */
.baa-slider { position: relative; aspect-ratio: 4/3; border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--color-border); user-select: none; }
.baa-slider .baa-after, .baa-slider .baa-before { position: absolute; inset: 0; background-size: cover; background-position: center; display: flex; align-items: center; justify-content: center; font-weight: 700; color: var(--color-primary); }
.baa-slider .baa-after { background: var(--color-muted); }
.baa-slider .baa-before { background: var(--color-muted); clip-path: inset(0 50% 0 0); }
.baa-slider .baa-handle { position: absolute; top: 0; bottom: 0; left: 50%; width: 2px; background: #fff; cursor: ew-resize; }
.baa-slider .baa-handle::after { content: "\21c6"; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 2.75rem; height: 2.75rem; border-radius: 50%; background: #fff; box-shadow: var(--shadow-lift); display: flex; align-items: center; justify-content: center; color: var(--color-primary); font-size: 1.1rem; }
.baa-slider input[type=range] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: ew-resize; margin: 0; }
.baa-label { position: absolute; top: 0.75rem; font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; background: rgba(0,0,0,0.55); color: #fff; padding: 0.25rem 0.6rem; border-radius: var(--radius-full); }
.baa-label.before { left: 0.75rem; } .baa-label.after { right: 0.75rem; }

/* ---------- Insurance / financing logo grid ---------- */
.logo-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
@media (min-width: 640px) { .logo-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 900px) { .logo-grid { grid-template-columns: repeat(4, 1fr); } }
.logo-tile { border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-card); height: 6rem; display: flex; align-items: center; justify-content: center; font-weight: 600; color: var(--color-muted-foreground); font-size: 0.85rem; text-align: center; padding: 0.5rem; }
.financing-card { border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: 1.75rem; background: var(--color-card); }
.financing-card .wordmark { font-family: var(--font-display); font-size: 1.4rem; font-weight: 700; color: var(--color-primary); margin-bottom: 0.5rem; }

/* ---------- CTA banner ---------- */
.cta-banner { background: var(--color-primary); color: var(--color-primary-foreground); border-radius: var(--radius-xl); padding: clamp(2rem, 5vw, 3.5rem); text-align: center; position: relative; overflow: hidden; }
.cta-banner h2, .cta-banner p { color: var(--color-primary-foreground); position: relative; z-index: 1; }
.cta-banner::before {
  content: ""; position: absolute; width: 22rem; height: 22rem; border-radius: 50%;
  background: rgba(var(--color-accent-rgb), 0.35);
  filter: blur(90px); top: -6rem; right: -6rem;
}
.cta-banner .cta-row { justify-content: center; position: relative; z-index: 1; }

/* ---------- Sticky urgency banner ---------- */
.urgency-banner { background: #B3261E; color: #fff; text-align: center; padding: 0.85rem 1.25rem; font-size: 0.92rem; font-weight: 600; }
.urgency-banner a { color: #fff; text-decoration: underline; }

/* ---------- Forms ---------- */
.form-field { margin-bottom: 1rem; }
.form-field label { display: block; font-size: 0.85rem; font-weight: 600; margin-bottom: 0.35rem; }
.form-field input, .form-field textarea, .form-field select {
  width: 100%; padding: 0.75rem 1rem; border-radius: var(--radius-md);
  border: 1px solid var(--color-border); font-family: var(--font-body); font-size: 0.95rem;
  background: var(--color-background); color: var(--color-foreground);
}
.form-field input:focus, .form-field textarea:focus { outline: 2px solid var(--color-primary); outline-offset: 1px; }
.form-inline { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.form-inline input { flex: 1; min-width: 200px; }

/* ---------- Footer ---------- */
.site-footer { background: var(--color-primary); color: rgba(var(--color-primary-foreground-rgb), 0.85); }
.site-footer p, .site-footer span { color: inherit; }
.site-footer a { color: rgba(var(--color-primary-foreground-rgb), 0.8); }
.site-footer a:hover { color: var(--color-primary-foreground); text-decoration: underline; }
.site-footer .footer-tier { padding: 2rem 0; border-top: 1px solid rgba(255,255,255,0.08); }
.site-footer .footer-tier:first-child { border-top: none; }
.site-footer h4 { color: var(--color-primary-foreground); font-family: var(--font-body); font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 0.9rem; }
.site-footer ul { list-style: none; padding: 0; margin: 0; font-size: 0.88rem; }
.site-footer li { margin-bottom: 0.5rem; }
.footer-columns { display: grid; gap: 2rem; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 720px) { .footer-columns { grid-template-columns: repeat(4, 1fr); } }
.footer-bottom { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 1rem; font-size: 0.8rem; opacity: 0.7; padding: 1.25rem 0; }

/* ---------- Mobile bottom tab bar ---------- */
.mobile-tabbar {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 50;
  background: rgba(255,255,255,0.97); backdrop-filter: blur(8px);
  border-top: 1px solid var(--color-border);
  display: grid; grid-template-columns: repeat(3, 1fr);
  padding: 0.5rem 0.5rem calc(0.5rem + env(safe-area-inset-bottom));
}
@media (min-width: 720px) { .mobile-tabbar { display: none; } }
.mobile-tabbar a { text-align: center; font-size: 0.75rem; font-weight: 600; color: var(--color-primary); padding: 0.4rem; }

/* ---------- Breadcrumb ---------- */
/* ---------- Breadcrumb (translated from shadcn/ui Breadcrumb -- see
   shadcn-pattern-library.md; adopts its nav/ol/aria-current structure in
   place of the previous plain link row). Ported 2026-09-13, per Varun,
   from the dental library so every niche shares the same breadcrumb
   markup/CSS contract. ---------- */
.breadcrumb { padding: 1.25rem 0 0; }
.breadcrumb-list { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; list-style: none; margin: 0; padding: 0; font-size: 0.85rem; color: var(--color-muted-foreground); }
.breadcrumb-item { display: inline-flex; align-items: center; gap: 0.4rem; }
.breadcrumb-link { color: inherit; transition: color 0.15s ease; }
.breadcrumb-link:hover { color: var(--color-foreground); text-decoration: underline; }
.breadcrumb-page { color: var(--color-foreground); font-weight: 600; }
.breadcrumb-separator { color: var(--color-border); }

/* Breadcrumb band -- a lighter-weight separator for pages that use
   .hero-lead-split (where the H1/byline live inside the hero panel, not
   here) -- gives the breadcrumb its own visual line directly under the
   site header/menu instead of sitting in plain undesigned whitespace.
   Distinct from .page-intro-band, which wraps breadcrumb+H1+byline
   together for pages with no hero-lead-split -- never use both on the
   same page. CRITICAL: this band (and .hero-lead-split) must sit OUTSIDE
   .article-body.prose--wide in the HTML -- prose--wide caps width at
   --prose-wide-max for long-form reading text, and nesting a full-width
   section inside it silently squeezes that section down to the narrow
   reading-column width instead of the full container. Ported 2026-09-13,
   per Varun, from the dental library -- this is the default above-the-fold
   layout for a service/concern page in every niche, not a dental-only
   pattern. */
.breadcrumb-band { border-bottom: 1px solid var(--color-border); margin: 0 0 1.5rem; padding-bottom: 1rem; }
.breadcrumb-band .breadcrumb { padding-top: 1.25rem; margin: 0; }

/* ---------- Hero Lead-Split: above-the-fold hero + real lead-capture
   form. Default vertical stacking for a service/concern page, every
   niche (ported 2026-09-13, per Varun, from the dental library):
     1. .breadcrumb-band
     2. .hero-media-band (the featured image, full-width row, capped to
        80% of the column width, centered -- NOT inside the two-column
        grid, and not forced into a fixed aspect-ratio crop)
     3. .hero-lead-split (the two-column row: H1 + byline + opening
        paragraph + open/expanded TOC on the left, the lead-capture form
        on the right)
   Blog posts get their own, separate above-the-fold layout -- this is
   not their default. See reference/lead-form-embed-and-hero-split.md for
   the full HTML skeleton and the hard rule that the form must be the
   client's real embed, never invented. ---------- */
.hero-media-band { max-width: 80%; margin: 0 auto 2rem; }
.hero-media-band img { width: 100%; height: auto; display: block; border-radius: var(--radius-lg); }
.hero-lead-split { display: grid; grid-template-columns: 1.15fr 1fr; gap: 2rem; align-items: start; margin: 0 0 2rem; }
@media (max-width: 860px) { .hero-lead-split { grid-template-columns: 1fr; } }
.hero-lead-split .hero-copy h1 { margin: 0 0 0.5rem; padding-top: 0; }
.hero-lead-split .hero-copy .locality-line { color: var(--color-muted-foreground); font-size: 0.92rem; margin: 0 0 1rem; }
.hero-lead-split .hero-toc { background: var(--color-muted); border-radius: var(--radius-md); padding: 1.1rem 1.25rem; }
.hero-lead-split .hero-toc h2 { font-size: 0.95rem; margin: 0 0 0.6rem; padding-top: 0; }
.hero-lead-split .hero-toc ul { list-style: none; margin: 0; padding: 0; columns: 2; column-gap: 1.5rem; }
.hero-lead-split .hero-toc li { padding: 0.2rem 0; font-size: 0.85rem; break-inside: avoid; }

.lead-form-panel { background: color-mix(in srgb, var(--color-primary) 12%, white); border-radius: var(--radius-lg); padding: 1.75rem 1.5rem; position: sticky; top: 1.5rem; }
.lead-form-panel h2 { text-align: center; margin: 0 0 1.25rem; padding-top: 0; font-size: 1.3rem; }
.lead-form-panel .form-field { margin-bottom: 0.9rem; }
.lead-form-panel label { display: block; text-align: center; font-size: 0.85rem; color: var(--color-muted-foreground); margin-bottom: 0.3rem; }
.lead-form-panel input, .lead-form-panel textarea { width: 100%; border: none; border-radius: var(--radius-sm); padding: 0.6rem 0.75rem; font: inherit; background: color-mix(in srgb, var(--color-background) 70%, transparent); box-sizing: border-box; }
.lead-form-panel .btn-submit { display: block; width: 100%; margin-top: 0.5rem; background: var(--color-accent, var(--color-primary)); color: #fff; border: none; border-radius: var(--radius-sm); padding: 0.8rem; font-weight: 700; text-align: center; cursor: pointer; }
.lead-form-placeholder { outline: 2px dashed var(--color-primary); outline-offset: 4px; }
/* Most real client embeds (CTM FormReactor and others) render as an iframe
   pointing at a hosted form, not raw input fields inside .form-field -
   the .form-field/label/input rules above are for the rare embed that is
   genuinely raw HTML. CTM specifically requires at least 480px of height
   for most of their forms; never compress an embed iframe below whatever
   height its own platform specifies (480px is CTM's own floor, not a
   generic default - check each platform's real minimum). */
.lead-form-panel iframe { width: 100%; min-height: 480px; border: none; display: block; }

/* ---------- Utility ---------- */
.gap-sm { gap: 0.75rem; } .gap-lg { gap: 2rem; }
.mt-0 { margin-top: 0; } .mb-0 { margin-bottom: 0; }
.muted { color: var(--color-muted-foreground); }

/* ==========================================================================
   Added 2026-09-23 (page hero 2026-09-26, rating pill 2026-10-01): page rhythm
   + universal page-hero layout. Canonical copy: page-designer-layout skill,
   reference/page-rhythm.css. Keep identical across all four niches.
   ========================================================================== */
/* ==========================================================================
   PAGE RHYTHM - section and block spacing system (canonical block - reference/page-rhythm.css)
   Set 2026-09-23, per Varun, from the PDOO Dental Implants redo. Install once per client brand-design.css (orchestrator or a single proposal), never per page.

   Where the numbers come from:
   - Section padding reuses this brand's own --space-section-y token
     (spacing.section, 60px ceiling), applied the way shadcn/ui marketing
     blocks apply py-16: once per section, on the section wrapper only.
   - Grid/card gap 1.5rem = shadcn gap-6, confirmed real on Innova
     (shadcn-pattern-library.md, step-grid entry).
   - Everything sits on Tailwind's 4px/8px scale (1rem, 1.5rem, 2rem, 2.5rem).

   One owner per gap: every vertical gap inside a section is set by exactly
   one rule below, as margin-top on the LATER element. Components carry no
   outer margin of their own here, so a component's margin-bottom can never
   add to (or cancel) the next element's margin-top. Only margin-block is
   touched, so components that center themselves with margin-inline: auto
   (.process-timeline, .infographic-figure) keep working.
   ========================================================================== */

:root {
  --space-text: 1rem;          /* p -> p, p -> list: this page's paragraph baseline */
  --space-heading: 1rem;       /* h2 -> its first paragraph */
  --space-heading-block: 1.5rem; /* h2 -> a component directly under it */
  --space-block: 2rem;         /* text to component (table, grid, timeline, figure...) */
  --space-subsection: 2.5rem;  /* anything -> h3 (2.5x the paragraph baseline) */
  --space-grid: 1.5rem;        /* card/grid gap, shadcn gap-6 */
}

/* ---------- One page container for breadcrumb, hero and body ---------- */
.page-flow { padding-bottom: var(--space-section-y); }
.page-flow { padding-top: 1rem; }
.page-flow > .breadcrumb-band { margin-bottom: 1.5rem; }
.page-flow > .breadcrumb-band > .breadcrumb-list { margin: 0; }
/* The hero is followed by one section's worth of space before the first
   body section's divider. */
.page-flow > .article-body { margin-top: var(--space-section-y); }
/* Body column: spans the same container as the hero, so both gutters match
   the hero's on the left AND the right. (A 56rem column pinned left left a
   ~240px dead band on the right at desktop widths.) */
.page-flow > .article-body.prose--wide { max-width: none; margin-left: 0; margin-right: 0; }

/* ---------- Sections: the only source of between-section space ---------- */
.page-section { margin: 0; padding: 0; }
.page-section__inner { padding-block: var(--space-section-y); }
.page-section:first-child > .page-section__inner,
.page-section + .page-section > .page-section__inner { border-top: 1px solid var(--color-border); }

/* A panel section (tinted, contained) and a feature section (a component
   that is already its own card) replace the divider with their own surface. */
.page-section--panel { padding-block: calc(var(--space-section-y) / 2); }
.page-section--panel > .page-section__inner {
  background: var(--color-muted);
  border-radius: var(--radius-xl);
  padding-inline: clamp(1.25rem, 4vw, 2.5rem);
  border-top: 0 !important;
}
.page-section--feature > .page-section__inner { border-top: 0 !important; }
.page-section--panel + .page-section > .page-section__inner,
.page-section--feature + .page-section > .page-section__inner { border-top: 0; }

/* ---------- Inside a section: one rule per gap type ---------- */
.page-section__inner > * { margin-block: 0; }
.page-section__inner > * + * { margin-top: var(--space-text); }
.page-section__inner > h2 + * { margin-top: var(--space-heading); }
.page-section__inner > h3 + * { margin-top: 0.5rem; }
.page-section__inner > * + :is(.data-table-wrap, .icon-card-grid, .process-timeline, figure, .accordion, .cta-banner, .testimonial-spotlight, .grid, .logo-grid, .baa-slider),
.page-section__inner > :is(.data-table-wrap, .icon-card-grid, .process-timeline, figure, .accordion, .cta-banner, .testimonial-spotlight, .grid, .logo-grid, .baa-slider) + * { margin-top: var(--space-block); }
.page-section__inner > h2 + :is(.data-table-wrap, .icon-card-grid, .process-timeline, figure, .accordion, .grid, .logo-grid, .baa-slider) { margin-top: var(--space-heading-block); }
/* Space above an h3 always wins, even right after a component. Doubled class
   on purpose so it outranks the component rule above without !important. */
.page-section__inner.page-section__inner > * + h3 { margin-top: var(--space-subsection); }

/* Lists: a little air between items so a 4-item list isn't one dense block */
.page-section__inner li + li { margin-top: 0.375rem; }
.page-section__inner ul, .page-section__inner ol { margin-bottom: 0; }

/* Grids use the shared gap */
.page-section__inner .icon-card-grid { gap: var(--space-grid); }

/* Heading resets inside sections: the section padding owns the space above */
/* Prefixed with .article-body on purpose: the brand file's own
   .article-body.prose--wide h2/h3 rules (0,2,1) would otherwise out-rank
   these and re-add their 3rem/2.25rem heading margins on top of the section
   padding - the exact "two selectors fighting over the same gap" bug. */
.article-body .page-section__inner > h2 { margin-top: 0; padding-top: 0; }
.article-body .page-section__inner > h3 { margin-bottom: 0; padding-top: 0; }

/* ---------- Separate sizing fix (not spacing): hero image crop ----------
   The brand rule forces .hero-image-panel img to aspect-ratio 4/3 with
   object-fit: cover. This page's hero is 912x509 (about 16:9) with text
   baked into the image, so the 4/3 crop cut the headline off at both
   sides. Let the image keep its own proportions. */
.page-flow .hero-image-panel img { aspect-ratio: auto; height: auto; object-fit: contain; }
.page-hero > .hero-image-panel { border-radius: var(--radius-xl); overflow: hidden; }

/* ---------- Inside-component padding: no stray trailing margins ----------
   A last paragraph's own margin-bottom was adding to the banner's bottom
   padding, so the CTA text sat visibly above center. */
.page-section__inner .cta-banner > :last-child,
.page-section__inner .testimonial-spotlight blockquote > p:last-child { margin-bottom: 0; }
/* Single-line card text centers on its icon instead of riding above it */
.page-section__inner .icon-card { align-items: center; }

/* ---------- Process timeline: step spacing matched to the real source ----------
   Innova's saved dental-implants page stacks steps with space-y-8 (2rem) on
   mobile and md:space-y-0 on desktop: alternating cards sit edge to edge
   in their own rows, so the brand rule's 2.25rem per step left large empty
   bands between the staggered cards. */
.page-section__inner .process-step { margin-bottom: 2rem; }
.page-section__inner .process-step:last-child { margin-bottom: 0; }
@media (min-width: 768px) { .page-section__inner .process-step { margin-bottom: 0; } }

/* ---------- Infographic figure: one canonical class for every page ----------
   Replaces two competing same-day markups (.hero-media-band reused in the body
   on one page, a proposed .infographic-figure on two others). Same look as the
   old in-body band: centered, 80% wide, rounded image. */
.infographic-figure { max-width: 80%; margin-inline: auto; text-align: center; }
.infographic-figure img { width: 100%; height: auto; display: block; border-radius: var(--radius-lg); }
@media (max-width: 640px) { .infographic-figure { max-width: 100%; } }

/* ---------- Page hero: every page type (set 2026-09-26, per Varun) ----------
   Markup order = mobile order: H1, featured image, intro, TOC, author box,
   then the action (the client's real lead form, or a real call button).
   Desktop (960px+), with a form: image / H1 / intro down the left, the form
   down the right, then the TOC and the author box full width underneath.
   Desktop without a form: the TOC takes the form's place on the right, the
   call button (if any) sits under the intro, the author box full width.
   The breadcrumb sits above this grid (never on the homepage); any part the
   page type doesn't have is simply left out - the grid closes up. */
.page-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "rating" "title" "media" "intro" "toc" "author" "action";
  row-gap: 1.5rem;
  align-items: start;
}
.page-hero > .page-hero__rating { grid-area: rating; justify-self: start; margin: 0; }
.page-hero > .page-hero__title { grid-area: title; margin: 0; padding-top: 0; }
.page-hero > .page-hero__media { grid-area: media; margin: 0; }
.page-hero > .page-hero__intro { grid-area: intro; }
.page-hero > .page-hero__intro > * { margin-block: 0; }
.page-hero > .page-hero__intro > * + * { margin-top: var(--space-text); }
.page-hero > .page-hero__toc { grid-area: toc; }
.page-hero > .page-hero__author { grid-area: author; justify-self: start; margin: 0; }
.page-hero > .page-hero__action { grid-area: action; }
.page-hero .page-hero__action .cta-row { margin: 0; }
.page-hero .page-hero__action .btn:not([class*="h-btn"]):not([class*="cms-slider-btn"]) { text-decoration: none; }
/* The client's real lead-form embed (CTM/GHL/etc.), never a placeholder */
.page-hero .page-hero__action.lead-form-panel { position: static; }
.page-hero .page-hero__action.lead-form-panel iframe { width: 100%; min-height: 480px; border: none; display: block; }

/* TOC panel (the brand only styles .hero-toc inside .hero-lead-split) */
.page-hero > .hero-toc { background: var(--color-muted); border-radius: var(--radius-md); padding: 1.25rem 1.5rem; }
.page-hero > .hero-toc h2 { font-size: 0.95rem; margin: 0 0 0.75rem; padding-top: 0; }
.page-hero > .hero-toc ul { list-style: none; margin: 0; padding: 0; columns: 1; column-gap: 2rem; }
.page-hero > .hero-toc li { padding: 0.2rem 0; font-size: 0.88rem; break-inside: avoid; }
@media (min-width: 640px) { .page-hero > .hero-toc ul { columns: 2; } }

@media (min-width: 960px) {
  .page-hero {
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
    column-gap: 2.5rem;
    grid-template-rows: auto auto auto 1fr auto auto;
  }
  /* With the client's real form: the form down the right, TOC full width */
  .page-hero--has-form {
    grid-template-areas: "rating action" "media action" "title action" "intro action" "toc toc" "author author";
  }
  .page-hero--has-form > .hero-toc ul { columns: 3; }
  /* No form: the TOC takes the form's place on the right */
  .page-hero:not(.page-hero--has-form) {
    grid-template-areas: "rating toc" "media toc" "title toc" "intro toc" "action toc" "author author";
  }
  .page-hero:not(.page-hero--has-form) > .hero-toc ul { columns: 1; }
}

/* An eyebrow (only where the flavor README earns it, e.g. innova-dental)
   sits directly above its section's H2. */
.page-section__inner > .eyebrow + h2 { margin-top: 0.5rem; }

/* ---------- Sample templates only: decorative hero-image fallback ----------
   Design Template Library sample pages have no real photo, so the image slot
   is an empty CSS box with a decorative icon (never a stock or placeholder
   image). Client pages always use a real img element. */
.hero-image-panel--placeholder { aspect-ratio: 16 / 9; background: var(--color-muted); display: flex; align-items: center; justify-content: center; color: var(--color-primary); }
.hero-image-panel--placeholder svg { width: 22%; height: auto; }

/* ---------- CTA banner (Innova's real CTA shape: heading, sentence, buttons) ----------
   The brand's .article-body.prose--wide h2 { margin-top: 3rem } also hits the
   banner's own h2 and pushed the text below center; and the in-body link rule
   (.cta-banner a) underlined the buttons. */
.article-body .page-section__inner .cta-banner h2 { margin-top: 0; padding-top: 0; }
.page-section__inner .cta-banner > h2 + p { margin-top: 0.75rem; }
.page-section__inner .cta-banner .cta-row { margin: 1.75rem 0 0; }
.page-section__inner .cta-banner .btn:not([class*="h-btn"]):not([class*="cms-slider-btn"]) { text-decoration: none; }

/* ---------- Rating pill (set 2026-10-01, per Varun) ----------
   Top of the page hero on dental service pages: the practice's real Google
   star rating and total review count in a white pill (from his reference:
   gold stars, bold rating, muted "· N Google reviews"). Markup comes only
   from scripts/rating-pill.py, with the client's real, current figures. */
.rating-pill {
  display: inline-flex; align-items: center; gap: 0.6rem;
  background: #ffffff; color: var(--color-foreground);
  border: 1px solid rgba(17, 24, 39, 0.06); border-radius: 9999px;
  box-shadow: 0 1px 2px rgba(17, 24, 39, 0.06), 0 4px 12px -6px rgba(17, 24, 39, 0.12);
  padding: 0.45rem 1rem 0.45rem 0.85rem; line-height: 1; font-size: 0.95rem; white-space: nowrap;
}
.rating-pill__stars { display: inline-flex; gap: 0.15rem; color: #fbbc04; }
.rating-pill__star { width: 1.15em; height: 1.15em; display: block; }
.rating-pill__star--empty { color: #e5e7eb; }
.rating-pill__value { font-weight: 700; color: var(--color-foreground); }
.rating-pill__label { color: var(--color-muted-foreground); font-weight: 500; }
.rating-pill { max-width: 100%; box-sizing: border-box; }
@media (max-width: 480px) {
  .rating-pill { gap: 0.4rem; padding: 0.4rem 0.7rem 0.4rem 0.6rem; }
  .rating-pill__stars { gap: 0.1rem; }
  .rating-pill__star { width: 0.95em; height: 0.95em; }
}
/* Very narrow phones only: let the count drop to a second line */
@media (max-width: 340px) { .rating-pill { flex-wrap: wrap; row-gap: 0.25rem; white-space: normal; } }

/* CSS-EXTENSION PROPOSAL - ewaste niche _shared/components.css
   Proposed 2026-10-20, from the TechWaste Recycling Irvine electronics
   recycling page build. Adds the .map-static (and .card-pin, for a future
   page whose drop-off section is a repeating card list rather than a
   single paragraph) classes required by page-designer-layout's "one map
   per page" hard rule (niche rule 463, e-waste, added 2026-10-19).
   The matching Google Maps Platform key already exists in this niche's
   component-config.json (static_map.keys["techwasterecycling.com"]); only
   the CSS class was missing. Uses existing tokens only, no new ones. */

.map-static { margin: 1.5rem 0; text-align: center; }
.map-static img {
  width: 100%;
  max-width: 640px;
  height: auto;
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  display: block;
  margin: 0 auto;
}
.map-static figcaption { margin-top: 0.5rem; font-size: 0.9rem; }
.map-static figcaption a { color: var(--color-primary); text-decoration: underline; font-weight: 600; }

.card-pin {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: var(--radius-full);
  background: var(--color-primary);
  color: var(--color-primary-foreground);
  font-weight: 700;
  font-size: 0.85rem;
  margin-right: 0.5rem;
}

/* VISIBLE-LINK FIX (added same proposal, pre-publish-verify Step 4e/4e-2
   finding, 2026-10-20). The niche's base anchor reset is
   "a { color: inherit; text-decoration: none; }" with no restorative rule
   for an in-body link anywhere - the exact PDOO-homepage failure mode this
   rule exists to catch. Confirmed on this page: the 5 editorial outbound
   links, the tel: link, and the map's Directions link all render as
   invisible plain text today. Restores color + underline for every
   in-body context this page (and any other ewaste page using .prose,
   .prose--wide, .article-body or .accordion) actually uses. */
.prose a,
.prose--wide a,
.article-body a,
.accordion-body a,
.data-table a {
  color: var(--color-primary);
  text-decoration: underline;
}
.prose a:hover,
.prose--wide a:hover,
.article-body a:hover,
.accordion-body a:hover,
.data-table a:hover {
  color: var(--color-green-hover);
}

/* ==========================================================================
   Equip chrome notes: the site keeps its own header and footer. These rules only style the Rockin components
   that sit inside the page (buttons, checklist, certification row).
   ========================================================================== */
.btn:not([class*="h-btn"]):not([class*="cms-slider-btn"]), .btn-primary, .btn-secondary, .btn-outline, .btn-sm { border-radius: var(--radius-btn); }
.btn-primary:hover { background: var(--color-accent-hover); }
.btn-outline { color: var(--color-primary); }
.btn-outline:hover { border-color: var(--color-primary); background: rgba(var(--color-accent-rgb), 0.05); }
.cta-banner .btn-primary { background: var(--color-accent); color: var(--color-accent-foreground); }
.cert-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.5rem; align-items: center; }
.recycle-checklist { list-style: none; padding: 0; margin: 0; }
.recycle-checklist li { display: flex; gap: 0.75rem; align-items: flex-start; padding: 0.5rem 0; }
.recycle-checklist li::before { content: "\2713"; flex-shrink: 0; width: 1.5rem; height: 1.5rem; border-radius: 50%; background: var(--color-green-light); color: #ffffff; display: flex; align-items: center; justify-content: center; font-size: 0.85rem; font-weight: 700; }
main { display: block; }

/* ==========================================================================
   Equip e-waste page layer (2026-10-21): drop-off cards, sources, visible links
   ========================================================================== */
.location-card { padding: 1.25rem 1.5rem; }
.location-card > h3 { margin: 0 0 0.5rem; display: flex; align-items: center; }
.location-card > p { margin: 0 0 0.75rem; }
.location-card .card-pin { flex-shrink: 0; }
.location-card > .card-pin { float: none; }
.location-card__directions {
  display: inline-flex; align-items: center; gap: 0.4rem;
  font-weight: 600; font-size: 0.9rem;
  padding: 0.5rem 1rem;
  border: 2px solid var(--color-accent);
  border-radius: var(--radius-btn);
  color: var(--color-primary);
  background: transparent;
  text-decoration: none;
}
.location-card__directions:hover { background: var(--color-accent); color: var(--color-accent-foreground); }
.page-section__inner > .location-card + .location-card { margin-top: 1rem; }
.page-section__inner > .map-static { margin-block: var(--space-block); }

.page-sources ol { margin: 0; padding-left: 1.5rem; }
.page-sources li { margin: 0 0 0.5rem; }
.page-section--panel .accordion { border-top-color: var(--color-border); }
.hero-image-panel.page-hero__media img { width: 100%; height: auto; }

/* ---------- Visible links (proposal-extras: #009100 + underline) ----------
   The base reset (a { color: inherit; text-decoration: none; }) leaves body links
   invisible. Includes the hero intro (Stage 8 finding). Buttons are excluded. */
.page-hero__intro a,
.prose a,
.prose--wide a,
.article-body a,
.page-section__inner a,
.accordion-body a,
.data-table a,
.location-card a,
.map-static figcaption a,
.page-sources a {
  color: var(--color-link, #009100);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.page-hero__intro a:hover,
.prose a:hover,
.prose--wide a:hover,
.article-body a:hover,
.page-section__inner a:hover,
.accordion-body a:hover,
.data-table a:hover,
.location-card a:hover,
.map-static figcaption a:hover,
.page-sources a:hover {
  color: var(--color-link-hover);
  text-decoration: underline;
}
.page-hero__intro a.btn:not([class*="h-btn"]):not([class*="cms-slider-btn"]), .page-hero__action a.btn:not([class*="h-btn"]):not([class*="cms-slider-btn"]), .page-section__inner a.btn:not([class*="h-btn"]):not([class*="cms-slider-btn"]), .cta-banner a.btn:not([class*="h-btn"]):not([class*="cms-slider-btn"]),
.location-card a.location-card__directions { text-decoration: none; }
.page-hero__action a.btn:not([class*="h-btn"]):not([class*="cms-slider-btn"]), .article-body a.btn:not([class*="h-btn"]):not([class*="cms-slider-btn"]), .cta-banner a.btn:not([class*="h-btn"]):not([class*="cms-slider-btn"]) { color: var(--color-accent-foreground); }
.location-card a.location-card__directions { color: var(--color-primary); }
.location-card a.location-card__directions:hover { color: var(--color-accent-foreground); }
.location-card a.location-card__directions:hover { color: var(--color-accent-foreground); }
.page-hero > .hero-toc a { color: var(--color-link, #009100); text-decoration: underline; text-underline-offset: 2px; }

/* e-waste city hero H1: calmer size so it fits the left column (the +2px lives in the TYPE-BUMP block below) */
.page-hero--has-form > .page-hero__title { font-size: clamp(1.75rem, 1.2vw + 1.4rem, 2.5rem); line-height: 1.2; }
.author-card .photo { font-size: 0.9rem; }
.location-card__directions { font-size: 0.9rem; }

/* TYPE-BUMP +2px START (page-designer-layout scripts/type-bump.py) */
.page-flow { font-size: calc(1rem + 2px); }
.page-flow h1 { font-size: calc(clamp(2rem, 4vw + 1rem, 3.25rem) + 2px); }
.page-flow h2 { font-size: calc(clamp(1.5rem, 2vw + 1rem, 2.25rem) + 2px); }
.page-flow h3 { font-size: calc(1.25rem + 2px); }
.page-flow .eyebrow { font-size: calc(0.75rem + 2px); }
.page-flow .btn:not([class*="h-btn"]):not([class*="cms-slider-btn"]) { font-size: calc(0.95rem + 2px); }
.page-flow .btn-sm { font-size: calc(0.85rem + 2px); }
.page-flow .badge { font-size: calc(0.78rem + 2px); }
.page-flow .pill-link { font-size: calc(0.85rem + 2px); }
.page-flow .icon-circle { font-size: calc(1.35rem + 2px); }
.page-flow .rating-row { font-size: calc(0.92rem + 2px); }
.page-flow .hero-vs .vs-logo { font-size: calc(0.75rem + 2px); }
.page-flow .stat-strip { font-size: calc(0.95rem + 2px); }
.page-flow .avatar-initials { font-size: calc(0.85rem + 2px); }
.page-flow .testimonial-footer .name { font-size: calc(0.9rem + 2px); }
.page-flow .testimonial-footer .platform { font-size: calc(0.78rem + 2px); }
.page-flow .accordion summary { font-size: calc(1.05rem + 2px); }
.page-flow table.compare-table { font-size: calc(0.92rem + 2px); }
.page-flow table.data-table { font-size: calc(0.95rem + 2px); }
.page-flow .price-card .price { font-size: calc(1.5rem + 2px); }
.page-flow .disclaimer-box { font-size: calc(0.9rem + 2px); }
.page-flow .hours-list .row { font-size: calc(0.92rem + 2px); }
.page-flow .blog-card .category { font-size: calc(0.72rem + 2px); }
.page-flow .baa-label { font-size: calc(0.72rem + 2px); }
.page-flow .logo-tile { font-size: calc(0.85rem + 2px); }
.page-flow .financing-card .wordmark { font-size: calc(1.4rem + 2px); }
.page-flow .urgency-banner { font-size: calc(0.92rem + 2px); }
.page-flow .form-field label { font-size: calc(0.85rem + 2px); }
.page-flow .form-field input, .page-flow .form-field textarea, .page-flow .form-field select { font-size: calc(0.95rem + 2px); }
.page-flow .breadcrumb-list { font-size: calc(0.85rem + 2px); }
.page-flow .hero-lead-split .hero-copy .locality-line { font-size: calc(0.92rem + 2px); }
.page-flow .lead-form-panel h2 { font-size: calc(1.3rem + 2px); }
.page-flow .lead-form-panel label { font-size: calc(0.85rem + 2px); }
.page-flow .rating-pill { font-size: calc(0.95rem + 2px); }
.page-flow .icon-stat-band .stat .number { font-size: calc(clamp(1.5rem, 3vw, 2rem) + 2px); }
.page-flow .icon-stat-band .stat .label { font-size: calc(0.85rem + 2px); }
/* Exceptions keep the brand's original sizes: TOC, bottom disclaimer, sources links */
.page-flow .hero-toc, .page-flow .toc-sidebar, .page-flow .page-sources, .page-flow .page-disclaimer { font-size: 1rem; }
.page-flow .page-sources h2, .page-flow .page-disclaimer h2 { font-size: clamp(1.5rem, 2vw + 1rem, 2.25rem); }
.page-flow .page-sources h3, .page-flow .page-disclaimer h3 { font-size: 1.25rem; }
.page-flow .page-hero--has-form > .page-hero__title { font-size: calc(clamp(1.75rem, 1.2vw + 1.4rem, 2.5rem) + 2px); }
.page-flow .author-card .photo { font-size: calc(0.9rem + 2px); }
.page-flow .location-card__directions { font-size: calc(0.9rem + 2px); }
/* TYPE-BUMP +2px END */

/* ===== Equip e-waste city page block (2026-10-21): same fixes as the TWR block, measured against the Equip Avada theme ===== */
.page-flow .page-hero__title { color: var(--color-foreground); }
.page-hero .lead-form-panel { background: var(--color-muted); border-radius: var(--radius-lg, 12px); padding: 1.25rem; }
.page-hero .lead-form-panel .form_heading { color: var(--color-foreground); font-size: 1.25rem; line-height: 1.25; margin: 0 0 0.75rem; padding: 0; border: 0; }
.page-hero .page-hero__action.lead-form-panel iframe, .lead-form-panel iframe[id^="inline-"] { min-height: 0 !important; height: var(--form-height) !important; max-height: var(--form-height) !important; width: 100% !important; border: 0 !important; display: block; position: static !important; opacity: 1 !important; visibility: visible !important; }
.page-hero--has-form > .page-hero__action:not(.lead-form-panel) { grid-area: cta; }
.page-hero--has-form { grid-template-areas: "title" "media" "action" "intro" "author" "toc" "cta"; }
@media (min-width: 960px) {
  .page-hero--has-form { grid-template-areas: "title action" "media action" "intro intro" "author author" "cta cta" "toc toc"; grid-template-rows: auto 1fr auto auto auto auto; }
  .page-hero--has-form > .page-hero__title, .page-hero--has-form > .page-hero__media { align-self: start; }
}
.rockin-page .container.page-flow { width: auto !important; min-width: 0 !important; max-width: var(--container-max, 1280px) !important; margin-left: auto !important; margin-right: auto !important; box-sizing: border-box !important; float: none !important; }
.author-card .photo { display: flex; align-items: center; justify-content: center; font-weight: 700; color: var(--color-muted-foreground); }
.author-card > div > p { margin: 0; }
.page-hero .cta-row { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; }
.cert-logos { display: flex; flex-wrap: wrap; gap: 1.25rem; align-items: center; justify-content: flex-start; margin: 1.25rem 0; }
.cert-logos img { height: 100px; width: auto; max-width: 100%; display: block; }
.truck-split { align-items: center; }
.truck-figure { margin: 0; }
.truck-figure img { width: 100%; height: auto; display: block; border-radius: var(--radius-lg, 12px); }

body:has(.rockin-page) { overflow-x: hidden; }
.author-card .platform { font-size: calc(1em - 2px); font-weight: 400; color: var(--color-muted-foreground); }
.author-card a { color: var(--color-link, #009100); text-decoration: underline; text-underline-offset: 2px; }
.author-card a:hover { color: var(--color-link-hover); }
@media (max-width: 640px) { .author-card { display: flex; } .author-card p { white-space: normal; } }



/* ===== Equip plain-page block (2026-10-27): pages that are semantic HTML inside .rockin-page with no .page-flow component
   markup (about, bio, simple service pages). Gives them the container, type scale, breadcrumb row and image sizing. ===== */
.rockin-page:not(:has(.page-flow)) { max-width: var(--container-max, 1280px); margin: 0 auto; padding: 1.25rem 1.25rem var(--space-section-y, 4rem); box-sizing: border-box; font-family: var(--font-body); font-size: 1.0625rem; line-height: 1.65; color: var(--color-foreground); }
.rockin-page:not(:has(.page-flow)) nav[aria-label="Breadcrumb"] ol { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; list-style: none; margin: 0 0 1.5rem; padding: 0; font-size: 0.875rem; color: var(--color-muted-foreground); }
.rockin-page:not(:has(.page-flow)) nav[aria-label="Breadcrumb"] li + li::before { content: "/"; margin-right: 0.4rem; color: #8a9893; }
.rockin-page:not(:has(.page-flow)) nav[aria-label="Breadcrumb"] [aria-current="page"] { color: var(--color-foreground); font-weight: 500; }
.rockin-page:not(:has(.page-flow)) h1, .rockin-page:not(:has(.page-flow)) h2, .rockin-page:not(:has(.page-flow)) h3 { font-family: var(--font-display); font-weight: var(--weight-display); color: var(--color-foreground); line-height: 1.15; letter-spacing: -0.01em; }
.rockin-page:not(:has(.page-flow)) h1 { font-size: clamp(2rem, 4vw + 1rem, 3.25rem); margin: 0 0 1.5rem; }
.rockin-page:not(:has(.page-flow)) h2 { font-size: clamp(1.5rem, 2vw + 1rem, 2.25rem); margin: 2.5rem 0 1rem; }
.rockin-page:not(:has(.page-flow)) h3 { font-size: 1.25rem; margin: 2rem 0 0.75rem; }
.rockin-page:not(:has(.page-flow)) p, .rockin-page:not(:has(.page-flow)) li { color: var(--color-foreground); }
.rockin-page:not(:has(.page-flow)) p { margin: 0 0 1rem; max-width: 62rem; }
.rockin-page:not(:has(.page-flow)) ul, .rockin-page:not(:has(.page-flow)) ol { max-width: 62rem; padding-left: 1.4rem; }
.rockin-page:not(:has(.page-flow)) a { color: var(--color-green-hover); text-decoration: underline; text-underline-offset: 2px; }
.rockin-page:not(:has(.page-flow)) a:hover { color: var(--color-primary); }
.rockin-page:not(:has(.page-flow)) nav[aria-label="Breadcrumb"] a { color: var(--color-muted-foreground); text-decoration: none; }
.rockin-page:not(:has(.page-flow)) nav[aria-label="Breadcrumb"] a:hover { text-decoration: underline; }
.rockin-page:not(:has(.page-flow)) figure { margin: 0 0 2.5rem; }
.rockin-page:not(:has(.page-flow)) figure img, .rockin-page:not(:has(.page-flow)) img { max-width: 100%; height: auto; border-radius: var(--radius-lg); display: block; }
body:has(.rockin-page) { overflow-x: hidden; }

/* Bio page LinkedIn icon + picture-to-text gap (2026-10-27, page-designer-layout rules) */
.rockin-page:not(:has(.page-flow)) .person-links { margin: 0; }
.rockin-page:not(:has(.page-flow)) .person-link { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin-left: -11px; color: var(--color-primary); text-decoration: none; }
.rockin-page:not(:has(.page-flow)) .person-link:hover { color: #0A66C2; }
.rockin-page:not(:has(.page-flow)) .person-link:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }