/*
  Predictable Innovation, v2: /apply, the 25-minute exploratory chat (ours, not part of the home package).
  Loaded on /apply only, after styles.css (the package file, never edited) and site.css (src/rebrand/apply/index.ts).

  The page is built from the home's own components: the hero (.hero, .hero-photo.kb, .hero-shade, .hero-body, .badge,
  .hero-cta, .hero-note, .trusted), the coach block (.coach-top, .coach-photo, .coach-text, .coach-line, .bio, .ticks),
  .outcomes and .quotes, and site.css's .dek, .h-article, .embed, .fit and .faq. This file adds only:
    - the hero's H1 one step below the home's, the dek's measure and the credential strip (.apx-creds);
    - the booking section: a 4/8 grid with the calendar on the right, the four agenda rows and the host note;
    - the label above the client results and the closing block;
    - on tablets and small laptops (761 to 1080 px): the photo faded behind the text, the booking grid stacked;
    - on phones: the hero photo in normal flow with a fade into ink, the stacked booking grid, the calendar edge to
      edge, full-width buttons.

  The rules of site.css hold here too: 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, dark surfaces only (the phone photo fades
  with mask-image, never a background gradient), every rule scoped to the page's own sections (.apx-...).
*/

/* 1. hero */
.apx-hero h1{font-size:clamp(46px,min(1.4rem + 5.2vw,11vh),104px)}
.apx-hero .hero-body{padding-top:calc(88px + clamp(24px,7vh,72px))}
.apx-hero .dek{max-width:640px}
.apx-hero .trusted{margin-top:clamp(40px,4vw,56px)}
.apx-creds{margin:0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px 32px}
.apx-creds li{display:flex;flex-direction:column;gap:8px}
.apx-creds b{font-family:var(--display);font-weight:400;font-size:clamp(34px,1rem + 1.6vw,48px);line-height:1;text-transform:uppercase;white-space:nowrap}
.apx-creds span{max-width:260px;font-size:15px;line-height:1.45;color:var(--muted)}

/* 2. booking (#apply) */
.apx-book{background:var(--ink-2)}
.apx-book-grid{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);grid-template-areas:"head cal" "info cal";grid-template-rows:auto 1fr;gap:28px clamp(40px,4.5vw,72px);align-items:start}
.apx-book-head{grid-area:head}
.apx-book-cal{grid-area:cal}
.apx-book-cal .embed{margin-top:0}
.apx-cal{width:100%;min-height:600px;overflow:auto}
html:not(.js) .apx-book-cal .embed-box{display:none}
.apx-book-info{grid-area:info}
.apx-agenda{margin:0;padding:0;list-style:none;border-top:1px solid var(--line)}
.apx-agenda li{display:grid;grid-template-columns:44px minmax(0,1fr);gap:12px;padding:16px 0;border-bottom:1px solid var(--line);font-size:17px;line-height:1.5;color:var(--muted)}
.apx-agenda b{font-family:var(--display);font-weight:400;font-size:22px;line-height:1.2;color:var(--muted-2)}
.apx-agenda strong{font-weight:700;color:var(--paper)}
.apx-host{margin-top:28px;display:flex;align-items:center;gap:16px}
.apx-host img{flex:none;display:block;width:64px;height:64px;border-radius:50%;object-fit:cover;object-position:42% 40%}
.apx-host p{display:flex;flex-direction:column;gap:2px;font-size:15px;line-height:1.45;color:var(--muted)}
.apx-host b{font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--paper)}

/* 3. who you'll talk to (#jose) */
.apx-jose .coach-photo{flex-basis:360px;max-width:440px}
.apx-jose .outcomes{border-bottom:0}
.apx-label{display:block;margin-top:clamp(48px,5vw,64px)}
.apx-label + .outcomes,.apx-label + .faq{margin-top:16px}

/* 4. before you book (#faq) and the close */
.apx-close{margin-top:clamp(56px,6vw,88px);display:flex;flex-direction:column;align-items:flex-start;gap:28px}
.apx-close .btn-row{margin-top:0}

@media (min-width:761px) and (max-width:1080px){
  .apx-hero .hero-photo img{-webkit-mask-image:linear-gradient(90deg,transparent 0%,var(--ink) 60%);mask-image:linear-gradient(90deg,transparent 0%,var(--ink) 60%)}
  .apx-hero .dek{max-width:min(640px,56vw)}
  .apx-hero .hero-cta .hero-note{flex-basis:100%}
  .apx-book-grid{grid-template-columns:minmax(0,1fr);grid-template-areas:"head" "cal" "info";grid-template-rows:auto}
}

@media (max-width:760px){
  .apx-hero .hero-photo{position:relative;width:100%;aspect-ratio:1/1}
  .apx-hero .hero-photo img{object-position:60% 6%;-webkit-mask-image:linear-gradient(180deg,var(--ink) 55%,transparent 96%);mask-image:linear-gradient(180deg,var(--ink) 55%,transparent 96%)}
  .apx-hero .hero-shade{display:none}
  .apx-hero .hero-body{margin-top:-120px;padding-top:0}
  .apx-hero h1{margin-top:20px}
  .apx-hero .dek{font-size:19px;margin-top:18px}
  .apx-hero .hero-cta{margin-top:24px}
  .apx-creds{grid-template-columns:repeat(2,minmax(0,1fr))}
  .apx-book-grid{grid-template-columns:minmax(0,1fr);grid-template-areas:"head" "cal" "info";grid-template-rows:auto}
  .apx-cal{min-height:440px}
  .apx-book-cal .embed-calendar{min-height:440px}
  .apx-book-cal .embed-box{margin-inline:calc(var(--pad-x) * -1);border-radius:0;border-left:0;border-right:0}
  .apx-jose .outcomes{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:16px}
  .apx-jose .outcomes li{padding-right:0}
  .apx-jose .outcomes b{font-size:28px}
  .apx-hero .hero-cta .btn,.apx-close .btn{width:100%;justify-content:center;padding:0 18px;font-size:16px;text-align:center}
  .apx-hero .hero-cta .btn svg,.apx-close .btn svg{display:none}
}