/**
 * Packflow Supply — design system (standalone theme).
 * Ported from the Lovable/TanStack landing page (src/styles.css).
 *
 * SPECIFICITY CONTRACT (no !important in this file):
 * Theme rules sit ABOVE Elementor base CSS but BELOW Elementor
 * per-widget generated CSS (.elementor-{id} .elementor-element.el-x …,
 * 3 classes). Component color roles beat generic Kit link/heading rules;
 * per-widget Elementor settings still win. Other rules provide defaults.
 *
 * Tokens keep the original oklch values (pixel-exact in modern
 * browsers) with hex fallbacks for older browsers. The active Elementor
 * Site Settings kit supplies inline overrides for the shared color roles.
 */

/* ---------- Tokens ---------- */
:root {
  --radius: 0.375rem;

  /* Hex fallbacks (oklch conversion) */
  --pf-background: #fbfaf7;
  --pf-foreground: #0e141d;
  --pf-card: #ffffff;
  --pf-card-foreground: #0e141d;
  --pf-primary: #17202d;
  --pf-primary-foreground: #f9f8f5;
  --pf-secondary: #efece7;
  --pf-secondary-foreground: #17202d;
  --pf-muted: #f2f0ec;
  --pf-muted-foreground: #585e66;
  --pf-accent: #f59926;
  --pf-accent-hover: #e1820a;
  --pf-accent-foreground: #0e141d;
  --pf-accent-text: #ab4400;
  --pf-accent-tint: #fdebdd;
  --pf-ink: #0a101b;
  --pf-line-dark: rgba(255, 255, 255, 0.12);
  --pf-dark-muted: #c7ceda;
  --pf-destructive: #cc2827;
  --pf-destructive-foreground: #f9f8f5;
  --pf-border: #e0ded8;
  --pf-input: #dad7d2;
  --pf-ring: #f59926;
  --pf-surface: #f6f3ed;
  --pf-surface-foreground: #0e141d;
  --pf-kraft: #e3cead;
  --pf-steel: #323842;
  --pf-whatsapp: #3bac56;
  --pf-whatsapp-hover: #2f9450;
  --pf-whatsapp-foreground: #fcfcfc;

  /* Exact oklch values (progressive enhancement) */
  --pf-background: oklch(0.985 0.004 90);
  --pf-foreground: oklch(0.19 0.02 258);
  --pf-card: oklch(1 0 0);
  --pf-card-foreground: oklch(0.19 0.02 258);
  --pf-primary: oklch(0.24 0.028 258);
  --pf-primary-foreground: oklch(0.98 0.004 90);
  --pf-secondary: oklch(0.945 0.008 85);
  --pf-secondary-foreground: oklch(0.24 0.028 258);
  --pf-muted: oklch(0.955 0.006 85);
  --pf-muted-foreground: oklch(0.48 0.015 258);
  --pf-accent: oklch(0.76 0.16 65);
  --pf-accent-foreground: oklch(0.19 0.02 258);
  --pf-destructive: oklch(0.55 0.2 27);
  --pf-destructive-foreground: oklch(0.98 0.004 90);
  --pf-border: oklch(0.9 0.008 85);
  --pf-input: oklch(0.88 0.008 85);
  --pf-ring: oklch(0.76 0.16 65);
  --pf-surface: oklch(0.965 0.008 85);
  --pf-surface-foreground: oklch(0.19 0.02 258);
  --pf-kraft: oklch(0.86 0.05 78);
  --pf-steel: oklch(0.34 0.02 258);
  --pf-whatsapp: oklch(0.66 0.16 148);
  --pf-whatsapp-foreground: oklch(0.99 0 0);

  --pf-font-display: "Archivo", ui-sans-serif, system-ui, sans-serif;
  --pf-font-sans: "IBM Plex Sans", ui-sans-serif, system-ui, sans-serif;

  --pf-shadow-panel: 0 1px 2px oklch(0.2 0.03 260 / 0.06), 0 12px 32px oklch(0.2 0.03 260 / 0.08);
  --pf-shadow-cta: 0 8px 24px oklch(0.72 0.17 62 / 0.35);
}

/* ---------- Base ---------- */
/* Tailwind preflight equivalent: keep padding inside widths so
 * .container-page (76rem + padding-inline) never exceeds the viewport. */
*, *::before, *::after {
  box-sizing: border-box;
}

/* Elementor flex children and heading text must be able to shrink below
 * their min-content width; otherwise grid tiles overflowing near the
 * container max-width (76rem) push a horizontal scrollbar. */
.elementor .e-con .e-con-inner,
.elementor .e-con .e-con-inner > .e-con,
.elementor .e-con .e-con-inner > .elementor-widget {
  min-width: 0;
}
.elementor-widget-heading .elementor-heading-title {
  overflow-wrap: break-word;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  background-color: var(--pf-background);
  color: var(--pf-foreground);
  font-family: var(--pf-font-sans);
  text-rendering: optimizeLegibility;
  margin: 0;
}

h1, h2, h3, h4 {
  font-family: var(--pf-font-display);
  font-weight: 700;
  letter-spacing: -0.02em;
  text-wrap: balance;
  margin: 0 0 0.5em;
}

:focus-visible {
  outline: 2px solid var(--pf-ring);
  outline-offset: 2px;
}

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

.screen-reader-text {
  border: 0;
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  word-wrap: normal;
}

.skip-link:focus {
  clip-path: none;
  height: auto;
  width: auto;
  padding: 0.75rem 1rem;
  background: var(--pf-accent);
  color: var(--pf-accent-foreground);
  font-weight: 700;
  z-index: 100000;
  top: 0.5rem;
  left: 0.5rem;
}

/* ---------- Component colors above generic Elementor Kit styles ---------- */
/* Kit theme styles target anchors/headings directly, so parent colors cannot
 * supply dark-section contrast. These color-only selectors beat .elementor-kit-N
 * a/h1 (0-1-1) regardless of load order, but lose to per-widget CSS (3 classes).
 * Keep geometry in the component rules below so compact button variants win. */
body .pf-header .pf-brand {
  color: var(--pf-primary-foreground);
}

body .pf-header .pf-nav-link {
  color: var(--pf-dark-muted);
}

body .pf-header .pf-brand:hover,
body .pf-header .pf-nav-link:hover {
  color: var(--pf-accent);
}

