/*
Theme Name: Pipe Flooders
Theme URI: https://pipeflooders.com
Description: Child theme of Twenty Twenty-Four for pipeflooders.com. Coded homepage template only (front-page.php) — everything else inherits the parent block theme.
Author: Pipe Flooders
Template: twentytwentyfour
Version: 1.0.0
Text Domain: pipeflooders
*/

/* ==========================================================================
   Design tokens — values sourced exactly from the Pipe Flooders brand
   guidelines (pipe-flooders-brand-guidelines-en.html, v1.1). Do not
   reinterpret these — colors, type scale, and spacing are fixed upstream.
   ========================================================================== */

:root {
  /* Color */
  --pf-ink: #141414;
  --pf-paper: #faf9f7;
  --pf-panel: #f4f3ef;
  --pf-line: #e5e2dc;
  --pf-muted: #6b6b6b;
  --pf-orange: #FF5A1F;
  --pf-orange-dark: #FF8A5C;
  --pf-error: #a52020; /* reused from the guidelines doc's own "incorrect usage" indicator color */

  /* Type */
  --pf-font-display: 'Archivo Black', sans-serif;
  --pf-font-heading: 'Space Grotesk', sans-serif;
  --pf-font-body: 'Space Grotesk', sans-serif;
  --pf-font-mono: 'JetBrains Mono', monospace;

  /* Spacing — strict 4px base unit */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-14: 56px;
  --sp-16: 64px;
  --sp-20: 80px;
  --sp-24: 96px;

  /* Radius — one scale, used consistently */
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 24px;

  --pf-container: 1180px;
  --pf-nav-height: 76px;
}

/* ==========================================================================
   Reset / base
   ========================================================================== */

.pf-body,
.pf-body * {
  box-sizing: border-box;
}

.pf-body {
  margin: 0;
  background: var(--pf-paper);
  color: var(--pf-ink);
  font-family: var(--pf-font-body);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

.pf-body img,
.pf-body svg {
  display: block;
  max-width: 100%;
}

.pf-body a {
  color: inherit;
}

.pf-skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--pf-ink);
  color: #fff;
  padding: var(--sp-2) var(--sp-4);
  z-index: 1000;
  font-family: var(--pf-font-mono);
  font-size: 12px;
}

.pf-skip-link:focus {
  left: var(--sp-4);
  top: var(--sp-4);
}

.pf-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.pf-body :focus-visible {
  outline: 2px solid var(--pf-orange);
  outline-offset: 3px;
}

/* ==========================================================================
   Type primitives
   ========================================================================== */

.pf-kicker {
  font-family: var(--pf-font-mono);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--pf-orange);
  margin: 0 0 var(--sp-2);
}

.pf-h2 {
  font-family: var(--pf-font-heading);
  font-weight: 700;
  font-size: 23px;
  line-height: 1.2;
  letter-spacing: -0.01em;
  margin: 0 0 var(--sp-4);
}

.pf-lede {
  font-size: 15px;
  line-height: 1.65;
  color: var(--pf-ink);
  max-width: 620px;
  margin: 0;
}

@media (min-width: 768px) {
  .pf-h2 { font-size: 28px; }
  .pf-lede { font-size: 16px; }
}

/* ==========================================================================
   Logo lockup
   ========================================================================== */

.pf-lockup {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  text-decoration: none;
  color: inherit;
}

.pf-lockup__text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  line-height: 1;
}

.pf-lockup__line {
  font-family: var(--pf-font-display);
  font-size: 15px;
  line-height: 1;
  letter-spacing: -0.01em;
  color: var(--pf-ink);
}

.pf-lockup__line--flooders {
  color: var(--pf-orange);
}

.pf-lockup__line--dark {
  color: #fff;
}

.pf-lockup__line--dark-accent {
  color: var(--pf-orange-dark);
}

/* ==========================================================================
   Nav
   ========================================================================== */

.pf-nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(250, 249, 247, 0.92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--pf-line);
}

.pf-nav__inner {
  max-width: var(--pf-container);
  margin: 0 auto;
  height: var(--pf-nav-height);
  padding: 0 var(--sp-6);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-6);
}

.pf-nav__links {
  display: none;
  align-items: center;
  gap: var(--sp-8);
  font-size: 14.5px;
  font-weight: 500;
}

/* Header/footer nav now render via wp_nav_menu() (2026-08-27 -- was
   hardcoded, not editable in wp-admin). Its default Walker wraps each item
   in <li>, but these are flex containers built expecting direct <a>
   children with `gap` spacing -- stripping default list styling keeps the
   same visual result regardless of tag name. */
.pf-nav__links li,
.pf-nav__links--mobile li,
.pf-footer__links li {
  list-style: none;
  margin: 0;
}

.pf-nav__links a {
  text-decoration: none;
  color: var(--pf-ink);
}

.pf-nav__links a:hover {
  color: var(--pf-orange);
}

/* Desktop menu children are real dropdowns, not extra flex items. */
.pf-nav__links > li {
  position: relative;
}

.pf-nav__links .sub-menu {
  position: absolute;
  top: 100%;
  left: 50%;
  z-index: 110;
  display: flex;
  min-width: 260px;
  margin: 0;
  padding: var(--sp-3);
  flex-direction: column;
  gap: 2px;
  background: var(--pf-paper);
  border: 1px solid var(--pf-line);
  border-radius: var(--radius-md);
  box-shadow: 0 14px 32px rgba(20, 20, 20, 0.12);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translate(-50%, -4px);
  transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s ease;
}

.pf-nav__links .sub-menu a {
  display: block;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  line-height: 1.35;
}

.pf-nav__links .sub-menu a:hover,
.pf-nav__links .sub-menu a:focus-visible {
  background: var(--pf-panel);
}

.pf-nav__links > .menu-item-has-children:hover > .sub-menu,
.pf-nav__links > .menu-item-has-children:focus-within > .sub-menu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translate(-50%, 0);
}

.pf-nav__cta {
  display: none;
}

.pf-nav__toggle {
  appearance: none;
  background: none;
  border: none;
  width: 44px;
  height: 44px;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  cursor: pointer;
}

.pf-nav__toggle span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--pf-ink);
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.pf-nav--open .pf-nav__toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.pf-nav--open .pf-nav__toggle span:nth-child(2) { opacity: 0; }
.pf-nav--open .pf-nav__toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.pf-nav__links--mobile {
  display: none;
  flex-direction: column;
  gap: var(--sp-4);
  padding: var(--sp-4) var(--sp-6) var(--sp-8);
  font-size: 16px;
  font-weight: 500;
  border-top: 1px solid var(--pf-line);
}

.pf-nav__links--mobile a {
  display: block;
  min-height: 44px;
  padding: 11px 0;
  box-sizing: border-box;
  text-decoration: none;
  color: var(--pf-ink);
}

.pf-nav__links--mobile .sub-menu {
  margin: 0 0 var(--sp-2);
  padding: 0 0 0 var(--sp-4);
  border-left: 1px solid var(--pf-line);
}

.pf-nav__links--mobile .sub-menu a {
  color: var(--pf-muted);
}

.pf-nav--open .pf-nav__links--mobile {
  display: flex;
}

@media (min-width: 900px) {
  .pf-nav__links { display: flex; }
  .pf-nav__cta { display: inline-flex; }
  .pf-nav__toggle { display: none; }
  .pf-nav__links--mobile { display: none !important; }
}

/* ==========================================================================
   Buttons
   ========================================================================== */

.pf-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  font-family: var(--pf-font-heading);
  font-weight: 600;
  font-size: 15px;
  line-height: 1;
  min-height: 44px;
  box-sizing: border-box;
  padding: var(--sp-3) var(--sp-6);
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: transform 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}

.pf-btn:active {
  transform: scale(0.98);
}

.pf-btn--primary {
  background: var(--pf-orange);
  color: var(--pf-ink);
}

.pf-btn--primary:hover {
  background: #e8500f;
}

.pf-btn--ghost {
  background: transparent;
  color: var(--pf-ink);
  border-color: var(--pf-ink);
}

.pf-btn--ghost:hover {
  background: var(--pf-panel);
}

.pf-btn--loading {
  opacity: 0.7;
  cursor: progress;
}

/* ==========================================================================
   Hero
   ========================================================================== */

.pf-hero {
  border-bottom: 1px solid var(--pf-line);
}

.pf-hero__inner {
  max-width: var(--pf-container);
  margin: 0 auto;
  padding: var(--sp-16) var(--sp-6) var(--sp-20);
  min-height: calc(100dvh - var(--pf-nav-height));
  display: flex;
  flex-direction: column-reverse;
  align-items: center;
  justify-content: center;
  gap: var(--sp-12);
}

