/* ============================================================
   TMG SECURITY — PARTNER & MSP PROGRAMME

   Prefix: pp-  (partners.html owns ptn-/plog-/peco-, so nothing
   here can collide with the existing ecosystem page.)

   Visual metaphor for this page: a DELIVERY LAYER. Everything
   reads as something sitting *behind* the partner — layers in Z,
   flows left-to-right, a matrix you read across. Deliberately
   distinct from partners.html, which is a network graph.

   Tokens, fonts and palette all come from tmg-home.css.
   ============================================================ */

.pp{ position:relative; }

/* Accent for this page. Cyan leads, violet supports. */
.pp{
  --acc:var(--cyan);
  --acc-soft:rgba(79,216,234,.10);
  --acc-line:rgba(79,216,234,.34);
  --vio-soft:rgba(124,92,250,.10);
  --vio-line:rgba(124,92,250,.34);
}

/* Technical grid, parallaxed by --gy from JS. */
.pp-grid{
  position:absolute; inset:0; z-index:0; pointer-events:none; overflow:hidden;
  background:
    linear-gradient(var(--line) 1px, transparent 1px) 0 var(--gy,0)/ 64px 64px,
    linear-gradient(90deg, var(--line) 1px, transparent 1px) 0 0 / 64px 64px;
  opacity:.30;
  mask-image:radial-gradient(ellipse 78% 58% at 50% 34%, #000 35%, transparent 100%);
  -webkit-mask-image:radial-gradient(ellipse 78% 58% at 50% 34%, #000 35%, transparent 100%);
}

.pp-cap{
  font-family:var(--mono); font-size:9px; letter-spacing:1.6px; color:var(--fog);
  text-align:center; margin-top:var(--s4); opacity:.75;
}

/* Scroll reveal — one-shot, class added by IntersectionObserver. */
.pp [data-rv]{
  opacity:0; transform:translateY(22px);
  transition:opacity .7s var(--ease), transform .7s var(--ease);
}
.pp [data-rv].in{ opacity:1; transform:none; }

/* ============================================================
   01 — HERO
   ============================================================ */
.pphero{ position:relative; overflow:hidden; }
.pphero-grid{
  display:grid; grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);
  gap:var(--s6); align-items:center;
}
.pphero-h{
  font-family:var(--display); font-weight:700; letter-spacing:-1.6px; line-height:1.04;
  font-size:clamp(31px,5.1vw,61px); margin:var(--s3) 0 var(--s4);
}
.pphero-h span{
  background:linear-gradient(100deg,var(--cyan),var(--violet) 62%,var(--hyper));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.pphero-lead{ font-size:clamp(14.5px,1.55vw,17px); color:var(--ice); line-height:1.78; max-width:57ch; }
.pphero-sub{ font-size:14px; color:var(--fog); line-height:1.78; max-width:55ch; margin-top:var(--s3); }
.pphero-ctas{ display:flex; gap:12px; flex-wrap:wrap; margin-top:var(--s5); }

/* ---- 3D delivery stage: MSP -> TMG -> CLIENT ---- */
.ppstage{
  position:relative; width:100%; max-width:470px; margin-inline:auto;
  aspect-ratio:1/1; perspective:1250px;
}
.pprig{
  position:absolute; inset:0; transform-style:preserve-3d;
  transform:translateZ(var(--pz,0)) rotateX(var(--prx,10deg)) rotateY(var(--pry,-7deg));
  transition:transform .5s var(--ease);
}
.ppsvg{ position:absolute; inset:0; width:100%; height:100%; overflow:visible; }
.ppring{ fill:none; stroke:var(--line2); stroke-width:1; }
.ppring.dash{ stroke-dasharray:3 8; opacity:.65; }

.ppedge{
  fill:none; stroke:var(--acc-line); stroke-width:1.4;
  stroke-dasharray:var(--len,300); stroke-dashoffset:var(--len,300);
  transition:stroke-dashoffset 1.15s var(--ease), stroke .35s;
}
.pphero.on .ppedge{ stroke-dashoffset:0; }
.ppedge.lit{ stroke:var(--cyan); filter:drop-shadow(0 0 6px rgba(79,216,234,.55)); }

/* the three primary tiers, stacked in Z */
.pptier{
  position:absolute; left:50%; top:var(--y); translate:-50% -50%;
  transform:translateZ(var(--tz,0));
  display:flex; flex-direction:column; align-items:center; gap:6px;
  padding:13px 20px; border-radius:var(--r-md);
  background:linear-gradient(180deg,rgba(18,27,48,.94),rgba(13,20,36,.94));
  border:1px solid var(--line2); backdrop-filter:blur(9px);
  box-shadow:0 20px 46px rgba(0,0,0,.5);
  min-width:132px; text-align:center;
}
.pptier b{ font-family:var(--display); font-size:14px; font-weight:600; letter-spacing:-.2px; }
.pptier span{ font-family:var(--mono); font-size:8px; letter-spacing:1.5px; color:var(--fog); }
.pptier.core{
  border-color:var(--acc-line);
  background:radial-gradient(120% 120% at 50% 0%, rgba(79,216,234,.18), rgba(13,20,36,.96) 62%);
  box-shadow:0 24px 60px rgba(79,216,234,.20), inset 0 0 30px rgba(79,216,234,.07);
}
.pptier.core b{ font-size:15px; }
.pptier.core span{ color:var(--cyan); }

/* orbiting capability labels */
.pplabel{
  position:absolute; left:var(--x); top:var(--y); translate:-50% -50%;
  transform:translateZ(var(--lz,0));
  font-family:var(--mono); font-size:8px; letter-spacing:1.3px; white-space:nowrap;
  color:var(--ice); padding:6px 11px; border-radius:100px;
  background:rgba(9,14,26,.86); border:1px solid var(--line2); backdrop-filter:blur(6px);
  transition:border-color .3s, color .3s, box-shadow .3s;
}
.pplabel i{
  display:inline-block; width:4px; height:4px; border-radius:50%;
  background:var(--fog); margin-right:6px; vertical-align:middle; transition:background .3s;
}
.pplabel.lit{ border-color:var(--acc-line); color:var(--white); box-shadow:0 0 20px rgba(79,216,234,.20); }
.pplabel.lit i{ background:var(--cyan); box-shadow:0 0 8px var(--cyan); }

/* ============================================================
   02 — BUILD vs PARTNER comparison
   ============================================================ */
.ppcmp{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--s3); margin-top:var(--s5); }
.ppcmp-col{
  position:relative; border-radius:var(--r-lg); padding:var(--s4);
  border:1px solid var(--line); background:linear-gradient(180deg,rgba(13,20,36,.78),rgba(8,12,24,.78));
  transition:border-color .35s, transform .35s var(--ease), box-shadow .35s;
}
.ppcmp-col.build::before,
.ppcmp-col.tmg::before{
  content:''; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  opacity:0; transition:opacity .35s;
}
.ppcmp-col.build::before{ background:radial-gradient(90% 70% at 50% 0%, rgba(255,79,216,.07), transparent 70%); }
.ppcmp-col.tmg::before{ background:radial-gradient(90% 70% at 50% 0%, rgba(79,216,234,.09), transparent 70%); }
.ppcmp-col.on::before{ opacity:1; }
.ppcmp-col.on{ transform:translateY(-4px); box-shadow:0 22px 50px rgba(0,0,0,.42); }
.ppcmp-col.build.on{ border-color:rgba(255,79,216,.30); }
.ppcmp-col.tmg.on{ border-color:var(--acc-line); }

.ppcmp-k{
  font-family:var(--mono); font-size:9px; letter-spacing:2px; margin-bottom:6px;
  display:flex; align-items:center; gap:8px;
}
.ppcmp-col.build .ppcmp-k{ color:var(--hyper); }
.ppcmp-col.tmg .ppcmp-k{ color:var(--cyan); }
.ppcmp-t{ font-family:var(--display); font-size:17px; font-weight:600; margin-bottom:var(--s3); letter-spacing:-.3px; }
.ppcmp-col ul{ display:flex; flex-direction:column; gap:11px; }
.ppcmp-col li{
  position:relative; padding-left:24px; font-size:13.5px; color:var(--fog); line-height:1.62;
  opacity:0; transform:translateX(-8px);
  transition:opacity .5s var(--ease), transform .5s var(--ease), color .3s;
}
.ppcmp-col.on li{ opacity:1; transform:none; }
.ppcmp-col.on:hover li{ color:var(--ice); }
.ppcmp-col li::before{
  content:''; position:absolute; left:3px; top:7px; width:8px; height:8px;
  border-radius:2px; transform:rotate(45deg);
}
.ppcmp-col.build li::before{ border:1px solid rgba(255,79,216,.42); }
.ppcmp-col.tmg li::before{ border:1px solid var(--acc-line); background:var(--acc-soft); }
/* stagger */
.ppcmp-col.on li:nth-child(1){ transition-delay:.05s }
.ppcmp-col.on li:nth-child(2){ transition-delay:.10s }
.ppcmp-col.on li:nth-child(3){ transition-delay:.15s }
.ppcmp-col.on li:nth-child(4){ transition-delay:.20s }
.ppcmp-col.on li:nth-child(5){ transition-delay:.25s }
.ppcmp-col.on li:nth-child(6){ transition-delay:.30s }

.ppcmp-vs{
  position:absolute; left:50%; top:50%; translate:-50% -50%; z-index:3;
  width:46px; height:46px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--hud); font-size:10px; letter-spacing:1px; color:var(--fog);
  background:var(--void); border:1px solid var(--line2);
}
.ppcmp-wrap{ position:relative; }