body a.btn-quote,
body a.btn-quote:hover {
  color: var(--pf-accent-foreground);
}

body a.btn-whatsapp,
body a.btn-whatsapp:hover {
  color: var(--pf-whatsapp-foreground);
}

body a.btn-outline,
body a.btn-outline:hover {
  color: var(--pf-foreground);
}

body .pf-hero h1,
body .pf-benefits :is(h2, h3),
body .pf-cta-banner-primary h2,
body .pf-thankyou-final h2,
body .pf-trust-proof-panel :is(h2, h3, h4),
body .pf-footer :is(h2, h3, h4) {
  color: var(--pf-primary-foreground);
}

body .pf-cta-banner-accent h2 {
  color: var(--pf-accent-foreground);
}

body .pf-footer a {
  color: var(--pf-dark-muted);
}

body .pf-footer a:hover {
  color: var(--pf-primary-foreground);
}

/* ---------- Layout helpers (classic content, thank-you, 404) ---------- */
.pf-section {
  padding-block: 3.5rem;
}

@media (min-width: 768px) {
  .pf-section {
    padding-block: 5.5rem;
  }
}

.container-page {
  width: 100%;
  max-width: 76rem;
  margin-inline: auto;
  padding-inline: 1.25rem;
}

/* ---------- Typography ---------- */
.eyebrow {
  font-family: var(--pf-font-display);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--pf-muted-foreground);
  margin: 0;
}

/* Lovable uses a flush eyebrow + mt-3 title (0.75rem); plain <h2> that
 * follow an eyebrow get the same gap. Hero <h1> keeps its own mt-4 (1rem). */
.eyebrow + h2 {
  margin-top: 0.75rem;
}

.h-section {
  font-size: clamp(1.6rem, 4.2vw, 2.6rem);
  line-height: 1.1;
}

/* Lovable caps the full-width section titles (max-w-2xl = 42rem for
 * card-grid sections, max-w-3xl = 48rem for FAQ/CTA banner); the
 * grid-column sections (problem, needs, quote, hero) are already capped
 * by their column. */
.pf-products .h-section,
.pf-benefits .h-section,
.pf-process .h-section {
  max-width: 42rem;
}

.pf-faq .container-page,
.pf-cta-banner .container-page {
  max-width: 48rem;
}

.pf-section-heading-desc {
  margin-top: 1rem;
  max-width: 42rem;
  color: var(--pf-muted-foreground);
  line-height: 1.6;
}

/* ---------- Buttons (.btn recipe from Lovable styles.css) ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border-radius: var(--radius);
  font-family: var(--pf-font-display);
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: -0.01em;
  padding: 0.9rem 1.4rem;
  min-height: 3rem;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  border: 0;
  transition: transform 0.12s ease, background-color 0.15s ease, color 0.15s ease;
}

.btn:active {
  transform: translateY(1px);
}

.btn-quote {
  background-color: var(--pf-accent);
  color: var(--pf-accent-foreground);
  box-shadow: var(--pf-shadow-cta);
}

.btn-quote:hover {
  background-color: var(--pf-accent-hover);
  color: var(--pf-accent-foreground);
}

/* Elementor frontend resets anchors (.elementor a, 0-1-1), which would
 * otherwise strip the CTA halo from saved widget buttons (the editor
 * preview renders a span and loads no such reset). This (0-2-1) restores
 * it without !important; per-widget generated CSS (0-3-0) still wins. */
.elementor a.btn-quote {
  box-shadow: var(--pf-shadow-cta);
}

.btn-whatsapp {
  background-color: var(--pf-whatsapp);
  color: var(--pf-whatsapp-foreground);
}

.btn-whatsapp:hover {
  background-color: var(--pf-whatsapp-hover);
  color: var(--pf-whatsapp-foreground);
}

.btn-outline {
  border: 1px solid var(--pf-input);
  background-color: var(--pf-card);
  color: var(--pf-foreground);
}

.btn-outline:hover {
  background-color: var(--pf-secondary);
  color: var(--pf-foreground);
}

.pf-btn-icon {
  width: 1rem;
  height: 1rem;
  flex: none;
}

/* ---------- Elementor: containers ----------
 * Section rhythm + max width via inherited vars so any per-element
 * value set in the editor (generated at 3-class specificity) wins. */
body {
  --container-max-width: 76rem;
  --container-default-padding-top: 3.5rem;
  --container-default-padding-bottom: 3.5rem;
  --container-default-padding-left: 1.25rem;
  --container-default-padding-right: 1.25rem;
}

@media (min-width: 768px) {
  body {
    --container-default-padding-top: 5.5rem;
    --container-default-padding-bottom: 5.5rem;
  }
}

/* Kit sets .e-con{--container-max-width:1140px}; the Lovable default is
 * 76rem. Per-element Content Width edits set --content-width (a different
 * var) so they still win over this. */
body .elementor .e-con {
  --container-max-width: 76rem;
}

/* Nested containers fall back to Elementor stock spacing; cards use .pf-card. */
body .e-con .e-con {
  --padding-top: 10px;
  --padding-right: 10px;
  --padding-bottom: 10px;
  --padding-left: 10px;
}

/* ---------- Elementor: buttons ----------
 * body .elementor-button (0-1-1) beats Elementor base (0-1-0) and loses
 * to Kit (0-2-0) and per-widget settings (0-3-0). */
body .elementor-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border-radius: var(--radius);
  font-family: var(--pf-font-display);
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: -0.01em;
  padding: 0.9rem 1.4rem;
  min-height: 3rem;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  border: 0;
  background-color: var(--pf-accent);
  color: var(--pf-accent-foreground);
  box-shadow: var(--pf-shadow-cta);
  transition: transform 0.12s ease, background-color 0.15s ease, color 0.15s ease;
}

body .elementor-button:hover,
body .elementor-button:focus {
  background-color: var(--pf-accent-hover);
  color: var(--pf-accent-foreground);
}

body .elementor-button:active {
  transform: translateY(1px);
}

/* WhatsApp variant: any Elementor button linking to wa.me. */
body .elementor-button[href*="wa.me"] {
  background-color: var(--pf-whatsapp);
  color: var(--pf-whatsapp-foreground);
  box-shadow: none;
}

body .elementor-button[href*="wa.me"]:hover,
body .elementor-button[href*="wa.me"]:focus {
  background-color: var(--pf-whatsapp-hover);
  color: var(--pf-whatsapp-foreground);
}

