/* ==========================================================================
   PRISM PROOFREADERS — Proofreading & Editing landing page
   Stylesheet for proofreading.html only. Nothing here touches css/style.css.
   Every class is namespaced `pf-`, except the .hero-card form block, which
   is copied from index.php on purpose (see section 13).

   Section order:
     nav → announcement → hero (+contact form) → fee calculator →
     offers (£150 + free sample) → parts of a dissertation + letter →
     what we fix → attention all learners → what's included → process →
     reviews → editors → subjects → sound familiar → pricing → faq →
     final CTA → footer
   ========================================================================== */

/* ==========================================================================
   1. DESIGN TOKENS
   ========================================================================== */
/* Palette lifted straight from css/style.css so this page and the homepage
   share one theme. Keep the two in step if you retune either. */
:root{
  --pf-green-900:#0E2614;
  --pf-green-800:#1A3F22;     /* primary */
  --pf-green-700:#25542E;
  --pf-green-600:#3A6B2A;
  --pf-leaf:#58761B;          /* secondary */
  --pf-leaf-dark:#465F14;
  --pf-leaf-soft:#EDF3E2;

  --pf-gold:#D99201;          /* accent */
  --pf-gold-deep:#905A01;     /* deep accent */
  --pf-gold-soft:#FDF3DF;
  --pf-gold-50:#FFFAF0;

  --pf-red:#C0201C;           /* used only for "before" markup */
  --pf-rose-soft:#FDECEC;

  --pf-ink:#1C1E1B;
  --pf-ink-soft:#4A544A;
  --pf-muted:#77827A;
  --pf-line:#E4E7E0;
  --pf-line-soft:#EFF1EA;

  --pf-cream:#FAF8F3;
  --pf-white:#FFFFFF;
  --pf-wa:#25D366;

  --pf-r-sm:8px;
  --pf-r:12px;
  --pf-r-lg:18px;
  --pf-r-xl:24px;

  /* Fully rounded buttons. Every button reads this one token — drop it to
     8px for square corners, 0 for sharp. */
  --pf-btn-r:100px;
  --pf-input-r:12px;

  --pf-sh-s:0 1px 3px rgba(12,36,18,.05);
  --pf-sh:0 10px 30px -16px rgba(12,36,18,.22);
  --pf-sh-l:0 30px 60px -28px rgba(12,36,18,.32);

  /* Inter Tight — a close, freely available stand-in for the tight
     geometric sans Wise uses. One family across the whole page. */
  --pf-sans:"Inter Tight",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --pf-display:var(--pf-sans);
  --pf-serif:var(--pf-sans);

  --pf-max:1120px;
}

/* ==========================================================================
   2. BASE
   ========================================================================== */
*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;scroll-padding-top:110px;}
body.pf{
  margin:0;
  font-family:var(--pf-sans);
  font-size:16px;
  line-height:1.6;
  color:var(--pf-ink);
  background:var(--pf-cream);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
.pf img{max-width:100%;display:block;}
.pf a{color:inherit;text-decoration:none;}
/* Big, tightly tracked headings against calm body copy — the contrast
   between the two is what creates the hierarchy. */
.pf h1,.pf h2,.pf h3,.pf h4{
  font-family:var(--pf-display);font-weight:800;
  letter-spacing:-.04em;margin:0 0 .4em;
}
.pf h1{font-size:clamp(2.6rem,5.4vw,4.05rem);line-height:1.03;}
.pf h2{font-size:clamp(2rem,4vw,3.05rem);line-height:1.07;letter-spacing:-.042em;}
.pf h3{font-size:1.28rem;line-height:1.25;letter-spacing:-.028em;}
.pf h4{font-size:1.05rem;line-height:1.3;letter-spacing:-.025em;}
.pf p{margin:0 0 1em;}
.pf ul{margin:0;padding:0;list-style:none;}
.pf section{position:relative;}
.pf button{font-family:inherit;}

.pf-wrap{max-width:var(--pf-max);margin-inline:auto;padding-inline:24px;}
.pf-center{text-align:center;}
.pf-pad{padding:74px 0;}
.pf-pad-sm{padding:52px 0;}
.pf-cream{background:var(--pf-cream);}
.pf-white{background:var(--pf-white);}
.pf-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;}

/* ==========================================================================
   3. SHARED PIECES
   ========================================================================== */
/* Section eyebrow. The leading dot and hairline border give it enough
   presence to read as a label rather than a washed-out pill. */
.pf-chip{
  display:inline-flex;align-items:center;gap:.6em;
  font-size:.64rem;font-weight:800;letter-spacing:.15em;text-transform:uppercase;
  color:var(--pf-leaf-dark);background:var(--pf-leaf-soft);
  border:1px solid rgba(88,118,27,.24);
  padding:6px 14px;border-radius:100px;margin-bottom:16px;
  box-shadow:0 1px 2px rgba(12,36,18,.05);
}
.pf-chip::before{
  content:"";width:5px;height:5px;border-radius:50%;
  background:currentColor;flex-shrink:0;
}
.pf-chip--gold{color:var(--pf-gold-deep);background:var(--pf-gold-soft);border-color:rgba(217,146,1,.34);}
.pf-chip--rose{color:var(--pf-red);background:var(--pf-rose-soft);border-color:rgba(192,32,28,.22);}
/* on the dark green bands */
.pf-chip--light{
  color:#F3D999;background:rgba(217,146,1,.18);
  border-color:rgba(217,146,1,.5);box-shadow:none;
}

/* "— SOUND FAMILIAR" : rule + label, no pill */
.pf-rule{
  display:inline-flex;align-items:center;gap:10px;
  font-size:.66rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;
  color:var(--pf-leaf-dark);margin-bottom:14px;
}
.pf-rule::before{content:"";width:22px;height:2px;background:var(--pf-gold);border-radius:2px;}

.pf-lead{font-size:1.08rem;line-height:1.6;color:var(--pf-ink-soft);max-width:58ch;}
.pf-head{max-width:700px;margin-inline:auto;margin-bottom:48px;}
.pf-head .pf-lead{margin-inline:auto;}

/* green marker highlight, as on "Work" in the Sound Familiar heading */
.pf-mark{background:#C8E6A0;padding:0 .16em;border-radius:3px;}
.pf-ul{
  background-image:linear-gradient(var(--pf-gold),var(--pf-gold));
  background-repeat:no-repeat;background-size:100% 3px;background-position:0 94%;
  padding-bottom:1px;
}

/* --------------------------------------------------------------------------
   Buttons — three tiers, so every screen has one obvious next step.

     1  accent  (gold fill, near-black label)  the action we want taken
     2  solid   (forest fill, white label)     supporting action
     3  outline (border only)                  quiet, take-it-or-leave-it

   Fully rounded, chunky padding. Flip --pf-btn-r back to 8px in the token
   block if you ever want square corners again.
   -------------------------------------------------------------------------- */
.pf-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5em;
  font-weight:700;font-size:.98rem;line-height:1.25;text-align:center;
  letter-spacing:-.012em;
  padding:15px 30px;border-radius:var(--pf-btn-r);border:2px solid transparent;
  cursor:pointer;
  transition:background .18s ease,color .18s ease,border-color .18s ease,box-shadow .18s ease,transform .18s ease;
}
.pf-btn:hover{transform:translateY(-1px);}
.pf-btn:active{transform:translateY(0);}

/* 1 — accent. Dark label on gold reads far cleaner than white did. */
.pf .pf-btn--gold,
.pf .pf-btn--leaf,
.pf .pf-btn--primary{
  background:var(--pf-gold);color:#241700;border-color:var(--pf-gold);
  box-shadow:0 8px 20px -10px rgba(217,146,1,.7);
}
.pf .pf-btn--gold:hover,
.pf .pf-btn--leaf:hover,
.pf .pf-btn--primary:hover{
  background:#E8A317;border-color:#E8A317;color:#241700;
  box-shadow:0 12px 26px -10px rgba(217,146,1,.8);
}