/* ============================================================
   03 — HOW WE PARTNER (3 cards)
   ============================================================ */
.ppway-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--s3); }
.ppway{
  position:relative; display:flex; flex-direction:column; min-width:0;
  padding:var(--s4); border-radius:var(--r-lg); overflow:hidden;
  border:1px solid var(--line); background:linear-gradient(180deg,rgba(13,20,36,.86),rgba(8,12,24,.86));
  transform-style:preserve-3d; will-change:transform;
  transition:border-color .3s, box-shadow .3s, transform .35s var(--ease);
}
.ppway::before{
  content:''; position:absolute; inset:0; pointer-events:none; opacity:var(--pl,0);
  background:radial-gradient(340px 220px at var(--mx,50%) var(--my,50%), rgba(79,216,234,.11), transparent 68%);
  transition:opacity .3s;
}
.ppway:hover{ border-color:var(--acc-line); box-shadow:0 26px 60px rgba(0,0,0,.46); }
.ppway-top{ display:flex; align-items:center; justify-content:space-between; margin-bottom:var(--s3); }
.ppway-n{ font-family:var(--hud); font-size:11px; letter-spacing:2px; color:var(--line3); }
.ppway-ic{
  width:38px; height:38px; border-radius:11px; flex:none;
  display:flex; align-items:center; justify-content:center;
  background:var(--panel2); border:1px solid var(--line); color:var(--cyan);
  transition:border-color .3s, box-shadow .3s;
}
.ppway:hover .ppway-ic{ border-color:var(--acc-line); box-shadow:0 0 22px rgba(79,216,234,.22); }
.ppway-k{ font-family:var(--mono); font-size:9px; letter-spacing:1.8px; color:var(--cyan); margin-bottom:9px; }
.ppway-t{ font-family:var(--display); font-size:19px; font-weight:600; letter-spacing:-.4px; line-height:1.24; margin-bottom:11px; }
.ppway-d{ font-size:13.5px; color:var(--fog); line-height:1.72; margin-bottom:var(--s3); }
.ppway-list{ display:flex; flex-wrap:wrap; gap:6px; margin-bottom:var(--s4); }
.ppway-list span{
  font-family:var(--mono); font-size:8.5px; letter-spacing:.8px; color:var(--ice);
  padding:5px 9px; border-radius:100px; background:rgba(255,255,255,.03); border:1px solid var(--line);
}
.ppway-go{
  margin-top:auto; display:inline-flex; align-items:center; gap:7px; align-self:flex-start;
  font-family:var(--mono); font-size:10px; letter-spacing:1.3px; color:var(--cyan);
  min-height:44px;
}
.ppway-go span{ transition:transform .3s var(--ease); }
.ppway:hover .ppway-go span{ transform:translateX(4px); }

