/* The Programs page (Wave 4). 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.

   Almost everything on the page comes from the shared file: the hero (.ihero), the two program cards (.progs, .prog),
   the Three Roads band (.split, .flow, .checks--plain, .pg__box, .cta-stack, the homepage's video card), the product
   cards (.offers), the books block (.books), the homepage's step table (.how-head, .table3), the wall (.wall, .wcard),
   the questions (.faq, .qa), the homepage's closer, 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.

   This file only holds what the shared file has no piece for. Each block says why it is here.
   NOTHING in this file touches the Books section: it is built from the shared file alone, so the Content page can
   copy it whole.

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

/* ---------- 2. Coaching with me ----------
   The band's head is a chip and nothing else (the copy deck gives it no headline), so the chip gets a little more
   room under it than a chip over a headline has. */
.pg-coach .stack-head .chip{margin-bottom:30px}

/* The proof line in a program card, with the client's round photo beside it. The shared .prog__proof is words only.
   Every testimonial on the site shows a photo, so the photo is added here. */
.pg-proof{display:grid;grid-template-columns:56px minmax(0,1fr);gap:14px;align-items:start;align-self:stretch}
.pg-proof .avatar{margin-top:3px}

/* The extra photo inside the first card, on phones only: the card is longer than a phone screen, and without it
   there'd be more than a screen with no photo of him. */
.pg-inner{align-self:stretch}

/* Each card's headline runs to three lines. The lines are evened out, so the last one is never a single word. */
.pg-coach .prog__h{text-wrap:balance}
/* The second card's chip runs to two lines. Its lines are evened out too, and its box is only as wide as those two
   lines need (once a chip's words wrap, its box is otherwise as wide as the card, with the second line's end empty). */
.pg-chip-even{text-wrap:balance;max-width:min(100%, 20em)}

/* The line under the two cards, with a framed photo beside it. The shared .after-line is the words; this row adds
   the photo and keeps the two together in the middle of the page. Without the photo the stretch from the two cards'
   photos to the next photo of him is longer than a desktop screen. (No line about prices goes here: the copy deck
   took it out.) */
.pg-fit{margin-top:48px;display:flex;align-items:center;justify-content:center;gap:40px}
.pg-fit__ph{flex:none;width:290px;margin:0}
.pg-fit__words{min-width:0;max-width:400px}
.pg-fit .after-line{margin:0;font-size:30px}

/* ---------- 3. Three Roads: the right column ----------
   The shared .split takes one thing on its right side. Here the right side holds two: the video card, and under it
   a framed photo of him that takes whatever height the left column leaves. */
.pg-side{display:flex;flex-direction:column;gap:28px;align-self:stretch;min-width:0}
/* the phone-only photo strip between the paragraph and the check list keeps the column's 22px over it (the shared
   .strip takes its margin away, and the tilted frame then touched the paragraph's last line) */
.pg-roads .flow > .mph.strip{margin-top:var(--flow,22px)}
/* the video card's title: its lines are evened out, so the last one is never a single word */
.pg-roads .vcard__h{text-wrap:balance}
/* The photo that fills its side. The figure takes the height the left column leaves and its frame fills it. (On
   tablets the frame has a limit on how tall it may get for its width: see the 600px rule below.) */
.pg-side__ph{flex:1 1 auto;display:flex;margin:0;min-height:300px}
.pg-side__ph .frame{flex:1;width:100%;aspect-ratio:auto}

/* ---------- 4. Programs you start on your own ----------
   The three buttons. "See the 30-Day Power Shift" is the longest; at the shared button size it ran to two lines and
   stood taller than the other two. In this row the buttons are set one size smaller with a little less side room,
   so each is one line (see the 760px rule below) and all three are the same height. */
.offers .offer > .btn{font-size:16px;padding:12px 16px 11px;gap:8px}
.offers .offer > .btn svg{width:18px;height:18px}
/* Two extra photos.
   .pg-own-strip  a wide photo after the first card, where the cards are one under the other (699 wide and under)
   .pg-own-ph     a photo in the fourth cell, where the cards are two across and the third would stand alone
                  (700 to 1219 wide). The shared rule that stretches a last, lone card across the row would catch it,
                  so it is told to stay in its own cell. */