/* "Request Pricing" text links inside product cards. */
body .elementor-widget-text-editor a[href="#quote"] {
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--pf-accent-foreground);
  text-decoration: underline;
  text-decoration-color: var(--pf-accent);
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}

/* ---------- Elementor: headings ---------- */
body .elementor-widget-heading .elementor-heading-title {
  font-family: var(--pf-font-display);
  font-weight: 700;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

body h1.elementor-heading-title {
  font-size: clamp(2rem, 7vw, 3.5rem);
  line-height: 1.05;
}

body h2.elementor-heading-title {
  font-size: clamp(1.6rem, 4.2vw, 2.6rem);
  line-height: 1.1;
}

/* ---------- Elementor: body copy ---------- */
body .elementor-widget-text-editor {
  font-family: var(--pf-font-sans);
  line-height: 1.625;
}

/* ---------- Elementor: FAQ toggle ---------- */
body .elementor-widget-toggle .elementor-toggle-item {
  background-color: var(--pf-card);
  border: 1px solid var(--pf-border);
  border-radius: var(--radius);
  box-shadow: var(--pf-shadow-panel);
}

body .elementor-widget-toggle .elementor-tab-title {
  font-family: var(--pf-font-display);
  font-weight: 700;
  font-size: 1rem;
  padding: 1rem 1.25rem;
}

body .elementor-widget-toggle .elementor-toggle-icon {
  color: var(--pf-accent);
}

body .elementor-widget-toggle .elementor-tab-content {
  font-size: 0.875rem;
  line-height: 1.625;
  color: var(--pf-muted-foreground);
  padding: 0 1.25rem 1rem;
}

/* ---------- Packflow: FAQ accordion (details/summary recipe) ---------- */
.pf-faq {
  background-color: var(--pf-surface);
}

.pf-faq-list {
  display: grid;
  gap: 0.75rem;
  margin-top: 2rem;
}

.pf-faq-item {
  padding: 1rem 1.25rem;
}

.pf-faq-item summary {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  cursor: pointer;
  list-style: none;
  font-family: var(--pf-font-display);
  font-weight: 700;
  font-size: 1rem;
}

.pf-faq-item summary::-webkit-details-marker {
  display: none;
}

.pf-faq-item summary::marker {
  content: none;
}

.pf-faq-plus {
  flex: none;
  margin-top: 0.1rem;
  color: var(--pf-accent);
  transition: transform 0.15s ease;
}

.pf-faq-item[open] .pf-faq-plus {
  transform: rotate(45deg);
}

.pf-faq-item p {
  margin-top: 0.75rem;
  font-size: 0.875rem;
  line-height: 1.625;
  color: var(--pf-muted-foreground);
}

/* ---------- Packflow: product grid ---------- */
.pf-products {
  background-color: var(--pf-surface);
}

.pf-products-grid {
  display: grid;
  gap: 1.25rem;
  margin-top: 2.25rem;
}

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

@media (min-width: 1024px) {
  .pf-products-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.pf-product-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.pf-product-card img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.pf-product-card-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 0.5rem;
  padding: 1rem;
}

.pf-product-card-body h3 {
  font-size: 1rem;
  line-height: 1.4;
}

.pf-product-card-body p {
  font-size: 0.875rem;
  color: var(--pf-muted-foreground);
}

.pf-product-card-body .pf-request-pricing {
  margin-top: auto;
  padding-top: 0.75rem;
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--pf-accent-foreground);
  text-decoration: underline;
  text-decoration-color: var(--pf-accent);
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}

.pf-products-more {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-top: 2rem;
  padding: 1.5rem;
}

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

.pf-products-more p {
  max-width: 36rem;
}

.pf-products-more-ctas {
  display: flex;
  flex: none;
  flex-direction: column;
  gap: 0.75rem;
}

@media (min-width: 640px) {
  .pf-products-more-ctas {
    flex-direction: row;
  }
}

/* ---------- Packflow: hero ---------- */
.pf-hero {
  background-color: var(--pf-ink);
  color: var(--pf-primary-foreground);
}

.pf-hero-grid {
  display: grid;
  gap: 2.5rem;
  align-items: center;
  padding-block: 3rem;
}

@media (min-width: 768px) {
  .pf-hero-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 3.5rem;
    padding-block: 5rem;
  }
}

.pf-hero .eyebrow {
  color: var(--pf-accent);
}

.pf-hero h1 {
  margin-top: 1rem;
  font-size: clamp(2rem, 7vw, 3.5rem);
  line-height: 1.05;
}

.pf-hero-desc {
  margin-top: 1.25rem;
  max-width: 36rem;
  line-height: 1.625;
  color: var(--pf-dark-muted);
}

.pf-hero-ctas {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-top: 1.75rem;
}

@media (min-width: 640px) {
  .pf-hero-ctas {
    flex-direction: row;
  }

  .pf-hero-ctas .btn {
    flex: 1;
  }

  .pf-hero-ctas .btn-quote {
    order: -1;
  }
}

.pf-hero-note {
  margin-top: 1rem;
  font-size: 0.875rem;
  color: var(--pf-dark-muted);
}

.pf-hero img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius);
  box-shadow: var(--pf-shadow-panel);
}

/* ---------- Packflow: trust strip ---------- */
.pf-trust-strip {
  border-bottom: 1px solid var(--pf-border);
  background-color: var(--pf-surface);
}

.pf-trust-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem 1rem;
  padding-block: 1.25rem;
}

@media (min-width: 640px) {
  .pf-trust-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .pf-trust-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}

.pf-trust-item {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.25;
}

.pf-trust-icon {
  display: inline-flex;
  flex: none;
  width: 1.25rem;
  height: 1.25rem;
  align-items: center;
  justify-content: center;
  color: var(--pf-accent);
}

/* ---------- Packflow: problem section ---------- */
.pf-section-shell {
  padding-block: 3.5rem;
}

@media (min-width: 768px) {
  .pf-section-shell {
    padding-block: 5.5rem;
  }
}

.pf-problem {
  background-color: var(--pf-background);
}

.pf-problem-grid {
  display: grid;
  gap: 2.5rem;
}

@media (min-width: 1024px) {
  .pf-problem-grid {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    gap: 4rem;
  }
}