/* ============================================================
   04 — BUILT FOR (orbit)
   ============================================================ */
.pporb-wrap{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.86fr); gap:var(--s6); align-items:center; }
.pporb{ position:relative; width:100%; max-width:440px; margin-inline:auto; aspect-ratio:1/1; perspective:1100px; }
.pporb-world{
  position:absolute; inset:0; transform-style:preserve-3d;
  transform:rotateX(var(--orx,8deg)) rotateY(var(--ory,0deg));
  transition:transform .5s var(--ease);
}
.pporb-core{
  position:absolute; left:50%; top:50%; translate:-50% -50%; transform:translateZ(34px);
  width:118px; height:118px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; text-align:center;
  background:radial-gradient(circle at 50% 32%, rgba(79,216,234,.22), rgba(9,14,26,.96) 66%);
  border:1px solid var(--acc-line); box-shadow:0 0 60px rgba(79,216,234,.24);
}
.pporb-core b{ font-family:var(--display); font-size:12.5px; font-weight:700; line-height:1.28; display:block; }
.pporb-core span{ font-family:var(--mono); font-size:7.5px; letter-spacing:1.4px; color:var(--cyan); display:block; margin-top:3px; }
.pporb-node{
  position:absolute; left:var(--x); top:var(--y); translate:-50% -50%;
  transform:translateZ(var(--nz,0));
  font-family:var(--mono); font-size:8px; letter-spacing:1.1px; white-space:nowrap;
  color:var(--ice); padding:7px 11px; border-radius:100px; cursor:pointer;
  background:rgba(9,14,26,.9); border:1px solid var(--line2); backdrop-filter:blur(6px);
  transition:border-color .3s, color .3s, box-shadow .3s, transform .3s var(--ease);
  min-height:34px; display:flex; align-items:center;
}
.pporb-node[aria-pressed="true"], .pporb-node:hover{
  border-color:var(--acc-line); color:var(--white);
  box-shadow:0 0 24px rgba(79,216,234,.25);
}
.pporb-edge{
  fill:none; stroke:var(--line2); stroke-width:1;
  stroke-dasharray:var(--len,220); stroke-dashoffset:var(--len,220);
  transition:stroke-dashoffset 1s var(--ease), stroke .3s;
}
.pporb.on .pporb-edge{ stroke-dashoffset:0; }
.pporb-edge.lit{ stroke:var(--cyan); filter:drop-shadow(0 0 5px rgba(79,216,234,.5)); }

