/* The Inner Circle apply page (Wave 3, and the Wave 3 fix round). 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 numbered
   cards (.ncards), the video grid (.vgrid.vgrid--mix), the checklist (.fit), the price and guarantee (.pg), the step
   table (.stable), the long form (.lform), the form with its picture rail (.apply), the questions (.faq, .qa), the
   Peach Red closing band with its button (.closer-band--long, .closer-band__cta), the extra photo strips for tablets
   and phones (.strip with .m-only or .p-only), and .keep2, which keeps the head rows two columns wide on tablets.
   In the fix round the closing band, the link inside an answer, the place a jump to the form stops, and the order of
   the Results grid all moved into the shared file. This file only holds what belongs to this page alone.

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

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

/* ---------- 2. three numbers: the extra photo over the table, on phones only ---------- */
.ic-num-ph{margin-bottom:26px}

/* ---------- 8. the application: the three photos down the rail ---------- */
.apply__ph--top{width:88%;align-self:flex-start}
.apply__ph--mid{width:66%;align-self:flex-end}
.apply__ph--end{width:62%;align-self:flex-start;margin-bottom:6px}
.apply .lead{font-weight:600}

/* ===================== responsive ===================== */
@media (max-width:1100px){
  /* a narrower rail: larger photos, so they still sit about a screen apart down the length of the form */
  .apply__ph--top{width:100%}
  .apply__ph--mid{width:82%}
  .apply__ph--end{width:78%}
}
@media (max-width:899px){
  /* (the last photo of the rail stands beside the figurine here: .pair-end in the shared file) */
  .apply__ph--top{width:auto;align-self:stretch;margin-bottom:0}
  .apply .lform .lform__break{margin:8px 0 10px}
}
@media (min-width:600px) and (max-width:899px){
  /* tablets: the photo over the form is not blown up to the full width of the screen */
  .apply__ph--top{width:72%;align-self:center}
}
@media (max-width:599px){
  /* phones: a little less room under the figurine and over the photo that follows the questions, so the stretch
     between the photo beside the figurine and that photo stays well under one screen */
  .apply{padding-bottom:44px}
  .faq.photo-last .faq__photo{margin-top:28px}
}