/* ==========================================================================
   Ask Cezar landing — V2 (polished)
   Tokens are declared ONCE here. The original bundle emitted every @font-face
   and :root block twice; that duplication is gone.
   ========================================================================== */

/* ---------- Fonts ---------- */
@font-face{font-family:'Manrope';src:url("assets/manrope-200.ttf") format('truetype');font-weight:200;font-style:normal;font-display:swap}
@font-face{font-family:'Manrope';src:url("assets/manrope-300.ttf") format('truetype');font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:'Manrope';src:url("assets/manrope-400.ttf") format('truetype');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Manrope';src:url("assets/manrope-500.ttf") format('truetype');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Manrope';src:url("assets/manrope-600.ttf") format('truetype');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'Manrope';src:url("assets/manrope-700.ttf") format('truetype');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'Manrope';src:url("assets/manrope-800.ttf") format('truetype');font-weight:800;font-style:normal;font-display:swap}

/* ---------- Palette ---------- */
:root{
  --ink-950:#14171B;--ink-900:#1B1F25;--ink-800:#262B33;--ink-700:#363D48;
  --gray-600:#5B6472;--gray-500:#7A8291;--gray-400:#9DA3AF;--gray-300:#C7CBD3;
  --gray-200:#DFE1E6;--gray-100:#EDEDEA;--gray-50:#F5F4F0;
  --paper-0:#FBFAF7;--paper-1:#F3F2ED;
  --accent-700:#B6521F;--accent-600:#D8672E;--accent-500:#E67A3E;--accent-400:#F0964F;
  --accent-100:#FBE3D2;--accent-050:#FCEEE3;
  --good-600:#2E7D4F;--good-100:#DEF0E4;
  --warn-600:#B87A17;--warn-100:#FBEACD;
  --bad-600:#C4432E;--bad-100:#FADAD2;
  --info-600:#2C5FB0;--info-100:#DCE7F9;

  /* Contrast-safe derivatives.
     --accent-600 on white is 3.6:1 and fails WCAG AA for body-size text and
     for white-on-accent button labels, so text/CTA use darker steps.
     Revert these two lines to var(--accent-600) to restore the original hue. */
  --accent-text:#9E4517;              /* 5.6:1 on --paper-1 */
  --accent-cta:var(--accent-700);     /* white label = 5.0:1 */

  --fg-primary:var(--ink-950);
  --fg-secondary:var(--gray-600);
  --fg-tertiary:var(--gray-600);      /* was --gray-500 (3.4:1 — failed AA) */
  --fg-muted:var(--gray-600);         /* was --gray-400/300 in strips */
  --fg-on-dark:#F5F4F0;--fg-on-accent:#FBF7F2;

  --surface-page:var(--paper-1);--surface-page-alt:var(--paper-0);
  --surface-card:#FFFFFF;--surface-dark:var(--ink-950);--surface-dark-alt:var(--ink-900);
  --border-subtle:var(--gray-200);--border-default:var(--gray-300);
  --border-on-dark:rgba(245,244,240,0.16);

  --accent:var(--accent-600);--accent-hover:var(--accent-700);--accent-tint:var(--accent-100);
  --score-good:var(--good-600);--score-warn:var(--warn-600);--score-bad:var(--bad-600);
  --focus-ring:var(--accent-700);     /* 4.5:1 on paper, 3.7:1 on ink — passes both */
}

/* ---------- Type ---------- */
:root{
  --font-body:'Manrope',-apple-system,BlinkMacSystemFont,sans-serif;
  --font-display:'Manrope',-apple-system,BlinkMacSystemFont,sans-serif;
  --font-mono:'SF Mono',ui-monospace,monospace;
  --text-eyebrow:11px;--text-xs:12px;--text-sm:14px;--text-body:16px;--text-md:18px;
  --text-lg:22px;--text-xl:28px;--text-2xl:36px;--text-3xl:48px;--text-4xl:64px;--text-5xl:84px;
  --lh-tight:1.05;--lh-snug:1.2;--lh-normal:1.45;--lh-loose:1.65;
  --ls-eyebrow:0.14em;--ls-tight:-0.02em;--ls-normal:0;
  --fw-light:300;--fw-regular:400;--fw-medium:500;--fw-semibold:600;--fw-bold:700;--fw-extrabold:800;
}

/* ---------- Space / motion ---------- */
:root{
  --space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:24px;--space-6:32px;
  --space-7:48px;--space-8:64px;--space-9:96px;--space-10:128px;
  --radius-sm:6px;--radius-md:10px;--radius-lg:16px;--radius-xl:24px;--radius-pill:999px;
  --shadow-sm:0 1px 2px rgba(20,23,27,0.06);
  --shadow-md:0 8px 24px -8px rgba(20,23,27,0.16);
  --shadow-lg:0 24px 48px -12px rgba(20,23,27,0.22);
  --container-max:1280px;
  --ease-standard:cubic-bezier(.4,0,.2,1);--duration-fast:120ms;--duration-normal:200ms;
}

/* ==========================================================================
   Responsive scale
   Every size that used to be a hardcoded px value in the inline styles now
   lives here, so one media query moves the whole page.
   ========================================================================== */
:root{
  --gutter:48px;
  --sect-y:var(--space-9);
  --gap-lg:64px;
  --hero-min:820px;
  --hero-pad-b:88px;
  --h1:clamp(38px,8.5vw,76px);
  --h2:clamp(26px,4.4vw,40px);
  --who:clamp(20px,3.2vw,34px);
  --cta-h2:clamp(28px,4.8vw,44px);
  --photo-min:clamp(220px,44vw,360px);
}
.pp-rhythm-compact{
  --sect-y:56px;
  --gap-lg:40px;
  --hero-min:640px;
  --hero-pad-b:56px;
  --h1:clamp(34px,7vw,54px);
  --h2:clamp(24px,3.4vw,30px);
  --who:clamp(19px,2.6vw,26px);
  --cta-h2:clamp(26px,3.8vw,34px);
}
@media (max-width:1024px){
  :root{--gutter:32px;--sect-y:72px;--gap-lg:40px;--hero-min:min(720px,90svh)}
}
@media (max-width:640px){
  :root{--gutter:20px;--sect-y:56px;--hero-pad-b:44px;--hero-min:min(620px,88svh);--gap-lg:32px}
}

/* ---------- Base ---------- */
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;
  font-family:var(--font-body);
  font-size:var(--text-body);
  color:var(--fg-primary);
  background:var(--surface-page);
  -webkit-font-smoothing:antialiased;
}
img,svg,video{max-width:100%;height:auto}
a{color:var(--accent-text);text-decoration:none}
a:hover{color:var(--accent-700);text-decoration:underline}
::selection{background:var(--accent-100);color:var(--ink-950)}

