/*
Theme Name:   PalV's DM
Theme URI:    https://www.palvdm.com/
Description:  Child theme for palvdm.com. Design tokens and components from Brand System v1.0. Vanilla CSS/JS, no page builder.
Author:       PalV's DM
Template:     generatepress
Version:      1.0.0
License:      GNU General Public License v2 or later
Text Domain:  palvdm
*/

/* =========================================================================
   1. TOKENS  — Brand System v1.0
   ========================================================================= */

:root {
  /* --- Colour. Red is the only colour that shouts: keep it under ~10% of
     any layout. Gold and copper are decorative — never body text. --- */
  --pv-red:        #E01B22;  /* Signal Red   — primary CTA, links, one accent per screen */
  --pv-red-hover:  #B0141A;  /* Signal Red darkened 12% */
  --pv-gold:       #ADA06A;  /* Faravahar Gold — eyebrows + rules on dark only */
  --pv-copper:     #B87A52;  /* Copper Ring  — borders, notes, quiet framing */
  --pv-ink:        #14110F;  /* Headlines, dark sections, footer */
  --pv-body:       #3C352F;  /* Body text */
  --pv-muted:      #6B6560;  /* Muted / captions */
  --pv-border:     #E5DFD8;  /* Borders / dividers */
  --pv-paper:      #FAF8F5;  /* Page background */
  --pv-surface:    #FFFFFF;  /* Cards / surfaces */
  --pv-whatsapp:   #25D366;

  /* On-dark variants */
  --pv-on-ink:        #FAF8F5;
  --pv-on-ink-muted:  rgba(250, 248, 245, .55);
  --pv-on-ink-border: #3C352F;

  /* --- Type --- */
  --pv-font: 'Archivo', system-ui, -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;
  --pv-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Type scale is taken from the homepage design, not the Brand Kit spec
     table. The two disagree: the kit lists "Heading 2 · 26/32", but the
     design uses H2 as the section headline at 44–50px/800. The design is
     what was approved, so it wins. */

  /* Display — hero H1, one per page. */
  --pv-fs-display: clamp(38px, 5.4vw, 66px);
  --pv-lh-display: 1.02;
  --pv-ls-display: -0.035em;
  /* Section headline — the workhorse H2. */
  --pv-fs-h2: clamp(28px, 3.6vw, 44px);
  --pv-lh-h2: 1.08;
  --pv-ls-h2: -0.03em;
  /* Larger H2, used on the ink folds and the closing CTA. */
  --pv-fs-h2-lg: clamp(30px, 4vw, 50px);
  --pv-lh-h2-lg: 1.04;
  --pv-ls-h2-lg: -0.035em;
  /* Card titles. */
  --pv-fs-h3: 24px;
  --pv-ls-h3: -0.02em;
  /* Small card titles — process steps. */
  --pv-fs-h3-sm: 19px;
  --pv-ls-h3-sm: -0.015em;
  /* Lead — intro under a headline. */
  --pv-fs-lead: clamp(17px, 1.7vw, 21px);
  --pv-lh-lead: 1.45;
  /* Intro paragraph — the copy directly under a section H2. */
  --pv-fs-intro: clamp(16px, 1.5vw, 19px);
  /* Body. The design runs tighter than the Brand Kit's 16/28. */
  --pv-fs-body: 16px;
  --pv-lh-body: 1.65;
  --pv-measure: 68ch;
  --pv-fs-article: 18px;
  --pv-lh-article: 1.78;
  /* Eyebrow / label — 12px, 0.12em, uppercase, mono */
  --pv-fs-eyebrow: 12px;
  --pv-ls-eyebrow: 0.12em;

  /* --- Spacing steps: 4 8 12 16 24 32 48 72 96 --- */
  --pv-1: 4px;  --pv-2: 8px;  --pv-3: 12px; --pv-4: 16px; --pv-5: 24px;
  --pv-6: 32px; --pv-7: 48px; --pv-8: 72px; --pv-9: 96px;
  /* Vertical rhythm between full-width folds */
  --pv-fold-y: clamp(var(--pv-8), 6vw, var(--pv-9));

  /* --- Radii. Design uses 8px on the main cards, 6px on the smaller
     nested panels, 4px on controls. --- */
  --pv-r-ctl: 4px;
  --pv-r-card: 8px;
  --pv-r-panel: 6px;

  /* --- Surfaces on ink. Cards on a dark fold are a lifted near-black,
     not a translucent white overlay. --- */
  --pv-ink-card: #1C1815;
  --pv-ink-card-border: #2B2622;

  /* --- Layout --- */
  --pv-max: 1240px;
  --pv-gutter: clamp(20px, 2vw, var(--pv-6));
  --pv-header-h: 80px;
}

/* =========================================================================
   2. FONTS — self-hosted, subset to latin + latin-ext.
   font-display:swap so text paints immediately (LCP budget < 2.5s).
   ========================================================================= */

/* latin-ext carries the rupee sign U+20B9 (in U+20AD-20C0). Prices are the
   most important text on this site — without latin-ext every "₹" falls back
   to a system font mid-line. Both subsets ship for both families. */

@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 400 800;              /* variable — one file covers 400..800 */
  font-stretch: 100%;
  font-display: swap;
  src: url('assets/fonts/archivo-var-latin.woff2') format('woff2-variations');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 400 800;
  font-stretch: 100%;
  font-display: swap;
  src: url('assets/fonts/archivo-var-latin-ext.woff2') format('woff2-variations');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                 U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
                 U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('assets/fonts/plexmono-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('assets/fonts/plexmono-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                 U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
                 U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('assets/fonts/plexmono-500-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('assets/fonts/plexmono-500-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                 U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
                 U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* =========================================================================
   3. BASE
   ========================================================================= */

body {
  margin: 0;
  background: var(--pv-paper);
  color: var(--pv-body);
  font-family: var(--pv-font);
  font-size: var(--pv-fs-body);
  line-height: var(--pv-lh-body);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--pv-red); text-decoration: none; }
a:hover { color: var(--pv-red-hover); text-decoration: underline; }
::selection { background: var(--pv-red); color: #fff; }

h1, h2, h3, h4 { font-family: var(--pv-font); color: var(--pv-ink); margin: 0; }
h1 { font-size: var(--pv-fs-display); line-height: var(--pv-lh-display); letter-spacing: var(--pv-ls-display); font-weight: 800; text-wrap: pretty; }
h2 { font-size: var(--pv-fs-h2);      line-height: var(--pv-lh-h2);      letter-spacing: var(--pv-ls-h2);      font-weight: 800; text-wrap: pretty; }
h3 { font-size: var(--pv-fs-h3);      line-height: 1.2;                  letter-spacing: var(--pv-ls-h3);      font-weight: 700; }
/* Ink folds and the closing CTA run the larger H2. */
.pv-fold--ink h2, .pv-ctaband h2 {
  font-size: var(--pv-fs-h2-lg); line-height: var(--pv-lh-h2-lg); letter-spacing: var(--pv-ls-h2-lg);
}

p { margin: 0 0 var(--pv-4); max-width: var(--pv-measure); }

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

/* Visible focus everywhere — 2px Signal Red, 2px offset */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--pv-red);
  outline-offset: 2px;
  border-radius: var(--pv-r-ctl);
}

