/* ============================================================
 * EVO TrustGuard — public profile CSS (page-public-profile.css)
 *
 * Owner:        /css/AGENTS.md (page-CSS naming under LOCKED C57 §2)
 * Cascade:      after /css/tokens.css + /css/base.css + /css/marketing.css
 * Edit policy:  page-scoped (.ppub-*). No design primitives — promote
 *               recurring values into /css/tokens.css before reuse.
 *
 * Lock:         LOCKED C68-B Sub-sprint 1A (3A.4.1A)
 *
 * Brand color contract
 * --------------------
 * Every accent surface on this page reads from two CSS variables
 * scoped on :root by the inline <style> block the render function
 * emits:
 *   --company-primary  (the guard company's primary brand color)
 *   --company-accent   (the guard company's accent brand color)
 *
 * When the colorthief extraction failed or returned NULL, the inline
 * block falls back to `--company-primary: #ffffff; --company-accent:
 * #aaa` per Sean's Med4 directive — the page never renders TrustGuard
 * red on someone else's profile.
 *
 * NO hard-coded #e5342e / var(--red) / var(--marketing-red-accent)
 * anywhere in this file. The frontend agent verifies via grep at
 * sprint close.
 *
 * Sales-class architecture (LOCKED C69-A)
 * --------------------------------------
 * Mirrors /css/page-index.css patterns: max-width 1100px section-inner,
 * 88px section padding, two-tone alternation between
 * `--bg` (#1a1a1a, deepest) and `--marketing-section-elevated`
 * (#242424, elevated) per LOCKED C70-A. Section structure: ppub-section
 * with ppub-section-deepest / ppub-section-elevated modifiers.
 *
 * Responsive breakpoints
 * ----------------------
 * ≤980px tablet (collapsed grid columns)
 * ≤560px mobile (tightened padding, smaller H1, single column)
 * ============================================================ */

/* ── Base + body ───────────────────────────────────────────────── */
html { scroll-behavior: smooth; }
body.ppub-body {
  font-family: var(--font-sans);
  font-size: var(--text-input);
  line-height: var(--leading-loose);
  background: var(--bg);
  color: #f5f5f5;
  margin: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
body.ppub-body a { color: inherit; text-decoration: none; }

/* ── Owner-preview back affordance (C107) ─────────────────────────
   Rendered by the template ONLY on the owner-preview variant
   (isPreview, derived from ?fresh=1) — never on the customer page.
   Fixed, safe-area-aware pill anchored top-left. The translucent dark
   scrim + blur + hairline keep it legible over BOTH the dark dot-grid
   hero (text-only profiles) and a full-bleed photo hero. Selector is
   scoped under .ppub-body so it wins on specificity (0,2,0) over the
   `body.ppub-body a { color: inherit }` rule (0,1,2) — without it the
   anchor would inherit the body text color and wash out. Plain anchor,
   no inline JS (LOCKED C60 CSP). */
.ppub-body .ppub-preview-back {
  position: fixed;
  top: max(env(safe-area-inset-top), 12px);
  left: 12px;
  z-index: 1000;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  /* min-height pins a 44px tap target (mobile-first LOCKED decision) — this
     affordance exists to be tapped on a phone in a chromeless PWA, so it
     must clear the 44px touch minimum. padding-y centers the label inside it. */
  min-height: 44px;
  padding: 10px 16px;
  box-sizing: border-box;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.62);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.22);
  color: #ffffff;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.01em;
}
.ppub-body .ppub-preview-back:focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: 2px;
}
@media (hover: hover) {
  .ppub-body .ppub-preview-back:hover { background: rgba(0, 0, 0, 0.78); }
}

/* ── Standalone nav row eliminated (LOCKED C68-B 1A.6.HOTFIX3) ────
   The pre-HOTFIX3 .ppub-nav band has been removed entirely. The logo
   placement is now conditional INSIDE the hero (see .ppub-hero-logo
   below). Stylesheet rules for .ppub-nav* are dropped — renderTopNav
   is a no-op alias retained only for back-compat with any test code. */

/* ── Lucide icon base (LOCKED C68-B 1A.6) ──────────────────────── */
.ppub-icon {
  display: inline-block;
  width: 20px; height: 20px;
  flex-shrink: 0;
  vertical-align: middle;
}

/* ── Hero (LOCKED C68-B Sub-sprint 1A.6.HOTFIX5) ──────────────────
   HOTFIX5 abandons the CSS background-image approach entirely. Owner-
   uploaded images have unknown aspect ratios; `background-size: cover`
   was always cropping one dimension regardless of background-position
   (HOTFIX4's `top center` only chose which side cropped). The standard
   landing-page-builder pattern — used by Squarespace / Webflow / Wix /
   Framer — is a plain `<img>` with `width: 100%; height: auto;` so the
   image's natural aspect ratio is preserved and nothing crops at any
   viewport. HOTFIX5 adopts that pattern.

   Layout model:
     - Outer .ppub-hero: full viewport width, horizontal gutters matching
       .ppub-section (40px / 32px / 20px at each breakpoint) so the hero
       lines up with the content sections beneath it instead of running
       edge-to-edge while content below is inset.
     - .ppub-hero-inner: max-width 1280px, margin 0 auto, vertical-only
       padding when text-only mode. When .ppub-hero-has-bg, inner padding
       collapses to 0 (the <img> fills the inner edge-to-edge inside the
       gutters).
     - .ppub-hero-image: width 100%, height auto. Image's natural aspect
       picks the inner's height; no cropping.
     - .ppub-hero-overlay (text+image case only): absolute fill,
       dark linear-gradient for text contrast.
     - .ppub-hero-text (text+image case only): absolute fill, has the
       padding the text content needs to breathe inside the image area.

   The dot-grid pattern on .ppub-hero (outer) still paints the deepest
   tone edge-to-edge behind everything; on text-only-no-image profiles
   it's the visible background. */