:where(a,button,input,summary,[tabindex]):focus-visible{
  outline:3px solid var(--focus-ring);
  outline-offset:2px;
  border-radius:var(--radius-sm);
}
.pp-on-dark :where(a,button,input,[tabindex]):focus-visible{outline-color:var(--accent-400)}

.pp-sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}
.pp-skip{
  position:absolute;left:var(--gutter);top:-100px;z-index:100;
  background:var(--ink-950);color:#fff;padding:12px 20px;
  border-radius:var(--radius-pill);font-size:var(--text-sm);font-weight:var(--fw-semibold);
  transition:top var(--duration-normal) var(--ease-standard);
}
.pp-skip:focus{top:12px;color:#fff;text-decoration:none}

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

/* ---------- Layout helpers ---------- */
.pp-root{width:100%;overflow-x:clip}
.pp-container{max-width:var(--container-max);margin:0 auto}
.pp-section{padding:var(--sect-y) var(--gutter)}
.pp-section-top{padding:var(--sect-y) var(--gutter) 0}

/* ==========================================================================
   Buttons
   Replaces the design-system <Button>, which silently dropped the `style`
   prop (so the hero's light border and the footer's full-width never applied)
   and could not render an <a> or a submit button. Sizes/padding match 1:1.
   ========================================================================== */
.pp-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-family:var(--font-body);font-weight:var(--fw-semibold);line-height:1.2;
  padding:12px 22px;font-size:var(--text-sm);
  border:1px solid transparent;border-radius:var(--radius-pill);
  background:var(--ink-950);color:#fff;
  cursor:pointer;text-decoration:none;white-space:nowrap;
  transition:filter var(--duration-fast) var(--ease-standard);
}
.pp-btn:hover{filter:brightness(1.08);color:#fff;text-decoration:none}
.pp-btn:disabled{opacity:.5;cursor:not-allowed;filter:none}
.pp-btn--sm{padding:8px 16px;font-size:13px}
.pp-btn--lg{padding:15px 28px;font-size:15px}
.pp-btn--accent{background:var(--accent-cta);color:#fff}
.pp-btn--secondary{background:transparent;color:var(--fg-primary);border-color:var(--border-default)}
.pp-btn--secondary:hover{color:var(--fg-primary)}
.pp-btn--on-dark{background:transparent;color:#fff;border-color:rgba(245,244,240,.55)}
.pp-btn--on-dark:hover{color:#fff;background:rgba(245,244,240,.08)}
.pp-btn--block{width:100%}
@media (pointer:coarse){.pp-btn{min-height:44px}}

/* ---------- Nav ---------- */
.pp-navbar{
  position:sticky;top:0;z-index:20;
  background:color-mix(in srgb,var(--paper-1) 92%,transparent);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  border-bottom:1px solid var(--border-subtle);
}
@supports not (background:color-mix(in srgb,red 50%,transparent)){
  .pp-navbar{background:rgba(243,242,237,.94)}
}
.pp-nav{
  max-width:var(--container-max);margin:0 auto;
  padding:14px var(--gutter);
  display:flex;align-items:center;justify-content:space-between;
  gap:var(--space-5);flex-wrap:wrap;
}
.pp-logo{
  font-size:20px;font-weight:var(--fw-extrabold);font-family:var(--font-display);
  letter-spacing:-0.01em;color:var(--fg-primary);flex:none;
}
.pp-logo:hover{color:var(--fg-primary);text-decoration:none}
/* Glasses mark + "Ask Cezar". "Ask" is set lighter so the name carries the
   weight. The mark's <img> is alt="" because the text beside it names it. */
.pp-logo,.pp-footer-brand-name{display:inline-flex;align-items:center;gap:10px}
.pp-brandmark{display:block;height:20px;width:auto;flex:none}
.pp-footer-brand-name .pp-brandmark{height:22px}
.pp-logo-ask{font-weight:var(--fw-medium)}

/* Plain text links — the bordered pills and their decorative dots are gone. */
.pp-navlinks{
  list-style:none;margin:0;padding:0;
  display:flex;align-items:center;gap:var(--space-6);
  flex:1 1 auto;justify-content:center;flex-wrap:wrap;
}
.pp-navlink{
  font-size:var(--text-sm);font-weight:var(--fw-semibold);
  color:var(--fg-secondary);
  padding:6px 2px;
  border-bottom:2px solid transparent;
  transition:color var(--duration-fast) var(--ease-standard),
             border-color var(--duration-fast) var(--ease-standard);
}
.pp-navlink:hover{color:var(--fg-primary);border-bottom-color:var(--accent-500);text-decoration:none}
.pp-navlink[aria-current="page"]{color:var(--fg-primary);border-bottom-color:var(--accent-500)}
.pp-navactions{display:flex;align-items:center;gap:var(--space-3);flex:none}

/* Below 800px the bar folds to two rows: brand + CTA, then the links.
   No hamburger, nothing hidden, no JS. */
@media (max-width:800px){
  .pp-nav{row-gap:var(--space-3);padding:12px var(--gutter)}
  .pp-logo{order:1}
  .pp-navactions{order:2}
  .pp-navlinks{order:3;flex:1 1 100%;justify-content:flex-start;gap:var(--space-5)}
}
@media (max-width:640px){
  .pp-nav{padding:10px var(--gutter);row-gap:var(--space-2)}
  .pp-navlinks{gap:var(--space-4)}
  .pp-navlink{font-size:13px;padding:4px 2px}
}
/* Keeps logo + CTA on one row down to 320px now the logo carries a mark. */
@media (max-width:400px){
  .pp-nav{column-gap:var(--space-3)}
  .pp-logo{font-size:18px;gap:8px}
  .pp-logo .pp-brandmark{height:18px}
}

/* ---------- Hero ---------- */
.pp-hero{
  position:relative;min-height:var(--hero-min);
  display:flex;flex-direction:column;justify-content:flex-end;
  padding:calc(var(--sect-y) * .6) var(--gutter) var(--hero-pad-b);
  color:#fff;
}
.pp-hero-inner{
  max-width:var(--container-max);width:100%;margin:0 auto;
  display:flex;justify-content:space-between;align-items:flex-end;
  gap:var(--space-7);flex-wrap:wrap;
}
.pp-hero-copy{flex:1 1 480px;max-width:660px}
.pp-eyebrow{
  font-size:var(--text-eyebrow);font-weight:var(--fw-bold);
  letter-spacing:var(--ls-eyebrow);text-transform:uppercase;
  border-bottom:2px solid var(--accent-500);
  display:inline-block;padding-bottom:4px;margin-bottom:var(--space-5);
}
.pp-hero h1{
  font-size:var(--h1);font-weight:var(--fw-extrabold);
  letter-spacing:var(--ls-tight);line-height:1.02;margin:0 0 var(--space-5);
}
.pp-hero-body{
  font-size:var(--text-md);line-height:var(--lh-normal);
  max-width:480px;margin:0 0 var(--space-6);
}
.pp-hero-actions{display:flex;gap:var(--space-4);flex-wrap:wrap}
.pp-hero-badges{display:flex;flex-direction:column;gap:var(--space-3);flex:1 1 260px;max-width:320px}
.pp-badge{
  border-radius:var(--radius-lg);padding:var(--space-4);
  display:flex;gap:var(--space-3);align-items:center;
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
}
.pp-badge-icon{
  width:56px;height:56px;border-radius:var(--radius-md);flex:none;
  display:flex;align-items:center;justify-content:center;
  font-weight:var(--fw-extrabold);font-size:var(--text-md);color:#fff;
}
.pp-badge-title{font-size:13px;font-weight:var(--fw-bold);line-height:1.3}
.pp-badge-link{font-size:var(--text-xs);font-weight:var(--fw-semibold);margin-top:6px;display:inline-block}

@media (max-width:640px){
  .pp-hero-badges{max-width:none;flex-basis:100%}
  .pp-hero-actions .pp-btn{flex:1 1 auto}
}

/* ---------- Strip (Trusted by) ---------- */
.pp-strip{padding:var(--space-6) var(--gutter);background:var(--paper-0)}
.pp-strip-inner{
  max-width:var(--container-max);margin:0 auto;
  display:flex;gap:var(--space-7);align-items:center;justify-content:center;flex-wrap:wrap;
}
.pp-strip-label{
  font-size:var(--text-eyebrow);font-weight:var(--fw-bold);
  letter-spacing:var(--ls-eyebrow);text-transform:uppercase;
  color:var(--fg-secondary);                 /* was --gray-400 (2.4:1) */
  border-bottom:2px solid var(--accent-500);padding-bottom:3px;
}
.pp-strip-name{
  font-size:15px;font-weight:var(--fw-bold);
  color:var(--fg-muted);                     /* was --gray-400 / --gray-300 */
  font-family:var(--font-display);
}
@media (max-width:640px){
  .pp-strip-inner{gap:var(--space-4) var(--space-5)}
  .pp-strip-name{font-size:var(--text-sm)}
}

/* ---------- Who we are ---------- */
.pp-who{display:flex;gap:var(--gap-lg);align-items:baseline;flex-wrap:wrap}
.pp-who-label{
  font-size:var(--text-eyebrow);font-weight:var(--fw-bold);
  letter-spacing:var(--ls-eyebrow);text-transform:uppercase;
  border-bottom:2px solid var(--accent-500);padding-bottom:4px;flex:none;
}
.pp-who-text{
  font-size:var(--who);font-weight:var(--fw-semibold);
  letter-spacing:-0.01em;line-height:1.3;max-width:820px;margin:0;
}

/* ---------- How it works ---------- */
.pp-how{display:flex;gap:var(--gap-lg);flex-wrap:wrap}
.pp-how-copy{flex:1 1 320px;min-width:min(320px,100%)}
.pp-how h2{
  font-size:var(--h2);font-weight:var(--fw-extrabold);
  letter-spacing:var(--ls-tight);line-height:1.1;margin:0 0 var(--space-6);
}
.pp-steps{display:flex;flex-direction:column;gap:var(--space-6)}
.pp-step{display:flex;gap:var(--space-5)}
.pp-step-n{
  font-size:var(--text-sm);font-weight:var(--fw-bold);color:var(--fg-secondary);
  font-family:var(--font-display);flex:none;padding-top:2px;
}
.pp-energy-expressive .pp-step-n{
  width:28px;height:28px;border-radius:50%;
  background:var(--accent-cta);color:#fff;padding-top:0;
  display:flex;align-items:center;justify-content:center;font-size:13px;
}
.pp-step-title{font-weight:var(--fw-bold);font-size:var(--text-md);margin-bottom:6px}
.pp-step-desc{font-size:15px;color:var(--fg-secondary);line-height:1.5;max-width:420px}
.pp-how-photo{
  flex:1 1 320px;min-width:min(320px,100%);
  border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-md);
  display:flex;
}
/* Fills the panel at whatever height the copy column sets, cropping rather
   than letterboxing — the source is a 3:2 landscape. */
.pp-how-photo img{
  width:100%;flex:1;min-height:var(--photo-min);
  object-fit:cover;object-position:center;display:block;
}

/* ---------- Sample report ---------- */
.pp-sample{
  background:var(--paper-0);padding:var(--sect-y) var(--gutter);
  border-top:1px solid var(--border-subtle);border-bottom:1px solid var(--border-subtle);
}
.pp-sample-head{
  display:flex;justify-content:space-between;align-items:flex-end;
  gap:var(--space-5);flex-wrap:wrap;margin-bottom:var(--space-7);
}
.pp-sample-head h2{
  font-size:var(--h2);font-weight:var(--fw-extrabold);letter-spacing:var(--ls-tight);margin:0;
}
.pp-sample-body{display:flex;gap:var(--space-7);align-items:center;flex-wrap:wrap}
.pp-sample-metrics{display:flex;flex-direction:column;gap:var(--space-3);flex:1 1 220px;min-width:220px}
@media (max-width:640px){
  .pp-sample-body{gap:var(--space-5);justify-content:center}
}

/* ---------- Client strip ---------- */
.pp-clients-head{
  max-width:var(--container-max);margin:0 auto var(--space-7);
  display:flex;justify-content:space-between;gap:var(--space-6);flex-wrap:wrap;
}
.pp-clients-head h2{
  font-size:var(--h2);font-weight:var(--fw-extrabold);letter-spacing:var(--ls-tight);margin:0;flex:1 1 320px;
}
.pp-clients-aside{flex:0 1 420px}
.pp-clients-aside p{font-size:var(--text-body);color:var(--fg-secondary);line-height:1.5;margin:0 0 var(--space-5)}
.pp-marquee-eyebrow{
  max-width:var(--container-max);margin:0 auto var(--space-5);
  padding:0 var(--gutter);
  font-size:var(--text-eyebrow);font-weight:var(--fw-bold);
  letter-spacing:var(--ls-eyebrow);text-transform:uppercase;
  color:var(--fg-secondary);
}
.pp-cardrail{
  --card-gap:clamp(40px,5vw,72px);
  --fade:clamp(20px,7vw,90px);
  overflow:hidden;padding-bottom:var(--sect-y);
  /* Feathered edges so cards enter and leave rather than being clipped. */
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 var(--fade),#000 calc(100% - var(--fade)),transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0,#000 var(--fade),#000 calc(100% - var(--fade)),transparent 100%);
}
.pp-cardrail:focus-visible{outline-offset:-3px}

.pp-marquee-track{display:flex;width:max-content;animation:pp-marquee 42s linear infinite}
.pp-marquee-group{display:flex}
/* Cards carry their own right margin instead of the track using `gap`, so one
   group is exactly 50% of the track and the -50% loop point is seamless. */
@keyframes pp-marquee{
  from{transform:translateX(0)}
  to{transform:translateX(-50%)}
}
.pp-cardrail:hover .pp-marquee-track,
.pp-cardrail:focus-within .pp-marquee-track{animation-play-state:paused}

/* Logo lockups sit directly on the page — no card, no fill, no border. */
.pp-logo-item{
  display:flex;align-items:center;gap:var(--space-3);
  flex:none;margin-right:var(--card-gap);
  color:var(--fg-secondary);
}
.pp-logo-mark{
  width:30px;height:30px;flex:none;
  fill:currentColor;stroke:none;
}
.pp-logo-name{
  font-family:var(--font-display);font-weight:var(--fw-bold);
  font-size:var(--text-md);line-height:1;letter-spacing:-0.01em;
  white-space:nowrap;
}
/* Icons that already spell the brand name. The text label would repeat the
   glyph, so it is hidden visually but kept for screen readers, and the mark is
   sized by height so it reads at the same weight as the mark+text lockups. */
.pp-logo-item--wordmark .pp-logo-mark{width:auto;height:22px}
.pp-logo-item--wordmark .pp-logo-name{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}
@media (max-width:640px){
  .pp-logo-mark{width:24px;height:24px}
  .pp-logo-item--wordmark .pp-logo-mark{width:auto;height:18px}
  .pp-logo-name{font-size:var(--text-body)}
}

@media (prefers-reduced-motion:reduce){
  .pp-cardrail{overflow-x:auto;scrollbar-width:thin;-webkit-overflow-scrolling:touch}
  .pp-marquee-track{animation:none}
  .pp-marquee-group[aria-hidden]{display:none}
}

/* ---------- CTA ---------- */
.pp-cta{
  background:var(--ink-950);color:#fff;
  padding:var(--sect-y) var(--gutter);text-align:center;
}
.pp-energy-expressive .pp-cta{
  background:radial-gradient(60% 90% at 50% 0%,var(--accent-700) 0%,var(--ink-950) 55%);
}
.pp-cta h2{
  font-size:var(--cta-h2);font-weight:var(--fw-extrabold);
  letter-spacing:var(--ls-tight);margin:0 0 var(--space-3);
}
.pp-cta-sub{color:rgba(245,244,240,.78);margin:0 0 var(--space-6);font-size:var(--text-body)}
.pp-cta-form{
  display:flex;gap:var(--space-3);justify-content:center;flex-wrap:wrap;
  max-width:520px;margin:0 auto;
}
.pp-cta-form input{
  flex:1 1 260px;min-width:0;
  padding:14px 20px;border-radius:var(--radius-pill);
  border:1px solid var(--border-on-dark);
  background:rgba(245,244,240,.08);color:#fff;
  font:inherit;font-size:var(--text-body);outline:none;
}
.pp-cta-form input::placeholder{color:rgba(245,244,240,.55)}
.pp-cta-form input:focus{border-color:var(--accent-400)}
@media (max-width:520px){
  .pp-cta-form input,.pp-cta-form .pp-btn{flex:1 1 100%}
}

/* ---------- Form status ---------- */
.pp-status{
  font-size:var(--text-sm);margin:var(--space-3) 0 0;min-height:1.2em;
  font-weight:var(--fw-medium);
}
.pp-cta .pp-status{color:rgba(245,244,240,.85);text-align:center}
.pp-status[data-state="error"],.pp-status[data-state="invalid"]{color:var(--bad-600)}
.pp-cta .pp-status[data-state="error"],.pp-cta .pp-status[data-state="invalid"]{color:#FF9E8A}
.pp-status[data-state="success"]{color:var(--good-600)}
.pp-cta .pp-status[data-state="success"]{color:#7FD9A4}

/* ---------- Footer ---------- */
.pp-footer{background:var(--paper-1)}
.pp-footer-main{
  max-width:var(--container-max);margin:0 auto;
  padding:var(--space-8) var(--gutter) var(--space-7);
  display:flex;gap:var(--gap-lg);flex-wrap:wrap;justify-content:space-between;
}
.pp-footer-brand{flex:1 1 260px;max-width:320px;display:flex;flex-direction:column;gap:var(--space-4)}
.pp-footer-brand-name{font-size:var(--text-lg);font-weight:var(--fw-extrabold);font-family:var(--font-display);letter-spacing:-0.01em}
.pp-footer-brand p{font-size:13px;color:var(--fg-tertiary);line-height:1.5;margin:0}
.pp-socials{display:flex;gap:var(--space-3)}
.pp-social{
  width:38px;height:38px;border-radius:50%;
  background:var(--paper-0);border:1px solid var(--border-subtle);
  display:flex;align-items:center;justify-content:center;
  font-size:13px;font-weight:var(--fw-semibold);color:var(--fg-secondary);
}
.pp-social:hover{color:var(--fg-primary);border-color:var(--border-default);text-decoration:none}
.pp-footer-cols{display:flex;gap:var(--gap-lg);flex-wrap:wrap;flex:1 1 auto}
.pp-footer-col{min-width:140px}
.pp-footer-col h2{font-size:13px;font-weight:var(--fw-bold);color:var(--fg-primary);margin:0 0 var(--space-4)}
.pp-footer-col ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--space-3)}
.pp-footer-col a{font-size:var(--text-sm);color:var(--fg-secondary)}
.pp-footer-col a:hover{color:var(--fg-primary)}
.pp-subscribe{flex:1 1 280px;max-width:320px}
.pp-subscribe-label{font-size:var(--text-sm);color:var(--fg-primary);line-height:1.5;margin:0 0 var(--space-4);font-weight:var(--fw-semibold)}
.pp-subscribe input{
  width:100%;padding:13px 16px;border-radius:var(--radius-md);
  border:1px solid var(--border-default);background:#fff;
  font:inherit;font-size:var(--text-sm);outline:none;margin-bottom:var(--space-3);
}
.pp-subscribe input:focus{border-color:var(--accent-cta)}
.pp-fineprint{font-size:var(--text-xs);color:var(--fg-tertiary);margin:var(--space-3) 0 0}
.pp-footer-legal{
  max-width:var(--container-max);margin:0 auto;
  padding:var(--space-5) var(--gutter);
  border-top:1px solid var(--border-subtle);
  display:flex;justify-content:space-between;gap:var(--space-4);flex-wrap:wrap;
}
.pp-footer-legal span,.pp-footer-legal a{font-size:13px;color:var(--fg-tertiary)}
.pp-footer-legal a:hover{color:var(--fg-primary)}
.pp-footer-legal ul{list-style:none;margin:0;padding:0;display:flex;gap:var(--space-5);flex-wrap:wrap}
@media (max-width:640px){
  .pp-footer-cols{gap:var(--space-6) var(--space-7)}
  .pp-subscribe{max-width:none}
}

/* ==========================================================================
   Legal pages (privacy.html, terms.html)
   Static pages — no design-system runtime. Header band + reading column.
   ========================================================================== */
.pp-legal-head{
  background:var(--surface-dark);color:var(--fg-on-dark);
  padding:var(--space-9) var(--gutter) var(--space-8);
}
.pp-legal-head-inner{max-width:var(--container-max);margin:0 auto}
.pp-legal-head .pp-eyebrow{color:var(--fg-on-dark);margin-bottom:var(--space-4)}
.pp-legal-head h1{
  font-size:var(--h2);font-weight:var(--fw-extrabold);
  letter-spacing:var(--ls-tight);line-height:var(--lh-snug);margin:0;
}
.pp-legal-meta{
  font-size:var(--text-sm);color:rgba(245,244,240,.72);
  margin:var(--space-4) 0 0;
}

.pp-legal{
  max-width:760px;margin:0 auto;
  padding:var(--space-8) var(--gutter) var(--space-9);
}
.pp-legal-intro{
  font-size:var(--text-md);line-height:var(--lh-normal);
  color:var(--fg-secondary);margin:0 0 var(--space-7);
}
.pp-legal h2{
  font-size:var(--text-lg);font-weight:var(--fw-bold);
  letter-spacing:var(--ls-tight);line-height:var(--lh-snug);
  margin:var(--space-8) 0 var(--space-4);
}
.pp-legal h2:first-of-type{margin-top:0}
.pp-legal h3{
  font-size:var(--text-body);font-weight:var(--fw-bold);
  margin:var(--space-6) 0 var(--space-3);
}
.pp-legal p,.pp-legal li{line-height:var(--lh-loose);color:var(--fg-secondary)}
.pp-legal p{margin:0 0 var(--space-4)}
.pp-legal ul{margin:0 0 var(--space-4);padding-left:var(--space-5)}
.pp-legal li{margin-bottom:var(--space-2)}
.pp-legal li::marker{color:var(--accent-500)}
.pp-legal strong{color:var(--fg-primary);font-weight:var(--fw-semibold)}

/* Table of contents */
.pp-legal-toc{
  background:var(--surface-card);border:1px solid var(--border-subtle);
  border-radius:var(--radius-lg);padding:var(--space-5) var(--space-6);
  margin:0 0 var(--space-8);
}
.pp-legal-toc h2{font-size:var(--text-xs);letter-spacing:var(--ls-eyebrow);text-transform:uppercase;
  color:var(--fg-tertiary);font-weight:var(--fw-bold);margin:0 0 var(--space-3)}
.pp-legal-toc ol{margin:0;padding-left:var(--space-5);display:grid;gap:var(--space-2)}
.pp-legal-toc li{font-size:var(--text-sm);margin:0}

/* Placeholder banner — remove once the text has been through review. */
.pp-legal-draft{
  background:var(--warn-100);border-left:3px solid var(--warn-600);
  border-radius:var(--radius-sm);
  padding:var(--space-4) var(--space-5);margin:0 0 var(--space-7);
}
.pp-legal-draft p{margin:0;font-size:var(--text-sm);color:var(--ink-800)}

/* Static footer used by the legal pages (no subscribe form, no runtime). */
.pp-footer-main--static{padding-bottom:var(--space-8)}

/* ==========================================================================
   Example report (report.html)
   Static page — the gauges are hand-rolled SVG matching the design system's
   ScoreGauge (r=53, stroke 10, circumference 333.01, -90deg start).
   ========================================================================== */
.pp-report{max-width:900px;margin:0 auto;padding:var(--space-8) var(--gutter) var(--space-9)}
.pp-report-section{margin:0 0 var(--space-8)}
.pp-report-section > h2{
  font-size:var(--text-lg);font-weight:var(--fw-bold);
  letter-spacing:var(--ls-tight);line-height:var(--lh-snug);
  margin:0 0 var(--space-4);
}
.pp-report p{line-height:var(--lh-loose);color:var(--fg-secondary);margin:0 0 var(--space-4)}
.pp-report-lede{font-size:var(--text-md);color:var(--fg-primary)}

/* Header band */
.pp-report-head{background:var(--surface-dark);color:var(--fg-on-dark);padding:var(--space-8) var(--gutter)}
.pp-report-head-inner{max-width:900px;margin:0 auto}
.pp-report-head .pp-eyebrow{color:var(--fg-on-dark);margin-bottom:var(--space-4)}
.pp-report-head h1{
  font-size:var(--h2);font-weight:var(--fw-extrabold);
  letter-spacing:var(--ls-tight);line-height:var(--lh-snug);margin:0;
}
.pp-report-meta{
  list-style:none;margin:var(--space-5) 0 0;padding:0;
  display:flex;gap:var(--space-3) var(--space-6);flex-wrap:wrap;
  font-size:var(--text-sm);color:rgba(245,244,240,.72);
}
.pp-report-meta b{color:var(--fg-on-dark);font-weight:var(--fw-semibold)}

/* Score card */
.pp-scorecard{
  background:var(--surface-card);border:1px solid var(--border-subtle);
  border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);
  padding:var(--space-6);margin:0 0 var(--space-8);
}
.pp-gauges{display:flex;gap:var(--space-6);flex-wrap:wrap;justify-content:center}
.pp-gauge{display:flex;flex-direction:column;align-items:center;gap:10px;flex:0 0 auto}
.pp-gauge-label{font-size:13px;font-weight:var(--fw-semibold);color:var(--fg-secondary)}
.pp-scorecard-note{
  margin:var(--space-6) 0 0;padding-top:var(--space-5);
  border-top:1px solid var(--border-subtle);
  font-size:var(--text-sm);color:var(--fg-tertiary);
}
.pp-scorecard-note p{margin:0;font-size:var(--text-sm)}

/* Verdict flags */
.pp-flag{
  display:inline-flex;align-items:center;gap:6px;
  font-size:var(--text-xs);font-weight:var(--fw-bold);
  letter-spacing:.04em;text-transform:uppercase;
  padding:4px 10px;border-radius:var(--radius-pill);
}
.pp-flag--pass{background:var(--good-100);color:var(--good-600)}
.pp-flag--warn{background:var(--warn-100);color:var(--warn-600)}
.pp-flag--fail{background:var(--bad-100);color:var(--bad-600)}

/* Core Web Vitals */
.pp-vitals{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:var(--space-4)}
.pp-vital{
  background:var(--surface-card);border:1px solid var(--border-subtle);
  border-radius:var(--radius-md);padding:var(--space-5);
}
.pp-vital-top{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);margin-bottom:var(--space-3)}
.pp-vital-name{font-size:var(--text-sm);font-weight:var(--fw-bold);color:var(--fg-primary)}
.pp-vital-value{
  font-family:var(--font-display);font-size:var(--text-xl);font-weight:var(--fw-extrabold);
  letter-spacing:var(--ls-tight);line-height:1;margin:0 0 var(--space-2);color:var(--fg-primary);
}
.pp-vital-value small{font-size:var(--text-sm);font-weight:var(--fw-semibold);color:var(--fg-tertiary);margin-left:2px}
.pp-vital p{font-size:13px;line-height:var(--lh-normal);margin:0}
.pp-vital-target{font-size:var(--text-xs);color:var(--fg-tertiary);margin-top:var(--space-3);display:block}

/* Opportunity list — bar length is proportional to the time each item costs. */
.pp-opps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--space-4)}
.pp-opp{
  background:var(--surface-card);border:1px solid var(--border-subtle);
  border-radius:var(--radius-md);padding:var(--space-5);
  display:grid;grid-template-columns:auto 1fr;gap:var(--space-4);align-items:start;
}
.pp-opp-rank{
  font-family:var(--font-mono);font-size:var(--text-xs);font-weight:var(--fw-bold);
  color:var(--accent-text);padding-top:3px;
}
.pp-opp-head{display:flex;align-items:baseline;justify-content:space-between;gap:var(--space-4);flex-wrap:wrap}
.pp-opp-title{font-size:var(--text-body);font-weight:var(--fw-bold);color:var(--fg-primary)}
.pp-opp-cost{font-family:var(--font-mono);font-size:var(--text-sm);font-weight:var(--fw-bold);color:var(--fg-primary);white-space:nowrap}
.pp-opp-bar{height:6px;border-radius:var(--radius-pill);background:var(--gray-100);margin:var(--space-3) 0;overflow:hidden}
.pp-opp-bar span{display:block;height:100%;border-radius:inherit;background:var(--accent-500)}
.pp-opp p{margin:0;font-size:var(--text-sm)}