.pv-skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--pv-ink); color: var(--pv-on-ink);
  padding: var(--pv-3) var(--pv-4); border-radius: 0 0 var(--pv-r-ctl) 0;
}
.pv-skip-link:focus { left: 0; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* =========================================================================
   4. LAYOUT
   ========================================================================= */

.pv-wrap { width: 100%; max-width: var(--pv-max); margin-inline: auto; padding-inline: var(--pv-gutter); }
.pv-fold { padding-block: var(--pv-fold-y); }
.pv-fold--tight { padding-block: var(--pv-7); }

/* Ink band — full-bleed dark section. Max two per page. */
.pv-fold--ink { background: var(--pv-ink); color: var(--pv-on-ink); }
.pv-fold--ink h1, .pv-fold--ink h2, .pv-fold--ink h3 { color: var(--pv-on-ink); }
.pv-fold--ink .pv-eyebrow { color: var(--pv-gold); }
.pv-fold--ink .pv-lead, .pv-fold--ink p { color: var(--pv-on-ink-muted); }

.pv-fold--paper   { background: var(--pv-paper); }
.pv-fold--surface { background: var(--pv-surface); }

.pv-grid { display: grid; gap: var(--pv-5); }
@media (min-width: 720px)  { .pv-grid--2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px)  { .pv-grid--3 { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1000px) { .pv-grid--4 { grid-template-columns: repeat(4, 1fr); } }

/* =========================================================================
   5. BRAND DEVICES
   ========================================================================= */

/* Red rule — 56x4px above every eyebrow. The brand's smallest signature. */
.pv-rule { display: block; width: 56px; height: 4px; background: var(--pv-red); flex-shrink: 0; }
.pv-rule--sm { width: 44px; }

.pv-eyebrow {
  font-family: var(--pv-mono);
  font-size: var(--pv-fs-eyebrow);
  letter-spacing: var(--pv-ls-eyebrow);
  text-transform: uppercase;
  color: var(--pv-copper);
  margin: 0;
}
.pv-eyebrow-row { display: flex; align-items: center; gap: var(--pv-3); margin-bottom: var(--pv-4); }

/* Copper ring — frames avatars, stat numbers, step markers. Stroke 3px, true circle. */
.pv-ring {
  border: 3px solid var(--pv-copper);
  border-radius: 50%;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}

/* Gold hatch — 135deg, 2px on 7px gap. Fills empty panels. Never behind body text. */
.pv-hatch {
  background-image: repeating-linear-gradient(135deg,
    var(--pv-gold) 0, var(--pv-gold) 2px,
    transparent 2px, transparent 9px);
  opacity: .35;
}

.pv-lead {
  font-size: var(--pv-fs-lead);
  line-height: var(--pv-lh-lead);
  font-weight: 500;
  color: var(--pv-body);
  max-width: var(--pv-measure);
}

.pv-measure { max-width: var(--pv-measure); }

/* =========================================================================
   6. CONTROLS
   ========================================================================= */

.pv-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--pv-2);
  height: 48px; padding-inline: var(--pv-5);
  border: 1px solid transparent; border-radius: var(--pv-r-ctl);
  font-family: var(--pv-font); font-size: 15px; font-weight: 600; line-height: 1;
  cursor: pointer; text-decoration: none;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.pv-btn:hover { text-decoration: none; }
.pv-btn--lg { height: 56px; padding-inline: var(--pv-6); font-size: 16px; }
.pv-btn--sm { height: 36px; padding-inline: var(--pv-4); font-size: 14px; }

/* One primary button per screen section. */
.pv-btn--primary { background: var(--pv-red); color: #fff; }
.pv-btn--primary:hover { background: var(--pv-red-hover); color: #fff; }

.pv-btn--secondary { background: transparent; color: var(--pv-ink); border-color: var(--pv-border); }
.pv-btn--secondary:hover { background: var(--pv-surface); border-color: var(--pv-copper); color: var(--pv-ink); }

.pv-fold--ink .pv-btn--secondary { color: var(--pv-on-ink); border-color: var(--pv-on-ink-border); }
.pv-fold--ink .pv-btn--secondary:hover { background: rgba(250,248,245,.06); border-color: var(--pv-copper); color: var(--pv-on-ink); }

.pv-btn[disabled], .pv-btn--disabled { opacity: .45; pointer-events: none; }

.pv-link-arrow { font-weight: 600; color: var(--pv-red); display: inline-flex; align-items: center; gap: 6px; }
.pv-link-arrow:hover { color: var(--pv-red-hover); }

/* Form fields */
.pv-field { display: block; margin-bottom: var(--pv-4); }
.pv-label { display: block; font-size: 14px; font-weight: 600; color: var(--pv-ink); margin-bottom: var(--pv-2); }
.pv-input, .pv-textarea, .pv-select {
  width: 100%; padding: var(--pv-3) var(--pv-4);
  font-family: var(--pv-font); font-size: 15px; color: var(--pv-ink);
  background: var(--pv-surface);
  border: 1px solid var(--pv-border); border-radius: var(--pv-r-ctl);
}
.pv-input:focus, .pv-textarea:focus, .pv-select:focus {
  border-color: var(--pv-red); outline: 2px solid var(--pv-red); outline-offset: 2px;
}
.pv-error { color: var(--pv-red); font-size: 13px; margin-top: var(--pv-1); }
.pv-hint  { color: var(--pv-muted); font-size: 13px; margin-top: var(--pv-1); }

/* Notices */
.pv-notice { padding: var(--pv-3) var(--pv-4); border-radius: var(--pv-r-ctl); border: 1px solid var(--pv-border); font-size: 14px; background: var(--pv-surface); }
.pv-notice--ok    { border-color: var(--pv-gold); }
.pv-notice--error { border-color: var(--pv-red); color: var(--pv-red); }

/* =========================================================================
   7. CARDS
   ========================================================================= */

.pv-card {
  background: var(--pv-surface);
  border: 1px solid var(--pv-border);
  border-radius: var(--pv-r-card);
  padding: 26px;
  display: flex; flex-direction: column; gap: var(--pv-4);
}
.pv-card--lg { padding: 30px; gap: 18px; }
.pv-card__title { font-size: var(--pv-fs-h3); letter-spacing: var(--pv-ls-h3); font-weight: 700; color: var(--pv-ink); }
.pv-card__body  { color: var(--pv-body); font-size: 15.5px; line-height: 1.6; }

/* On an ink fold, cards are a lifted near-black — not a translucent wash. */
.pv-fold--ink .pv-card {
  background: var(--pv-ink-card);
  border-color: var(--pv-ink-card-border);
}
.pv-fold--ink .pv-card__title { color: var(--pv-on-ink); }
.pv-fold--ink .pv-card__body  { color: var(--pv-on-ink-muted); }

/* Plan card — price is the hero element. The featured tier is a solid ink
   card that lifts off the page, not an outlined white one. */
.pv-plan { position: relative; padding: 30px; gap: 18px; }
.pv-plan--featured {
  background: var(--pv-ink);
  border-color: var(--pv-ink);
  padding: 34px 30px;
  box-shadow: 0 22px 50px rgba(20, 17, 15, .18);
}
.pv-plan--featured .pv-card__title,
.pv-plan--featured .pv-plan__price { color: var(--pv-on-ink); }
.pv-plan--featured .pv-card__body  { color: var(--pv-on-ink-muted); }
.pv-plan--featured .pv-eyebrow     { color: var(--pv-gold); }
.pv-plan--featured .pv-plan__period { color: var(--pv-on-ink-muted); }
.pv-plan--featured .pv-plan__list li { color: var(--pv-on-ink-muted); }
.pv-plan--featured .pv-btn--secondary { color: var(--pv-on-ink); border-color: #353029; }
.pv-plan__flag {
  position: absolute; top: calc(var(--pv-3) * -1); left: var(--pv-5);
  background: var(--pv-red); color: #fff;
  font-family: var(--pv-mono); font-size: 10px; letter-spacing: var(--pv-ls-eyebrow);
  text-transform: uppercase; padding: var(--pv-1) var(--pv-2); border-radius: 2px;
}
.pv-plan__price { font-size: 34px; font-weight: 800; letter-spacing: -0.02em; color: var(--pv-ink); line-height: 1; }
.pv-plan__period { font-size: 14px; font-weight: 400; color: var(--pv-muted); }
.pv-plan__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--pv-2); }
.pv-plan__list li { position: relative; padding-left: var(--pv-5); font-size: 15px; }
.pv-plan__list li::before {
  content: ''; position: absolute; left: 0; top: .55em;
  width: 10px; height: 5px; border-left: 2px solid var(--pv-red); border-bottom: 2px solid var(--pv-red);
  transform: rotate(-45deg);
}

/* Stat / proof — numbers in 800, never in red */
.pv-stat { display: flex; flex-direction: column; gap: var(--pv-2); }
.pv-stat__num { font-size: clamp(34px, 3.2vw, 48px); font-weight: 800; letter-spacing: -0.03em; line-height: 1; color: var(--pv-ink); }
.pv-fold--ink .pv-stat__num { color: var(--pv-on-ink); }
.pv-stat__label { font-family: var(--pv-mono); font-size: 11px; letter-spacing: var(--pv-ls-eyebrow); text-transform: uppercase; color: var(--pv-muted); }
.pv-fold--ink .pv-stat__label { color: var(--pv-gold); }

/* Quote card */
.pv-quote { font-size: var(--pv-fs-lead); line-height: 1.55; font-weight: 500; color: var(--pv-ink); }
.pv-quote__attr { font-size: 14px; color: var(--pv-muted); }
.pv-quote__name { font-weight: 600; color: var(--pv-ink); display: block; }

/* Post card */
.pv-post__cover { aspect-ratio: 16/9; border-radius: var(--pv-r-card); border: 1px solid var(--pv-border); object-fit: cover; width: 100%; }
.pv-post__meta { font-family: var(--pv-mono); font-size: 11px; letter-spacing: var(--pv-ls-eyebrow); text-transform: uppercase; color: var(--pv-muted); display: flex; gap: var(--pv-3); }

/* Step marker */
.pv-step { display: flex; gap: var(--pv-4); align-items: flex-start; }
.pv-step__mark { width: 48px; font-family: var(--pv-mono); font-size: 14px; font-weight: 500; color: var(--pv-copper); }

/* =========================================================================
   8. FAQ  (native <details>, no JS)
   Values taken from the design's own accordion (.pvd-286..289): each item is
   a white card with an 8px radius, not a bordered list row. Matching it here
   keeps the hand-built pages consistent with the converted ones.
   ========================================================================= */

.pv-faq { display: flex; flex-direction: column; gap: 12px; }
.pv-faq__item {
  border: 1px solid var(--pv-border);
  border-radius: var(--pv-r-card);
  background: var(--pv-surface);
  padding: 4px;
}
.pv-faq__q {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 20px;
  font-size: clamp(17px, 1.7vw, 20px); font-weight: 700;
  letter-spacing: -0.02em; line-height: 1.3; color: var(--pv-ink);
}
.pv-faq__q::-webkit-details-marker { display: none; }
/* A text plus at 22px/400, not a drawn cross — .pvd-289. The design leaves it
   static when open; rotating to a close mark is the one deliberate departure,
   and .om-faq-plus below gives the converted pages the same affordance. */
.pv-faq__plus {
  flex-shrink: 0; line-height: 1;
  font-size: 22px; font-weight: 400; color: var(--pv-red);
  transition: transform 180ms ease;
}
.pv-faq__plus::before { content: '+'; }
/* The post-faq pattern builds on core wp:details, which cannot carry a span
   inside its summary and still validate — so it has no marker of its own and,
   with the native triangle suppressed above, nothing signalling it opens.
   Draw one only where the span is absent, so service pages keep exactly one. */
.pv-faq__q:not(:has(.pv-faq__plus))::after {
  content: '+'; flex-shrink: 0; line-height: 1;
  font-size: 22px; font-weight: 400; color: var(--pv-red);
  transition: transform 180ms ease;
}
.pv-faq__item[open] .pv-faq__q:not(:has(.pv-faq__plus))::after { transform: rotate(45deg); }
.pv-faq__item[open] .pv-faq__plus,
.wp-block-details[open] .om-faq-plus { transform: rotate(45deg); }
.wp-block-details .om-faq-plus { display: inline-block; transition: transform 180ms ease; }
/* .pvd-290 — the column is the measure here, so no max-width of its own. */
.pv-faq__a { padding: 0 20px 22px; font-size: 17px; line-height: 1.75; color: var(--pv-body); }

.pv-fold--ink .pv-faq__item { background: var(--pv-ink-card); border-color: var(--pv-ink-card-border); }
.pv-fold--ink .pv-faq__q { color: var(--pv-on-ink); }
.pv-fold--ink .pv-faq__a { color: var(--pv-on-ink-muted); }

/* The converted service pages run their FAQ in a 900px column (.pvd-285), not
   the 1240px page wrap. At full width the cards stretch into full-bleed rules
   and stop reading as cards at all — which is why the hand-built channel pages
   looked like a different component built from the same parts. This modifier
   restores the design's column, heading size and heading gap. */
.pv-fold--faq > .pv-wrap {
  max-width: 900px;
  padding-inline: clamp(20px, 4vw, 48px);
}
.pv-fold--faq > .pv-wrap > h2 {                       /* .pvd-96 */
  font-size: clamp(26px, 3.2vw, 40px);
  line-height: 1.08;
  margin-bottom: clamp(28px, 3.5vw, 40px);            /* .pvd-285 gap */
}

/* Pricing card — the figure carries the fold, matching .pvd-417 on the
   converted service pages. */
.pv-pricecard {
  background: var(--pv-surface);
  border: 1px solid var(--pv-border);
  border-radius: var(--pv-r-card);
  padding: clamp(26px, 3vw, 34px);
  display: flex; flex-direction: column; gap: var(--pv-4);
  max-width: 720px;
}
.pv-pricecard__row { display: flex; align-items: baseline; gap: var(--pv-2); flex-wrap: wrap; margin: 0; }
.pv-pricecard__fig {
  font-size: clamp(30px, 3.2vw, 42px); font-weight: 800;
  letter-spacing: -0.04em; color: var(--pv-ink); line-height: 1;
}
.pv-pricecard__per { font-size: 15px; color: var(--pv-muted); }
.pv-pricecard__why { font-size: 16px; line-height: 1.65; color: var(--pv-body); margin: 0; }
.pv-pricecard__meta {
  font-size: 14px; line-height: 1.6; color: var(--pv-body);
  border-top: 1px solid var(--pv-border); padding-top: 12px; margin: 0;
}

/* =========================================================================
   9. HEADER / NAV
   Sticky, 80px, white, 1px bottom border. Nav 14px/500, red on active.
   ========================================================================= */

.pv-header {
  position: sticky; top: 0; z-index: 100;
  background: var(--pv-surface);
  border-bottom: 1px solid var(--pv-border);
}
.pv-header__inner { height: var(--pv-header-h); display: flex; align-items: center; justify-content: space-between; gap: var(--pv-5); }
.pv-logo { display: flex; align-items: center; }
.pv-logo img { height: 44px; width: auto; display: block; }

.pv-nav { display: none; }
@media (min-width: 960px) { .pv-nav { display: flex; align-items: center; } }
.pv-nav__list { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: var(--pv-5); }
.pv-nav__list > li { position: relative; }
.pv-nav a { font-size: 14px; font-weight: 500; color: var(--pv-ink); white-space: nowrap; }
.pv-nav a:hover { color: var(--pv-red); text-decoration: none; }
.pv-nav a[aria-current="page"], .pv-nav .current-menu-item > a { color: var(--pv-red); }

/* Services dropdown — hover and keyboard both open it. */
.pv-sub, .pv-nav__list ul.sub-menu {
  position: absolute; top: 100%; left: 0; z-index: 110;
  min-width: 220px; margin: 0; padding: var(--pv-2) 0;
  list-style: none;
  background: var(--pv-surface);
  border: 1px solid var(--pv-border); border-radius: var(--pv-r-card);
  box-shadow: 0 6px 20px rgba(20,17,15,.10);
  opacity: 0; visibility: hidden; transform: translateY(4px);
  transition: opacity .14s ease, transform .14s ease, visibility .14s;
}
.pv-has-sub:hover > .pv-sub,
.pv-has-sub:focus-within > .pv-sub,
.pv-nav__list li:hover > ul.sub-menu,
.pv-nav__list li:focus-within > ul.sub-menu {
  opacity: 1; visibility: visible; transform: translateY(0);
}
.pv-sub a, .pv-nav__list ul.sub-menu a { display: block; padding: var(--pv-2) var(--pv-4); }
.pv-sub a:hover { background: var(--pv-paper); }

.pv-mobile-nav__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--pv-4); }
.pv-mobile-nav__list .pv-sub {
  position: static; opacity: 1; visibility: visible; transform: none;
  background: none; border: 0; box-shadow: none; padding: var(--pv-3) 0 0;
  display: flex; flex-direction: column; gap: var(--pv-3);
}
.pv-mobile-nav__list .pv-sub a { font-size: 16px; font-weight: 400; color: var(--pv-on-ink-muted); padding: 0; }
.pv-mobile-nav__list .pv-sub a:hover { color: var(--pv-red); }