.ppub-hero {
  position: relative;
  overflow: hidden;
  background-color: var(--bg);
  background-image: radial-gradient(circle, rgba(255, 255, 255, 0.06) 1px, transparent 1px);
  background-size: 24px 24px;
  padding: 0 40px;   /* horizontal gutters match .ppub-section */
  /* 1C.4.HOTFIX1 TASK 1 — iOS safe-area inset (browser + PWA). `max()`
     ensures the iOS status bar / notch / Dynamic Island doesn't overlap
     the hero's top edge — applies in iOS Safari browser mode AND in
     installed-PWA standalone mode (both honor `env(safe-area-inset-top)`
     when `viewport-fit=cover` is set on the viewport meta, which the
     template emits unconditionally at _lib/public-profile-template.js).
     24px floor for non-notch contexts so the hero gets a designed visual
     buffer at the top instead of flushing against the viewport edge.
     Pushes the ENTIRE hero down (outer container) — both the
     `<img class="ppub-hero-image">` in custom-image mode AND the
     hero-text-layer logo/eyebrow/H1 in text mode sit below the band.
     Pre-HOTFIX1 the floor was 16px (HOTFIX7 TASK 2 PWA-only scope);
     bumped 16 → 24 to fully clear iOS browser-mode status bar on
     Dynamic Island devices and to give a more designed visual buffer
     across all viewports. */
  padding-top: max(env(safe-area-inset-top), 24px);
}
/* HOTFIX7 TASK 3 — suppress the dot-grid radial-gradient pattern when a
   hero image is uploaded. Pre-HOTFIX7 the dot-grid painted edge-to-edge
   behind everything at the section level; on mobile (narrow viewports
   where the <img> scales shorter than the parent), the dots bled visibly
   below/around the image. Image-mode owns its own background — no platform
   pattern competes with the owner's artwork. Text-only mode (no image)
   still gets the dot-grid as the deepest-tone background. */
.ppub-hero.ppub-hero-has-bg {
  background-image: none;
  /* C107 — full-bleed edge-to-edge hero image. The base/breakpoint
     `.ppub-hero { padding: 0 40|32|20px }` gutters (lines ~105 / ~699 /
     ~714) were insetting the <img>, leaving the dark hero bg as gray
     side strips. Zeroing the horizontal padding here (specificity 0,2,0
     beats the single-class breakpoint rules at 0,1,0, so this wins at
     EVERY breakpoint without per-breakpoint repetition) lets the
     width:100% <img> run flush to the viewport edges on phone. On
     desktops wider than the 1280px .ppub-hero-inner cap the image stays
     centered at 1280 — that residual margin is the page's content
     rhythm, not the 40px gray bars this fixes.
     padding-top is RE-ASSERTED (not inherited) because the breakpoint
     `padding:` shorthands reset top to 0 at ≤980 / ≤560 — exactly the
     mobile/PWA viewports where the iOS status bar / notch lives. Keeping
     the HOTFIX1 safe-area inset here stops the image from bleeding into
     the status bar (bug-report symptom 3). Applies to ALL viewers. */
  padding-left: 0;
  padding-right: 0;
  padding-top: max(env(safe-area-inset-top), 24px);
}
.ppub-hero-inner {
  position: relative;
  max-width: 1280px;
  margin: 0 auto;
  padding: 32px 0 48px;
  text-align: left;
}
.ppub-hero.ppub-hero-has-bg .ppub-hero-inner {
  /* When an <img> is present, the inner is a positioning context only —
     the image fills it edge-to-edge and the text/overlay layers stack
     absolutely on top. Vertical padding is dropped because the image's
     natural aspect already defines the band height.

     HOTFIX5 — the pre-HOTFIX5 responsive `min-height` rules (280/360/
     440px on `.ppub-hero-text-off .ppub-hero-inner`) were removed. They
     were a fallback for the empty-div + `background-size: cover` model
     where the inner had to define its own height. With the `<img>` model
     the image's natural aspect ratio sets the height directly; any
     positive `min-height` taller than the rendered image would leave
     dot-grid gap below the image (visible at narrow viewports where
     the image scales shorter). */
  padding: 0;
}

/* HOTFIX5 — owner-uploaded hero image. Width 100% fills the 1280px-max
   inner edge-to-edge. height: auto preserves natural aspect ratio so
   nothing crops at any viewport. display: block strips the inline-image
   baseline-gap. */
.ppub-hero-image {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
}

/* HOTFIX5 — gradient overlay for text contrast. Only emitted by the
   template when textLayerOn AND hero_background_url (matches HOTFIX4's
   gating). Pointer-events none so clicks/taps pass through to the
   <img> below and the absolute .ppub-hero-text layer above. */