/* Quick win callout */
.pp-quickwin{
  background:var(--accent-050);border:1px solid var(--accent-100);
  border-left:4px solid var(--accent-cta);
  border-radius:var(--radius-lg);padding:var(--space-6);
}
.pp-quickwin h2{margin-top:0}
.pp-quickwin p:last-child{margin-bottom:0}

/* Check-our-work panel */
.pp-verify{
  background:var(--paper-0);border:1px solid var(--border-subtle);
  border-radius:var(--radius-lg);padding:var(--space-6);
  display:flex;gap:var(--space-5);align-items:center;justify-content:space-between;flex-wrap:wrap;
}
.pp-verify div{flex:1 1 320px}
.pp-verify p:last-child{margin-bottom:0}

/* Report sign-off */
.pp-report-signoff{
  border-top:1px solid var(--border-subtle);
  padding-top:var(--space-5);margin-top:var(--space-8);
  font-size:13px;color:var(--fg-tertiary);
}
.pp-report-signoff p{font-size:13px;margin:0 0 var(--space-2)}

@media (max-width:640px){
  .pp-gauges{gap:var(--space-5)}
  .pp-opp{grid-template-columns:1fr}
  .pp-opp-rank{padding-top:0}
}

/* Clients forward this as a PDF, so the chrome comes off in print. */
@media print{
  .pp-navbar,.pp-footer,.pp-skip,.pp-legal-draft{display:none !important}
  .pp-report-head{background:none;color:var(--fg-primary);padding-top:0}
  .pp-report-head .pp-eyebrow,.pp-report-meta{color:var(--fg-secondary)}
  .pp-report-meta b{color:var(--fg-primary)}
  .pp-scorecard,.pp-vital,.pp-opp,.pp-verify{box-shadow:none;break-inside:avoid}
  .pp-report-section{break-inside:avoid}
}

