/* ============================================================
   PRIME ACADEMY GROUP · primeacg.com — v4
   plans.css — subscription-plans page styles
   Lifted verbatim out of the single-file pages in www/website/.
   ============================================================ */
/* ============================================================
   SUBSCRIPTION PLANS (v4) - page-scoped section styles, P1-P9.
   The shared v4 spine — tokens, primitives, nav, footer and the
   reveal scaffold — is base.css + components.css, both loaded
   ahead of this file. Nothing here adds to the spine or
   redefines a token - each rule is scoped to one .p-* section.

   Band rhythm, top to bottom:
     P1 deep . P2 white . P3 mist . P4 white . P5 mist
     P6 white . P7 navy . P8 mist . P9 deep
   Six platform captures sit on P3-P6, all light bands. A light
   screenshot on a light band dissolves, so every capture is
   wrapped in .shot - a navy browser bezel - which gives it a
   defined edge without needing a dark section behind it.
   ============================================================ */

/* Heading emphasis. On white/mist the <b> takes brand blue; on
   navy it takes azure. The masthead sits on a photographic plate
   under a navy scrim, so it takes About's treatment - solid white
   heading, azure emphasis. No eyebrow rule is needed: .s-who in
   the spine already drops it to near-white over a plate. */
/* Two-colour headings are global now - see base.css. */

/* the spine's .h2 has no margin of its own - .section-head only
   spaces the whole head block from the body below it - so each
   section sets the gap down to its own lead. */
.p-who h2, .p-flow h2, .p-org h2, .p-deliver h2,
.p-proof h2, .p-plans h2, .p-faq h2{ margin:0 0 clamp(14px,1.6vw,20px); }


/* ---------- P1 . MASTHEAD ---------- */
/* The masthead About uses, on this page's plate. Not its own
   component: the section reuses .s-who - plate, scrim, two columns
   - and .p-mast adds only what a page hero needs on top of it,
   clearance for the nav island (transparent below 920px) and the
   same gradient edge the footer carries. */
.p-mast{
  position:relative; isolation:isolate; overflow:hidden;
  min-height:74vh;
  padding-block:clamp(148px,17vw,210px) clamp(64px,8vw,98px);
}
/* Deeper than Home's scrim: this one carries an h1 and two buttons,
   and the plate has a lit desk across its lower half. */