.pf-problem-copy p {
  max-width: 36rem;
  margin-top: 1.25rem;
  color: var(--pf-muted-foreground);
}

.pf-problem-copy .btn {
  margin-top: 1.75rem;
}

.pf-pains {
  display: grid;
  align-self: start;
  gap: 0;
  padding: 0.25rem;
}

.pf-pain {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--pf-border);
  font-size: 0.875rem;
}

.pf-pain:last-child {
  border-bottom: 0;
}

.pf-pain-dot {
  width: 0.375rem;
  height: 0.375rem;
  flex: none;
  border-radius: 999px;
  background-color: var(--pf-accent);
}

/* ---------- Packflow: benefits section ---------- */
.pf-benefits {
  background-color: var(--pf-primary);
  color: var(--pf-primary-foreground);
}

.pf-benefits .eyebrow,
.pf-benefits .pf-flow-number,
.pf-benefits .pf-benefit-icon {
  color: var(--pf-accent);
}

.pf-benefits-desc {
  max-width: 42rem;
  margin-top: 1.25rem;
  line-height: 1.625;
  color: var(--pf-dark-muted);
}

.pf-flow {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 2.25rem;
}

.pf-flow-item {
  display: flex;
  flex: 1 1 45%;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
  padding: 0.75rem;
  border: 1px solid var(--pf-line-dark);
  border-radius: var(--radius);
  background-color: color-mix(in srgb, var(--pf-primary-foreground) 5%, transparent);
  font-size: 0.875rem;
  font-weight: 600;
}

@media (min-width: 640px) {
  .pf-flow-item {
    flex-basis: 30%;
  }
}

@media (min-width: 1024px) {
  .pf-flow-item {
    flex-basis: 0;
  }
}

.pf-flow-number {
  flex: none;
  font-family: var(--pf-font-display);
  font-size: 0.75rem;
}

.pf-benefits-grid {
  display: grid;
  gap: 1.5rem;
  margin-top: 2.5rem;
}

@media (min-width: 768px) {
  .pf-benefits-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .pf-benefits-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.pf-benefit {
  padding-top: 1rem;
  border-top: 2px solid var(--pf-accent);
}

.pf-benefit-icon {
  display: inline-flex;
  width: 1.5rem;
  height: 1.5rem;
  align-items: center;
  justify-content: center;
}

.pf-benefit h3 {
  margin-top: 0.75rem;
  font-size: 1.125rem;
}

.pf-benefit p {
  margin-top: 0.5rem;
  font-size: 0.875rem;
  line-height: 1.625;
  color: var(--pf-dark-muted);
}

/* ---------- Packflow: process section ---------- */
/* Widget lists using a custom in-card marker must clear the browser marker
   (otherwise <ol>/<ul> paint a second number or bullet beside the card). */
.pf-process-grid,
.pf-flow,
.pf-needs-list,
.pf-reorder-list,
.pf-pains {
  list-style: none;
  margin: 0;
  padding: 0;
}

.pf-process {
  background-color: var(--pf-background);
}

.pf-process-grid {
  display: grid;
  gap: 1.25rem;
  margin-top: 2.25rem;
}

@media (min-width: 768px) {
  .pf-process-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}

.pf-process-card {
  padding: 1.25rem;
}

.pf-process-card h3 {
  margin-top: 1rem;
  font-size: 1rem;
  line-height: 1.4;
}

.pf-process-card p {
  margin-top: 0.5rem;
  font-size: 0.875rem;
  color: var(--pf-muted-foreground);
}

.pf-process-ctas {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-top: 2rem;
}

@media (min-width: 640px) {
  .pf-process-ctas {
    flex-direction: row;
  }
}

/* ---------- Packflow: needs checklist ---------- */
.pf-needs {
  background-color: var(--pf-surface);
}

.pf-needs-grid {
  display: grid;
  gap: 2.5rem;
}

@media (min-width: 1024px) {
  .pf-needs-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 4rem;
  }
}

.pf-needs-copy > p {
  margin-top: 1rem;
  color: var(--pf-muted-foreground);
}

.pf-needs-list,
.pf-reorder-list {
  display: grid;
  gap: 0.625rem;
  margin-top: 1.5rem;
}

.pf-needs-item,
.pf-reorder-item {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  font-size: 0.875rem;
}

.pf-needs-check,
.pf-reorder-check {
  display: inline-flex;
  width: 1rem;
  height: 1rem;
  flex: none;
  align-items: center;
  justify-content: center;
  margin-top: 0.125rem;
}

/* Asks check matches Lovable's bare amber check; the reorder check keeps
 * the dark glyph on its amber circle (see .pf-reorder-check below). */
.pf-needs-check {
  color: var(--pf-accent);
}

.pf-reorder-check {
  color: var(--pf-accent-foreground);
}

/* Asks check matches Lovable's bare amber check; the reorder check keeps
 * the dark glyph on its amber circle (see .pf-reorder-check below). */
.pf-needs-check {
  color: var(--pf-accent);
}

.pf-reorder-check {
  color: var(--pf-accent-foreground);
}

.pf-needs-check::before,
.pf-reorder-check::before {
  content: "✓";
  font-size: 0.75rem;
  font-weight: 800;
}

.pf-needs-cta {
  margin-top: 1.75rem;
}

.pf-needs-note {
  max-width: 28rem;
  margin-top: 1rem;
  font-size: 0.875rem;
  color: var(--pf-muted-foreground);
}

.pf-reorder-panel {
  padding: 1.5rem;
}

@media (min-width: 768px) {
  .pf-reorder-panel {
    padding: 2rem;
  }
}

.pf-reorder-panel h3 {
  font-size: 1.25rem;
}

.pf-reorder-panel > p {
  margin-top: 0.75rem;
  font-size: 0.875rem;
  line-height: 1.625;
  color: var(--pf-muted-foreground);
}

.pf-reorder-item {
  align-items: center;
  font-weight: 500;
}

.pf-reorder-check {
  width: 1.25rem;
  height: 1.25rem;
  margin-top: 0;
  border-radius: 999px;
  background-color: var(--pf-accent);
}

/* ---------- Packflow: customer types ---------- */
.pf-customer-types {
  background-color: var(--pf-background);
}

.pf-customer-types > .container-page > p {
  max-width: 42rem;
  margin-top: 1rem;
  color: var(--pf-muted-foreground);
}