/* ==========================================================================
   Marketing sub-pages (agencies.html, pricing.html)
   Static pages like the legal ones — no design-system runtime. They share a
   dark header band, section heads, a tier tag, and a closing band that
   reuses .pp-cta without its form.
   ========================================================================== */
.pp-page-head{
  background:var(--surface-dark);color:var(--fg-on-dark);
  padding:var(--space-9) var(--gutter) var(--space-8);
}
/* Content below sits in .pp-container > .pp-section, i.e. the container
   minus a gutter each side; match that edge. */
.pp-page-head-inner{max-width:calc(var(--container-max) - 2 * var(--gutter));margin:0 auto}
.pp-page-head .pp-eyebrow{color:var(--accent-400)}
.pp-page-head h1{
  font-size:clamp(34px,6.4vw,64px);font-weight:var(--fw-extrabold);
  letter-spacing:var(--ls-tight);line-height:1.04;margin:0 0 var(--space-5);max-width:820px;
}
.pp-page-lede{
  font-size:var(--text-md);line-height:var(--lh-normal);
  color:rgba(245,244,240,.82);max-width:560px;margin:0 0 var(--space-6);
}

.pp-section-head{max-width:640px;margin:0 0 var(--space-7)}
.pp-section-head h2{
  font-size:var(--h2);font-weight:var(--fw-extrabold);
  letter-spacing:var(--ls-tight);line-height:1.1;margin:0 0 var(--space-4);
}
.pp-section-head p{font-size:var(--text-md);line-height:var(--lh-normal);color:var(--fg-secondary);margin:0}
.pp-on-dark .pp-section-head p{color:rgba(245,244,240,.78)}