.pporb-info{
  border:1px solid var(--line); border-radius:var(--r-lg); padding:var(--s4);
  background:linear-gradient(180deg,rgba(13,20,36,.8),rgba(8,12,24,.8)); min-height:172px;
}
.pporb-info .k{ font-family:var(--mono); font-size:9px; letter-spacing:1.8px; color:var(--cyan); margin-bottom:9px; }
.pporb-info h3{ font-family:var(--display); font-size:20px; font-weight:600; letter-spacing:-.4px; margin-bottom:10px; }
.pporb-info p{ font-size:13.5px; color:var(--fog); line-height:1.75; }

/* mobile list mirrors the orbit */
.pporb-list{ display:none; flex-wrap:wrap; gap:7px; margin-bottom:var(--s3); }
/* This list is the ONLY way to select an organization type below 680px, where
   the orbit is hidden — so these are full-size touch targets, not chips. */
.pporb-list button{
  font-family:var(--mono); font-size:9px; letter-spacing:1px; color:var(--ice);
  padding:0 14px; min-height:44px; border-radius:100px;
  background:rgba(255,255,255,.03); border:1px solid var(--line);
}
.pporb-list button[aria-pressed="true"]{ border-color:var(--acc-line); color:var(--white); background:var(--acc-soft); }

/* ============================================================
   05 — CAPABILITY MATRIX
   ============================================================ */
/* contain:paint is load-bearing, not decoration. Without it the wide table's
   scrollable overflow propagates past this container and grows the DOCUMENT
   scroll width by ~211px at 375px wide — measured. overflow-x:auto alone does
   not stop it. Containment also limits repaints to this box. */