.pv-header__cta { display: none; }
@media (min-width: 960px) { .pv-header__cta { display: inline-flex; } }

.pv-burger {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; background: none; border: 1px solid var(--pv-border);
  border-radius: var(--pv-r-ctl); cursor: pointer;
}
@media (min-width: 960px) { .pv-burger { display: none; } }
.pv-burger span, .pv-burger span::before, .pv-burger span::after {
  content: ''; display: block; width: 18px; height: 2px; background: var(--pv-ink); position: relative;
}
.pv-burger span::before { position: absolute; top: -6px; }
.pv-burger span::after  { position: absolute; top:  6px; }

.pv-mobile-nav {
  position: fixed; inset: var(--pv-header-h) 0 0 0; z-index: 99;
  background: var(--pv-ink); color: var(--pv-on-ink);
  padding: var(--pv-6) var(--pv-gutter);
  display: flex; flex-direction: column; gap: var(--pv-4);
  overflow-y: auto;
}
.pv-mobile-nav[hidden] { display: none; }
.pv-mobile-nav a { color: var(--pv-on-ink); font-size: 22px; font-weight: 600; }
.pv-mobile-nav a:hover { color: var(--pv-red); text-decoration: none; }

/* =========================================================================
   10. FOOTER
   ========================================================================= */

.pv-footer { background: var(--pv-ink); color: var(--pv-on-ink-muted); padding-block: var(--pv-8) var(--pv-6); }
.pv-footer h2, .pv-footer h3 { color: var(--pv-on-ink); font-size: 13px; font-family: var(--pv-mono); letter-spacing: var(--pv-ls-eyebrow); text-transform: uppercase; font-weight: 500; }
.pv-footer a { color: var(--pv-on-ink); font-size: 15px; }
.pv-footer a:hover { color: var(--pv-red); }
.pv-footer ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--pv-2); }
.pv-footer__bar { border-top: 1px solid var(--pv-on-ink-border); margin-top: var(--pv-7); padding-top: var(--pv-5); font-size: 13px; display: flex; flex-wrap: wrap; gap: var(--pv-4); justify-content: space-between; }
.pv-footer__cols { gap: var(--pv-7) var(--pv-5); align-items: start; }
.pv-footer__brand .pv-rule { margin-bottom: var(--pv-4); }
.pv-footer__logo {
  display: inline-grid; place-items: center;
  width: 52px; height: 52px; margin-bottom: var(--pv-4);
  background: #fff; border-radius: var(--pv-r-panel);
}
.pv-footer__logo img { width: 42px; height: 42px; object-fit: contain; display: block; }
.pv-footer__tagline { color: var(--pv-on-ink); font-size: 15px; max-width: 30ch; }
.pv-footer__legal { display: flex; gap: var(--pv-4); }
.pv-footer__legal a { font-size: 13px; }
.pv-footer p { color: var(--pv-on-ink-muted); }

/* =========================================================================
   11. STICKY WHATSAPP
   ========================================================================= */

.pv-whatsapp {
  position: fixed; right: var(--pv-5); bottom: var(--pv-5); z-index: 120;
  width: 56px; height: 56px; border-radius: 50%;
  background: var(--pv-whatsapp); color: #fff;
  display: grid; place-items: center;
  box-shadow: 0 4px 14px rgba(20,17,15,.22);
}
.pv-whatsapp:hover { color: #fff; text-decoration: none; filter: brightness(.92); }
.pv-whatsapp svg { width: 28px; height: 28px; fill: currentColor; }
@media print { .pv-whatsapp { display: none; } }

/* =========================================================================
   12. ARTICLE TYPOGRAPHY  (blog + legal templates)
   ========================================================================= */

.pv-article { font-size: var(--pv-fs-article); line-height: var(--pv-lh-article); max-width: var(--pv-measure); }
.pv-article h2 { margin: var(--pv-8) 0 var(--pv-4); }
.pv-article h3 { margin: var(--pv-7) 0 var(--pv-3); }
.pv-article ul, .pv-article ol { padding-left: var(--pv-5); margin: 0 0 var(--pv-4); }
.pv-article li { margin-bottom: var(--pv-2); }
.pv-article blockquote {
  margin: var(--pv-6) 0; padding-left: var(--pv-5);
  border-left: 3px solid var(--pv-copper); color: var(--pv-ink); font-weight: 500;
}

/* =========================================================================
   12b. PATTERN COMPONENTS
   ========================================================================= */

/* Hero — the only place the display size is used. */
.pv-display {
  font-size: var(--pv-fs-display);
  line-height: var(--pv-lh-display);
  letter-spacing: var(--pv-ls-display);
  font-weight: 800;
  color: var(--pv-ink);
  margin-bottom: var(--pv-5);
  max-width: 16ch;
}
.pv-display__alt { color: var(--pv-red); }
.pv-hero .pv-lead { margin-bottom: var(--pv-6); }

.pv-cta-row { display: flex; flex-wrap: wrap; gap: var(--pv-3); max-width: none; }

/* Stat row */
.pv-statrow {
  list-style: none; margin: var(--pv-8) 0 0; padding: 0;
  display: grid; gap: var(--pv-5);
  grid-template-columns: repeat(2, 1fr);
  border-top: 1px solid var(--pv-border); padding-top: var(--pv-6);
}
@media (min-width: 720px) { .pv-statrow { grid-template-columns: repeat(4, 1fr); } }
.pv-statrow--3 { grid-template-columns: repeat(3, 1fr); margin-top: var(--pv-5); }
.pv-fold--ink .pv-statrow { border-color: var(--pv-on-ink-border); }

/* Plan grid */
.pv-plans { margin-top: var(--pv-7); align-items: stretch; }
.pv-plans .pv-card { height: 100%; }
.pv-plan .pv-card__body { flex-grow: 1; }
.pv-plan__price { margin: 0; display: flex; align-items: baseline; gap: var(--pv-2); }

/* Two-up link tiles under the plan grid */
.pv-tiles { margin-top: var(--pv-5); }
.pv-tile {
  display: grid; gap: var(--pv-1);
  grid-template-areas: "t a" "s a";
  grid-template-columns: 1fr auto;
  align-items: center;
  padding: var(--pv-5);
  background: var(--pv-paper);
  border: 1px solid var(--pv-border); border-radius: var(--pv-r-card);
  transition: border-color .15s ease, background-color .15s ease;
}
.pv-tile:hover { text-decoration: none; border-color: var(--pv-copper); background: var(--pv-surface); }
.pv-tile__title { grid-area: t; font-weight: 700; color: var(--pv-ink); }
.pv-tile__sub   { grid-area: s; font-size: 14px; color: var(--pv-muted); }
.pv-tile__arrow { grid-area: a; color: var(--pv-red); font-size: 20px; }

/* Process steps */
.pv-steps { list-style: none; margin: var(--pv-7) 0 0; padding: 0; counter-reset: none; }
.pv-step-card { display: flex; flex-direction: column; gap: var(--pv-3); }
.pv-step-card__mark {
  width: 48px; height: 48px;
  font-family: var(--pv-mono); font-size: 16px; font-weight: 500;
  color: var(--pv-copper);
}
.pv-step-card h3 { font-size: var(--pv-fs-h3-sm); letter-spacing: var(--pv-ls-h3-sm); }

/* Charts. Inline SVG, no library — they scale with the card and inherit
   the palette. viewBox is set so they letterbox rather than distort. */
.pv-chart { display: block; width: 100%; height: auto; overflow: visible; }
.pv-chart--tall { min-height: 0; flex: 1; }
.pv-step-card p { font-size: 15px; color: var(--pv-body); }

/* CTA band */
.pv-ctaband { align-items: center; gap: var(--pv-7); }
.pv-ctaband h2 { margin-bottom: var(--pv-4); }
.pv-ctaband__panel {
  border: 1px solid var(--pv-on-ink-border);
  border-radius: var(--pv-r-card);
  padding: var(--pv-6);
  background: rgba(250,248,245,.03);
}
.pv-ctaband__panel .pv-eyebrow { color: var(--pv-gold); margin-bottom: var(--pv-3); }

/* Trust strip */
.pv-trust__inner { display: grid; gap: var(--pv-4); align-items: center; }
@media (min-width: 900px) { .pv-trust__inner { grid-template-columns: auto auto 1fr; gap: var(--pv-6); } }
.pv-trust__logos { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--pv-5); font-weight: 700; color: var(--pv-ink); }
.pv-trust__quote { margin: 0; }
.pv-trust__quote .pv-quote { font-size: 16px; }
.pv-trust__avatar { width: 28px; height: 28px; font-size: 12px; font-weight: 700; display: inline-grid; vertical-align: middle; margin-right: var(--pv-2); }
.pv-quote__attr { display: flex; align-items: center; gap: var(--pv-2); margin-top: var(--pv-2); }

/* The shift fold */
.pv-shift { gap: var(--pv-7); align-items: start; }
.pv-shift__figure { display: flex; align-items: baseline; gap: var(--pv-3); margin-bottom: var(--pv-4); }
.pv-surfaces { display: flex; flex-direction: column; gap: var(--pv-4); }
.pv-surface-card { background: var(--pv-ink-card); border: 1px solid var(--pv-ink-card-border); border-radius: var(--pv-r-panel); padding: 20px; display: flex; flex-direction: column; gap: 14px; }
.pv-fold--paper .pv-surface-card, .pv-card .pv-surface-card { background: var(--pv-paper); border-color: var(--pv-border); }
.pv-surface-card__query { font-family: var(--pv-mono); font-size: 13px; color: var(--pv-gold); margin-bottom: var(--pv-3); }
.pv-card .pv-surface-card__query { color: var(--pv-copper); }
.pv-surface-card__rows { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--pv-2); font-size: 14px; }
.pv-surface-card__rows .is-you { color: var(--pv-red); font-weight: 600; }
.pv-surface-card__answer { font-size: 18px; margin-bottom: var(--pv-2); }
.pv-surface-card__sources { font-size: 13px; display: flex; gap: var(--pv-2); align-items: baseline; margin: 0; }
.pv-surfaces__note { font-family: var(--pv-mono); font-size: 11px; letter-spacing: var(--pv-ls-eyebrow); text-transform: uppercase; color: var(--pv-gold); margin: 0; }