.ppub-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.7));
  pointer-events: none;
}

/* HOTFIX5 — text wrapper for the image+text combination. Positions
   the platform-rendered text (eyebrow, H1, location, description, CTA)
   absolutely over the <img>, anchored to the bottom of the image band
   per the standard hero pattern. Padding here mirrors the text-only
   .ppub-hero-inner padding at each breakpoint. */
.ppub-hero-text {
  position: absolute;
  inset: 0;
  padding: 32px 40px 48px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

/* 1A.6.HOTFIX3 — logo INSIDE the hero. Renders only when there's no
   custom hero background image AND the text layer is visible. Mirrors
   the soft-corner treatment from the retired .ppub-nav-brand so the
   visual identity carries forward. */
.ppub-hero-logo {
  display: inline-flex; align-items: center;
  margin-bottom: 24px;
  padding: 4px 8px;
  border-radius: 10px;
}
.ppub-hero-logo-img {
  display: block;
  max-height: 56px;
  max-width: 220px;
  width: auto; height: auto;
  object-fit: contain;
  border-radius: 8px;
}
.ppub-hero-h1 {
  font-family: var(--font-sans);
  font-size: 56px;
  line-height: 1.04;
  font-weight: 700;
  letter-spacing: -0.03em;
  margin: 0 0 18px 0;
  color: var(--company-primary);
  text-wrap: balance;
}
.ppub-hero-location {
  font-size: 17px;
  color: #aaa;
  margin: 0 0 22px 0;
  letter-spacing: 0.02em;
}
.ppub-hero-desc {
  font-size: 17px; line-height: 1.55; color: var(--text-disabled);
  margin: 0 0 32px 0;
  max-width: 640px;
  text-wrap: pretty;
}

/* 1A.6 (B2) — About read-more expand. Uses native <details> so it
   works without JS. Summary inherits the .ppub-hero-desc style; the
   "Read more" affordance + ellipsis hide once <details> opens. */
.ppub-hero-desc-expand {
  margin: 0 0 32px 0;
  max-width: 640px;
}
.ppub-hero-desc-expand > summary.ppub-hero-desc {
  list-style: none;
  cursor: pointer;
  margin: 0;
  display: block;
}
.ppub-hero-desc-expand > summary.ppub-hero-desc::-webkit-details-marker { display: none; }
.ppub-hero-desc-more {
  display: inline;
  color: var(--company-primary);
  font-weight: 600;
  margin-left: 4px;
  text-decoration: underline;
}
.ppub-hero-desc-expand[open] .ppub-hero-desc-more,
.ppub-hero-desc-expand[open] .ppub-hero-desc-ellipsis { display: none; }
.ppub-hero-desc-rest {
  margin-top: 12px;
}
/* LOCKED C68-B Sub-sprint 1C.4.HOTFIX1 TASK 2 — `.ppub-hero-ctas` +
   `.ppub-cta-primary` rules removed alongside the hero "Request a quote"
   CTA markup in `renderHero()`. The contact section directly below the
   hero carries the singular Request-a-quote surface (section heading +
   wizard mount), so the in-hero CTA was redundant.
   Rule 22 disclosure: `.ppub-cta-primary` was named as one of three
   canonical class references in the LOCKED C68-B-1A.6-A rectangular
   button pattern (`/docs/locked/design-system.md` + `/docs/locked/
   misc-platform.md`). The lock itself stays in force — two other
   canonical refs (`.pubp-cta-rect`, `.form-btn`) survive. The orphaned
   `.ppub-cta-primary` references in those LOCKED files are descriptive
   examples, not load-bearing rules; they'll be refreshed in a future
   docs-cleanup sprint (HOTFIX1 scope explicitly forbids touching files
   outside the named set). */

/* ── Section scaffold (two-tone alternation per LOCKED C70-A) ────
   LOCKED C68-B Sub-sprint 1A.5 (issue 8) — section padding tightened
   from 88px → 56px desktop so thin-content sections don't read empty.
   LOCKED C68-B Sub-sprint 1A.6.HOTFIX3 — section-inner max-width
   raised 1100px → 1280px to match the hero inner container so all
   bands align edge-to-edge at desktop. Padding tightened further
   56px → 48px desktop to match the post-HOTFIX3 hero rhythm.
   Hero owns its own padding above. */
.ppub-section {
  padding: 48px 40px;
}
.ppub-section-deepest  { background: var(--bg); color: #f5f5f5; }
.ppub-section-elevated { background: var(--marketing-section-elevated); color: #f5f5f5; }
.ppub-section-inner    { max-width: 1280px; margin: 0 auto; }

/* HOTFIX7 TASK 1 — accent color wiring. Pre-HOTFIX7 every accent-class
   surface read from --company-primary; --company-accent was emitted by the
   template but no rule consumed it (Case B). Section eyebrows + interactive
   hover states now read from --company-accent so the two colors become
   visibly distinct — primary still drives H1 / CTA / chips / service-card
   left-borders / FAQ chevron / contact link base; accent drives section
   labels (eyebrows) + hover affordances. */
.ppub-eyebrow {
  display: inline-block;
  font-size: var(--text-xs); font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--company-accent);
  margin-bottom: 14px;
}

.ppub-section-h2 {
  font-family: var(--font-sans);
  font-size: 36px;
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.1;
  margin: 0 0 14px 0;
  color: #f5f5f5;
  text-wrap: balance;
}
.ppub-section-sub {
  font-size: 17px; color: #aaa; line-height: 1.55;
  max-width: 680px;
  margin: 0 0 32px 0;
  text-wrap: pretty;
}

/* ── Credential bar (LOCKED C68-B Sub-sprint 1A.6) ───────────────
   Trust badges with Lucide icons + vertical dividers (replaces the
   1A.5 pill chips). Hours + Response Time get symmetrical eyebrow+value
   treatment. Container chrome mirrors the testimonial card reference. */
.ppub-credential-bar {
  background: var(--bg);
  padding: 24px 40px 32px;
}
.ppub-credential-bar .ppub-cred-row + .ppub-cred-meta {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid var(--marketing-border);
}

.ppub-cred-row {
  display: flex; flex-wrap: wrap; align-items: stretch;
  gap: 0;
  padding: 18px 22px;
  border: 1px solid var(--marketing-border);
  border-left: 3px solid var(--company-primary);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.02);
}
.ppub-cred-item {
  display: flex; align-items: center; gap: 12px;
  padding: 4px 24px;
  border-right: 1px solid var(--marketing-border);
  color: var(--company-primary);
}
.ppub-cred-item:first-child { padding-left: 0; }
.ppub-cred-item:last-child  { padding-right: 0; border-right: none; }
.ppub-cred-item .ppub-icon { width: 22px; height: 22px; color: var(--company-primary); }
.ppub-cred-item-text {
  display: flex; flex-direction: column; gap: 2px;
  color: #f5f5f5;
}
.ppub-cred-item-eyebrow {
  /* HOTFIX7 TASK 1 — credential-item eyebrow reads from accent (matches
     .ppub-eyebrow wiring). */
  font-size: 11px; font-weight: 700;
  letter-spacing: 2px; text-transform: uppercase;
  color: var(--company-accent);
}
.ppub-cred-item-value {
  font-size: 15px; font-weight: 600;
  color: #f5f5f5;
  line-height: 1.3;
}

/* 1A.6 (B6) — Hours / Response Time as symmetrical two-column blocks
   (single column ≤560px). */
.ppub-cred-meta {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 16px 32px;
}
.ppub-cred-meta-block {
  display: flex; flex-direction: column; gap: 4px;
}
.ppub-cred-meta-value {
  font-size: 16px; font-weight: 500;
  color: #f5f5f5;
  line-height: 1.4;
}

/* ── Generic chips (fallback used by coverage non-nationwide path
   and Primary markets row inside nationwide treatment) ──────────── */
.ppub-chip-grid {
  display: flex; flex-wrap: wrap; gap: 10px;
  margin-top: 8px;
}
.ppub-chip {
  display: inline-flex; align-items: center;
  padding: 8px 14px;
  border: 1px solid var(--company-primary);
  border-radius: 100px;
  background: rgba(255, 255, 255, 0.04);
  color: #f5f5f5;
  font-size: var(--text-md);
  font-weight: 500;
}

/* ── Services as Lucide icon grid (LOCKED C68-B 1A.6 B3) ─────────
   Two-column grid desktop, single column ≤560px. Cards mirror the
   testimonial card chrome (border, padding, brand-color left accent)
   per the design-system reference lock. */
.ppub-service-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  margin-top: 8px;
}
.ppub-service-card {
  display: flex; align-items: center; gap: 14px;
  padding: 18px 22px;
  border: 1px solid var(--marketing-border);
  border-left: 3px solid var(--company-primary);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.02);
}
.ppub-service-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px;
  flex-shrink: 0;
  color: var(--company-primary);
}
.ppub-service-icon .ppub-icon { width: 28px; height: 28px; }
.ppub-service-label {
  font-size: var(--text-md);
  font-weight: 600;
  color: #f5f5f5;
}