.ppmx-scroll{
  overflow-x:auto; -webkit-overflow-scrolling:touch; border-radius:var(--r-lg);
  contain:paint; max-width:100%;
}
.ppmx{
  width:100%; min-width:620px; border-collapse:separate; border-spacing:0;
  border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden;
  background:linear-gradient(180deg,rgba(13,20,36,.72),rgba(8,12,24,.72));
}
.ppmx caption{
  caption-side:bottom; text-align:left; padding-top:12px;
  font-family:var(--mono); font-size:9px; letter-spacing:1.4px; color:var(--fog);
}
.ppmx th, .ppmx td{ padding:14px 16px; text-align:left; border-bottom:1px solid var(--line); }
/* No position:sticky here — this container scrolls horizontally only, so a
   sticky header would never actually stick, and it interferes with containment. */
.ppmx thead th{
  font-family:var(--mono); font-size:9px; letter-spacing:1.8px; color:var(--cyan);
  background:rgba(255,255,255,.02); white-space:nowrap;
}
.ppmx thead th:not(:first-child), .ppmx td:not(:first-child){ text-align:center; width:132px; }
.ppmx tbody th{ font-weight:500; font-size:13.5px; color:var(--ice); }
.ppmx tbody tr{ transition:background .25s; }
.ppmx tbody tr:hover{ background:rgba(79,216,234,.045); }
.ppmx tbody tr:hover th{ color:var(--white); }
.ppmx tbody tr:last-child th, .ppmx tbody tr:last-child td{ border-bottom:0; }

.ppmx-dot{
  display:inline-flex; align-items:center; justify-content:center;
  width:22px; height:22px; border-radius:50%;
  border:1px solid var(--acc-line); background:var(--acc-soft); color:var(--cyan);
  transition:transform .25s var(--ease), box-shadow .25s;
}
.ppmx tbody tr:hover .ppmx-dot{ transform:scale(1.14); box-shadow:0 0 16px rgba(79,216,234,.35); }
.ppmx-dot.no{ border-color:var(--line2); background:transparent; color:var(--line3); }
.ppmx tbody tr:hover .ppmx-dot.no{ box-shadow:none; transform:none; }
.ppmx-dot svg{ width:11px; height:11px; }

/* ============================================================
   06 — WHY (6 cards)
   ============================================================ */
.ppwhy-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--s3); }
.ppwhy{
  position:relative; min-width:0; padding:var(--s4); border-radius:var(--r-lg); overflow:hidden;
  border:1px solid var(--line); background:linear-gradient(180deg,rgba(13,20,36,.8),rgba(8,12,24,.8));
  transition:border-color .3s, transform .35s var(--ease), box-shadow .3s;
}
.ppwhy::before{
  content:''; position:absolute; inset:0; pointer-events:none; opacity:var(--pl,0);
  background:radial-gradient(280px 190px at var(--mx,50%) var(--my,50%), rgba(124,92,250,.11), transparent 70%);
  transition:opacity .3s;
}
.ppwhy:hover{ border-color:var(--vio-line); box-shadow:0 22px 48px rgba(0,0,0,.42); }
.ppwhy-n{ font-family:var(--hud); font-size:11px; letter-spacing:2px; color:var(--line3); margin-bottom:14px; }
.ppwhy-k{ font-family:var(--display); font-size:15.5px; font-weight:600; letter-spacing:-.2px; margin-bottom:9px; line-height:1.3; }
.ppwhy-d{ font-size:13px; color:var(--fog); line-height:1.72; }

/* ============================================================
   07 — DELIVERY FLOW (4 steps)
   ============================================================ */
.ppflow{ position:relative; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:var(--s3); margin-top:var(--s5); }
.ppflow::before{
  content:''; position:absolute; left:10%; right:10%; top:26px; height:1px; background:var(--line2);
}
.ppflow-fill{
  position:absolute; left:10%; top:26px; height:1px; width:var(--fp,0%);
  background:linear-gradient(90deg,var(--cyan),var(--violet));
  box-shadow:0 0 12px rgba(79,216,234,.55);
  transition:width 1.5s var(--ease);
}
.ppflow-step{ position:relative; text-align:center; opacity:0; transform:translateY(14px);
  transition:opacity .55s var(--ease), transform .55s var(--ease); }
