/* The Pressure Process apply page, /pressure-process-apply/ (Wave 2). The page loads /assets/site.css first and this
   file second, so a rule here wins a tie with a shared rule at every width, phones included.

   Everything on the page comes from the shared file: the hero (.ihero), the three numbers (.numband), the six-cell
   and four-cell step tables (.stable), the italic line under a table (.after-line), the photo and one sentence
   (.phline), the mixed video grid (.vgrid.vgrid--mix), the two-card checklist (.fit), the price and guarantee pair
   (.pg, .pg__box), the long form with numbered questions (.lform, .lform__group--num), the form with its picture rail
   (.apply, with .is-stack and .pair-end), the cards for "Application unlocked.", "Application received." and
   "Not yet." (.state), the questions (.faq, .qa, .qa__more), the Peach Red closing band with its button
   (.closer-band--long), the photo strips for tablets and phones (.strip) and .keep2. This file only holds what
   belongs to this page and its script.

   Four colors only: Deep Slate Olive, Naples Yellow, Peach Red, Neutral Gray, and transparency of them.

   What the live script switches on and off, and where each piece is styled:
     .text-center.mb-48           the headline block over the questions: hidden for "Not yet." and "Application received."
     form#pp-qualify              .is-locked after a pass; hidden for "Not yet." and "Application received."
     div.form-group               .error on a question left empty (the shared form marks it)
     its button                   .btn-loading and switched off while sending (the shared form greys it)
     .form-submit (first form)    hidden after a pass
     p#pp-qualify-status, p#pp-application-status   the script's words, with .is-error for a problem   -> the shared block below
     div#pp-unlock-head, form#pp-application        lose hidden after a pass
     the application's button     the script writes "Submitting..." into it and adds .btn-loading     -> "the application's button"
     div#pp-success               shown with style display:block once the application is sent           -> "application received"
     div#pp-not-yet               loses hidden when the answers don't unlock it                         -> "not yet" */

/* a press on "Answer six questions" glides down to the questions (not when he has asked for less motion) */
@media (prefers-reduced-motion:no-preference){
  html{scroll-behavior:smooth}
}

/* ---------- 1. hero: the photo is a wide one, so the proof card stands under it and the words have the left column ---------- */
@media (min-width:900px){
  .pp-hero .ihero__copy{grid-row:1 / span 2}
  .pp-hero .ihero__photo{grid-row:1}
  .pp-hero .ihero__proof{grid-column:2;grid-row:2;max-width:none;margin-top:30px}
}
@media (min-width:600px) and (max-width:899px){
  /* tablets: the photo stays beside the words (its file is 540 pixels across, too few for the full width of the screen) */
  .pp-hero .ihero__grid{grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);gap:0 28px;align-items:start}
  .pp-hero .ihero__copy{grid-column:1;grid-row:1}
  .pp-hero .ihero__photo{grid-column:2;grid-row:1;margin-top:10px}
  .pp-hero .ihero__photo .frame{aspect-ratio:5/4}
  .pp-hero .ihero__proof{grid-column:1 / -1;grid-row:2}
}

/* ---------- 2. three numbers: a photo with them. A wide one over the table up to 1100 wide, a framed one beside it from 1101 ---------- */
.numband .pp-num-ph{margin-bottom:28px}
@media (min-width:900px) and (max-width:1100px){
  .pp-num-ph .frame{aspect-ratio:4/1}
  .pp-num-ph img{object-position:50% 14%}
}
@media (min-width:1101px){
  .numband > .wrap{display:grid;grid-template-columns:minmax(0,1fr) clamp(280px, 25vw, 340px);gap:34px;align-items:stretch}
  .numband > .wrap > .pp-num-ph{order:2;margin:0}
  .numband > .wrap > .pp-num-ph .frame{height:100%;aspect-ratio:auto;min-height:190px}
  .numband > .wrap > .pp-num-ph img{object-position:58% 30%}
  .numband__cell{padding-inline:18px}
}

/* ---------- 3 and 7. the step tables: a photo row inside the table, as wide as the table ----------
   .pp-to-1100 is drawn up to 1100 wide. The shared four-cell table is two cells a row up to 1100; the six-cell table
   is set the same way here, so the photo row stands between two rows in both. */
