/* ============================================================
   PRIME ACADEMY GROUP — v6.1.2
   page-platform.css — the Platform page, on system.css + shared.css.

     1 opening ...... shared .open, one photograph
     2 replaces ..... three light cards
     3 capabilities . six rows, words one side and the screen the other,
                      turning over each time
     4 the AI ....... NAVY. PINNED. five cards over the course creation screen
     5 what changes .. photograph beside the words, three cards under them
     6 next ......... NAVY. the three plans and their two numbers
     7 closing ...... shared .close-grid
     8 footer ....... shared .foot

   The one new component is .shot, the screenshot treatment — which is what
   section 24 of the design system asks the first page carrying screenshots to
   design. Everything else here is an arrangement of what already exists:

     the light card ...... .job, on the difference card's recipe — white,
                           --hair, --r-card, warming to --wash on hover, no
                           lift and no pointer because it is not a link. The
                           same recipe about.html reproduced for its own cards.
     the 40px chip ....... the difference row's chip: deep 11% into white,
                           inverting to a deep fill on the card's hover
     words beside a picture  about.html's .who: 1fr 1fr, gap --pad, centred
     the photo treatment . the option card's saturate(.9) contrast(1.02) and
                           the same three-stop gradient over it
     the hold ............ the homepage's pinned timeline, same construction
                           and the same three conditions
     the dark tiles ...... .tiles / .tile, straight out of shared.css

   No new hex, no fifth radius, no type size outside the recorded set, one
   easing and one hover speed.
   ============================================================ */

/* ═══ THE SCREENSHOT TREATMENT ═══
   The platform UI is already built in these blues, so on the pale blue ground
   an unframed capture dissolves into the page. A white ring, a hairline and
   the lift are what make one an object.

   The ring is 6px and the inner radius is --r-chip, because 16 - 6 = 10 and
   --r-chip is 10: the inside corner then runs parallel to the outside one
   rather than tightening against it. No raw pixel radius is set anywhere.

   It does not care what shape the picture inside it is, which is why none of
   the captures had to be cropped to a common frame. */
.shot{display:block;margin:0;padding:6px;
  background:var(--panel);border:1px solid var(--hair);
  border-radius:var(--r-card);box-shadow:var(--lift)}
.shot img{display:block;width:100%;height:auto;border-radius:var(--r-chip)}
/* On navy a solid white ring shouts, and a navy-tinted shadow on navy only
   muddies the edge. The frame takes the same translucent white the capability
   tiles take instead. */