.pg-own-strip,.pg-own-ph{display:none}

/* ---------- 6. Not sure which one: a photo after the step table ----------
   The homepage's own section has one photo, beside its heading. From there down to the first photo in the wall is
   more than a screen at every width, so a second photo follows the table: a wide strip over the button on tablets
   and phones, and beside the button on a desktop screen (see the 900px rule below). */
.pg-how__end > .strip{margin-top:28px}

/* ---------- 7. Proof ---------- */
.pg-wall-h{max-width:860px;margin-inline:auto}
/* the seated photo: square, and taller on a desktop screen, where it stands over one card in the middle column */
.pg-seated{--ar:1/1;--op:50% 30%}
/* From 1180 wide down the wall is two columns and its third column becomes a row of two. Three cards in that row
   leave an empty cell, so a photo fills it there. From 1181 up it isn't drawn. */
.pg-wall-fill{display:none}

/* ===================== responsive ===================== */
@media (min-width:1181px){
  .pg-seated{--ar:4/5}
}
@media (min-width:900px){
  /* Desktop: a little less room between the two cards' band and the Three Roads band, and between the video card
     and the photo under it. With the shared 120px on both sides, the stretch from the photo under the two cards to
     the photo under the video card is longer than a 900px screen. */
  .pg-coach{padding-bottom:80px}
  .pg-roads{padding-top:100px}
  .pg-side{gap:20px}
  .pg-how__end > .strip{margin-top:0}
  /* the photo after the step table stands beside the button here, in one row */
  .pg-how__end{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px;align-items:center;margin-top:60px}
  .pg-how__end .strip .frame{aspect-ratio:16/7}
  .pg-how__end .cta-row{margin-top:0}
}
/* Desktop, the two program cards side by side: the two cards share one set of rows, so the chip, the name, the
   headline, the paragraph, the check list, the proof line and the button of one card each start at the same height
   as the other card's. Without this the second card's two-line chip pushes its name and headline lower than the
   first card's. A browser that doesn't know subgrid keeps the shared layout (each card sets its own rows). */