.pf-customer-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1rem;
  margin-top: 2rem;
}

@media (min-width: 768px) {
  .pf-customer-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .pf-customer-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.pf-customer-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem;
}

.pf-customer-icon {
  display: inline-flex;
  width: 1.25rem;
  height: 1.25rem;
  flex: none;
  align-items: center;
  justify-content: center;
  color: var(--pf-accent);
}

/* ---------- Packflow: widget icon sizing ----------
 * Elementor renders ICONS controls as <i> font glyphs or inline <svg>
 * (inline-font-icons experiment) with no usable intrinsic size of their
 * own — unsized SVG can collapse inside flex wrappers. Drive both paths
 * from the wrapper font-size at the Lovable icon sizes. */
.pf-trust-icon,
.pf-customer-icon {
  font-size: 1.25rem;
}

.pf-benefit-icon {
  font-size: 1.5rem;
}

.pf-trust-icon > svg,
.pf-customer-icon > svg,
.pf-benefit-icon > svg {
  display: block;
  width: 1em;
  height: 1em;
  /* Inline experiment SVGs carry no fill of their own (SVG default is
   * black); inherit the wrapper's accent color like font glyphs do. */
  fill: currentColor;
}

.pf-trust-icon > i,
.pf-customer-icon > i,
.pf-benefit-icon > i {
  line-height: 1;
}

.pf-customer-label {
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.25;
}

/* ---------- Packflow: CTA banner ---------- */
.pf-cta-banner {
  text-align: center;
}

.pf-cta-banner-accent {
  background-color: var(--pf-accent);
  color: var(--pf-accent-foreground);
}

.pf-cta-banner-accent .btn-quote {
  background-color: var(--pf-primary);
  color: var(--pf-primary-foreground);
  box-shadow: none;
}

.pf-cta-banner-accent .btn-quote:hover,
.pf-cta-banner-accent .btn-quote:focus {
  background-color: var(--pf-steel);
  color: var(--pf-primary-foreground);
}

.pf-cta-banner-primary {
  background-color: var(--pf-primary);
  color: var(--pf-primary-foreground);
}

.pf-cta-banner-inner {
  max-width: 48rem;
}

.pf-cta-banner-desc {
  max-width: 36rem;
  margin: 1rem auto 0;
}

.pf-cta-banner-ctas {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.75rem;
  margin-top: 1.75rem;
}

@media (min-width: 640px) {
  .pf-cta-banner-ctas {
    flex-direction: row;
  }
}

.pf-cta-banner-note {
  margin-top: 1rem;
  font-size: 0.875rem;
  opacity: 0.7;
}

/* ---------- Packflow: quote section ---------- */
.pf-quote-section {
  background-color: var(--pf-background);
}

.pf-quote-grid {
  display: grid;
  gap: 2.5rem;
}

@media (min-width: 1024px) {
  .pf-quote-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
    gap: 3.5rem;
  }
}

.pf-quote-copy > p {
  max-width: 36rem;
  margin-top: 1rem;
  color: var(--pf-muted-foreground);
}

.pf-quote-prefer {
  margin-top: 1.5rem;
  font-size: 0.875rem;
  font-weight: 600;
}

.pf-quote-copy .btn {
  margin-top: 0.75rem;
}

.pf-quote-form {
  padding: 1.25rem;
}

@media (min-width: 768px) {
  .pf-quote-form {
    padding: 1.75rem;
  }
}

.pf-quote-form .wpcf7 {
  display: block;
}

/* ---------- Packflow: Thank You page ---------- */
.pf-thankyou-intro {
  text-align: center;
  background-color: var(--pf-background);
  padding-bottom: 1.5rem;
}

.pf-thankyou-centered {
  max-width: 42rem;
  text-align: center;
}

.pf-thankyou-check {
  display: inline-flex;
  width: 3.5rem;
  height: 3.5rem;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  color: var(--pf-accent);
  font-size: 2.5rem;
  line-height: 1;
}

.pf-thankyou-intro h1 {
  margin-top: 1.5rem;
  font-size: clamp(1.875rem, 4.2vw, 2.6rem);
}

.pf-thankyou-intro p {
  margin-top: 1rem;
  color: var(--pf-muted-foreground);
}

.pf-thankyou-intro p + p {
  margin-top: 0.5rem;
}

.pf-thankyou-surface {
  background-color: var(--pf-surface);
}

.pf-thankyou-section-title {
  text-align: center;
  font-size: 1.6rem;
}

.pf-thankyou-cards {
  display: grid;
  gap: 1.5rem;
  list-style: none;
  margin: 2rem 0 0;
  padding: 0;
}