/* 2 — solid */
.pf .pf-btn--green{background:var(--pf-green-900);color:#fff;border-color:var(--pf-green-900);}
.pf .pf-btn--green:hover{background:#1B4526;border-color:#1B4526;color:#fff;}

/* 3 — outline */
.pf .pf-btn--ghost{background:transparent;border-color:rgba(14,38,20,.22);color:var(--pf-green-900);}
.pf .pf-btn--ghost:hover{border-color:var(--pf-green-900);background:rgba(14,38,20,.04);color:var(--pf-green-900);}
.pf .pf-btn--ghost-light{background:transparent;border-color:rgba(255,255,255,.45);color:#fff;}
.pf .pf-btn--ghost-light:hover{background:rgba(255,255,255,.12);border-color:#fff;color:#fff;}

/* on the dark bands the accent flips to white-on-dark, as Wise does */
.pf-final .pf-btn--leaf,
.pf-process .pf-btn--leaf{background:#fff;color:var(--pf-green-900);border-color:#fff;box-shadow:none;}
.pf-final .pf-btn--leaf:hover,
.pf-process .pf-btn--leaf:hover{background:var(--pf-gold);border-color:var(--pf-gold);color:#241700;}

/* WhatsApp keeps its own colour but sits below the accent in weight */
.pf .pf-btn--wa{background:var(--pf-wa);color:#04331A;border-color:var(--pf-wa);}
.pf .pf-btn--wa:hover{background:#1EBE59;border-color:#1EBE59;color:#04331A;}

.pf-btn--sm{padding:11px 20px;font-size:.88rem;}
.pf-btn--block{width:100%;}

/* --------------------------------------------------------------------------
   Student photography
   Every photo is decorative: it sits behind the copy, faded and masked so
   the text keeps its contrast. Swap any src in the markup for your own
   licensed shots — the masking here does the rest.
   -------------------------------------------------------------------------- */
.pf-photo{position:absolute;pointer-events:none;overflow:hidden;z-index:0;}
.pf-photo img{width:100%;height:100%;object-fit:cover;display:block;}

/* green bands — photo tucked into an edge and faded out toward the copy.
   The mask carries the fade, so opacity can stay high enough for the
   student to actually read as a person. */
/* Radial masks, anchored to the corner each photo sits in. A linear fade
   leaves the other three edges as hard rectangular seams; this doesn't. */
.pf-photo--att{
  left:0;bottom:0;width:360px;height:96%;opacity:.62;
  mask-image:radial-gradient(125% 125% at 0% 100%,#000 16%,transparent 72%);
  -webkit-mask-image:radial-gradient(125% 125% at 0% 100%,#000 16%,transparent 72%);
}
/* pulled to the top-right corner so it clears the fourth step card */
.pf-photo--process{
  right:0;top:0;width:430px;height:72%;opacity:.50;
  mask-image:radial-gradient(120% 120% at 100% 0%,#000 14%,transparent 70%);
  -webkit-mask-image:radial-gradient(120% 120% at 100% 0%,#000 14%,transparent 70%);
}
.pf-photo--final-l{
  left:0;top:0;width:380px;height:100%;opacity:.42;
  mask-image:radial-gradient(130% 110% at 0% 50%,#000 12%,transparent 76%);
  -webkit-mask-image:radial-gradient(130% 110% at 0% 50%,#000 12%,transparent 76%);
}
.pf-photo--final-r{
  right:0;top:0;width:380px;height:100%;opacity:.42;
  mask-image:radial-gradient(130% 110% at 100% 50%,#000 12%,transparent 76%);
  -webkit-mask-image:radial-gradient(130% 110% at 100% 50%,#000 12%,transparent 76%);
}
/* lift the copy above every photo */
.pf-process > .pf-wrap,
.pf-final > .pf-wrap{position:relative;z-index:1;}
.pf-offer > .pf-btn{position:relative;z-index:1;}

/* Reveal on scroll */
.pf-reveal{opacity:0;transform:translateY(20px);transition:opacity .6s cubic-bezier(.2,.7,.3,1),transform .6s cubic-bezier(.2,.7,.3,1);}
.pf-reveal.in{opacity:1;transform:none;}
@media (prefers-reduced-motion:reduce){
  .pf-reveal{opacity:1;transform:none;transition:none;}
  html{scroll-behavior:auto;}
}

/* ==========================================================================
   4. NAV  →  ANNOUNCEMENT  (announcement sits BELOW the nav)
   ========================================================================== */
.pf-nav{
  position:sticky;top:0;z-index:70;
  background:rgba(250,248,243,.9);
  backdrop-filter:saturate(170%) blur(12px);
  -webkit-backdrop-filter:saturate(170%) blur(12px);
  border-bottom:1px solid transparent;
  transition:border-color .25s ease,box-shadow .25s ease;
}
.pf-nav.stuck{border-bottom-color:var(--pf-line);box-shadow:0 6px 22px -18px rgba(12,36,18,.6);}
.pf-nav-in{display:flex;align-items:center;gap:16px;height:62px;}

.pf-brand{display:flex;align-items:center;gap:9px;flex-shrink:0;}
.pf-brand img{width:auto;height:36px;}
.pf-brand span{
  display:block;font-size:.5rem;font-weight:800;letter-spacing:.13em;
  text-transform:uppercase;color:var(--pf-muted);line-height:1.4;
  border-left:1px solid var(--pf-line);padding-left:9px;
}

.pf-desk{
  display:inline-flex;align-items:center;gap:8px;margin-left:auto;
  background:var(--pf-white);border:1px solid var(--pf-line);
  border-radius:100px;padding:6px 14px;font-size:.7rem;font-weight:600;color:var(--pf-ink-soft);
}
.pf-desk i{
  width:7px;height:7px;border-radius:50%;background:var(--pf-wa);font-style:normal;
  box-shadow:0 0 0 0 rgba(37,211,102,.6);animation:pf-pulse 2s infinite;
}
.pf-desk s{width:1px;height:13px;background:var(--pf-line);text-decoration:none;}
.pf-desk b{color:var(--pf-green-700);}
@keyframes pf-pulse{
  0%{box-shadow:0 0 0 0 rgba(37,211,102,.55);}
  70%{box-shadow:0 0 0 7px rgba(37,211,102,0);}
  100%{box-shadow:0 0 0 0 rgba(37,211,102,0);}
}
.pf-nav-cta{display:flex;align-items:center;gap:9px;}
.pf-burger{
  display:none;width:38px;height:38px;border:1px solid var(--pf-line);
  background:var(--pf-white);border-radius:var(--pf-input-r);cursor:pointer;
  flex-direction:column;justify-content:center;align-items:center;gap:4px;padding:0;
}
.pf-burger span{display:block;width:16px;height:2px;background:var(--pf-green-700);border-radius:2px;}
.pf-mobile{display:none;flex-direction:column;gap:8px;padding:0 24px 16px;}
.pf-mobile.open{display:flex;}
.pf-mobile a:not(.pf-btn){padding:9px 0;border-bottom:1px solid var(--pf-line);font-weight:600;font-size:.9rem;}

.pf-announce{
  background:var(--pf-green-900);color:#DCE8D2;
  font-size:.72rem;text-align:center;padding:7px 16px;font-weight:500;
}
.pf-announce b{
  display:inline-block;background:var(--pf-gold);color:#fff;
  font-weight:800;font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;
  padding:2px 8px;border-radius:100px;margin-right:8px;
}
.pf-announce strong{color:var(--pf-gold);}

/* ==========================================================================
   5. HERO  (light cream, contact form on the right)
   ========================================================================== */
.pf-hero{background:var(--pf-cream);padding:56px 0 70px;overflow:hidden;}
.pf-hero::before{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:1;
  background:
    radial-gradient(620px 300px at 6% 4%,rgba(88,118,27,.10),transparent 64%),
    radial-gradient(520px 280px at 96% 92%,rgba(217,146,1,.11),transparent 64%);
}
/* Campus backdrop: kept very light, and washed out further on the left so
   the headline and stats never lose contrast. */
.pf-hero-bg{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none;}
.pf-hero-bg img{width:100%;height:100%;object-fit:cover;opacity:.55;filter:grayscale(.1);}
/* The wash stays heavy behind the headline on the left and lifts toward the
   right, so the photo reads clearly without touching text contrast. */
.pf-hero-bg::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(100deg, var(--pf-cream) 4%, rgb(250 248 243 / 31%) 30%, rgba(250, 248, 243, .72) 58%, rgba(250, 248, 243, .42) 100%)
}
.pf-hero-grid{
  display:grid;grid-template-columns:1fr 420px;gap:48px;align-items:center;
  position:relative;z-index:1;
}
.pf-hero h1{margin-bottom:.4em;}
.pf-hero h1 em{font-style:normal;white-space:nowrap;}
.pf-hero .pf-lead{max-width:44ch;font-size:.95rem;}

.pf-stats{display:flex;gap:10px;margin:24px 0 20px;flex-wrap:wrap;}
.pf-stats div{
  background:var(--pf-white);border:1px solid var(--pf-line);border-radius:var(--pf-r);
  padding:11px 16px;min-width:98px;box-shadow:var(--pf-sh-s);
}
.pf-stats b{display:block;font-size:1.32rem;font-weight:800;color:var(--pf-green-700);line-height:1.15;}
.pf-stats span{font-size:.66rem;color:var(--pf-muted);font-weight:600;line-height:1.35;display:block;}

.pf-social{display:flex;align-items:center;gap:12px;flex-wrap:wrap;}
.pf-avatars{display:flex;}
.pf-avatars span{
  width:32px;height:32px;border-radius:50%;border:2px solid var(--pf-cream);
  margin-left:-10px;background:var(--pf-leaf);color:#fff;
  display:grid;place-items:center;font-size:.66rem;font-weight:800;
}
.pf-avatars span:first-child{margin-left:0;}
.pf-avatars span:nth-child(2){background:var(--pf-gold-deep);}
.pf-avatars span:nth-child(3){background:var(--pf-green-600);}
.pf-avatars span:nth-child(4){background:var(--pf-green-900);}
.pf-social .stars{color:var(--pf-gold);letter-spacing:1px;font-size:.8rem;line-height:1;}
.pf-social small{display:block;font-size:.72rem;color:var(--pf-muted);}

/* ==========================================================================
   6. FEE CALCULATOR
   ========================================================================== */
.pf-calcsec{background:var(--pf-white);}
.pf-calc-grid{display:grid;grid-template-columns:1fr 420px;gap:48px;align-items:center;}
.pf .pf-calc-list{margin:20px 0 0;}
.pf-calc-list li{display:flex;gap:10px;align-items:flex-start;padding:6px 0;font-size:.85rem;color:var(--pf-ink-soft);}
.pf-calc-list li b{color:var(--pf-ink);}
.pf-calc-list svg{color:var(--pf-leaf);flex-shrink:0;margin-top:4px;}

.pf-calc{
  background:var(--pf-white);border:1px solid var(--pf-line);
  border-radius:var(--pf-r-lg);box-shadow:var(--pf-sh-l);padding:18px;position:relative;
}
.pf-calc-top{
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding-bottom:12px;border-bottom:1px dashed var(--pf-line);margin-bottom:15px;
}
.pf-calc-top h2{
  font-family:var(--pf-sans);font-size:.65rem;font-weight:800;
  letter-spacing:.11em;text-transform:uppercase;color:var(--pf-green-700);
  margin:0;display:flex;align-items:center;gap:6px;
}
.pf-calc-top h2 svg{color:var(--pf-gold);flex-shrink:0;}
.pf-calc-top .tag{
  background:var(--pf-leaf-soft);color:var(--pf-leaf-dark);
  font-size:.58rem;font-weight:800;letter-spacing:.04em;text-transform:uppercase;
  padding:4px 9px;border-radius:100px;white-space:nowrap;
}
.pf-step{
  display:flex;align-items:baseline;justify-content:space-between;gap:8px;
  font-size:.63rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  color:var(--pf-muted);margin-bottom:7px;
}
.pf-step .val{font-size:.74rem;letter-spacing:0;text-transform:none;color:var(--pf-green-700);font-weight:800;}
.pf-step .n{color:var(--pf-gold);}

.pf-count{display:flex;gap:7px;}
.pf-count input[type="number"]{
  flex:1;min-width:0;font-family:var(--pf-sans);font-size:.95rem;font-weight:700;
  color:var(--pf-ink);background:var(--pf-cream);
  border:1.5px solid var(--pf-line);border-radius:var(--pf-input-r);
  padding:10px 12px;-moz-appearance:textfield;
}
.pf-count input[type="number"]::-webkit-outer-spin-button,
.pf-count input[type="number"]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0;}
.pf-count input:focus{outline:none;border-color:var(--pf-leaf);background:var(--pf-white);}
.pf-paste{
  display:inline-flex;align-items:center;gap:6px;flex-shrink:0;
  background:var(--pf-green-700);color:#fff;border:0;border-radius:var(--pf-btn-r);
  padding:0 13px;font-size:.76rem;font-weight:700;cursor:pointer;transition:background .18s ease;
}
.pf-paste:hover{background:var(--pf-green-900);}
.pf-pastebox{display:none;margin-top:9px;}
.pf-pastebox.open{display:block;}
.pf-pastebox textarea{
  width:100%;min-height:94px;resize:vertical;font-family:var(--pf-sans);font-size:.83rem;
  color:var(--pf-ink);background:var(--pf-cream);border:1.5px solid var(--pf-line);
  border-radius:var(--pf-input-r);padding:10px 12px;line-height:1.5;
}
.pf-pastebox textarea:focus{outline:none;border-color:var(--pf-leaf);background:var(--pf-white);}
.pf-pastebox p{font-size:.68rem;color:var(--pf-muted);margin:5px 0 0;}

.pf-range{
  -webkit-appearance:none;appearance:none;width:100%;height:5px;margin:13px 0 17px;
  background:linear-gradient(90deg,var(--pf-leaf) var(--pf-fill,7%),var(--pf-line) var(--pf-fill,7%));
  border-radius:100px;cursor:pointer;
}
.pf-range::-webkit-slider-thumb{
  -webkit-appearance:none;width:17px;height:17px;border-radius:50%;
  background:var(--pf-leaf);border:3px solid #fff;box-shadow:0 2px 7px rgba(88,118,27,.6);cursor:grab;
}
.pf-range::-moz-range-thumb{
  width:17px;height:17px;border-radius:50%;background:var(--pf-leaf);
  border:3px solid #fff;box-shadow:0 2px 7px rgba(88,118,27,.6);cursor:grab;
}

.pf-levels{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-bottom:17px;}
.pf-level{
  border:1.5px solid var(--pf-line);border-radius:var(--pf-input-r);
  background:var(--pf-cream);padding:9px 11px;text-align:left;cursor:pointer;
  transition:border-color .18s ease,background .18s ease,color .18s ease;
}
.pf-level b{display:block;font-size:.82rem;font-weight:800;color:var(--pf-ink);}
.pf-level span{display:block;font-size:.62rem;color:var(--pf-muted);line-height:1.3;margin-top:1px;}
.pf-level:hover{border-color:rgba(88,118,27,.55);}
.pf-level.on{background:var(--pf-green-700);border-color:var(--pf-green-700);}
.pf-level.on b{color:#fff;}
.pf-level.on span{color:rgba(255,255,255,.7);}

.pf-select{
  width:100%;font-family:var(--pf-sans);font-size:.85rem;font-weight:600;color:var(--pf-ink);
  background:var(--pf-cream) url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='13' viewBox='0 0 24 24' fill='none' stroke='%2377827A' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 12px center;
  border:1.5px solid var(--pf-line);border-radius:var(--pf-input-r);
  padding:10px 34px 10px 12px;-webkit-appearance:none;appearance:none;cursor:pointer;
}
.pf-select:focus{outline:none;border-color:var(--pf-leaf);background-color:var(--pf-white);}

.pf .pf-rows{margin:15px 0 0;font-size:.78rem;}
.pf-rows li{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:7px 0;border-bottom:1px dashed var(--pf-line-soft);
}
.pf-rows li:last-child{border-bottom:0;}
.pf-rows .k{color:var(--pf-muted);font-weight:600;}
.pf-rows .v{font-weight:800;color:var(--pf-ink);text-align:right;}
.pf-rows .v.gold{color:var(--pf-gold-deep);}
.pf-rows .inc{display:inline-flex;align-items:center;gap:5px;color:var(--pf-leaf-dark);font-weight:800;}

.pf-total{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  background:var(--pf-gold-50);border:1.5px solid rgba(217,146,1,.28);
  border-radius:var(--pf-r);padding:12px 14px;margin:12px 0;
}
.pf-total .k{font-size:.78rem;font-weight:800;color:var(--pf-ink);}
.pf-total .k small{display:block;font-size:.62rem;font-weight:600;color:var(--pf-muted);}
.pf-total .amt{font-size:1.75rem;font-weight:800;color:var(--pf-green-700);line-height:1;}
.pf-total .was{display:block;font-size:.66rem;color:var(--pf-muted);text-decoration:line-through;text-align:right;}

.pf .pf-calcfoot{
  display:flex;flex-wrap:wrap;justify-content:center;gap:5px 14px;
  margin:10px 0 0;font-size:.65rem;color:var(--pf-muted);font-weight:600;
}
.pf-calcfoot span{display:inline-flex;align-items:center;gap:4px;}
.pf-calcfoot svg{color:var(--pf-leaf-dark);}
.pf-calcfoot a{color:var(--pf-green-700);font-weight:800;}

/* ==========================================================================
   7. OFFERS  —  £150 OFF  +  FREE PROPOSAL SAMPLE
   ========================================================================== */
/* Wide banner strips: identity block, gold rule, two lines of copy, CTA. */
.pf-obars{display:flex;flex-direction:column;gap:18px;}
.pf-obar{
  display:grid;grid-template-columns:200px auto 1fr auto;
  align-items:center;gap:24px;
  padding:26px 30px;border-radius:26px;
  border:1px solid var(--pf-line);
  background:linear-gradient(120deg,#FCFBF7 0%,var(--pf-cream) 55%,#F3F0E6 100%);
  box-shadow:0 18px 44px -26px rgba(12,36,18,.34);
  transition:transform .22s ease,box-shadow .22s ease;
}
.pf-obar:hover{transform:translateY(-3px);box-shadow:0 26px 56px -28px rgba(12,36,18,.42);}

/* the flagship offer: dark green ground + gold glow, so it clearly leads
   the pair rather than sitting level with the free sample below it */
.pf-obar--money{
  background:
    radial-gradient(520px 240px at 88% 20%,rgba(217,146,1,.26),transparent 62%),
    linear-gradient(120deg,var(--pf-green-900) 0%,var(--pf-green-700) 60%,#2E6330 100%);
  border:1.5px solid rgba(217,146,1,.55);
  box-shadow:0 0 0 4px rgba(217,146,1,.10), 0 26px 54px -26px rgba(14,38,20,.7);
}
.pf-obar--money:hover{box-shadow:0 0 0 5px rgba(217,146,1,.16), 0 32px 64px -28px rgba(14,38,20,.75);}
.pf .pf-obar--money .pf-obar-l .amt{color:#fff;}
.pf .pf-obar--money .pf-obar-l .sub{color:rgba(255,255,255,.6);}
.pf .pf-obar--money .pf-obar-l .meta{color:rgba(255,255,255,.72);}
.pf .pf-obar--money .pf-obar-m .l1{color:#fff;}
.pf .pf-obar--money .pf-obar-m .l2{color:rgba(255,255,255,.78);}
.pf-obar--money .pf-obar-code{
  background:rgba(0,0,0,.28);border-color:rgba(217,146,1,.7);color:var(--pf-gold);
}
.pf-obar--money .pf-obar-code button{background:rgba(217,146,1,.26);color:#FFDFA0;}
.pf-obar--money .pf-obar-code button:hover{background:rgba(217,146,1,.42);color:#fff;}

.pf-obar-flag{
  display:inline-flex;align-items:center;gap:5px;margin-bottom:10px;
  background:var(--pf-gold);color:#fff;
  font-size:.56rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
  padding:4px 10px;border-radius:100px;
  box-shadow:0 6px 16px -6px rgba(217,146,1,.9);
}

/* left identity block — sits where the logo does in the reference */
.pf-obar-l{min-width:0;}
.pf .pf-obar-l .amt{
  font-size:clamp(1.7rem,3vw,2.3rem);font-weight:800;line-height:1;
  letter-spacing:-.035em;color:var(--pf-ink);margin:0 0 5px;
}
.pf-obar--money .pf-obar-l .amt em{font-style:normal;color:var(--pf-gold);}
.pf-obar--sample .pf-obar-l .amt em{font-style:normal;color:var(--pf-leaf);}
.pf .pf-obar-l .sub{
  font-size:.66rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  color:var(--pf-muted);margin:0 0 8px;
}
.pf .pf-obar-l .meta{font-size:.74rem;color:var(--pf-muted);margin:0;}
.pf-obar-l .meta b{color:var(--pf-gold-deep);font-weight:800;}

/* the thin rule between the identity block and the copy */
.pf-obar-rule{width:2px;height:52px;border-radius:2px;background:var(--pf-gold);opacity:.75;}
.pf-obar--sample .pf-obar-rule{background:var(--pf-leaf);}

/* two lines of copy, as in the reference */
.pf-obar-m{min-width:0;}
.pf .pf-obar-m .l1{
  font-size:1rem;font-weight:800;letter-spacing:-.005em;
  color:var(--pf-ink);margin:0 0 5px;
}
.pf .pf-obar-m .l2{font-size:.88rem;color:var(--pf-ink-soft);margin:0;}

/* inline code chip with its copy button */
.pf-obar-code{
  display:inline-flex;align-items:center;gap:8px;vertical-align:baseline;
  background:var(--pf-gold-50);border:1px dashed rgba(217,146,1,.6);
  border-radius:6px;padding:1px 5px 1px 9px;margin-left:3px;
  font-weight:800;letter-spacing:.06em;color:var(--pf-gold-deep);
}
.pf-obar-code button{
  border:0;background:rgba(217,146,1,.16);color:var(--pf-gold-deep);
  border-radius:4px;padding:3px 7px;cursor:pointer;
  font-size:.6rem;font-weight:800;letter-spacing:.05em;text-transform:uppercase;
  transition:background .18s ease;
}
.pf-obar-code button:hover{background:rgba(217,146,1,.3);}

.pf-obar-r{flex-shrink:0;}
.pf-obar-r .pf-btn{white-space:nowrap;padding:14px 26px;}
/* ==========================================================================
   8. PARTS OF A DISSERTATION  +  DEAR READER LETTER
   ========================================================================== */
.pf-letter-grid{display:grid;grid-template-columns:340px 1fr;gap:22px;align-items:start;}

/* ---- left: parts of a dissertation ---- */
.pf-parts{
  background:var(--pf-white);border:1px solid var(--pf-line);
  border-radius:var(--pf-r-lg);box-shadow:var(--pf-sh-s);padding:20px 18px;
  position:sticky;top:96px;
}
.pf-parts-top{display:flex;align-items:center;gap:10px;margin-bottom:4px;}
.pf-parts-top .ico{
  width:34px;height:34px;border-radius:10px;background:var(--pf-leaf-soft);
  display:grid;place-items:center;color:var(--pf-leaf-dark);flex-shrink:0;
}
.pf-parts-top h3{margin:0;font-size:1rem;}
.pf-parts-top small{display:block;font-size:.68rem;color:var(--pf-muted);font-weight:600;}
.pf-parts-meter{margin:12px 0 14px;}
.pf-parts-meter .row{display:flex;justify-content:space-between;font-size:.65rem;font-weight:700;color:var(--pf-muted);margin-bottom:5px;}
.pf-parts-meter .bar{height:6px;border-radius:100px;background:var(--pf-line);overflow:hidden;}
.pf-parts-meter .bar i{display:block;height:100%;width:100%;border-radius:100px;background:linear-gradient(90deg,var(--pf-leaf),var(--pf-gold));}

.pf-part{
  display:flex;align-items:flex-start;gap:10px;
  border:1px solid var(--pf-line-soft);border-radius:var(--pf-input-r);
  padding:9px 11px;margin-bottom:7px;background:var(--pf-cream);
  transition:border-color .2s ease,transform .2s ease,background .2s ease;
}
.pf-part:hover{border-color:rgba(88,118,27,.45);background:var(--pf-white);transform:translateX(3px);}
.pf-part .tick{
  width:19px;height:19px;border-radius:50%;background:var(--pf-leaf);color:#fff;
  display:grid;place-items:center;flex-shrink:0;margin-top:2px;
}
.pf-part .txt{min-width:0;}
.pf-part b{display:block;font-size:.79rem;font-weight:800;line-height:1.35;}
.pf-part span{display:block;font-size:.68rem;color:var(--pf-muted);line-height:1.4;}
.pf-part .pct{
  margin-left:auto;flex-shrink:0;align-self:center;
  font-size:.63rem;font-weight:800;color:var(--pf-gold-deep);
  background:var(--pf-gold-50);border-radius:100px;padding:2px 7px;
}
.pf .pf-parts-foot{
  display:flex;align-items:flex-start;gap:8px;margin:12px 0 0;padding-top:12px;
  border-top:1px dashed var(--pf-line);font-size:.7rem;color:var(--pf-ink-soft);
}
.pf-parts-foot svg{color:var(--pf-gold);flex-shrink:0;margin-top:2px;}

/* ---- right: the shortened letter ---- */
.pf-letter{
  background:var(--pf-white);border:1px solid var(--pf-line);
  border-radius:var(--pf-r-lg);padding:26px 28px;position:relative;box-shadow:var(--pf-sh-s);
}
.pf-letter-top{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:8px;}
.pf-letter-top .ref{font-size:.6rem;font-weight:700;letter-spacing:.08em;color:var(--pf-muted);}
.pf-letter .pf-chip{margin-bottom:0;}
.pf-letter h2{font-size:clamp(1.5rem,2.6vw,2rem);margin-bottom:.45em;}
.pf-letter h2 span{color:var(--pf-gold);}
.pf-letter p{font-size:.88rem;color:var(--pf-ink-soft);margin:0 0 .8em;}
.pf-letter p strong{color:var(--pf-ink);}
.pf-quote{
  background:var(--pf-gold-50);border-left:3px solid var(--pf-gold);
  border-radius:0 var(--pf-r-sm) var(--pf-r-sm) 0;padding:11px 15px;margin:14px 0;
}
.pf-quote b{display:block;font-size:1rem;color:var(--pf-green-700);font-weight:800;}
.pf-quote small{display:block;font-size:.7rem;color:var(--pf-muted);margin-top:2px;}
.pf-sign{margin:16px 0 14px;}
.pf-sign .lbl{font-size:.6rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--pf-muted);}
.pf-sign b{display:block;font-size:1rem;font-weight:800;color:var(--pf-green-700);}
.pf-sign small{font-size:.7rem;color:var(--pf-muted);}
.pf-letter-cta{display:flex;gap:8px;flex-wrap:wrap;}

/* ==========================================================================
   9. WHAT WE FIX  —  interactive before / after
   ========================================================================== */
.pf-fix-tabs{display:flex;flex-wrap:wrap;gap:7px;justify-content:center;margin-bottom:24px;}
.pf-fix-tab{
  display:inline-flex;align-items:center;gap:7px;
  border:1.5px solid var(--pf-line);background:var(--pf-white);border-radius:var(--pf-input-r);
  padding:9px 16px;font-size:.8rem;font-weight:700;color:var(--pf-ink-soft);cursor:pointer;
  transition:all .18s ease;
}
.pf-fix-tab svg{opacity:.6;transition:opacity .18s ease;}
.pf-fix-tab:hover{border-color:rgba(88,118,27,.5);color:var(--pf-green-700);transform:translateY(-1px);}
.pf-fix-tab.on{
  background:var(--pf-green-700);border-color:var(--pf-green-700);color:#fff;
  box-shadow:0 10px 22px -12px rgba(23,64,31,.8);
}
.pf-fix-tab.on svg{opacity:1;}

/* three columns: draft → connector → returned file */
.pf-fix-grid{display:grid;grid-template-columns:1fr 46px 1fr;gap:12px;align-items:stretch;}

/* each pane is dressed as a document window */
.pf-fix-pane{
  background:var(--pf-white);border:1px solid var(--pf-line);
  border-radius:var(--pf-r-lg);overflow:hidden;display:flex;flex-direction:column;
  box-shadow:var(--pf-sh-s);
}
.pf-fix-pane--after{border-color:rgba(88,118,27,.45);box-shadow:var(--pf-sh);}

.pf-fix-bar{
  display:flex;align-items:center;gap:10px;
  padding:10px 14px;border-bottom:1px solid var(--pf-line-soft);
  background:var(--pf-cream);
}
.pf-fix-bar .dots{display:inline-flex;gap:4px;flex-shrink:0;}
.pf-fix-bar .dots i{width:8px;height:8px;border-radius:50%;background:var(--pf-line);}
.pf-fix-pane--before .dots i:first-child{background:#E7A9A6;}
.pf-fix-pane--after  .dots i:first-child{background:#A9CE86;}
.pf-fix-bar .name{
  font-size:.7rem;font-weight:700;color:var(--pf-muted);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.pf-fix-bar .badge{
  margin-left:auto;flex-shrink:0;padding:3px 9px;border-radius:100px;
  font-size:.58rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
}
.pf-fix-pane--before .badge{background:var(--pf-rose-soft);color:var(--pf-red);}
.pf-fix-pane--after  .badge{background:var(--pf-leaf-soft);color:var(--pf-leaf-dark);}

/* ruled paper, so the extract reads as a page from the document */
.pf-fix-body{
  flex:1;padding:18px 20px;font-size:.88rem;line-height:30px;color:var(--pf-ink-soft);
  min-height:150px;
  background-image:linear-gradient(var(--pf-line-soft) 1px,transparent 1px);
  background-size:100% 30px;background-position:0 17px;
}
.pf-fix-body del{background:#FBE3E1;color:var(--pf-red);text-decoration:line-through;padding:1px 4px;border-radius:3px;}
.pf-fix-body ins{background:#DCEEC4;color:#33500A;text-decoration:none;padding:1px 4px;border-radius:3px;font-weight:600;}

.pf-fix-foot{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:10px 14px;border-top:1px solid var(--pf-line-soft);
  font-size:.68rem;font-weight:700;
}
.pf-fix-foot .cnt{display:inline-flex;align-items:center;gap:6px;}
.pf-fix-foot .cnt::before{content:"";width:7px;height:7px;border-radius:50%;}
.pf-fix-foot .cnt--bad{color:var(--pf-red);}
.pf-fix-foot .cnt--bad::before{background:var(--pf-red);}
.pf-fix-foot .cnt--good{color:var(--pf-leaf-dark);}
.pf-fix-foot .cnt--good::before{background:var(--pf-leaf);}
.pf-fix-foot .mut{color:var(--pf-muted);font-weight:600;}

/* connector between the two panes */
.pf-fix-arrow{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;
  position:relative;
}
.pf-fix-arrow::before{
  content:"";position:absolute;top:0;bottom:0;width:2px;
  background:linear-gradient(180deg,transparent,var(--pf-line) 22%,var(--pf-line) 78%,transparent);
}
.pf-fix-arrow .ring{
  position:relative;z-index:1;width:38px;height:38px;border-radius:50%;
  background:var(--pf-green-700);color:#fff;display:grid;place-items:center;
  box-shadow:0 10px 22px -10px rgba(23,64,31,.85);
}
.pf-fix-arrow .lbl{
  position:relative;z-index:1;background:var(--pf-cream);padding:3px 0;
  font-size:.55rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  color:var(--pf-leaf-dark);text-align:center;
}

/* editor's note + colour key */
.pf .pf-fix-note{
  display:flex;gap:9px;align-items:flex-start;max-width:760px;
  margin:20px auto 0;padding:12px 16px;
  background:var(--pf-gold-50);border:1px solid rgba(217,146,1,.28);
  border-radius:var(--pf-r);font-size:.8rem;color:var(--pf-ink-soft);
}
.pf-fix-note .ic{color:var(--pf-gold);flex-shrink:0;margin-top:2px;line-height:1;}

.pf-fix-legend{
  display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:10px 18px;
  margin-top:20px;font-size:.72rem;font-weight:700;color:var(--pf-muted);
}
.pf-fix-legend span{display:inline-flex;align-items:center;gap:7px;}
.pf-fix-legend .sw{width:22px;height:11px;border-radius:3px;display:inline-block;}
.pf-fix-legend .sw--del{background:#FBE3E1;border:1px solid #EFC3BF;}
.pf-fix-legend .sw--ins{background:#DCEEC4;border:1px solid #BFD9A0;}
.pf-fix-legend .sep{width:1px;height:18px;background:var(--pf-line);}

/* ==========================================================================
   10. ATTENTION ALL LEARNERS  (brand green + gold, per the design)
   ========================================================================== */
.pf-att{
  position:relative;overflow:hidden;border-radius:var(--pf-r-xl);
  background:
    radial-gradient(620px 380px at 86% 14%,rgba(217,146,1,.30),transparent 62%),
    radial-gradient(520px 360px at 6% 92%,rgba(88,118,27,.42),transparent 62%),
    linear-gradient(130deg,var(--pf-green-900) 0%,var(--pf-green-700) 58%,var(--pf-leaf) 100%);
  color:#EFF6E7;padding:44px 40px;text-align:center;
  border:1px solid rgba(217,146,1,.26);
  box-shadow:0 30px 60px -30px rgba(14,38,20,.7);
}
.pf-att::before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:
    linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);
  background-size:44px 44px;
  mask-image:radial-gradient(circle at 50% 40%,#000,transparent 76%);
  -webkit-mask-image:radial-gradient(circle at 50% 40%,#000,transparent 76%);
}
.pf-att-in{position:relative;z-index:1;max-width:660px;margin-inline:auto;}
.pf-att h2{color:#fff;margin-bottom:.45em;}
.pf-att h2 u{text-decoration:none;color:var(--pf-gold);border-bottom:3px solid rgba(217,146,1,.45);}
.pf-att-bar{
  display:inline-flex;align-items:center;gap:8px;
  background:rgba(0,0,0,.3);border:1px solid rgba(217,146,1,.45);
  border-radius:100px;padding:9px 20px;margin-bottom:24px;font-size:.85rem;color:#F5E9CB;
}
.pf-att-bar strong{color:var(--pf-gold);border-bottom:1px solid rgba(217,146,1,.6);}
.pf .pf-att-list{
  display:grid;grid-template-columns:1fr 1fr;gap:13px 28px;
  text-align:left;margin:0 auto 28px;max-width:580px;
}
.pf-att-list li{display:flex;align-items:center;gap:10px;font-size:.85rem;color:rgba(255,255,255,.93);}
.pf-att-list .ic{
  width:22px;height:22px;border-radius:50%;flex-shrink:0;
  background:rgba(217,146,1,.2);border:1px solid rgba(217,146,1,.55);
  color:var(--pf-gold);display:grid;place-items:center;
}
.pf-att-list b{color:var(--pf-gold);}
.pf-att-btns{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;}
.pf .pf-att-foot{margin:18px 0 0;font-size:.72rem;color:rgba(255,255,255,.6);}

/* ==========================================================================
   11. WHAT'S INCLUDED  +  PROCESS
   ========================================================================== */
.pf-deliver{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;}
.pf-del{
  background:var(--pf-white);border:1px solid var(--pf-line);border-radius:var(--pf-r-lg);
  padding:22px 20px;transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;
}
.pf-del:hover{transform:translateY(-4px);box-shadow:var(--pf-sh);border-color:rgba(88,118,27,.4);}
.pf-del .ic{
  width:42px;height:42px;border-radius:12px;background:var(--pf-leaf-soft);color:var(--pf-leaf-dark);
  display:grid;place-items:center;margin-bottom:14px;
}
.pf-del:nth-child(3n+2) .ic{background:var(--pf-gold-50);color:var(--pf-gold-deep);}
.pf-del h3{font-size:1rem;margin-bottom:.35em;}
.pf-del p{font-size:.82rem;color:var(--pf-ink-soft);margin:0;}

.pf-process{
  background:
    radial-gradient(560px 320px at 10% 0%,rgba(88,118,27,.34),transparent 62%),
    linear-gradient(160deg,var(--pf-green-900),var(--pf-green-700));
  color:#E6F0DC;
}
.pf-process h2{color:#fff;}
.pf-process .pf-lead{color:rgba(255,255,255,.74);}
.pf-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;}
.pf-stepcard{
  position:relative;
  background:linear-gradient(165deg,rgba(255,255,255,.13),rgba(255,255,255,.05));
  border:1px solid rgba(255,255,255,.2);
  border-radius:var(--pf-r-lg);padding:24px 20px 22px;
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  transition:transform .22s ease,border-color .22s ease,background .22s ease;
}
.pf-stepcard:hover{
  transform:translateY(-4px);border-color:rgba(217,146,1,.55);
  background:linear-gradient(165deg,rgba(255,255,255,.18),rgba(255,255,255,.07));
}
/* the step number sits in a gold ring instead of floating loose */
.pf-stepcard .n{
  display:grid;place-items:center;width:40px;height:40px;border-radius:50%;
  font-size:1rem;font-weight:800;color:var(--pf-gold);line-height:1;margin-bottom:14px;
  background:rgba(217,146,1,.16);border:1px solid rgba(217,146,1,.45);
}
.pf-stepcard h3{font-size:1rem;color:#fff;margin-bottom:.4em;}
.pf-stepcard p{font-size:.8rem;color:rgba(255,255,255,.76);margin:0;}
.pf-stepcard .when{
  display:inline-block;margin-top:13px;font-size:.6rem;font-weight:800;
  letter-spacing:.09em;text-transform:uppercase;color:#241700;
  background:var(--pf-gold);border-radius:100px;padding:4px 11px;
}

/* ==========================================================================
   12. REVIEWS · EDITORS · SUBJECTS · SOUND FAMILIAR · PRICING · FAQ
   ========================================================================== */
.pf-revs{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;}
.pf-rev{
  position:relative;overflow:hidden;
  background:var(--pf-white);border:1px solid var(--pf-line);border-radius:var(--pf-r-lg);
  padding:22px 20px 18px;display:flex;flex-direction:column;
  box-shadow:var(--pf-sh-s);
  transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease;
}
/* gold hairline across the top, lit up on hover */
.pf-rev::before{
  content:"";position:absolute;left:0;right:0;top:0;height:3px;
  background:linear-gradient(90deg,var(--pf-gold),var(--pf-leaf));
  opacity:.35;transition:opacity .22s ease;
}
.pf-rev:hover{transform:translateY(-4px);box-shadow:var(--pf-sh);border-color:rgba(217,146,1,.4);}
.pf-rev:hover::before{opacity:1;}
/* oversized quote mark, kept behind the text */
.pf-rev::after{
  content:"\201C";position:absolute;right:14px;top:34px;
  font-size:5rem;line-height:1;color:var(--pf-gold);opacity:.09;pointer-events:none;
}
.pf-rev-top{display:flex;align-items:center;gap:11px;margin-bottom:11px;}
.pf-rev-av{
  width:38px;height:38px;border-radius:50%;flex-shrink:0;
  background:linear-gradient(140deg,var(--pf-green-600),var(--pf-leaf));
  color:#fff;display:grid;place-items:center;font-size:.72rem;font-weight:800;
  box-shadow:0 0 0 3px var(--pf-leaf-soft);
}
.pf-rev-top b{display:block;font-size:.85rem;font-weight:800;line-height:1.3;}
.pf-rev-top small{font-size:.66rem;color:var(--pf-muted);}
.pf-rev-top .g{width:19px;height:19px;margin-left:auto;flex-shrink:0;}
.pf-rev .stars{
  display:flex;align-items:center;gap:8px;
  color:var(--pf-gold);letter-spacing:1.5px;font-size:.88rem;margin-bottom:9px;
}
/* small verified tick after the stars */
.pf-rev .stars::after{
  content:"Verified";letter-spacing:.06em;font-size:.56rem;font-weight:800;
  text-transform:uppercase;color:var(--pf-leaf-dark);background:var(--pf-leaf-soft);
  padding:3px 7px;border-radius:100px;
}
.pf-rev p{font-size:.82rem;line-height:1.65;color:var(--pf-ink-soft);margin:0 0 12px;position:relative;z-index:1;}
.pf-rev p.clamp{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;}
.pf-rev .more{
  margin-top:auto;background:none;border:0;padding:0;cursor:pointer;
  font-size:.75rem;font-weight:800;color:var(--pf-leaf-dark);align-self:flex-start;
}
.pf-rev .more:hover{text-decoration:underline;}

.pf-gscore{
  display:flex;align-items:center;gap:14px;width:max-content;max-width:100%;
  margin:20px auto 0;
  background:var(--pf-white);border:1px solid var(--pf-line);border-radius:100px;
  padding:9px 22px 9px 12px;box-shadow:var(--pf-sh-s);
}
.pf-gscore .g{width:30px;height:30px;flex-shrink:0;}
.pf-gscore b{font-size:1.2rem;font-weight:800;color:var(--pf-green-700);line-height:1.1;}
.pf-gscore .stars{color:var(--pf-gold);letter-spacing:1.5px;font-size:.82rem;}
.pf-gscore .sep{width:1px;height:26px;background:var(--pf-line);flex-shrink:0;}
.pf-gscore small{font-size:.72rem;color:var(--pf-muted);display:block;}
.pf-gscore small b{font-size:.72rem;color:var(--pf-ink);}

.pf-experts{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;}
.pf-exp{
  background:var(--pf-white);border:1px solid var(--pf-line);border-radius:var(--pf-r-lg);
  padding:16px;display:flex;flex-direction:column;
  transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;
}
.pf-exp:hover{transform:translateY(-3px);box-shadow:var(--pf-sh);border-color:rgba(88,118,27,.4);}
.pf-exp-tags{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:13px;}
.pf-exp-tags .slot{
  font-size:.55rem;font-weight:800;letter-spacing:.05em;text-transform:uppercase;
  background:var(--pf-gold-soft);color:var(--pf-gold-deep);border-radius:100px;padding:3px 9px;
}
.pf-exp-tags .uni{font-size:.55rem;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--pf-muted);}
.pf-exp-id{display:flex;align-items:center;gap:11px;margin-bottom:12px;}
.pf-exp-av{
  width:54px;height:54px;border-radius:50%;flex-shrink:0;overflow:hidden;
  background:linear-gradient(140deg,var(--pf-green-600),var(--pf-leaf));
  color:#fff;display:grid;place-items:center;
  font-size:1rem;font-weight:800;border:2px solid #fff;
  box-shadow:0 0 0 2px rgba(217,146,1,.45);
}
.pf-exp-av img{width:100%;height:100%;object-fit:cover;}
.pf-exp-id b{display:block;font-size:.98rem;font-weight:800;line-height:1.25;}
.pf-exp-id .role{
  display:block;font-size:.57rem;font-weight:800;letter-spacing:.07em;
  text-transform:uppercase;color:var(--pf-leaf-dark);margin:2px 0 3px;
}
.pf-exp-id .ver{display:inline-flex;align-items:center;gap:4px;font-size:.63rem;color:var(--pf-muted);font-weight:600;}
.pf-exp-id .ver svg{color:#4285F4;flex-shrink:0;}
.pf-exp-fields{
  font-size:.68rem;color:var(--pf-ink-soft);line-height:1.5;
  border-top:1px solid var(--pf-line-soft);border-bottom:1px solid var(--pf-line-soft);
  padding:9px 0;margin-bottom:12px;
}
.pf-exp-fields span{display:block;}
.pf-exp-fields span + span{color:var(--pf-muted);}
.pf-metric-t{
  display:flex;justify-content:space-between;align-items:baseline;
  font-size:.57rem;font-weight:800;letter-spacing:.09em;text-transform:uppercase;
  color:var(--pf-muted);margin-bottom:7px;
}
.pf-metric-t .since{letter-spacing:0;text-transform:none;font-weight:700;color:var(--pf-ink-soft);}
/* one banded row with hairline dividers reads cleaner than three boxes */
.pf-metrics{
  display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-bottom:14px;
  background:var(--pf-cream);border:1px solid var(--pf-line-soft);
  border-radius:var(--pf-r-sm);overflow:hidden;
}
.pf-metrics div{padding:9px 4px;text-align:center;}
.pf-metrics div + div{border-left:1px solid var(--pf-line);}
.pf-metrics span{display:block;font-size:.5rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--pf-muted);margin-bottom:2px;}
.pf-metrics b{display:block;font-size:1rem;font-weight:800;color:var(--pf-green-700);line-height:1.2;}
.pf-exp-btns{display:flex;flex-direction:column;gap:7px;margin-top:auto;}

.pf-match{
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;justify-content:center;
  background:var(--pf-white);border:1px solid var(--pf-line);border-radius:var(--pf-r);
  padding:10px 10px 10px 18px;margin:22px auto 0;max-width:660px;box-shadow:var(--pf-sh-s);
}
.pf-match .ic{color:var(--pf-leaf-dark);flex-shrink:0;}
.pf-match p{margin:0;font-size:.78rem;color:var(--pf-ink-soft);}
.pf-match p b{color:var(--pf-green-700);}
.pf-match p small{display:block;font-size:.68rem;color:var(--pf-muted);}

.pf .pf-subjects{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;max-width:880px;margin-inline:auto;}
.pf-subjects li{
  background:var(--pf-white);border:1px solid var(--pf-line);border-radius:100px;
  padding:8px 15px;font-size:.8rem;font-weight:600;color:var(--pf-ink-soft);
  transition:all .18s ease;cursor:default;
}
.pf-subjects li:hover{border-color:var(--pf-leaf);color:var(--pf-green-700);transform:translateY(-2px);}
.pf-subjects li.more{background:var(--pf-green-700);border-color:var(--pf-green-700);color:#fff;}

.pf-pain{
  background:var(--pf-white);border:1px solid var(--pf-line);border-radius:var(--pf-r-lg);
  padding:8px 14px;max-width:780px;margin-inline:auto;box-shadow:var(--pf-sh-s);
}
.pf-pain-row{
  display:flex;align-items:center;gap:13px;padding:13px 8px;
  border-bottom:1px solid var(--pf-line-soft);
}
.pf-pain-row:last-child{border-bottom:0;}
.pf-pain-row i{
  width:24px;height:24px;border-radius:50%;flex-shrink:0;font-style:normal;
  background:var(--pf-gold-soft);color:var(--pf-gold-deep);border:1px solid rgba(217,146,1,.3);
  display:grid;place-items:center;font-weight:800;font-size:.8rem;
}
.pf-pain-row p{margin:0;font-size:.87rem;color:var(--pf-ink-soft);}
.pf-pain-cta{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:26px;}
.pf-pain-foot{
  display:flex;gap:8px 30px;justify-content:center;flex-wrap:wrap;
  margin-top:16px;font-size:.74rem;color:var(--pf-muted);
}
.pf-pain-foot b{color:var(--pf-green-700);}

.pf-table-wrap{
  max-width:820px;margin-inline:auto;overflow-x:auto;
  border:1px solid var(--pf-line);border-radius:var(--pf-r-lg);
  background:var(--pf-white);box-shadow:var(--pf-sh-s);
}
.pf-table{width:100%;border-collapse:collapse;min-width:600px;font-size:.82rem;}
.pf-table th,.pf-table td{padding:12px 18px;text-align:left;vertical-align:middle;}
.pf-table thead th{
  font-size:.6rem;font-weight:800;letter-spacing:.11em;
  text-transform:uppercase;color:var(--pf-muted);background:var(--pf-cream);
  border-bottom:1px solid var(--pf-line);
}
.pf-table thead th.us{background:var(--pf-green-700);color:#fff;}
.pf-table tbody tr{border-bottom:1px solid var(--pf-line-soft);}
.pf-table tbody tr:last-child{border-bottom:0;}
.pf-table tbody tr:hover{background:var(--pf-cream);}
.pf-table td:first-child{font-weight:700;color:var(--pf-ink);}
.pf-table td.us{background:rgba(88,118,27,.07);font-weight:800;color:var(--pf-green-700);}
.pf-table td.us a{color:var(--pf-green-700);}
.pf-table td.them{color:var(--pf-muted);}
.pf-table td.them del{color:var(--pf-red);opacity:.7;}

.pf-faq{max-width:780px;margin-inline:auto;}
.pf-faq-item{
  background:var(--pf-white);border:1px solid var(--pf-line);border-radius:var(--pf-r);
  margin-bottom:9px;overflow:hidden;transition:border-color .2s ease,box-shadow .2s ease;
}
.pf-faq-item.open{border-color:rgba(88,118,27,.45);box-shadow:var(--pf-sh-s);}
.pf-faq-q{
  width:100%;display:flex;align-items:center;gap:14px;text-align:left;
  background:none;border:0;padding:16px 20px;cursor:pointer;
  font-size:.92rem;font-weight:700;color:var(--pf-ink);
}
.pf-faq-q .pm{
  margin-left:auto;flex-shrink:0;width:24px;height:24px;border-radius:50%;
  background:var(--pf-leaf-soft);color:var(--pf-leaf-dark);display:grid;place-items:center;
  transition:transform .25s ease,background .2s ease,color .2s ease;
}
.pf-faq-item.open .pm{transform:rotate(45deg);background:var(--pf-green-700);color:#fff;}
.pf-faq-a{max-height:0;overflow:hidden;transition:max-height .3s ease;}
.pf-faq-a p{margin:0;padding:0 20px 18px;font-size:.84rem;color:var(--pf-ink-soft);}

/* ==========================================================================
   13. CONTACT FORM
   The form is the homepage contact form from index.php — same field markup,
   same class names, same ids, so code.php handles it exactly as before.
   It sits in the hero's right column and is styled to match the reference
   design's card there: solid white panel, thin border, title row with a
   gold pill on the right, cream input wells.
   ========================================================================== */
/* The card is the page's main conversion point, so it is deliberately the
   heaviest object in the hero: dark header block, white body, deep shadow
   and a gold rim that lifts it off the cream background. */
.pf .hero-card{
  position:relative;
  background:#ffffff87 !important;
  border:0;
  border-radius:26px;
  padding:0;overflow:hidden;
  box-shadow:0 0 0 1px rgba(217,146,1,.28), 0 34px 70px -26px rgba(14,38,20,.42);
  transition:opacity .7s cubic-bezier(.2,.7,.3,1),transform .6s cubic-bezier(.2,.7,.3,1),box-shadow .4s ease;
}
.pf .hero-card:hover{
  transform:translateY(-4px);
  box-shadow:0 0 0 2px rgba(217,146,1,.45), 0 42px 84px -28px rgba(14,38,20,.5);
}

/* dark header block — the strongest contrast on the page */
.pf .hero-card-top{
  display:flex;align-items:flex-start;justify-content:space-between;gap:12px;
  background:
    radial-gradient(420px 180px at 88% 0%,rgba(217,146,1,.28),transparent 65%),
    linear-gradient(135deg,var(--pf-green-900),var(--pf-green-700));
  padding:22px 24px 20px;margin:0;border:0;
}
.pf .hero-card-top h3{margin:0;color:#fff;font-size:1.32rem;letter-spacing:-.035em;}
.pf .card-badge{
  background:var(--pf-gold);color:#241700;
  font-size:.58rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  line-height:1;padding:7px 12px;border-radius:100px;white-space:nowrap;flex-shrink:0;
  box-shadow:0 6px 16px -6px rgba(217,146,1,.9);
}
.pf .hero-card .sub{
  font-size:.86rem;color:rgba(255,255,255,.72);margin:0;
  background:linear-gradient(135deg,var(--pf-green-900),var(--pf-green-700));
  padding:0 24px 20px;
}
.pf .hero-card .sub strong{color:var(--pf-gold);font-weight:700;}
.pf .hero-card form{padding:22px 24px 24px;}

.pf .field{margin-bottom:12px;}
.pf .field label{display:block;font-size:.66rem;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--pf-muted);margin-bottom:7px;}
.pf .field input,.pf .field select{
  width:100%;padding:14px 16px;border-radius:var(--pf-input-r);border:1.5px solid var(--pf-line);
  background:var(--pf-cream);color:var(--pf-ink);font-family:var(--pf-sans);font-size:.95rem;outline:none;
  transition:border-color .2s,background .2s,box-shadow .2s;
}
.pf .field input:focus,.pf .field select:focus{box-shadow:0 0 0 3px rgba(217,146,1,.18);}
.pf .field input::placeholder{color:var(--pf-muted);}
.pf .field select{
  -webkit-appearance:none;appearance:none;cursor:pointer;padding-right:40px;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2377827A' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;
}
.pf .field select:invalid{color:var(--pf-muted);}
.pf .field input:focus,.pf .field select:focus{border-color:var(--pf-leaf);background-color:var(--pf-white);}
.pf .field select option{color:var(--pf-ink);}

/* the original .btn / .btn-gold, so the submit button matches index.php */
.pf .btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.6em;
  font-family:var(--pf-sans);font-weight:700;font-size:.98rem;
  padding:15px 30px;border-radius:var(--pf-btn-r);border:1.5px solid transparent;
  cursor:pointer;transition:transform .18s ease,box-shadow .18s ease,background .18s ease,color .18s ease;
}
.pf .btn:hover{transform:translateY(-2px);}
.pf .btn-gold{background:var(--pf-gold);color:#241700;border-color:var(--pf-gold);box-shadow:0 10px 24px -10px rgba(217,146,1,.75);}
.pf .btn-gold:hover{background:#E8A317;border-color:#E8A317;color:#241700;box-shadow:0 14px 30px -10px rgba(217,146,1,.85);}
.pf .hero-card .btn{width:100%;margin-top:12px;}
.pf .hero-card .btn-submit{padding:17px 30px;font-size:1rem;}
.pf .hero-card .fine{font-size:.74rem;color:var(--pf-muted);text-align:center;margin:12px 0 0;}

/* ==========================================================================
   13b. CTA BANDS
   Two of them break up the long middle of the page and give a reader who
   is ready to act somewhere to go without scrolling to the end.
   ========================================================================== */
.pf-cta{padding:56px 0;}
.pf-cta--dark{
  background:
    radial-gradient(560px 300px at 88% 10%,rgba(217,146,1,.24),transparent 62%),
    linear-gradient(130deg,var(--pf-green-900),var(--pf-green-700));
  color:#E6F0DC;
}
.pf-cta--light{background:var(--pf-cream);border-top:1px solid var(--pf-line);}
.pf-cta-in{
  display:flex;align-items:center;justify-content:space-between;gap:36px;flex-wrap:wrap;
}
.pf-cta-txt{flex:1 1 460px;min-width:0;}
.pf .pf-cta-txt h2{font-size:clamp(1.65rem,3.1vw,2.4rem);margin:0 0 .35em;}
.pf-cta--dark .pf-cta-txt h2{color:#fff;}
.pf-cta--dark .pf-cta-txt h2 span{color:var(--pf-gold);}
.pf-cta--light .pf-cta-txt h2 span{color:var(--pf-gold-deep);}
.pf .pf-cta-txt p{margin:0;font-size:1rem;line-height:1.55;max-width:52ch;}
.pf-cta--dark .pf-cta-txt p{color:rgba(255,255,255,.76);}
.pf-cta--light .pf-cta-txt p{color:var(--pf-ink-soft);}
.pf-cta-btns{display:flex;gap:12px;flex-wrap:wrap;flex-shrink:0;}

/* ==========================================================================
   13c. THANK-YOU PAGE  (thanks.php)
   Shares this stylesheet so the confirmation matches the landing page.
   ========================================================================== */
.pf-ty{
  background:
    radial-gradient(760px 420px at 78% -8%,rgba(217,146,1,.24),transparent 62%),
    linear-gradient(160deg,var(--pf-green-900) 0%,var(--pf-green-700) 52%,#16401F 100%);
  color:#E6F0DC;padding:76px 0 86px;min-height:70vh;
}
.pf-ty-in{max-width:720px;margin-inline:auto;text-align:center;}
.pf-ty-tick{
  width:76px;height:76px;border-radius:50%;margin:0 auto 24px;
  display:grid;place-items:center;
  background:rgba(217,146,1,.16);border:2px solid var(--pf-gold);color:var(--pf-gold);
  box-shadow:0 0 0 8px rgba(217,146,1,.07);
}
.pf .pf-ty h1{color:#fff;font-size:clamp(2.1rem,4.6vw,3.2rem);margin-bottom:.3em;}
.pf .pf-ty h1 span{color:var(--pf-gold);}
.pf .pf-ty-lead{
  font-size:1.08rem;line-height:1.6;color:rgba(255,255,255,.8);
  max-width:52ch;margin:0 auto;
}
.pf-ty-lead strong{color:#fff;}
.pf-ty-btns{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:30px;}

/* what happens next */
/* an <ol>, so the default markers need clearing too */
.pf .pf-ty-steps{
  display:grid;grid-template-columns:repeat(3,1fr);gap:14px;
  margin:44px 0 0;padding:0;list-style:none;text-align:left;
}
.pf-ty-steps li{
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);
  border-radius:var(--pf-r-lg);padding:20px 18px;
}
.pf-ty-steps .n{
  display:grid;place-items:center;width:32px;height:32px;border-radius:50%;
  background:rgba(217,146,1,.18);border:1px solid rgba(217,146,1,.5);
  color:var(--pf-gold);font-weight:800;font-size:.85rem;margin-bottom:12px;
}
.pf-ty-steps b{display:block;color:#fff;font-size:.98rem;letter-spacing:-.02em;margin-bottom:4px;}
.pf-ty-steps span:not(.n){display:block;font-size:.85rem;line-height:1.5;color:rgba(255,255,255,.7);}
.pf .pf-ty-note{margin:34px 0 0;font-size:.82rem;color:rgba(255,255,255,.55);}

@media (max-width:760px){
  .pf .pf-ty-steps{grid-template-columns:1fr;}
  .pf-ty{padding:52px 0 60px;}
}

/* ==========================================================================
   14. FINAL CTA  +  FOOTER
   ========================================================================== */
.pf-final{
  background:
    radial-gradient(620px 340px at 50% 0%,rgba(88,118,27,.36),transparent 66%),
    linear-gradient(180deg,var(--pf-green-900),var(--pf-green-800));
  color:#DFEBD4;text-align:center;overflow:hidden;
}
.pf-final h2{color:#fff;font-size:clamp(1.7rem,3.6vw,2.7rem);}
.pf-final h2 span{color:var(--pf-gold);}
.pf-final p{color:rgba(255,255,255,.72);max-width:48ch;margin-inline:auto;font-size:.88rem;}
.pf-final-btns{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:22px;}

.pf-footer{background:var(--pf-green-900);color:#94A98B;padding:20px 0;font-size:.76rem;}
.pf-foot-in{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;}
.pf-foot-l{display:flex;align-items:center;gap:12px;flex-wrap:wrap;}
.pf-foot-l img{height:22px;width:auto;}
.pf-foot-r{display:flex;gap:22px;flex-wrap:wrap;}
.pf-foot-r span{display:inline-flex;align-items:center;gap:6px;}
.pf-foot-r svg{color:var(--pf-leaf);}

/* ==========================================================================
   15. FLOATING BUTTONS + STICKY MOBILE QUOTE BAR
   ========================================================================== */
.pf-float{
  position:fixed;left:16px;z-index:80;
  display:inline-flex;align-items:center;gap:8px;
  border-radius:var(--pf-btn-r);padding:11px 16px;font-size:.8rem;font-weight:700;
  box-shadow:0 14px 30px -14px rgba(0,0,0,.6);transition:transform .2s ease;
}
.pf-float:hover{transform:translateY(-3px);}
.pf-float--wa{bottom:18px;background:var(--pf-wa);color:#fff !important;}
.pf-float--call{bottom:70px;background:var(--pf-green-700);color:#fff !important;}

.pf-bar{
  position:fixed;left:0;right:0;bottom:0;z-index:75;
  background:var(--pf-white);border-top:1px solid var(--pf-line);
  box-shadow:0 -8px 26px -16px rgba(12,36,18,.5);
  padding:9px 14px;display:none;align-items:center;gap:12px;
}
.pf-bar.show{display:flex;}
.pf-bar .txt{min-width:0;flex:1;}
.pf-bar b{display:block;font-size:.82rem;line-height:1.25;}
.pf-bar small{font-size:.68rem;color:var(--pf-muted);}
@media (min-width:861px){.pf-bar{display:none !important;}}

/* ==========================================================================
   16. POPUP  (dark green card, as on the homepage)
   ========================================================================== */
.pf-popup{position:fixed;inset:0;z-index:120;display:grid;place-items:center;padding:20px;}
.pf-popup[hidden]{display:none;}
.pf-popup-bd{position:absolute;inset:0;background:rgba(10,24,13,.72);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);opacity:0;transition:opacity .3s ease;}
.pf-popup.open .pf-popup-bd{opacity:1;}
.pf-popup-card{
  position:relative;width:100%;max-width:430px;max-height:92vh;overflow-y:auto;margin:auto;
  background:linear-gradient(165deg,#1A3F22 0%,#0E2614 100%);
  border:1px solid rgba(255,255,255,.14);
  border-radius:var(--pf-r-xl);padding:34px 30px 28px;
  box-shadow:0 40px 90px -30px rgba(0,0,0,.7);
  opacity:0;transform:translateY(24px) scale(.97);
  transition:opacity .32s ease,transform .32s cubic-bezier(.2,.8,.3,1);
}
.pf-popup.open .pf-popup-card{opacity:1;transform:none;}
.pf-popup-x{
  position:absolute;top:14px;right:14px;width:34px;height:34px;
  display:flex;align-items:center;justify-content:center;
  border-radius:var(--pf-input-r);border:1px solid rgba(255,255,255,.2);
  background:rgba(255,255,255,.07);color:rgba(255,255,255,.75);
  cursor:pointer;transition:background .2s,color .2s,transform .2s;
}
.pf-popup-x:hover{background:rgba(255,255,255,.16);color:#fff;transform:rotate(90deg);}
.pf .popup-badge{
  display:inline-block;font-size:.74rem;font-weight:700;letter-spacing:.02em;
  color:var(--pf-gold);background:rgba(217,146,1,.13);
  border:1px solid rgba(217,146,1,.32);
  padding:7px 14px;border-radius:100px;margin-bottom:16px;
}
/* The popup card is dark, so its fields keep the dark treatment — the
   .field rules in section 13 are tuned for the light hero card. */
.pf .pf-popup-card h3{color:#fff;font-size:1.32rem;margin-bottom:4px;}
.pf .pf-popup-card .sub{font-size:.86rem;color:rgba(255,255,255,.62);margin-bottom:22px;}
.pf .pf-popup-card .field label{color:rgba(255,255,255,.72);}
.pf .pf-popup-card .field input,
.pf .pf-popup-card .field select{
  border:1px solid rgba(255,255,255,.3);
  background-color:rgba(255,255,255,.14);color:#fff;
}
.pf .pf-popup-card .field select{
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.6' stroke-linecap='round' opacity='.7'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}
.pf .pf-popup-card .field input::placeholder{color:rgba(255,255,255,.62);}
.pf .pf-popup-card .field select:invalid{color:rgba(255,255,255,.62);}
.pf .pf-popup-card .field input:focus,
.pf .pf-popup-card .field select:focus{border-color:var(--pf-gold);background-color:rgba(255,255,255,.2);}
.pf .pf-popup-card .btn{width:100%;margin-top:8px;}
.pf .pf-popup-card .fine{font-size:.75rem;color:rgba(255,255,255,.5);text-align:center;margin:12px 0 0;}
.pf-popup-wa{
  display:flex;align-items:center;justify-content:center;gap:8px;
  margin-top:16px;padding-top:16px;border-top:1px solid rgba(255,255,255,.12);
  font-size:.84rem;font-weight:600;color:rgba(255,255,255,.7);transition:color .2s;
}
.pf-popup-wa:hover{color:#fff;}
@media (max-width:768px){
  .pf-popup{padding:16px;align-items:flex-start;}
  .pf-popup-card{padding:30px 20px 24px;border-radius:20px;}
  .pf .pf-popup-card h3{font-size:1.18rem;}
  .pf .popup-badge{font-size:.68rem;padding:6px 12px;}
}
@media (max-height:720px){.pf-popup{align-items:flex-start;}}

/* ==========================================================================
   17. RESPONSIVE
   ========================================================================== */
@media (max-width:1024px){
  .pf-hero-grid,.pf-calc-grid,.pf-contact-grid{grid-template-columns:1fr;gap:36px;}
  .pf-calc{max-width:480px;margin-inline:auto;width:100%;}
  .pf-letter-grid{grid-template-columns:1fr;gap:20px;}
  .pf-parts{position:static;}
  .pf-revs,.pf-experts,.pf-deliver{grid-template-columns:1fr 1fr;}
  .pf-steps{grid-template-columns:1fr 1fr;}
}
@media (max-width:860px){
  .pf-nav-cta,.pf-desk{display:none;}
  .pf-burger{display:flex;margin-left:auto;}
  .pf-brand span{display:none;}
  .pf-pad{padding:52px 0;}
  .pf-pad-sm{padding:40px 0;}
  .pf-obar{grid-template-columns:1fr;gap:16px;padding:24px 22px;text-align:left;}
  .pf-obar-rule{width:46px;height:2px;}
  .pf-obar-r .pf-btn{width:100%;}
  /* stack the two documents and turn the connector on its side */
  .pf-fix-grid{grid-template-columns:1fr;gap:0;}
  .pf-fix-arrow{flex-direction:row;padding:12px 0;}
  .pf-fix-arrow::before{top:auto;bottom:auto;left:0;right:0;width:auto;height:2px;
    background:linear-gradient(90deg,transparent,var(--pf-line) 22%,var(--pf-line) 78%,transparent);}
  .pf-fix-arrow .ring{transform:rotate(90deg);}
  .pf-fix-arrow .lbl{padding:0 10px;}
  .pf-att{padding:30px 20px;}
  .pf .pf-att-list{grid-template-columns:1fr;}
  .pf-letter{padding:22px 20px;}
  .pf-float span{display:none;}
  .pf-float{padding:12px;}
  .pf-float--wa{bottom:78px;}
  .pf-float--call{bottom:132px;}
  body.pf{padding-bottom:62px;}
}
@media (max-width:620px){
  /* narrow screens have no room beside the copy — drop the edge photos */
  .pf-photo--att,.pf-photo--process,.pf-photo--final-l,.pf-photo--final-r,  .pf-hero-bg img{opacity:.10;}
  .pf-revs,.pf-experts,.pf-deliver,.pf-steps{grid-template-columns:1fr;}
  .pf-hero{padding:36px 0 48px;}
  .pf-stats div{flex:1;min-width:88px;padding:9px 11px;}
  .pf-calc{padding:15px 13px;}
  .pf .hero-card{padding:28px 20px 24px;}
  .pf-levels{grid-template-columns:1fr;}
  .pf-count{flex-wrap:wrap;}
  .pf-count input[type="number"]{flex:1 1 100%;}
  .pf-paste{flex:1;padding:10px 14px;justify-content:center;}
  .pf-total .amt{font-size:1.5rem;}
  .pf-foot-in{flex-direction:column;text-align:center;}
}