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

   Spine, light to dark to light, the dark centre happening once:
     1 opening ...... the shared .open block, one photograph
     2 already on ... two linked cards, iconed
     3 paths ........ three linked cards, numbered
     4 form ......... the form beside the one deep-blue details card
     5 next ......... NAVY. four steps, then the manual-purchase note
     6 closing ...... the shared two-card closer
     7 footer ....... navy

   NOTHING HERE INVENTS VOCABULARY. Every colour is one of the six or a
   color-mix of them, every radius is one of the four, every type size is
   from the four-step body scale or a declared heading step, and every
   transition runs on --fast/--arrive/--ease.

   Two components are new and are handed to the design system at the end of
   the round: the form controls (section 24 listed them as missing), and
   .ilink, the inline link inside a sentence (section 24 listed that too).
   ============================================================ */

/* The page hides and reveals blocks after a send, and an author rule beats the
   [hidden] in the browser's own stylesheet whatever the specificity — .form is
   a grid, so without this it stays on screen with the attribute set. Named
   exactly, not as a page-wide [hidden]{...!important}: that would reach into
   every shared component on the page. */
.form[hidden],.done[hidden],[data-enquiry-hide][hidden]{display:none}


/* ═══ 2 · ALREADY ON THE PLATFORM ═══
   Both cards are links, so they lift — the same move the homepage option
   cards make. The difference cards on the homepage do not lift, because
   they are not links, and that distinction is worth keeping. */
.routes{display:grid;grid-template-columns:1fr 1fr;gap:var(--s5)}
/* No flex gap. The eyebrow, the title and the copy each carry their own
   margin, so .tag keeps the spacing shared.css gives it and nothing here
   has to override a shared component. */
.route{display:flex;flex-direction:column;align-items:flex-start;
  border:1px solid var(--hair);border-radius:var(--r-card);padding:var(--s6);
  text-decoration:none;color:inherit;
  transition:transform var(--fast) var(--ease),box-shadow var(--fast) var(--ease),
             border-color var(--fast) var(--ease)}
/* The edge picks up blue, it does not disappear. `border-color:transparent` is
   the homepage option card's move and it works there because that card is
   mostly photograph — on a plain white card on a light ground, losing the edge
   costs the card its shape at the exact moment the pointer is on it. This is
   the plan cards' hover. */
.route:hover{transform:translateY(-4px);box-shadow:var(--lift);
  border-color:color-mix(in srgb, var(--deep) 30%, transparent)}
/* The 56px chip the option cards use, at the same radius and the same azure
   step on hover. Both card rows take it: what tells them apart is the row
   itself, two wide cards against three narrow ones, and the eyebrow the pair
   above carries. */
.route-chip,.path-ico{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;margin-bottom:var(--s5);
  transition:background var(--fast) var(--ease)}
.route:hover .route-chip,.path:hover .path-ico{background:var(--azure)}
.route h3{margin-bottom:var(--s3)}
/* :not(.tag) matters. The eyebrow is a <p> too, so a bare `.route p` gave it
   flex:1 — in a flex column that GROWS the element into the leftover space —
   and overrode the margin shared.css sets on it. The two cards' titles then
   sat 23px apart, by whichever card had less copy in it. */
.route p:not(.tag){flex:1;margin-bottom:var(--s5);max-width:none}


/* ═══ 3 · ENQUIRY PATHS ═══
   Numbered, not iconed. Three cards directly under two cards read as one
   long row of the same object unless something separates them, and the
   number is also the content: these are steps into one form, not three
   different places to go. */
.paths{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s5)}
.path{display:flex;flex-direction:column;align-items:flex-start;
  background:var(--panel);border:1px solid var(--hair);border-radius:var(--r-card);
  padding:var(--s6);text-decoration:none;color:inherit;
  transition:transform var(--fast) var(--ease),box-shadow var(--fast) var(--ease),
             border-color var(--fast) var(--ease)}
.path:hover{transform:translateY(-4px);box-shadow:var(--lift);
  border-color:color-mix(in srgb, var(--deep) 30%, transparent)}
/* NO NUMBERS HERE. 1, 2, 3 says "do these in order" and these are three
   alternatives — you pick one. The four steps further down the page are a real
   sequence, so the numerals belong to them and to nothing else. Two of these
   three icons are the marks the homepage already uses for the same products. */