/* Which plan a feature belongs to. */
.pp-tier{
  display:inline-block;font-size:var(--text-eyebrow);font-weight:var(--fw-bold);
  letter-spacing:.08em;text-transform:uppercase;
  padding:3px 9px;border-radius:var(--radius-pill);
  background:var(--gray-100);color:var(--fg-secondary);
}
.pp-tier--enterprise{background:var(--accent-050);color:var(--accent-text)}

/* Closing band: .pp-cta minus the form. The light variant is for pages
   where the band would otherwise sit directly under another dark section. */
.pp-cta-actions{display:flex;gap:var(--space-4);justify-content:center;flex-wrap:wrap}
.pp-cta--light{background:var(--paper-0);color:var(--fg-primary);border-top:1px solid var(--border-subtle)}
.pp-cta--light .pp-cta-sub{color:var(--fg-secondary)}

/* Check-mark list, shared by the agencies intro and the plan cards. */
.pp-checks{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--space-4)}
.pp-checks li{display:flex;gap:var(--space-3);line-height:var(--lh-normal);color:var(--fg-secondary)}
.pp-checks li::before{
  content:"";flex:none;width:18px;height:18px;margin-top:3px;border-radius:50%;
  background:var(--accent-050) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M5 9.5l2.6 2.5L13 6.5' fill='none' stroke='%239E4517' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/18px no-repeat;
}
.pp-checks strong{color:var(--fg-primary);font-weight:var(--fw-semibold)}