@media (min-width: 768px) {
  .pf-thankyou-cards {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.pf-thankyou-card {
  padding: 1.5rem;
}

.pf-thankyou-card h3,
.pf-thankyou-expectation h3 {
  font-size: 1.125rem;
}

.pf-thankyou-card h3 {
  margin-top: 1rem;
}

.pf-thankyou-card p,
.pf-thankyou-expectation p {
  margin-top: 0.5rem;
  font-size: 0.875rem;
  line-height: 1.625;
  color: var(--pf-muted-foreground);
}

.pf-thankyou-speed {
  max-width: 42rem;
  margin-inline: auto;
  padding: 2rem;
  text-align: center;
}

.pf-thankyou-speed p {
  margin-top: 0.75rem;
  color: var(--pf-muted-foreground);
}

.pf-thankyou-list {
  display: inline-grid;
  gap: 0.5rem;
  margin-top: 0.75rem;
  padding-left: 1.25rem;
  text-align: left;
  font-size: 0.875rem;
  color: var(--pf-muted-foreground);
}

.pf-thankyou-speed .btn {
  margin-top: 2rem;
}

.pf-thankyou-expectations {
  display: grid;
  gap: 1rem;
  margin-top: 2rem;
}

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

.pf-thankyou-expectation {
  padding: 1.5rem;
}

.pf-thankyou-final {
  background-color: var(--pf-primary);
  color: var(--pf-primary-foreground);
  text-align: center;
}

.pf-thankyou-final .eyebrow {
  color: var(--pf-dark-muted);
}

.pf-thankyou-final .btn-outline {
  border-color: var(--pf-line-dark);
  background-color: transparent;
  color: var(--pf-primary-foreground);
}

.pf-thankyou-final .btn-outline:hover,
.pf-thankyou-final .btn-outline:focus {
  background-color: color-mix(in srgb, var(--pf-primary-foreground) 10%, transparent);
  color: var(--pf-primary-foreground);
}

.pf-thankyou-final h2 {
  margin-top: 0.75rem;
  font-size: 1.6rem;
}

.pf-thankyou-final-ctas {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  margin-top: 2rem;
}

@media (min-width: 640px) {
  .pf-thankyou-final-ctas {
    flex-direction: row;
  }
}

.pf-thankyou-brand {
  margin-top: 2.5rem;
  padding-top: 2rem;
  border-top: 1px solid var(--pf-line-dark);
}

.pf-thankyou-brand p:last-child {
  margin-top: 0.25rem;
  font-size: 0.875rem;
  color: var(--pf-dark-muted);
}

.pf-thankyou-final .pf-footer-title {
  color: var(--pf-primary-foreground);
}

/* ---------- Elementor: icon boxes / lists (trust strip, benefits) ---------- */
body .elementor-icon-box-icon .elementor-icon,
body .elementor-icon-list-icon {
  color: var(--pf-accent);
}

body .elementor-widget-icon-box .elementor-icon-box-title {
  font-family: var(--pf-font-display);
  font-weight: 700;
  letter-spacing: -0.02em;
}

body .elementor-widget-icon-box .elementor-icon-box-description {
  font-size: 0.875rem;
  line-height: 1.625;
}

/* ---------- Panels & cards ---------- */
.panel {
  background-color: var(--pf-card);
  border: 1px solid var(--pf-border);
  border-radius: var(--radius);
  box-shadow: var(--pf-shadow-panel);
}

/* .pf-card is wired by the content cleanup onto white nested containers. */
body .e-con.pf-card {
  --padding-top: 1.25rem;
  --padding-right: 1.25rem;
  --padding-bottom: 1.25rem;
  --padding-left: 1.25rem;
  background-color: var(--pf-card);
  border: 1px solid var(--pf-border);
  border-radius: var(--radius);
  box-shadow: var(--pf-shadow-panel);
}

@media (min-width: 768px) {
  body .e-con.pf-card {
    --padding-top: 1.75rem;
    --padding-right: 1.75rem;
    --padding-bottom: 1.75rem;
    --padding-left: 1.75rem;
  }
}

/* ---------- Process numbers ---------- */
.rule-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 999px;
  background-color: var(--pf-primary);
  color: var(--pf-primary-foreground);
  font-family: var(--pf-font-display);
  font-weight: 700;
  flex: none;
}

/* ---------- Header (Lovable Header.tsx) ---------- */
.pf-header {
  background-color: var(--pf-ink);
  color: var(--pf-primary-foreground);
  border-bottom: 1px solid var(--pf-line-dark);
}

.pf-header-inner {
  min-height: 4rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

.pf-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--pf-font-display);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--pf-primary-foreground);
  text-decoration: none;
}

.pf-brand:hover {
  color: var(--pf-accent);
}

.pf-brand-icon {
  width: 1.25rem;
  height: 1.25rem;
  flex: none;
  color: var(--pf-accent);
}

.pf-brand-logo {
  max-height: 2rem;
  width: auto;
  object-fit: contain;
}

.pf-nav {
  display: none;
}

@media (min-width: 768px) {
  .pf-nav {
    display: block;
  }
}

.pf-nav-list {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.pf-nav-link {
  color: var(--pf-dark-muted);
  font-size: 0.875rem;
  text-decoration: none;
  transition: color 0.15s ease;
}

.pf-nav-link:hover {
  color: var(--pf-accent);
}

.pf-header-wa {
  display: none;
  min-height: 2.5rem;
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
  box-shadow: none;
}

@media (min-width: 640px) {
  .pf-header-wa {
    display: inline-flex;
  }
}

.pf-back-home {
  font-size: 0.875rem;
  text-decoration: underline;
  text-decoration-color: var(--pf-accent);
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}

/* ---------- Packflow trust & proof section ---------- */
.pf-trust-proof {
  background-color: var(--pf-muted);
}

.pf-trust-proof-header {
  max-width: 42rem;
}

.pf-trust-proof-desc {
  max-width: 38rem;
  margin-top: 1.25rem;
  color: var(--pf-muted-foreground);
  line-height: 1.625;
}

.pf-trust-proof-grid {
  display: grid;
  gap: 2rem;
  margin-top: 2.5rem;
}

@media (min-width: 1024px) {
  .pf-trust-proof-grid {
    grid-template-columns: minmax(0, 1.15fr) minmax(18rem, 0.85fr);
    gap: 4rem;
    align-items: start;
  }
}

.pf-trust-proof-points {
  display: grid;
  gap: 0;
  background-color: var(--pf-card);
  border: 1px solid var(--pf-border);
  border-radius: var(--radius);
  box-shadow: var(--pf-shadow-panel);
}

.pf-trust-proof-point {
  display: grid;
  grid-template-columns: 2.25rem minmax(0, 1fr);
  gap: 1rem;
  padding: 1.25rem;
  border-bottom: 1px solid var(--pf-border);
}

.pf-trust-proof-point:last-child {
  border-bottom: 0;
}

.pf-trust-proof-icon {
  display: inline-flex;
  width: 2.25rem;
  height: 2.25rem;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background-color: var(--pf-secondary);
  color: var(--pf-primary);
  font-size: 0.875rem;
}

.pf-trust-proof-icon > svg {
  width: 1em;
  height: 1em;
}

.pf-trust-proof-point h3 {
  margin: 0;
  font-size: 1rem;
  line-height: 1.35;
}

.pf-trust-proof-point p {
  margin: 0.35rem 0 0;
  color: var(--pf-muted-foreground);
  font-size: 0.875rem;
  line-height: 1.6;
}

.pf-trust-proof-panel {
  padding: 1.5rem;
  background-color: var(--pf-primary);
  color: var(--pf-primary-foreground);
  border-radius: var(--radius);
}

.pf-trust-proof-label {
  margin: 0;
  color: var(--pf-accent);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1.3;
  text-transform: uppercase;
}

.pf-trust-proof-panel blockquote {
  margin: 0.75rem 0 0;
  font-family: var(--pf-font-display);
  font-size: 1.35rem;
  font-weight: 600;
  line-height: 1.3;
}

.pf-trust-proof-attribution {
  margin: 0.75rem 0 0;
  color: var(--pf-dark-muted);
  font-size: 0.8125rem;
}

.pf-trust-proof-notes {
  margin-top: 1.75rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--pf-line-dark);
}