.pf-hero__copy {
  max-width: 620px;
  text-align: left;
}

.pf-hero__headline {
  font-family: var(--pf-font-display);
  font-size: 40px;
  line-height: 0.98;
  letter-spacing: -0.01em;
  margin: 0 0 var(--sp-6);
}

.pf-hero__sub {
  font-size: 16px;
  line-height: 1.6;
  color: var(--pf-ink);
  max-width: 480px;
  margin: 0 0 var(--sp-8);
}

.pf-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4);
}

.pf-hero__visual {
  position: relative;
  width: 100%;
  max-width: 480px;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-lg);
  background: radial-gradient(circle at 62% 45%, rgba(255, 90, 31, 0.10), rgba(20, 20, 20, 0.03) 60%), var(--pf-panel);
  border: 1px solid var(--pf-line);
  overflow: hidden;
}

.pf-pipe-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 0.6s ease;
}

.pf-pipe-canvas--ready {
  opacity: 1;
}

.pf-pipe-fallback {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.3s ease;
}

.pf-pipe-fallback--hidden {
  opacity: 0;
  pointer-events: none;
}

@media (min-width: 900px) {
  .pf-hero__inner {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding-top: var(--sp-12);
    padding-bottom: var(--sp-12);
  }

  .pf-hero__headline {
    font-size: 56px;
  }

  .pf-hero__visual {
    max-width: 440px;
  }
}

@media (min-width: 1180px) {
  .pf-hero__headline {
    font-size: 62px;
  }
}

/* ==========================================================================
   Generic section
   ========================================================================== */

.pf-section {
  border-bottom: 1px solid var(--pf-line);
  padding: var(--sp-16) 0;
}

.pf-section--panel {
  background: var(--pf-panel);
}

.pf-section__inner {
  max-width: var(--pf-container);
  margin: 0 auto;
  padding: 0 var(--sp-6);
}

@media (min-width: 768px) {
  .pf-section { padding: var(--sp-20) 0; }
}

/* ==========================================================================
   Flow diagram (how it works)
   ========================================================================== */

.pf-flow {
  display: flex;
  flex-direction: column;
  gap: var(--sp-8);
  margin-top: var(--sp-8);
}

.pf-flow__stage {
  flex: 1;
  background: var(--pf-paper);
  border: 1px solid var(--pf-line);
  border-radius: var(--radius-md);
  padding: var(--sp-6);
}

.pf-flow__stage--outlet {
  border-color: var(--pf-orange);
}

.pf-flow__label {
  font-family: var(--pf-font-mono);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--pf-orange);
  margin: 0 0 var(--sp-3);
}

.pf-flow__text {
  font-size: 14.5px;
  line-height: 1.6;
  margin: 0;
  color: var(--pf-ink);
}

.pf-flow__connector {
  width: 2px;
  height: var(--sp-8);
  margin: 0 auto;
  background: repeating-linear-gradient(180deg, var(--pf-line) 0 6px, transparent 6px 12px);
}

@media (min-width: 900px) {
  .pf-flow {
    flex-direction: row;
    align-items: stretch;
  }

  .pf-flow__connector {
    width: var(--sp-8);
    height: 2px;
    margin: auto 0;
    flex: 0 0 var(--sp-8);
    background: repeating-linear-gradient(90deg, var(--pf-line) 0 6px, transparent 6px 12px);
  }
}

/* ==========================================================================
   Offer grid (homepage "Where to start")
   ========================================================================== */

.pf-offer-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-6);
  margin-top: var(--sp-8);
}

@media (min-width: 640px) {
  .pf-offer-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* 2026-09-12, real alignment bug fix (Founder-reported: "titles not at
   the same level," confirmed via screenshot): each card's own content
   used to stack in plain flex flow below its own preview panel, so a
   card whose preview had more real content (e.g. GEO Visibility Audit's
   4-row WIRO list vs. Tracking & Attribution's 1-row chip list) pushed
   its title/price/description/CTA down further than its neighbor in the
   same row -- nothing in the row actually lined up, even though each
   card looked fine on its own.

   Fixed with CSS subgrid, not a guessed fixed min-height: each card is a
   grid with grid-template-rows: subgrid, spanning the same 5 row-tracks
   (preview / head / price / description / CTA) as every other card in
   its row. The parent grid (.pf-offer-grid) auto-places 2 cards per row
   (grid-template-columns above) and, with every card spanning the same
   number of rows, standard grid auto-placement gives same-row cards the
   same row-start automatically -- no manual grid-row numbers needed.
   Subgrid then sizes each of the 5 row-tracks to the tallest real
   content in that specific row-track across BOTH cards sharing that
   physical row: title rows align even if one title wraps to 2 lines and
   the other doesn't, price pills align even though the preview above
   them varies in content length, and so on -- solved once, structurally,
   not by hand-tuning pixel values per section that would drift out of
   sync the next time real content changes. Equal card heights (bottom
   edges flush) fall out of this for free, since total card height is
   now just the sum of the same shared row-tracks for every card in a
   row. Applied the same way to .pf-funnel-page .pf-card-grid below.

   Support note: CSS subgrid has been supported in every major browser
   (Chrome 117+, Firefox 71+, Safari 16+) well before this build; no
   fallback path needed for this site's real traffic in 2026. */
.pf-offer-card {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 5;
  row-gap: var(--sp-4);
  background: var(--pf-paper);
  border: 1px solid var(--pf-line);
  border-radius: var(--radius-md);
  padding: var(--sp-5);
}

/* 2026-09-11: card redesign matching parallel.ai's "Everything your agent
   needs" section (Founder-directed, real reference screenshotted directly
   -- soft mockup-preview container, icon + bold label, muted description,
   restrained borders, no heavy shadows). The preview box shows REAL
   content for each specific offer (real WIRO steps, real integrations,
   real factor names from the live engine, or a real stat already in the
   card's own copy) -- never a fabricated screenshot. */

.pf-offer-card__preview {
  background: var(--pf-panel);
  border: 1px solid var(--pf-line);
  border-radius: var(--radius-md);
  padding: var(--sp-4);
  display: flex;
  align-items: center;
  justify-content: center;
}

.pf-offer-card__preview-inner {
  background: var(--pf-paper);
  border: 1px solid var(--pf-line);
  border-radius: var(--radius-sm);
  padding: var(--sp-4);
}

.pf-offer-card__preview-inner--stat {
  text-align: center;
}

.pf-offer-card__preview-label {
  font-family: var(--pf-font-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--pf-muted);
  margin: 0 0 var(--sp-3);
}

.pf-offer-card__preview-inner--stat .pf-offer-card__preview-label {
  margin: var(--sp-2) 0 0;
}

.pf-offer-card__preview-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  font-size: 13px;
  color: var(--pf-ink);
}

.pf-offer-card__preview-num {
  display: inline-block;
  font-family: var(--pf-font-mono);
  color: var(--pf-orange);
  margin-right: var(--sp-2);
  font-size: 11px;
}

.pf-offer-card__preview-check {
  display: inline-block;
  color: var(--pf-orange);
  margin-right: var(--sp-2);
}

.pf-offer-card__preview-chips {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
}

.pf-offer-card__preview-chips li {
  font-family: var(--pf-font-mono);
  font-size: 11px;
  padding: 4px 10px;
  border: 1px solid var(--pf-line);
  border-radius: var(--radius-sm);
  color: var(--pf-ink);
  background: var(--pf-panel);
}

.pf-offer-card__preview-stat {
  font-family: var(--pf-font-display);
  font-size: 34px;
  color: var(--pf-ink);
  margin: 0;
  line-height: 1;
}

.pf-offer-card__head {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}

.pf-offer-card__icon {
  display: inline-flex;
  color: var(--pf-orange);
  flex-shrink: 0;
}

.pf-offer-card__kicker {
  display: inline-block;
  align-self: flex-start;
  font-family: var(--pf-font-mono);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--pf-ink);
  background: var(--pf-panel);
  border: 1px solid var(--pf-line);
  border-radius: var(--radius-sm);
  padding: 3px 8px;
  margin: 0;
}

.pf-offer-card__title {
  font-size: 1.1rem;
  margin: 0;
  color: var(--pf-ink);
}

.pf-offer-card__text {
  font-size: 14px;
  line-height: 1.6;
  margin: 0;
  color: var(--pf-muted);
}

.pf-offer-card__link {
  font-family: var(--pf-font-mono);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--pf-orange);
  text-decoration: none;
}