/* ---------- Agencies: intro split + branded report preview ---------- */
.pp-brand{display:flex;gap:var(--gap-lg);align-items:center;flex-wrap:wrap}
.pp-brand-copy{flex:1 1 360px;min-width:min(320px,100%)}
.pp-brand-copy h2{
  font-size:var(--h2);font-weight:var(--fw-extrabold);
  letter-spacing:var(--ls-tight);line-height:1.1;margin:0 0 var(--space-5);
}
.pp-brand-copy > p{font-size:var(--text-md);line-height:var(--lh-normal);color:var(--fg-secondary);margin:0 0 var(--space-6)}

/* The preview is drawn in the agency's colour, not ours — that is the point.
   --brand is swapped by the swatch buttons below it. */
.pp-brand-demo{flex:1 1 380px;min-width:min(320px,100%)}
.pp-mock{
  --brand:#1F6F78;
  background:var(--surface-card);border:1px solid var(--border-subtle);
  border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);overflow:hidden;
}
.pp-mock-bar{
  background:var(--brand);color:#fff;
  padding:var(--space-5) var(--space-6);
  display:flex;align-items:center;gap:var(--space-3);
  transition:background var(--duration-normal) var(--ease-standard);
}
.pp-mock-logo{
  width:36px;height:36px;border-radius:var(--radius-sm);flex:none;
  background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.35);
  display:flex;align-items:center;justify-content:center;
  font-weight:var(--fw-extrabold);font-size:13px;letter-spacing:.02em;
}
.pp-mock-agency{font-weight:var(--fw-bold);font-size:15px;line-height:1.2}
.pp-mock-agency small{display:block;font-weight:var(--fw-medium);font-size:var(--text-xs);opacity:.85}
.pp-mock-body{padding:var(--space-6)}
.pp-mock-greet{font-size:var(--text-sm);color:var(--fg-secondary);line-height:var(--lh-normal);margin:0 0 var(--space-5)}
.pp-mock-score{display:flex;align-items:baseline;gap:var(--space-3);margin-bottom:var(--space-5)}
.pp-mock-score b{
  font-family:var(--font-display);font-size:var(--text-3xl);font-weight:var(--fw-extrabold);
  letter-spacing:var(--ls-tight);line-height:1;color:var(--brand);
  transition:color var(--duration-normal) var(--ease-standard);
}
.pp-mock-score span{font-size:var(--text-sm);font-weight:var(--fw-semibold);color:var(--fg-secondary)}
.pp-mock-rows{display:flex;flex-direction:column;gap:var(--space-3)}
.pp-mock-row{display:grid;grid-template-columns:120px 1fr 36px;gap:var(--space-3);align-items:center;font-size:13px;color:var(--fg-secondary)}
.pp-mock-row i{display:block;height:6px;border-radius:var(--radius-pill);background:var(--gray-100);overflow:hidden}
.pp-mock-row i::after{
  content:"";display:block;height:100%;width:var(--w);border-radius:inherit;background:var(--brand);
  transition:background var(--duration-normal) var(--ease-standard);
}
.pp-mock-row b{text-align:right;color:var(--fg-primary);font-weight:var(--fw-bold)}
.pp-mock-foot{
  border-top:1px solid var(--border-subtle);padding:var(--space-4) var(--space-6);
  font-size:var(--text-xs);color:var(--fg-tertiary);
}
.pp-swatches{display:flex;align-items:center;gap:var(--space-3);margin-top:var(--space-5);flex-wrap:wrap}
.pp-swatches-label{font-size:13px;font-weight:var(--fw-semibold);color:var(--fg-secondary);margin-right:var(--space-2)}
.pp-swatch{
  width:32px;height:32px;border-radius:50%;padding:0;cursor:pointer;
  background:var(--c);border:3px solid var(--surface-page);
  box-shadow:0 0 0 1px var(--border-default);
  transition:box-shadow var(--duration-fast) var(--ease-standard);
}
.pp-swatch[aria-pressed="true"]{box-shadow:0 0 0 2px var(--ink-950)}
@media (pointer:coarse){.pp-swatch{width:44px;height:44px}}
.pp-demo-note{font-size:var(--text-xs);color:var(--fg-tertiary);margin:var(--space-3) 0 0}