/* ── Coverage nationwide treatment (LOCKED C68-B 1A.6 B5) ────────
   Centered globe + statement when coverage_areas.nationwide is true.
   Cities then render below as "Primary markets" with a pill row. */
.ppub-coverage-nationwide {
  display: flex; flex-direction: column; align-items: center;
  gap: 12px;
  padding: 32px 24px;
  border: 1px solid var(--marketing-border);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.02);
  color: var(--company-primary);
  text-align: center;
}
.ppub-coverage-nationwide .ppub-icon { width: 48px; height: 48px; color: var(--company-primary); }
.ppub-coverage-nationwide-text {
  font-size: 18px;
  font-weight: 500;
  color: #f5f5f5;
  letter-spacing: 0.01em;
}
.ppub-coverage-primary { margin-top: 24px; }
.ppub-coverage-primary-label {
  /* HOTFIX7 TASK 1 — "Primary markets" eyebrow reads from accent. */
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--company-accent);
  margin-bottom: 10px;
}

/* ── Social icons row (LOCKED C68-B 1A.6 B9) ────────────────────── */
.ppub-social-row {
  display: flex; flex-wrap: wrap; gap: 10px;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--marketing-border);
}
.ppub-social-link {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px;
  border: 1px solid var(--marketing-border);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.02);
  color: var(--company-primary);
  transition: background 0.15s, border-color 0.15s;
}
.ppub-social-link:hover {
  /* HOTFIX7 TASK 1 — hover border + icon color flip to accent so the
     interactive state is visibly distinct from the resting primary tone. */
  background: rgba(255, 255, 255, 0.06);
  border-color: var(--company-accent);
  color: var(--company-accent);
}
.ppub-social-link .ppub-icon { width: 20px; height: 20px; }