.pf-offer-card__link:hover {
  text-decoration: underline;
}

@media (min-width: 640px) {
  .pf-offer-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* PF-0009 responsive hardening found by the sitemap-wide 390px audit. */
.tas-page .tas-hero-grid > * {
  min-width: 0;
}

.tas-page .tas-hero-grid svg {
  max-width: 100%;
  height: auto;
}

@media (max-width: 599px) {
  .pf-funnel-page .pf-funnel-cta .pf-btn,
  .pf-funnel-page .pf-funnel-next .pf-btn {
    width: 100%;
    max-width: 100%;
    white-space: normal;
    text-align: center;
  }
}

/* ==========================================================================
   Contact / lead form
   ========================================================================== */

.pf-section__inner--contact {
  display: flex;
  flex-direction: column;
  gap: var(--sp-12);
}

.pf-contact__copy {
  max-width: 480px;
}

.pf-form {
  max-width: 440px;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}

.pf-form__row {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.pf-form__label {
  font-family: var(--pf-font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--pf-muted);
}

.pf-form__input {
  font-family: var(--pf-font-body);
  font-size: 15px;
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--radius-sm);
  border: 1px solid var(--pf-line);
  background: var(--pf-panel);
  color: var(--pf-ink);
}

.pf-form__input:focus-visible {
  outline: 2px solid var(--pf-orange);
  outline-offset: 1px;
}

.pf-form__submit {
  margin-top: var(--sp-2);
  width: 100%;
}

.pf-form__status {
  min-height: 20px;
  font-size: 13.5px;
  margin: 0;
}

.pf-form__status--success {
  color: var(--pf-ink);
}

.pf-form__status--error {
  color: var(--pf-error);
}

/* ==========================================================================
   Generic page content (Contact, Thank You, Privacy Policy, etc.)
   ========================================================================== */

.pf-page__inner {
  max-width: 720px;
}

.pf-page__content {
  margin-top: var(--sp-6);
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}

/* When a page's content includes a form, align the intro text to the same
   width as the form below it instead of stretching to the full 720px
   reading column — otherwise the paragraph's right edge overshoots the
   form's and the page looks unaligned. */
.pf-page__content:has(.wpcf7-form) {
  max-width: 440px;
}

.pf-page__content p,
.pf-page__content li {
  font-size: 16px;
  line-height: 1.6;
  color: var(--pf-ink);
}

.pf-page__content h2 {
  font-family: var(--pf-font-heading);
  font-size: 22px;
  font-weight: 700;
  margin-top: var(--sp-6);
}

.pf-page__content ul {
  padding-left: var(--sp-6);
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.pf-page__content a {
  color: var(--pf-orange);
  text-decoration: underline;
}

/* CF7 forms embedded in a generic page (e.g. /contact/) don't emit our
   .pf-form__* classes on their own, so we reuse the same look via CF7's
   default markup/classes instead. */
.pf-page__content .wpcf7-form,
.pf-form-embed .wpcf7-form {
  max-width: 440px;
  width: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}

.pf-page__content .wpcf7-form label,
.pf-form-embed .wpcf7-form label {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  font-family: var(--pf-font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--pf-muted);
}

.pf-page__content .wpcf7-form input[type="text"],
.pf-page__content .wpcf7-form input[type="email"],
.pf-page__content .wpcf7-form textarea,
.pf-form-embed .wpcf7-form input[type="text"],
.pf-form-embed .wpcf7-form input[type="email"],
.pf-form-embed .wpcf7-form textarea {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  font-family: var(--pf-font-body);
  font-size: 15px;
  text-transform: none;
  letter-spacing: normal;
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--radius-sm);
  border: 1px solid var(--pf-line);
  background: var(--pf-panel);
  color: var(--pf-ink);
}

.pf-page__content .wpcf7-form input:focus-visible,
.pf-page__content .wpcf7-form textarea:focus-visible,
.pf-form-embed .wpcf7-form input:focus-visible,
.pf-form-embed .wpcf7-form textarea:focus-visible {
  outline: 2px solid var(--pf-orange);
  outline-offset: 1px;
}

.pf-page__content .wpcf7-form textarea,
.pf-form-embed .wpcf7-form textarea {
  min-height: 120px;
  resize: vertical;
}

.pf-page__content .wpcf7-form .wpcf7-acceptance .wpcf7-list-item,
.pf-form-embed .wpcf7-form .wpcf7-acceptance .wpcf7-list-item {
  margin: 0;
}

.pf-page__content .wpcf7-form .wpcf7-acceptance label,
.pf-form-embed .wpcf7-form .wpcf7-acceptance label {
  flex-direction: row;
  align-items: flex-start;
  gap: var(--sp-2);
  text-transform: none;
  letter-spacing: normal;
  font-family: var(--pf-font-body);
  font-size: 13.5px;
  font-weight: 400;
  color: var(--pf-muted);
}

.pf-page__content .wpcf7-form .wpcf7-acceptance input[type="checkbox"],
.pf-form-embed .wpcf7-form .wpcf7-acceptance input[type="checkbox"] {
  margin-top: 3px;
  flex-shrink: 0;
  accent-color: var(--pf-orange);
}

.pf-page__content .wpcf7-form .wpcf7-acceptance a,
.pf-form-embed .wpcf7-form .wpcf7-acceptance a {
  color: var(--pf-ink);
  text-decoration: underline;
}

.pf-page__content .wpcf7-form input[type="submit"],
.pf-form-embed .wpcf7-form input[type="submit"] {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  font-family: var(--pf-font-heading);
  font-weight: 600;
  font-size: 15px;
  padding: var(--sp-3) var(--sp-6);
  border-radius: var(--radius-sm);
  border: none;
  background: var(--pf-orange);
  color: var(--pf-ink);
  cursor: pointer;
  margin-top: var(--sp-2);
}

.pf-page__content .wpcf7-form input[type="submit"]:hover,
.pf-form-embed .wpcf7-form input[type="submit"]:hover {
  background: #e8500f;
}

/* Cloudflare Turnstile widget (CF7 native integration) renders a fixed-width
   iframe (~300px) by default. Without this, it doesn't shrink on narrow
   viewports and forces horizontal scroll on the whole page. Combined with
   the flex-direction bug fixed above, this was the Contact page mobile
   overflow (see wordpress-content-technical-seo skill notes / bug report). */
.pf-page__content .wpcf7-form iframe,
.pf-form-embed .wpcf7-form iframe,
.pf-page__content .wpcf7-form .cf-turnstile,
.pf-form-embed .wpcf7-form .cf-turnstile {
  max-width: 100%;
}

.pf-page__content .wpcf7-response-output,
.pf-form-embed .wpcf7-response-output {
  font-size: 13.5px;
  border-radius: var(--radius-sm);
  padding: var(--sp-3) var(--sp-4);
  margin-top: var(--sp-4);
  border-color: var(--pf-line) !important;
}

@media (min-width: 900px) {
  .pf-section__inner--contact {
    flex-direction: row;
    justify-content: space-between;
    gap: var(--sp-16);
  }
}

/* ==========================================================================
   Footer
   ========================================================================== */

.pf-footer {
  background: var(--pf-ink);
  color: #fff;
  padding: var(--sp-12) 0;
}

.pf-footer__inner {
  max-width: var(--pf-container);
  margin: 0 auto;
  padding: 0 var(--sp-6);
  display: flex;
  flex-direction: column;
  gap: var(--sp-6);
}

.pf-footer__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-6);
  font-size: 14px;
}

.pf-footer__links a {
  text-decoration: none;
  color: #cfcfcf;
}

.pf-footer__links a:hover {
  color: var(--pf-orange-dark);
}

.pf-footer__meta {
  font-family: var(--pf-font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: #8a8a8a;
  margin: 0;
}

@media (min-width: 768px) {
  .pf-footer__inner {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
}

/* ==========================================================================
   Breadcrumbs
   ========================================================================== */

.pf-breadcrumbs {
  max-width: var(--pf-container);
  margin: 0 auto;
  padding: var(--sp-6) var(--sp-6) 0;
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-family: var(--pf-font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--pf-muted);
}

.pf-breadcrumbs a {
  color: var(--pf-muted);
}

.pf-breadcrumbs a:hover {
  color: var(--pf-orange);
}

.pf-breadcrumbs [aria-current="page"] {
  color: var(--pf-ink);
}

/* ==========================================================================
   Blog index
   ========================================================================== */

.pf-blog-index {
  padding-top: var(--sp-8);
  padding-bottom: var(--sp-20);
}

.pf-blog-index > .pf-h2 {
  margin: var(--sp-4) 0 var(--sp-10);
}

/* Featured post card — one large card above the grid, page 1 only. Mirrors
   the single-post hero treatment (full-width rounded image) at small
   widths, moves to an image+text row at desktop widths for a genuinely
   distinct "featured" register versus the regular grid cards below it. */
.pf-blog-featured {
  display: flex;
  flex-direction: column;
  gap: var(--sp-6);
  text-decoration: none;
  color: var(--pf-ink);
  margin-bottom: var(--sp-16);
}

.pf-blog-featured__image {
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--pf-panel);
}

.pf-blog-featured__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.3s ease;
}