.deep .shot{background:color-mix(in srgb, #fff 12%, transparent);
  border-color:color-mix(in srgb, #fff 20%, transparent);box-shadow:none}

/* ═══ THE PICTURE CARD ═══
   The homepage's option card, reproduced value for value: the whole card is
   the link, so it lifts and takes the shadow, the photograph releases to full
   colour and scales, and the 56px chip straddling the image edge steps to
   Bright Blue. All of it on the one hover speed, because at mixed speeds the
   card, the chip and the link finish while the picture is still moving and it
   reads as two hovers on one card. */
.picks{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s5)}
.pick{position:relative;display:flex;flex-direction:column;background:var(--panel);
  border:1px solid var(--hair);border-radius:var(--r-card);overflow:hidden;
  text-decoration:none;color:inherit;
  transition:transform var(--fast) var(--ease),box-shadow var(--fast) var(--ease),
             border-color var(--fast) var(--ease)}
.pick:hover{transform:translateY(-4px);box-shadow:var(--lift);border-color:transparent}
/* 16:10, not the homepage's 4:3. Three of these sit under a heading and a lead
   rather than opening the page, so the picture is the shallower of the two
   shapes the site uses. */
.pick-fig{position:relative;aspect-ratio:16/8;overflow:hidden;background:var(--wash)}
/* Absolutely positioned, not a flex child: a percentage height against an
   aspect-ratio box does not resolve reliably and the image vanishes. */
.pick-fig img{position:absolute;inset:0;width:100%;height:100%;display:block;
  object-fit:cover;object-position:center;
  filter:saturate(.9) contrast(1.02);
  transition:filter var(--fast) var(--ease),transform var(--fast) var(--ease)}
.pick:hover .pick-fig img{filter:none;transform:scale(1.035)}
.pick-fig::after{content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,
    color-mix(in srgb, var(--deep) 8%, transparent) 0%,
    color-mix(in srgb, var(--deep) 2%, transparent) 46%,
    color-mix(in srgb, var(--navy) 15%, transparent) 100%)}
/* The chip is the join between the picture and the card. */
.pick-ico{position:absolute;left:var(--s5);top:0;transform:translateY(-50%);z-index:3;
  width:56px;height:56px;border-radius:var(--r-card);background:var(--deep);
  color:#fff;display:flex;align-items:center;justify-content:center;font-size:26px;
  transition:background var(--fast) var(--ease)}
.pick:hover .pick-ico{background:var(--azure)}
/* 52px, not 64: the chip hangs 28px into the body, so the top padding is what
   sets the gap under it. */
.pick-body{position:relative;padding:52px var(--s6) var(--s6);
  display:flex;flex-direction:column;align-items:flex-start;gap:var(--s3);flex:1}
.pick-body p{font-size:var(--t-text);line-height:var(--lh-text);flex:1;max-width:none}

/* ═══ 3 · THE SIX CAPABILITIES ═══
   Words one side, the screen the other, half each, and every row turns over
   from the one above it. Six rows the same way round would be a stack; turning
   them makes the section read as one thing being looked at from both sides.

   The gap is --pad, the panel's own padding, so the space between the words
   and the screen is exactly the space between the screen and the white edge
   beside it. One measurement, used twice. */
.feat{display:grid;grid-template-columns:1fr 1fr;gap:var(--pad);align-items:center}
.feat + .feat{margin-top:var(--s9)}
/* order, not direction: the words stay first in the markup on every row, so
   the reading order and the tab order never depend on which side the picture
   happens to be on. */
.feat--flip .feat-words{order:2}
/* Both measures come off. The column is already a comfortable line length, and
   the shared 65ch cap would stop the text well short of its own right edge and
   leave a dead strip beside the picture. */
.feat-words p{max-width:none}
/* No icon over the title. The screen beside the row is already the row's mark,
   and a 24px glyph above every heading turned six rows into six badges. */
.feat-words h3{margin-bottom:var(--s3)}
.feat-list{list-style:none;margin:var(--s5) 0 0;
  display:flex;flex-direction:column;gap:var(--s3)}
.feat-list li{position:relative;padding-left:var(--s4);
  font-size:var(--t-text);line-height:var(--lh-text);color:var(--muted)}
/* THE SITE'S BULLET, taken from the privacy page rather than invented here.
   A square with the corner just knocked off, in deep at 50%. Not a disc: every
   other small mark on this site is a square with a soft corner, and a round
   bullet would be the one exception. 6px at 25% is 1.5px of corner, the same
   proportion --r-chip has on the 40px chip, so the bullet and the chip are the
   same shape at two sizes. .5em down the line puts it on the x-height of the
   first line rather than its top. */
.feat-list li::before{content:'';position:absolute;left:0;top:.5em;
  width:6px;height:6px;border-radius:25%;
  background:color-mix(in srgb, var(--deep) 50%, transparent)}
.feat .link{margin-top:var(--s5)}

/* ═══ 4 · HOW THE AI WORKS. Pinned, on the first dark panel. ═══
   The wrapper is a scroll runway and draws nothing. Its extra height is what
   the visitor spends while the panel, stuck to the top of the window, plays
   the five steps. The panel keeps its own natural height, so the section looks
   exactly as it would unpinned; the only difference is that the page waits. */
.flowwrap{position:relative;height:calc(100vh + 200vh)}
.flowstage{position:sticky;top:var(--s4)}
/* 32px under the head, not 48. The stage below it has to finish inside one
   window on a short laptop, and this is the cheapest 16px on the panel. */
.flowstage .head{margin-bottom:var(--s6)}

/* The rail runs the full height of the stage beside it, from the top edge of
   the screen down to the foot of the card that explains it. Five titles are
   shorter than that on their own, so they are spread across it rather than
   stacked at a fixed pitch: the line then measures the whole section and the
   filled part of it is honestly how far through you are. */
.flow{display:grid;grid-template-columns:minmax(0,272px) minmax(0,1fr);
  column-gap:var(--pad);align-items:stretch}

/* ── THE RAIL. The homepage's timeline turned on its side. ──
   Same axis, same filled portion running 0 to 1 across the hold, same badge
   lighting as the line reaches it. Vertical because five titles read down a
   column and not across one.

   Buttons, not decoration: scrolling moves the rail, and clicking the rail
   moves the scroll. Inside a pinned section that is the only way a keyboard
   gets from the first step to the last. */
.frail{--p:1;grid-column:1;list-style:none;position:relative;margin:0;
  display:flex;flex-direction:column;justify-content:space-between}
/* The axis runs badge-centre to badge-centre. The badge is 56px and the first
   one starts at the top of the list, so its centre is 28 and the 2px line sits
   one pixel left of it. */
.frail::before,.frail::after{content:'';position:absolute;left:27px;width:2px;
  border-radius:1px}
.frail::before{top:28px;bottom:28px;background:color-mix(in srgb, #fff 18%, transparent)}
.frail::after{top:28px;height:calc((100% - 56px) * var(--p));
  background:color-mix(in srgb, var(--azure) 80%, #fff)}
/* No pitch of its own. space-between divides whatever height the stage has
   between the five, so the first badge sits level with the top of the screen
   and the last with the bottom of the card. */
.fitem button{position:relative;z-index:1;display:grid;
  grid-template-columns:56px minmax(0,1fr);column-gap:var(--s4);align-items:center;
  width:100%;padding:0;background:none;border:0;cursor:pointer;text-align:left;
  font:inherit;color:inherit}
/* The homepage timeline's badge, exactly: 56px on --r-card with a 25px icon,
   deep 76% into navy behind an azure 44% edge, and the same fill-and-grow when
   the line reaches it. The two sequences on this site are drawn the same way. */
.fitem-badge{grid-row:1/3;width:56px;height:56px;border-radius:var(--r-card);
  display:flex;align-items:center;justify-content:center;font-size:25px;
  background:color-mix(in srgb, var(--deep) 76%, var(--navy));
  border:1px solid color-mix(in srgb, var(--azure) 44%, transparent);
  color:color-mix(in srgb, var(--azure) 45%, #fff);
  transition:background var(--fast) var(--ease),border-color var(--fast) var(--ease),
             transform var(--fast) var(--ease),color var(--fast) var(--ease)}
.fitem-n{grid-column:2;font-family:var(--font-display);font-size:var(--t-fine);
  font-weight:500;line-height:1;margin-bottom:4px;
  color:color-mix(in srgb, #fff 42%, var(--navy));
  transition:color var(--fast) var(--ease)}
.fitem-t{grid-column:2;font-family:var(--font-display);font-size:var(--t-text);
  font-weight:500;line-height:1.3;
  color:color-mix(in srgb, #fff 58%, var(--navy));
  transition:color var(--fast) var(--ease)}
.fitem button:hover .fitem-t{color:#fff}
.fitem button:hover .fitem-badge{border-color:color-mix(in srgb, var(--azure) 70%, transparent)}
/* Three signals at once and never colour alone: the badge fills and grows, the
   title steps to white, and aria-current carries it to a screen reader. */
.fitem.on .fitem-badge{background:var(--deep);color:#fff;
  border-color:color-mix(in srgb, var(--azure) 90%, transparent);transform:scale(1.06)}
.fitem.on .fitem-t{color:#fff}
.fitem.on .fitem-n{color:color-mix(in srgb, var(--azure) 88%, #fff)}

/* ── THE STAGE. Screen on top, the card that explains it directly underneath. ── */
.fstage{grid-column:2;display:flex;flex-direction:column;gap:var(--s5)}
/* Capped so the whole stage finishes inside one window on a short laptop. At
   full column width the capture alone was taller than the screen it sits on. */
.flow-shot{width:100%;max-width:720px;align-self:center}
/* Five captures in one frame, one lit at a time. The stack carries the 16:10
   the captures are, so the frame is the same height whichever is showing and
   the stage never resizes mid-hold. */
.fstack{position:relative;display:block;aspect-ratio:16/10}
.fshot{position:absolute;inset:0;width:100%;height:100%;display:block;
  object-fit:cover;border-radius:var(--r-chip);opacity:0;
  transition:opacity var(--arrive) var(--ease)}
.fshot.on{opacity:1}

/* THE CARD IS .tile, out of shared.css, and nothing here restyles it. That is
   the point: the same card the plans band at the foot of this page uses and
   the same one the homepage puts on its navy panel. All this adds is the
   stacking and which one is showing. */
.flow-steps{display:grid;max-width:720px;align-self:center;width:100%}
/* Every card in the same cell, so the block is as tall as the longest of the
   five and nothing below it shifts as they change. */
.fstep{grid-area:1/1;
  opacity:0;transform:translateY(10px);pointer-events:none;
  transition:opacity var(--arrive) var(--ease),transform var(--arrive) var(--ease)}
.fstep.on{opacity:1;transform:none;pointer-events:auto}
/* Default with no scripting: every card shown, stacked, and the first screen
   lit. The script sets [data-live] and takes over from there. */
.flow:not([data-live]):not([data-static]) .fstep{opacity:1;transform:none;pointer-events:auto}

/* Unpinned: a narrow window, a touch screen, or reduced motion. The rail stops
   being a marker and becomes what it already is, a list of the five steps, and
   each card comes out from behind the others and sits under the screen. */
[data-static] .frail{display:none}
[data-static].flow{grid-template-columns:1fr}
[data-static] .fstage{grid-column:1}
[data-static] .flow-steps{display:grid;
  grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:var(--s4);max-width:none}
[data-static] .fstep{grid-area:auto;opacity:1;transform:none;pointer-events:auto}
[data-static] .flow-shot{max-width:none}

/* ═══ 5 · WHAT CHANGES ═══
   The same component Subscription Plans uses for "When the training has to be
   yours": picture one side, heading, lead and a stack of marked cards the
   other. Copied value for value rather than rebuilt, so the two pages carry
   one component and not two that resemble each other. */
.who{display:grid;grid-template-columns:1fr 1fr;gap:var(--pad);
  align-items:stretch}

/* THE PICTURE MATCHES ITS COLUMN.
   It has no ratio of its own: the row is as tall as the words beside it and
   the photograph fills that, so the two sides always finish level. Stacked,
   there is no column to match and it takes 4:3.

   This is the site's rule for a picture beside words, and it is the same on
   About and on Subscription Plans. */
.who-fig{position:relative;overflow:hidden;border-radius:var(--r-card);
  background:var(--wash)}
.who-fig img{position:absolute;inset:0;width:100%;height:100%;display:block;
  object-fit:cover;object-position:center;filter:saturate(.9) contrast(1.02)}
.who-fig::after{content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,
    color-mix(in srgb, var(--deep) 8%, transparent) 0%,
    color-mix(in srgb, var(--deep) 2%, transparent) 46%,
    color-mix(in srgb, var(--navy) 15%, transparent) 100%)}

.who-text h2{margin-bottom:var(--s4);text-wrap:balance}
/* The opening sentence at lead size, the rest at body size beneath it, which
   is how About sets a lead followed by prose. Both measures come off: the
   column IS the measure here, and the shared 62ch and 65ch caps would stop the
   text short of its own right edge and leave a dead strip beside the picture. */
.who-text .lead{max-width:none;margin-bottom:var(--s4);text-wrap:pretty}
.who-text p{max-width:none;margin-bottom:var(--s5);text-wrap:pretty}

/* THREE CARDS, THREE MARKS. The mark is bare rather than in a chip, and it
   sits beside the words rather than above them: stacked in a column, an icon
   on its own line doubles the height of every card for nothing. */
.fits{list-style:none;display:flex;flex-direction:column;gap:var(--s3);margin:0}
.fit{display:grid;grid-template-columns:26px minmax(0,1fr);column-gap:var(--s4);
  align-items:start;
  border:1px solid var(--hair);border-radius:var(--r-card);
  padding:var(--s4) var(--s5);
  transition:background var(--fast) var(--ease),border-color var(--fast) var(--ease)}
.fit:hover{background:var(--wash);
  border-color:color-mix(in srgb, var(--deep) 30%, transparent)}
.fit-ico{display:block;font-size:22px;margin-top:2px;color:var(--deep);
  transition:color var(--fast) var(--ease)}
.fit:hover .fit-ico{color:var(--azure)}
/* The one difference from the plans page's version: a card here carries a
   title over its sentence, because these three are outcomes with names rather
   than four ways of saying who the page is for. */
.fit h3{font-size:1rem;margin-bottom:4px}
.fit p{margin:0;max-width:none;font-size:var(--t-small);
  line-height:var(--lh-small);text-wrap:pretty}

/* ═══ 6 · WHERE TO GO NEXT. The second dark panel. ═══
   The Subscription Plans page's own card, reproduced value for value: the
   capability tile's surface scaled up, a 56px badge in the state the stepper
   settles into, then the eyebrow, the title and the body. The two pages
   describe a plan the same way.

   No lift on hover, unlike the plans page's version of this card. Theirs is a
   link and lifts; these three are not links, so they answer the way every
   other non-link on the site does — the surface warms and the edge picks up
   blue, and nothing moves. */
.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s5);
  margin-bottom:var(--s6)}
.plan-card{display:flex;flex-direction:column;
  background:color-mix(in srgb, #fff 7%, transparent);
  border:1px solid color-mix(in srgb, #fff 13%, transparent);
  border-radius:var(--r-card);padding:var(--s6);
  transition:background var(--fast) var(--ease),border-color var(--fast) var(--ease)}
.plan-card:hover{background:color-mix(in srgb, #fff 12%, transparent);
  border-color:color-mix(in srgb, var(--azure) 46%, transparent)}
/* The stepper badge in the state it settles into, which is also the chip the
   plans page and the About page's navy cards wear. */
.plan-ico{width:56px;height:56px;border-radius:var(--r-card);
  display:flex;align-items:center;justify-content:center;font-size:25px;
  margin-bottom:var(--s5);background:var(--deep);
  border:1px solid color-mix(in srgb, var(--azure) 90%, transparent);
  color:color-mix(in srgb, var(--azure) 45%, #fff)}
.plan-card h3{margin-bottom:var(--s3)}
/* The paragraph takes the slack, so the three figure blocks sit on one line
   across the row however unevenly the three sentences run. */
.plan-card p{max-width:none;flex:1;margin-bottom:var(--s5);text-wrap:pretty;
  font-size:var(--t-small);line-height:var(--lh-small);
  color:color-mix(in srgb, #fff 64%, var(--navy))}
/* The two figures, under a hairline. They are what the whole section is about,
   so they are separated from the sentence rather than buried in it, and the
   number itself steps up to white at the button's weight. */
.plan-nums{list-style:none;margin:0;padding-top:var(--s4);
  border-top:1px solid color-mix(in srgb, #fff 13%, transparent)}
.plan-nums li{font-size:var(--t-small);line-height:var(--lh-small);
  color:color-mix(in srgb, #fff 64%, var(--navy))}
.plan-nums b{font-weight:600;color:#fff}

/* ═══ RESPONSIVE ═══
   Each breakpoint is set where the thing it governs stops fitting, matching
   how the rest of the site is built. There is no breakpoint scale. */

@media (max-width:1080px){
  /* Three plan cards at this width leave each one about 240px, which puts the
     supporting sentence on six lines. Two across, the third full width under
     them, the same shape the option cards take on the homepage. */
  .plans{grid-template-columns:repeat(2,1fr)}
  .plans .plan-card:last-child{grid-column:1/-1}
  /* The card column falls under 300px before anything else breaks, and the
     screen beside it is too narrow to read a UI in. Words over picture. */
  /* The rail needs a column of its own and there is not one to give it. */
  .flow{grid-template-columns:1fr;row-gap:var(--s6)}
  .frail{display:none}
  .fstage{grid-column:1}
  .flow-shot,.flow-steps{max-width:none}
}

/* THE HOLD IS DESKTOP-ONLY, on the same three counts the homepage uses, and
   all three have to be true: wide enough, a real pointer, and a wheel rather
   than a thumb. The pointer conditions are what keep every tablet out of it.
   Everywhere else the runway collapses and the stage stops sticking. */
@media not all and (min-width:1081px) and (hover:hover) and (pointer:fine){
  .flowwrap{height:auto}
  .flowstage{position:static}
}

@media (max-width:880px){
  .picks,.plans{grid-template-columns:1fr}
  /* The rows stack, and the picture goes back above its words on every one —
     turning them over only means something while they sit side by side. */
  .feat{grid-template-columns:1fr;gap:var(--s6)}
  .feat--flip .feat-words{order:0}
  .feat + .feat{margin-top:var(--s8)}
  /* Words first, then the picture. Nothing to match, so it takes 4:3. */
  .who{grid-template-columns:1fr;gap:var(--s5)}
  .who-fig{order:2;aspect-ratio:4/3}
}

@media (max-width:560px){
}