.ppflow-step.on{ opacity:1; transform:none; }
.ppflow-dot{
  width:14px; height:14px; border-radius:50%; margin:20px auto 16px;
  background:var(--void); border:1px solid var(--line3); position:relative; z-index:2;
  transition:background .4s, border-color .4s, box-shadow .4s;
}
.ppflow-step.on .ppflow-dot{ background:var(--cyan); border-color:var(--cyan); box-shadow:0 0 16px rgba(79,216,234,.6); }
.ppflow-n{ font-family:var(--hud); font-size:10px; letter-spacing:2px; color:var(--line3); }
.ppflow-t{ font-family:var(--display); font-size:14.5px; font-weight:600; margin-bottom:7px; letter-spacing:-.2px; }
.ppflow-d{ font-size:12.5px; color:var(--fog); line-height:1.65; }

/* ============================================================
   08 — ENGAGEMENT MODELS (tabs)
   ============================================================ */
.ppmod{ display:grid; grid-template-columns:250px minmax(0,1fr); gap:var(--s4); align-items:start; }
.ppmod-rail{ display:flex; flex-direction:column; gap:5px; }
.ppmod-tab{
  position:relative; text-align:left; width:100%; min-height:52px;
  padding:13px 15px 13px 20px; border-radius:var(--r-md);
  background:transparent; border:1px solid transparent; color:var(--fog);
  font-family:var(--mono); font-size:10px; letter-spacing:1.5px;
  transition:color .25s, background .25s, border-color .25s;
}
.ppmod-tab::before{
  content:''; position:absolute; left:0; top:50%; translate:0 -50%;
  width:2px; height:0; background:linear-gradient(180deg,var(--cyan),var(--violet));
  border-radius:2px; transition:height .3s var(--ease);
}
.ppmod-tab:hover{ color:var(--ice); background:rgba(255,255,255,.02); }
.ppmod-tab[aria-selected="true"]{
  color:var(--white); background:rgba(79,216,234,.06); border-color:var(--acc-line);
}
.ppmod-tab[aria-selected="true"]::before{ height:56%; }

.ppmod-panel{
  border:1px solid var(--line); border-radius:var(--r-lg); padding:var(--s5);
  background:linear-gradient(180deg,rgba(13,20,36,.82),rgba(8,12,24,.82)); min-height:250px;
}
.ppmod-panel[hidden]{ display:none; }
.ppmod-panel .k{ font-family:var(--mono); font-size:9px; letter-spacing:1.8px; color:var(--cyan); margin-bottom:11px; }
.ppmod-panel h3{ font-family:var(--display); font-size:clamp(20px,2.5vw,26px); font-weight:600; letter-spacing:-.6px; margin-bottom:13px; }
.ppmod-panel p{ font-size:14px; color:var(--ice); line-height:1.8; max-width:62ch; }
.ppmod-panel ul{ display:flex; flex-direction:column; gap:9px; margin-top:var(--s3); }
.ppmod-panel li{ position:relative; padding-left:22px; font-size:13.5px; color:var(--fog); line-height:1.65; }
.ppmod-panel li::before{
  content:''; position:absolute; left:2px; top:7px; width:7px; height:7px; border-radius:2px;
  border:1px solid var(--acc-line); background:var(--acc-soft); transform:rotate(45deg);
}
.ppmod-note{
  margin-top:var(--s4); padding-top:var(--s3); border-top:1px solid var(--line);
  font-family:var(--mono); font-size:9px; letter-spacing:1.2px; color:var(--fog); line-height:1.7;
}

/* ============================================================
   09 — BENEFITS marquee (scroll-driven)
   ============================================================ */