.pf-blog-featured:hover .pf-blog-featured__image img {
  transform: scale(1.02);
}

.pf-blog-featured__image--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle at 62% 45%, rgba(255, 90, 31, 0.10), rgba(20, 20, 20, 0.03) 60%), var(--pf-panel);
  border: 1px solid var(--pf-line);
}

.pf-blog-featured__body {
  max-width: 680px;
}

.pf-blog-featured__title {
  font-family: var(--pf-font-heading);
  font-weight: 700;
  font-size: 26px;
  line-height: 1.15;
  margin: var(--sp-2) 0 var(--sp-3);
}

.pf-blog-featured:hover .pf-blog-featured__title {
  color: var(--pf-orange);
}

.pf-blog-featured__excerpt {
  font-size: 16px;
  line-height: 1.6;
  color: var(--pf-muted);
  margin: 0 0 var(--sp-4);
}

.pf-blog-featured__cta {
  font-family: var(--pf-font-mono);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--pf-ink);
}

.pf-blog-featured:hover .pf-blog-featured__cta {
  color: var(--pf-orange);
}

.pf-blog-grid__label {
  margin: 0 0 var(--sp-6);
}

.pf-blog-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-10);
}

.pf-blog-card {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  text-decoration: none;
  color: var(--pf-ink);
}

.pf-blog-card__image {
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: var(--radius-md);
  background: var(--pf-panel);
}

.pf-blog-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.25s ease;
}

.pf-blog-card:hover .pf-blog-card__image img {
  transform: scale(1.03);
}

.pf-blog-card__date {
  font-family: var(--pf-font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--pf-muted);
  margin: 0 0 var(--sp-2);
}

.pf-blog-card__title {
  font-family: var(--pf-font-heading);
  font-size: 22px;
  font-weight: 700;
  margin: 0 0 var(--sp-2);
}

.pf-blog-card:hover .pf-blog-card__title {
  color: var(--pf-orange);
}

.pf-blog-card__excerpt {
  font-size: 15px;
  line-height: 1.6;
  color: var(--pf-muted);
  margin: 0;
}

.pf-blog-pagination {
  margin-top: var(--sp-16);
  display: flex;
  gap: var(--sp-4);
  font-family: var(--pf-font-mono);
  font-size: 13px;
}

.pf-blog-pagination .page-numbers {
  color: var(--pf-muted);
  text-decoration: none;
  padding: var(--sp-2) var(--sp-3);
}

.pf-blog-pagination a.page-numbers:hover,
.pf-blog-pagination .page-numbers.current {
  color: var(--pf-orange);
}

@media (min-width: 700px) {
  .pf-blog-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 900px) {
  .pf-blog-featured {
    flex-direction: row;
    align-items: center;
    gap: var(--sp-10);
  }

  .pf-blog-featured__image {
    flex: 1 1 58%;
    aspect-ratio: 4 / 3;
  }

  .pf-blog-featured__body {
    flex: 1 1 42%;
  }

  .pf-blog-featured__title {
    font-size: 32px;
  }
}

@media (min-width: 1000px) {
  .pf-blog-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ==========================================================================
   Single post
   ========================================================================== */

.pf-breadcrumbs--post {
  padding-top: var(--sp-6);
}

.pf-post-hero {
  max-width: var(--pf-container);
  margin: var(--sp-4) auto 0;
  padding: 0 var(--sp-6);
}

/* Inline variant (Founder feedback 2026-08-27): rendered nested inside
   article.pf-post-main, below the title, instead of as its own full-bleed
   band above the two-column layout. The grid column it now sits in is
   already the width limited by the sidebar -- the base .pf-post-hero
   rule's own max-width/centering/padding would fight that, since it was
   built for the previous full-bleed top-of-page placement. This variant
   just resets those so the image fills its parent column as-is. */
.pf-post-hero--inline {
  max-width: none;
  margin: var(--sp-6) 0;
  padding: 0;
}

.pf-post-hero img {
  width: 100%;
  height: auto;
  aspect-ratio: 21 / 9;
  object-fit: cover;
  border-radius: var(--radius-lg);
  display: block;
}

.pf-post-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-16);
  padding: var(--sp-10) var(--sp-6) var(--sp-20);
}

.pf-post-main {
  overflow-x: clip;
}

.pf-post-title {
  font-family: var(--pf-font-heading);
  font-size: 32px;
  font-weight: 700;
  line-height: 1.15;
  margin: 0 0 var(--sp-4);
}

.pf-post-author {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding-bottom: var(--sp-8);
  border-bottom: 1px solid var(--pf-line);
  margin-bottom: var(--sp-8);
}

.pf-post-author img {
  border-radius: 50%;
  display: block;
}

.pf-post-author__meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.pf-post-author__name {
  font-weight: 600;
  font-size: 14px;
}

.pf-post-author__date {
  font-family: var(--pf-font-mono);
  font-size: 12px;
  color: var(--pf-muted);
}

.pf-toc {
  background: var(--pf-panel);
  border: 1px solid var(--pf-line);
  border-radius: var(--radius-md);
  padding: var(--sp-6);
  margin-bottom: var(--sp-10);
}

.pf-toc__title {
  font-family: var(--pf-font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--pf-muted);
  margin: 0 0 var(--sp-3);
}

.pf-toc__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  counter-reset: pf-toc;
}

.pf-toc__list li {
  counter-increment: pf-toc;
}

.pf-toc__list a {
  color: var(--pf-ink);
  font-size: 14.5px;
  text-decoration: none;
}

.pf-toc__list a::before {
  content: counter(pf-toc) ". ";
  color: var(--pf-orange);
  font-family: var(--pf-font-mono);
  margin-right: var(--sp-1);
}

.pf-toc__list a:hover {
  color: var(--pf-orange);
  text-decoration: underline;
}

.pf-post-content {
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
  font-size: 16.5px;
  line-height: 1.7;
  color: var(--pf-ink);
}

.pf-post-content h2 {
  font-family: var(--pf-font-heading);
  font-size: 24px;
  font-weight: 700;
  margin: var(--sp-6) 0 0;
  scroll-margin-top: var(--sp-6);
}

.pf-post-content h3 {
  font-family: var(--pf-font-heading);
  font-size: 19px;
  font-weight: 700;
  margin: var(--sp-4) 0 0;
}

.pf-post-content ul,
.pf-post-content ol {
  padding-left: var(--sp-6);
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.pf-post-content a {
  color: var(--pf-orange);
  text-decoration: underline;
}

.pf-post-content img {
  max-width: 100%;
  border-radius: var(--radius-md);
}

.pf-post-content blockquote {
  margin: 0;
  padding: var(--sp-4) var(--sp-6);
  border-left: 3px solid var(--pf-orange);
  background: var(--pf-panel);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-style: italic;
  color: var(--pf-muted);
}

/* FAQ accordion — native <details>/<summary>, no JS. */
.pf-faq {
  margin-top: var(--sp-6);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

.pf-faq h2 {
  margin-top: 0;
}

.pf-faq__item {
  border: 1px solid var(--pf-line);
  border-radius: var(--radius-sm);
  padding: var(--sp-4) var(--sp-5);
  background: var(--pf-panel);
}

.pf-faq__question {
  font-family: var(--pf-font-heading);
  font-weight: 600;
  font-size: 16px;
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
}

.pf-faq__question::-webkit-details-marker {
  display: none;
}

.pf-faq__question::after {
  content: "+";
  color: var(--pf-orange);
  font-family: var(--pf-font-heading);
  font-size: 20px;
  flex-shrink: 0;
  transition: transform 0.15s ease;
}

.pf-faq__item[open] .pf-faq__question::after {
  transform: rotate(45deg);
}

.pf-faq__answer {
  margin-top: var(--sp-3);
  font-size: 15px;
  line-height: 1.6;
  color: var(--pf-muted);
}

.pf-post-sidebar {
  display: flex;
  flex-direction: column;
  gap: var(--sp-6);
}

.pf-widget {
  background: var(--pf-panel);
  border: 1px solid var(--pf-line);
  border-radius: var(--radius-md);
  padding: var(--sp-6);
}

.pf-widget__title {
  font-family: var(--pf-font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--pf-muted);
  margin: 0 0 var(--sp-3);
}

.pf-widget img {
  max-width: 100%;
  border-radius: var(--radius-sm);
}

.pf-sidebar-placeholder {
  font-size: 13.5px;
  color: var(--pf-muted);
  border: 1px dashed var(--pf-line);
  border-radius: var(--radius-md);
  padding: var(--sp-6);
  margin: 0;
}

@media (min-width: 900px) {
  .pf-post-layout {
    grid-template-columns: 1fr 320px;
    align-items: start;
  }
}

/* Only the sticky promo card pins while scrolling (module 1) — not the
   whole sidebar, so any other widget below it scrolls normally with the
   page. This intentionally replaces the earlier whole-sidebar sticky
   behavior. */
@media (min-width: 900px) {
  .pf-sticky-card {
    position: sticky;
    top: calc(var(--pf-nav-height) + var(--sp-6));
  }
}

/* ==========================================================================
   404
   ========================================================================== */

.pf-404 {
  min-height: 60vh;
  display: flex;
  align-items: center;
  border-bottom: none;
}

.pf-404__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--sp-4);
  max-width: 560px;
}