/* Proof */
.pv-proof-ai { margin-top: var(--pv-7); gap: var(--pv-5); }
.pv-proof-ai__grid { display: grid; gap: var(--pv-5); }
@media (min-width: 860px) { .pv-proof-ai__grid { grid-template-columns: 1fr 1fr; } }
.pv-proof-ai .pv-stat__num small { font-size: 14px; font-weight: 400; color: var(--pv-muted); }

/* Founder */
.pv-founder { gap: var(--pv-7); align-items: center; }
.pv-certs { list-style: none; margin: 0 0 var(--pv-3); padding: 0; display: flex; flex-wrap: wrap; gap: var(--pv-4); }
.pv-certs li { width: 84px; height: 84px; font-family: var(--pv-mono); font-size: 11px; letter-spacing: .06em; color: var(--pv-muted); text-align: center; }

/* Section head with a trailing action */
.pv-testi__head { display: flex; flex-wrap: wrap; gap: var(--pv-4); justify-content: space-between; align-items: flex-end; margin-bottom: var(--pv-7); }

.pv-testi .pv-quote { font-size: 16px; }
.pv-testi blockquote { margin: 0; }

/* Post cards */
.pv-posts .pv-post { display: flex; flex-direction: column; gap: var(--pv-3); color: inherit; }
.pv-post:hover { text-decoration: none; }
.pv-post:hover .pv-card__title { color: var(--pv-red); }
.pv-post__cover { display: block; aspect-ratio: 16/9; border-radius: var(--pv-r-card); border: 1px solid var(--pv-border); background-color: var(--pv-surface); }
.pv-post .pv-card__title { font-size: 17px; line-height: 1.35; }

/* -------------------------------------------------------------------------
   Layout corrections found by comparing the built page against the design.
   ------------------------------------------------------------------------- */

/* Gutenberg's "constrained" layout gives every child auto side margins, which
   centred the intro paragraphs under each section heading. Folds manage their
   own width via .pv-wrap, so the auto margins are cancelled. */
.pv-wrap :where(p, h1, h2, h3, h4, ul, ol, blockquote, figure) {
  margin-left: 0;
  margin-right: 0;
}

/* Headings ship with margin:0 so patterns control rhythm. Without this the
   section heading collided with the copy directly beneath it. */
.pv-wrap h1 { margin-bottom: var(--pv-5); }
.pv-wrap h2 { margin-bottom: 20px; }
.pv-wrap h3 { margin-bottom: var(--pv-1); }
.pv-eyebrow-row + h1, .pv-eyebrow-row + h2 { margin-top: 0; }

/* The 100M+ figure sat tight against the heading above it. */
.pv-shift__figure { margin-top: var(--pv-5); margin-bottom: var(--pv-5); }

/* Panel inside the AI-proof card. This class was referenced in the markup
   but never defined, so the left column rendered as bare text with a large
   dead gap beside the chart. */
.pv-proof-ai__panel {
  align-self: start;
  background: var(--pv-paper);
  border: 1px solid var(--pv-border);
  border-radius: var(--pv-r-panel);
  padding: 20px;
  display: flex; flex-direction: column; gap: 14px;
}
.pv-proof-ai__grid { align-items: start; }

/* The ink CTA band and the ink footer are separate elements; a sliver of page
   background showed between them. */
.entry-content > *:last-child { margin-bottom: 0; }
.pv-footer { margin-top: 0; }
.site-footer { background: var(--pv-ink); }

/* Hero — two columns from 980px, matching the design. */
.pv-hero__grid { display: grid; gap: var(--pv-7); align-items: center; }
@media (min-width: 980px) { .pv-hero__grid { grid-template-columns: 1.15fr 1fr; gap: var(--pv-8); } }

.pv-engines { list-style: none; margin: 0 0 var(--pv-4); padding: 0; display: flex; flex-wrap: wrap; gap: var(--pv-2); }
.pv-engines li {
  font-family: var(--pv-mono); font-size: 12px; letter-spacing: .06em;
  color: var(--pv-body);
  border: 1px solid var(--pv-border); border-radius: 999px;
  padding: 8px 14px; background: var(--pv-surface);
}
.pv-surfaces-panel {
  background: var(--pv-paper);
  border: 1px solid var(--pv-border);
  border-radius: var(--pv-r-card);
  padding: 26px;
  display: flex; flex-direction: column; gap: var(--pv-2);
}
.pv-surfaces-panel__k { font-family: var(--pv-mono); font-size: 11px; letter-spacing: var(--pv-ls-eyebrow); text-transform: uppercase; color: var(--pv-copper); }
.pv-surfaces-panel__v { font-size: 26px; font-weight: 800; letter-spacing: -0.02em; color: var(--pv-ink); }
.pv-surfaces-panel__rule { height: 4px; width: 56px; background: var(--pv-red); margin-top: var(--pv-2); }

/* Content placeholders carried over from the design comp. Visible on purpose
   — they mark copy that has not been supplied yet. Remove the class (and the
   element) as real content lands. */
.pv-pending {
  display: inline-block;
  font-family: var(--pv-mono); font-size: 11px; letter-spacing: var(--pv-ls-eyebrow);
  text-transform: uppercase; color: var(--pv-copper);
  border: 1px dashed var(--pv-copper); border-radius: 2px;
  padding: 2px var(--pv-2);
}

/* =========================================================================
   13. MOTION
   ========================================================================= */

@keyframes pvFadeUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
.pv-fade-up { animation: pvFadeUp .5s ease both; }

/* =========================================================================
   14. GENERATEPRESS RESETS
   The parent's container/typography is neutralised — layout is ours.
   ========================================================================= */

/* Folds are full-bleed and manage their own max-width via .pv-wrap, so every
   GP container between <body> and the fold is flattened. */
#page, #content, .site-content, .site-main,
.inside-article, .entry-content, .grid-container {
  max-width: none;
  width: auto;
  padding: 0;
  margin: 0;
  /* GP sets .site-content{display:flex} for its content/sidebar row. Templates
     that output more than one top-level element — single.php emits the article
     and then the CTA band — had those become side-by-side flex items. Folds
     stack; nothing here is ever a flex row. */
  display: block;
}
.entry-content > *:not(.alignwide):not(.alignfull) { max-width: none; }
.separate-containers .inside-article { padding: 0; }
.entry-content:not(:first-child) { margin-top: 0; }
#main > article { border: 0; box-shadow: none; }

/* GP ships .separate-containers .site-main { margin: 20px; }, which left a
   strip of page background between the closing ink band and the ink footer.
   Matching its specificity rather than reaching for !important. */
.separate-containers .site-main,
.one-container .site-main,
.site-content .content-area .site-main { margin: 0; }

/* =========================================================================
   15. PORTED DESIGN BLOCKS
   Folds ported verbatim from the approved design bundle: every visual value
   lives in that markup's own inline styles. This block stops the theme's
   opinionated base rules (measure caps, paragraph margins, heading sizes)
   from interfering — inline styles win on their own, but these rules cover
   the elements the design leaves to the cascade.
   ========================================================================= */

.pv-design p,
.pv-design h1, .pv-design h2, .pv-design h3, .pv-design h4 { max-width: none; }
.pv-design ul, .pv-design ol { margin: 0; padding: 0; }
.pv-design li { margin: 0; }
.pv-design img { max-width: 100%; height: auto; }
.pv-design svg { max-width: 100%; }
.pv-design a { text-decoration: none; }
.pv-design a:hover { text-decoration: none; }

/* =========================================================================
   16. CONVERTED DESIGN PAGES
   Page bodies are generated from the design bundles: layout and typography
   live in the pvd-* classes. The theme's own base rules (paragraph margin,
   measure cap, list padding) must not leak in on top of them, or fold
   heights drift from the design.
   ========================================================================= */

.entry-content :where(p, h1, h2, h3, h4, h5, h6) { margin: 0; max-width: none; }
.entry-content :where(ul, ol) { margin: 0; padding: 0; }
.entry-content :where(li) { margin: 0; }
.entry-content :where(figure, blockquote) { margin: 0; }
.entry-content img { max-width: 100%; height: auto; }
.entry-content a { text-decoration: none; }
.entry-content a:hover { text-decoration: none; }

/* Image slots converted from the design's placeholder notes. A group, not an
   empty core/image — an image block with a caption but no <img> fails block
   validation. Kept deliberately visible so a missing asset is obvious, but
   sized like a photo frame rather than a full-width band, and the caption set
   in sentence case so it reads as a note, not as page copy. */
.pv-slot {
  display: grid; place-content: center; gap: var(--pv-2);
  max-width: 460px; aspect-ratio: 4 / 3;
  margin: var(--pv-5) 0;
  padding: var(--pv-5);
  border: 1px dashed var(--pv-border);
  border-radius: var(--pv-r-card);
  background: var(--pv-paper);
}
.pv-slot__spec {
  font-family: var(--pv-mono);
  font-size: 11px; line-height: 1.5; letter-spacing: .04em;
  text-transform: none;                 /* the design set these in caps */
  color: var(--pv-muted); text-align: center; margin: 0; max-width: 34ch;
}
.pv-slot__spec::before {
  content: "Image pending"; display: block;
  font-size: 10px; letter-spacing: var(--pv-ls-eyebrow); text-transform: uppercase;
  color: var(--pv-copper); margin-bottom: var(--pv-2);
}

/* =========================================================================
   17. BLOG
   ========================================================================= */

.pv-crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: var(--pv-2); margin: 0 0 var(--pv-6); padding: 0;
  font-family: var(--pv-mono); font-size: 11px; letter-spacing: var(--pv-ls-eyebrow); text-transform: uppercase; color: var(--pv-muted); }
.pv-crumbs li + li::before { content: "/"; margin-right: var(--pv-2); color: var(--pv-border); }
.pv-crumbs a { color: var(--pv-muted); }
.pv-crumbs a:hover { color: var(--pv-red); text-decoration: none; }

/* The post header sits above the two-column layout, so a narrow measure here
   left a large dead area to its right. The title runs wider and the intro is
   held to a readable line length instead. */
.pv-single__head { max-width: none; }
.pv-single__title { max-width: 26ch; margin-bottom: var(--pv-5); }
@media (min-width: 1000px) {
  /* Align the header with the body column and let it use the width. */
  .pv-single__title { max-width: 30ch; }
  .pv-single__head .pv-lead { max-width: 62ch; }
}
/* First fold on a post — trim the lead-in so the headline starts higher. */
.pv-single { padding-top: clamp(var(--pv-6), 4vw, var(--pv-7)); }
.pv-byline { font-family: var(--pv-mono); font-size: 12px; letter-spacing: .04em; color: var(--pv-muted);
  display: flex; flex-wrap: wrap; gap: var(--pv-2); align-items: baseline; margin-top: var(--pv-5); max-width: none; }