.ppben{
  position:relative; overflow:hidden; padding:var(--s5) 0;
  border-block:1px solid var(--line); background:rgba(8,12,24,.5);
}
.ppben-track{
  display:flex; align-items:center; gap:var(--s4); width:max-content;
  transform:translate3d(var(--sx,0),0,0); will-change:transform;
}
.ppben-track span{
  font-family:var(--display); font-size:clamp(17px,2.4vw,27px); font-weight:600;
  letter-spacing:-.5px; color:var(--ice); white-space:nowrap;
}
.ppben-track i{
  width:7px; height:7px; border-radius:50%; flex:none;
  background:var(--cyan); box-shadow:0 0 14px rgba(79,216,234,.7);
}

/* ============================================================
   10 — WHO THIS IS FOR
   ============================================================ */
.ppwho-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--s3); }
.ppwho{
  position:relative; min-width:0; padding:var(--s4); border-radius:var(--r-lg);
  border:1px solid var(--line); background:rgba(13,20,36,.62);
  transition:border-color .3s, transform .3s var(--ease), background .3s;
}
.ppwho:hover{ border-color:var(--acc-line); transform:translateY(-3px); background:rgba(13,20,36,.9); }
.ppwho-k{
  display:flex; align-items:center; gap:9px;
  font-family:var(--display); font-size:15px; font-weight:600; margin-bottom:9px; letter-spacing:-.2px;
}
.ppwho-k i{
  width:6px; height:6px; border-radius:1px; flex:none; transform:rotate(45deg);
  border:1px solid var(--acc-line); background:var(--acc-soft);
}
.ppwho-d{ font-size:12.8px; color:var(--fog); line-height:1.7; }

/* ============================================================
   11/12 — CTA + FORM
   ============================================================ */
.ppcta{
  position:relative; overflow:hidden; border-radius:var(--r-xl); padding:var(--s7) var(--s5);
  border:1px solid var(--line2); text-align:center;
  background:
    radial-gradient(120% 130% at 50% 0%, rgba(124,92,250,.14), transparent 62%),
    linear-gradient(180deg,rgba(13,20,36,.9),rgba(8,12,24,.9));
}
.ppcta h2{ font-family:var(--display); font-size:clamp(24px,3.7vw,40px); font-weight:700; letter-spacing:-1.1px; margin-bottom:15px; }
.ppcta p{ color:var(--ice); font-size:15px; line-height:1.8; max-width:64ch; margin:0 auto var(--s5); }
.ppcta .cta-row{ display:flex; gap:13px; justify-content:center; flex-wrap:wrap; }