/* ---------- Agencies: what you can customise ---------- */
.pp-band-alt{background:var(--paper-0);border-top:1px solid var(--border-subtle);border-bottom:1px solid var(--border-subtle)}
.pp-features{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr));gap:var(--space-4);
}
.pp-feature{
  background:var(--surface-card);border:1px solid var(--border-subtle);
  border-radius:var(--radius-lg);padding:var(--space-6);
  display:flex;flex-direction:column;gap:var(--space-3);
}
.pp-feature h3{font-size:var(--text-md);font-weight:var(--fw-bold);margin:0;line-height:var(--lh-snug)}
.pp-feature p{font-size:15px;line-height:1.55;color:var(--fg-secondary);margin:0;flex:1}
.pp-feature .pp-tier{align-self:flex-start}

/* ---------- Agencies: white-glove ---------- */
.pp-glove{background:var(--surface-dark);color:var(--fg-on-dark)}
.pp-glove .pp-eyebrow{color:var(--accent-400)}
.pp-glove-steps{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(min(230px,100%),1fr));gap:var(--space-6) var(--space-5);
  counter-reset:glove;
}
.pp-glove-steps li{border-top:1px solid var(--border-on-dark);padding-top:var(--space-5);counter-increment:glove}
.pp-glove-steps li::before{
  content:counter(glove,decimal-leading-zero);
  display:block;font-size:var(--text-sm);font-weight:var(--fw-bold);color:var(--accent-400);margin-bottom:var(--space-3);
}
.pp-glove-steps h3{font-size:var(--text-md);font-weight:var(--fw-bold);margin:0 0 var(--space-2)}
.pp-glove-steps p{font-size:15px;line-height:1.55;color:rgba(245,244,240,.74);margin:0}
.pp-glove-contact{
  margin-top:var(--space-8);padding:var(--space-6);
  border:1px solid var(--border-on-dark);border-radius:var(--radius-lg);
  display:flex;gap:var(--space-5);align-items:center;justify-content:space-between;flex-wrap:wrap;
}
.pp-glove-contact p{margin:0;max-width:560px;line-height:var(--lh-normal);color:rgba(245,244,240,.82)}
.pp-glove-contact strong{color:#fff;display:block;font-size:var(--text-md);margin-bottom:var(--space-1)}

/* ---------- Pricing ---------- */
.pp-plans{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr));gap:var(--space-5);
  align-items:stretch;
}
.pp-plan{
  position:relative;background:var(--surface-card);border:1px solid var(--border-subtle);
  border-radius:var(--radius-xl);padding:var(--space-7) var(--space-6) var(--space-6);
  display:flex;flex-direction:column;
}
.pp-plan--featured{border:2px solid var(--accent-cta);box-shadow:var(--shadow-lg)}
.pp-plan-flag{
  position:absolute;top:0;left:var(--space-6);transform:translateY(-50%);
  background:var(--accent-cta);color:#fff;
  font-size:var(--text-eyebrow);font-weight:var(--fw-bold);letter-spacing:var(--ls-eyebrow);text-transform:uppercase;
  padding:5px 12px;border-radius:var(--radius-pill);
}
.pp-plan h2{font-size:var(--text-lg);font-weight:var(--fw-extrabold);margin:0 0 var(--space-2)}
.pp-plan-for{font-size:var(--text-sm);color:var(--fg-secondary);line-height:var(--lh-normal);margin:0 0 var(--space-5);min-height:2.9em}
.pp-price{display:flex;align-items:baseline;gap:6px;margin:0 0 var(--space-2)}
.pp-price b{
  font-family:var(--font-display);font-size:var(--text-3xl);font-weight:var(--fw-extrabold);
  letter-spacing:var(--ls-tight);line-height:1;
}
.pp-price span{font-size:var(--text-sm);font-weight:var(--fw-semibold);color:var(--fg-secondary)}
.pp-price-note{font-size:13px;color:var(--fg-tertiary);margin:0 0 var(--space-6)}
.pp-plan > .pp-btn{margin-bottom:var(--space-6)}
.pp-plan-includes{font-size:13px;font-weight:var(--fw-bold);color:var(--fg-primary);margin:0 0 var(--space-3)}
.pp-plan .pp-checks{gap:var(--space-3);font-size:15px}