.pf-404__icon {
  margin-bottom: var(--sp-2);
}

.pf-404__code {
  font-family: var(--pf-font-display);
  font-size: 64px;
  line-height: 1;
  color: var(--pf-orange);
  margin: 0;
}

.pf-404__inner > .pf-h2 {
  margin: 0;
}

.pf-404__inner > .pf-lede {
  margin: 0;
  max-width: 440px;
}

.pf-404__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sp-3);
  margin-top: var(--sp-4);
}

/* ==========================================================================
   Shared lead-capture form embed (CF7, reused wherever a form is needed
   outside the generic page template: blog hero, final CTA banner — see
   pipeflooders_lead_form() in functions.php). --condensed hides the
   optional Subject/Message fields via CSS rather than touching the form
   itself, so it's the exact same form/fields everywhere, just shorter.
   ========================================================================== */

.pf-form-embed {
  background: var(--pf-paper);
  border: 1px solid var(--pf-line);
  border-radius: var(--radius-md);
  padding: var(--sp-6);
}

.pf-form-embed--condensed .wpcf7-form [data-name="your-subject"],
.pf-form-embed--condensed .wpcf7-form [data-name="your-message"] {
  display: none;
}

/* ==========================================================================
   Sticky sidebar promo card (module 1) — the "Why Pipe Flooders" Custom
   HTML widget added to the Blog Sidebar. See the @media sticky rule further
   down (single-post section) for the position:sticky itself.
   ========================================================================== */

.pf-sticky-card__list {
  list-style: none;
  margin: 0 0 var(--sp-5);
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

.pf-sticky-card__list li {
  position: relative;
  padding-left: 20px;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--pf-ink);
}

.pf-sticky-card__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 7px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--pf-orange);
}

.pf-sticky-card__cta {
  display: flex;
  width: 100%;
  justify-content: center;
}

/* ==========================================================================
   Hero-side form split (module 2) — .pf-post-hero--split modifier, applied
   alongside the base .pf-post-hero class so it inherits its
   max-width/margin/padding.
   ========================================================================== */

.pf-post-hero__inner {
  display: flex;
  flex-direction: column;
  gap: var(--sp-8);
}

.pf-post-hero__image {
  margin: 0;
}

.pf-post-hero__image img {
  width: 100%;
  height: auto;
  aspect-ratio: 21 / 9;
  object-fit: cover;
  border-radius: var(--radius-lg);
  display: block;
}

.pf-post-hero__main .pf-post-title {
  margin-bottom: 0;
}

@media (min-width: 900px) {
  .pf-post-hero__inner {
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--sp-12);
  }

  .pf-post-hero__main {
    flex: 1 1 auto;
    min-width: 0;
  }

  .pf-post-hero__form {
    flex: 0 0 360px;
  }
}

/* ==========================================================================
   Final CTA banner (module 3) — single form/offer, not a two-column
   audit-style pair.
   ========================================================================== */

.pf-post-cta {
  background: var(--pf-panel);
  border-top: 1px solid var(--pf-line);
  border-bottom: 1px solid var(--pf-line);
  padding: var(--sp-16) 0;
}

.pf-post-cta__inner {
  display: flex;
  flex-direction: column;
  gap: var(--sp-8);
}

.pf-post-cta__copy {
  max-width: 480px;
}

.pf-post-cta__form {
  width: 100%;
  max-width: 440px;
}

@media (min-width: 900px) {
  .pf-post-cta__inner {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-16);
  }
}

/* ==========================================================================
   "Keep reading" related-posts grid (module 4) — hidden entirely by
   single.php when pipeflooders_get_related_posts() returns nothing (e.g.
   only one post exists sitewide), so this never renders as an empty shell.
   ========================================================================== */

.pf-post-related {
  padding: var(--sp-16) 0;
}

.pf-post-related__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-6);
  margin-top: var(--sp-6);
}

.pf-post-related__card {
  display: block;
  text-decoration: none;
  color: var(--pf-ink);
  border: 1px solid var(--pf-line);
  border-radius: var(--radius-md);
  padding: var(--sp-6);
  transition: border-color 0.15s ease;
}

.pf-post-related__card:hover {
  border-color: var(--pf-orange);
}

.pf-post-related__title {
  font-family: var(--pf-font-heading);
  font-size: 17px;
  font-weight: 700;
  line-height: 1.3;
  margin: 0 0 var(--sp-2);
}

.pf-post-related__excerpt {
  font-size: 14px;
  line-height: 1.55;
  color: var(--pf-muted);
  margin: 0;
}

@media (min-width: 700px) {
  .pf-post-related__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ==========================================================================
   Per-post content module: numbered step section (module 6). Repeatable —
   drop consecutive .pf-step blocks directly into post content. Add
   .pf-step--with-media when a screenshot/image accompanies the step.
   ========================================================================== */

.pf-step {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  padding: var(--sp-6) 0;
  border-top: 1px solid var(--pf-line);
}

.pf-step:first-child {
  border-top: none;
  padding-top: 0;
}

.pf-step__marker {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}

.pf-step__number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--pf-orange);
  color: var(--pf-ink);
  font-family: var(--pf-font-heading);
  font-weight: 700;
  font-size: 15px;
  flex-shrink: 0;
}

.pf-step__eyebrow {
  font-family: var(--pf-font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--pf-muted);
  margin: 0;
}

.pf-step__body {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.pf-step__title {
  font-family: var(--pf-font-heading);
  font-size: 19px;
  font-weight: 700;
  margin: 0;
}

.pf-step__text {
  margin: 0;
  color: var(--pf-ink);
}

.pf-step__media img {
  width: 100%;
  border-radius: var(--radius-md);
  border: 1px solid var(--pf-line);
  margin: 0;
}

@media (min-width: 700px) {
  .pf-step--with-media {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-3) var(--sp-8);
  }

  .pf-step--with-media .pf-step__marker {
    grid-column: 1 / -1;
  }
}

/* ==========================================================================
   Per-post content module: process-flow diagram (module 7) — icon-in-circle
   nodes connected by arrows, ending in a bolded Takeaway line. Leans into
   the pipe/pipeline brand metaphor directly.
   ========================================================================== */

.pf-flow-diagram {
  margin: var(--sp-8) 0;
}

.pf-flow-diagram__track {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}

.pf-flow-diagram__node {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-2);
  flex: 1;
}

.pf-flow-diagram__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--pf-orange);
  color: var(--pf-ink);
  flex-shrink: 0;
}

.pf-flow-diagram__icon svg {
  width: 22px;
  height: 22px;
}

.pf-flow-diagram__label {
  font-family: var(--pf-font-heading);
  font-weight: 700;
  font-size: 15px;
  margin: 0;
}

.pf-flow-diagram__desc {
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--pf-muted);
  margin: 0;
}

.pf-flow-diagram__connector {
  width: 2px;
  height: var(--sp-6);
  margin-left: 23px;
  background: repeating-linear-gradient(180deg, var(--pf-line) 0 6px, transparent 6px 12px);
}

.pf-flow-diagram__arrow {
  display: none;
}

.pf-flow-diagram__takeaway {
  margin: var(--sp-6) 0 0;
  padding: var(--sp-4) var(--sp-5);
  background: var(--pf-panel);
  border-left: 3px solid var(--pf-orange);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-size: 14.5px;
  line-height: 1.6;
}