.stable > .pp-table-ph{grid-column:1 / -1;background:var(--paper)}
.stable > .pp-table-ph .frame{border:0;border-radius:0;box-shadow:none}
@media (min-width:1101px){
  .pp-to-1100{display:none!important}
}
@media (min-width:900px) and (max-width:1100px){
  .stable--6{grid-template-columns:repeat(2,minmax(0,1fr))}
  .stable > .pp-table-ph .frame{aspect-ratio:7/2}
}

/* ---------- 3. under the six steps: from 900 wide the italic line and the card with a photo stand side by side ---------- */
@media (min-width:900px){
  .pp-after-row{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:44px;align-items:center;margin-top:46px}
  .pp-after-row > .after-line,.pp-after-row > .phline{margin-top:0}
  .pp-after-row > .phline{grid-template-columns:minmax(0,.62fr) minmax(0,1fr)}
  .pp-after-row .phline__t{padding:26px 28px;font-size:24px}
}

/* ---------- 4. results: the second video card (Jay Skeeters) ----------
   The shared grid lets a written card keep its own height. This card is a written card with a video on top, so it
   stood shorter than the video card beside it and left an empty patch under it. Here it is as tall as its row, with
   its name line at the foot like the card beside it. Its "Pressure Process" chip took a second top margin from the
   written card's chip rule; without it the chip sits 14px from the top of the video, like the chip beside it. */
.vgrid.vgrid--mix > .wcard--video{align-self:stretch}
.vgrid.vgrid--mix > .wcard--video .wcard__in{flex:1 1 auto;display:flex;flex-direction:column}
.wcard--video .vcard__media .chip{margin-top:0}

/* ---------- 6. price ----------
   Phones: the price, the photo, then the guarantee (the shared file puts the photo first).
   761 to 1100 wide: the photo stands beside the price and the guarantee runs under both (the shared file puts the photo
   over the two cards, which leaves more than a screen with no photo of him under it). */
@media (max-width:599px){
  .pg--photo .pg__price{order:-2}
}
@media (min-width:761px) and (max-width:1100px){
  .pg--photo .pg__price{grid-column:1;grid-row:1}
  .pg--photo .pg__photo{grid-column:2;grid-row:1;order:0;max-width:none;margin:0}
  .pg--photo .pg__photo .frame{height:100%;aspect-ratio:auto;min-height:260px}
  /* the guarantee as a wide band: the seal and its name at the left, the words beside them */
  .pg--photo .pg__guar{grid-column:1 / -1;grid-row:2;display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:32px;align-items:center;justify-content:start}
  .pg--photo .pg__seal{grid-column:1;grid-row:1;margin-bottom:8px}
  .pg--photo .pg__gt{grid-column:1;grid-row:2;align-self:start}
  .pg--photo .pg__gp{grid-column:2;grid-row:1 / span 2;margin-top:0}
}

/* ---------- 7. how starting works: on phones the photo comes before the headline ---------- */
@media (max-width:599px){
  .how-head > .how-photo{order:-1}
}

/* ---------- 9. questions: the bookshelves photo is a wide one ----------
   Phones: the photo beside the headline is left out and the same photo stands between the second and third question,
   with a line under it like the rows, and a wide photo ends the list. */
.faq__photo{aspect-ratio:4/3}
.faq__photo img{object-position:50% 22%}
.qa > .pp-qa-ph{padding-block:24px 28px;border-bottom:2px solid var(--ink)}
.faq .pp-faq-end{margin-top:32px}
@media (min-width:600px) and (max-width:899px){
  .faq__photo{aspect-ratio:1/1}
}
@media (max-width:599px){
  .faq__left > .faq__photo{display:none}
}

/* ---------- 10. closing band ---------- */
.closer-photo img{object-position:40% 16%}

/* ===================== the questions and the application =====================
   The same block is in /reframe/live/live-v4.css and /pressure-process-apply/page.css: both pages ask the same six
   questions and open the same kind of application, and each page loads only its own stylesheet.
   Everything here is built on the shared long form (.lform), its numbered questions (.lform__group--num), the form
   with a picture rail (.apply) and the screen-state cards (.state). These rules add what the two live scripts need. */

/* the first block of the column starts level with the top of the rail */
.apply__main.is-stack > :first-child{margin-top:0}
.apply .lead{font-weight:600}

/* the line under a button while the page is sending ("Sending your answers."). When the script adds .is-error the
   shared note box with the Peach Red edge shows instead ("Answer every question."). */
