/*
  Predictable Innovation, v2 coaching pages (ours, not part of the home package).
  Loaded after styles.css and site.css on the hub, the five need pages, the team page, About and the workshop
  (src/rebrand/v2/services, renderPage extraCss). It only places the home's own components on these pages: the hero
  with a longer title, the kicker line, the sections on panel, the cards without photos, the client results grid, the
  story photos and the reading list. The markup each rule expects is in src/rebrand/v2/services/components.ts.

  Same rules as site.css (src/rebrand/v2/__tests__/services.test.ts checks them on this file):
    - Only the :root tokens of styles.css: no color literal, no new font family, breakpoint or easing.
    - Never a selector styles.css or site.css defines: extend the home's components, never restyle them.
    - Dark surfaces only: ink, ink-2, panel, panel-2.
    - Never the class dd on a details element: main.js takes the first details.dd as the menu dropdown.
  Contrast: red only for a headline's turn (24 px and up); small text on panel is muted (8.96:1), never muted-2;
  pink for links in body copy (5.75:1 on panel).
*/

/* ---------- hero: the home's hero with a page title (longer than the home's) ---------- */
.hero-page h1{max-width:860px;font-size:clamp(44px,1rem + 4.4vw,96px);line-height:1}
.hero-kicker{margin-top:28px;max-width:760px}
.hero-kicker .row-text{display:block;font-size:clamp(24px,1rem + 1.2vw,36px)}
.hero-kicker + h1{margin-top:20px}
.hero-facts{margin-top:24px;flex-direction:row;flex-wrap:wrap;gap:8px 28px;font-size:16px;color:var(--muted)}
.hero-by{margin-top:20px;display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px}
.hero-by b{font-size:13px;letter-spacing:.12em;text-transform:uppercase}
.hero-by span{font-size:15px;color:var(--muted)}
.hero-note b{color:var(--paper)}
/* The note wraps beside the button, as the home's two short lines do, instead of running across the photo. */
.hero-page .hero-note{max-width:440px}
.hero-page .hero-cta:last-child{padding-bottom:var(--pad-y)}
.trusted .strip-items{margin-top:0;border-top:0}
.strip-items .label{font-size:12px}
/* Phones: the photo stops at 560 px and fades into ink, so a long hero's text below it sits on ink, not on a face. */
@media (max-width:760px){
  .hero-page .hero-photo{bottom:auto;height:min(100%,560px);mask-image:linear-gradient(180deg,var(--ink) 55%,transparent)}
}

/* ---------- sections: the home's section on panel, and its headings ---------- */
.section-alt{background:var(--panel)}
.section-alt .week,.section-alt .q-box{background:var(--ink)}
.section .lede.serif{max-width:900px}
.sub-h3{margin-top:56px;font-size:clamp(30px,1rem + 1.6vw,44px);line-height:1.05}
.signs{margin-top:32px;max-width:900px}
.body-copy{margin-top:28px}
.then{margin-top:28px;max-width:760px;font-size:18px;line-height:1.6;color:var(--muted)}
.then b{margin-right:8px;color:var(--lemon);font-size:13px;letter-spacing:.12em;text-transform:uppercase}
.cta-block{margin-top:40px}
.cta-block .btn-row{margin-top:20px}

/* ---------- cards: the home's program cards without the photo (blocks, the ladder, the agenda) ---------- */
.weeks-text .week-body{flex-basis:100%}
/* Links inside a page's own lines: pink and underlined, as in the home's text links. */
.week-body a,.hero-intro a,.signs a,.fit-col a,.lede a,.then a,.case-facts a,.apply-note a,.coach-text .ticks a{color:var(--pink);text-decoration:underline;text-underline-offset:.2em}
.week-body a:hover,.hero-intro a:hover,.signs a:hover,.fit-col a:hover,.lede a:hover,.then a:hover,.case-facts a:hover,.apply-note a:hover,.coach-text .ticks a:hover{color:var(--lemon)}
.agenda-group{margin-top:40px}
.agenda-group .weeks{margin-top:16px}
.facts{max-width:760px}

/* ---------- client results: two cards side by side, or the home's slider (its arrows in the .results-head) ---------- */
.case-grid{margin-top:40px;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,460px),1fr));gap:24px}
.cases-nav{margin-top:32px;display:flex;justify-content:flex-end}
.cases-nav + .track{margin-top:20px}

/* ---------- the person: the home's coach block under a section heading ---------- */
.display.h2 + .coach-top{margin-top:40px}
.coach-name{font-size:clamp(44px,1rem + 3vw,72px);line-height:.98}
.coach-top + .stats{margin-top:40px}

/* ---------- Jose's story photos: a photo with its caption beside his pull quote ---------- */
.story{margin-top:40px;display:flex;flex-wrap:wrap;align-items:center;gap:32px 56px}
.story .figure{margin-top:0;flex:1 1 360px;max-width:560px}
.story-text{flex:1 1 360px;display:flex;flex-direction:column;gap:24px}
.pull blockquote em{color:var(--lemon)}
.pull figcaption span{font-size:15px;color:var(--muted)}
/* styles.css sets picture{display:contents}: here each picture is one box, so its hidden source is never a grid item
   or a flex gap, and the photos share one ratio (the week photos' 16:9). */
.figure picture{display:block}
.photo-row-imgs{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:16px}
.photo-row-imgs picture{display:block}
.photo-row-imgs img{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:8px}
.photo-row + .story-text{margin-top:32px}

/* ---------- the workshop's video reviews ---------- */
.embeds{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,460px),1fr));gap:0 24px}

/* ---------- the reading list: the home's rows with a guide title ---------- */
.rows-reads .row-text{font-size:clamp(22px,1rem + 1vw,32px)}
.reads-all{margin-top:28px}

/* ---------- apply: the lines under the lead, the questions as one line ---------- */
.apply-note{margin-top:14px;max-width:560px;font-size:17px;line-height:1.55;color:var(--muted)}
.q-text{font-family:var(--serif);font-style:italic;font-weight:300;font-size:22px;line-height:1.35}

/* Phones: the hero photo sits behind the kicker and the first lines; dimmed so the problem line (red at body size) stays readable. */
@media (max-width:760px){.hero-page .hero-photo{opacity:.4}}