@media (min-width: 700px) {
  .pf-flow-diagram__track {
    flex-direction: row;
    align-items: flex-start;
  }

  .pf-flow-diagram__connector {
    display: none;
  }

  .pf-flow-diagram__arrow {
    display: flex;
    align-items: center;
    height: 48px;
    color: var(--pf-line);
    font-size: 20px;
    flex-shrink: 0;
  }
}

/* ==========================================================================
   Per-post content module: dark full-bleed callout (module 8). Breaks out
   of the constrained post-content column to full viewport width — no
   rounded corners, deliberately edge-to-edge ("full-bleed"). .pf-post-main
   has overflow-x: clip (see single-post section) so this can't cause a
   page-level horizontal scrollbar.
   ========================================================================== */

.pf-dark-callout {
  background: var(--pf-ink);
  color: var(--pf-paper);
  width: 100vw;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  padding: var(--sp-10) var(--sp-6);
  margin: var(--sp-4) 0;
}

.pf-dark-callout__inner {
  max-width: 760px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}

.pf-dark-callout h2,
.pf-dark-callout h3 {
  font-family: var(--pf-font-heading);
  color: #fff;
  margin: 0;
}

.pf-dark-callout p,
.pf-dark-callout li {
  color: #cfcfcf;
  margin: 0;
}

.pf-dark-callout a {
  color: var(--pf-orange-dark);
}

@media (min-width: 768px) {
  .pf-dark-callout {
    padding: var(--sp-16) var(--sp-10);
  }
}

/* ==========================================================================
   Per-post content module: terminal-style instruction card (module 9) —
   dark background, monospace, numbered orange steps. For genuinely
   technical/setup walkthroughs — distinct from the general .pf-step
   narrative module above.
   ========================================================================== */

.pf-terminal {
  background: var(--pf-ink);
  border-radius: var(--radius-md);
  padding: var(--sp-6);
  margin: var(--sp-8) 0;
  font-family: var(--pf-font-mono);
}

.pf-terminal__bar {
  display: flex;
  gap: var(--sp-2);
  margin-bottom: var(--sp-5);
}

.pf-terminal__bar span {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #4a4a4a;
  display: block;
}

.pf-terminal__steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}

.pf-terminal__steps li {
  display: flex;
  gap: var(--sp-3);
  align-items: baseline;
}

.pf-terminal__num {
  color: var(--pf-orange-dark);
  font-weight: 700;
  flex-shrink: 0;
}

.pf-terminal__text {
  color: #e5e2dc;
  font-size: 14px;
  line-height: 1.6;
}

/* ==========================================================================
   Reduced motion
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .pf-body *,
  .pf-body *::before,
  .pf-body *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------- Homepage React showcase sections (2026-09-11 visual rebuild) ----------
   Component-level styling (.pf-showcase, .pf-showcase__panel, .pf-integrations,
   etc.) ships in pf-react-app.bundle.css, compiled from
   pipeflooders-frontend-src/src/styles.css and enqueued alongside this file.
   The rules below only cover the plain server-rendered fallback markup in
   front-page.php (#pf-geo-showcase-root / #pf-tracking-showcase-root before
   React mounts and replaces it) so it is never unstyled, even for a visitor
   or crawler that never runs the JS bundle at all. */

.pf-showcase-section {
  display: block;
}

.pf-showcase__fallback-list {
  max-width: var(--pf-container);
  margin: var(--sp-8) auto 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-6);
}

.pf-showcase__fallback-list dt {
  font-family: var(--pf-font-heading);
  font-weight: 600;
  font-size: 17px;
  margin: 0 0 var(--sp-2);
}

.pf-showcase__fallback-list dd {
  margin: 0;
  font-size: 15px;
  line-height: 1.55;
  opacity: 0.85;
}

/* ---------- Reusable page-layout modifiers (2026-09-11, replaces the old
   per-page :has() CSS guard-block pattern) ----------
   .pf-page--full / .pf-section__inner--full reproduce EXACTLY the same
   zero-padding, zero-max-width values the old wp_global_styles
   :has(.gva-page) / :has(.tas-page) / :has(.pf-audit-page) guard blocks
   produced, now applied directly by the Product/Service Page template
   instead of by content-marker-class detection. See
   inc/pf-page-layout.php and template-product.php. */

.pf-page--full {
  padding: 0;
  border-bottom: none;
}

.pf-section__inner--full {
  max-width: none;
  padding: 0;
}

.pf-section__inner--full .pf-page__content {
  max-width: none;
  gap: 0;
  margin-top: 0;
}

/* ==========================================================================
   Pipe Flooders component system (2026-09-12 rebuild)
   Real strategic rebrief — pipe/flow/leak/pressure/routing visual language,
   8 reusable components (Hero, Pipeline diagram, Service card, Tool card,
   Process block, Qualification block, Audit CTA, Specialist service
   block). See inc/pf-components.php for the render functions that use
   these classes. Deliberately restrained: line + direction + gap as the
   recurring motif, not literal pipe illustrations or heavy iconography —
   matches the brief's "engineered rather than decorative" instruction.
   ========================================================================== */

/* ---------- Hero proof line (new, replaces the shader-era hero visual) ---------- */

.pf-hero__proof {
  margin: var(--sp-4) 0 0;
  font-family: var(--pf-font-mono);
  font-size: 12.5px;
  letter-spacing: 0.02em;
  color: var(--pf-muted);
}

/* ---------- Core connector (the "pipe/flow" motif) ---------- */

.pf-connector {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.pf-connector__line {
  width: var(--sp-8);
  height: 2px;
  background: var(--pf-line);
}

.pf-connector__chevron {
  width: 8px;
  height: 8px;
  border-top: 2px solid var(--pf-orange);
  border-right: 2px solid var(--pf-orange);
  transform: rotate(45deg);
  margin-left: -3px;
}

.pf-connector--loop .pf-connector__line {
  width: var(--sp-6);
}

/* ---------- Leak motif: a broken/gapped line, used sparingly ---------- */

.pf-leak-gap {
  display: block;
  width: 64px;
  height: 2px;
  margin: 0 0 var(--sp-4);
  background: repeating-linear-gradient(
    to right,
    var(--pf-orange) 0,
    var(--pf-orange) 8px,
    transparent 8px,
    transparent 14px
  );
}

/* ---------- Pressure motif: a small segmented bar, used once ---------- */

.pf-pressure-bar {
  display: inline-flex;
  gap: 3px;
  margin: 0 0 var(--sp-4);
}

.pf-pressure-bar span {
  width: 16px;
  height: 6px;
  background: var(--pf-line);
  border-radius: 1px;
}

.pf-pressure-bar span:last-child {
  background: var(--pf-orange);
}

/* ---------- Pipeline diagram ---------- */

.pf-pipeline-diagram {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: center;
  gap: var(--sp-2);
  margin: var(--sp-8) 0;
  padding: var(--sp-6);
  background: var(--pf-panel);
  border: 1px solid var(--pf-line);
  border-radius: var(--radius-lg);
}

.pf-pipeline-diagram--panel {
  background: var(--pf-paper);
}

.pf-pipeline-diagram__node {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  min-width: 90px;
  max-width: 130px;
  gap: 4px;
}

.pf-pipeline-diagram__label {
  font-family: var(--pf-font-mono);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.03em;
  color: var(--pf-ink);
  text-transform: uppercase;
}

.pf-pipeline-diagram__caption {
  font-size: 12px;
  line-height: 1.4;
  color: var(--pf-muted);
}

@media (max-width: 780px) {
  .pf-pipeline-diagram {
    flex-direction: column;
    align-items: stretch;
  }
  .pf-pipeline-diagram .pf-connector {
    align-self: center;
    transform: rotate(90deg);
    margin: var(--sp-1) 0;
  }
  .pf-pipeline-diagram__node {
    max-width: none;
  }
}

/* ---------- Process blocks (Number -> title -> explanation) ---------- */

.pf-process-blocks {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-6);
  margin: var(--sp-8) 0;
}

@media (min-width: 780px) {
  .pf-process-blocks {
    grid-template-columns: repeat(5, 1fr);
    gap: var(--sp-4);
  }
}

.pf-process-block {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 3;
  row-gap: var(--sp-2);
  border-top: 2px solid var(--pf-orange);
  padding-top: var(--sp-3);
}

.pf-process-block__number {
  font-family: var(--pf-font-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--pf-orange);
}

.pf-process-block__title {
  font-family: var(--pf-font-heading);
  font-size: 16px;
  margin: 0;
}