.pf-trust-proof-notes ul {
  display: grid;
  gap: 0.5rem;
  margin: 0.75rem 0 0;
  padding: 0;
  list-style: none;
}

.pf-trust-proof-notes li {
  position: relative;
  padding-left: 1.1rem;
  color: var(--pf-dark-muted);
  font-size: 0.875rem;
  line-height: 1.45;
}

.pf-trust-proof-notes li::before {
  position: absolute;
  top: 0.48rem;
  left: 0;
  width: 0.375rem;
  height: 0.375rem;
  border-radius: 999px;
  background-color: var(--pf-accent);
  content: "";
}

.pf-testimonial {
  background-color: var(--pf-background);
}

.pf-testimonial .h-section {
  max-width: 42rem;
}

.pf-testimonials {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
  gap: 1.5rem;
  margin-top: 2.5rem;
}

.pf-testimonial-card {
  background-color: var(--pf-surface);
  border-radius: 1rem;
  padding: 2rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.pf-testimonial-card .pf-testimonial-mark {
  display: block;
  margin: 0 0 0.5rem;
  color: var(--pf-accent);
  font-family: Georgia, serif;
  font-size: 3rem;
  line-height: 0.8;
}

.pf-testimonial-card blockquote {
  margin: 0;
  color: var(--pf-foreground);
  font-family: var(--pf-font-display);
  font-size: clamp(1rem, 1.8vw, 1.15rem);
  font-weight: 500;
  line-height: 1.6;
}

.pf-testimonial-card .pf-testimonial-attribution {
  margin: 1.25rem 0 0;
  color: var(--pf-muted-foreground);
  font-size: 0.875rem;
}

@media (max-width: 768px) {
  .pf-testimonials {
    grid-template-columns: 1fr;
  }
}

/* ---------- Footer (Lovable Footer.tsx) ---------- */
.pf-footer {
  background-color: var(--pf-ink);
  color: var(--pf-dark-muted);
  border-top: 1px solid var(--pf-line-dark);
  padding: 2.5rem 0 6rem;
  font-size: 0.875rem;
}

@media (min-width: 768px) {
  .pf-footer {
    padding-bottom: 2.5rem;
  }
}

.pf-footer-grid {
  display: grid;
  gap: 1.5rem;
}

@media (min-width: 768px) {
  .pf-footer-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.pf-footer-title {
  font-family: var(--pf-font-display);
  font-weight: 700;
  color: var(--pf-primary-foreground);
  margin: 0;
}

.pf-footer-blurb {
  margin: 0.5rem 0 0;
  max-width: 20rem;
  line-height: 1.625;
}

.pf-footer-heading {
  font-weight: 600;
  color: var(--pf-primary-foreground);
  margin: 0;
}

.pf-footer-list {
  list-style: none;
  margin: 0.5rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.25rem;
}

.pf-footer a {
  color: var(--pf-dark-muted);
  text-decoration: underline;
  text-decoration-color: var(--pf-accent);
  text-decoration-thickness: 2px;
  text-underline-offset: 2px;
  transition: color 0.15s ease;
}

.pf-footer a:hover {
  color: var(--pf-primary-foreground);
}

.pf-footer-legal {
  margin-top: 2rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  font-size: 0.75rem;
}

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

.pf-footer-legal p {
  margin: 0;
}

.pf-footer-legal-links {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

/* ---------- Sticky mobile conversion bar (StickyMobileCTA.tsx) ---------- */
.pf-sticky {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: 50;
  background: var(--pf-ink);
  backdrop-filter: blur(8px);
  border-top: 1px solid var(--pf-line-dark);
  padding: 0.75rem;
}

.pf-sticky-inner {
  display: flex;
  gap: 0.5rem;
  max-width: 76rem;
  margin-inline: auto;
}

.pf-sticky-inner .btn {
  flex: 1;
  padding-inline: 0.75rem;
}

@media (min-width: 768px) {
  .pf-sticky {
    display: none;
  }
}

/* ---------- Contact Form 7 (pixel-matched to Lovable QuoteForm) ---------- */
.field-label {
  display: block;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--pf-foreground);
  margin-bottom: 0.35rem;
}

.field,
.wpcf7 input:not([type="submit"]):not([type="button"]):not([type="checkbox"]):not([type="radio"]),
.wpcf7 select,
.wpcf7 textarea {
  width: 100%;
  border: 1px solid var(--pf-input);
  border-radius: var(--radius);
  background-color: var(--pf-card);
  color: var(--pf-foreground);
  padding: 0.7rem 0.8rem;
  font-size: 1rem;
  min-height: 2.85rem;
  font-family: var(--pf-font-sans);
}

.field::placeholder,
.wpcf7 input::placeholder,
.wpcf7 textarea::placeholder {
  color: var(--pf-muted-foreground);
  opacity: 1;
}

.field[aria-invalid="true"] {
  border-color: var(--pf-destructive);
}

.wpcf7 .pf-form-grid {
  display: grid;
  gap: 1rem;
}

.wpcf7 .pf-form-grid .full-width {
  grid-column: 1 / -1;
}

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

.wpcf7 span.wpcf7-form-control-wrap {
  display: block;
}

.wpcf7-form-control-wrap input[type="file"] {
  min-height: auto;
  padding: 0.5rem 0.2rem;
  font-size: 0.875rem;
}

.wpcf7-not-valid-tip {
  margin-top: 0.25rem;
  font-size: 0.75rem;
  color: var(--pf-destructive);
}

.wpcf7 form .wpcf7-response-output {
  margin: 1rem 0 0;
  padding: 0.75rem 1rem;
  border: 1px solid var(--pf-border);
  border-radius: var(--radius);
  font-size: 0.875rem;
  color: var(--pf-foreground);
}

.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output {
  border-color: var(--pf-destructive);
}

.wpcf7 form.sent .wpcf7-response-output {
  border-color: var(--pf-whatsapp);
  color: var(--pf-whatsapp);
}

.wpcf7-submit.btn.btn-quote {
  width: 100%;
}

/* ---------- Loop / single / 404 ---------- */
.pf-loop {
  display: grid;
  gap: 1.25rem;
}

.pf-post {
  padding: 1.5rem;
}

.pf-post-title {
  font-size: 1.25rem;
  margin: 0;
}

.pf-post-title a {
  color: var(--pf-foreground);
  text-decoration: none;
}

.pf-post-title a:hover {
  color: var(--pf-accent-foreground);
  text-decoration: underline;
  text-decoration-color: var(--pf-accent);
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}

.pf-post-excerpt {
  margin-top: 0.5rem;
  color: var(--pf-muted-foreground);
}

.pf-single {
  max-width: 48rem;
}

.pf-single-content {
  margin-top: 1.5rem;
  line-height: 1.7;
}

.pf-404 {
  padding: 3rem 2rem;
  text-align: center;
  max-width: 32rem;
  margin-inline: auto;
}

.pf-404-code {
  font-family: var(--pf-font-display);
  font-size: 4.5rem;
  font-weight: 800;
  line-height: 1;
  margin: 0;
}

.pf-404-copy {
  color: var(--pf-muted-foreground);
}

/* ---------- Packflow elements: list ---------- */
.pf-list {
  display: grid;
  gap: 0.625rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Styled = the Problem pain-point card: panel with divided rows. */
.pf-list--styled {
  gap: 0;
  padding: 0.25rem;
  background-color: var(--pf-card);
  border: 1px solid var(--pf-border);
  border-radius: var(--radius);
  box-shadow: var(--pf-shadow-panel);
}

.pf-list-item {
  display: flex;
  gap: 0.75rem;
  font-size: 0.875rem;
  line-height: 1.4;
}

.pf-list--styled .pf-list-item {
  align-items: center;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--pf-border);
}

.pf-list--styled .pf-list-item:last-child {
  border-bottom: 0;
}

.pf-list--marker-accent {
  --pf-list-marker: var(--pf-accent);
}

.pf-list--marker-muted {
  --pf-list-marker: var(--pf-muted-foreground);
}

.pf-list--marker-primary {
  --pf-list-marker: var(--pf-primary);
}

.pf-list-dot {
  width: 0.375rem;
  height: 0.375rem;
  flex: none;
  margin-top: 0.4375rem;
  border-radius: 999px;
  background-color: var(--pf-list-marker);
}

.pf-list--styled .pf-list-dot {
  margin-top: 0;
}

.pf-list-check {
  display: inline-flex;
  width: 1rem;
  height: 1rem;
  flex: none;
  align-items: center;
  justify-content: center;
  margin-top: 0.125rem;
  color: var(--pf-list-marker);
  font-size: 0.75rem;
  font-weight: 800;
}

.pf-list-check::before {
  content: "✓";
}

.pf-list-check--circle {
  width: 1.25rem;
  height: 1.25rem;
  margin-top: 0;
  border-radius: 999px;
  background-color: var(--pf-list-marker);
  color: var(--pf-accent-foreground);
}

.pf-list-check--square {
  width: 1.25rem;
  height: 1.25rem;
  margin-top: 0;
  border-radius: 0.25rem;
  background-color: var(--pf-list-marker);
  color: var(--pf-accent-foreground);
}

.pf-list-num {
  flex: none;
  font-family: var(--pf-font-display);
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--pf-list-marker);
}

/* ---------- Packflow elements: blank card ---------- */
.pf-blank-card {
  display: flex;
  flex-direction: column;
  border-radius: var(--radius);
}

.pf-blank-card--bg-card {
  background-color: var(--pf-card);
}

.pf-blank-card--bg-surface {
  background-color: var(--pf-surface);
}

.pf-blank-card--bg-transparent {
  background-color: transparent;
}

.pf-blank-card--border {
  border: 1px solid var(--pf-border);
}

.pf-blank-card--shadow {
  box-shadow: var(--pf-shadow-panel);
}

.pf-blank-card--padding-none {
  padding: 0;
}

.pf-blank-card--padding-sm {
  padding: 1.25rem;
}

.pf-blank-card--padding-md {
  padding: 1.5rem;
}

.pf-blank-card--padding-lg {
  padding: 2rem;
}

.pf-blank-card-icon {
  display: inline-flex;
  width: 1.5rem;
  height: 1.5rem;
  flex: none;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.75rem;
  font-size: 1.5rem;
  color: var(--pf-accent);
}

.pf-blank-card-icon > svg {
  display: block;
  width: 1em;
  height: 1em;
  fill: currentColor;
}

.pf-blank-card-icon > i {
  line-height: 1;
}

.pf-blank-card-title {
  margin-top: 0.75rem;
  font-size: 1.25rem;
  line-height: 1.3;
}

.pf-blank-card-title:first-child {
  margin-top: 0;
}

.pf-blank-card-body {
  margin-top: 0.5rem;
  font-size: 0.875rem;
  line-height: 1.625;
  color: var(--pf-muted-foreground);
}

.pf-blank-card-body p {
  margin: 0 0 0.75rem;
}

.pf-blank-card-body p:last-child {
  margin-bottom: 0;
}

.pf-blank-card-cta {
  margin-top: 1.25rem;
}

/* ---------- Packflow elements: feature card ---------- */
.pf-feature-card {
  padding-top: 1rem;
  border-top: 2px solid var(--pf-accent);
}

.pf-feature-card--no-border {
  padding-top: 0;
  border-top: 0;
}

.pf-feature-icon {
  display: inline-flex;
  width: 1.5rem;
  height: 1.5rem;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  color: var(--pf-accent);
}

.pf-feature-icon > svg {
  display: block;
  width: 1em;
  height: 1em;
  fill: currentColor;
}

.pf-feature-icon > i {
  line-height: 1;
}

.pf-feature-card h1,
.pf-feature-card h2,
.pf-feature-card h3 {
  margin-top: 0.75rem;
  font-size: 1.125rem;
}

.pf-feature-card p {
  margin-top: 0.5rem;
  font-size: 0.875rem;
  line-height: 1.625;
  color: var(--pf-muted-foreground);
}

/* ---------- Packflow elements: flow list ---------- */
.pf-flow-list {
  margin-top: 0;
}

.pf-flow--panel .pf-flow-item {
  background-color: var(--pf-card);
  border: 1px solid var(--pf-border);
  box-shadow: var(--pf-shadow-panel);
}