.ppform-wrap{
  position:relative; border:1px solid var(--line); border-radius:var(--r-xl);
  padding:var(--s5); background:linear-gradient(180deg,rgba(13,20,36,.86),rgba(8,12,24,.86));
}
.ppform{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.ppf{ display:flex; flex-direction:column; gap:7px; min-width:0; }
.ppf.full{ grid-column:1/-1; }
.ppf label{ font-family:var(--mono); font-size:9px; letter-spacing:1.5px; color:var(--fog); }
.ppf .req{ color:var(--cyan); }
.ppf input, .ppf select, .ppf textarea{
  width:100%; min-height:46px; padding:12px 14px; border-radius:var(--r-md);
  background:rgba(4,6,12,.66); border:1px solid var(--line2); color:var(--white);
  font-family:var(--body); font-size:14px; transition:border-color .25s, box-shadow .25s;
}
.ppf textarea{ min-height:118px; resize:vertical; line-height:1.65; }
.ppf select{
  appearance:none; cursor:pointer; padding-right:38px;
  background-image:linear-gradient(45deg,transparent 50%,var(--fog) 50%),linear-gradient(135deg,var(--fog) 50%,transparent 50%);
  background-position:calc(100% - 19px) 21px, calc(100% - 14px) 21px;
  background-size:5px 5px, 5px 5px; background-repeat:no-repeat;
}
.ppf select option{ background:var(--panel); color:var(--white); }
.ppf input:focus, .ppf select:focus, .ppf textarea:focus{
  outline:none; border-color:var(--acc-line); box-shadow:0 0 0 3px rgba(79,216,234,.11);
}
.ppf input[aria-invalid="true"], .ppf select[aria-invalid="true"], .ppf textarea[aria-invalid="true"]{
  border-color:var(--crit);
}
.ppf .err{ font-family:var(--mono); font-size:9px; letter-spacing:.6px; color:var(--crit); min-height:11px; }

/* honeypot — hidden from people, present for bots */
.pp-hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

.ppform-error{
  grid-column:1/-1; margin:0; padding:13px 15px; border-radius:var(--r-md);
  background:rgba(255,79,109,.09); border:1px solid rgba(255,79,109,.34);
  color:#FFC4CF; font-size:13px; line-height:1.65;
}
.ppform-error[hidden]{ display:none; }
.ppform-submit{ grid-column:1/-1; display:flex; align-items:center; gap:var(--s3); flex-wrap:wrap; margin-top:4px; }
.ppform-hint{ font-size:11.5px; color:var(--fog); line-height:1.65; }

.ppform-done{ display:none; text-align:center; padding:var(--s6) var(--s4); }
.ppform-done.on{ display:block; }
.ppform-done b{
  display:inline-block; font-family:var(--mono); font-size:10px; letter-spacing:2.4px; color:var(--cyan);
  padding:8px 15px; border-radius:100px; border:1px solid var(--acc-line); background:var(--acc-soft);
  margin-bottom:var(--s3);
}
.ppform-done h3{ font-family:var(--display); font-size:clamp(20px,2.6vw,27px); font-weight:600; letter-spacing:-.5px; margin-bottom:12px; }
.ppform-done p{ color:var(--fog); font-size:14px; line-height:1.78; max-width:52ch; margin:0 auto; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1080px){
  .pphero-grid{ grid-template-columns:1fr; gap:var(--s5); }
  .ppstage{ max-width:400px; order:-1; }
  .ppway-grid,.ppwhy-grid,.ppwho-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .pporb-wrap{ grid-template-columns:1fr; }
  .ppmod{ grid-template-columns:1fr; }
  .ppmod-rail{ flex-direction:row; flex-wrap:nowrap; overflow-x:auto; gap:7px; padding-bottom:6px; -webkit-overflow-scrolling:touch; }
  .ppmod-tab{ white-space:nowrap; flex:none; padding-left:15px; }
  .ppmod-tab::before{ display:none; }
}
@media (max-width:820px){
  .ppflow{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--s4); }
  .ppflow::before,.ppflow-fill{ display:none; }
}
@media (max-width:760px){
  .ppform{ grid-template-columns:1fr; }
  .ppcmp{ grid-template-columns:1fr; }
  .ppcmp-vs{ position:relative; left:auto; top:auto; translate:none; margin:-6px auto; }
}
@media (max-width:680px){
  .ppway-grid,.ppwhy-grid,.ppwho-grid{ grid-template-columns:1fr; }
  .ppstage{ max-width:322px; }
  .pporb{ max-width:none; aspect-ratio:auto; height:auto; }
  .pporb-world,.pporb .ppsvg{ display:none; }
  .pporb-list{ display:flex; }
  .ppcta{ padding:var(--s6) var(--s3); }
  .ppform-wrap{ padding:var(--s4) var(--s3); }
  .ppflow{ grid-template-columns:1fr; }
}
@media (max-width:430px){
  .pphero-h{ font-size:clamp(27px,8.4vw,35px); }
  .ppstage{ max-width:280px; }
  .pplabel{ font-size:7px; padding:4px 8px; }
  .pptier{ min-width:110px; padding:10px 14px; }
  .pptier b{ font-size:12.5px; }
}
@media (max-width:360px){
  .ppstage{ max-width:246px; }
  .pplabel{ font-size:6.5px; letter-spacing:.8px; padding:3px 7px; }
  .pptier{ min-width:96px; }
}

/* ============================================================
   REDUCED MOTION
   The page must be fully readable and fully usable with every
   transition switched off.
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  .pp *, .pp *::before, .pp *::after{
    transition:none !important; animation:none !important;
  }
  .pp [data-rv]{ opacity:1 !important; transform:none !important; }
  .ppcmp-col li{ opacity:1 !important; transform:none !important; }
  .ppflow-step{ opacity:1 !important; transform:none !important; }
  .pphero .ppedge, .pporb-edge{ stroke-dashoffset:0 !important; }
  .pprig, .pporb-world{ transform:none !important; }
  .ppben-track{ transform:none !important; }
}