/* ── Hours + response time callout ────────────────────────────── */
.ppub-callout-wrap {
  display: flex; justify-content: center;
}
.ppub-callout {
  display: inline-block;
  padding: 28px 40px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--marketing-border);
  border-radius: 12px;
  text-align: center;
}
.ppub-callout-line {
  font-size: 18px;
  color: #f5f5f5;
  line-height: 1.5;
  margin: 0;
}
.ppub-callout-line + .ppub-callout-line { margin-top: 8px; }
.ppub-callout-label {
  color: var(--company-primary);
  font-weight: 600;
  letter-spacing: 0.02em;
}

/* ── FAQ ──────────────────────────────────────────────────────── */
.ppub-faq-list {
  display: flex; flex-direction: column; gap: 12px;
  max-width: 820px;
}
.ppub-faq-item {
  border: 1px solid var(--marketing-border);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.02);
  overflow: hidden;
}
.ppub-faq-q {
  cursor: pointer;
  list-style: none;        /* hide native disclosure triangle */
  padding: 18px 22px;
  font-size: 16px;
  font-weight: 600;
  color: #f5f5f5;
  position: relative;
  /* Chevron via ::after; flips when open. */
}
.ppub-faq-q::-webkit-details-marker { display: none; }
.ppub-faq-q::after {
  content: '+';
  position: absolute; right: 22px; top: 50%;
  transform: translateY(-50%);
  font-size: 22px; font-weight: 400; line-height: 1;
  color: var(--company-primary);
  transition: transform .15s;
}
details[open] > .ppub-faq-q::after { content: '−'; }
.ppub-faq-a {
  padding: 0 22px 20px 22px;
  font-size: 15px; line-height: 1.55;
  color: var(--text-disabled);
  white-space: pre-wrap;
}

/* ── Testimonials ─────────────────────────────────────────────── */
.ppub-testimonial-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 18px;
}
.ppub-testimonial-card {
  padding: 28px 26px;
  border: 1px solid var(--marketing-border);
  border-left: 3px solid var(--company-primary);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.02);
}
.ppub-testimonial-quote {
  font-size: 17px; line-height: 1.5;
  color: #f5f5f5;
  margin: 0 0 16px 0;
  font-style: italic;
}
.ppub-testimonial-attrib {
  font-size: 13px;
  color: var(--text-disabled);
  letter-spacing: 0.02em;
}

/* ── Contact ──────────────────────────────────────────────────── */
/* LOCKED C68-B Sub-sprint 1C.2 — the 1A `.ppub-contact-form-placeholder`
   dashed-border rule was removed when the contact section's placeholder
   was replaced by the real wizard mount. The four `.pp-hero-btn` cards
   below + the `<div data-wizard-mount>` slot live in their place. */