.lform__msg{text-wrap:balance}
.lform__msg:not(.is-error){padding:0;border:0;border-radius:0;background:none;box-shadow:none;font-family:var(--serif);font-style:italic;font-weight:600;font-variation-settings:"opsz" 36;font-size:21px;line-height:1.3;letter-spacing:0}

/* the scripts move the keyboard focus to these headings so a screen reader reads them. They aren't buttons, so no ring. */
.state__h:focus{outline:none}

/* after a pass his answers stay on screen and can't be changed (the script adds .is-locked and switches every box off).
   The boxes go flat with a dashed line, the choice he made stays Peach Red, and the ones he didn't pick go quiet. */
.lform.is-locked .field{opacity:1;color:var(--ink);-webkit-text-fill-color:var(--ink);background-color:transparent;border-style:dashed;box-shadow:none;cursor:default;resize:none}
.lform.is-locked select.field{background-image:none;padding-right:16px}
.lform.is-locked .lform__radio,.lform.is-locked .lform__radio input{cursor:default}
.lform.is-locked .lform__radio input:not(:checked) + span{background:transparent;border-style:dashed;border-color:rgba(37,49,34,.5);box-shadow:none;color:rgba(37,49,34,.74)}
.lform.is-locked .lform__radio input:not(:checked) + span::before{border-color:rgba(37,49,34,.5);background:transparent;box-shadow:none}

/* a select box keeps the answer he picked inside its own edge. On a 320px phone the Safari engine draws a long answer
   ("Self-taught, books, courses, videos") past the box, which made the whole page 10px wider than the screen. */