.pv-byline a { font-weight: 500; }
.pv-byline__updated { color: var(--pv-copper); }
.pv-single__cover { margin: var(--pv-7) 0; }
.pv-single__cover img { width: 100%; border-radius: var(--pv-r-card); border: 1px solid var(--pv-border); display: block; }

/* Body measure — ~70 characters, the readable range for long articles. */
.pv-single .pv-article { max-width: 70ch; font-size: var(--pv-fs-article); line-height: var(--pv-lh-article); }
.pv-single .pv-article > * { max-width: 100%; }

/* Two-column article: sticky contents rail on the left, body on the right.
   Single column below 1000px, where a sticky rail would eat the screen. */
.pv-single__layout { display: block; }
@media (min-width: 1000px) {
  .pv-single__layout.has-toc {
    display: grid;
    grid-template-columns: 264px minmax(0, 1fr);
    gap: clamp(var(--pv-6), 4vw, var(--pv-8));
    align-items: start;
  }
}
.pv-single__body { min-width: 0; }

.pv-single__aside { margin: var(--pv-7) 0; }
@media (min-width: 1000px) {
  .pv-single__aside {
    position: sticky;
    /* clears the sticky header, then a little breathing room */
    top: calc(var(--pv-header-h) + var(--pv-5));
    max-height: calc(100vh - var(--pv-header-h) - var(--pv-7));
    overflow-y: auto;
    overscroll-behavior: contain;
    margin: 0;
  }
}

/* Table of contents */
.pv-toc { border-left: 3px solid var(--pv-copper); padding: var(--pv-1) 0 var(--pv-1) var(--pv-5); }
.pv-toc .pv-eyebrow { margin-bottom: var(--pv-3); display: block; }
.pv-toc ol { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: var(--pv-1); counter-reset: toc; }
.pv-toc li { counter-increment: toc; }
.pv-toc a {
  display: block; padding: 6px 0 6px var(--pv-4); position: relative;
  color: var(--pv-body); font-size: 14px; line-height: 1.4;
  border-left: 2px solid transparent; margin-left: calc(var(--pv-5) * -1 - 3px);
  padding-left: calc(var(--pv-5) + 2px);
  transition: color .15s ease, border-color .15s ease;
}
.pv-toc a::before { content: counter(toc) "."; position: absolute; left: var(--pv-2); color: var(--pv-muted); font-family: var(--pv-mono); font-size: 11px; top: 8px; }
.pv-toc a:hover { color: var(--pv-ink); text-decoration: none; }
/* Current section, set by the scroll spy. */
.pv-toc a.is-current { color: var(--pv-red); border-left-color: var(--pv-red); font-weight: 600; }
.pv-toc a.is-current::before { color: var(--pv-red); }

.pv-single .pv-article h2 { scroll-margin-top: calc(var(--pv-header-h) + 24px); }

.pv-share { display: flex; flex-wrap: wrap; gap: var(--pv-2); align-items: center;
  margin: var(--pv-8) 0 0; padding-top: var(--pv-5); border-top: 1px solid var(--pv-border); max-width: 70ch; }
.pv-share .pv-eyebrow { margin-right: var(--pv-2); }

.pv-authorbox { display: flex; gap: var(--pv-5); align-items: flex-start; margin-top: var(--pv-7);
  padding: var(--pv-5); background: var(--pv-paper); border: 1px solid var(--pv-border);
  border-radius: var(--pv-r-card); max-width: 70ch; }
.pv-authorbox__mark { width: 56px; height: 56px; font-family: var(--pv-mono); font-size: 14px; color: var(--pv-copper); }
.pv-authorbox__name { font-size: 18px; font-weight: 700; margin: var(--pv-1) 0; }
.pv-authorbox__bio { font-size: 15px; color: var(--pv-body); margin: 0; }

/* Hub, category archive, author feed */
/* One scrolling line, not a four-row block. Seventeen categories wrapped into
   a wall that pushed the first post below the fold; a single row keeps the
   filter a strip of chrome instead of a section of the page. */
.pv-chips {
  display: flex; flex-wrap: nowrap; gap: var(--pv-2);
  margin-top: var(--pv-6); padding-bottom: var(--pv-2);
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x proximity; scrollbar-width: thin;
  scrollbar-color: var(--pv-border) transparent;
  /* Fade the trailing edge so the row reads as scrollable rather than clipped. */
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 40px), transparent 100%);
          mask-image: linear-gradient(to right, #000 calc(100% - 40px), transparent 100%);
}
/* Once the row fits, the fade would clip the last chip for no reason. */
@media (min-width: 1600px) {
  .pv-chips { -webkit-mask-image: none; mask-image: none; }
}
.pv-chips::-webkit-scrollbar { height: 6px; }
.pv-chips::-webkit-scrollbar-track { background: transparent; }
.pv-chips::-webkit-scrollbar-thumb { background: var(--pv-border); border-radius: 999px; }
.pv-chips::-webkit-scrollbar-thumb:hover { background: var(--pv-copper); }
.pv-chip { flex: 0 0 auto; white-space: nowrap; scroll-snap-align: start;
  font-family: var(--pv-mono); font-size: 12px; letter-spacing: .06em; text-transform: uppercase;
  padding: 8px 14px; border: 1px solid var(--pv-border); border-radius: 999px; color: var(--pv-body); background: var(--pv-surface); }
.pv-chip:hover { border-color: var(--pv-copper); color: var(--pv-ink); text-decoration: none; }
.pv-chip.is-active { background: var(--pv-ink); border-color: var(--pv-ink); color: var(--pv-on-ink); }

.pv-post-card__link { display: flex; flex-direction: column; gap: var(--pv-3); color: inherit; height: 100%; }
.pv-post-card__link:hover { text-decoration: none; }
.pv-post-card__link:hover .pv-post-card__title { color: var(--pv-red); }
.pv-post-card__cover { display: block; width: 100%; aspect-ratio: 16/9; object-fit: cover;
  border-radius: var(--pv-r-card); border: 1px solid var(--pv-border); background-color: var(--pv-surface); }
.pv-post-card__title { font-size: 18px; line-height: 1.35; font-weight: 700; color: var(--pv-ink); margin: 0; letter-spacing: -0.01em; }
.pv-post-card__excerpt { font-size: 15px; color: var(--pv-body); margin: 0; }

.pv-empty { max-width: 60ch; }
.pv-empty .pv-lead { margin-bottom: var(--pv-3); }

/* Sits at the foot of the archive as its own band: a rule separates it from
   the last row of cards, and it centres so it reads as the end of the page
   rather than a stray line under whichever card ended the grid. */
.pv-pagination {
  margin-top: var(--pv-8); padding-top: var(--pv-6);
  border-top: 1px solid var(--pv-border);
  display: flex; flex-direction: column; align-items: center; gap: var(--pv-3);
}
.pv-pagination .nav-links { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--pv-2); }
.pv-pagination__count {
  margin: 0; font-family: var(--pv-mono); font-size: 12px;
  letter-spacing: .06em; color: var(--pv-muted);
}
.pv-pagination .page-numbers { display: inline-flex; align-items: center; justify-content: center;
  min-width: 40px; height: 40px; padding: 0 var(--pv-3); border: 1px solid var(--pv-border);
  border-radius: var(--pv-r-ctl); color: var(--pv-ink); font-size: 14px; }
.pv-pagination .page-numbers:hover { border-color: var(--pv-copper); text-decoration: none; }
.pv-pagination .page-numbers.current { background: var(--pv-ink); border-color: var(--pv-ink); color: var(--pv-on-ink); }
.pv-pagination .page-numbers.dots { border-color: transparent; }

/* =========================================================================
   18. POST PATTERNS — the writing components
   ========================================================================= */

.pv-takeaway { border: 1px solid var(--pv-border); border-left: 4px solid var(--pv-red);
  border-radius: var(--pv-r-panel); background: var(--pv-paper); padding: var(--pv-5); margin: var(--pv-7) 0; }
.pv-takeaway .pv-eyebrow { display: block; margin-bottom: var(--pv-3); }
.pv-takeaway ul { margin: 0; padding-left: var(--pv-5); }
.pv-takeaway li { margin-bottom: var(--pv-2); }

.pv-statcallout { display: flex; flex-wrap: wrap; gap: var(--pv-4); align-items: baseline;
  border-top: 1px solid var(--pv-border); border-bottom: 1px solid var(--pv-border);
  padding: var(--pv-6) 0; margin: var(--pv-7) 0; }
.pv-statcallout__num { font-size: clamp(38px, 5vw, 56px); font-weight: 800; letter-spacing: -0.03em; line-height: 1; color: var(--pv-ink); }
.pv-statcallout__body { flex: 1 1 260px; }
.pv-statcallout__src { font-family: var(--pv-mono); font-size: 11px; letter-spacing: var(--pv-ls-eyebrow);
  text-transform: uppercase; color: var(--pv-copper); display: block; margin-top: var(--pv-2); }

.pv-pullquote { margin: var(--pv-7) 0; padding-left: var(--pv-5); border-left: 3px solid var(--pv-copper); }
.pv-pullquote p { font-size: var(--pv-fs-lead); line-height: 1.5; font-weight: 500; color: var(--pv-ink); margin-bottom: var(--pv-3); }
.pv-pullquote cite { font-family: var(--pv-mono); font-size: 11px; letter-spacing: var(--pv-ls-eyebrow);
  text-transform: uppercase; color: var(--pv-muted); font-style: normal; }

.pv-comparison { width: 100%; border-collapse: collapse; margin: var(--pv-7) 0; font-size: 15px; }
.pv-comparison th, .pv-comparison td { text-align: left; padding: var(--pv-3) var(--pv-4); border-bottom: 1px solid var(--pv-border); }
.pv-comparison thead th { font-family: var(--pv-mono); font-size: 11px; letter-spacing: var(--pv-ls-eyebrow);
  text-transform: uppercase; color: var(--pv-muted); border-bottom-color: var(--pv-ink); }
.pv-comparison tbody tr:hover { background: var(--pv-paper); }
.pv-tablewrap { overflow-x: auto; }

/* =========================================================================
   19. FOLD HEADER WIDTH
   The design caps section header blocks at max-width:544px (.pvd-25), which
   forced two-line headings and left the right half of the fold empty. The
   headings need 672-842px to set on one line. Overridden with a two-class
   selector so it wins regardless of stylesheet order, and without editing the
   generated design.css.
   ========================================================================= */

.entry-content .pvd-25 { max-width: none; }
.entry-content .pvd-25 > .wp-block-heading { max-width: none; }
.entry-content .pvd-25 > p:not([class*="pvd-14"]) { max-width: 72ch; }

/* Same problem, different container: .pvd-112 caps at 32em, which resolves
   against the wrapper's 16px font rather than the 40px heading inside it — so
   512px, and "Compare the three, line by line." broke over two lines with half
   the row empty. 680px is where the longest of the six headings using this
   container fits on one line; 720px leaves headroom for a longer one later. */
.entry-content .pvd-112 { max-width: 720px; }

/* Founder fold: mascot left, copy right. */
.pv-founder-media { display: block; }
.pv-founder-media img {
  display: block; width: 100%; height: auto;
  max-width: 420px; border-radius: var(--pv-r-card);
}
@media (min-width: 900px) {
  .pv-founder-grid { display: grid; grid-template-columns: minmax(0, 420px) minmax(0, 1fr);
    gap: clamp(var(--pv-6), 4vw, var(--pv-8)); align-items: center; }
}