.pp-hero-question {
  margin: 24px 0 32px 0;
}
.pp-hero-prompt {
  font-weight: 600;
  margin-bottom: 12px;
  font-size: 16px;
}
.pp-hero-buttons {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  max-width: 480px;
}
.pp-hero-btn {
  padding: 14px 18px;
  border: 1.5px solid var(--border, #e0e0e0);
  border-radius: 10px;
  background: var(--surface, #fff);
  color: var(--ink, #1a1a1a);
  font-family: 'DM Sans', sans-serif;
  font-size: 15px;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}
.pp-hero-btn:hover {
  border-color: var(--company-primary, #cc0000);
  background: var(--surface-2, #fafafa);
}
.pp-hero-btn-secondary {
  font-size: 14px;
  color: var(--ink-muted, #666);
}

.ppub-contact-direct {
  margin-top: 32px;
}
.ppub-contact-direct-h {
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #aaa;
  margin-bottom: 14px;
}
.ppub-contact-direct-row {
  font-size: 17px;
  color: #f5f5f5;
  line-height: 1.6;
  margin-bottom: 8px;
}
.ppub-contact-direct-label {
  color: #aaa;
  font-weight: 500;
  margin-right: 4px;
}
.ppub-contact-phone,
.ppub-contact-website {
  color: var(--company-primary);
  font-weight: 600;
  text-decoration: none;
  word-break: break-all;
}
.ppub-contact-phone:hover,
.ppub-contact-website:hover {
  /* HOTFIX7 TASK 1 — link hover flips color to accent + adds underline.
     Resting color stays primary so the link sits visually with the
     company's brand; the hover affordance is the accent tone. */
  color: var(--company-accent);
  text-decoration: underline;
}
/* LOCKED C68-B 1A.6 — outbound `↗` arrow markup removed from
   renderContact(). No replacement style; clickable text alone signals
   navigation. */

/* ── Footer (minimal — guest on their page) ──────────────────── */
.ppub-footer {
  background: var(--bg);
  border-top: 1px solid var(--marketing-border);
  padding: 32px 40px;
}
.ppub-footer-inner {
  max-width: 1280px; margin: 0 auto;
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between;
  gap: 12px 24px;
  font-size: 13px;
  color: var(--text-disabled);
}
.ppub-footer-mark {
  color: var(--text-disabled);
}
.ppub-footer-mark-link {
  color: #f5f5f5;
  font-weight: 600;
}
.ppub-footer-mark-link:hover { text-decoration: underline; }
.ppub-footer-meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px;
}
.ppub-footer-sep { color: var(--marketing-border); }
.ppub-footer-link {
  color: var(--text-disabled);
}
.ppub-footer-link:hover { color: #f5f5f5; text-decoration: underline; }

/* ── Responsive (≤980px tablet) ───────────────────────────────── */
@media (max-width: 980px) {
  /* HOTFIX5 — gutters split between outer (.ppub-hero) and inner. Outer
     carries the horizontal padding so the image+text alignment matches
     .ppub-section. Inner keeps vertical-only padding for the text-only
     mode; .ppub-hero-text mirrors the values for the image+text mode. */
  .ppub-hero { padding: 0 32px; }
  .ppub-hero-inner { padding: 28px 0 40px; }
  .ppub-hero-text { padding: 28px 32px 40px; }
  .ppub-hero-h1 { font-size: 44px; }
  .ppub-section { padding: 40px 32px; }
  .ppub-credential-bar { padding: 20px 32px 28px; }
  .ppub-section-h2 { font-size: 30px; }
  .ppub-cred-item { padding: 4px 18px; }
}

/* ── Responsive (≤560px mobile) ───────────────────────────────── */
@media (max-width: 560px) {
  /* HOTFIX5 — outer .ppub-hero owns the horizontal gutters (matches
     .ppub-section); inner is vertical-only in text-only mode and zero
     in image mode (the .ppub-hero-has-bg override on the inner). */
  .ppub-hero { padding: 0 20px; }
  .ppub-hero-inner { padding: 24px 0 28px; }
  .ppub-hero-text { padding: 24px 20px 28px; }
  .ppub-hero-h1 { font-size: 32px; line-height: 1.1; }
  .ppub-hero-location { font-size: 15px; }
  .ppub-hero-desc { font-size: 15px; }
  /* 1C.4.HOTFIX1 TASK 2 — `.ppub-hero-ctas` + `.ppub-cta-primary` mobile
     overrides removed alongside the hero CTA markup. */

  .ppub-section { padding: 32px 20px; }
  .ppub-credential-bar { padding: 16px 20px 24px; }
  .ppub-hero-logo { margin-bottom: 18px; }
  .ppub-hero-logo-img { max-height: 44px; max-width: 180px; }
  /* 1A.6 (B4) — credentials bar stacks vertically on mobile so each
     fact gets its own row with a bottom border separator instead of
     vertical dividers (which would crush at narrow widths). */
  .ppub-cred-row { flex-direction: column; padding: 12px 16px; }
  .ppub-cred-item {
    padding: 12px 0;
    border-right: none;
    border-bottom: 1px solid var(--marketing-border);
    width: 100%;
  }
  .ppub-cred-item:last-child { border-bottom: none; }
  .ppub-cred-meta { gap: 12px; }
  .ppub-cred-meta-value { font-size: 15px; }
  .ppub-section-h2 { font-size: 26px; }
  .ppub-section-sub { font-size: 15px; }

  /* 1A.6 (B3) — services grid → single column on mobile. */
  .ppub-service-grid { grid-template-columns: 1fr; gap: 10px; }
  .ppub-service-card { padding: 16px 18px; }
  .ppub-service-icon { width: 32px; height: 32px; }
  .ppub-service-icon .ppub-icon { width: 24px; height: 24px; }
  .ppub-service-label { font-size: var(--text-md); }

  .ppub-chip { padding: 7px 12px; font-size: var(--text-sm); }

  /* 1A.6 (B5) — nationwide block tighter on mobile. */
  .ppub-coverage-nationwide { padding: 24px 18px; }
  .ppub-coverage-nationwide .ppub-icon { width: 40px; height: 40px; }
  .ppub-coverage-nationwide-text { font-size: 16px; }

  .ppub-faq-q { padding: 16px 18px; font-size: 15px; }
  .ppub-faq-a { padding: 0 18px 18px 18px; font-size: 14px; }

  .ppub-testimonial-grid { grid-template-columns: 1fr; gap: 12px; }
  .ppub-testimonial-card { padding: 24px 22px; }
  .ppub-testimonial-quote { font-size: 16px; }

  /* 1C.2 — `.ppub-contact-form-placeholder` rule removed; wizard mount + hero buttons live here now. */
  .pp-hero-prompt { font-size: 15px; }
  .pp-hero-btn { padding: 13px 16px; font-size: 14px; }
  .ppub-contact-direct-row { font-size: 16px; }

  /* 1A.6 (B9) — social icons tighter spacing on mobile. */
  .ppub-social-link { width: 38px; height: 38px; }

  .ppub-footer { padding: 24px 20px; }
  .ppub-footer-inner { font-size: 12px; }
}

/* ──────────────────────────────────────────────────────────────
 * LOCKED C68-B Sub-sprint 1C.2 — brand-scoped wizard chrome
 *   (popup-brand wordmark decision SUPERSEDED by Sub-sprint 1C.4)
 * ──────────────────────────────────────────────────────────────
 * Applied when the 12-step intake wizard mounts inside a public
 * profile page (dataPage='public-profile'). intake-wizard.js adds
 * the `.ppub-intake` class to the wizard host element on mount;
 * the host is the common ancestor of all three overlay roots
 * (#main-popup, #exit-popup, #jobseeker-popup) so descendant
 * selectors below reach interactive surfaces across the wizard
 * AND the exit-intent + interstitial overlays.
 *
 * Recolors the wizard's red-accent surfaces — primary CTAs,
 * progress fill, focus rings, TCPA link, interstitial dots/copy,
 * exit-intent CTA + heading — to read `var(--company-primary)`
 * and `var(--company-accent)` (emitted into the inline <style>
 * block by `_lib/public-profile-template.js` buildBrandStyleBlock()).
 *
 * Brand color storage is trust-the-user per the 2026-05-26 decision
 * (1A.5-lineage HOTFIX). No server-side contrast adjustment runs in
 * `save-public-profile.js` or `profile-upload-logo.js` — owners self-
 * correct by previewing their profile. Wizard button text color is
 * luminance-aware via CSS Relative Color Syntax (see the 1C.4.HOTFIX2
 * @supports block at the bottom of this section) so legibility holds
 * regardless of the user's saved color choice.
 *
 * Intentionally NOT overridden:
 *   • `.popup-header { background: var(--dark) }` — platform-brand
 *     chrome is a trust signal (seeker is filling out a wizard
 *     served by TrustGuard on behalf of <company>; the platform
 *     identity in the header is a credibility anchor).
 *   • `.p-error` — validation-error red is color-of-distress
 *     semantics; consistent across all branding contexts.
 *
 * SUPERSEDED by Sub-sprint 1C.4 (3A.4.1C.4):
 *   • `.popup-brand` / `.popup-brand span` — pre-1C.4 the public-
 *     profile wizard popup emitted "EVO <span>TrustGuard</span>"
 *     in the header and the wordmark stayed red (the marketing.css
 *     base rule `.popup-brand span { color: var(--red) }` survived
 *     unchanged on the public-profile path). Sub-sprint 1C.4
 *     reverses this: `intake-wizard.js renderPopupHeader()` now
 *     emits the host company's `users.company_name` as the entire
 *     `.popup-brand` content (no `<span>` accent) on the public-
 *     profile path. The base `.popup-brand { color: var(--white) }`
 *     rule from marketing.css carries it; no `.ppub-intake`-scoped
 *     override is needed because the public-profile branch of the
 *     wizard helper no longer EMITS a `<span>` child. The 1C.2
 *     "TrustGuard wordmark stays red for platform identity"
 *     decision is no longer in force on the public-profile path —
 *     TrustGuard branding for that surface relocates to the
 *     "Powered by TrustGuard" footer at the bottom of the public
 *     profile page (`renderFooter()` in
 *     `_lib/public-profile-template.js`).
 *
 * !important is defense-in-depth — the override selector
 * (.ppub-intake .<base-selector>) already wins on specificity, but
 * any future seeker-page CSS change that bumps source specificity
 * is pre-empted.
 */

/* Selected button + progress (in-body chrome) */
.ppub-intake .p-btn.selected {
  background: var(--company-primary) !important;
  border-color: var(--company-primary) !important;
}
.ppub-intake .popup-progress-fill {
  background: var(--company-primary) !important;
}

/* Primary CTA (Continue → / Submit My Request →). Hover state moves
   into the `@media (hover: hover)` block at the bottom of this section
   per 1C.4.HOTFIX1 TASK 3 — mobile synthetic-hover-stick was deferring
   the `.selected` paint until a scroll-triggered recalc. */
.ppub-intake .p-next {
  background: var(--company-primary) !important;
}

/* Focus rings (city/state/email/phone/textarea/select) */
.ppub-intake .p-input-group input:focus,
.ppub-intake .p-input-group textarea:focus,
.ppub-intake .p-input-group select:focus {
  border-color: var(--company-accent) !important;
  outline-color: var(--company-accent) !important;
}

/* TCPA link (Privacy Policy + Terms of Service) */
.ppub-intake .p-tcpa a {
  color: var(--company-primary) !important;
}

/* Interstitial (step 10) — "Checking availability..." copy + dots */
.ppub-intake .matching-anim {
  color: var(--company-primary) !important;
}
.ppub-intake .dot-pulse span {
  background: var(--company-primary) !important;
}

/* Exit-intent overlay — heading + CTA (hover relocates below) */
.ppub-intake .exit-box h3 {
  color: var(--company-primary) !important;
}
.ppub-intake .exit-continue {
  background: var(--company-primary) !important;
}

/* ──────────────────────────────────────────────────────────────
 * LOCKED C68-B Sub-sprint 1C.4.HOTFIX1 TASK 3 — hover-scoped overrides
 * ──────────────────────────────────────────────────────────────
 * Three `.ppub-intake *:hover` rules wrapped in `@media (hover: hover)`
 * so they apply ONLY on devices with true hover (desktop). Mobile
 * devices report `hover: none`, so the rules don't apply and the
 * `.selected` paint isn't competing with a stuck synthetic-hover state.
 *
 * Root cause (pre-HOTFIX1): `.ppub-intake .p-btn.selected` (above) and
 * `.ppub-intake .p-btn:hover` (here) share equal specificity, so source
 * order decides. `:hover` was emitted AFTER `.selected` in the file, so
 * on mobile after a tap, the touched element receives synthetic-hover-
 * stick AND the `.selected` class — `:hover` wins by source order and
 * the brand-fill paint deferred until a scroll triggered a compositor
 * frame.
 *
 * Marketplace (`marketing.css`) doesn't suffer the same lag: the base
 * `.p-btn:hover` (line 730) is emitted BEFORE `.p-btn.selected` (line
 * 731), so `.selected` overrides on source order. The override block
 * here inverted that order for the `.ppub-intake` brand chrome —
 * `@media (hover: hover)` scoping resolves the inversion on mobile
 * without touching marketplace.
 *
 * Marketing.css base rules are NOT touched — marketplace path remains
 * byte-identical pre- and post-HOTFIX1.
 * ────────────────────────────────────────────────────────────── */
@media (hover: hover) {
  .ppub-intake .p-next:hover {
    background: var(--company-accent) !important;
  }
  /* p-btn:hover — full coverage of border + color + background-wash.
     Source rule paints all three with var(--red) / var(--red-dark) /
     var(--marketing-red-wash); the override recolors all three so
     the unselected-button-hover state matches the brand chrome. The
     `--surface-2, #fafafa` wash matches the hero-button hover above
     (internally consistent across hero buttons + wizard buttons). */
  .ppub-intake .p-btn:hover {
    border-color: var(--company-primary) !important;
    color: var(--company-primary) !important;
    background: var(--surface-2, #fafafa) !important;
  }
  .ppub-intake .exit-continue:hover {
    background: var(--company-accent) !important;
  }
}

/* ──────────────────────────────────────────────────────────────
 * LOCKED C68-B Sub-sprint 1C.4.HOTFIX2 — luminance-aware text color
 * ──────────────────────────────────────────────────────────────
 * Phase A defensive CSS for the wizard's interactive buttons. When
 * the user's saved `--company-primary` resolves to a near-white or
 * near-black value, the 1C.2 brand-scope override (above) paints
 * the Continue button (.ppub-intake .p-next) and selected-state
 * option buttons (.ppub-intake .p-btn.selected) with that color as
 * the background fill. The base wizard text color is white, which
 * collapses to white-on-white when the user's brand color is light
 * (the SGS LLC defect observed in HOTFIX1 smoke testing).
 *
 * Trust-the-user is preserved — the saved hex is unchanged. We
 * auto-pick text color based on the fill's lightness via CSS
 * Relative Color Syntax (RCS): `lch(from <color> L C H)` resolves
 * channels relative to the source color. The formula
 * `(50 - l) * 100` maps:
 *   L > 50 (light fills)  → negative lightness → clamps to 0
 *                            → black text
 *   L < 50 (dark fills)   → positive lightness > 100 → clamps to 100
 *                            → white text
 *   L = 50 exactly        → 0 → black text (sensible default at the
 *                            boundary)
 *
 * Auto-flip at the L=50 threshold means dark text on light fills,
 * white text on dark fills — legible at any brand color.
 *
 * Browser support (RCS `from <color>`): Chrome 119+, Safari 16.4+,
 * Firefox 120+. Older browsers fall back to the white-text rule
 * outside the @supports block — current production behavior, so no
 * regression; light-brand users still hit the legibility defect on
 * old browsers but every other case works as before.
 *
 * @supports test `color: lch(from red l 0 0)` exercises the `from
 * <color>` clause specifically; browsers that parse `lch()` but
 * don't yet support relative-color-from will fail the test and use
 * the fallback.
 *
 * Border uses `currentColor` so it tracks the auto-picked text
 * color — at light fills the border becomes dark (visible),
 * matching the text; at dark fills the border becomes white,
 * matching the text. Always visible regardless of fill.
 *
 * Hover override mirrors the same RCS pattern inside the existing
 * @media (hover: hover) block from HOTFIX1 — desktop hover still
 * paints legibly when the user's brand color is light. Mobile
 * (`hover: none`) doesn't read these rules; the .selected paint
 * from the base rule above carries the same RCS treatment via the
 * .p-btn.selected selector.
 * ────────────────────────────────────────────────────────────── */
.ppub-intake .p-next,
.ppub-intake .p-btn.selected {
  color: #fff;
  border: 1px solid currentColor !important;
}
@supports (color: lch(from red l 0 0)) {
  .ppub-intake .p-next,
  .ppub-intake .p-btn.selected {
    color: lch(from var(--company-primary) calc((50 - l) * 100) 0 0) !important;
  }
}

@media (hover: hover) {
  .ppub-intake .p-btn:hover {
    color: #fff;
  }
  @supports (color: lch(from red l 0 0)) {
    .ppub-intake .p-btn:hover {
      color: lch(from var(--company-primary) calc((50 - l) * 100) 0 0) !important;
    }
  }
}