.pp-faq{max-width:760px}
.pp-faq details{border-bottom:1px solid var(--border-subtle)}
.pp-faq details:first-of-type{border-top:1px solid var(--border-subtle)}
.pp-faq summary{
  list-style:none;cursor:pointer;padding:var(--space-5) 0;
  display:flex;justify-content:space-between;gap:var(--space-4);
  font-size:var(--text-md);font-weight:var(--fw-bold);
}
.pp-faq summary::-webkit-details-marker{display:none}
.pp-faq summary::after{
  content:"+";flex:none;font-size:22px;line-height:1;font-weight:var(--fw-medium);color:var(--accent-text);
  transition:transform var(--duration-normal) var(--ease-standard);
}
.pp-faq details[open] summary::after{transform:rotate(45deg)}
.pp-faq details p{margin:0 0 var(--space-5);line-height:var(--lh-loose);color:var(--fg-secondary);max-width:640px}

/* ---------- Web development (build.html) ---------- */
/* Case card: sits where the agencies page puts its report preview. */
.pp-case{
  flex:1 1 380px;min-width:min(320px,100%);margin:0;
  background:var(--surface-card);border:1px solid var(--border-subtle);
  border-top:4px solid var(--accent-cta);
  border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);
  padding:var(--space-6);
}
.pp-case-tag{
  font-size:var(--text-eyebrow);font-weight:var(--fw-bold);
  letter-spacing:var(--ls-eyebrow);text-transform:uppercase;
  color:var(--accent-text);margin:0 0 var(--space-3);
}
.pp-case h3{font-size:var(--text-xl);font-weight:var(--fw-extrabold);letter-spacing:var(--ls-tight);margin:0 0 var(--space-3)}
.pp-case-sum{font-size:15px;line-height:1.55;color:var(--fg-secondary);margin:0 0 var(--space-5)}
.pp-case-stats{margin:0 0 var(--space-5);display:flex;flex-direction:column}
.pp-case-stats div{
  display:flex;justify-content:space-between;gap:var(--space-4);flex-wrap:wrap;
  padding:var(--space-3) 0;border-top:1px solid var(--border-subtle);
}
.pp-case-stats dt{font-size:13px;font-weight:var(--fw-semibold);color:var(--fg-secondary)}
.pp-case-stats dd{margin:0;font-size:15px;font-weight:var(--fw-bold);color:var(--fg-primary)}
.pp-case figcaption{font-size:var(--text-sm);font-weight:var(--fw-semibold)}

/* Language switch: the last nav link, set apart by a thin rule. */
.pp-navlang{letter-spacing:.06em}
.pp-navlinks li:has(> .pp-navlang){border-left:1px solid var(--border-default);padding-left:var(--space-5)}

/* "Also in Romanian" bar under the nav. Suggests, never redirects. */
.pp-langbar{
  display:flex;align-items:center;justify-content:center;gap:var(--space-4);
  background:var(--accent-050);border-bottom:1px solid var(--accent-100);
  padding:var(--space-3) var(--gutter);font-size:var(--text-sm);
}
.pp-langbar[hidden]{display:none}
.pp-langbar p{margin:0;color:var(--fg-primary)}
.pp-langbar a{font-weight:var(--fw-semibold)}
.pp-langbar-close{
  flex:none;width:32px;height:32px;border:0;border-radius:50%;
  background:transparent;color:var(--fg-secondary);font-size:22px;line-height:1;cursor:pointer;
}
.pp-langbar-close:hover{background:var(--accent-100);color:var(--fg-primary)}
@media (pointer:coarse){.pp-langbar-close{width:44px;height:44px}}

/* Empty project slots — dashed so nobody mistakes them for real work. */
.pp-slots{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr));gap:var(--space-4);
}
.pp-slot{
  border:2px dashed var(--border-default);border-radius:var(--radius-lg);
  padding:var(--space-6);display:flex;flex-direction:column;gap:var(--space-3);
}
.pp-slot .pp-tier{align-self:flex-start}
.pp-slot h3{font-size:var(--text-md);font-weight:var(--fw-bold);margin:0;color:var(--fg-secondary)}
.pp-slot p{font-size:15px;line-height:1.55;color:var(--fg-secondary);margin:0}

@media (max-width:640px){
  .pp-mock-row{grid-template-columns:96px 1fr 30px}
  .pp-swatches-label{flex-basis:100%}
  .pp-plan-for{min-height:0}
  .pp-glove-contact .pp-btn{flex:1 1 100%}
}