/* =========================================================================
   20. INK FOLD — SPREAD THE LOWER BLOCK
   The design caps this copy at 34em/30em (~612px). That reads fine inside the
   fold's narrow left column, but when the grid reflows and the block gets a
   full-width row, it leaves the right half empty. Raised to a measure that
   fills the row while staying inside a readable line length.
   ========================================================================= */

.entry-content .pvd-844 { max-width: 62ch; }
.entry-content .pvd-845 { max-width: 52ch; }

/* Founder fold: image and copy as a genuine pair. */
.pv-founder-media { margin: 0; }
.pv-founder-media img { max-width: 380px; width: 100%; height: auto; display: block; }

/* The ink fold's closing copy used to sit inside the narrow left column,
   which ran 650px tall against a 346px card column — 303px of dead space
   bottom-right. It now sits in its own full-width row beneath the grid, laid
   out in two columns so it fills the fold instead of stacking down one side. */
.pv-shift-tail { max-width: 1240px; margin: 0 auto; padding: 0 clamp(20px, 4vw, 48px) clamp(40px, 5vw, 72px); }
@media (min-width: 900px) {
  .pv-shift-tail {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    column-gap: clamp(var(--pv-6), 4vw, var(--pv-8));
    row-gap: var(--pv-5);
    align-items: start;
  }
  .pv-shift-tail > .pvd-844 { grid-column: 1; grid-row: 1 / span 2; max-width: none; }
  .pv-shift-tail > .pvd-845 { grid-column: 2; grid-row: 1; max-width: none; }
  .pv-shift-tail > .pv-passthru { grid-column: 2; grid-row: 2; }
}

/* Services hub: "₹500." was dropping to a second line. The constraint was the
   wrapper .pvd-196 at max-width:544px, not the paragraph — the line needs
   591px to set. Widened to give it headroom. */
.entry-content .pvd-196 { max-width: 760px; }

/* One-time services: the price is the point of these cards, so it sits
   directly under the title at display weight. */
.pv-onetime__price {
  font-size: 22px; font-weight: 800; letter-spacing: -0.02em;
  color: var(--pv-ink); margin: 0;
}
.pv-onetime__note {
  font-family: var(--pv-mono); font-size: 11px; font-weight: 400;
  letter-spacing: .06em; text-transform: uppercase; color: var(--pv-muted);
}

/* =========================================================================
   21. HAND-BUILT HERO (one-time services and the three channel pages)
   These pages have no design bundle, so their hero needs the rhythm the
   converted pages get from the design: a headline with room around it, and
   the CTA row set well clear of the copy rather than tucked under it.
   ========================================================================= */

.pv-hero-title {
  /* Matches the design's hero scale exactly — see .pvd-214 in design.css. */
  font-size: clamp(32px, 4.6vw, 56px);
  line-height: 1.04;
  letter-spacing: -0.035em;
  max-width: 16ch;
  margin-bottom: var(--pv-5);
}
.pv-hero-fold .pv-lead { max-width: 62ch; margin-bottom: 0; }
.pv-hero-fold .pv-cta-row { margin-top: var(--pv-7); gap: var(--pv-3); }
@media (min-width: 900px) {
  .pv-hero-fold { padding-block: clamp(var(--pv-8), 7vw, var(--pv-9)); }
}

/* Equal-height card rows, so a four-across grid does not stagger when one
   card carries a longer description than its neighbours. */
.pv-eq { align-items: stretch; }
.pv-eq > .pv-card { height: 100%; }

/* Buttons in a CTA row share a baseline and wrap together rather than
   drifting apart when one label is longer. */
.pv-cta-row { align-items: center; }
.pv-cta-row > .pv-btn { flex: 0 0 auto; }
@media (max-width: 560px) {
  .pv-cta-row { flex-direction: column; align-items: stretch; }
  .pv-cta-row > .pv-btn { width: 100%; }
}

