/* Page upgrade layer: Growth Plus, GBP Fix, Growth Basics only (loaded after site.css).
   Every rule is scoped by body[data-page]; nothing here touches other pages. */

/* ---------- trust strip ---------- */
.pu-trust{background:var(--card);border-bottom:1px solid var(--hair,rgba(29,32,68,.09))}
.pu-trust ul{list-style:none;margin:0;padding:22px 0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px 28px}
.pu-trust li{display:flex;gap:12px;align-items:flex-start;font-size:14.5px;line-height:1.4;color:var(--muted)}
.pu-trust li b{display:block;color:var(--ink);font-size:15px;margin-bottom:2px}
.pu-trust .bars{margin-top:5px}

/* ---------- three example job cards (Growth Plus) ---------- */
.pu-jobs{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;counter-reset:pj}
.pu-job{position:relative;border-radius:28px;padding:24px 24px 30px;color:#fff;overflow:hidden;
 background:radial-gradient(120% 80% at 90% -10%,#33387a 0%,#1d2044 52%,#14173a 100%);
 box-shadow:0 1px 2px rgba(29,32,68,.08),0 40px 70px -40px rgba(29,32,68,.7);display:flex;flex-direction:column;min-height:100%}
.pu-job:before{counter-increment:pj;content:counter(pj);position:absolute;right:22px;top:14px;font:800 64px/1 var(--display);color:rgba(255,255,255,.08)}
.pu-vis{display:flex;flex-direction:column;gap:8px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);border-radius:20px;padding:16px;margin-bottom:26px;min-height:238px;justify-content:flex-end}
.pu-b{max-width:88%;padding:9px 13px;border-radius:16px;font-size:13.5px;line-height:1.4}
.pu-b.sys{align-self:center;max-width:100%;background:none;color:var(--muted-d);font-size:12px;padding:2px 0}
.pu-b.out{align-self:flex-end;background:#fff;color:var(--ink);border-bottom-right-radius:5px}
.pu-b.in{align-self:flex-start;background:rgba(255,255,255,.14);color:#fff;border-bottom-left-radius:5px}
.pu-b.stars{align-self:flex-end;background:none;padding:0 4px;color:var(--gold);letter-spacing:.15em;font-size:17px}
.pu-b.ok{align-self:center;max-width:100%;background:rgba(61,122,87,.3);color:#a9e6c3;font-weight:600;font-size:12.5px;padding:6px 12px;border-radius:99px}
.pu-job h3{color:#fff;font-size:clamp(28px,2.4vw,34px);margin-bottom:10px}
.pu-job p{color:var(--muted-d);font-size:15.5px;line-height:1.55;margin:0}
.pu-note{margin:18px 0 0;font-size:13.5px;color:var(--muted)}
@media(hover:hover){.pu-job{transition:transform .4s var(--ease),box-shadow .4s var(--ease)}.pu-job:hover{transform:translateY(-5px)}}
@media(prefers-reduced-motion:no-preference){
 .js .pu-job:not(.in) .pu-b{opacity:0}
 .pu-job.in .pu-b{animation:pu-pop .55s var(--ease) both;animation-delay:calc(var(--i,0) * .5s + .35s)}
 .pu-job.in .pu-b.ok{animation-name:pu-pop-ok}
}
@keyframes pu-pop{from{opacity:0;transform:translateY(10px) scale(.97)}to{opacity:1;transform:none}}
@keyframes pu-pop-ok{0%{opacity:0;transform:scale(.85)}60%{opacity:1;transform:scale(1.04)}100%{opacity:1;transform:none}}

/* ---------- included card: navy, gold ticks ---------- */
body[data-page="growth-plus"] .incl>div.yes,
body[data-page="growth-basics"] .incl>div.yes,
body[data-page="gbp-fix"] .incl>div.yes{background:radial-gradient(120% 90% at 100% 0%,#33387a 0%,#1d2044 55%,#14173a 100%);color:#fff;border-color:transparent;box-shadow:0 40px 70px -40px rgba(29,32,68,.7)}
body[data-page="growth-plus"] .incl .yes h3,
body[data-page="growth-basics"] .incl .yes h3,
body[data-page="gbp-fix"] .incl .yes h3{color:#fff}
body[data-page="growth-plus"] .incl .yes li:before,
body[data-page="growth-basics"] .incl .yes li:before,
body[data-page="gbp-fix"] .incl .yes li:before{border-color:var(--gold)}
body[data-page="growth-plus"] .incl .yes a{color:var(--gold)}
.pu-tag{display:inline-block;margin:0 0 14px;padding:5px 12px;border-radius:99px;background:rgba(201,168,76,.16);color:var(--gold);font-size:12.5px;font-weight:700;letter-spacing:.02em}

/* ---------- progress timeline (replaces the plain numbered steps) ---------- */
.pu-line{list-style:none;margin:0;padding:0;display:grid;gap:0;position:relative;counter-reset:pl}
.pu-line.c3{grid-template-columns:repeat(3,minmax(0,1fr))}
.pu-line.c4{grid-template-columns:repeat(4,minmax(0,1fr))}
.pu-line:before,.pu-line:after{content:"";position:absolute;left:0;top:13px;height:2px;border-radius:2px}
.pu-line:before{right:0;background:var(--stone)}
.pu-line:after{width:100%;background:linear-gradient(90deg,var(--gold),#e6cf86);transform-origin:left;transform:scaleX(1)}
.pu-line li{position:relative;padding:46px 26px 0 0;counter-increment:pl}
.pu-line li:before{content:counter(pl);position:absolute;left:0;top:0;width:28px;height:28px;border-radius:50%;background:var(--navy);color:#fff;font:700 13px/28px var(--body);text-align:center;box-shadow:0 0 0 6px var(--card);z-index:1}
.sec:not(.on-white) .pu-line li:before{box-shadow:0 0 0 6px var(--paper)}
.pu-line b{display:block;font-size:18px;margin-bottom:6px}
.pu-line span{display:block;color:var(--muted);font-size:15px;line-height:1.5}
@media(prefers-reduced-motion:no-preference){
 .js .pu-line:not(.in):after{transform:scaleX(0)}
 .pu-line:after{transition:transform 1.8s var(--ease) .2s}
 .js .pu-line:not(.in) li:before{background:var(--stone);color:var(--muted)}
 .pu-line li:before{transition:background .4s,color .4s}
 .pu-line.in li:nth-child(1):before{transition-delay:.2s}.pu-line.in li:nth-child(2):before{transition-delay:.7s}
 .pu-line.in li:nth-child(3):before{transition-delay:1.2s}.pu-line.in li:nth-child(4):before{transition-delay:1.7s}
}

/* ---------- Growth Basics: plan ladder ---------- */
.pu-ladder{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:18px;align-items:stretch}
.pu-rung{border-radius:28px;padding:30px;background:var(--card);border:1px solid var(--hair);box-shadow:var(--lift)}
.pu-rung h3{font-size:30px;margin-bottom:4px}
.pu-rung .pr{font:800 44px/1 var(--display);margin:6px 0 18px;color:var(--ink)}
.pu-rung .pr small{font:500 15px var(--body);color:var(--muted);margin-left:6px}
.pu-rung ul{list-style:none;margin:0 0 20px;padding:0;display:grid;gap:10px;font-size:15.5px}
.pu-rung li{padding-left:24px;position:relative;line-height:1.4}
.pu-rung li:before{content:"";position:absolute;left:0;top:7px;width:12px;height:6px;border-left:2.5px solid var(--good);border-bottom:2.5px solid var(--good);transform:rotate(-45deg)}
.pu-rung.plus{background:radial-gradient(120% 90% at 100% 0%,#33387a 0%,#1d2044 55%,#14173a 100%);color:#fff;border-color:transparent;box-shadow:0 40px 70px -40px rgba(29,32,68,.7)}
.pu-rung.plus h3,.pu-rung.plus .pr{color:#fff}
.pu-rung.plus .pr small{color:var(--muted-d)}
.pu-rung.plus li:before{border-color:var(--gold)}
.pu-rung.plus .plusonly{color:var(--gold);font-weight:600}
.pu-rung .here{display:inline-block;font-size:12.5px;font-weight:700;color:var(--gold-ink);background:var(--gold-soft);border-radius:99px;padding:4px 11px;margin-bottom:12px}
.pu-rung .tlink{font-weight:600}
.pu-rung.plus .tlink{color:#fff}

/* ---------- GBP Fix: found / you get table ---------- */
.pu-swap{display:grid;gap:10px}
.pu-row{display:grid;grid-template-columns:minmax(0,.9fr) 44px minmax(0,1.3fr);align-items:center;gap:0 14px;background:var(--card);border:1px solid var(--hair);border-radius:20px;padding:16px 22px;box-shadow:var(--lift)}
.pu-row .found{color:var(--bad);font-weight:600;font-size:15.5px;line-height:1.35}
.pu-row .found small,.pu-row .got small{display:block;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);font-weight:700;margin-bottom:3px}
.pu-row .got{color:var(--ink);font-weight:600;font-size:15.5px;line-height:1.35}
.pu-row .got small{color:var(--good)}
.pu-arrow{width:34px;height:34px;border-radius:50%;background:var(--navy);display:grid;place-items:center;justify-self:center}
.pu-arrow svg{display:block}
@media(prefers-reduced-motion:no-preference){
 .js .pu-row.reveal:not(.in) .pu-arrow{transform:scale(.4)}
 .pu-row .pu-arrow{transition:transform .6s var(--ease) .35s}
}

/* ---------- GBP Fix: what happens next ladder ---------- */
.pu-path{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.pu-path>*{display:block;text-decoration:none;color:var(--ink);background:var(--card);border:1px solid var(--hair);border-radius:24px;padding:24px;box-shadow:var(--lift);position:relative}
.pu-path .now{background:radial-gradient(120% 90% at 100% 0%,#33387a 0%,#1d2044 55%,#14173a 100%);color:#fff;border-color:transparent}
.pu-path small{display:block;font-size:12.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--gold-ink);margin-bottom:10px}
.pu-path .now small{color:var(--gold)}
.pu-path b{display:block;font:800 30px/1 var(--display);margin-bottom:8px}
.pu-path span{display:block;color:var(--muted);font-size:15px;line-height:1.5}
.pu-path .now span{color:var(--muted-d)}
.pu-path>*:not(.now):after{content:"";position:absolute;left:-14px;top:50%;width:14px;height:2px;background:var(--gold)}
@media(hover:hover){.pu-path>*{transition:transform .35s var(--ease)}.pu-path>a:hover{transform:translateY(-4px)}}

/* ---------- responsive ---------- */
@media(max-width:960px){
 .pu-trust ul{grid-template-columns:1fr 1fr}
 .pu-jobs{grid-template-columns:1fr}
 .pu-vis{min-height:0}
 .pu-line.c3,.pu-line.c4{grid-template-columns:1fr}
 .pu-line:before,.pu-line:after{left:13px;top:0;bottom:0;right:auto;width:2px;height:auto}
 .pu-line:after{transform-origin:top;transform:scaleY(1)}
 .js .pu-line:not(.in):after{transform:scaleY(0)}
 .pu-line li{padding:0 0 30px 52px}
 .pu-line li:last-child{padding-bottom:0}
 .pu-ladder,.pu-path{grid-template-columns:1fr}
 .pu-path>*:not(.now):after{left:50%;top:-14px;width:2px;height:14px}
}
@media(max-width:600px){
 .pu-trust ul{grid-template-columns:1fr;padding:18px 0}
 .pu-row{grid-template-columns:1fr;gap:10px;padding:18px}
 .pu-arrow{justify-self:start;transform:rotate(90deg)}
 .js .pu-row.reveal:not(.in) .pu-arrow{transform:rotate(90deg) scale(.4)}
 .pu-rung{padding:24px}
}

/* fix: step dots on GBP Fix were below the 24px touch target minimum (Lighthouse target-size) */
body[data-page="gbp-fix"] .stepcard .dots button{min-width:28px;min-height:28px}

/* ---------- 16 Oct: five-item trust strip, prices page "Also available", step links ---------- */
.pu-trust ul{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.pu-line b a{color:inherit;text-decoration:none}
.pu-line b a:hover{text-decoration:underline;text-decoration-color:var(--gold)}
.pu-also{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
body[data-page="prices"] .pu-also .prow{grid-template-columns:minmax(0,1fr);gap:14px;align-content:start}
body[data-page="prices"] .pu-also .pa .btn{width:auto}
@media(max-width:960px){.pu-also{grid-template-columns:1fr}}
@media(max-width:600px){.pu-trust ul{grid-template-columns:1fr}}