.path h3{margin-bottom:var(--s3)}
.path p{flex:1;margin-bottom:var(--s5);max-width:none}


/* ═══ 4 · THE FORM ═══
   Form left, the details card right. The card is the one place on the page
   the email address and the phone number are printed. */
.enq{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);
  gap:var(--s6);align-items:start}

/* The confirmation. A sibling of the form, so it takes the same column once
   the form hides. */
.done{background:var(--wash);border:1px solid var(--hair);border-radius:var(--r-card);
  padding:var(--s6);align-self:start}
.done-chip{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;
  margin-bottom:var(--s5)}
/* The confirmation replaces the section heading, so it takes the heading's
   own step rather than inventing one. */
.done h2{margin-bottom:var(--s4)}
.done h2:focus-visible{outline:2px solid var(--deep);outline-offset:6px}
.done .lead{margin-bottom:var(--s4)}

/* THE DETAILS CARD. Deep blue with the azure wash out of the bottom-right
   corner — the same object the closing card already is, so the page gains a
   dark object without gaining a new kind of one. */
/* A flex column so the list below can take the height the card gains by
   stretching, rather than leaving it as dead blue at the foot. */
.detail{background:var(--deep);border-radius:var(--r-card);padding:var(--s6);
  position:relative;overflow:hidden;box-shadow:var(--lift);align-self:stretch;
  display:flex;flex-direction:column}
.detail::before{content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(80% 90% at 92% 100%,
    color-mix(in srgb, var(--azure) 40%, transparent), transparent 66%)}