/* Four across on wide screens; two, then one, as space runs out. */
@media (min-width: 1100px) { .pv-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* =========================================================================
   22. FORMS
   Fluent Forms output, restyled to the design's field treatment so the real
   forms look like the mockups they replaced. Scoped to .pv-formwrap so the
   plugin's own styling is untouched anywhere else.
   ========================================================================= */

.pv-formwrap .fluentform .ff-el-group { margin-bottom: var(--pv-4); }
.pv-formwrap .fluentform .ff-el-input--label label {
  display: block; font-size: 14px; font-weight: 600;
  color: var(--pv-ink); margin-bottom: var(--pv-2);
}
.pv-formwrap .fluentform .ff-el-input--label.ff-el-is-required label:after { color: var(--pv-red); }

.pv-formwrap .fluentform input[type="text"],
.pv-formwrap .fluentform input[type="email"],
.pv-formwrap .fluentform input[type="tel"],
.pv-formwrap .fluentform input[type="url"],
.pv-formwrap .fluentform select,
.pv-formwrap .fluentform textarea {
  width: 100%; padding: var(--pv-3) var(--pv-4);
  font-family: var(--pv-font); font-size: 15px; line-height: 1.5;
  color: var(--pv-ink); background: var(--pv-surface);
  border: 1px solid var(--pv-border); border-radius: var(--pv-r-ctl);
  box-shadow: none; height: auto;
}
.pv-formwrap .fluentform input:focus,
.pv-formwrap .fluentform select:focus,
.pv-formwrap .fluentform textarea:focus {
  border-color: var(--pv-red);
  outline: 2px solid var(--pv-red); outline-offset: 2px;
}
.pv-formwrap .fluentform textarea { min-height: 130px; resize: vertical; }

.pv-formwrap .fluentform .ff-btn-submit,
.pv-formwrap .fluentform button[type="submit"] {
  display: inline-flex; align-items: center; justify-content: center;
  height: 56px; padding-inline: var(--pv-6);
  background: var(--pv-red); color: #fff;
  border: 1px solid transparent; border-radius: var(--pv-r-ctl);
  font-family: var(--pv-font); font-size: 16px; font-weight: 600; line-height: 1;
  cursor: pointer; transition: background-color .15s ease;
}
.pv-formwrap .fluentform .ff-btn-submit:hover { background: var(--pv-red-hover); }

.pv-formwrap .fluentform .error, .pv-formwrap .fluentform .text-danger {
  color: var(--pv-red); font-size: 13px; margin-top: var(--pv-1);
}
.pv-formnote { font-size: 13px; color: var(--pv-muted); margin-top: var(--pv-4); }

/* -------------------------------------------------------------------------
   Footer newsletter — Fluent Forms restyled back to the design's own values.
   The footer ships as verbatim design markup with inline styles; the form is
   the one part that had to become real HTML, so it is restyled here to land
   on the same 45px row, dark ground and red button it had as a mock-up.
   ------------------------------------------------------------------------- */

.pv-footer-signup .fluentform { margin: 0; }
.pv-footer-signup .fluentform .ff-el-group { margin: 0; }
.pv-footer-signup .fluentform .ff-el-form-control {
  font-family: var(--pv-font); font-size: 14px;
  color: #FAF8F5; background: #1C1815;
  border: 1px solid #35302B; border-radius: 4px;
  padding: 11px 13px; width: 100%; outline: none;
  box-shadow: none;
  min-height: 43px; box-sizing: border-box;   /* level with the button */
}
.pv-footer-signup .fluentform .ff-el-form-control::placeholder { color: #8A837C; }
.pv-footer-signup .fluentform .ff-el-form-control:focus { border-color: var(--pv-red); }
.pv-footer-signup .fluentform .ff-btn-submit {
  font-family: var(--pv-font); font-size: 14px; font-weight: 600;
  color: #FFFFFF; background: var(--pv-red);
  border: none; border-radius: 4px; padding: 11px 18px;
  cursor: pointer; width: auto; white-space: nowrap;
}
.pv-footer-signup .fluentform .ff-btn-submit:hover { background: #B0141A; }

/* Input and button share one row, matching the mock-up's flex pair. Fluent
   Forms wraps the groups in a <fieldset>, so that is the flex container — not
   the <form>, whose only child is the fieldset. */
.pv-footer-signup .fluentform .frm-fluent-form fieldset {
  display: flex; gap: 8px; flex-wrap: wrap; align-items: flex-start;
}
.pv-footer-signup .fluentform .ff-el-group { flex: 1 1 130px; min-width: 130px; }
.pv-footer-signup .fluentform .ff-el-group.ff_submit_btn_wrapper { flex: 0 0 auto; min-width: 0; }
.pv-footer-signup .fluentform .ff-el-input--content { width: 100%; }
.pv-footer-signup .fluentform .text-danger, .pv-footer-signup .fluentform .error {
  font-size: 12.5px; color: #FF7A7F; margin-top: 6px;
}
.pv-footer-signup .fluentform .ff-message-success {
  font-size: 14px; line-height: 1.5; color: #B5ADA4;
  border-left: 2px solid var(--pv-red); padding-left: 12px;
}

/* -------------------------------------------------------------------------
   About page — the three published placeholders, replaced.
   ------------------------------------------------------------------------- */

/* The hero was a two-column grid whose right column held an optional photo
   slot that never got a photo. With the slot gone the grid collapses to one
   column, so cap the text or the h1 runs the full 1144px as a single line. */
.pvd-2 > .pvd-3:only-child { max-width: 900px; }   /* px, not em: the column's own font-size is 16px */

/* Portrait fills the founder card's image column without cropping: the
   uploaded mascot is square and .pvd-43's frame was 4:5. */
.pv-about-portrait {
  margin: 0;
  background: var(--pv-paper);
  border-right: 1px solid var(--pv-border);
  display: flex; align-items: center; justify-content: center;
}
.pv-about-portrait img {
  display: block; width: 100%; height: 100%;
  min-height: 260px; object-fit: contain;
}

/* Stack chips replace the CERT 1..5 boxes. .pvd-59's 108px auto-fit grid
   forced four per row and orphaned the fifth; names need to size themselves,
   so the row wraps on content instead. */
/* Base rule for every use; the two-class variant beats .pvd-59 on /about-us/,
   which loads after this file. */
.pv-stack-row, .pvd-59.pv-stack-row { display: flex; flex-wrap: wrap; gap: 10px; }
/* .pvd-663 on the author page is a bordered white panel with no padding of
   its own — its children used to supply it. */
.pvd-663 > .pv-stack-row { padding: clamp(20px, 2.4vw, 28px) clamp(20px, 2.4vw, 30px); }
.pv-stack-chip {
  margin: 0;
  font-family: var(--pv-mono); font-size: 12px;
  letter-spacing: 0.06em; color: var(--pv-body);
  background: var(--pv-surface);
  border: 1px solid var(--pv-border); border-radius: 999px;
  padding: 9px 16px;
}

/* -------------------------------------------------------------------------
   Case studies. No design bundle shipped for this template, so it is built
   from the same pv-* components as the channel pages rather than from
   positional pvd-* classes belonging to another page.
   ------------------------------------------------------------------------- */

/* The case folds sit in the standard 1240px wrap like every other fold on
   the site. An earlier 900px cap here made the content left edge jump 170px
   in and out as you scrolled past them; readability is handled per element
   below instead of by narrowing the whole column. */

/* Before -> after line: the headline claim, so it carries mono numerals and
   sits above the supporting stats rather than inside them. */
.pv-case__ba {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px;
  margin: var(--pv-4) 0 0;
  font-family: var(--pv-mono); font-size: 12px;
  letter-spacing: var(--pv-ls-eyebrow); text-transform: uppercase;
  color: var(--pv-muted);
}
.pv-case__ba b {
  font-family: var(--pv-font); font-size: clamp(19px, 2.1vw, 24px);
  font-weight: 700; letter-spacing: -0.02em; text-transform: none;
  color: var(--pv-ink);
}
.pv-case__ba > span[aria-hidden] { color: var(--pv-red); font-size: 16px; }
.pv-case__span { color: var(--pv-copper); }   /* inline, not pushed to the far edge */

.pv-fold--case .pv-statrow { margin-top: var(--pv-6); }
.pv-case__h {
  margin: var(--pv-7) 0 var(--pv-2);
  font-family: var(--pv-mono); font-size: 12px; font-weight: 500;
  letter-spacing: var(--pv-ls-eyebrow); text-transform: uppercase;
  color: var(--pv-copper);
}
.pv-case__body { margin: 0; max-width: 62ch; }
/* Keep the headline to two lines at the full column width. */
.pv-fold--case > .pv-wrap > h2 { max-width: 26ch; }   /* two lines for all three headlines */
.pv-case__ba { max-width: 62ch; }
.pv-fold--case .pv-hint { margin-top: var(--pv-5); }

/* -------------------------------------------------------------------------
   Projects — covers and cards.
   No client screenshots exist yet, so each card's 16:10 frame carries drawn
   artwork in the brand palette rather than an invented screenshot — three of
   the four cards name fabricated clients, and a browser mockup would read as
   evidence of work that does not exist.
   Replacing one with a real capture is a straight swap of the img src;
   .pv-projcover-wrap and .pvd-477 keep the frame either way.
   ------------------------------------------------------------------------- */

/* Two classes: .pvd-755 carries a 20px inset for the hatched spec text it used
   to hold, and design.css loads after this file. */
.pvd-755.pv-projcover-wrap { padding: 0; background: none; }

/* Artwork sits behind the label rather than replacing it, so the kicker, name
   and meta stay editable blocks. The cover is aria-hidden and the card repeats
   its title below, so the image is decorative and carries an empty alt. */
.pv-projcover { position: relative; overflow: hidden; }
/* Needs .entry-content in front of it: the global `.entry-content img` rule
   forces height:auto, which the 16:10 cards survive only because the artwork
   shares their ratio. The featured frame is taller, and lost 24px to it. */
.entry-content .pv-projcover__bg,
.pv-projcover__bg {
  position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 0; display: block;
  width: 100%; height: 100%; object-fit: cover;
}
/* A scrim under the label, because the motif cannot be trusted to leave the
   bottom-left corner clear at every viewport once object-fit crops it. */
.pv-projcover::after {
  content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(to top,
    rgba(20, 17, 15, 0.72) 0%, rgba(20, 17, 15, 0.28) 38%, rgba(20, 17, 15, 0) 62%);
}
/* Gold carries ink text, so its scrim lightens instead. */
.pv-projcover--gold::after {
  background: linear-gradient(to top,
    rgba(250, 248, 245, 0.80) 0%, rgba(250, 248, 245, 0.32) 38%, rgba(250, 248, 245, 0) 62%);
}
.pv-projcover > span { position: relative; z-index: 2; }
/* The featured wrap is a flex item stretched by the taller text column, so the
   cover takes its height rather than its own 16:10 — otherwise the wrap shows
   a bare strip below the cover. */
/* Stretch rather than height:100%. The wrap centres its child, so a percentage
   height had no definite containing block to resolve against and fell back to
   auto — which for an absolutely positioned replaced element means the img
   takes its intrinsic ratio and drops `bottom`, leaving a strip of frame
   showing under the artwork. Flex stretch gives a definite cross size. */
.pvd-755.pv-projcover-wrap { position: relative; }
.pvd-755.pv-projcover-wrap > .pv-projcover {
  position: absolute; top: 0; right: 0; bottom: 0; left: 0; height: auto; aspect-ratio: auto;
}
.pv-projcover {
  aspect-ratio: 16 / 10; width: 100%;
  display: flex; flex-direction: column; justify-content: flex-end; gap: 4px;
  padding: clamp(16px, 2vw, 22px); box-sizing: border-box;
  font-family: var(--pv-mono);
}
.pv-projcover__kicker {
  font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase;
  opacity: 0.75;
}
.pv-projcover__name {
  font-family: var(--pv-font);
  font-size: clamp(22px, 2.6vw, 32px); font-weight: 800;
  letter-spacing: -0.03em; line-height: 1.05;
}
.pv-projcover__meta { font-size: 11px; letter-spacing: 0.06em; opacity: 0.7; }

.pv-projcover--ink    { background: var(--pv-ink);    color: var(--pv-on-ink); }
.pv-projcover--copper { background: var(--pv-copper); color: #FFFFFF; }
.pv-projcover--gold   { background: var(--pv-gold);   color: var(--pv-ink); }

/* Card body under the cover. .pvd-477 is a flex column, so the body grows and
   the outcome line pins to the bottom — cards in a row end level. */
.pv-proj { overflow: hidden; }
.pv-proj__body {
  display: flex; flex-direction: column; gap: 8px; flex: 1;
  padding: clamp(18px, 2vw, 22px);
}
.pv-proj__title {
  margin: 0; font-size: 19px; font-weight: 800;
  letter-spacing: -0.02em; line-height: 1.2; color: var(--pv-ink);
}
.pv-proj__body-copy {
  margin: 0; flex: 1;
  font-size: 15px; line-height: 1.6; color: var(--pv-body);
}
.pv-proj__outcome {
  margin: 0; padding-top: 12px; border-top: 1px solid var(--pv-border);
  font-family: var(--pv-mono); font-size: 11.5px;
  letter-spacing: 0.04em; color: var(--pv-copper);
}

/* Filter chips were static <p> elements in the design. nav.js gives them the
   behaviour they were drawn for; these are the pressed/idle states. */
.pv-projfilter { cursor: pointer; user-select: none; }
.pv-projfilter[aria-pressed="true"] {
  color: #FFFFFF; background: var(--pv-ink); border-color: var(--pv-ink);
}
.pv-proj[hidden] { display: none; }

/* Author archive feed. .pvd-709 uses auto-fit, so a single post stretched to
   the full 1144px column; auto-fill keeps the empty tracks and the card keeps
   a card's proportions however few posts exist. */
.entry-content .pvd-709 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); }
.pv-authorfeed__cover { display: block; }
.pv-authorfeed__cover img {
  display: block; width: 100%; height: 100%;
  aspect-ratio: 16 / 9; object-fit: cover;
}

/* Case studies on narrow screens: the before/after row and the three stats
   both need more room than 390px gives them side by side. */
@media (max-width: 640px) {
  .pv-case__ba {
    display: grid; grid-template-columns: auto 1fr; gap: 4px 10px;
    align-items: baseline;
  }
  .pv-case__ba > span[aria-hidden] { display: none; }
  .pv-case__span { grid-column: 1 / -1; margin-left: 0; }
  .pv-fold--case .pv-statrow--3 { grid-template-columns: 1fr; gap: var(--pv-4); }
  .pv-fold--case .pv-stat { display: flex; align-items: baseline; gap: var(--pv-3); }
}


/* -------------------------------------------------------------------------
   Design CTA buttons — one box for all of them.

   The conversion kept each button's colour, radius and horizontal padding but
   not its display, so most rendered as plain inline anchors: vertical padding
   painted but produced no layout height, leaving the primary button floating
   ~12px above the secondary beside it and 9px shorter. The few that did carry
   display:flex came out at 58px against the site's 56px control height.

   These are positional classes, so they move if design.css is regenerated —
   the same caveat that already applies to the .pvd-25 / .pvd-196 overrides.
   ------------------------------------------------------------------------- */

.pvd-68.pvd-68,
.pvd-69.pvd-69,
.pvd-85.pvd-85,
.pvd-104.pvd-104,
.pvd-169.pvd-169,
.pvd-211.pvd-211,
.pvd-212.pvd-212,
.pvd-215.pvd-215,
.pvd-284.pvd-284,
.pvd-299.pvd-299,
.pvd-304.pvd-304,
.pvd-361.pvd-361,
.pvd-402.pvd-402,
.pvd-451.pvd-451,
.pvd-471.pvd-471,
.pvd-513.pvd-513,
.pvd-531.pvd-531,
.pvd-622.pvd-622,
.pvd-626.pvd-626,
.pvd-644.pvd-644,
.pvd-645.pvd-645,
.pvd-704.pvd-704,
.pvd-781.pvd-781,
.pvd-839.pvd-839,
.pvd-896.pvd-896 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 56px;                 /* the site's control height, as .pv-btn--lg */
  padding-block: 0;
  line-height: 1;
  box-sizing: border-box;
  text-decoration: none;
}

/* The converter wrapped most buttons in a pass-through <p>. Left as a block it
   becomes the flex item and contributes its own line-height, so the button
   inside sits a few pixels off its neighbour. display:contents drops the
   paragraph out of layout and makes the button itself the flex item. */
.pv-passthru:has(> .pvd-68, > .pvd-69, > .pvd-85, > .pvd-104, > .pvd-169, > .pvd-211, > .pvd-212, > .pvd-215, > .pvd-284, > .pvd-299, > .pvd-304, > .pvd-361, > .pvd-402, > .pvd-451, > .pvd-471, > .pvd-513, > .pvd-531, > .pvd-622, > .pvd-626, > .pvd-644, > .pvd-645, > .pvd-704, > .pvd-781, > .pvd-839, > .pvd-896) {
  display: contents;
}

/* Every design link sits alone inside a pass-through <p> — verified across all
   22 pages: 154 of 154 such paragraphs contain nothing but the anchor. So the
   anchor can safely be made a real box wherever it appears, which fixes the
   remaining tiers (plan-card CTAs, ghost links) without listing each class.
   line-height:0 on the paragraph removes its own leading so the <p> hugs the
   button exactly; the anchor restores line-height for its own label. */
.pv-passthru { margin: 0; line-height: 0; }
.pv-passthru > a {
  display: inline-flex; align-items: center; justify-content: center;
  line-height: 1;
}

/* A card's trailing button pins to the card's foot, so a row of cards whose
   copy runs to different lengths still agrees on where its buttons sit.
   margin-top:auto is inert outside a flex or grid parent — safe everywhere. */
.pv-passthru:last-child { margin-top: auto; }

/* The featured plan card carries 34px of vertical padding against the 30px on
   its neighbours — room the design left for the "Best Value" flag. The cards
   stretch to equal height, so that 4px lifted its button off the line the other
   two sat on. Top padding keeps the flag's breathing room; the foot matches. */
.pvd-150.pvd-150 { padding-bottom: 30px; }


/* Secondary design controls — chips, ghost links, card buttons, the cookie
   banner. Same story as the CTA tier: the conversion dropped their display, so
   two controls with identical padding and font-size still measured differently
   (Copy email address 45px vs Open calendar 38px, side by side in matching
   cards, both specced 11px 18px / 14px). Their own sizes are left alone — only
   the box model is made consistent, so equal specs now render equal. */

.pvd-10.pvd-10,
.pvd-44.pvd-44,
.pvd-90.pvd-90,
.pvd-92.pvd-92,
.pvd-101.pvd-101,
.pvd-102.pvd-102,
.pvd-108.pvd-108,
.pvd-109.pvd-109,
.pvd-110.pvd-110,
.pvd-149.pvd-149,
.pvd-158.pvd-158,
.pvd-191.pvd-191,
.pvd-247.pvd-247,
.pvd-249.pvd-249,
.pvd-479.pvd-479,
.pvd-495.pvd-495,
.pvd-496.pvd-496,
.pvd-528.pvd-528,
.pvd-535.pvd-535,
.pvd-536.pvd-536,
.pvd-706.pvd-706,
.pvd-707.pvd-707,
.pvd-724.pvd-724,
.pvd-727.pvd-727,
.pvd-756.pvd-756,
.pvd-765.pvd-765,
.pvd-934.pvd-934,
.pvd-935.pvd-935,
.pvd-952.pvd-952 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  box-sizing: border-box;
}

