/* =====================================================================
   Propfocus AI site shell: shared styles for every marketing page
   Files: components/site-shell/site.css + site.js, nav.html, footer.html
   Design system matches index.html (25 Oct): Playfair Display 600 headings,
   Jost body, warm paper, cream band, gold used as fill on light and as text
   only in its deep shade (#8F7223). Plain CSS, no framework needed.

   Contents
     1. Tokens            8. Answer-first block     15. Modal and side panel
     2. Base              9. Content sections       16. Forms
     3. Layout           10. Cards and grids        17. Lead leak calculator
     4. Type             11. Page FAQ               18. Footer (.pff, approved)
     5. Buttons, links   12. Breadcrumb             19. Reduced motion
     6. Nav              13. Bands                  20. Forced colours
     7. Page hero        14. Grid-and-glow bg
   ===================================================================== */

/* ------------------------------------------------------------ 1. Tokens */
:root {
  --pfw-paper-rgb: 255 255 255; --pfw-paper-2-rgb: 251 249 244; --pfw-cream-rgb: 247 243 232; --pfw-ink-rgb: 34 32 28;
  --pfw-ink-soft-rgb: 61 58 53; --pfw-body-rgb: 88 84 76; --pfw-muted-rgb: 138 132 116;
  --pfw-gold-rgb: 199 166 75; --pfw-gold-deep-rgb: 143 114 35; --pfw-gold-dark-rgb: 168 137 58;
  --pfw-gold-light-rgb: 220 193 114; --pfw-gold-tint-rgb: 246 239 221; --pfw-gold-faint-rgb: 251 248 239;
  --pfw-line-rgb: 240 236 228; --pfw-line-2-rgb: 226 221 210;

  --pfw-page: #fff;                                      /* page background: white, same as the homepage (25 Oct) */
  --pfw-paper: rgb(var(--pfw-paper-rgb));                /* cards, panels, fields */
  --pfw-paper-2: rgb(var(--pfw-paper-2-rgb));
  --pfw-cream: rgb(var(--pfw-cream-rgb));
  --pfw-band-bg: #f4efe1;                                /* cream band sections */
  --pfw-ink: rgb(var(--pfw-ink-rgb));                    /* headings #22201c */
  --pfw-ink-soft: rgb(var(--pfw-ink-soft-rgb));
  --pfw-text: #3d3a35;                                   /* running text */
  --pfw-body: rgb(var(--pfw-body-rgb));                  /* leads, secondary text */
  --pfw-muted: rgb(var(--pfw-muted-rgb));                /* captions, eyebrows (13px+ only) */
  --pfw-gold: rgb(var(--pfw-gold-rgb));                  /* fills, dots, rules, button bg; never text on light */
  --pfw-gold-deep: rgb(var(--pfw-gold-deep-rgb));        /* all gold text on light */
  --pfw-gold-dark: rgb(var(--pfw-gold-dark-rgb));
  --pfw-gold-light: rgb(var(--pfw-gold-light-rgb));
  --pfw-gold-tint: rgb(var(--pfw-gold-tint-rgb));
  --pfw-gold-faint: rgb(var(--pfw-gold-faint-rgb));
  --pfw-line: rgb(var(--pfw-line-rgb));
  --pfw-line-2: rgb(var(--pfw-line-2-rgb));
  --pfw-success: #1e7a43;
  --pfw-alert: #c2410c;

  --pfw-font-display: 'Playfair Display', Georgia, serif;
  --pfw-font-sans: 'Jost', ui-sans-serif, system-ui, sans-serif;

  /* Type scale (26 Oct, research/type-spacing-spec-2026-10-26.md: Revspot proportions, our fonts).
     Display sizes use min(vw, svh), so on short laptops the height decides and the one-screen rule holds. */
  --pfw-h1:    clamp(2.375rem, min(1.6vw + 1.6rem, 4.6svh + 1.1rem), 3.75rem);  /* 38 @390 / 48 @1440x666 / 56 @1920x1080 */
  --pfw-h2:    clamp(1.875rem, min(1.6vw + 1.2rem, 4.2svh + 1rem), 3.25rem);    /* 30 @390 / 50 @1920x1080 (short laptops below) */
  --pfw-h2-xl: clamp(2.125rem, min(2.4vw + 1.2rem, 5.6svh + 1rem), 4rem);       /* optional, unused (closing CTA keeps the H2 size) */
  --pfw-stat:  clamp(2.5rem, min(3vw + 1rem, 6svh + 1rem), 4rem);               /* big numbers */
  --pfw-h3:    clamp(1.125rem, .4vw + .95rem, 1.375rem);                        /* card titles, Jost 500: 18 / 21 / 22 */
  --pfw-lead:    clamp(1rem, 1.15vw, 1.0625rem);                                /* 16 to 17 */
  /* body text size is --pfw-fs-body (15px); --pfw-body stays the secondary-text colour */
  --pfw-small:   .8125rem;                                                      /* 13 */
  --pfw-eyebrow: .84375rem;                                                     /* 13.5, weight 600, sentence case, gold dot */
  --pfw-lh-h1: 1.06; --pfw-lh-h2: 1.08; --pfw-lh-h3: 1.22;
  --pfw-lh-lead: 1.6; --pfw-lh-body: 1.6; --pfw-lh-small: 1.5;
  --pfw-ls-display: -0.022em; --pfw-ls-h3: -0.01em; --pfw-ls-text: -0.003em; --pfw-ls-eyebrow: .005em;
  --pfw-w-display: 500;
  --pfw-measure-h1: 22ch; --pfw-measure-h2: 20ch; --pfw-measure-lead: 46ch; --pfw-measure-body: 38ch; --pfw-measure-faq: 68ch;
  /* Aliases for the old names (keep one release) */
  --pfw-fs-h1: var(--pfw-h1); --pfw-fs-h2: var(--pfw-h2); --pfw-fs-h3: var(--pfw-h3);
  --pfw-fs-lead: var(--pfw-lead); --pfw-fs-lead-lg: var(--pfw-lead);
  --pfw-fs-body: .9375rem; --pfw-fs-small: var(--pfw-small); --pfw-fs-eyebrow: var(--pfw-eyebrow);
  --pfw-fs-h3-sm: 1.0625rem; --pfw-fs-btn: .9375rem; --pfw-fs-nav: .90625rem;

  /* Spacing scale (4px base) and rhythm (Revspot ratios of the H2) */
  --pfw-space-1: 4px; --pfw-space-2: 8px; --pfw-space-3: 12px; --pfw-space-4: 16px; --pfw-space-5: 20px; --pfw-space-6: 24px;
  --pfw-space-7: 32px; --pfw-space-8: 40px; --pfw-space-9: 56px; --pfw-space-10: 72px; --pfw-space-11: 96px; --pfw-space-12: 128px;
  --pfw-gap-eyebrow: clamp(14px, 2.6svh, 22px);           /* eyebrow to H2 */
  --pfw-gap-lead:    clamp(12px, 2.1svh, 20px);           /* H2 to intro */
  --pfw-gap-head:    clamp(28px, min(5vw, 6.5svh), 72px); /* section head to content */
  --pfw-grid-gap:    clamp(16px, 1.8vw, 24px);
  --pfw-grid-gap-lg: clamp(28px, 4vw, 56px);

  --pfw-r-sm: 8px; --pfw-r-md: 12px; --pfw-r-lg: 16px; --pfw-r-xl: 20px; --pfw-r-pill: 999px;
  --pfw-shadow-hair: 0 1px 2px rgba(23,19,11,.03);
  --pfw-shadow-card: 0 1px 1px rgba(23,19,11,.04), 0 3px 8px -2px rgba(23,19,11,.06), 0 10px 24px -8px rgba(23,19,11,.07);
  --pfw-shadow-float: 0 1px 0 rgba(23,19,11,.04), 0 24px 56px -28px rgba(23,19,11,.28);
  --pfw-shadow-btn: inset 0 1px 0 rgba(255,255,255,.3), 0 6px 16px -12px rgba(143,114,35,.45);

  --pfw-ease-silk: cubic-bezier(.22, 1, .36, 1);
  --pfw-dur-hover: 200ms; --pfw-dur-press: 120ms; --pfw-dur-arrow: 350ms;

  /* Content width (founder, 26 Oct): ONE container for the nav pill and every section. Content edges sit
     exactly on the pill's inner edges (pill = container + 2 x --pfw-pill-pad) at every desktop/laptop size.
     Laptops (founder, 27 Oct): centred like the 1920 view, content = 70% of the screen width from 1024px up
     (floor 880px, cap 1200px), pill = content + 2 x 20. 1920: 1200 (pill 1240), unchanged. 1536: 1075. 1440: 1008 (pill 1048).
     1366: 956. 1280: 896. 1024 to 1257: 880. Tablet (< 1024) and phones unchanged (5vw, 20px gutter). */
  --pfw-gutter: clamp(20px, 5vw, 72px);
  --pfw-container-max: 1200px;
  --pfw-container: min(var(--pfw-container-max), 100vw - 2 * var(--pfw-gutter));
  --pfw-pill-pad: 20px;                                   /* nav pill edge to its content (logo / CTA zone) */
  --pfw-split-gap: clamp(32px, 4vw, 64px);                /* the one middle gap for two-column sections */
  --pfw-header-h: 64px;
  --pfw-section-y: clamp(64px, min(11vw, 13svh), 160px);   /* Revspot's 11vw, capped by height: 140 @1920x1080 */
  --pfw-btn-h: 44px; --pfw-btn-h-sm: 38px;
  --pfw-card-pad: clamp(20px, 2vw, 28px);
  interpolate-size: allow-keywords;
}
@media (max-width: 47.99rem) { :root { --pfw-section-y: 68px; --pfw-gap-head: 32px; } }
/* Laptop/desktop content width (27 Oct): the gutter grows so the shared container is 70vw (880 floor, 1200 cap) */
@media (min-width: 1024px) {
  :root {
    --pfw-gutter: max(72px, min(15vw, 50vw - 440px));
    --pfw-split-gap: clamp(32px, 3.4vw, 64px);
    /* Display type follows the content width too, so a laptop reads as a scaled 1920 (56 / 50 at 1200 content) */
    --pfw-h1: clamp(2.375rem, min(1.6vw + 1.6rem, 4.6svh + 1.1rem, var(--pfw-container) * .047), 3.75rem);
    --pfw-h2: clamp(1.875rem, min(1.6vw + 1.2rem, 4.2svh + 1rem, var(--pfw-container) * .0417), 3.25rem);
  }
}
/* One-screen rule (founder, 26 Oct): short laptops (1440x666, 1366x625, 1280x600, 1536x700, 1280x720, 1470x745).
   Same proportions, smaller numbers; section padding stays at today's short-laptop value. */
@media (min-width: 64rem) and (max-height: 760px) {
  :root {
    --pfw-h2:          clamp(1.75rem, min(1.6vw + 1.2rem, 3.4svh + 1rem), 2.5rem);  /* 38.6 @1440x666, 37 @1366x625, 36 @1280x600 */
    --pfw-h2-xl:       clamp(2rem, 5svh + 1rem, 3.25rem);
    --pfw-section-y:   clamp(22px, 4.6svh, 44px);
    --pfw-gap-head:    clamp(16px, 3svh, 24px);
    --pfw-gap-eyebrow: clamp(10px, 2svh, 14px);
    --pfw-gap-lead:    clamp(8px, 1.6svh, 12px);
    --pfw-card-pad:    clamp(18px, 1.6vw, 22px);
  }
}
@media (min-width: 64rem) and (max-height: 640px) { :root { --pfw-section-y: 24px; --pfw-gap-head: 16px; } }
/* Dense sections (big card grids) on tall screens: the 140px padding and larger H2 would push them past one
   1920x1080 screen (one-screen rule), so these keep today's 96px padding and a 48px head gap. Opt in per section. */
@media (min-width: 64rem) and (min-height: 761px) {
  .pfw-section.pfw-section-dense { padding-block: min(var(--pfw-section-y), 96px); }
  .pfw-section-dense .pfw-sec-head, .pfw-section-dense .pfw-split-head { margin-bottom: min(var(--pfw-gap-head), 48px); }
}

/* ------------------------------------------------------------ 2. Base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--pfw-header-h) + 16px); scrollbar-gutter: stable; }
body {
  margin: 0; min-height: 100vh;
  background: var(--pfw-page); color: var(--pfw-text);
  font-family: var(--pfw-font-sans); font-size: var(--pfw-fs-body); line-height: var(--pfw-lh-body);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  overflow-x: clip;
}
img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
:where(h1, h2, h3, h4, p, ul, ol, figure, blockquote, dl, dd) { margin: 0; }
:where(ul, ol)[class] { list-style: none; padding: 0; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
::selection { background: var(--pfw-gold); color: var(--pfw-ink); }
:focus-visible { outline: 2px solid var(--pfw-gold-deep); outline-offset: 3px; }
[hidden] { display: none !important; }

.pfw-sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
.pfw-skip {
  position: absolute; left: 12px; top: -60px; z-index: 100;
  padding: 10px 16px; border-radius: var(--pfw-r-md); background: var(--pfw-ink); color: #F7F3E8;
  font-weight: 500; text-decoration: none; transition: top 150ms ease;
}
.pfw-skip:focus { top: 12px; }

/* Body scroll lock while a modal or the mobile menu is open (no page jump: scrollbar-gutter keeps the width) */
html.pfw-locked, html.pfw-locked body { overflow: hidden; }