.detail > *{position:relative}
.detail h3{color:#fff;margin-bottom:var(--s3)}
.detail > p{font-size:var(--t-small);line-height:var(--lh-small);max-width:none;
  color:color-mix(in srgb, #fff 86%, var(--deep))}
.detail :focus-visible{outline-color:#fff}

/* Label quiet, value loud, one mark per row. Four eyebrows stacked down a card
   would be four copies of a component the site rations to one, so the label
   stays a plain small line and the icon does the work of naming the row. */
/* flex:1 takes the leftover height and align-content spreads the four rows
   through it, so the card fills whatever the form's height turns out to be
   instead of ending early. On a phone there is no leftover and it sits at its
   natural height. */
.dl{margin-top:var(--s6);display:grid;gap:0;flex:1;align-content:space-between}
/* No rules between the rows. The icon column already marks where one row ends
   and the next begins, and a line as well left the card reading as a table.
   The gap does the separating, and there are five rows rather than four so the
   card fills its height with content instead of with space. */
.dl > div{display:grid;grid-template-columns:36px minmax(0,1fr);
  column-gap:var(--s4);align-items:start;padding:var(--s4) 0}
.dl > div:first-child{padding-top:0}
.dl > div:last-child{padding-bottom:0}
/* Spans both rows of its own cell, so the mark sits against the label and the
   value together rather than against either one. */
.dl-ico{grid-row:1/3;grid-column:1;width:36px;height:36px;border-radius:var(--r-chip);
  display:flex;align-items:center;justify-content:center;font-size:19px;color:#fff;
  background:color-mix(in srgb, #fff 15%, transparent)}
/* 72%, not 60. At 60 this is 4.1:1 on the deep fill, which is under AA for
   text this size. 72 is 5.3:1 and still clearly the quieter half of the pair. */
.dl dt{grid-column:2;font-size:var(--t-fine);line-height:var(--lh-fine);
  color:color-mix(in srgb, #fff 72%, var(--deep))}
/* 1.15rem is h3's own floor. The value is what somebody came to this card for,
   so it takes a declared step up rather than sitting level with its own label.

   overflow-wrap:anywhere is load-bearing, not tidying. An email address and a
   hostname carry no spaces, so nothing in them is a legal break and the browser
   runs them straight past the edge — and .detail clips, so on a 360px phone
   "training.primeacg.com" simply lost its last 31px with no scrollbar and no
   sign anything was wrong. */
.dl dd{grid-column:2;font-family:var(--font-display);font-weight:500;
  font-size:1.15rem;line-height:1.35;letter-spacing:-.01em;color:#fff;margin-top:4px;
  overflow-wrap:anywhere}
.dl dd small{display:block;font-family:var(--font-body);font-weight:300;
  font-size:var(--t-fine);line-height:var(--lh-fine);margin-top:7px;
  color:color-mix(in srgb, #fff 68%, var(--deep))}

.detail .ilink{color:#fff;
  text-decoration-color:color-mix(in srgb, #fff 42%, transparent)}
.detail .ilink:hover{color:color-mix(in srgb, #fff 84%, var(--azure));
  text-decoration-color:currentColor}


/* ═══ 5 · WHAT HAPPENS NEXT. The one dark panel. ═══
   The four steps take the dark tile surface out of shared.css by value, not
   by class: .tiles is a three-column grid and these are four. Noted for the
   design system — .tiles wants a count, and then this rule goes away. */
.steps{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);
  gap:var(--s4);margin-bottom:var(--s5)}
.step{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(--s5);
  transition:background var(--fast) var(--ease),border-color var(--fast) var(--ease)}
.step:hover{background:color-mix(in srgb, #fff 12%, transparent);
  border-color:color-mix(in srgb, var(--azure) 46%, transparent)}
/* The timeline badge's resting state at 40px, on --r-chip, because 16px on a
   40px box is the squircle the shape rule names. */
.step-n{display:flex;align-items:center;justify-content:center;
  width:40px;height:40px;border-radius:var(--r-chip);margin-bottom:var(--s4);
  font:600 .9375rem/1 var(--font-display);
  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)}
.step h3{font-size:1rem;margin-bottom:6px}
.step p{font-size:var(--t-small);line-height:var(--lh-small);margin:0;max-width:none;
  color:color-mix(in srgb, #fff 64%, var(--navy))}

/* The one thing on the site that states the manual purchase path. The same
   card the four steps above it are, at full width — a rule down one edge was a
   callout style this site does not have, invented for one paragraph. The text
   takes the whole width: capped at a reading measure it stopped a third of the
   way short and left the card looking half empty. */
.callout{border-radius:var(--r-card);padding:var(--s5);
  background:color-mix(in srgb, #fff 7%, transparent);
  border:1px solid color-mix(in srgb, #fff 13%, transparent)}
.callout h3{font-size:1rem;margin-bottom:var(--s3)}
.callout p{font-size:var(--t-small);line-height:var(--lh-small);margin:0;max-width:none;
  color:color-mix(in srgb, #fff 64%, var(--navy))}


/* ═══ RESPONSIVE ═══
   No breakpoint scale, the same as the rest of the site: each one is set
   where the thing it governs actually stops fitting. */
@media (max-width:1080px){
  /* The details card goes under the form rather than squeezing it. */
  .enq{grid-template-columns:1fr;gap:var(--s5)}
  /* Two across. Four 210px steps is a column of single words. */
  .steps{grid-template-columns:repeat(2,1fr)}
  /* Two, with the third taking the full width beneath them — the move the
     homepage's three option cards already make at this width. Held at three
     across, each card is 236px at 900 and the copy runs four words to a line. */
  .paths{grid-template-columns:repeat(2,1fr)}
  .path:last-child{grid-column:1/-1}
}
@media (max-width:880px){
  /* .form is NOT in this selector. It is a shared component now and carries its
     own collapse at this same width; naming it here would be a page file
     overriding shared behaviour, which is the drift the session rules exist to
     stop. .routes and .paths are this page's own. */
  .routes,.paths{grid-template-columns:1fr}
  .path:last-child{grid-column:auto}
}
@media (max-width:560px){
  .steps{grid-template-columns:1fr}
  /* The same step the option-card chip takes on a phone. */
  .route-chip,.path-ico,.done-chip{width:48px;height:48px;font-size:22px}
  /* Back to the shared card-title step. At 1.15rem the two long values need to
     break mid-word on a narrow phone, and a broken hostname is worse than a
     slightly quieter one. */
  .dl dd{font-size:1rem}
  .dl > div{grid-template-columns:32px minmax(0,1fr);column-gap:var(--s3)}
  .dl-ico{width:32px;height:32px;font-size:17px}
  .consent{gap:var(--s2)}
}