/* -------------------------------------------------------------------------
   Blog interlinks.

   Links inside post copy were inheriting the body colour with no underline,
   which made them indistinguishable from the text around them. They now carry
   the brand red plus an underline: colour alone is not a sufficient signal
   (WCAG 1.4.1), and #E01B22 on paper clears AA for body text either way.

   Buttons are excluded — the post CTA pattern lives inside the article body.
   ------------------------------------------------------------------------- */

.pv-article a:not(.pv-btn):not([class*="pv-btn"]) {
  color: var(--pv-red);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  text-decoration-color: rgba(224, 27, 34, 0.4);
  transition: color .15s ease, text-decoration-color .15s ease;
}
.pv-article a:not(.pv-btn):not([class*="pv-btn"]):hover,
.pv-article a:not(.pv-btn):not([class*="pv-btn"]):focus-visible {
  color: #B0141A;
  text-decoration-color: currentColor;
}

/* .entry-content sets text-decoration:none globally; the article body opts back
   in, so this has to win against it. */
.entry-content .pv-article a:not(.pv-btn):not([class*="pv-btn"]) {
  text-decoration: underline;
}

/* =========================================================================
   23. IMPORTED POST COMPONENTS

   The article library ships with its own class names, none of which existed
   in this theme: 223 posts use .pv-cta, .pv-author and .pv-btn-alt, 95 use
   .pv-infographic and .pv-mirror, 89 use .pv-related. Unstyled, .pv-btn and
   .pv-btn-alt rendered as transparent text where buttons should be.

   Aliased onto the components already here rather than restyled, so whatever
   generates these posts keeps working and the look stays one system.
   ========================================================================= */

/* Buttons — bare .pv-btn is the primary action in these posts, -alt the
   secondary. The double-dash variants used elsewhere still win, since they
   are declared after the base. */
.pv-article .pv-btn { background: var(--pv-red); color: #fff; }
.pv-article .pv-btn:hover { background: var(--pv-red-hover); color: #fff; }
.pv-article .pv-btn--secondary,
.pv-article .pv-btn-alt {
  background: transparent; color: var(--pv-ink); border-color: var(--pv-border);
}
.pv-article .pv-btn--secondary:hover,
.pv-article .pv-btn-alt:hover {
  background: var(--pv-surface); border-color: var(--pv-copper); color: var(--pv-ink);
}

/* End-of-post CTA. Surface rather than ink: it sits mid-prose, and the buttons
   inside it are already styled for a light ground. */
.pv-cta {
  margin: var(--pv-8) 0;
  padding: var(--pv-6);
  background: var(--pv-surface);
  border: 1px solid var(--pv-border);
  border-top: 4px solid var(--pv-red);
  border-radius: var(--pv-r-card);
}
.pv-cta h2 { margin: 0 0 var(--pv-3); font-size: clamp(22px, 2.4vw, 28px); }
.pv-cta p { margin: 0 0 var(--pv-4); }
.pv-cta p:last-child { margin: 0; display: flex; flex-wrap: wrap; gap: var(--pv-3); }

/* Byline block — same treatment as the template's own author box. */
.pv-author {
  margin: var(--pv-7) 0;
  padding: var(--pv-5);
  background: var(--pv-paper);
  border: 1px solid var(--pv-border);
  border-radius: var(--pv-r-card);
}
.pv-author p { margin: 0; font-size: 15px; color: var(--pv-body); }

/* Related reads. */
.pv-related {
  margin: var(--pv-7) 0;
  padding: var(--pv-5);
  border: 1px solid var(--pv-border);
  border-left: 4px solid var(--pv-copper);
  border-radius: var(--pv-r-panel);
  background: var(--pv-paper);
}
.pv-related .pv-eyebrow { display: block; margin-bottom: var(--pv-3); }
.pv-related ul { margin: 0; padding-left: var(--pv-5); }
.pv-related li { margin-bottom: var(--pv-2); }

/* Figures. */
.pv-figure, .pv-infographic { margin: var(--pv-7) 0; }
.pv-figure img, .pv-infographic img {
  display: block; width: 100%; height: auto;
  border: 1px solid var(--pv-border); border-radius: var(--pv-r-card);
  background: var(--pv-surface);
}
.pv-figure figcaption, .pv-infographic figcaption {
  margin-top: var(--pv-3);
  font-size: 14px; line-height: 1.5; color: var(--pv-muted);
}

/* Comparison panel — heading plus a table, so the table gets the same
   treatment as .pv-comparison and scrolls rather than overflowing. */
.pv-mirror { margin: var(--pv-7) 0; }
.pv-mirror > h3 { margin: 0 0 var(--pv-4); font-size: clamp(18px, 2vw, 22px); }
.pv-mirror table {
  width: 100%; border-collapse: collapse; font-size: 15px;
  display: block; overflow-x: auto; white-space: normal;
}
.pv-mirror th, .pv-mirror td {
  text-align: left; padding: var(--pv-3) var(--pv-4);
  border-bottom: 1px solid var(--pv-border); vertical-align: top;
}
.pv-mirror thead th {
  font-family: var(--pv-mono); font-size: 11px;
  letter-spacing: var(--pv-ls-eyebrow); text-transform: uppercase;
  color: var(--pv-muted); border-bottom-color: var(--pv-ink); white-space: nowrap;
}
.pv-mirror tbody th[scope="row"] { font-weight: 600; color: var(--pv-ink); }
.pv-mirror tbody tr:hover { background: var(--pv-paper); }

/* Core block tables inside articles get the same treatment. */
.pv-article .wp-block-table table { width: 100%; border-collapse: collapse; font-size: 15px; }
.pv-article .wp-block-table th, .pv-article .wp-block-table td {
  text-align: left; padding: var(--pv-3) var(--pv-4); border-bottom: 1px solid var(--pv-border);
}
.pv-article .wp-block-table thead th {
  font-family: var(--pv-mono); font-size: 11px; letter-spacing: var(--pv-ls-eyebrow);
  text-transform: uppercase; color: var(--pv-muted); border-bottom-color: var(--pv-ink);
}
.pv-article .wp-block-table { overflow-x: auto; margin: var(--pv-7) 0; }

/* =========================================================================
   24. CASE STUDY GRID

   Three across, equal height, every card the same six parts. Cards end level
   because the grid stretches them and the body is a flex column with the
   results list pushed to the foot — not because the copy happens to match.

   Covers are typographic tiles carrying the headline metric, sized 16:10 so a
   real Search Console screenshot drops straight in later: replace the cover
   div with <img> and nothing else moves.
   ========================================================================= */

.pv-cs-grid {
  display: grid;
  gap: var(--pv-5);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  align-items: stretch;
  margin-top: var(--pv-6);
}
@media (min-width: 1100px) {
  .pv-cs-grid { grid-template-columns: repeat(3, 1fr); }
}
/* Every row the same height, not just every card within a row — otherwise the
   grid steps by 20-odd pixels between rows as you scroll. */
.pv-cs-grid { grid-auto-rows: 1fr; }

.pv-cs {
  display: flex; flex-direction: column;
  background: var(--pv-surface);
  border: 1px solid var(--pv-border);
  border-radius: var(--pv-r-card);
  overflow: hidden;
}

/* Cover ---------------------------------------------------------------- */
.pv-cs__cover {
  aspect-ratio: 16 / 10;
  display: flex; flex-direction: column; justify-content: flex-end; gap: 2px;
  padding: var(--pv-5);
  font-family: var(--pv-mono);
}
.pv-cs__cover img { display: block; width: 100%; height: 100%; object-fit: cover; }
.pv-cs__metric {
  font-family: var(--pv-font);
  font-size: clamp(30px, 3.4vw, 44px); font-weight: 800;
  letter-spacing: -0.035em; line-height: 1;
}
.pv-cs__metric-label {
  font-size: 11px; letter-spacing: var(--pv-ls-eyebrow);
  text-transform: uppercase; opacity: .8;
}
.pv-cs__cover--ink    { background: var(--pv-ink);     color: var(--pv-on-ink); }
.pv-cs__cover--copper { background: var(--pv-copper);  color: #FFFFFF; }
.pv-cs__cover--gold   { background: var(--pv-gold);    color: var(--pv-ink); }
.pv-cs__cover--red    { background: var(--pv-red);     color: #FFFFFF; }

/* Body ----------------------------------------------------------------- */
.pv-cs__body {
  display: flex; flex-direction: column; gap: var(--pv-3);
  padding: var(--pv-5); flex: 1;
}
.pv-cs__chip {
  margin: 0; font-family: var(--pv-mono); font-size: 11px;
  letter-spacing: var(--pv-ls-eyebrow); text-transform: uppercase;
  color: var(--pv-copper);
}
.pv-cs__title {
  margin: 0; font-size: 19px; line-height: 1.25;
  font-weight: 800; letter-spacing: -0.02em; color: var(--pv-ink);
}
.pv-cs__block {
  margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--pv-body);
}
.pv-cs__block strong { color: var(--pv-ink); }

/* Results sit at the foot, so cards in a row line up on the divider. */
.pv-cs__results {
  list-style: none; margin: auto 0 0; padding: var(--pv-4) 0 0;
  border-top: 1px solid var(--pv-border);
  display: flex; flex-direction: column; gap: var(--pv-2);
}
.pv-cs__results li {
  position: relative; padding-left: 22px;
  font-size: 14.5px; line-height: 1.5; color: var(--pv-ink); font-weight: 600;
}
.pv-cs__results li::before {
  content: ''; position: absolute; left: 0; top: .45em;
  width: 12px; height: 2px; background: var(--pv-red);
}
.pv-cs__meta {
  margin: 0; font-family: var(--pv-mono); font-size: 11px;
  letter-spacing: var(--pv-ls-eyebrow); text-transform: uppercase;
  color: var(--pv-muted);
}

/* Closing card — same shell, no cover, so the ninth slot reads as an
   invitation rather than a gap. */
.pv-cs--cta {
  background: var(--pv-paper);
  border-color: var(--pv-copper);
  border-style: dashed;
}
.pv-cs--cta .pv-cs__body { justify-content: center; gap: var(--pv-4); }
.pv-cs__cta-row { margin: 0; display: flex; flex-wrap: wrap; gap: var(--pv-3); }

.pv-fold--cases .pv-wrap { max-width: var(--pv-max); }

/* Screenshot covers. The exports are wide and short (2.2:1 to 3.6:1) against a
   16:10 frame, so they are anchored to the top — that keeps the metric row,
   which is the part carrying the numbers, visible on every card while the
   graph below it crops. */
.pv-cs__cover--shot { padding: 0; background: var(--pv-paper); display: block; }
.pv-cs__cover--shot img {
  display: block; width: 100%; height: 100%;
  object-fit: cover; object-position: top center;
}