.apply select.field{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* the application opens as one block under his answers (/reframe/live/ wraps it in section#apply). When the script
   scrolls to it, it stops clear of the header. */
.w2-apply{display:flex;flex-direction:column;gap:26px;scroll-margin-top:calc(var(--nav-h) + 24px)}

/* a block the script has just shown rises into place (not when he has asked for less motion). On section#apply the
   blocks inside it rise, never the section itself: the script scrolls to the section, and a section that is still
   moving would end up 22px higher than where the scroll stopped. */
.w2-apply.fade-in > *,.state.fade-in{animation:w2-rise .8s ease both}
@keyframes w2-rise{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}

/* ---------- the picture rail beside the two forms ----------
   As the page loads the rail holds one framed photo, the figurine and a last photo. While the application is open the
   column beside it is three times as tall, so three more photos are drawn (.only-open), spread down its length. */
.apply__ph--top{width:88%;align-self:flex-start}
.apply__ph--end{width:62%;align-self:flex-start;margin-bottom:6px}
.only-open{width:70%;align-self:flex-start}
.only-open.is-right{align-self:flex-end}
@media (min-width:900px){
  .apply__rail > .figure-scene.is-spread{margin-top:auto}
  .apply__rail > .only-open{display:none}
  .apply__grid:has(.w2-app:not([hidden], [hidden] *)) .apply__rail > .only-open{display:block}
}
@media (max-width:1100px){
  /* a narrower rail: larger photos */
  .apply__ph--top{width:100%}
  .only-open{width:84%}
  .apply__ph--end{width:78%}
}
@media (max-width:899px){
  /* the rail is gone. The first photo sits over the questions at full width; the last one stands beside the figurine
     (.pair-end in the shared file). */
  .apply__ph--top{width:auto;align-self:stretch}
  .apply .lform .lform__break{margin:8px 0 10px}
}
@media (min-width:600px) and (max-width:899px){
  /* tablets: the photo over the questions is not blown up to the full width of the screen */
  .apply__ph--top{width:72%;align-self:center}
  /* tablets: the application's first photo stands after its second question (on phones it stands over the first).
     On a screen 690px tall the first box, "Your Name", is then on the screen when the page moves to "Application
     unlocked.". The markup is not changed: the first two questions are only drawn ahead of the photo. */
  .w2-app > .lform__group:nth-of-type(-n+2){order:-1}
}
@media (max-width:599px){
  .lform__msg:not(.is-error){font-size:19px}
}
@media (prefers-reduced-motion:reduce){
  .w2-apply.fade-in > *,.state.fade-in{animation:none}
}

/* ---------- what he missed (no script is changed for this) ----------
   While the line under a button is an error line (the scripts add .is-error to it), every required box of that form
   that is still empty gets the Peach Red ring, and so do the choices of a required question with nothing ticked.
   A ring goes as soon as its box is filled in. A browser without :has() shows what it showed before. */
.lform:has(.lform__msg.is-error) .field:required:invalid{box-shadow:inset 3px 3px 0 rgba(37,49,34,.08), 0 0 0 3px var(--red)}
.lform:has(.lform__msg.is-error) .lform__group:has(input[type=radio]:required:invalid) .lform__radio span{box-shadow:3px 3px 0 var(--ink), 0 0 0 3px var(--red)}

/* ===================== this page only ===================== */

/* ---------- tablets (600 to 899 wide): the photo over the six questions stands after question 02 instead ----------
   With the photo over them, question 01 was at the bottom edge of a 690px-tall screen after a press on "Answer six
   questions". So the rail's first photo is left out there while the questions show, and the same photo stands inside
   the form after question 02 (the figure with .t-only in the page). It still shows beside "Not yet." and over
   "Application received.", where the rules further down ask for it. Phones keep the photo over the questions. */
@media (min-width:600px) and (max-width:899px){
  .apply__rail > .apply__ph--top{display:none}
}

/* ---------- the application's button ----------
   The live script writes "Submitting..." into this button and later writes its first words back, which would wipe
   out an arrow drawn inside the button. So this one button's arrow is drawn here (the same drawing as #i-arrow). */
.pp-send::after{content:"";width:22px;height:22px;flex:none;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 12 H19 M13 6 L19 12 L13 18' fill='none' stroke='%23253122' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / 22px 22px}
.pp-send.btn-loading::after{display:none}

/* ---------- the wide photo after the forms (tablets and phones) ---------- */
@media (min-width:600px) and (max-width:899px){
  .pp-after{width:66%;align-self:center}
  .pp-after .frame{aspect-ratio:16/9}
}

/* ---------- application received ----------
   The script hides the headline, the questions and the application and shows "Application received.". The shared file
   then leaves only the thumbs-up figurine in the rail. The rail's last photo stands beside it on its ground line, so
   a real photo of him is on this screen too (on tablets and phones the shared .pair-end rule places it). On tablets
   and phones the rail's first photo stands over the card as well. */
.apply__grid:has(#pp-success[style*="block"]) .apply__rail > .apply__ph--end{display:block}
@media (max-width:899px){
  .apply__grid:has(#pp-success[style*="block"]) .apply__rail > .apply__ph--top{display:block}
}
@media (min-width:900px){
  /* the figurine at the left of its ground line, the framed photo at the top right of the same scene (the scene's
     cloud and birds would sit behind the photo, so they are left out here) */
  .apply__grid:has(#pp-success[style*="block"]) .apply__rail > .figure-scene .fig{left:0}
  .apply__grid:has(#pp-success[style*="block"]) .apply__rail > .figure-scene .fcloud,
  .apply__grid:has(#pp-success[style*="block"]) .apply__rail > .figure-scene .fbird{display:none}
  .apply__grid:has(#pp-success[style*="block"]) .apply__rail > .apply__ph--end{position:absolute;z-index:2;top:0;right:0;width:50%;margin:0}
}

/* ---------- not yet ----------
   The script hides the headline and the questions and shows "Not yet.". The rail keeps one framed photo of him beside
   the card (the shared file would leave only the thumbs-up figurine, which is the wrong picture beside "Not yet.").
   On tablets and phones: that photo, the card, the proof card, then the rail's last photo. The wide photo after the
   forms is left out (it would stand right under the card's own photo). */
.apply__grid:has(#pp-not-yet:not([hidden])) .apply__rail > .figure-scene{display:none}
.apply__grid:has(#pp-not-yet:not([hidden])) .apply__rail > .apply__ph--top{display:block}
.apply__grid:has(#pp-not-yet:not([hidden])) .pp-after{display:none}
@media (min-width:900px){
  /* the card is the first thing showing in its column, so it starts level with the photo beside it */
  .apply__head[hidden] ~ #pp-not-yet,.apply__head[hidden] ~ #pp-success{margin-top:0}
}
@media (max-width:899px){
  .apply__grid:has(#pp-not-yet:not([hidden])) .apply__rail > .apply__ph--end{display:block;order:7;width:min(56%, 320px);align-self:center;margin:8px 0 0}
}