.p-mast .s-who__scrim{
  background:
    linear-gradient(180deg,rgba(20,33,61,.93),rgba(20,33,61,.78)),
    radial-gradient(94% 74% at 88% -8%,rgba(33,150,243,.15),transparent 60%);
}
.p-mast .parallax-inner > img{ object-position:center 44%; }
.p-mast h1{ color:#fff; max-width:14ch; text-wrap:balance; }
.p-mast__cta{ display:flex; flex-wrap:wrap; gap:12px; }
.p-mast__rule{  /* same 2px gradient edge the footer carries */
  position:absolute; left:0; right:0; bottom:0; height:2px; z-index:2;
  background:var(--prime-gradient);
}


/* ---------- P2 . WHO IT IS FOR ---------- */
.p-who__grid{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(32px,5vw,72px); align-items:center;
}
/* qualifying lines, not selling points - a reader should be able
   to disqualify themselves on any one of them, so each gets its
   own rule rather than a bullet in a paragraph block */
.p-fit{ list-style:none; margin:clamp(22px,2.6vw,30px) 0 0; padding:0; }
/* No rules between the points. The tick already opens each one, so the lines
   were separating something that was separated already. */
.p-fit li{
  position:relative; padding:11px 0 11px 30px;
  font-family:var(--font-body); font-size:15.5px; line-height:1.56; color:var(--navy);
}
.p-fit li::before{
  content:""; position:absolute; left:3px; top:1.28em; width:6px; height:11px;
  border-right:2px solid var(--azure); border-bottom:2px solid var(--azure);
  transform:rotate(42deg);
}
/* the honest exit: some visitors want ready-made courses, and the
   fastest way to keep their trust is to point them off this page */
/* Look comes from .callout, but not its 62ch measure. That cap is there so a
   callout sitting in open page width does not run too long a line; here it sits
   in a grid column that is already the measure, so the cap only made the box
   narrower than the list above it - 113px short at 1920, 385px at 2560. */
.p-exit{ margin-top:clamp(24px,3vw,32px); max-width:none; }

.p-who__fig{
  /* radius and shadow sit on the figure, not the image - otherwise the hover
     zoom scales the drop shadow along with the picture. */
  margin:0; border-radius:var(--radius); overflow:hidden;
  box-shadow:0 34px 64px -38px rgba(20,33,61,.55);
  /* matches the text block's height, then overhangs it by 25px top and bottom. */
  align-self:stretch; position:relative; margin-block:-25px; min-height:340px;
}
.p-who__fig img{
  /* absolutely positioned so the picture contributes no intrinsic height:
     the row is then set by the text beside it, and the photo fills whatever
     that comes to instead of dictating its own height from its shape. */
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  transition:transform var(--dur) var(--ease);
}
.p-who__fig:hover img{ transform:scale(1.04); }


/* ---------- SHOT . shared platform-capture frame (P3-P6) ---------- */
/* The captures are light UI in this same palette. Dropped straight
   onto a white or mist band they lose their edges, so each one is
   framed in navy chrome. The bar is decoration - aria-hidden - and
   the URL in it is the platform the client already runs. */
.shot{
  /* white behind the image, so no dark sliver shows inside the rounded corners.
     border uses the same token as every other card on the site. */
  position:relative; border-radius:var(--radius); overflow:hidden; background:var(--white);
  border:1px solid var(--line);
  box-shadow:0 24px 48px -34px rgba(20,33,61,.42), 0 2px 6px -3px rgba(20,33,61,.12);
}
.shot__bar{
  display:flex; align-items:center; gap:12px; height:32px; padding:0 13px;
  background:var(--navy); border-bottom:1px solid rgba(255,255,255,.08);
}
.shot__dots{ display:flex; gap:6px; flex:none; }
.shot__dots i{ width:8px; height:8px; border-radius:50%; background:rgba(255,255,255,.24); }
.shot__url{
  font-family:var(--font-body); font-weight:400; font-size:11px; letter-spacing:.02em;
  color:rgba(255,255,255,.58); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.shot img{
  display:block; width:100%; height:auto;
  transition:transform var(--dur) var(--ease);
}
/* only the screenshot zooms - the browser bezel above it stays put */
.shot:hover img{ transform:scale(1.04); }


/* ---------- P3 . COURSE GENERATION ---------- */
.p-flow__grid{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(34px,5vw,72px); align-items:start;
}
/* the capture stays put while the five steps scroll past it -
   nothing in the ancestor chain uses overflow:hidden, which would
   silently kill the sticky */
.p-flow__shot{ position:sticky; top:112px; }
.p-steps{ list-style:none; margin:0; padding:0; }
/* Indent clears the 50px marker pill. It was 48px for a 34px disc; a pill needs
   the extra room or the copy runs into it at the narrow end of the clamp. */
.p-step{ position:relative; padding:0 0 clamp(22px,2.6vw,30px) clamp(64px,5.8vw,78px); }
.p-step:last-child{ padding-bottom:0; }
/* connector runs node-to-node, so it stops at the last one.
   left tracks the marker's centre: 24px under a 50px pill, was 16px under a 34px disc. */
.p-step::before{
  content:""; position:absolute; left:24px; top:34px; bottom:0; width:1px; background:var(--line);
}
.p-step:last-child::before{ display:none; }
/* Pill, not a disc: same shape family as the capability rail's markers on Home.
   Wider than the others because these carry two digits (01-05), matching the
   proportion the rail uses for its own two-digit markers. */
.p-step__n{
  position:absolute; left:0; top:0;
  min-width:50px; height:34px; padding:0 12px; border-radius:999px;
  display:inline-flex; align-items:center; justify-content:center;
  font-family:var(--font-display); font-weight:700; font-size:12.5px;
  color:var(--deep); background:var(--white); border:1px solid var(--line);
  transition:background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.p-step h3{ margin:5px 0 8px; font-size:clamp(17px,1.5vw,20px); letter-spacing:var(--track-sm);
  transition:color var(--dur-fast) var(--ease); }

/* Hover: the marker fills and the title takes the brand blue, together, at one
   speed, so a step reads as one thing lighting up rather than two effects. The
   filled-azure marker is the same treatment the capability rail uses for its
   active step, so this is the site's existing language, not a new one.
   No cursor change and no movement: these are steps, not links, and a pointer
   on text that does not click is worse than no hover at all. Colour only, so
   the site's reduced-motion rule flattens it for free. */
.p-step:hover .p-step__n{
  background:var(--azure); color:#fff; border-color:transparent;
  box-shadow:0 8px 24px rgba(33,150,243,.38);
}
.p-step:hover h3{ color:var(--deep); }
.p-step p{ margin:0; max-width:46ch; font-size:14.5px; line-height:1.6; color:var(--slate); }


/* ---------- P4-P6 . CAPABILITY PARTS ---------- */
/* One shape reused six times: a labelled block of copy beside its
   capture. --rev swaps the columns so consecutive parts alternate
   and the page does not read as a stack of identical rows. */
.p-part{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(28px,4.4vw,64px); align-items:center;
}
.p-part + .p-part{ margin-top:clamp(46px,6vw,84px); }
.p-part--rev{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
.p-part--rev .p-part__copy{ grid-column:2; grid-row:1; }
.p-part--rev .p-part__shot{ grid-column:1; grid-row:1; }
.p-part h3{ margin:0 0 13px; font-size:clamp(22px,2.4vw,31px);
  line-height:1.14; letter-spacing:-.03em; }
/* :not(.p-lbl) matters. This selector is more specific than .p-lbl, so without
   it the label below inherits 15.5px body grey and stops looking like a label. */
.p-part__copy > p:not(.p-lbl){ margin:0; max-width:50ch; font-size:15.5px;
  line-height:1.66; color:var(--slate); }
/* the capability label - this is what the six footer anchors and
   the home page cards are pointing at, so it has to be the first
   thing read in the block */
.p-lbl{
  display:flex; align-items:center; gap:10px; margin:0 0 22px;
  font-family:var(--font-display); font-weight:600; font-size:11.5px;
  letter-spacing:.15em; text-transform:uppercase; color:var(--deep);
}
.p-ticks{ list-style:none; margin:clamp(18px,2vw,22px) 0 0; padding:0; display:grid; gap:10px; }
.p-ticks li{
  position:relative; padding-left:27px; font-family:var(--font-body);
  font-size:14.5px; line-height:1.58; color:var(--slate);
}
.p-ticks li::before{
  content:""; position:absolute; left:3px; top:.4em; width:6px; height:11px;
  border-right:2px solid var(--azure); border-bottom:2px solid var(--azure);
  transform:rotate(42deg);
}


/* ---------- P7 . PLANS ---------- */
/* Priced on application, by scope decision: v1 has no checkout and
   nothing is charged online, so the cards sell fit rather than a
   number. Plan names carry .ph - they are indicative until the
   client confirms them. */
.p-plan-grid{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(16px,1.9vw,24px); align-items:stretch;
}
.p-plan{
  position:relative;
  display:flex; flex-direction:column; padding:clamp(24px,2.7vw,34px);
  border-radius:var(--radius); background:rgba(255,255,255,.045);
  border:1px solid var(--line-on-dark);
  transition:transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
/* Whole-card click target - see the note on .s-footcta__block in base.css.
   One link per card, stretched over the card by its own ::after. */
.p-plan{cursor:pointer}
.p-plan .btn{position:static}
.p-plan .btn::after{content:"";position:absolute;inset:0;z-index:2;border-radius:var(--radius)}
.p-plan:hover{
  transform:translateY(-3px);
  background:rgba(255,255,255,.075);
  border-color:var(--ring-on-dark);
  box-shadow:0 16px 34px -20px rgba(0,0,0,.55);
}
/* the highlighted plan keeps its blue identity, just lifts with the rest */
.p-plan--feature:hover{
  background:rgba(33,150,243,.16); border-color:rgba(33,150,243,.62);
  box-shadow:0 38px 68px -38px rgba(33,150,243,.62);
}
.p-plan--feature{
  background:rgba(33,150,243,.11); border-color:rgba(33,150,243,.44);
  box-shadow:0 34px 64px -38px rgba(33,150,243,.55);
}
.p-plan__tier{
  margin:0 0 11px; font-family:var(--font-display); font-weight:700;
  font-size:11.5px; letter-spacing:.18em; color:var(--azure);
}
.p-plan h3{ margin:0 0 12px; font-size:clamp(22px,2.2vw,28px);
  letter-spacing:-.03em; color:#fff; }
.p-plan__blurb{ margin:0 0 20px; font-size:14.5px; line-height:1.58;
  color:rgba(255,255,255,.72); }
.p-plan__price{
  margin:0 0 20px; padding:14px 0;
  border-top:1px solid var(--line-on-dark); border-bottom:1px solid var(--line-on-dark);
}
.p-plan__price b{ display:block; font-family:var(--font-display);
  font-weight:700; font-size:16.5px; letter-spacing:-.01em; color:#fff; }
.p-plan__price span{ display:block; margin-top:5px; font-size:13px;
  color:rgba(255,255,255,.58); }
.p-inc{ list-style:none; margin:0 0 24px; padding:0; display:grid; gap:9px; flex:1 1 auto; }
.p-inc li{ position:relative; padding-left:26px; font-size:13.5px;
  line-height:1.5; color:rgba(255,255,255,.86); }
.p-inc li::before{
  content:""; position:absolute; left:3px; top:.3em; width:6px; height:11px;
  border-right:2px solid var(--azure); border-bottom:2px solid var(--azure);
  transform:rotate(42deg);
}
/* not-included lines stay visible and readable rather than being
   dropped - the difference between the plans IS the message */
.p-inc li.no{ color:rgba(255,255,255,.40); }
.p-inc li.no::before{
  top:.72em; width:11px; height:0; transform:none; border-right:0;
  border-bottom:2px solid rgba(255,255,255,.30);
}
.p-plans__note{
  /* 94ch, not the 74ch a reading measure would want: this is a short centred
     note, and 74ch broke it over three lines. 88ch is the two-line threshold,
     so 94 leaves slack for a copy tweak without going wider than it needs. */
  margin:clamp(28px,3.2vw,38px) auto 0; max-width:94ch; text-align:center;
  font-size:14.5px; line-height:1.64; color:rgba(255,255,255,.64);
}
/* placeholder marker — now silent. Drew a dotted underline until 04 Aug, when
   the client asked for it gone. It renders nothing now; the class stays in the
   markup so the content can still be found. See www/PLACEHOLDER-CONTENT.md —
   the three plan names on this page are indicative, not confirmed. */


/* ---------- P8 . FAQ ---------- */
.p-faq__grid{
  /* .86, not .78: the left column was 24px short of holding "Before you enquire" on one
     line, which stranded the last word on its own. The Q&A side gives up the difference. */
  display:grid; grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);
  gap:clamp(30px,5vw,72px); align-items:start;
}
/* Same control as .t-group on Online Training, so the site has one accordion
   rather than two. That one is a card; this was bare hairlines with a heavier
   summary at a different size. Inline padding is a touch tighter than
   .t-group's because this sits in the narrower right column of a two-up grid. */
.p-qa{ display:flex; flex-direction:column; gap:10px; }
.p-qa details{
  border:1px solid var(--line); border-radius:var(--radius); background:var(--white);
}
.p-qa summary{
  list-style:none; cursor:pointer; display:flex; align-items:center; gap:16px;
  padding:clamp(15px,1.7vw,19px) clamp(15px,1.6vw,19px);
  border-radius:var(--radius);
  font-family:var(--font-display); font-weight:500;
  font-size:clamp(16px,1.5vw,19px); line-height:1.28; letter-spacing:var(--track-md);
  color:var(--navy); transition:color var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease);
}
.p-qa summary::-webkit-details-marker{ display:none; }
.p-qa summary:hover{ background:var(--mist); color:var(--deep); }
.p-qa summary:focus-visible{ outline:2px solid var(--azure); outline-offset:-2px; }
.p-qa details[open] summary{ color:var(--deep); }
.p-qa summary::after{
  content:""; flex:none; margin-left:auto; width:9px; height:9px;
  border-right:2px solid var(--deep); border-bottom:2px solid var(--deep);
  transform:rotate(45deg); transition:transform var(--dur-state) var(--ease);
}
.p-qa details[open] summary::after{ transform:rotate(-135deg); }
.p-qa__a{ padding:0 clamp(15px,1.6vw,19px) clamp(16px,1.8vw,20px); }
.p-qa__a p{ margin:0; max-width:66ch; font-size:15px; line-height:1.68; color:var(--slate); }


/* ---------- P9 . CLOSING CTA ---------- */
/* No page-scoped CSS: the page ends on the same two-block closer
   every other page ends on (.s-footcta, in the shell above) -
   only the copy and the two exits are this page's. */


/* ---------- RESPONSIVE ---------- */
@media (max-width:1080px){
  .p-plan-grid{ grid-template-columns:1fr; }
  .p-plan{ padding:clamp(22px,3vw,28px); }
}
@media (max-width:1000px){
  .p-flow__grid{ grid-template-columns:1fr; }
  /* sticky is pointless once the capture is above the rail */
  .p-flow__shot{ position:static; }
}
@media (max-width:900px){
  .p-who__grid, .p-faq__grid{ grid-template-columns:1fr; }
  .p-part, .p-part--rev{ grid-template-columns:1fr; }
  /* --rev has to unwind or the capture lands above its own heading */
  .p-part--rev .p-part__copy,
  .p-part--rev .p-part__shot{ grid-column:1; grid-row:auto; }
  .p-mast{ min-height:auto; }
  .p-mast h1{ max-width:none; }
}
@media (prefers-reduced-motion:reduce){
  .p-qa summary, .p-qa summary::after{ transition:none; }
}