.pf-process-block__text {
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--pf-muted);
  margin: 0;
}

.pf-process-blocks__loop {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  justify-content: center;
  font-family: var(--pf-font-mono);
  font-size: 12px;
  color: var(--pf-muted);
  margin: 0;
}

.pf-process-blocks__loop .pf-connector__line {
  width: var(--sp-6);
}

/* ---------- Service card (Problem -> capability -> output -> CTA) ---------- */

.pf-service-card-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-6);
  margin-top: var(--sp-8);
}

@media (min-width: 640px) {
  .pf-service-card-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.pf-service-card {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 4;
  row-gap: var(--sp-3);
  background: var(--pf-paper);
  border: 1px solid var(--pf-line);
  border-left: 2px solid var(--pf-orange);
  border-radius: var(--radius-md);
  padding: var(--sp-5);
}

.pf-service-card__problem {
  font-family: var(--pf-font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--pf-muted);
  margin: 0;
}

.pf-service-card__capability {
  font-size: 1.1rem;
  margin: 0;
  color: var(--pf-ink);
}

.pf-service-card__output {
  font-size: 14px;
  line-height: 1.6;
  color: var(--pf-muted);
  margin: 0;
}

.pf-service-card__link {
  font-family: var(--pf-font-mono);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--pf-orange);
  text-decoration: none;
}

.pf-service-card__link:hover {
  text-decoration: underline;
}

/* ---------- Tool card (Tool -> checks -> result -> CTA) ---------- */

.pf-tool-card-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-6);
  margin-top: var(--sp-8);
}

@media (min-width: 640px) {
  .pf-tool-card-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.pf-tool-card {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 5;
  row-gap: var(--sp-3);
  background: var(--pf-panel);
  border: 1px solid var(--pf-line);
  border-radius: var(--radius-md);
  padding: var(--sp-5);
}

.pf-tool-card__tool {
  font-size: 1.1rem;
  margin: 0;
  color: var(--pf-ink);
}

.pf-tool-card__description {
  font-size: 14px;
  line-height: 1.6;
  color: var(--pf-muted);
  margin: 0;
}

.pf-tool-card__checks {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  font-family: var(--pf-font-mono);
  font-size: 12.5px;
  color: var(--pf-ink);
}

.pf-tool-card__checks li {
  padding-left: var(--sp-4);
  position: relative;
}

.pf-tool-card__checks li::before {
  content: '\2713';
  position: absolute;
  left: 0;
  color: var(--pf-orange);
}

.pf-tool-card__result {
  font-size: 13px;
  color: var(--pf-muted);
  margin: 0;
  font-style: italic;
}

.pf-tool-card__link {
  font-family: var(--pf-font-mono);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--pf-orange);
  text-decoration: none;
}

.pf-tool-card__link:hover {
  text-decoration: underline;
}

/* ---------- Qualification block (for you / not for you = routing fork) ---------- */

.pf-qualification-block {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-6);
  margin-top: var(--sp-8);
}

@media (min-width: 700px) {
  .pf-qualification-block {
    grid-template-columns: 1fr 1fr;
  }
}

.pf-qualification-block__col {
  padding: var(--sp-5);
  border-radius: var(--radius-md);
}

.pf-qualification-block__col--for {
  background: var(--pf-panel);
  border-top: 2px solid var(--pf-orange);
}

.pf-qualification-block__col--not-for {
  background: var(--pf-paper);
  border: 1px dashed var(--pf-line);
}

.pf-qualification-block__col-label {
  font-family: var(--pf-font-mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--pf-muted);
  margin: 0 0 var(--sp-3);
}

.pf-qualification-block__col ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  font-size: 14px;
  line-height: 1.5;
  color: var(--pf-ink);
}

.pf-qualification-block__col--for li {
  padding-left: var(--sp-4);
  position: relative;
}

.pf-qualification-block__col--for li::before {
  content: '\2713';
  position: absolute;
  left: 0;
  color: var(--pf-orange);
}

.pf-qualification-block__col--not-for li {
  padding-left: var(--sp-4);
  position: relative;
  color: var(--pf-muted);
}

.pf-qualification-block__col--not-for li::before {
  content: '\2013';
  position: absolute;
  left: 0;
}

/* ---------- Audit CTA (Problem -> free diagnostic -> reassurance -> CTA) ---------- */

.pf-audit-cta {
  max-width: 640px;
  margin: var(--sp-8) auto 0;
  text-align: center;
}

.pf-audit-cta__problem {
  font-size: 20px;
  font-family: var(--pf-font-heading);
  color: var(--pf-ink);
  margin: 0 0 var(--sp-3);
}

.pf-audit-cta__diagnostic {
  font-size: 15px;
  line-height: 1.6;
  color: var(--pf-muted);
  margin: 0 0 var(--sp-2);
}

.pf-audit-cta__reassurance {
  font-family: var(--pf-font-mono);
  font-size: 12.5px;
  color: var(--pf-muted);
  margin: 0 0 var(--sp-5);
}

.pf-audit-cta .pf-leak-gap {
  margin-left: auto;
  margin-right: auto;
}

/* ---------- Specialist service block (Price -> scope -> duration -> deliverable -> CTA) ---------- */

.pf-specialist-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-6);
  margin-top: var(--sp-8);
}

@media (min-width: 700px) {
  .pf-specialist-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.pf-specialist-block {
  background: var(--pf-paper);
  border: 1px solid var(--pf-line);
  border-radius: var(--radius-md);
  padding: var(--sp-5);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

.pf-specialist-block__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-3);
  border-bottom: 1px solid var(--pf-line);
  padding-bottom: var(--sp-3);
}

.pf-specialist-block__title {
  font-size: 1.1rem;
  margin: 0;
  color: var(--pf-ink);
}

.pf-specialist-block__price {
  font-family: var(--pf-font-mono);
  font-weight: 700;
  font-size: 15px;
  color: var(--pf-orange);
  margin: 0;
  white-space: nowrap;
}

.pf-specialist-block__scope {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  font-size: 13.5px;
  color: var(--pf-ink);
}

.pf-specialist-block__scope li {
  padding-left: var(--sp-4);
  position: relative;
}

.pf-specialist-block__scope li::before {
  content: '\2013';
  position: absolute;
  left: 0;
  color: var(--pf-muted);
}

.pf-specialist-block__meta {
  font-size: 13px;
  color: var(--pf-muted);
  margin: 0;
}

.pf-specialist-block__cta {
  align-self: flex-start;
  /* margin-top: auto instead of var(--sp-2). The specialist cards sit in an equal-height grid
     row, but their content above the CTA differs by ~66px (a 25px shorter scope list and a
     one-line vs three-line meta), so a fixed 8px gap left the two CTAs at different heights.
     An auto margin absorbs the leftover space and bottom-aligns both. Same idiom as
     .tas-tier-card .tas-btn. */
  margin-top: auto;
}

.pf-h2__alt {
  display: block;
  font-size: 0.6em;
  color: var(--pf-muted);
  font-family: var(--pf-font-body);
  font-weight: 400;
  margin-top: var(--sp-2);
}


/* -----------------------------------------------------------------------------
   PF-0048 — native PF FAQ Accordion block (post editor).
   The block renders with the same .pf-faq / .pf-faq__item / .pf-faq__question /
   .pf-faq__answer classes as the auto H2-FAQ path, so it inherits every rule
   defined for that path above. Only the subtitle (block-only element) is new.
----------------------------------------------------------------------------- */
.pf-faq__subtitle {
	margin: 0;
	color: var(--pf-muted);
	font-size: 15px;
}

/* ==========================================================================
   PF-0058: sitewide card system (2026-09-25)
   Two variants of one card. INK for offer cards, WHITE for forms, blog, related
   posts and sidebar widgets. Brand tokens: ink #141414, paper #FAF9F7, orange
   #FF5A1F, border #D9D6D0, card radius 16px, transitions 240ms, no looping motion.
   The ink card re-declares the theme tokens on itself, so every descendant that
   already reads var(--pf-ink) / var(--pf-muted) / var(--pf-line) / var(--pf-panel)
   inverts without per-child rules. Selector lists are doubled (:is():is()) so the
   layer beats page-scoped rules regardless of load order. Glow is box-shadow, on
   hover and keyboard focus only, and switched off for prefers-reduced-motion.
   ========================================================================== */