@supports (grid-template-rows:subgrid){
  @media (min-width:900px){
    .pg-coach .prog{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:subgrid;grid-row:span 8;row-gap:0}
    .pg-coach .prog__body{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:subgrid;grid-row:span 7;row-gap:16px;justify-items:start;align-items:start}
    .pg-coach .prog__body > .pg-proof{justify-self:stretch;align-self:start}
    .pg-coach .prog__body > .btn{margin-top:0;align-self:end}
    /* Lining the rows up makes both cards 21px taller on a wide screen (the first card's one-line chip now stands
       in a two-line row). The row under the cards moves up by the same 20px or so, so the stretch from the first
       card's photo down to the photo in that row is no longer than it was. */
    .pg-fit{margin-top:28px}
  }
}
@media (max-width:1180px){
  .pg-wall-fill{display:block}
}
@media (min-width:760px){
  /* the three product buttons: one line each from here up (the cards are wide enough for the longest one) */
  .offers .offer > .btn{white-space:nowrap}
}
@media (min-width:700px) and (max-width:1219px){
  /* The product cards stay two across up to 1219 wide, with the photo in the fourth cell. The shared file puts them
     three across from 1024, and from there to 1219 a card is too narrow for the longest button on one line. */
  .offers{grid-template-columns:repeat(2,minmax(0,1fr))}
  .offers > .pg-own-ph.pg-own-ph{display:block;grid-column:auto;margin:0}
  .pg-own-ph .frame{height:100%;aspect-ratio:auto;min-height:220px}
}
@media (min-width:1024px) and (max-width:1219px){
  /* From 1024 up the fourth cell is wide. The photo takes the height of the card beside it there (it doesn't set
     the row's height itself, which would stretch that card to the picture's own shape). */
  .offers > .pg-own-ph.pg-own-ph{position:relative;min-height:240px}
  .pg-own-ph .frame{position:absolute;inset:0;height:auto;min-height:0}
  /* the frame is low and wide here, so keep the top of the photo: the 12% crop trimmed the top of his head (fix-round review, 2026-10-11) */
  .offers > .pg-own-ph.pg-own-ph .frame img{object-position:50% 0}
}
@media (min-width:700px) and (max-width:899px){
  /* tablets: a little less side room in each product card, so the longest button has its one line from 760 up */
  .offers .offer{padding-inline:22px}
}
@media (min-width:600px) and (max-width:899px){
  /* Tablets: the photo that fills its side is never thinner than 3 wide to 5 tall. On a narrow tablet the left
     column is long and the frame was three times as tall as it was wide. The figure is made a size container so
     the frame can be told how tall it may get for its own width: 100cqw is the figure's width. (A browser that
     doesn't know the unit skips the line and the frame fills the whole height, as before.) */
  .pg-side__ph{container-type:inline-size}
  .pg-side__ph .frame{max-height:calc(100cqw * 5 / 3)}
}
@media (min-width:600px) and (max-width:819px) and (min-height:660px){
  /* Up to 819 wide that limit leaves room under the photo (from about 820 the frame fills its space again). There
     the photo stays on screen while the list beside it scrolls, the way the homepage's "Who I am" photo does. */
  .pg-side__ph .frame{position:sticky;top:calc(var(--nav-h) + 24px)}
}
@media (min-width:600px) and (max-width:1023px){
  /* Up to 1023 wide the frame is narrow, and with the crop at the picture's right edge it kept his arm and cut his
     head on tablets. His head sits between 59% and 71% of the picture's width; this crop keeps all of it in the
     frame, with room on both sides. (The figure's style attribute sets the crop for the other widths, so this rule
     is on the picture itself.) */
  .pg-side__ph img{object-position:72% 30%}
}
@media (max-width:899px){
  .pg-fit{margin-top:40px;gap:28px}
  .pg-fit__ph{width:250px}
  .pg-fit .after-line{font-size:27px}
}
@media (min-width:600px) and (max-width:760px){
  /* The wall is one column here, and its photos take the column's whole width. Without this their width came from
     each picture's own size hint (the sizes list in the page), so on a screen with 2.5 or more device pixels per CSS
     pixel they were drawn about a third narrower than the cards. On other screens nothing changes. */
  .wall .mph{align-self:stretch}
}
@media (max-width:699px){
  .pg-own-strip{display:block}
}
@media (max-width:599px){
  .pg-coach .stack-head .chip{margin-bottom:22px}
  .pg-proof{grid-template-columns:48px minmax(0,1fr);gap:12px}
  .pg-proof .avatar{width:48px;height:48px}
  .pg-fit{flex-direction:column;gap:20px;margin-top:30px}
  .pg-fit__ph{width:min(290px, 84%)}
  .pg-fit .after-line{font-size:23px}
  /* phones: the photo of him comes before the video card, and it is a plain 16 to 10 picture again */
  .pg-side__ph{order:-1;display:block;min-height:0}
  .pg-side__ph .frame{aspect-ratio:var(--ar, 16/10)}
  /* phones: a little less room over the "Starting Takes Three Steps" band's headline, between the headline, its
     photo and the table, so neither the stretch down to that photo nor the one from it to the photo after the table
     is longer than the screen */
  .pg-how{padding-top:44px}
  .pg-how .how-head{gap:20px;margin-bottom:26px}
  .pg-how__end > .strip{margin-top:20px}
}
/* The two big cards carry the anchors the live site already links to: /programs/#inner-circle and
   /programs/#pressure-process (old footers, and /coaching, which is printed on the back of the Friction Audit
   manual, redirects to the second). A jump to either one stops clear of the fixed header. Added at launch, 2026-10-11. */
.prog[id]{scroll-margin-top:calc(var(--nav-h) + 24px)}