/* ------------------------------------------------------------ 3. Layout */
.pfw-container { width: 100%; max-width: calc(var(--pfw-container-max) + 2 * var(--pfw-gutter)); margin-inline: auto; padding-inline: var(--pfw-gutter); }
.pfw-container-narrow { max-width: calc(760px + 2 * var(--pfw-gutter)); }
.pfw-section { padding-block: var(--pfw-section-y); }
.pfw-section + .pfw-section:not(.pfw-band) { border-top: 1px solid var(--pfw-line); }
.pfw-section-sm { padding-block: clamp(48px, 5vw, 72px); }
.pfw-sec-head { max-width: 720px; margin-bottom: var(--pfw-gap-head); }
.pfw-sec-head-center { margin-inline: auto; text-align: center; }
.pfw-sec-head-center .pfw-lead { margin-inline: auto; text-wrap: balance; }
.pfw-split { display: grid; gap: var(--pfw-split-gap); align-items: start; }
@media (min-width: 1024px) {
  .pfw-split { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
  .pfw-split-even { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .pfw-split .pfw-sticky { position: sticky; top: calc(var(--pfw-header-h) + 32px); }
}
.pfw-stack > * + * { margin-top: 16px; }

/* ------------------------------------------------------------ 4. Type */
.pfw-display { font-family: var(--pfw-font-display); font-weight: var(--pfw-w-display); letter-spacing: var(--pfw-ls-display); line-height: 1.15; text-wrap: balance; color: var(--pfw-ink); }
.pfw-h1 { font-size: var(--pfw-h1); line-height: var(--pfw-lh-h1); letter-spacing: var(--pfw-ls-display); max-width: var(--pfw-measure-h1); }
.pfw-h2 { font-size: var(--pfw-h2); line-height: var(--pfw-lh-h2); letter-spacing: var(--pfw-ls-display); }
.pfw-h3 { font-size: var(--pfw-h3); line-height: var(--pfw-lh-h3); font-weight: 500; letter-spacing: var(--pfw-ls-h3); color: var(--pfw-ink); }
.pfw-h3-sm { font-size: var(--pfw-fs-h3-sm); line-height: 1.4; font-weight: 500; color: var(--pfw-ink); }
.pfw-gold-em { font-style: italic; color: var(--pfw-gold-deep); }
.pfw-lead { font-size: var(--pfw-lead); line-height: var(--pfw-lh-lead); letter-spacing: var(--pfw-ls-text); color: var(--pfw-body); max-width: var(--pfw-measure-lead); }
.pfw-body { font-size: var(--pfw-fs-body); line-height: var(--pfw-lh-body); color: var(--pfw-text); max-width: 64ch; }
.pfw-small { font-size: var(--pfw-fs-small); line-height: 1.55; color: var(--pfw-muted); }
.pfw-eyebrow {
  display: inline-flex; align-items: center; gap: 9px;
  font: 600 var(--pfw-eyebrow)/1.4 var(--pfw-font-sans); letter-spacing: var(--pfw-ls-eyebrow); text-transform: none; color: var(--pfw-muted);
}
.pfw-eyebrow::before { content: ''; flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--pfw-gold); }
/* Section-head rhythm (26 Oct spec): eyebrow, H2, intro, content; gaps are tokens, not per-page px */
.pfw-sec-head > * + :is(.pfw-h2, .pfw-lead) { margin-top: var(--pfw-gap-lead); }
:is(.pfw-eyebrow, .pf-pill) + :is(.pfw-h1, .pfw-h2, .pfw-ent-h2) { margin-top: var(--pfw-gap-eyebrow); }
.pfw-h2 + :is(.pfw-lead, .pfw-faq-sub) { margin-top: var(--pfw-gap-lead); }
.pfw-prose { max-width: 68ch; color: var(--pfw-text); }
.pfw-prose > * + * { margin-top: 1em; }
.pfw-prose h2 { margin-top: 2em; font: var(--pfw-w-display) var(--pfw-h2)/var(--pfw-lh-h2) var(--pfw-font-display); color: var(--pfw-ink); letter-spacing: var(--pfw-ls-display); }
.pfw-prose h3 { margin-top: 1.6em; font-size: var(--pfw-fs-h3); font-weight: 500; color: var(--pfw-ink); }
.pfw-prose ul { padding-left: 1.2em; }
.pfw-prose li + li { margin-top: .4em; }
.pfw-prose li::marker { color: var(--pfw-gold-dark); }
.pfw-prose a { color: var(--pfw-ink); text-decoration-color: var(--pfw-gold); text-underline-offset: 3px; }

/* ------------------------------------------------------------ 5. Buttons and links */
.pfw-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: var(--pfw-btn-h); padding: 0 20px; max-width: 100%;
  border: 1px solid transparent; border-radius: var(--pfw-r-md);
  font: 500 var(--pfw-fs-btn)/1.2 var(--pfw-font-sans); text-decoration: none; text-align: center; cursor: pointer;
  transition: background-color var(--pfw-dur-hover) ease, border-color var(--pfw-dur-hover) ease, color var(--pfw-dur-hover) ease, transform var(--pfw-dur-press) var(--pfw-ease-silk);
}
.pfw-btn:active { transform: scale(.98); }
.pfw-btn:focus-visible { outline-offset: 2px; }
.pfw-btn .pfw-arr { flex: none; transition: transform var(--pfw-dur-arrow) var(--pfw-ease-silk); }
.pfw-btn-primary { background: var(--pfw-gold); color: var(--pfw-ink); box-shadow: var(--pfw-shadow-btn); }
.pfw-btn-secondary { background: var(--pfw-paper); color: var(--pfw-ink); border-color: var(--pfw-line-2); }
.pfw-btn-ink { background: var(--pfw-ink); color: #F7F3E8; }
.pfw-btn-sm { min-height: var(--pfw-btn-h-sm); padding: 0 15px; font-size: .875rem; border-radius: 10px; }
.pfw-btn-block { width: 100%; }
.pfw-actions { display: flex; flex-wrap: wrap; gap: 12px; }
@media (max-width: 39.99rem) { .pfw-actions > .pfw-btn { width: 100%; } }
.pfw-link-cta {
  display: inline-flex; align-items: center; gap: 6px; border-radius: 4px;
  font-weight: 500; color: var(--pfw-ink); text-decoration: none; transition: color var(--pfw-dur-hover) ease;
}
.pfw-link-cta .pfw-arr { transition: transform var(--pfw-dur-arrow) var(--pfw-ease-silk); }
@media (hover: hover) and (pointer: fine) {
  .pfw-btn-primary:hover { background: var(--pfw-gold-dark); }
  .pfw-btn-secondary:hover { border-color: var(--pfw-ink-soft); background: var(--pfw-paper-2); }
  .pfw-btn-ink:hover { background: #3a362f; }
  .pfw-btn:hover .pfw-arr, .pfw-link-cta:hover .pfw-arr { transform: translateX(3px); }
  .pfw-link-cta:hover { color: var(--pfw-gold-deep); }
}

/* ------------------------------------------------------------ 6. Nav (v2, 26 Oct; design notes: components/nav-v2/DESIGN.md)
   .pfx: dark announcement bar, then a floating pill bar (logo left, links centred, one gold CTA right).
   Compact dropdown panels from 1024px (featured card, two-column list, hairline footer row);
   below 1024px a floating sheet with accordion groups and the CTA pinned at the bottom.
   One markup for both layouts. Has its own reduced-motion and forced-colour rules. */
.pfx {
  --pfx-ann-h: 36px;                 /* announcement height; 0 when dismissed (nav.js sets .is-ann-off) */
  --pfx-gap: 12px;                   /* space above the floating pill */
  --pfx-bar-h: 60px;                 /* pill height */
  --pfx-inset: 12px;                 /* pill inset from the screen edges on small screens */
  --pfx-ink-dark: #1c1a16;           /* announcement and featured card */
  --pfx-on-dark: #F7F3E8;
  position: sticky; top: calc(-1 * var(--pfx-ann-h)); z-index: 50;
  font-family: var(--pfw-font-sans);
  pointer-events: none;              /* the transparent area around the pill never blocks the page */
  transition: transform 280ms var(--pfw-ease-silk);
}
.pfx > * { pointer-events: auto; }
.pfx > .pfx-wrap { pointer-events: none; }
.pfx.is-ann-off { --pfx-ann-h: 0px; }
.pfx.is-ann-off .pfx-ann { display: none; }
/* While the mobile sheet is open the page is scroll-locked; pin the header (nav.js sets its top) */
.pfx.is-menu-open { position: fixed; left: 0; right: 0; }
/* Desktop/laptop: the pill sits --pfw-pill-pad outside the shared content edges (see --pfw-container) */
@media (min-width: 1024px) { .pfx { --pfx-inset: max(12px, calc(var(--pfw-gutter) - var(--pfw-pill-pad))); } }

/* ------------------------------------------------ Announcement */
.pfx-ann { height: var(--pfx-ann-h); background: var(--pfx-ink-dark); color: rgba(247,243,232,.72); font-size: .8125rem; line-height: 1; }
.pfx-ann-in { position: relative; display: flex; align-items: center; justify-content: center; height: 100%; padding-inline: 44px; }
.pfx-ann-link {
  display: inline-flex; align-items: center; gap: 10px; min-width: 0; max-width: 100%; height: 28px; padding: 0 6px; border-radius: 6px;
  color: inherit; text-decoration: none; white-space: nowrap;
}
.pfx-ann-dot { flex: none; width: 6px; height: 6px; border-radius: 999px; background: var(--pfw-gold); }
.pfx-ann-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.pfx-ann-text strong { font-weight: 600; color: var(--pfw-gold-light); }
.pfx-ann-go { flex: none; display: inline-flex; align-items: center; gap: 5px; font-weight: 500; color: var(--pfx-on-dark); }
.pfx-ann-go svg { transition: transform 350ms var(--pfw-ease-silk); }
.pfx-ann-x {
  position: absolute; right: 8px; top: 50%; translate: 0 -50%;
  display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px;
  border: 0; border-radius: 8px; background: transparent; color: rgba(247,243,232,.5);
}
.pfx-ann :focus-visible { outline-color: var(--pfw-gold-light); outline-offset: 1px; }
@media (hover: hover) and (pointer: fine) {
  .pfx-ann-link:hover .pfx-ann-go svg { transform: translateX(3px); }
  .pfx-ann-link:hover .pfx-ann-text { color: var(--pfx-on-dark); }
  .pfx-ann-x:hover { color: var(--pfx-on-dark); background: rgba(247,243,232,.08); }
}
@media (max-width: 47.99rem) { .pfx-ann-wide { display: none; } }
@media (min-width: 48rem) { .pfx-ann-narrow { display: none; } }
@media (max-width: 25rem) { .pfx-ann-in { padding-inline: 12px 40px; } .pfx-ann-dot { display: none; } }

/* ------------------------------------------------ Floating pill bar */
.pfx-wrap { padding: var(--pfx-gap) var(--pfx-inset) 0; }
.pfx-bar {
  pointer-events: auto;
  position: relative; isolation: isolate;
  display: flex; align-items: center; gap: 12px;
  width: 100%; max-width: calc(var(--pfw-container-max) + 2 * var(--pfw-pill-pad)); height: var(--pfx-bar-h); margin-inline: auto; padding: 0 8px 0 18px;
  border: 1px solid rgba(34,32,28,.09); border-radius: 18px;
  box-shadow: 0 18px 48px -28px rgba(23,19,11,.4), 0 1px 2px rgba(23,19,11,.04);
  transition: box-shadow 300ms ease, border-color 300ms ease;
}
/* Blur on a pseudo-element: backdrop-filter on the pill itself would trap the fixed mobile sheet. */
.pfx-bar::before {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; border-radius: inherit;
  background: rgba(255,255,255,.82);
  -webkit-backdrop-filter: saturate(150%) blur(16px); backdrop-filter: saturate(150%) blur(16px);
  transition: background-color 300ms ease;
}
.pfx.is-scrolled .pfx-bar, .pfx.is-mega-open .pfx-bar, .pfx.is-menu-open .pfx-bar { border-color: rgba(34,32,28,.11); box-shadow: 0 20px 52px -26px rgba(23,19,11,.5), 0 1px 2px rgba(23,19,11,.05); }
.pfx.is-scrolled .pfx-bar::before, .pfx.is-mega-open .pfx-bar::before, .pfx.is-menu-open .pfx-bar::before { background: rgba(255,255,255,.94); }

.pfx-logo { display: inline-flex; flex: none; align-items: center; gap: 9px; border-radius: 8px; text-decoration: none; }
.pfx-logo img { width: auto; height: 30px; }
.pfx-logo-word { font-size: 1.0625rem; font-weight: 700; letter-spacing: -.01em; color: var(--pfw-ink); white-space: nowrap; }
.pfx-logo-word span { color: var(--pfw-gold-dark); }

.pfx-end { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.pfx-cta { min-height: 42px; padding: 0 16px; border-radius: 12px; font-size: .875rem; white-space: nowrap; }
.pfx-burger {
  display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; flex: none;
  border: 0; border-radius: 12px; background: transparent; color: var(--pfw-ink);
}
.pfx-burger-lines { position: relative; width: 18px; height: 12px; }
.pfx-burger-lines span {
  position: absolute; left: 0; right: 0; height: 2px; border-radius: 2px; background: currentColor;
  transition: transform 260ms var(--pfw-ease-silk), top 260ms var(--pfw-ease-silk);
}
.pfx-burger-lines span:first-child { top: 1px; }
.pfx-burger-lines span:last-child { top: 9px; }
.pfx-burger[aria-expanded="true"] .pfx-burger-lines span:first-child { top: 5px; transform: rotate(45deg); }
.pfx-burger[aria-expanded="true"] .pfx-burger-lines span:last-child { top: 5px; transform: rotate(-45deg); }
@media (max-width: 25.99rem) { .pfx-bar { padding-left: 14px; gap: 6px; } .pfx-logo-word { font-size: 1rem; } .pfx-logo img { height: 28px; } .pfx-cta { padding-inline: 12px; } .pfx-cta .pfw-arr { display: none; } }
@media (max-width: 22.99rem) { .pfx-cta { display: none; } }

/* ------------------------------------------------ Shared menu parts */
.pfx-menu, .pfx-links { margin: 0; padding: 0; list-style: none; }
.pfx-top {
  position: relative; display: inline-flex; align-items: center; gap: 5px; min-height: 38px; padding: 0 12px;
  border: 0; border-radius: 999px; background: transparent;
  font: 500 .875rem/1 var(--pfw-font-sans); color: var(--pfw-ink-soft); text-decoration: none; white-space: nowrap;
  transition: color 300ms ease, background-color 300ms ease;
}
.pfx-top:active { transform: scale(.97); }
.pfx-top-hint, .pfx-row-go { display: none; }
.pfx-caret { flex: none; color: var(--pfw-muted); transition: transform 220ms var(--pfw-ease-silk); }
.pfx-top[aria-expanded="true"] .pfx-caret { transform: rotate(180deg); }
.pfx-label { padding: 14px 12px 6px; font-size: .75rem; font-weight: 500; letter-spacing: .01em; color: var(--pfw-muted); }
.pfx-link {
  display: flex; gap: 12px; align-items: flex-start; padding: 10px 12px; border-radius: 10px;
  text-decoration: none; transition: background-color 200ms ease;
}
.pfx-ic {
  flex: none; display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px;
  border-radius: 8px; border: 1px solid var(--pfw-line-2); background: var(--pfw-paper); color: var(--pfw-ink-soft);
  transition: color 200ms ease, border-color 200ms ease;
}
.pfx-lt { min-width: 0; }
.pfx-t { display: block; font-size: .875rem; font-weight: 600; line-height: 1.35; color: var(--pfw-ink); }
.pfx-d { display: block; margin-top: 2px; font-size: .78125rem; line-height: 1.45; color: var(--pfw-body); }
.pfx-tag {
  display: inline-block; margin-left: 4px; padding: 1px 7px; border-radius: 999px; border: 1px solid var(--pfw-line-2);
  font-size: .6875rem; font-weight: 500; line-height: 1.5; color: var(--pfw-body); vertical-align: 1px;
}
.pfx-link[aria-current="page"] { background: var(--pfw-gold-faint); }
.pfx-link[aria-current="page"] .pfx-ic { color: var(--pfw-gold-deep); border-color: rgba(199,166,75,.45); }
.pfx-link:focus-visible, .pfx-feature:focus-visible { outline-offset: -2px; }

/* Featured card (Platform): the one dark element in the menus */
.pfx-feature {
  display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: 12px;
  background: linear-gradient(135deg, #24211b, var(--pfx-ink-dark) 60%); color: rgba(247,243,232,.7);
  text-decoration: none; box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}
.pfx-feature-ic {
  flex: none; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 999px;
  border: 1px solid rgba(220,193,114,.35); background: radial-gradient(circle at 35% 30%, rgba(220,193,114,.28), rgba(220,193,114,.06)); color: var(--pfw-gold-light);
}
.pfx-feature .pfx-lt { flex: 1; }
.pfx-feature-t { display: block; font-size: .9375rem; font-weight: 600; line-height: 1.35; color: var(--pfx-on-dark); }
.pfx-feature-d { display: block; margin-top: 2px; font-size: .78125rem; line-height: 1.45; }
.pfx-feature-go { flex: none; color: var(--pfx-on-dark); transition: transform 350ms var(--pfw-ease-silk); }
.pfx-feature:focus-visible { outline-color: var(--pfw-gold-deep); outline-offset: 2px; }

/* Hairline footer row: a short line and one gold text link */
.pfx-panel-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 6px 0 0; padding: 12px 12px 4px;
  border-top: 1px solid var(--pfw-line); font-size: .78125rem; color: var(--pfw-body);
}
.pfx-foot-link { display: inline-flex; flex: none; align-items: center; gap: 5px; border-radius: 4px; font-weight: 500; color: var(--pfw-gold-deep); text-decoration: none; }
.pfx-foot-link svg { transition: transform 350ms var(--pfw-ease-silk); }

@media (hover: hover) and (pointer: fine) {
  .pfx-top:hover { color: var(--pfw-ink); background: rgba(34,32,28,.05); }
  .pfx-link:hover { background: var(--pfw-paper-2); }
  .pfx-link:hover .pfx-ic { color: var(--pfw-gold-deep); border-color: rgba(199,166,75,.45); }
  .pfx-feature:hover .pfx-feature-go, .pfx-foot-link:hover svg { transform: translateX(3px); }
}

/* Mobile-only parts are hidden on desktop */
.pfx-sheet-proof, .pfx-sheet-foot { display: none; }

/* ------------------------------------------------ Desktop: 1024px and up */
@media (min-width: 1024px) {
  .pfx-bar { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); }
  .pfx-nav { justify-self: center; }
  .pfx-sheet-body { display: contents; }
  .pfx-menu { display: flex; align-items: center; gap: 2px; }
  .pfx-burger { display: none; }
  .pfx-end { justify-self: end; margin-left: 0; }
  .pfx-top[aria-expanded="true"] { color: var(--pfw-ink); background: rgba(34,32,28,.05); }
  /* Current section: a short gold rule under the label */
  .pfx-item.is-current > .pfx-top { color: var(--pfw-ink); }
  .pfx-item.is-current > .pfx-top::after {
    content: ''; position: absolute; left: 12px; right: 31px; bottom: 2px; height: 2px; border-radius: 2px; background: var(--pfw-gold);
  }
  .pfx-item-link.is-current > .pfx-top::after { right: 12px; }

  /* Each panel is centred under its own trigger in CSS (left: 50% of the item, then pulled back by half
     its width); nav.js only adds --pfx-shift when the panel would come closer than 12px to the pill edge. */
  .pfx-item { position: relative; }
  .pfx-panel {
    position: absolute; top: calc(50% + var(--pfx-bar-h) / 2 + 10px); left: 50%; z-index: 60;
    translate: calc(-50% + var(--pfx-shift, 0px)) 0;
    width: var(--pfx-w); max-width: calc(100vw - 32px); padding: 8px;
    border: 1px solid rgba(34,32,28,.09); border-radius: 16px; background: rgba(255,255,255,.98);
    box-shadow: 0 1px 2px rgba(23,19,11,.05), 0 30px 70px -32px rgba(23,19,11,.42);
    opacity: 0; visibility: hidden; transform: translateY(-6px) scale(.985); transform-origin: top center;
    transition: opacity 160ms ease, transform 240ms var(--pfw-ease-silk), visibility 0s linear 240ms;
  }
  .pfx-panel::before { content: ''; position: absolute; inset: -24px 0 auto; height: 24px; } /* hover bridge across the pill's lower edge */
  .pfx-w-lg { --pfx-w: 600px; } .pfx-w-md { --pfx-w: 540px; } .pfx-w-sm { --pfx-w: 400px; }
  .pfx-item.is-open > .pfx-panel,
  html:not(.pfw-js) .pfx-item:hover > .pfx-panel,
  html:not(.pfw-js) .pfx-item:focus-within > .pfx-panel {
    opacity: 1; visibility: visible; transform: none;
    transition: opacity 160ms ease, transform 240ms var(--pfw-ease-silk), visibility 0s;
  }
  /* Moving from one open menu to the next swaps instantly (no fade-out/fade-in flicker) */
  .pfx.is-instant .pfx-panel { transition: none; }
  .pfx-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 2px 4px; }
  .pfx-scrim { display: none; }
}
@media (min-width: 1024px) and (max-width: 1139px) {
  .pfx-top { padding-inline: 10px; }
  .pfx-item.is-current > .pfx-top::after { left: 10px; right: 29px; }
}

/* ------------------------------------------------ Below 1024px: floating sheet */
@media (max-width: 63.99rem) {
  .pfx.is-hidden:not(.is-menu-open) { transform: translateY(calc(-100% - 8px)); }
  .pfx-scrim {
    position: fixed; inset: 0; z-index: -1; pointer-events: none;
    background: rgba(251,249,244,.86); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
    opacity: 0; visibility: hidden; transition: opacity 200ms ease, visibility 0s linear 200ms;
  }
  .pfx.is-menu-open .pfx-scrim { opacity: 1; visibility: visible; transition: opacity 200ms ease, visibility 0s; }
  .pfx-nav {
    position: fixed; left: var(--pfx-inset); right: var(--pfx-inset); bottom: calc(var(--pfx-inset) + env(safe-area-inset-bottom));
    top: var(--pfx-sheet-top, 80px); z-index: 49;
    display: flex; flex-direction: column; overflow: hidden;
    border: 1px solid rgba(34,32,28,.09); border-radius: 18px; background: var(--pfw-paper);
    box-shadow: 0 24px 60px -28px rgba(23,19,11,.45);
    opacity: 0; visibility: hidden; transform: translateY(-8px) scale(.99); transform-origin: top center;
    transition: opacity 180ms ease, transform 260ms var(--pfw-ease-silk), visibility 0s linear 260ms;
  }
  .pfx.is-menu-open .pfx-nav { opacity: 1; visibility: visible; transform: none; transition: opacity 180ms ease, transform 260ms var(--pfw-ease-silk), visibility 0s; }
  .pfx-sheet-body { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 10px 18px 16px; }

  .pfx-sheet-proof {
    display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 2px 12px; margin: 4px 0 6px; padding: 14px 16px;
    border-radius: 12px; border: 1px solid rgba(199,166,75,.3); background: var(--pfw-gold-faint); color: var(--pfw-body); text-decoration: none;
  }
  .pfx-sheet-proof-num { grid-column: 1; font: 600 1.25rem/1.15 var(--pfw-font-display); color: var(--pfw-gold-deep); }
  .pfx-sheet-proof-t { grid-column: 1; font-size: .8125rem; line-height: 1.45; }
  .pfx-sheet-proof svg { grid-column: 2; grid-row: 1 / span 2; color: var(--pfw-gold-deep); }

  .pfx-item { border-bottom: 1px solid var(--pfw-line); }
  .pfx-item:last-child { border-bottom: 0; }
  .pfx-top { display: flex; justify-content: space-between; width: 100%; min-height: 64px; padding: 0; border-radius: 0; font-size: 1.0625rem; color: var(--pfw-ink); }
  .pfx-top:active { transform: none; }
  .pfx-top:focus-visible { outline-offset: -2px; }
  .pfx-top-l { display: block; text-align: left; }
  .pfx-top-hint { display: block; margin-top: 5px; font-size: .8125rem; font-weight: 400; color: var(--pfw-muted); }
  .pfx-row-go { display: block; flex: none; color: var(--pfw-muted); }
  .pfx-item.is-current > .pfx-top-l, .pfx-item.is-current > .pfx-top { color: var(--pfw-gold-deep); }
  /* Accordion: height 0 to auto (animates where interpolate-size is supported, snaps elsewhere) */
  .pfx-panel { height: 0; overflow: hidden; visibility: hidden; transition: height 280ms var(--pfw-ease-silk), visibility 0s linear 280ms; }
  .pfx-item.is-open > .pfx-panel { height: auto; visibility: visible; padding-bottom: 12px; transition: height 280ms var(--pfw-ease-silk), visibility 0s; }
  .pfx-panel-foot, .pfx-label { display: none; }
  .pfx-feature { margin-bottom: 6px; padding: 12px 14px; }
  .pfx-feature-ic { width: 32px; height: 32px; }
  .pfx-feature-d { display: none; }
  .pfx-link { align-items: center; padding: 9px 10px; margin-inline: -10px; }
  .pfx-d { display: none; }

  .pfx-sheet-foot {
    display: grid; gap: 8px; flex: none; padding: 12px 18px 14px;
    border-top: 1px solid var(--pfw-line); background: var(--pfw-paper);
  }
}
@media (min-width: 40rem) and (max-width: 63.99rem) {
  .pfx-nav { left: auto; width: min(480px, calc(100% - 2 * var(--pfx-inset))); }
  .pfx-sheet-foot { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 63.99rem) and (hover: hover) and (pointer: fine) { .pfx-top:hover { background: transparent; color: var(--pfw-gold-deep); } }

/* ------------------------------------------------ Reduced motion and forced colours */
@media (prefers-reduced-motion: reduce) {
  .pfx, .pfx-panel, .pfx-nav, .pfx-caret, .pfx-burger-lines span, .pfx-feature-go, .pfx-foot-link svg, .pfx-ann-go svg, .pfx-scrim { transition-duration: 0s !important; }
  .pfx .pfx-panel, .pfx.is-menu-open .pfx-nav, .pfx .pfx-nav { transform: none !important; }
}
@media (forced-colors: active) {
  .pfx-bar, .pfx-panel, .pfx-feature, .pfx-sheet-proof, .pfx-nav { border: 1px solid CanvasText; }
  .pfx-item.is-current > .pfx-top::after { background: Highlight; }
}

/* ------------------------------------------------------------ 7. Page hero */
.pfw-page-hero { position: relative; isolation: isolate; padding-block: clamp(28px, 4vw, 48px) clamp(56px, 7vw, 88px); }
.pfw-page-hero-grid { display: grid; gap: clamp(32px, 4vw, 56px); align-items: center; margin-top: clamp(20px, 3vw, 36px); }
/* Two columns that sit together (26 Oct): the copy column hugs its text (up to 600px, its 1920 width), the visual
   takes the rest up to the shared right edge, so there is one tight middle gap instead of a hole between the halves. */
@media (min-width: 1024px) {
  .pfw-page-hero-grid { grid-template-columns: fit-content(600px) minmax(0, 1fr); }
  .pfw-page-hero-grid:has(> :only-child) { grid-template-columns: minmax(0, 1fr); }
}
/* Laptops (27 Oct, 70vw content): the visual keeps close to its 1920 width (about 540px, so it never reflows or grows
   taller) and the copy column takes the rest, at most 42% of the content; the H1 then wraps as it does at 1920.
   1920 itself is unchanged (this rule stops below 1920). */
@media (min-width: 1024px) and (max-width: 1919.98px) {
  .pfw-page-hero-grid { grid-template-columns: fit-content(min(600px, var(--pfw-container) * .42, var(--pfw-container) - 530px)) minmax(0, 1fr); column-gap: min(56px, var(--pfw-container) * .0467); }
}
.pfw-page-hero .pfw-h1 { max-width: 18ch; margin-top: 18px; }
.pfw-page-hero .pfw-lead { margin-top: 18px; max-width: var(--pfw-measure-lead); }
.pfw-page-hero .pfw-actions { margin-top: 28px; }
.pfw-hero-pill {
  padding: 6px 14px 6px 12px; border-radius: 999px; border: 1px solid rgba(199,166,75,.32);
  background: rgba(251,248,239,.9); color: var(--pfw-ink-soft); box-shadow: 0 1px 2px rgba(23,19,11,.04);
}
.pfw-hero-for { margin-top: 18px; font-size: var(--pfw-fs-small); color: var(--pfw-body); }
.pfw-hero-for b { font-weight: 500; color: var(--pfw-ink-soft); }
/* The one visual on the first screen: a framed stage, same as the homepage hero frame */
.pfw-hero-visual {
  position: relative; overflow: hidden; min-height: 280px; border-radius: 24px; padding: clamp(16px, 2.2vw, 28px);
  border: 1px solid rgba(143,114,35,.16); background: linear-gradient(180deg, rgba(255,255,255,.94), rgba(251,248,239,.88));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.95), 0 1px 2px rgba(23,19,11,.04), 0 34px 70px -44px rgba(23,19,11,.32), 0 18px 44px -34px rgba(143,114,35,.32);
}
.pfw-hero-visual::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(rgba(143,114,35,.13) 1px, transparent 1.2px); background-size: 18px 18px;
  -webkit-mask-image: radial-gradient(ellipse 75% 70% at 50% 50%, #000 20%, transparent 90%); mask-image: radial-gradient(ellipse 75% 70% at 50% 50%, #000 20%, transparent 90%);
}
.pfw-hero-visual > * { position: relative; }
/* Phone mock-up (founder, 26 Oct; readability fix 26 Oct evening): the same phone as the homepage "See it work"
   demo. Full size is 328 x 618 (width / height 0.531, the homepage frame) at zoom 1, as on a 1920x1080 screen.
   On shorter screens: 1) zoom the whole phone down, never below 0.9 (13px chat text stays >= 11.7px on screen);
   2) if it still does not fit, keep zoom 0.9 and shorten the frame, width and height together in the same 0.531
   ratio. The chat body is anchored to the bottom like WhatsApp: the latest messages stay in view and older ones
   slide under the top fade. Pages set chat text to 13px inside .pfw-handset.
   Markup: <div class="pfw-handset"><span class="pfw-handset-island"></span><span class="pfw-handset-status">9:41</span>
   <div class="pfw-handset-screen"> chat root .pfw-handset-app > header .pfw-handset-head + body </div></div>.
   Knobs: --pfw-handset-reserve (desktop: screen height kept for nav, crumbs, frame and caption; a page may lower it
   when the phone has no frame around it). */
.pfw-handset {
  --pfw-handset-k: 1;
  --pfw-handset-reserve: 210px;
  position: relative; flex: none; box-sizing: border-box; width: min(328px, 100%); height: auto; min-height: 0; aspect-ratio: 328 / 618;
  margin-inline: auto; padding: 9px;
  zoom: var(--pfw-handset-k);
  border-radius: 48px;
  background: linear-gradient(145deg, #4c4c50 0%, #131315 14%, #5e5e63 32%, #0c0c0e 52%, #4f4f54 72%, #131315 88%, #3c3c40 100%);
  box-shadow: 0 26px 50px -18px rgba(23,19,11,.42), inset 0 0 0 1px rgba(255,255,255,.16), inset 0 1px 2px rgba(255,255,255,.22);
}
.pfw-handset-screen { position: relative; height: 100%; overflow: hidden; border-radius: 39px; background: #ece5dd; box-shadow: inset 0 0 0 1.5px #0b0b0d; }
.pfw-handset-island { position: absolute; top: 17px; left: 50%; z-index: 3; width: 84px; height: 24px; margin-left: -42px; border-radius: 999px; background: #000; }
.pfw-handset-status {
  position: absolute; top: 9px; left: 9px; right: 9px; z-index: 2; height: 40px; padding: 0 26px 0 30px;
  display: flex; align-items: center; justify-content: space-between; pointer-events: none;
  font: 600 11px/1 var(--pfw-font-sans); letter-spacing: .02em; color: #fff; font-variant-numeric: tabular-nums;
}
.pfw-handset-status::after { content: ''; box-sizing: border-box; width: 22px; height: 11px; padding: 1.5px; border: 1.5px solid rgba(255,255,255,.85); border-radius: 3.5px; background: linear-gradient(90deg, #fff 0 72%, transparent 72%) content-box; }
.pfw-handset .pfw-handset-app {
  display: flex; flex-direction: column; width: 100%; max-width: none; height: 100%; margin: 0;
  border: 0; border-radius: 0; box-shadow: none; overflow: hidden;
}
.pfw-handset .pfw-handset-head { flex: none; padding-top: 46px; }
.pfw-handset .pfw-handset-body {
  flex: 1 1 auto; min-height: 0; overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 22px); mask-image: linear-gradient(to bottom, transparent 0, #000 22px);
}
/* A hero stage that holds a phone: tight frame around it so the phone gets the height */
.pfw-hero-visual:has(> .pfw-handset) { display: flex; flex-direction: column; align-items: center; justify-content: center; padding-block: clamp(12px, 1.6svh, 20px) clamp(8px, 1.2svh, 14px); }
.pfw-hero-visual > .pfw-handset + figcaption { margin-top: 8px; }
/* Desktop/laptop: on-screen height = min(618px x k, 100svh - reserve). The calc runs inside the zoomed box, so
   dividing by k gives the on-screen value; the width follows at 0.531 of the height. */
@media (min-width: 1024px) {
  .pfw-handset {
    --pfw-handset-h: clamp(400px, calc((100svh - var(--pfw-handset-reserve)) / var(--pfw-handset-k)), 618px);
    width: calc(var(--pfw-handset-h) * .531); height: var(--pfw-handset-h); aspect-ratio: auto;
  }
}
@media (min-width: 1024px) and (max-height: 827px) { .pfw-handset { --pfw-handset-k: .95; } }
@media (min-width: 1024px) and (max-height: 796px) { .pfw-handset { --pfw-handset-k: .9; } }
.pfw-hero-centered { text-align: center; }
.pfw-hero-centered .pfw-h1, .pfw-hero-centered .pfw-lead { margin-inline: auto; }
.pfw-hero-centered .pfw-actions { justify-content: center; }

/* ------------------------------------------------------------ 8. Answer-first block */
.pfw-answer {
  position: relative; max-width: 820px; margin-inline: auto;
  padding: clamp(22px, 3vw, 32px) clamp(22px, 3vw, 36px);
  border: 1px solid var(--pfw-line); border-radius: var(--pfw-r-lg); background: var(--pfw-paper);
  box-shadow: var(--pfw-shadow-hair);
}
.pfw-answer::before { content: ''; position: absolute; left: -1px; top: 22px; bottom: 22px; width: 3px; border-radius: 0 3px 3px 0; background: linear-gradient(180deg, var(--pfw-gold-light), var(--pfw-gold) 45%, var(--pfw-gold-dark)); }
.pfw-answer-q { font: 500 var(--pfw-fs-eyebrow)/1.4 var(--pfw-font-sans); letter-spacing: .01em; color: var(--pfw-muted); }
.pfw-answer-a { margin-top: 10px; font-size: clamp(1rem, .95rem + .3vw, 1.125rem); line-height: 1.65; color: var(--pfw-ink-soft); text-wrap: pretty; }
.pfw-answer-a strong { font-weight: 600; color: var(--pfw-ink); }
.pfw-answer-facts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; padding: 0; list-style: none; }
.pfw-answer-facts li { padding: 4px 11px; border-radius: 999px; border: 1px solid var(--pfw-gold-tint); background: var(--pfw-gold-faint); font-size: .78125rem; font-weight: 500; color: var(--pfw-gold-deep); }

/* ------------------------------------------------------------ 9. Content sections helpers */
.pfw-list-check { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.pfw-list-check li { position: relative; padding-left: 28px; color: var(--pfw-text); }
.pfw-list-check li::before { content: ''; position: absolute; left: 2px; top: .5em; width: 14px; height: 8px; border-left: 2px solid var(--pfw-gold-dark); border-bottom: 2px solid var(--pfw-gold-dark); transform: rotate(-45deg); }
.pfw-steps { display: grid; gap: 16px; margin: 0; padding: 0; list-style: none; counter-reset: pfw-step; }
.pfw-steps > li { counter-increment: pfw-step; position: relative; padding-left: 44px; }
.pfw-steps > li::before {
  content: counter(pfw-step); position: absolute; left: 0; top: 0;
  display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px;
  border-radius: 999px; border: 1px solid rgba(199,166,75,.35); background: var(--pfw-gold-tint); color: var(--pfw-gold-deep);
  font-size: .8125rem; font-weight: 600;
}
.pfw-todo { padding: 18px 20px; border: 1px dashed rgba(143,114,35,.45); border-radius: var(--pfw-r-md); background: rgba(251,248,239,.7); color: var(--pfw-body); font-size: var(--pfw-fs-small); }

/* ------------------------------------------------------------ 10. Cards and grids */
.pfw-grid { display: grid; gap: var(--pfw-grid-gap); }
@media (min-width: 640px) { .pfw-grid-2, .pfw-grid-3, .pfw-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .pfw-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .pfw-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.pfw-card {
  position: relative; padding: var(--pfw-card-pad);
  border: 1px solid var(--pfw-line); border-radius: var(--pfw-r-lg); background: var(--pfw-paper);
  transition: box-shadow 250ms ease, border-color var(--pfw-dur-hover) ease, background-color var(--pfw-dur-hover) ease;
}
.pfw-card .pfw-h3 { margin-top: 16px; }
.pfw-card p { margin-top: 8px; color: var(--pfw-body); }
.pfw-card-link { display: flex; flex-direction: column; text-decoration: none; }
.pfw-card-link .pfw-link-cta { margin-top: auto; padding-top: 16px; }
@media (hover: hover) and (pointer: fine) {
  .pfw-card-link:hover { border-color: var(--pfw-line-2); box-shadow: 0 1px 2px rgba(23,19,11,.04), 0 16px 36px -20px rgba(23,19,11,.22); }
  .pfw-card-link:hover .pfw-arr { transform: translateX(3px); }
}
.pfw-tile {
  display: inline-flex; flex: none; align-items: center; justify-content: center; width: 44px; height: 44px;
  border-radius: 10px; border: 1px solid rgba(199,166,75,.28); background: var(--pfw-gold-faint); color: var(--pfw-gold-deep);
}
.pfw-band .pfw-tile { background: rgba(255,255,255,.7); }
.pfw-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--pfw-gold-tint); background: var(--pfw-gold-faint); font-size: .78125rem; font-weight: 500; line-height: 1.2; color: var(--pfw-gold-deep); }
.pfw-chip-neutral { color: var(--pfw-body); background: var(--pfw-paper-2); border-color: var(--pfw-line); }
.pfw-stat { font: 600 clamp(1.75rem, 1.4rem + 1.2vw, 2.25rem)/1.1 var(--pfw-font-display); color: var(--pfw-ink); }
.pfw-stat-label { margin-top: 6px; font-size: var(--pfw-fs-small); color: var(--pfw-body); }

/* ------------------------------------------------------------ 11. Page FAQ (<details>) */
.pfw-faq { max-width: 820px; margin-inline: auto; }
.pfw-faq details { border-bottom: 1px solid var(--pfw-line-2); }
.pfw-faq details:first-of-type { border-top: 1px solid var(--pfw-line-2); }
.pfw-faq summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 16px;
  min-height: 56px; padding: 16px 0; font: 500 1rem/1.45 var(--pfw-font-sans); color: var(--pfw-ink);
  transition: color var(--pfw-dur-hover) ease;
}
.pfw-faq summary::-webkit-details-marker { display: none; }
.pfw-faq summary:focus-visible { outline-offset: 2px; border-radius: 6px; }
.pfw-faq-x {
  flex: none; display: flex; width: 28px; height: 28px; align-items: center; justify-content: center;
  border-radius: 999px; border: 1px solid var(--pfw-line-2); color: var(--pfw-ink-soft);
  transition: transform 200ms var(--pfw-ease-silk), background-color 200ms ease;
}
.pfw-faq details[open] .pfw-faq-x { transform: rotate(180deg); background: var(--pfw-paper); }
.pfw-faq-a { padding: 0 44px 20px 0; color: var(--pfw-text); max-width: var(--pfw-measure-faq); }
.pfw-faq-a > * + * { margin-top: .75em; }
.pfw-faq details::details-content { block-size: 0; overflow: clip; transition: block-size 250ms var(--pfw-ease-silk), content-visibility 250ms allow-discrete; }
.pfw-faq details[open]::details-content { block-size: auto; }
.pfw-faq-more { margin-top: 24px; text-align: center; }
/* FAQ split (founder, 26 Oct): an intro column (eyebrow, heading, one line, "All questions") beside ONE single list
   of questions. Opt in with .pfw-faq-split on the wrapper holding .pfw-faq-intro + .pfw-faq. Stacks below 1024px. */
.pfw-faq-split > .pfw-faq-intro { max-width: 560px; margin-inline: 0; text-align: left; }
.pfw-faq-split > .pfw-faq { max-width: 820px; margin-inline: 0; }
.pfw-faq-intro .pfw-faq-sub { margin-top: var(--pfw-gap-lead); font-size: .9375rem; line-height: 1.55; color: var(--pfw-body); max-width: 36ch; }
.pfw-faq-intro .pfw-faq-more { margin-top: 18px; text-align: left; }
@media (min-width: 64rem) {
  .pfw-faq-split { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); column-gap: var(--pfw-split-gap); align-items: start; }
  .pfw-faq-split > .pfw-faq-intro { position: sticky; top: calc(var(--pfw-header-h) + 32px); margin-bottom: 0; }
  .pfw-faq-split > .pfw-faq { max-width: none; }
  .pfw-faq-split > .pfw-faq summary { min-height: 50px; padding-block: 12px; }
}
@media (min-width: 64rem) and (max-height: 760px) { .pfw-faq-split > .pfw-faq summary { min-height: 44px; padding-block: 9px; } .pfw-faq-split > .pfw-faq .pfw-faq-a { padding-bottom: 14px; } }
@media (hover: hover) and (pointer: fine) { .pfw-faq summary:hover { color: var(--pfw-gold-deep); } }
@media (max-width: 39.99rem) { .pfw-faq-a { padding-right: 0; } }

/* ------------------------------------------------------------ 12. Breadcrumb */
.pfw-crumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin: 0; padding: 0; list-style: none; font-size: var(--pfw-fs-small); color: var(--pfw-muted); }
.pfw-crumbs li { display: inline-flex; align-items: center; gap: 8px; }
.pfw-crumbs li + li::before { content: ''; width: 5px; height: 5px; border-top: 1.5px solid currentColor; border-right: 1.5px solid currentColor; transform: rotate(45deg); opacity: .7; }
.pfw-crumbs a { color: var(--pfw-body); text-decoration: none; border-radius: 3px; transition: color 200ms ease; }
.pfw-crumbs [aria-current="page"] { color: var(--pfw-ink-soft); }
@media (hover: hover) and (pointer: fine) { .pfw-crumbs a:hover { color: var(--pfw-gold-deep); text-decoration: underline; text-underline-offset: 3px; } }

/* ------------------------------------------------------------ 13. Section bands */
.pfw-band { background: var(--pfw-band-bg); }
.pfw-band-white { background: var(--pfw-paper); }
.pfw-band .pfw-card { border-color: rgba(143,114,35,.13); }
.pfw-band + .pfw-section, .pfw-section + .pfw-band { border-top: 0; }
/* Closing CTA band: the dark .pff-cta inside the footer block (see 18). Use one per page. */

/* ------------------------------------------------------------ 14. Grid-and-glow background (pfw-bgfx)
   Markup: <div class="pfw-bgfx" aria-hidden="true">…</div> as the first child of a .pfw-has-bgfx section.
   Static, CSS only, decorative. Add .is-light for sections below the hero. */
.pfw-has-bgfx { position: relative; isolation: isolate; }
.pfw-bgfx { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; contain: paint; }
.pfw-bgfx-grid {
  --pfw-bgfx-line: rgba(23,19,11,.05);
  position: absolute; inset: 0;
  background-image: linear-gradient(to right, var(--pfw-bgfx-line) 1px, transparent 1px), linear-gradient(to bottom, var(--pfw-bgfx-line) 1px, transparent 1px);
  background-size: 32px 32px; background-position: center top;
  -webkit-mask-image: radial-gradient(ellipse 85% 80% at 50% 40%, #000 40%, transparent 100%);
  mask-image: radial-gradient(ellipse 85% 80% at 50% 40%, #000 40%, transparent 100%);
}
.pfw-bgfx-glow { position: absolute; border-radius: 9999px; filter: blur(64px); }
.pfw-bgfx-glow.is-top { top: -10rem; left: 50%; width: 50rem; height: 28rem; transform: translateX(-50%); opacity: .55; background: radial-gradient(closest-side, #f2e6c4, transparent); }
.pfw-bgfx-glow.is-left { bottom: -8rem; left: -10rem; width: 30rem; height: 30rem; filter: blur(48px); background: radial-gradient(circle, rgba(199,166,75,.12), transparent 65%); }
.pfw-bgfx-glow.is-right { top: 20%; right: -12rem; width: 34rem; height: 34rem; filter: blur(48px); background: radial-gradient(circle, rgba(199,166,75,.12), transparent 65%); }
.pfw-bgfx.is-light .pfw-bgfx-grid { --pfw-bgfx-line: rgba(23,19,11,.032); -webkit-mask-image: radial-gradient(ellipse 70% 65% at 50% 45%, #000 25%, transparent 100%); mask-image: radial-gradient(ellipse 70% 65% at 50% 45%, #000 25%, transparent 100%); }
.pfw-bgfx.is-light .pfw-bgfx-glow.is-top { opacity: .35; }
.pfw-bgfx.is-light .pfw-bgfx-glow.is-left, .pfw-bgfx.is-light .pfw-bgfx-glow.is-right { opacity: .7; }
@media (max-width: 40rem) {
  .pfw-bgfx-grid { --pfw-bgfx-line: rgba(23,19,11,.04); }
  .pfw-bgfx.is-light .pfw-bgfx-grid { --pfw-bgfx-line: rgba(23,19,11,.026); }
  .pfw-bgfx-glow.is-top { width: 32rem; height: 20rem; }
  .pfw-bgfx-glow.is-left, .pfw-bgfx-glow.is-right { width: 22rem; height: 22rem; }
}

/* ------------------------------------------------------------ 15. Modal (centred) and side panel
   Both are native <dialog> elements opened with showModal(): the page behind is inert,
   Esc closes, focus stays inside. site.js adds click-outside, focus return and scroll restore. */
.pfm {
  margin: auto; padding: 0; border: 0; background: transparent; color: var(--pfw-text);
  width: min(30rem, calc(100% - 32px)); max-width: none; max-height: calc(100dvh - 32px); overflow: visible;
}
.pfm::backdrop { background: rgba(23,19,11,.62); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.pfm[open] { animation: pfm-in 280ms var(--pfw-ease-silk); }
.pfm[open]::backdrop { animation: pfm-fade 200ms ease; }
.pfm-card {
  position: relative; max-height: calc(100dvh - 32px); overflow-y: auto; overscroll-behavior: contain;
  border-radius: var(--pfw-r-xl); background: var(--pfw-paper); box-shadow: var(--pfw-shadow-float);
  padding: clamp(24px, 4vw, 32px);
}
.pfm-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.pfm-title { margin-top: 14px; font: 600 1.5rem/1.2 var(--pfw-font-display); color: var(--pfw-ink); letter-spacing: -.01em; text-wrap: balance; }
.pfm-sub { margin-top: 8px; font-size: .875rem; color: var(--pfw-body); }
.pfm-x {
  flex: none; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px;
  border: 1px solid var(--pfw-line); border-radius: 999px; background: var(--pfw-paper); color: var(--pfw-body);
  transition: color 200ms ease, border-color 200ms ease, background-color 200ms ease;
}
@media (hover: hover) and (pointer: fine) { .pfm-x:hover { color: var(--pfw-ink); border-color: var(--pfw-line-2); background: var(--pfw-paper-2); } }
@keyframes pfm-in { from { opacity: 0; transform: translateY(8px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes pfm-fade { from { opacity: 0; } to { opacity: 1; } }

/* Side panel: slides in from the right on wide screens, a bottom sheet on phones */
.pfm-panel {
  margin: 0 0 0 auto; width: min(460px, 100%); height: 100dvh; max-height: 100dvh;
}
.pfm-panel .pfm-card { height: 100%; max-height: none; border-radius: 0; padding: 28px clamp(22px, 3vw, 32px) calc(28px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; }
.pfm-panel[open] { animation: pfm-slide 320ms var(--pfw-ease-silk); }
@keyframes pfm-slide { from { transform: translateX(32px); opacity: 0; } to { transform: none; opacity: 1; } }
@media (max-width: 39.99rem) {
  .pfm-panel { margin: auto 0 0; width: 100%; height: auto; max-height: calc(100dvh - 24px); }
  .pfm-panel .pfm-card { max-height: calc(100dvh - 24px); border-radius: 20px 20px 0 0; padding-top: 22px; }
  .pfm-panel .pfm-card::before { content: ''; display: block; width: 40px; height: 4px; margin: -8px auto 14px; border-radius: 999px; background: var(--pfw-line-2); }
  .pfm-panel[open] { animation: pfm-up 320ms var(--pfw-ease-silk); }
}
@keyframes pfm-up { from { transform: translateY(40px); opacity: 0; } to { transform: none; opacity: 1; } }

/* ------------------------------------------------------------ 16. Forms */
.pfw-form-grid { display: grid; gap: 16px; margin-top: 24px; }
@media (min-width: 40rem) { .pfw-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } }
.pfw-form-row { display: grid; gap: 16px; }
.pfw-label { display: block; font-size: .875rem; font-weight: 500; color: var(--pfw-ink-soft); }
.pfw-field {
  display: block; width: 100%; min-height: 44px; margin-top: 6px; padding: .7rem .9rem;
  border: 1px solid var(--pfw-line-2); border-radius: var(--pfw-r-md); background: var(--pfw-gold-faint);
  font-size: 1rem; color: var(--pfw-ink); transition: border-color .2s ease, background-color .2s ease, box-shadow .2s ease;
}
.pfw-field:focus { outline: none; border-color: var(--pfw-gold-deep); background: #fff; box-shadow: 0 0 0 3px rgba(199,166,75,.25); }
.pfw-field[aria-invalid="true"] { border-color: var(--pfw-alert); }
.pfw-fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }
.pfw-fieldset legend { padding: 0; font-size: .875rem; font-weight: 500; color: var(--pfw-ink-soft); }
.pfw-choices { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.pfw-choice { position: relative; display: inline-flex; cursor: pointer; }
.pfw-choice input { position: absolute; opacity: 0; pointer-events: none; }
.pfw-choice span { display: inline-flex; align-items: center; min-height: 36px; padding: .45rem .95rem; border-radius: 999px; border: 1px solid var(--pfw-line-2); font-size: .875rem; font-weight: 500; color: var(--pfw-body); transition: border-color .2s ease, background-color .2s ease, color .2s ease; }
.pfw-choice input:checked + span { border-color: var(--pfw-gold); background: var(--pfw-gold-tint); color: var(--pfw-gold-deep); font-weight: 600; }
.pfw-choice input:focus-visible + span { outline: 2px solid var(--pfw-gold-deep); outline-offset: 2px; }
.pfw-form-error { margin-top: 12px; font-size: .875rem; color: var(--pfw-alert); }
.pfw-form-ok { margin-top: 16px; padding: 12px 16px; border-radius: 10px; background: #f2faf3; color: var(--pfw-success); font-size: .875rem; font-weight: 500; text-align: center; }

/* ------------------------------------------------------------ 17. Lead leak calculator (panel and inline) */
.pfw-calc-fields { display: flex; flex-direction: column; gap: 22px; margin-top: 24px; }
.pfw-calc-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; font-size: .875rem; color: var(--pfw-body); }
.pfw-calc-row b { font-size: .9375rem; font-weight: 600; color: var(--pfw-ink); font-variant-numeric: tabular-nums; }
.pfw-range { -webkit-appearance: none; appearance: none; display: block; width: 100%; height: 4px; margin-top: 14px; border-radius: 999px; background: var(--pfw-line-2); outline-offset: 6px; }
.pfw-range::-webkit-slider-thumb { -webkit-appearance: none; width: 22px; height: 22px; border-radius: 999px; background: var(--pfw-gold); border: 2px solid #fff; box-shadow: 0 0 0 1px rgba(143,114,35,.35), 0 1px 4px rgba(23,19,11,.25); cursor: pointer; }
.pfw-range::-moz-range-thumb { width: 22px; height: 22px; border-radius: 999px; background: var(--pfw-gold); border: 2px solid #fff; box-shadow: 0 0 0 1px rgba(143,114,35,.35), 0 1px 4px rgba(23,19,11,.25); cursor: pointer; }
.pfw-calc-out { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 28px; }
.pfw-calc-box { padding: 16px; border-radius: var(--pfw-r-md); border: 1px solid var(--pfw-line); background: var(--pfw-paper-2); min-width: 0; }
.pfw-calc-box.is-gold { border-color: var(--pfw-gold-tint); background: var(--pfw-gold-faint); }
.pfw-calc-k { font-size: .8125rem; color: var(--pfw-muted); }
.pfw-calc-box.is-gold .pfw-calc-k { color: var(--pfw-gold-deep); }
.pfw-calc-v { margin-top: 4px; font: 600 1.5rem/1.2 var(--pfw-font-display); color: var(--pfw-ink); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.pfw-calc-box.is-gold .pfw-calc-v { color: var(--pfw-gold-deep); }
.pfw-calc-unit { font-size: .75rem; font-weight: 500; color: var(--pfw-muted); font-family: var(--pfw-font-sans); }
.pfw-calc-n { font-size: .8125rem; color: var(--pfw-muted); }
.pfw-calc-note { margin-top: 16px; font-size: .8125rem; line-height: 1.55; color: var(--pfw-muted); }
.pfw-calc-end { margin-top: auto; padding-top: 24px; text-align: center; }
.pfw-calc-end p { margin-bottom: 12px; font-size: .875rem; color: var(--pfw-body); }

/* ------------------------------------------------------------ 18. Footer: closing CTA band + footer (.pff)
   Approved design from components/footer/footer.css (24 to 25 Oct), unchanged except
   that it now reads the shell tokens. Footer columns, contact, Talk to us, AI summary and the
   wordmark sweep: see "FOOTER v2" at the end of this file. Markup: components/site-shell/footer.html */
.pff {
  --pff-bg: #17130B;
  --pff-cream: 241 240 236;
  --pff-text: rgb(var(--pff-cream) / .74);
  --pff-text-hi: rgb(var(--pff-cream));
  --pff-text-lo: rgb(var(--pff-cream) / .58);
  --pff-line: rgba(250, 247, 240, .12);
  --pff-gold: var(--pfw-gold, #C7A64B);
  --pff-gold-light: var(--pfw-gold-light, #DCC172);
  --pff-display: var(--pfw-font-display);
  --pff-sans: var(--pfw-font-sans);
  --pff-ease: var(--pfw-ease-silk);
  --pff-pad: 20px;
  position: relative; background: var(--pff-bg); color: var(--pff-text);
  font-family: var(--pff-sans); font-size: 15px; line-height: 1.5; -webkit-font-smoothing: antialiased;
}
@media (min-width: 1024px) { .pff { --pff-pad: 32px; } }
.pff :where(h2, h3, p, ul, address) { margin: 0; padding: 0; }
.pff :where(ul) { list-style: none; }
.pff :where(a) { color: inherit; text-decoration: none; }
.pff :where(address) { font-style: normal; }
.pff-wrap { width: 100%; max-width: calc(var(--pfw-container-max) + 2 * var(--pfw-gutter)); margin-inline: auto; padding-inline: var(--pfw-gutter); } /* same edges as the nav pill and sections */
.pff-sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.pff :focus-visible { outline: 2px solid var(--pff-gold); outline-offset: 3px; border-radius: 4px; }
.pff .pff-btn:focus-visible { border-radius: 12px; outline-offset: 3px; }

.pff-cta { padding-block: 72px 64px; text-align: center; }
@media (min-width: 1024px) { .pff-cta { padding-block: 96px 84px; } }
.pff-cta-inner { display: flex; flex-direction: column; align-items: center; }
.pff-eyebrow { display: inline-flex; align-items: center; gap: 10px; font-size: 13.5px; font-weight: 500; color: var(--pff-text-lo); letter-spacing: .005em; }
.pff-dot { width: 6px; height: 6px; border-radius: 999px; background: var(--pff-gold); }
/* Calm H2 (26 Oct, founder: the 800-weight 58px title was "screaming"): same face, weight and
   tracking as the site's section H2s (.pfw-display.pfw-h2), 28 to 38px; the second line is muted
   cream, like the homepage's "Three AI agents. / Every lead you paid for." */
.pff-cta-title {
  margin-top: 16px; max-width: 30ch; overflow-wrap: break-word;
  font-family: var(--pff-display); font-weight: var(--pfw-w-display, 500); font-size: var(--pfw-h2);
  line-height: var(--pfw-lh-h2); letter-spacing: var(--pfw-ls-display); color: var(--pff-text-hi); text-wrap: balance;
}
.pff-cta-line { display: block; max-width: 100%; }
.pff-cta-line + .pff-cta-line { color: rgb(var(--pff-cream) / .6); }
.pff-cta-sub { margin-top: 16px; font-size: 18px; color: rgb(var(--pff-cream) / .7); }
.pff-cta-actions { margin-top: 28px; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.pff-cta-note { margin-top: 16px; font-size: 13.5px; color: var(--pff-text-lo); }
/* Buttons match the site's .pfw-btn (height, radius, weight, size) */
.pff-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: var(--pfw-btn-h, 44px); padding: 0 20px; border-radius: var(--pfw-r-md, 12px); border: 1px solid transparent;
  font: 500 var(--pfw-fs-btn, .9375rem)/1.2 var(--pff-sans); max-width: 100%; text-align: center; cursor: pointer;
  transition: background-color 200ms ease, border-color 200ms ease, color 200ms ease, transform 140ms var(--pff-ease);
}
.pff-btn:active { transform: scale(.98); }
.pff-btn-gold { background: var(--pff-gold); color: var(--pff-bg); box-shadow: inset 0 1px 0 rgba(255,255,255,.3); }
.pff-btn-line { background: transparent; color: var(--pff-text-hi); border-color: rgba(250,247,240,.22); }

.pff-foot { border-top: 1px solid var(--pff-line); padding-top: 56px; }
@media (min-width: 1024px) { .pff-foot { padding-top: 72px; } }
.pff-logo { display: inline-flex; align-items: center; gap: 10px; border-radius: 6px; }
.pff-logo img { width: 30px; height: 30px; object-fit: contain; }
.pff-logo-word { font-size: 20px; font-weight: 700; letter-spacing: -.01em; color: var(--pff-text-hi); }
.pff-gold { color: var(--pff-gold); }
.pff-trust { margin-top: 22px; display: flex; flex-wrap: wrap; gap: 8px; }
.pff-trust li { display: inline-flex; align-items: center; gap: 7px; padding: 5px 11px; border: 1px solid var(--pff-line); border-radius: 999px; font-size: 12.5px; font-weight: 500; line-height: 1.3; color: rgb(var(--pff-cream) / .78); }
.pff-trust li::before { content: ""; width: 5px; height: 5px; border-radius: 999px; background: var(--pff-gold); flex: none; }
.pff-word-wrap { container-type: inline-size; max-width: calc(var(--pfw-container-max) + 2 * var(--pfw-gutter)); margin: 48px auto 0; padding-inline: var(--pfw-gutter); user-select: none; pointer-events: none; }
/* Brand wordmark kept, calmed (26 Oct): weight 600 like the headings, smaller and fainter */
.pff-word {
  font-family: var(--pff-display); font-weight: 600; font-size: 10vw; font-size: 12cqi;
  line-height: 1.22; letter-spacing: -.02em; white-space: nowrap; text-align: center; padding-bottom: .04em;
  background: linear-gradient(180deg, rgba(241,240,236,.1) 0%, rgba(241,240,236,.025) 92%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.pff-word span { background: linear-gradient(180deg, rgba(199,166,75,.26) 0%, rgba(199,166,75,.05) 92%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.pff-bar { position: relative; display: flex; flex-direction: column; gap: 8px; padding-block: 20px 28px; border-top: 1px solid var(--pff-line); font-size: 12.5px; color: var(--pff-text-lo); }
.pff-bar ul { display: flex; flex-wrap: wrap; gap: 4px 20px; }
.pff-bar a { display: inline-flex; align-items: center; min-height: 32px; color: var(--pff-text-lo); transition: color 200ms ease; }
@media (min-width: 768px) { .pff-bar { flex-direction: row; align-items: center; justify-content: space-between; padding-block: 18px 32px; } .pff-bar a { min-height: 24px; } }
/* Illustration note (founder, 26 Oct): one small muted centred line under the legal row */
.pff-bar { flex-wrap: wrap; }
.pff-illus { flex: 1 0 100%; order: 3; margin: 4px 0 0; text-align: center; font-size: 11.5px; line-height: 1.5; color: var(--pff-text-lo); opacity: .8; }
@media (hover: hover) and (pointer: fine) {
  .pff-bar a:hover { color: var(--pff-text-hi); }
  .pff-btn-gold:hover { background: var(--pff-gold-light); }
  .pff-btn-line:hover { border-color: rgba(250,247,240,.5); background: rgba(250,247,240,.05); }
  .pff-logo:hover .pff-logo-word { color: #fff; }
}

/* ------------------------------------------------------------ 19. Reduced motion: keep colour feedback, drop movement */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .pfw-btn, .pff-btn { transition: background-color 200ms ease, border-color 200ms ease, color 200ms ease; }
  .pfw-btn:active, .pff-btn:active { transform: none; }
  .pfw-btn .pfw-arr, .pfw-link-cta .pfw-arr, .pfw-faq-x { transition: none; }
  .pfw-btn:hover .pfw-arr, .pfw-link-cta:hover .pfw-arr, .pfw-card-link:hover .pfw-arr { transform: none; }
  .pfm[open], .pfm-panel[open], .pfm[open]::backdrop { animation: none; }
  .pfw-faq details::details-content { transition: none; }
  .pfw-skip { transition: none; }
}

/* ------------------------------------------------------------ 20. Forced colours (Windows high contrast) */
@media (forced-colors: active) {
  .pfw-bgfx, .pfw-hero-visual::before { display: none; }
  .pff-word, .pff-word span { color: CanvasText; background: none; opacity: .25; }
  .pff-trust li::before, .pff-dot, .pfw-eyebrow::before { background: CanvasText; }
  .pfm-card { border: 1px solid CanvasText; }
}

/* ------------------------------------------------------------ 21. Cursor trail (owned by site.js section "CURSOR TRAIL")
   Same feel as the live www.propfocus.in cursor: the native cursor stays, a 14-dot gold comet
   trails it with frame-rate independent easing and stretches along fast moves, and a soft gold
   glow drifts behind. Over links, buttons, summaries and cards the glow widens and the dots
   deepen to gold-deep; on press both tighten. Mouse and trackpad only: never on touch, never
   with reduced motion, never in forced colours. pointer-events: none, so it never takes a click.
   It sits in the top layer (popover) so it stays above the nav and an open modal; the glow
   fades back while a modal is open so form text stays crisp. */
.pfw-cur {
  /* popover UA reset */
  position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none;
  margin: 0; padding: 0; border: 0; background: transparent; overflow: visible; color: inherit;
  z-index: 2147483000; pointer-events: none; contain: layout style size;
  display: none;
}
.pfw-cur:popover-open, .pfw-cur.is-on { display: block; }
.pfw-cur::backdrop { display: none; }
.pfw-cur-glow, .pfw-cur-dot { position: absolute; top: 0; left: 0; border-radius: 999px; pointer-events: none; will-change: transform; }
/* The glow element only carries site.js's translate (viewport clientX/Y); its size and scale live on
   ::before. Fix 26 Oct: a CSS `scale` on the same element as the JS transform also scaled the
   translate, so the glow sat at 62% of the pointer position: a stray light patch up and left of the
   cursor that drifted with it. Kept small and faint so it never reads as a light patch. */
.pfw-cur-glow { width: 0; height: 0; opacity: 0; transition: opacity 450ms var(--pfw-ease-silk); }
.pfw-cur-glow::before {
  content: ""; position: absolute; left: -80px; top: -80px; width: 160px; height: 160px; border-radius: 999px;
  background: radial-gradient(circle, rgb(var(--pfw-gold-rgb) / .11), rgb(var(--pfw-gold-rgb) / 0) 66%);
  scale: .6;                                               /* 96px at rest, 160px over interactive things */
  transition: scale 550ms cubic-bezier(.16, 1, .3, 1);
}
.pfw-cur-dot {
  background: var(--pfw-gold); opacity: 0;
  transition: background-color 450ms var(--pfw-ease-silk), box-shadow 450ms var(--pfw-ease-silk), opacity 500ms var(--pfw-ease-silk);
}
.pfw-cur.is-live .pfw-cur-glow { opacity: 1; }
.pfw-cur.is-live .pfw-cur-dot { opacity: var(--op); }
.pfw-cur.is-hover .pfw-cur-glow::before { scale: 1; }
.pfw-cur.is-hover .pfw-cur-dot { background: var(--pfw-gold-deep); box-shadow: 0 0 9px rgb(var(--pfw-gold-rgb) / .85); }
.pfw-cur.is-press .pfw-cur-glow::before { scale: .5; transition-duration: 160ms; }
.pfw-cur.is-hover.is-press .pfw-cur-glow::before { scale: .8; }
/* Typing: the caret matters more than the trail */
.pfw-cur.is-field .pfw-cur-glow { opacity: 0; }
.pfw-cur.is-field .pfw-cur-dot { opacity: calc(var(--op) * .35); }
/* Footer AI logos (founder, 1 Nov): nothing over the mark, or the settled comet and its glow smudge the logo */
.pfw-cur.is-clear .pfw-cur-glow, .pfw-cur.is-clear .pfw-cur-dot { opacity: 0; transition: opacity 60ms linear; }
/* Modal open: keep the trail, fade the glow so the form reads cleanly */
.pfw-cur.is-modal .pfw-cur-glow { opacity: .45; }
@media (prefers-reduced-motion: reduce), (forced-colors: active) { .pfw-cur { display: none !important; } }

/* ------------------------------------------------------------ 22. Chat widget (owned by site.js section "CHAT WIDGET")
   "Ask me anything about Propfocus AI": ink pill bottom right with the live site's blinking gold eyes,
   opening a 400px panel anchored above it (phones under 640px: a bottom sheet). Native <dialog>
   (showModal), so it sits in the top layer with the demo modal and calculator, never beside them;
   the pill hides while any dialog or the mobile menu is open (html.pfw-locked).
   Back to top (page markup on index.html and about.html) is stacked above the pill, same right edge,
   via html.pfw-chat-on, which outranks the page styles without touching page files. */
:root { --pfw-chat-x: calc(20px + env(safe-area-inset-right, 0px)); --pfw-chat-y: calc(20px + env(safe-area-inset-bottom, 0px)); --pfw-chat-h: 50px; }
@media (max-width: 47.99rem) { :root { --pfw-chat-x: calc(16px + env(safe-area-inset-right, 0px)); --pfw-chat-y: calc(16px + env(safe-area-inset-bottom, 0px)); --pfw-chat-h: 52px; } }

html.pfw-chat-on .pfw-to-top { left: auto; right: calc(var(--pfw-chat-x) + 3px); bottom: calc(var(--pfw-chat-y) + var(--pfw-chat-h) + 12px); }
@media (max-width: 47.99rem) { html.pfw-chat-on .pfw-to-top { right: calc(var(--pfw-chat-x) + 4px); } }

/* The nudge bubble sits where back to top stacks: hide back to top while it shows */
html.pfw-chat-on.pfw-chat-nudging .pfw-to-top.pfw-is-visible { opacity: 0; visibility: hidden; pointer-events: none; }

/* Motion (27 Oct "alive" pass): springs and curves shared by the pill, nudge and panel */
:root { --pfw-chat-spring: cubic-bezier(.2, 1.25, .35, 1); --pfw-chat-out: cubic-bezier(.4, 0, 1, 1); }

/* Pill */
.pfw-chat-fab {
  position: fixed; right: var(--pfw-chat-x); bottom: var(--pfw-chat-y); z-index: 45;
  display: inline-flex; align-items: center; gap: 10px; height: var(--pfw-chat-h); padding: 0 18px 0 7px;
  border: 1px solid rgb(var(--pfw-gold-rgb) / .5); border-radius: var(--pfw-r-pill);
  background: var(--pfw-ink); color: #F7F3E8; font: 600 .875rem/1 var(--pfw-font-sans); letter-spacing: .005em;
  box-shadow: 0 14px 34px -12px rgba(23,19,11,.5);
  animation: pfw-chat-fab-in 520ms var(--pfw-chat-spring) 300ms backwards;   /* backwards only: hover lift and the hide fade stay free */
}
/* Breathing glow: a soft gold halo that swells and fades (opacity only) */
.pfw-chat-fab::before {
  content: ''; position: absolute; inset: -1px; border-radius: inherit; pointer-events: none;
  box-shadow: 0 0 0 1px rgb(var(--pfw-gold-rgb) / .55), 0 0 22px 3px rgb(var(--pfw-gold-rgb) / .34);
  opacity: 0; animation: pfw-chat-breathe 4.8s ease-in-out 1.2s infinite;
}
html.pfw-locked .pfw-chat-fab::before { animation-play-state: paused; }
/* Sheen: a light band sweeps across now and then (site.js adds .is-sheen every 9 to 15 s) */
.pfw-chat-fab-sheen { position: absolute; inset: 0; border-radius: inherit; overflow: hidden; pointer-events: none; }
.pfw-chat-fab-sheen::after {
  content: ''; position: absolute; top: 0; bottom: 0; left: 0; width: 45%;
  background: linear-gradient(105deg, transparent, rgba(255,255,255,.2), transparent);
  transform: translateX(-160%) skewX(-16deg);
}
.pfw-chat-fab.is-sheen .pfw-chat-fab-sheen::after { animation: pfw-chat-sheen 1200ms cubic-bezier(.45, 0, .25, 1); }
.pfw-chat-fab-icon { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 11px; background: var(--pfw-gold); }
.pfw-chat-fab.is-waking .pfw-chat-fab-icon { animation: pfw-chat-wake 720ms cubic-bezier(.3, .7, .4, 1); }
@media (hover: hover) and (pointer: fine) { .pfw-chat-fab:hover { transform: translateY(-2px); box-shadow: 0 18px 40px -12px rgba(23,19,11,.55); } }
.pfw-chat-fab:active { transform: scale(.97); }
.pfw-chat-fab:focus-visible { outline: 2px solid var(--pfw-gold-deep); outline-offset: 3px; }
html.pfw-locked .pfw-chat-fab { opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 200ms ease, visibility 0s 200ms; }
@media (max-width: 47.99rem) {
  .pfw-chat-fab { width: var(--pfw-chat-h); padding: 0; justify-content: center; border-radius: 18px; }
  .pfw-chat-fab-icon { width: 40px; height: 40px; border-radius: 13px; }
  .pfw-chat-fab-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}
/* Compact over the hero (html.pfw-chat-compact, set by site.js while the first section is >40% in view):
   icon only (52px), 8px closer to the corner inside the safe-area insets; the panel keeps its place.
   Past the hero the label slides open and the icon gives a small wake-up bounce (.is-waking).
   The label stays in the accessibility tree either way. */
.pfw-chat-fab { transition: transform 200ms var(--pfw-ease-silk), box-shadow 200ms ease, opacity 200ms ease, visibility 0s,
  right 320ms var(--pfw-ease-silk), bottom 320ms var(--pfw-ease-silk), padding 320ms var(--pfw-ease-silk), gap 320ms var(--pfw-ease-silk); }
html.pfw-chat-compact .pfw-chat-fab { right: calc(var(--pfw-chat-x) - 8px); bottom: calc(var(--pfw-chat-y) - 8px); }
@media (min-width: 48rem) {
  .pfw-chat-fab-text { display: inline-block; max-width: 20rem; padding-block: .25em; margin-block: -.25em; overflow: hidden; white-space: nowrap;
    transition: max-width 420ms var(--pfw-ease-silk), opacity 260ms ease 140ms; }
  html.pfw-chat-compact .pfw-chat-fab { gap: 0; padding: 0 7px; }
  html.pfw-chat-compact .pfw-chat-fab-text { max-width: 0; opacity: 0; transition: max-width 320ms var(--pfw-ease-silk), opacity 120ms ease; }
  /* While the nudge speaks the pill folds to its icon too (founder, 1 Nov): one set of eyes, one message, the bubble's tail over the eyes */
  html.pfw-chat-nudging .pfw-chat-fab { gap: 0; padding: 0 7px; }
  html.pfw-chat-nudging .pfw-chat-fab-text { max-width: 0; opacity: 0; transition: max-width 320ms var(--pfw-ease-silk), opacity 120ms ease; }
}
/* Phones (< 48rem): the compact pill would still sit on the hero visual (e.g. the homepage workflow's "Your CRM"
   card at 360px), so while compact it is fully hidden: fades out, not clickable, not focusable (visibility). It fades
   back in once the visitor scrolls past the hero. Desktop keeps the compact icon pill. */
@media (max-width: 47.99rem) {
  html.pfw-chat-compact .pfw-chat-fab:not(:focus-visible) { opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 200ms ease, visibility 0s 200ms; }
}

/* Eyes (live site's assistant mark): gold on ink in the panel, ink on gold in the pill.
   .pfw-chat-look carries the pupil offset (site.js: cursor, glances; CSS: "thinking"), the <i> is the
   pupil (scales up on hover), .pfw-chat-lid drops for a blink (.is-blink, .is-blink2 on .pfw-chat-eyes). */
.pfw-chat-eyes { display: flex; align-items: center; justify-content: center; gap: 4px; }
.pfw-chat-eye { position: relative; width: 8px; height: 10px; border-radius: 50% 50% 48% 48% / 58% 58% 42% 42%; background: var(--pfw-gold); overflow: hidden;
  transition: scale 260ms var(--pfw-chat-spring); }
.pfw-chat-look { position: absolute; inset: 0; }
.pfw-chat-look i { position: absolute; top: 50%; left: 50%; width: 4px; height: 5px; margin: -2.5px 0 0 -2px; border-radius: 50%; background: var(--pfw-ink); transition: scale 220ms var(--pfw-chat-spring); }
.pfw-chat-lid { position: absolute; inset: -1px; background: var(--pfw-ink); transform: translateY(-101%); }
.pfw-chat-eyes.is-blink .pfw-chat-lid { animation: pfw-chat-blink 240ms cubic-bezier(.4, 0, .3, 1); }
.pfw-chat-eyes.is-blink2 .pfw-chat-lid { animation: pfw-chat-blink2 500ms cubic-bezier(.4, 0, .3, 1); }
.pfw-chat-eye + .pfw-chat-eye .pfw-chat-lid { animation-delay: 25ms; }
.pfw-chat-fab .pfw-chat-eye { background: var(--pfw-ink); }
.pfw-chat-fab .pfw-chat-look i, .pfw-chat-fab .pfw-chat-lid { background: var(--pfw-gold); }
@media (max-width: 47.99rem) { .pfw-chat-fab .pfw-chat-eye { width: 9px; height: 12px; } }
/* Hover: eyes widen, pupils dilate */
@media (hover: hover) and (pointer: fine) {
  .pfw-chat-fab:hover .pfw-chat-eye { scale: 1.1 1.16; }
  .pfw-chat-fab:hover .pfw-chat-look i { scale: 1.32; }
}
.pfw-chat-fab:focus-visible .pfw-chat-eye { scale: 1.1 1.16; }
.pfw-chat-fab.is-waking .pfw-chat-eye { scale: 1.12 1.2; }

/* Nudge bubble: above the pill, right-aligned; typing dots first, then the card springs in */
.pfw-chat-nudge { position: fixed; right: var(--pfw-chat-x); bottom: calc(var(--pfw-chat-y) + var(--pfw-chat-h) + 14px); z-index: 46;
  width: max-content; max-width: min(20rem, calc(100vw - 32px)); pointer-events: none; }
.pfw-chat-nudge[hidden] { display: none; }
.pfw-chat-nudge-dots {
  position: absolute; right: 6px; bottom: 0; display: flex; gap: 4px; padding: 12px 14px;
  border: 1px solid rgb(var(--pfw-gold-rgb) / .45); border-radius: 16px 16px 5px 16px; background: var(--pfw-paper);
  box-shadow: 0 14px 30px -14px rgba(23,19,11,.4); transform-origin: 100% 100%;
  animation: pfw-chat-pop 420ms var(--pfw-chat-spring) both;
}
.pfw-chat-nudge-dots span, .pfw-chat-intro-dots span { width: 6px; height: 6px; border-radius: 999px; background: var(--pfw-gold); animation: pfw-chat-dots 1.2s ease-in-out infinite; }
.pfw-chat-nudge-dots span:nth-child(2), .pfw-chat-intro-dots span:nth-child(2) { animation-delay: .15s; }
.pfw-chat-nudge-dots span:nth-child(3), .pfw-chat-intro-dots span:nth-child(3) { animation-delay: .3s; }
.pfw-chat-nudge.is-said .pfw-chat-nudge-dots { animation: pfw-chat-pop-out 160ms ease forwards; }
.pfw-chat-nudge-card {
  position: relative; display: flex; align-items: flex-start; gap: 2px; padding: 10px 6px 10px 14px;
  border: 1px solid rgb(var(--pfw-gold-rgb) / .45); border-radius: 18px 18px 6px 18px; background: var(--pfw-paper);
  box-shadow: 0 20px 44px -18px rgba(23,19,11,.48); transform-origin: 100% 100%;
  visibility: hidden; opacity: 0; pointer-events: auto;
}
.pfw-chat-nudge.is-said .pfw-chat-nudge-card { visibility: visible; opacity: 1; animation: pfw-chat-pop 520ms var(--pfw-chat-spring) 60ms both; }
.pfw-chat-nudge.is-leaving .pfw-chat-nudge-card, .pfw-chat-nudge.is-leaving .pfw-chat-nudge-dots { animation: pfw-chat-pop-out 220ms var(--pfw-chat-out) forwards; }
.pfw-chat-nudge-open { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 0; border: 0; background: transparent; text-align: left; color: var(--pfw-ink); cursor: pointer; }
.pfw-chat-nudge-open:focus-visible, .pfw-chat-nudge-x:focus-visible { outline: 2px solid var(--pfw-gold-deep); outline-offset: 2px; border-radius: 10px; }
.pfw-chat-nudge-text { font-size: .84375rem; font-weight: 500; line-height: 1.4; color: var(--pfw-ink); text-wrap: pretty; }
.pfw-chat-nudge-x { flex: none; display: flex; align-items: center; justify-content: center; width: 26px; height: 26px; margin: -4px 0 0; border: 0; border-radius: 999px; background: transparent; color: var(--pfw-muted); transition: background-color 150ms ease, color 150ms ease; }
@media (hover: hover) and (pointer: fine) { .pfw-chat-nudge-x:hover { background: rgba(23,19,11,.06); color: var(--pfw-ink); } .pfw-chat-nudge-card:hover { border-color: var(--pfw-gold); } }

/* Panel */
.pfw-chat {
  position: fixed; inset: auto var(--pfw-chat-x) var(--pfw-chat-y) auto; margin: 0; padding: 0; border: 0; background: transparent;
  width: min(400px, calc(100vw - 32px)); height: min(600px, calc(100dvh - 2 * var(--pfw-chat-y) - 8px)); max-width: none; max-height: none;
  overflow: visible; color: var(--pfw-text); transform-origin: 100% 100%;
}
.pfw-chat::backdrop { background: rgba(23,19,11,.22); }
.pfw-chat[open] { animation: pfw-chat-spring-in 560ms var(--pfw-chat-spring); }
.pfw-chat[open]::backdrop { animation: pfm-fade 220ms ease; }
.pfw-chat.is-closing { animation: pfw-chat-spring-out 190ms var(--pfw-chat-out) forwards; pointer-events: none; }
.pfw-chat.is-closing::backdrop { animation: pfw-chat-fade-out 190ms ease forwards; }
.pfw-chat-card {
  display: flex; flex-direction: column; height: 100%; overflow: hidden;
  border: 1px solid var(--pfw-line-2); border-radius: 20px; background: var(--pfw-paper-2);
  box-shadow: 0 1px 0 rgba(23,19,11,.04), 0 30px 70px -24px rgba(23,19,11,.45);
}
.pfw-chat-head { position: relative; flex: none; display: flex; align-items: center; gap: 12px; padding: 14px 14px 14px 16px; background: var(--pfw-ink); color: #F7F3E8; }
.pfw-chat-head::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: linear-gradient(90deg, transparent, rgb(var(--pfw-gold-rgb) / .7), transparent); }
.pfw-chat-avatar { flex: none; display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 12px; background: linear-gradient(150deg, #2c2519, var(--pfw-ink)); box-shadow: inset 0 0 0 1px rgb(var(--pfw-gold-rgb) / .45); }
/* Header eyes: glance down at the pill as the panel opens, "think" (up and sideways) while an answer loads,
   read along (a small left-right sweep) while it streams */
.pfw-chat[open] .pfw-chat-avatar .pfw-chat-look { animation: pfw-chat-look-in 900ms cubic-bezier(.5, 0, .2, 1) 120ms backwards; }
.pfw-chat.is-thinking .pfw-chat-avatar .pfw-chat-look { animation: pfw-chat-think 2.6s cubic-bezier(.6, 0, .25, 1) infinite; }
.pfw-chat.is-talking .pfw-chat-avatar .pfw-chat-look { animation: pfw-chat-read 1.5s ease-in-out infinite; }
.pfw-chat.is-thinking .pfw-chat-avatar .pfw-chat-eye { scale: 1 .86; }
.pfw-chat-head-text { flex: 1; min-width: 0; }
.pfw-chat-title { font: 600 1.0625rem/1.2 var(--pfw-font-display); letter-spacing: -.01em; color: #F7F3E8; }
.pfw-chat-sub { display: flex; align-items: center; gap: 7px; margin-top: 3px; font-size: .75rem; line-height: 1.2; color: rgba(247,243,232,.68); }
.pfw-chat-sub b { font-weight: 600; color: var(--pfw-gold-light); }
.pfw-chat-dot { position: relative; width: 7px; height: 7px; border-radius: 999px; background: var(--pfw-gold); }
.pfw-chat-dot::after { content: ''; position: absolute; inset: -4px; border: 1px solid var(--pfw-gold); border-radius: 999px; opacity: 0; animation: pfw-chat-ping 2.4s cubic-bezier(0,0,.2,1) infinite; }
.pfw-chat-x { flex: none; display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border: 0; border-radius: 999px; background: transparent; color: rgba(247,243,232,.72); transition: background-color 150ms ease, color 150ms ease; }
@media (hover: hover) and (pointer: fine) { .pfw-chat-x:hover { background: rgba(247,243,232,.12); color: #F7F3E8; } }
.pfw-chat-x:focus-visible { outline-color: var(--pfw-gold); outline-offset: 1px; }

.pfw-chat-body { flex: 1; min-height: 0; display: flex; flex-direction: column; background: radial-gradient(28rem 12rem at 50% 0%, rgb(var(--pfw-gold-rgb) / .08), transparent) var(--pfw-paper-2); }
.pfw-chat-welcome { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 18px 18px 12px; }
.pfw-chat-hello { font: 600 1.25rem/1.25 var(--pfw-font-display); letter-spacing: -.01em; color: var(--pfw-ink); text-wrap: balance; }
.pfw-chat-intro-wrap { position: relative; margin-top: 8px; }
.pfw-chat-intro { font-size: .84375rem; line-height: 1.55; color: var(--pfw-body); }
/* First-open intro (site.js): dots, then the words appear, then the cards stagger in */
.pfw-chat-intro-dots { position: absolute; top: 2px; left: 0; display: none; gap: 4px; padding: 10px 12px; border: 1px solid var(--pfw-line); border-radius: 14px 14px 14px 5px; background: var(--pfw-paper); }
.pfw-chat-welcome.is-intro:not(.is-typing) .pfw-chat-intro-dots { display: flex; animation: pfw-chat-pop 380ms var(--pfw-chat-spring) 180ms backwards; }
.pfw-chat-welcome.is-intro .pfw-chat-w { opacity: 0; }
.pfw-chat-welcome.is-intro .pfw-chat-w.is-on { opacity: 1; transition: opacity 260ms ease; }
.pfw-chat-welcome.is-intro .pfw-chat-card-q { opacity: 0; pointer-events: none; }
.pfw-chat-welcome.is-cards .pfw-chat-card-q { opacity: 1; pointer-events: auto; animation: pfw-chat-in 460ms var(--pfw-chat-spring) calc(var(--i, 0) * 70ms) backwards; }
.pfw-chat-cards { display: grid; gap: 8px; margin-top: 14px; }
.pfw-chat-card-q {
  position: relative; display: flex; flex-direction: column; gap: 2px; width: 100%; padding: 9px 36px 9px 14px; text-align: left;
  border: 1px solid var(--pfw-line-2); border-radius: 12px; background: var(--pfw-paper);
  transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms var(--pfw-ease-silk);
}
.pfw-chat-q { font-size: .875rem; font-weight: 600; line-height: 1.35; color: var(--pfw-ink); }
.pfw-chat-hint { font-size: .78125rem; line-height: 1.35; color: var(--pfw-body); }
.pfw-chat-card-q svg { position: absolute; top: 50%; right: 14px; margin-top: -7px; color: var(--pfw-gold-deep); opacity: .55; transition: opacity 180ms ease, transform 180ms var(--pfw-ease-silk); }
@media (hover: hover) and (pointer: fine) {
  .pfw-chat-card-q:hover { border-color: var(--pfw-gold); box-shadow: 0 10px 22px -14px rgba(23,19,11,.35); transform: translateY(-1px); }
  .pfw-chat-card-q:hover svg { opacity: 1; transform: translateX(2px); }
}

.pfw-chat-log { position: relative; flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; gap: 10px; padding: 18px 16px; scrollbar-width: thin; scrollbar-color: var(--pfw-line-2) transparent; }
.pfw-chat-msg { max-width: 88%; padding: 10px 14px; border-radius: 16px; font-size: .875rem; line-height: 1.6; }
.pfw-chat-msg p { white-space: pre-line; overflow-wrap: anywhere; }
.pfw-chat-msg.is-bot { align-self: flex-start; border: 1px solid var(--pfw-line); border-bottom-left-radius: 5px; background: var(--pfw-paper); color: var(--pfw-text); box-shadow: 0 4px 14px -8px rgba(23,19,11,.2);
  transform-origin: 0 100%; animation: pfw-chat-msg-bot 380ms var(--pfw-chat-spring); }
.pfw-chat-msg.is-user { align-self: flex-end; border-bottom-right-radius: 5px; background: linear-gradient(135deg, var(--pfw-gold-light), var(--pfw-gold)); color: var(--pfw-ink); font-weight: 500;
  transform-origin: 100% 100%; animation: pfw-chat-msg-user 420ms var(--pfw-chat-spring); }
/* Streaming caret: a thin gold bar after the newest word, removed when the answer is complete */
.pfw-chat-caret { display: inline-block; width: 2px; height: 1.05em; margin-left: 2px; vertical-align: -.17em; border-radius: 1px; background: var(--pfw-gold-deep); animation: pfw-chat-caret 900ms steps(1, end) infinite; }
.pfw-chat-ctas { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.pfw-chat-ctas[hidden] { display: none; }
.pfw-chat-ctas.is-in > * { animation: pfw-chat-in 420ms var(--pfw-chat-spring) backwards; }
.pfw-chat-ctas.is-in > :nth-child(2) { animation-delay: 70ms; }
.pfw-chat-ctas.is-in > :nth-child(3) { animation-delay: 140ms; }
.pfw-chat-cta {
  display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 0 14px; border: 1px solid var(--pfw-gold); border-radius: 999px;
  background: var(--pfw-gold); color: var(--pfw-ink); font-size: .8125rem; font-weight: 600; text-decoration: none;
  transition: background-color 180ms ease, border-color 180ms ease;
}
.pfw-chat-cta.is-ghost { background: transparent; border-color: rgb(var(--pfw-gold-rgb) / .6); }
@media (hover: hover) and (pointer: fine) { .pfw-chat-cta:hover { background: var(--pfw-gold-dark); border-color: var(--pfw-gold-dark); } .pfw-chat-cta.is-ghost:hover { background: var(--pfw-gold-tint); border-color: var(--pfw-gold); } }
.pfw-chat-typing { align-self: flex-start; display: flex; gap: 4px; padding: 13px 14px; border: 1px solid var(--pfw-line); border-radius: 16px 16px 16px 5px; background: var(--pfw-paper);
  transform-origin: 0 100%; animation: pfw-chat-pop 380ms var(--pfw-chat-spring) 120ms backwards; }
.pfw-chat-typing span { width: 6px; height: 6px; border-radius: 999px; background: var(--pfw-gold); animation: pfw-chat-dots 1.2s ease-in-out infinite; }
.pfw-chat-typing span:nth-child(2) { animation-delay: .15s; }
.pfw-chat-typing span:nth-child(3) { animation-delay: .3s; }

.pfw-chat-form { flex: none; padding: 10px 14px 12px; border-top: 1px solid var(--pfw-line); background: var(--pfw-paper); }
.pfw-chat-chips { display: flex; gap: 6px; margin: 0 -14px 10px; padding: 0 14px; overflow-x: auto; scrollbar-width: none; }
.pfw-chat-chips::-webkit-scrollbar { display: none; }
.pfw-chat-chip { flex: none; min-height: 32px; padding: 0 12px; border: 1px solid var(--pfw-line-2); border-radius: 999px; background: var(--pfw-paper-2); color: var(--pfw-ink); font-size: .78125rem; font-weight: 600; white-space: nowrap; transition: border-color 150ms ease, background-color 150ms ease;
  animation: pfw-chat-in 440ms var(--pfw-chat-spring) calc(80ms + var(--i, 0) * 60ms) backwards; }
@media (hover: hover) and (pointer: fine) { .pfw-chat-chip:hover { border-color: var(--pfw-gold); background: var(--pfw-gold-faint); } }
.pfw-chat-test { margin-bottom: 8px; padding: 6px 10px; border-radius: 8px; background: var(--pfw-gold-tint); font-size: .75rem; line-height: 1.4; color: var(--pfw-ink-soft); }
.pfw-chat-test b { font-weight: 600; color: var(--pfw-gold-deep); }
.pfw-chat-row { display: flex; align-items: center; gap: 8px; }
.pfw-chat-input {
  flex: 1; min-width: 0; height: 44px; padding: 0 16px; border: 1px solid var(--pfw-line-2); border-radius: 999px;
  background: var(--pfw-paper); color: var(--pfw-ink); font-size: .9375rem; transition: border-color 150ms ease, box-shadow 150ms ease;
}
.pfw-chat-input::placeholder { color: var(--pfw-muted); }
.pfw-chat-input:focus { outline: none; border-color: var(--pfw-gold); box-shadow: 0 0 0 3px rgb(var(--pfw-gold-rgb) / .22); }
.pfw-chat-send { flex: none; display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 0; border-radius: 999px; background: var(--pfw-gold); color: var(--pfw-ink); box-shadow: var(--pfw-shadow-btn); transition: background-color 150ms ease, transform 150ms ease, opacity 150ms ease; }
@media (hover: hover) and (pointer: fine) { .pfw-chat-send:hover { background: var(--pfw-gold-dark); } }
.pfw-chat-send:active { transform: scale(.95); }
.pfw-chat-send:disabled { opacity: .5; cursor: not-allowed; transform: none; }
.pfw-chat-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 8px; }
.pfw-chat-foot p { font-size: .75rem; line-height: 1.35; color: var(--pfw-body); }
.pfw-chat-demo { flex: none; display: inline-flex; align-items: center; min-height: 32px; padding: 0 12px; border-radius: 999px; background: var(--pfw-ink); color: #F7F3E8; font-size: .78125rem; font-weight: 600; text-decoration: none; transition: background-color 150ms ease; }
@media (hover: hover) and (pointer: fine) { .pfw-chat-demo:hover { background: #3a352c; } }

/* Phones: bottom sheet (slides up and down, no overshoot so the sheet never lifts off the edge) */
@media (max-width: 39.99rem) {
  .pfw-chat { inset: auto 0 0 0; width: 100%; height: min(680px, calc(100dvh - 24px)); }
  .pfw-chat[open] { animation: pfm-up 380ms cubic-bezier(.16, 1, .3, 1); }
  .pfw-chat.is-closing { animation: pfw-chat-sheet-out 220ms var(--pfw-chat-out) forwards; }
  .pfw-chat-card { border-radius: 20px 20px 0 0; border-bottom: 0; }
  .pfw-chat-head { padding-top: 20px; }
  .pfw-chat-head::before { content: ''; position: absolute; top: 7px; left: 50%; width: 36px; height: 4px; margin-left: -18px; border-radius: 999px; background: rgba(247,243,232,.28); }
  .pfw-chat-form { padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px)); }
  .pfw-chat-input { font-size: 1rem; }                 /* 16px: no zoom on iOS focus */
}

@keyframes pfw-chat-fab-in { 0% { opacity: 0; transform: translateY(12px) scale(.9); } 100% { opacity: 1; transform: none; } }
@keyframes pfw-chat-breathe { 0%, 100% { opacity: 0; } 50% { opacity: .75; } }
@keyframes pfw-chat-sheen { from { transform: translateX(-160%) skewX(-16deg); } to { transform: translateX(330%) skewX(-16deg); } }
@keyframes pfw-chat-wake { 0% { transform: none; } 28% { transform: translateY(-3px) scale(1.12); } 52% { transform: translateY(1px) scale(.95); } 74% { transform: translateY(-1px) scale(1.03); } 100% { transform: none; } }
@keyframes pfw-chat-blink { 0%, 100% { transform: translateY(-101%); } 45%, 55% { transform: translateY(0); } }
@keyframes pfw-chat-blink2 { 0%, 100%, 50% { transform: translateY(-101%); } 22%, 27%, 72%, 77% { transform: translateY(0); } }
@keyframes pfw-chat-look-in { 0%, 25% { transform: translate(1.6px, 2px); } 100% { transform: none; } }
@keyframes pfw-chat-think { 0%, 100% { transform: none; } 12%, 40% { transform: translate(-1.5px, -1.9px); } 52%, 82% { transform: translate(1.5px, -1.7px); } }
@keyframes pfw-chat-read { 0%, 100% { transform: translate(-1.2px, .9px); } 50% { transform: translate(1.2px, .9px); } }
@keyframes pfw-chat-pop { from { opacity: 0; transform: translateY(8px) scale(.8); } to { opacity: 1; transform: none; } }
@keyframes pfw-chat-pop-out { to { opacity: 0; transform: translateY(6px) scale(.92); } }
@keyframes pfw-chat-spring-in { from { opacity: 0; transform: translateY(16px) scale(.88); } 45% { opacity: 1; } to { opacity: 1; transform: none; } }
@keyframes pfw-chat-spring-out { to { opacity: 0; transform: translateY(10px) scale(.94); } }
@keyframes pfw-chat-sheet-out { to { transform: translateY(100%); } }
@keyframes pfw-chat-fade-out { to { opacity: 0; } }
@keyframes pfw-chat-in { from { opacity: 0; transform: translateY(8px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes pfw-chat-msg-bot { from { opacity: 0; transform: translate(-4px, 8px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes pfw-chat-msg-user { from { opacity: 0; transform: translate(8px, 8px) scale(.92); } to { opacity: 1; transform: none; } }
@keyframes pfw-chat-caret { 0%, 55% { opacity: 1; } 56%, 100% { opacity: 0; } }
@keyframes pfw-chat-dots { 0%, 60%, 100% { opacity: .3; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } }
@keyframes pfw-chat-ping { 0% { opacity: .9; transform: scale(.6); } 70%, 100% { opacity: 0; transform: scale(1.8); } }

@media (prefers-reduced-motion: reduce) {
  .pfw-chat-fab, .pfw-chat-fab::before, .pfw-chat-fab-icon, .pfw-chat[open], .pfw-chat[open]::backdrop, .pfw-chat.is-closing, .pfw-chat.is-closing::backdrop,
  .pfw-chat-msg, .pfw-chat-lid, .pfw-chat-look, .pfw-chat-dot::after, .pfw-chat-typing, .pfw-chat-chip, .pfw-chat-card-q, .pfw-chat-ctas > *,
  .pfw-chat-nudge-dots, .pfw-chat-nudge-card, .pfw-chat-caret, .pfw-chat-intro-dots { animation: none !important; }
  .pfw-chat-fab::before, .pfw-chat-fab-sheen, .pfw-chat-caret, .pfw-chat-nudge-dots { display: none; }
  .pfw-chat-nudge.is-said .pfw-chat-nudge-card { visibility: visible; opacity: 1; }
  .pfw-chat-fab { transition: opacity 200ms ease, visibility 0s; }
  .pfw-chat-fab-text, html.pfw-chat-compact .pfw-chat-fab-text, html.pfw-chat-nudging .pfw-chat-fab-text { transition: none; }
  .pfw-chat-eye, .pfw-chat-look i { transition: none; scale: none !important; }
  .pfw-chat-fab:hover, .pfw-chat-fab:active, .pfw-chat-card-q:hover, .pfw-chat-send:active { transform: none; }
  .pfw-chat-typing span, .pfw-chat-intro-dots span { animation: none; opacity: .55; }
}
@media (forced-colors: active) {
  .pfw-chat-card, .pfw-chat-fab, .pfw-chat-nudge-card { border: 1px solid CanvasText; }
  .pfw-chat-eye, .pfw-chat-look i, .pfw-chat-lid, .pfw-chat-dot { forced-color-adjust: none; }
  .pfw-chat-fab::before, .pfw-chat-fab-sheen { display: none; }
}
@media print { .pfw-chat-fab, .pfw-chat { display: none !important; } }

/* =====================================================================
   CASE STUDY LEAD MAGNET (behaviour: site.js "CASE STUDY LEAD MAGNET", classes .pfw-cg* and .pfw-cp*)
   .pfw-cg  gated teaser dialog: headline numbers + key points, then WhatsApp number, code, unlocked links
   .pfw-cp  homepage promo popup for the newest case study
   Both build on .pfm (section 15): native <dialog>, backdrop, rise-in. Phones: single column, card scrolls.
   ===================================================================== */
.pfw-cg { width: min(56rem, calc(100% - 32px)); }
.pfw-cg-card { padding: clamp(22px, 3vw, 32px); }
.pfw-cg-x, .pfw-cp-x { position: absolute; top: 14px; right: 14px; z-index: 1; }
.pfw-cg-grid { display: grid; gap: clamp(20px, 3vw, 36px); }
@media (min-width: 48rem) { .pfw-cg-grid { grid-template-columns: 1.08fr 1fr; align-items: start; } }
.pfw-cg-teaser { padding-right: 48px; }
@media (min-width: 48rem) { .pfw-cg-teaser { padding-right: 0; } .pfw-cg-side { padding-top: 44px; } }
.pfw-cg-title { margin-top: 12px; font: var(--pfw-w-display) clamp(1.5rem, 1.2vw + 1.05rem, 1.875rem)/1.14 var(--pfw-font-display); letter-spacing: var(--pfw-ls-display); color: var(--pfw-ink); text-wrap: balance; }
.pfw-cg-ba { display: grid; grid-template-columns: 1fr auto 1fr; align-items: stretch; gap: 10px; margin-top: 18px; }
.pfw-cg-col { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; border: 1px solid var(--pfw-line); border-radius: var(--pfw-r-md); background: var(--pfw-paper-2); }
.pfw-cg-col b { font: 600 clamp(1.625rem, 1.4vw + 1.1rem, 2.125rem)/1.05 var(--pfw-font-display); color: var(--pfw-ink); font-variant-numeric: tabular-nums; }
.pfw-cg-col > span:last-child { font-size: .8125rem; line-height: 1.4; color: var(--pfw-body); }
.pfw-cg-col.is-after { border-color: rgba(var(--pfw-gold-rgb) / .55); background: var(--pfw-gold-faint); }
.pfw-cg-col.is-after b { color: var(--pfw-gold-deep); }
.pfw-cg-to { align-self: center; width: 18px; height: 2px; background: var(--pfw-gold); position: relative; }
.pfw-cg-to::after { content: ''; position: absolute; right: -1px; top: -4px; width: 8px; height: 8px; border-top: 2px solid var(--pfw-gold); border-right: 2px solid var(--pfw-gold); transform: rotate(45deg); }
.pfw-cg-k { font-size: .75rem; font-weight: 600; letter-spacing: .02em; color: var(--pfw-muted); }
.pfw-cg-bars-k { margin-top: 16px; }
.pfw-cg-bars { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 8px; }
.pfw-cg-bars li { display: grid; grid-template-columns: 7.5rem 1fr 3rem; align-items: center; gap: 10px; font-size: .8125rem; color: var(--pfw-body); }
.pfw-cg-bars b { text-align: right; font-weight: 600; color: var(--pfw-ink); font-variant-numeric: tabular-nums; }
.pfw-cg-track { height: 8px; border-radius: 999px; background: var(--pfw-line); overflow: hidden; }
.pfw-cg-fill { display: block; height: 100%; width: 100%; border-radius: inherit; background: var(--pfw-line-2); transform: scaleX(var(--w, 0)); transform-origin: left; }
.pfw-cg-bars li.is-hi .pfw-cg-fill { background: var(--pfw-gold); }
.pfw-cg-bars li.is-hi b { color: var(--pfw-gold-deep); }
.pfw-cg[open] .pfw-cg-fill { animation: pfw-cg-grow 700ms var(--pfw-ease-silk) both 120ms; }
@keyframes pfw-cg-grow { from { transform: scaleX(0); } }
.pfw-cg-note { margin-top: 12px; font-size: .75rem; color: var(--pfw-muted); }
.pfw-cg-points { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.pfw-cg-points li { position: relative; padding-left: 22px; font-size: .9375rem; line-height: 1.45; color: var(--pfw-text); }
.pfw-cg-points li::before { content: ''; position: absolute; left: 2px; top: .5em; width: 9px; height: 5px; border-left: 2px solid var(--pfw-gold-deep); border-bottom: 2px solid var(--pfw-gold-deep); transform: rotate(-45deg); }
.pfw-cg-gate { margin-top: 18px; padding: 18px; border: 1px solid var(--pfw-line-2); border-radius: var(--pfw-r-lg); background: var(--pfw-paper-2); }
.pfw-cg-gate.is-done { border-color: rgba(var(--pfw-gold-rgb) / .55); background: var(--pfw-gold-faint); }
.pfw-cg-gate-t { display: flex; align-items: center; gap: 10px; font: 600 1.125rem/1.25 var(--pfw-font-display); color: var(--pfw-ink); }
.pfw-cg-gate-t:focus { outline: none; }
.pfw-cg-lock { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 999px; background: var(--pfw-gold-tint); color: var(--pfw-gold-deep); }
.pfw-cg-lock.is-open { background: var(--pfw-gold); color: var(--pfw-ink); }
.pfw-cg-gate-s { margin: 6px 0 12px; font-size: .875rem; line-height: 1.5; color: var(--pfw-body); }
.pfw-cg-gate-s b { color: var(--pfw-ink); font-weight: 600; white-space: nowrap; }
.pfw-cg-gate .pfw-field { background: #fff; }
.pfw-cg-btn { margin-top: 12px; }
.pfw-cg-gate .pfw-otp-resend { margin-top: 10px; }
.pfw-cg-actions { display: grid; gap: 10px; }
.pfw-cg-actions [hidden] { display: none; }
.pfw-cg-demo { justify-self: center; margin-top: 2px; font-size: .875rem; font-weight: 500; color: var(--pfw-gold-deep); text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 47.99rem) {
  .pfw-cg-bars li { grid-template-columns: 6.5rem 1fr 2.75rem; }
  .pfw-cg-gate .pfw-field { font-size: 1rem; }
}

/* Promo popup */
.pfw-cp { width: min(50rem, calc(100% - 32px)); }
.pfw-cp-card { display: grid; gap: 0; padding: 0; overflow: hidden auto; }
@media (min-width: 48rem) { .pfw-cp-card { grid-template-columns: 1.1fr 1fr; } }
.pfw-cp-copy { padding: clamp(24px, 3.4vw, 40px); padding-right: clamp(24px, 3vw, 32px); display: flex; flex-direction: column; justify-content: center; }
/* Eyebrow: one line where the card is at full width; below that a clean break replaces the middle dot */
.pfw-cp-sep { display: none; }
.pfw-cp-where { display: block; }
@media (min-width: 64rem) {
  .pfw-cp-copy .pfw-eyebrow { font-size: .75rem; white-space: nowrap; }
  .pfw-cp-sep { display: inline; }
  .pfw-cp-where { display: inline; }
}
.pfw-cp-title { margin-top: 14px; font: var(--pfw-w-display) clamp(1.625rem, 1.5vw + 1.1rem, 2.25rem)/1.1 var(--pfw-font-display); letter-spacing: var(--pfw-ls-display); color: var(--pfw-ink); text-wrap: balance; }
.pfw-cp-sub { margin-top: 10px; font-size: var(--pfw-lead); line-height: 1.5; color: var(--pfw-body); }
.pfw-cp-cta { align-self: flex-start; margin-top: 22px; }
.pfw-cp-fine { margin-top: 12px; font-size: .8125rem; color: var(--pfw-muted); }
.pfw-cp-visual { position: relative; padding: clamp(24px, 3.4vw, 40px); background: var(--pfw-ink); color: #F7F3E8; display: flex; flex-direction: column; justify-content: center; }
/* Right panel: the prize, then a three-step flow (equal tiles, never sized by value), then the question for the visitor */
.pfw-cp-hero b { display: block; font: 600 clamp(2.75rem, 2vw + 1.75rem, 3.25rem)/1.05 var(--pfw-font-display); color: var(--pfw-gold-light); white-space: nowrap; }
.pfw-cp-hero span { display: block; margin-top: 6px; font-size: .9375rem; line-height: 1.35; color: rgba(247,243,232,.78); }
.pfw-cp-flow { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin: 24px 0 0; padding: 0; list-style: none; }
.pfw-cp-flow li { position: relative; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 11px 2px 10px; border: 1px solid rgba(247,243,232,.16); border-radius: 12px; background: rgba(247,243,232,.05); text-align: center; }
.pfw-cp-flow b { font: 600 1.375rem/1.1 var(--pfw-font-display); color: #F7F3E8; font-variant-numeric: tabular-nums; }
.pfw-cp-flow span { font-size: .75rem; line-height: 1.25; white-space: nowrap; color: rgba(247,243,232,.78); }
.pfw-cp-flow li:not(:last-child)::after { content: ''; position: absolute; top: 50%; right: -14px; width: 8px; height: 8px; margin-top: -4px; border: solid var(--pfw-gold-light); border-width: 1.5px 1.5px 0 0; transform: rotate(45deg); }
.pfw-cp-flow .is-gold { border-color: var(--pfw-gold); background: var(--pfw-gold); box-shadow: 0 8px 24px -8px rgb(var(--pfw-gold-rgb) / .6); }
.pfw-cp-flow .is-gold b, .pfw-cp-flow .is-gold span { color: var(--pfw-ink); }
.pfw-cp-flow .is-gold span { font-weight: 500; }
.pfw-cp[open] .pfw-cp-flow li { animation: pfw-cp-step 380ms var(--pfw-ease-silk) both; }
.pfw-cp[open] .pfw-cp-flow li:nth-child(1) { animation-delay: 120ms; }
.pfw-cp[open] .pfw-cp-flow li:nth-child(2) { animation-delay: 240ms; }
.pfw-cp[open] .pfw-cp-flow li:nth-child(3) { animation-delay: 360ms; }
@keyframes pfw-cp-step { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.pfw-cp-hook { margin-top: 20px; padding-top: 16px; border-top: 1px solid rgba(247,243,232,.14); font: 500 1.125rem/1.3 var(--pfw-font-display); color: #F7F3E8; }
.pfw-cp-x { background: rgba(255,255,255,.92); }
@media (max-width: 47.99rem) {
  .pfw-cp-visual { order: -1; padding: 22px 24px; }
  .pfw-cp-flow { margin-top: 16px; }
  .pfw-cp-hook { margin-top: 14px; padding-top: 12px; font-size: 1.0625rem; }
  .pfw-cp-cta { align-self: stretch; }
  .pfw-cp-copy { padding-top: 22px; }
}
@media (prefers-reduced-motion: reduce) {
  .pfw-cg[open], .pfw-cp[open], .pfw-cg[open]::backdrop, .pfw-cp[open]::backdrop, .pfw-cg[open] .pfw-cg-fill, .pfw-cp[open] .pfw-cp-flow li { animation: none; }
}
@media (forced-colors: active) { .pfw-cg-fill { forced-color-adjust: none; } }
@media print { .pfw-cg, .pfw-cp { display: none !important; } }
.pfw-cg-title:focus { outline: none; }

/* =====================================================================
   WHATSAPP CONTACT (behaviour: site.js "WHATSAPP CONTACT")
   Chat widget footer: "Chat on WhatsApp" sits next to "Book a Demo" (.pfw-chat-foot-ctas).
   The footer contact strip link reuses .pff-tel (section 18).
   ===================================================================== */
.pfw-chat-foot-ctas { flex: none; display: inline-flex; align-items: center; gap: 6px; }
.pfw-chat-wa { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 11px; border-radius: 999px; border: 1px solid var(--pfw-line-2); background: transparent; color: var(--pfw-ink); font-size: .78125rem; font-weight: 600; text-decoration: none; white-space: nowrap; transition: background-color 150ms ease, border-color 150ms ease; }
.pfw-chat-wa svg { flex: none; color: #1a8f4c; }
.pfw-chat-wa:focus-visible { outline: 2px solid var(--pfw-gold-deep); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) { .pfw-chat-wa:hover { background: rgba(23,19,11,.05); border-color: var(--pfw-ink); } }
@media (max-width: 23.99rem) { .pfw-chat-wa { padding: 0 9px; } .pfw-chat-foot-ctas { gap: 4px; } }

/* =====================================================================
   FOOTER v2 (26 Oct): columns, Get in touch, Talk to us, AI summary, wordmark sweep
   Markup: components/site-shell/footer.html (<footer class="pff-foot pff2">); behaviour: site.js "FOOTER v2".
   Keeps the dark footer theme of section 18 (tokens --pff-*); the closing CTA band above is unchanged.
   Layout: phone stacked (2 link columns, 44px tap targets); 640px+ brand row, 3 link columns, Get in touch below;
   900px+ 4 link columns; 1200px+ one row: Brand | Platform | Solutions | Resources | Company | Get in touch.
   ===================================================================== */
.pff2-wrap { max-width: calc(var(--pfw-container-max) + 2 * var(--pfw-gutter)); } /* 26 Oct: aligned with the nav pill (was 1320px) */
.pff2-grid { display: grid; gap: 44px; }
.pff2-head { margin: 0 0 12px; font: 600 11.5px/1.4 var(--pff-sans); letter-spacing: .14em; text-transform: uppercase; color: rgb(var(--pfw-gold-rgb, 199 166 75) / .92); }

/* Brand */
.pff2-brand { display: flex; flex-direction: column; align-items: flex-start; }
.pff2-def { margin-top: 16px; max-width: 30ch; font-size: 14.5px; line-height: 1.6; color: rgb(var(--pff-cream) / .7); }
.pff2-icon-btn { margin-top: 18px; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 1px solid rgba(250,247,240,.16); border-radius: 11px; color: rgb(var(--pff-cream) / .78); transition: color 200ms ease, border-color 200ms ease, background-color 200ms ease; }
.pff2 .pff-trust { margin-top: 18px; }

/* Link columns */
.pff2-nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 20px; }
.pff2-link { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; min-height: 44px; font-size: 14.5px; line-height: 1.35; color: var(--pff-text); transition: color 200ms ease; }
.pff2-tag { display: inline-flex; align-items: center; padding: 1px 7px; border: 1px solid rgba(250,247,240,.16); border-radius: 999px; font-size: 10.5px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; line-height: 1.5; color: var(--pff-text-lo); }

/* Get in touch */
.pff2-touch address { display: grid; gap: 14px; }
.pff2-people { display: grid; gap: 10px; }
.pff2-person { display: flex; align-items: center; gap: 12px; }
.pff2-person img { flex: none; width: 40px; height: 40px; border-radius: 999px; object-fit: cover; object-position: 50% 22%; border: 1px solid rgba(250,247,240,.14); background: rgba(250,247,240,.06); }
.pff2-who { display: flex; flex-direction: column; min-width: 0; }
.pff2-name { display: inline-flex; align-items: center; gap: 2px; font-size: 14.5px; font-weight: 500; line-height: 1.3; color: var(--pff-text-hi); }
.pff2-in { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; margin: -8px 0; border-radius: 8px; color: rgb(var(--pff-cream) / .5); transition: color 200ms ease; }
.pff2-role { font-size: 12.5px; line-height: 1.4; color: var(--pff-text-lo); }
.pff2-contact li { display: flex; align-items: center; min-width: 0; }
.pff2-ci { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; min-width: 0; max-width: 100%; font-size: 14px; line-height: 1.4; color: rgb(var(--pff-cream) / .86); overflow-wrap: anywhere; border-radius: 4px; transition: color 200ms ease; }
.pff2-ci-plain { color: rgb(var(--pff-cream) / .66); }
.pff2-ci svg { flex: none; width: 16px; height: 16px; color: rgb(var(--pff-cream) / .42); transition: color 200ms ease; }
.pff2-copy { display: none; flex: none; align-items: center; justify-content: center; width: 40px; height: 40px; margin-left: 4px; padding: 0; border: 0; border-radius: 8px; background: transparent; color: rgb(var(--pff-cream) / .45); cursor: pointer; transition: color 200ms ease, background-color 200ms ease; }
.pfw-js .pff2-copy { display: inline-flex; }
.pff2-copy .pff2-i-ok { display: none; color: var(--pff-gold); }
.pff2-copy.is-copied .pff2-i-copy { display: none; }
.pff2-copy.is-copied .pff2-i-ok { display: block; }
.pff2-status { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Second row: Talk to us + AI summary */
.pff2-row2 { display: grid; gap: 32px; margin-top: 48px; padding-top: 32px; border-top: 1px solid var(--pff-line); }
.pff2-talk { display: flex; align-items: center; gap: 4px; width: 100%; max-width: 440px; padding: 4px; border: 1px solid rgba(250,247,240,.18); border-radius: 14px; background: rgba(250,247,240,.03); transition: border-color 200ms ease; }
.pff2-talk:focus-within { border-color: rgb(var(--pfw-gold-rgb, 199 166 75) / .7); }
.pff2-input { flex: 1 1 auto; min-width: 0; min-height: 44px; padding: 0 12px; border: 0; background: transparent; color: var(--pff-text-hi); font: 400 15px/1.3 var(--pff-sans); }
.pff2-input::placeholder { color: rgb(var(--pff-cream) / .45); }
.pff2-input:focus { outline: none; }
.pff2 .pff2-talk-btn { flex: none; border-radius: 10px; padding-inline: 18px; }
.pff2-ai-list { display: flex; flex-wrap: wrap; gap: 8px; }
.pff2-ai-btn { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border: 1px solid rgba(250,247,240,.14); border-radius: 12px; background: rgba(250,247,240,.03); color: rgb(var(--pff-cream) / .8); transition: color 200ms ease, border-color 200ms ease, background-color 200ms ease, transform 200ms var(--pff-ease); }
/* AI copy-prompt dialog (a[data-ai-copy], site.js "AI copy-prompt dialog"; builds on .pfm, section 15, for the backdrop and rise-in) */
.pff2-aic { width: min(26rem, calc(100% - 32px)); }
.pff2-aic [hidden] { display: none !important; }
.pff2-aic .pfm-card { padding: clamp(20px, 4vw, 24px); }
.pff2-aic .pfm-title { margin-top: 0; font-size: 1.25rem; }
.pff2-aic-box { display: block; width: 100%; margin-top: 14px; padding: 10px 12px; border: 1px solid var(--pfw-line-2); border-radius: var(--pfw-r-md); background: var(--pfw-paper-2); color: var(--pfw-ink); font: 400 .875rem/1.45 var(--pfw-font-sans); resize: none; overflow: hidden; }
.pff2-aic-status { margin-top: 12px; font-size: .875rem; font-weight: 500; line-height: 1.4; color: var(--pfw-ink); }
.pff2-aic-status:empty { margin-top: 0; }
.pff2-aic-hint { margin-top: 10px; font-size: .8125rem; line-height: 1.4; color: var(--pfw-muted); }
.pff2-aic-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; }
@media (hover: none) and (pointer: coarse) { .pff2-aic-box { font-size: 1rem; } } /* below 16px, iOS zooms the page when the box takes focus */
@media (max-width: 379.98px) {
  .pff2-aic-actions { flex-direction: column-reverse; }
  .pff2-aic-actions .pfw-btn { width: 100%; }
}
/* AI logo names (founder, 1 Nov): each button carries data-ai-name. Mouse and keyboard get a small tooltip under the
   logo (below, so it covers neither the heading nor the pointer; it fits the gutter at every width). Touch screens cannot
   hover and a tap opens the link, so there the name sits beneath the logo, always visible. aria-label stays the accessible name. */
.pff2-ai-btn { position: relative; }
.pff2-ai-btn::after, .pff2-ai-btn::before {
  position: absolute; left: 50%; pointer-events: none; background: #2A241A; border: 1px solid rgb(var(--pfw-gold-rgb, 199 166 75) / .45);
  opacity: 0; visibility: hidden; translate: 0 -3px; transition: opacity 110ms ease, translate 110ms ease, visibility 0s 110ms;
}
.pff2-ai-btn::after {
  content: attr(data-ai-name); top: calc(100% + 8px); z-index: 3; transform: translateX(-50%); padding: 5px 9px; border-radius: 8px;
  color: var(--pff-text-hi); font: 500 12px/1.2 var(--pff-sans); white-space: nowrap; box-shadow: 0 10px 24px -10px rgba(0,0,0,.75);
}
.pff2-ai-btn::before {
  content: ''; top: calc(100% + 4px); z-index: 4; width: 8px; height: 8px; margin-left: -4px; border-width: 1px 0 0 1px; border-top-left-radius: 2px; rotate: 45deg;
}
.pff2-ai-btn:focus-visible::after, .pff2-ai-btn:focus-visible::before { opacity: 1; visibility: visible; translate: 0 3px; transition: opacity 110ms ease, translate 110ms ease, visibility 0s; } /* 3px lower: clears the focus ring */
@media (hover: hover) and (pointer: fine) {
  .pff2-ai-btn:hover::after, .pff2-ai-btn:hover::before { opacity: 1; visibility: visible; translate: 0 0; transition: opacity 110ms ease, translate 110ms ease, visibility 0s; }
}
@media (prefers-reduced-motion: reduce) {
  .pff2-ai-btn::after, .pff2-ai-btn::before, .pff2-ai-btn:hover::after, .pff2-ai-btn:hover::before, .pff2-ai-btn:focus-visible::after, .pff2-ai-btn:focus-visible::before { translate: none; transition: none; }
}
@media (forced-colors: active) {
  .pff2-ai-btn::before { display: none; }
  .pff2-ai-btn::after { background: Canvas; color: CanvasText; border-color: CanvasText; }
}
@media (hover: none), (pointer: coarse) {
  .pff2-ai-btn { margin-bottom: 20px; }
  .pff2-ai-btn::before { display: none; }
  .pff2-ai-btn::after, .pff2-ai-btn:focus-visible::after {
    top: calc(100% + 5px); padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; color: rgb(var(--pff-cream) / .78);
    font-size: 11px; opacity: 1; visibility: visible; translate: none; transition: none;
  }
}
.pff2 .pff-bar { margin-top: 40px; }
@media (max-width: 1023.98px) {
  .pff2-in { width: 44px; height: 44px; margin: -12px -6px; }
  .pff2 .pff-bar a { min-height: 44px; }
}

@media (min-width: 640px) {
  .pff2-nav { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 36px 24px; }
  .pff2-touch address { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 32px; align-items: start; }
  .pff2-row2 { grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: 32px 40px; }
}
@media (min-width: 900px) {
  .pff2-nav { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .pff2-link { min-height: 0; padding-block: 6px; }
  .pff2-ci { min-height: 34px; }
  .pff2-copy { width: 32px; height: 32px; }
  .pff2-row2 { margin-top: 56px; }
}
@media (min-width: 1200px) {
  .pff2-grid { grid-template-columns: minmax(196px, 1.1fr) minmax(0, 4.4fr) minmax(252px, 1.35fr); gap: 40px; }
  .pff2-nav { gap: 28px; grid-template-columns: 1.2fr 1.05fr 1.15fr 1.05fr; }
  .pff2-touch address { grid-template-columns: 1fr; gap: 12px; }
  .pff2-link { font-size: 14px; }
  .pff2 .pff-trust { flex-direction: column; align-items: flex-start; }
}
/* Laptops (27 Oct, 70vw content): same five-column footer as 1920, with the brand and Get in touch columns at their
   1920 share of the content width (16.5% / 21%) and slightly tighter gaps, so the link columns keep room to breathe */
@media (min-width: 1200px) and (max-width: 1713.98px) {
  .pff2-grid { grid-template-columns: minmax(184px, calc(var(--pfw-container) * .165)) minmax(0, 1fr) minmax(220px, calc(var(--pfw-container) * .21)); gap: clamp(28px, 2.4vw, 40px); }
  .pff2-nav { gap: clamp(16px, 1.6vw, 28px); }
}

@media (hover: hover) and (pointer: fine) {
  .pff2-link:hover, .pff2-ci:not(.pff2-ci-plain):hover { color: var(--pff-text-hi); }
  .pff2-ci:not(.pff2-ci-plain):hover svg, .pff2-in:hover { color: var(--pff-gold); }
  .pff2-icon-btn:hover { color: var(--pff-text-hi); border-color: rgba(250,247,240,.4); background: rgba(250,247,240,.05); }
  .pff2-copy:hover { color: var(--pff-text-hi); background: rgba(250,247,240,.07); }
  .pff2-ai-btn:hover { color: var(--pff-text-hi); border-color: rgb(var(--pfw-gold-rgb, 199 166 75) / .9); background: rgb(var(--pfw-gold-rgb, 199 166 75) / .08); transform: translateY(-2px); }
}
/* Keyboard focus: the same solid logo and gold border, inside the footer's focus ring (keeps the tile's corners) */
.pff .pff2-ai-btn:focus-visible { color: var(--pff-text-hi); border-color: rgb(var(--pfw-gold-rgb, 199 166 75) / .9); background: rgb(var(--pfw-gold-rgb, 199 166 75) / .08); border-radius: 12px; }
.pff2-ai-btn:active, .pff2-copy:active { transform: scale(.96); }

/* Wordmark at the very bottom; a soft gold light sweeps across it every ~4 s while it is in view (site.js toggles .is-lit) */
.pff2 .pff-word-wrap { margin-top: 12px; }
.pff2 .pff-word { position: relative; }
.pff2 .pff-word::after {
  content: attr(data-text); position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(100deg, transparent 38%, rgba(232, 205, 128, .0) 41%, rgba(240, 216, 146, .62) 50%, rgba(232, 205, 128, .0) 59%, transparent 62%);
  background-size: 300% 100%; background-position: 100% 0; background-repeat: no-repeat;
  -webkit-background-clip: text; background-clip: text; color: transparent; opacity: 0;
}
@media (prefers-reduced-motion: no-preference) {
  .pff2 .pff-word-wrap.is-lit .pff-word::after { animation: pff2-sweep 4200ms cubic-bezier(.45, .05, .25, 1) 250ms infinite both; }
  .pff2[data-pff2-ready]:not(.is-in) .pff2-rv { opacity: 0; transform: translateY(14px); }
  .pff2[data-pff2-ready] .pff2-rv { transition: opacity 650ms ease, transform 800ms var(--pff-ease); transition-delay: calc(var(--pff2-i, 0) * 70ms); }
}
@keyframes pff2-sweep {
  0% { opacity: 1; background-position: 100% 0; }
  62% { opacity: 1; background-position: 0 0; }
  100% { opacity: 1; background-position: 0 0; }
}
@media (prefers-reduced-motion: reduce) {
  .pff2-ai-btn, .pff2-ai-btn:hover, .pff2-ai-btn:active, .pff2-copy:active { transform: none; }
}
@media (forced-colors: active) {
  .pff2 .pff-word::after { display: none; }
  .pff2-talk, .pff2-ai-btn, .pff2-icon-btn { border-color: CanvasText; }
}

/* ==========================================================================
   PRODUCT COLOURS (founder approved 26 Oct)
   One colour identity per product, copied from the homepage product cards
   (index.html, #pf-products-v5, .pv5-t-*). Subtle only: backdrops, icon
   tiles and small chips. Headings, text and buttons keep the brand style.
   intent = ink with gold glow, hours = sky, rnr = gold, ask = sage,
   enrich = warm cream. Ink colours on tints meet WCAG AA.
   ========================================================================== */
:root {
  --pfc-intent-wash: radial-gradient(70% 80% at 88% -8%, rgba(220,193,114,.42) 0%, rgba(220,193,114,0) 60%), radial-gradient(60% 70% at -5% 105%, rgba(199,166,75,.28) 0%, rgba(199,166,75,0) 62%), radial-gradient(50% 50% at 50% 55%, rgba(255,255,255,.05) 0%, rgba(255,255,255,0) 70%), linear-gradient(160deg, #2C2822, #191713);
  --pfc-intent-tint: #2A2620;
  --pfc-intent-ink: #E3C97A;
  --pfc-intent-line: rgba(220,193,114,.38);

  --pfc-hours-wash: radial-gradient(90% 110% at 10% -5%, #F4F8FD 0%, rgba(244,248,253,0) 55%), radial-gradient(75% 95% at 92% 18%, rgba(196,218,242,.85) 0%, rgba(196,218,242,0) 62%), radial-gradient(85% 95% at 70% 100%, rgba(160,192,228,.7) 0%, rgba(160,192,228,0) 66%), linear-gradient(160deg, #F5F9FD, #D6E4F3);
  --pfc-hours-tint: #E6EFF9;
  --pfc-hours-ink: #2D5684;
  --pfc-hours-line: #C4DAF2;

  --pfc-rnr-wash: radial-gradient(90% 120% at 12% -5%, #FFF8E8 0%, rgba(255,248,232,0) 55%), radial-gradient(70% 95% at 92% 10%, rgba(232,206,140,.75) 0%, rgba(232,206,140,0) 62%), radial-gradient(85% 95% at 78% 100%, rgba(214,180,96,.6) 0%, rgba(214,180,96,0) 64%), linear-gradient(155deg, #FFFAEF, #F5E6C2);
  --pfc-rnr-tint: #F8EDD0;
  --pfc-rnr-ink: #765612;
  --pfc-rnr-line: #E8CE8C;

  --pfc-ask-wash: radial-gradient(90% 110% at 88% -5%, #F5FAF1 0%, rgba(245,250,241,0) 55%), radial-gradient(75% 95% at 8% 15%, rgba(206,226,193,.85) 0%, rgba(206,226,193,0) 62%), radial-gradient(85% 95% at 28% 100%, rgba(170,203,160,.7) 0%, rgba(170,203,160,0) 66%), linear-gradient(200deg, #F4F8EF, #D9E8CF);
  --pfc-ask-tint: #E5F0DD;
  --pfc-ask-ink: #3A6130;
  --pfc-ask-line: #CEE2C1;

  --pfc-enrich-wash: radial-gradient(90% 110% at 90% -5%, #FFFDF8 0%, rgba(255,253,248,0) 55%), radial-gradient(75% 95% at 6% 20%, rgba(239,226,198,.85) 0%, rgba(239,226,198,0) 62%), radial-gradient(85% 100% at 45% 105%, rgba(226,206,166,.6) 0%, rgba(226,206,166,0) 66%), linear-gradient(205deg, #FCF9F2, #EFE5CF);
  --pfc-enrich-tint: #F5ECDA;
  --pfc-enrich-ink: #6B5226;
  --pfc-enrich-line: #E2CEA6;
}

/* Wash: a panel backdrop with the homepage card radius and decorations */
.pfc-wash-intent, .pfc-wash-hours, .pfc-wash-rnr, .pfc-wash-ask, .pfc-wash-enrich {
  position: relative; overflow: hidden; isolation: isolate;
  border-radius: 14px; border: 1px solid rgba(255,255,255,.6);
}
.pfc-wash-intent::before, .pfc-wash-hours::before, .pfc-wash-rnr::before, .pfc-wash-ask::before, .pfc-wash-enrich::before {
  content: ''; position: absolute; z-index: -1; pointer-events: none; width: 44%; aspect-ratio: 1; right: -10%; top: -34%;
  border: 1px dashed rgba(23,19,11,.16); border-radius: 50%;
}
.pfc-wash-intent::after, .pfc-wash-hours::after, .pfc-wash-rnr::after, .pfc-wash-ask::after, .pfc-wash-enrich::after {
  content: ''; position: absolute; z-index: -1; pointer-events: none; left: 7%; bottom: 14%; width: 5px; height: 5px; border-radius: 50%;
  background: #fff; box-shadow: 190px -60px 0 0 rgba(255,255,255,.9), 300px 10px 0 -1px rgba(255,255,255,.8);
}
.pfc-wash-intent { background: var(--pfc-intent-wash); border-color: rgba(255,255,255,.08); color: var(--pfw-cream); }
.pfc-wash-intent::before { border-color: rgba(247,243,232,.16); }
.pfc-wash-intent::after { background: rgba(247,243,232,.6); box-shadow: 260px -150px 0 0 rgba(247,243,232,.5), 380px -40px 0 -1px rgba(247,243,232,.4); }
.pfc-wash-hours { background: var(--pfc-hours-wash); }
.pfc-wash-rnr { background: var(--pfc-rnr-wash); }
.pfc-wash-ask { background: var(--pfc-ask-wash); }
.pfc-wash-ask::before { right: auto; left: -14%; top: auto; bottom: -40%; }
.pfc-wash-enrich { background: var(--pfc-enrich-wash); }
.pfc-wash-enrich::before { right: -16%; top: auto; bottom: -38%; }

/* Tile: icon tile (tint background, ink icon, soft line) */
.pfc-tile-intent { --pfc-t-tint: var(--pfc-intent-tint); --pfc-t-ink: var(--pfc-intent-ink); --pfc-t-line: var(--pfc-intent-line); }
.pfc-tile-hours { --pfc-t-tint: var(--pfc-hours-tint); --pfc-t-ink: var(--pfc-hours-ink); --pfc-t-line: var(--pfc-hours-line); }
.pfc-tile-rnr { --pfc-t-tint: var(--pfc-rnr-tint); --pfc-t-ink: var(--pfc-rnr-ink); --pfc-t-line: var(--pfc-rnr-line); }
.pfc-tile-ask { --pfc-t-tint: var(--pfc-ask-tint); --pfc-t-ink: var(--pfc-ask-ink); --pfc-t-line: var(--pfc-ask-line); }
.pfc-tile-enrich { --pfc-t-tint: var(--pfc-enrich-tint); --pfc-t-ink: var(--pfc-enrich-ink); --pfc-t-line: var(--pfc-enrich-line); }
.pfc-tile-intent, .pfc-tile-hours, .pfc-tile-rnr, .pfc-tile-ask, .pfc-tile-enrich {
  background: var(--pfc-t-tint); color: var(--pfc-t-ink); border: 1px solid var(--pfc-t-line);
}
/* Nav Platform menu tiles keep their product colour on hover and current page */
.pfx-link .pfx-ic[class*="pfc-tile-"], .pfx-link:hover .pfx-ic[class*="pfc-tile-"], .pfx-link[aria-current="page"] .pfx-ic[class*="pfc-tile-"] {
  background: var(--pfc-t-tint); color: var(--pfc-t-ink); border-color: var(--pfc-t-line);
}

/* Chip: small label */
.pfc-chip-intent, .pfc-chip-hours, .pfc-chip-rnr, .pfc-chip-ask, .pfc-chip-enrich {
  display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; border-radius: 999px;
  font: 600 11.5px/1.3 var(--pfw-font-sans); letter-spacing: .01em; border: 1px solid transparent; white-space: nowrap;
}
.pfc-chip-intent { background: var(--pfc-intent-tint); color: var(--pfc-intent-ink); border-color: var(--pfc-intent-line); }
.pfc-chip-hours { background: var(--pfc-hours-tint); color: var(--pfc-hours-ink); border-color: var(--pfc-hours-line); }
.pfc-chip-rnr { background: var(--pfc-rnr-tint); color: var(--pfc-rnr-ink); border-color: var(--pfc-rnr-line); }
.pfc-chip-ask { background: var(--pfc-ask-tint); color: var(--pfc-ask-ink); border-color: var(--pfc-ask-line); }
.pfc-chip-enrich { background: var(--pfc-enrich-tint); color: var(--pfc-enrich-ink); border-color: var(--pfc-enrich-line); }

@media (forced-colors: active) {
  [class*="pfc-tile-"], [class*="pfc-chip-"], .pfx-link .pfx-ic[class*="pfc-tile-"] { border-color: CanvasText; }
  [class*="pfc-wash-"]::before, [class*="pfc-wash-"]::after { display: none; }
}


/* =====================================================================
   TABLET (26 Oct, founder iPad feedback): iPad portrait (768 to 1023px wide) and landscape (1024 to 1199px).
   Tablet-only media queries; phones (< 700px) and desktop/laptop (>= 1200px) render exactly as before.
   Portrait: centred, balanced compositions instead of left-hugging stacks; FAQ lists at a readable centred
   width with the chevron close to the question; lone last cards centred; footer as a tidy tablet grid.
   ===================================================================== */
@media (min-width: 700px) and (max-width: 1023.98px) {
  /* Nav pill content sits on the same edges as the sections (as on desktop) */
  .pfx { --pfx-inset: max(12px, calc(var(--pfw-gutter) - var(--pfw-pill-pad))); }

  /* Inner page hero: copy centred above a centred visual (no left-hugging column over a stretched stage) */
  .pfw-page-hero .pfw-crumbs ol { justify-content: center; }
  .pfw-page-hero-grid { justify-items: center; }
  .pfw-page-hero-grid > :first-child:not(figure) { width: 100%; max-width: 640px; text-align: center; }
  .pfw-page-hero-grid > :first-child:not(figure) :is(.pfw-h1, .pfw-lead, .pfw-hero-for) { margin-inline: auto; }
  .pfw-page-hero-grid > :first-child:not(figure) .pfw-actions { justify-content: center; }
  .pfw-page-hero-grid > :first-child:not(figure) :is(ul, ol):not(.pfw-actions) { justify-content: center; }
  .pfw-page-hero-grid > .pfw-hero-visual, .pfw-page-hero-grid > :last-child:not(:first-child) { width: 100%; max-width: 640px; }

  /* Answer-first block: same centred measure as the hero */
  .pfw-answer.pfw-answer.pfw-answer { max-width: 680px; } /* beats the page-level .pfw-def .pfw-answer 960px */

  /* Section heads that sit above a full-width grid stay left; FAQ blocks centre (below) */
  /* Card grids: a lone last card in a 2-up grid sits centred at card width instead of hugging the left */
  :is(.pfw-grid-2, .pfw-grid-3) > :last-child:nth-child(odd):not(:only-child) {
    grid-column: 1 / -1; justify-self: center; width: calc((100% - var(--pfw-grid-gap)) / 2);
  }

  /* FAQ (every page): heading block centred above ONE readable centred list; the chevron sits close to the
     question instead of at the far edge of a full-width bar */
  .pfw-faq-split > .pfw-faq-intro { max-width: 600px; margin-inline: auto; text-align: center; }
  .pfw-faq-intro .pfw-faq-sub { margin-inline: auto; }
  .pfw-faq-intro .pfw-faq-more { text-align: center; }
  .pfw-faq, .pfw-faq-split > .pfw-faq { max-width: 600px; margin-inline: auto; }
  .pfw-faq summary { justify-content: space-between; }
  .pfw-faq-a { padding-right: 0; }
}

/* Footer on tablets (portrait and landscape): brand + Get in touch on the top row, the four link columns
   in one row below, then Talk to us and the AI summary, then the legal row */
@media (min-width: 700px) and (max-width: 1199.98px) {
  .pff2-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px 48px; align-items: start; }
  .pff2-brand { grid-column: 1; grid-row: 1; }
  .pff2-touch { grid-column: 2; grid-row: 1; }
  .pff2-nav { grid-column: 1 / -1; grid-row: 2; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px 24px; padding-top: 36px; border-top: 1px solid var(--pff-line); }
  .pff2-touch address { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .pff2-row2 { margin-top: 40px; }
}
@media (min-width: 700px) and (max-width: 1023.98px) {
  .pff2-row2 { grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 28px; text-align: center; }
  .pff2-talk-wrap { width: 100%; max-width: 440px; }
  .pff2-talk { margin-inline: auto; }
  .pff2-ai-list { justify-content: center; }
  .pff2 .pff-bar { margin-top: 32px; }
}
@media (min-width: 1024px) and (max-width: 1199.98px) {
  .pff2-row2 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px 48px; }
}
/* Touch tablets in landscape: footer and legal links keep 44px tap targets */
@media (min-width: 1024px) and (max-width: 1199.98px) and (pointer: coarse) {
  .pff2-link { min-height: 44px; padding-block: 0; }
  .pff2 .pff-bar a { min-height: 44px; }
}