/* ---------- INK card ---------- */
html body :is(.pf-service-card, .pf-tool-card, .tas-tier-card, .gva-part-card, .gva-hero-card, .pf-card, .pf-pain-card, .gva-pain-card):is(.pf-service-card, .pf-tool-card, .tas-tier-card, .gva-part-card, .gva-hero-card, .pf-card, .pf-pain-card, .gva-pain-card) {
  --pf-ink: #FAF9F7;
  --pf-muted: #BDB9B2;
  --pf-line: rgba(250, 249, 247, 0.14);
  --pf-panel: #141414;
  --pf-paper: #1F1F1F;
  --pf-orange-text: #FF5A1F;
  background: #141414;
  color: #FAF9F7;
  border: 1px solid rgba(250, 249, 247, 0.14);
  border-radius: 16px;
  box-shadow: inset 0 -16px 24px rgba(250, 249, 247, 0.05), 0 0 0 0 rgba(255, 90, 31, 0);
  transition: box-shadow 240ms ease-out, border-color 240ms ease-out;
}
html body :is(.pf-service-card, .pf-tool-card, .tas-tier-card, .gva-part-card, .gva-hero-card, .pf-card, .pf-pain-card, .gva-pain-card):is(.pf-service-card, .pf-tool-card, .tas-tier-card, .gva-part-card, .gva-hero-card, .pf-card, .pf-pain-card, .gva-pain-card):is(:hover, :focus-within) {
  border-color: rgba(255, 90, 31, 0.75);
  box-shadow: inset 0 -16px 24px rgba(250, 249, 247, 0.05), 0 0 34px 2px rgba(255, 90, 31, 0.34);
}
/* the highlighted tier / part keeps a permanent orange edge */
html body :is(.tas-tier-card--highlight, .gva-part-card--highlight):is(.tas-tier-card, .gva-part-card) {
  border-color: rgba(255, 90, 31, 0.85);
}
/* eyebrow labels read as the orange label of the card */
html body :is(.pf-service-card__problem, .tas-tier-card__eyebrow, .gva-part-card__eyebrow) {
  color: #FF5A1F;
}
/* headings inside cards use Space Grotesk (brand guideline: Cardo on live cards is retired) */
html body :is(.pf-service-card, .pf-tool-card, .tas-tier-card, .gva-part-card, .gva-hero-card, .pf-card, .pf-pain-card, .gva-pain-card, .pf-form-card, .gva-form-card, .tas-form-card, .igs-unlock-form-card, .igs-summary-card, .igs-dim-explainer-card, .pf-blog-card, .pf-post-related__card, .pf-widget, .pf-sticky-card, .tas-fc-card) :is(h2, h3, h4) {
  font-family: var(--pf-font-heading);
  font-weight: 600;
}
/* WordPress heading rules set a fixed colour instead of reading the token, so ink cards force it */
html body :is(.pf-service-card, .pf-tool-card, .tas-tier-card, .gva-part-card, .gva-hero-card, .pf-card, .pf-pain-card, .gva-pain-card, .home-offer-crm, .home-map, .home-close, .hero-feedback, .funnelstory, .workflowstudio, .home-example):is(.pf-service-card, .pf-tool-card, .tas-tier-card, .gva-part-card, .gva-hero-card, .pf-card, .pf-pain-card, .gva-pain-card, .home-offer-crm, .home-map, .home-close, .hero-feedback, .funnelstory, .workflowstudio, .home-example) :is(h2, h3, h4, h5, h6) {
  color: #FAF9F7;
}
/* text links that close a card become the card button: ink on orange, full width, 56px */
html body :is(.pf-service-card__link, .pf-tool-card__link):is(.pf-service-card__link, .pf-tool-card__link):is(.pf-service-card__link, .pf-tool-card__link) {
  display: flex; align-items: center; justify-content: center; text-align: center;
  min-height: 56px; padding: 8px 16px; line-height: 1.3;
  background: #FF5A1F; color: #141414 !important;
  border-radius: 8px;
  font-family: var(--pf-font-body); font-size: 15px; font-weight: 600; text-decoration: none;
  transition: background-color 150ms ease-out;
}
html body :is(.pf-service-card__link, .pf-tool-card__link):is(.pf-service-card__link, .pf-tool-card__link):is(.pf-service-card__link, .pf-tool-card__link):hover { background: #E84A10; text-decoration: none; }
html body :is(.pf-service-card__link, .pf-tool-card__link):is(.pf-service-card__link, .pf-tool-card__link):is(.pf-service-card__link, .pf-tool-card__link):focus-visible { outline: 2px solid #FAF9F7; outline-offset: 3px; }
/* primary buttons keep ink text on orange. Inside an ink card the tokens are inverted, so a generic
   link rule (color: var(--pf-orange-text) or var(--pf-ink)) would paint them orange-on-orange or
   paper-on-orange; !important is deliberate and limited to these four button classes. */
html body :is(.pf-service-card, .pf-tool-card, .tas-tier-card, .gva-part-card, .gva-hero-card, .pf-card, .pf-pain-card, .gva-pain-card):is(.pf-service-card, .pf-tool-card, .tas-tier-card, .gva-part-card, .gva-hero-card, .pf-card, .pf-pain-card, .gva-pain-card) :is(.pf-btn--primary, .gva-btn-primary, .igs-btn-primary, .tas-btn-primary):is(a, button) {
  color: #141414 !important;
}

/* ---------- WHITE card ---------- */
html body :is(.pf-form-card, .gva-form-card, .tas-form-card, .igs-unlock-form-card, .igs-summary-card, .igs-dim-explainer-card, .pf-blog-card, .pf-post-related__card, .pf-widget, .pf-sticky-card, .tas-fc-card):is(.pf-form-card, .gva-form-card, .tas-form-card, .igs-unlock-form-card, .igs-summary-card, .igs-dim-explainer-card, .pf-blog-card, .pf-post-related__card, .pf-widget, .pf-sticky-card, .tas-fc-card) {
  background: #FFFFFF;
  border: 1px solid #D9D6D0;
  border-radius: 16px;
  box-shadow: 0 0 0 0 rgba(255, 90, 31, 0);
  transition: box-shadow 240ms ease-out, border-color 240ms ease-out;
}
html body :is(.pf-form-card, .gva-form-card, .tas-form-card, .igs-unlock-form-card, .igs-summary-card, .igs-dim-explainer-card, .pf-blog-card, .pf-post-related__card, .pf-widget, .pf-sticky-card, .tas-fc-card):is(.pf-form-card, .gva-form-card, .tas-form-card, .igs-unlock-form-card, .igs-summary-card, .igs-dim-explainer-card, .pf-blog-card, .pf-post-related__card, .pf-widget, .pf-sticky-card, .tas-fc-card):is(:focus-within) {
  border-color: rgba(255, 90, 31, 0.75);
  box-shadow: 0 0 30px 0 rgba(255, 90, 31, 0.22);
}
html body :is(.pf-blog-card, .pf-post-related__card):is(.pf-blog-card, .pf-post-related__card):is(:hover, :focus-visible) {
  border-color: rgba(255, 90, 31, 0.75);
  box-shadow: 0 0 30px 0 rgba(255, 90, 31, 0.22);
}
/* blog cards had no box at all: give them the card padding */
html body .pf-blog-card.pf-blog-card { padding: 16px; }
/* the unlock form floats over the results; it keeps its drop shadow */
html body .igs-unlock-form-card.igs-unlock-form-card { box-shadow: 0 12px 32px rgba(20, 20, 20, 0.14); }
html body .igs-summary-card.igs-summary-card { padding: var(--sp-6); }
/* the sidebar promo had no box of its own */
html body .pf-sticky-card.pf-sticky-card { padding: var(--sp-6); }

@media (prefers-reduced-motion: reduce) {
  html body :is(.pf-service-card, .pf-tool-card, .tas-tier-card, .gva-part-card, .gva-hero-card, .pf-card, .pf-pain-card, .gva-pain-card, .pf-form-card, .gva-form-card, .tas-form-card, .igs-unlock-form-card, .igs-summary-card, .igs-dim-explainer-card, .pf-blog-card, .pf-post-related__card, .pf-widget, .pf-sticky-card, .tas-fc-card):is(.pf-service-card, .pf-tool-card, .tas-tier-card, .gva-part-card, .gva-hero-card, .pf-card, .pf-pain-card, .gva-pain-card, .pf-form-card, .gva-form-card, .tas-form-card, .igs-unlock-form-card, .igs-summary-card, .igs-dim-explainer-card, .pf-blog-card, .pf-post-related__card, .pf-widget, .pf-sticky-card, .tas-fc-card), html body :is(.pf-service-card__link, .pf-tool-card__link):is(.pf-service-card__link, .pf-tool-card__link):is(.pf-service-card__link, .pf-tool-card__link) { transition: none; }
}