/*
  apply-2026.css: /apply's own restyle (Restyle 2026-11, look only; the plan: docs/rebrand/v2/restyle-2026-11,
  PLAN 2.6, CRITIQUE.md, DECISIONS.md, which wins). Over marquee.css and site-apply.css, after brand-2026.css and
  site-2026.css, before site-chrome.css (src/rebrand/v2/restyle-2026.ts restyleSheetsFor). Unit D2 wrote it and checked
  it on /apply at 360 to 1440 px. Every word stays: only the look changes, and every case change is CSS (the old
  capitals go, "Acquired" alone shows in the stamp's capitals).
  - Bands (DECISIONS 2): exact selectors here, the .apx-logos strip and #results midnight, with PLAN 1.5's band values
    (the old variables site-2026.css recolors turn white, their reds orange, their rules the dark rule, the focus ring
    white). No blue band: the calendar is the main element. section#jose.apx-jose stays on bone.
  - The hero (#apply) follows the home's: its label, then the bar, then the H1 (about 42 px in the 5/12 column), the sub
    as the lead, the photo framed in 8 px corners, the calendar in a white card. From 1,081 px the calendar column
    starts level with the head (CRITIQUE 16g: nothing here moves either one down, so site-apply.js's book buttons do what
    they say). The Cal.com calendar is light, with the orange brand color (src/rebrand/apply/render.ts calEmbedScript).
  - The logo strip keeps moving (marquee.css and marquee.js untouched); only its gradient edge mask goes (DECISIONS 6).
    Its logos and the client results' stay white (DECISIONS 3: no brightness(0) on a midnight band).
  - "Your 25 minutes" is a white sheet (it keeps its tilt and its blurred lines, now in the dividers' color) beside the
    agenda as the home's numbered rows; the results are transparent cards on midnight, their numbers in the orange of
    words on midnight, "Acquired" in the stamp of the home's client logos (the stamp allowlist); the testimonials and
    Jose's own line are the home's quote; his four numbers the home's track record, on bone; the close is the home's
    closing card.
  - The phone bar (.apx-sticky): bone, a 1 px top rule and the full-width main button, which keeps its arrow
    (brand-2026.css), turned by site-apply.js to show where the calendar is (DECISIONS 6).
  - Every selector starts with .b26 and sits under #main (PLAN 1.3), so none reaches the site chrome. No shadow, no
    gradient, no filter but none, no hidden part, no capitals but the stamp, no important flag.
*/

/* ---------- the bands: the logo strip and the client results (midnight) ---------- */

.b26 #main .apx-logos,
.b26 #main #results {
  --ink: var(--midnight);
  --ink-2: var(--midnight);
  --paper: var(--white);
  --panel: transparent;
  --panel-2: transparent;
  --line: var(--b26-rule-dark);
  --muted: var(--on-dark-muted);
  --muted-2: var(--on-dark-muted);
  --red: var(--orange);
  --red-btn: var(--orange);
  --lemon: var(--orange);
  --pink: var(--white);
  --b26-focus: var(--white);
  background: var(--midnight);
  color: var(--white);
}

/* White logos stay white on midnight (site-2026.css draws the white files black on bone) */
.b26 #main .apx-logos img[src*="/v2/assets/img/logos/"],
.b26 #main #results img[src*="/v2/assets/img/logos/"] {
  filter: none;
  opacity: 1;
}

.b26 #main #results .eyebrow {
  color: var(--on-dark);
}

/* ---------- 1. the hero (#apply): the label, the bar, the H1, the lead; the photo; the calendar ---------- */

.b26 #main .apx-book {
  background: var(--bone);
}

.b26 #main .apx-book-grid {
  padding-top: clamp(48px, 6vw, 80px);
  padding-bottom: clamp(56px, 7vw, 96px);
}

/* A hero opens with its label, then the bar, then the title (PLAN principle 6) */
.b26 #main .apx-book-head .eyebrow {
  gap: 20px;
  font-size: 18px;
}

.b26 #main .apx-book-head .eyebrow::before {
  order: 1;
}

/* The page title at the low end of the home's sizes in the 5/12 column, and no smaller on tablets and phones */
.b26 #main .apx-book-head .h-article {
  margin-top: 16px;
  font-size: 42px;
  line-height: 1.04;
  letter-spacing: -0.03em;
  text-wrap: balance;
}

.b26 #main .apx-sub {
  margin-top: 24px;
  max-width: 640px;
  font-size: var(--b26-lead);
  line-height: 1.55;
  color: var(--text);
}

/* The photo in its frame, in its own colors; the calendar in a white card */
.b26 #main .apx-book-photo {
  border-radius: var(--radius);
  background: var(--border);
}

/* (its 1 px border and 8 px corners are site.css's .embed-box; on phones site-apply.css runs it edge to edge) */
.b26 #main .apx-book-cal .embed-box {
  border-color: var(--border);
  background: var(--white);
}

/* Without JavaScript the frame hides and its no-script link takes its place, level with the label */
.b26 #main .apx-book-cal .btn-row {
  margin-top: 0;
}

/* The host: the home's person row (a round photo, the name, the line) */
.b26 #main .apx-host {
  margin-top: 20px;
}

.b26 #main .apx-host p {
  gap: 2px;
  font-size: 15px;
  line-height: 1.45;
  color: var(--text-muted);
}

.b26 #main .apx-host b {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: normal;
  text-transform: none;
  color: var(--midnight);
}

/* ---------- 2. the logo strip (midnight): the label, the moving white logos ---------- */

.b26 #main .apx-logos .wrap {
  padding-top: clamp(32px, 4vw, 48px);
  padding-bottom: clamp(32px, 4vw, 48px);
}

.b26 #main .apx-logos .band-k {
  font-size: 15px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--on-dark-muted);
}

/* The band keeps moving; only its gradient edge mask goes (DECISIONS 6) */
.b26 #main .apx-logos .marq {
  margin-top: 20px;
  -webkit-mask-image: none;
  mask-image: none;
}

/* ---------- 3. what you leave with (#leave): the sheet and the 25 minutes in 4 steps ---------- */

.b26 #main .apx-lede {
  margin-top: 16px;
  max-width: 640px;
  font-size: var(--b26-lead);
  line-height: 1.55;
  color: var(--text);
}

.b26 #main .apx-leave-grid {
  margin-top: clamp(40px, 5vw, 64px);
}

/* The summary: a white sheet of paper, still tilted, its lines blurred shapes in the dividers' color */
.b26 #main .apx-sheet {
  padding: clamp(24px, 3vw, 36px) clamp(24px, 3vw, 36px) clamp(28px, 3.5vw, 40px);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--white);
  color: var(--midnight);
}

.b26 #main .apx-sheet-title {
  padding-bottom: 16px;
  border-bottom: 2px solid var(--midnight);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: clamp(24px, 2.2vw, 28px);
  line-height: 1.15;
  letter-spacing: -0.02em;
  text-transform: none;
  color: var(--midnight);
}

.b26 #main .apx-sheet-row {
  margin-top: 20px;
}

.b26 #main .apx-sheet-k {
  font-size: 15px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: normal;
  text-transform: none;
  color: var(--midnight);
}

.b26 #main .apx-blur i {
  background: var(--divider);
}

.b26 #main .apx-sheet-cap {
  font-size: 15px;
  font-weight: 400;
  line-height: 1.45;
  letter-spacing: normal;
  text-transform: none;
  color: var(--text-muted);
}

/* The 25 minutes: the home's numbered rows ("01" in Funnel Display, 1 px dividers) */
.b26 #main .apx-agenda {
  border-top: 1px solid var(--divider);
}

.b26 #main .apx-agenda li {
  grid-template-columns: 36px minmax(0, 1fr);
  align-items: baseline;
  gap: 8px 24px;
  padding: 24px 0;
  border-bottom: 1px solid var(--divider);
  font-size: 18px;
  line-height: 1.5;
  color: var(--text);
}

.b26 #main .apx-agenda b {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 22px;
  line-height: 1.2;
  color: var(--midnight);
}

.b26 #main .apx-agenda strong {
  font-weight: 600;
  color: var(--midnight);
}

/* ---------- 4. client results (#results, midnight): Encamina's bars, the five tiles ---------- */

.b26 #main .apx-enc {
  margin-top: clamp(40px, 5vw, 64px);
  padding: clamp(24px, 3vw, 40px);
  border: 1px solid var(--b26-rule-dark);
  border-radius: var(--radius);
  background: transparent;
}

.b26 #main .apx-bar-k {
  font-size: 15px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: normal;
  text-transform: none;
  color: var(--on-dark);
}

/* Before in the grey of midnight's secondary words, after in the orange; their numbers midnight on both */
.b26 #main .apx-bar-fill {
  border-radius: 6px;
  background: var(--on-dark-muted);
  color: var(--midnight);
}

.b26 #main .apx-bar-after .apx-bar-fill {
  background: var(--orange);
  color: var(--midnight);
}

.b26 #main .apx-bar-fill b {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: clamp(28px, 2.6vw, 36px);
  line-height: 1;
  letter-spacing: -0.02em;
  text-transform: none;
}

/* Under 360 px the before bar (half the track) is narrower than "$2.7M" at 28 px (production's figure of 2026-11-11,
   longer than "$3M"), which stuck out of it on the left: the numbers drop to 24 px there and the bars' side padding to
   8 px, so the figure sits inside its bar */
@media (max-width: 359px) {
  .b26 #main .apx-bar-fill {
    padding-right: 8px;
    padding-left: 8px;
  }

  .b26 #main .apx-bar-fill b {
    font-size: 24px;
  }
}

.b26 #main .apx-enc-cap {
  margin-top: 24px;
  font-size: 17px;
  line-height: 1.55;
  color: var(--on-dark);
}

.b26 #main .apx-tiles li {
  padding: clamp(24px, 2.4vw, 32px);
  border: 1px solid var(--b26-rule-dark);
  border-radius: var(--radius);
  background: transparent;
}

/* The results: the home's result numbers, in the orange of words on midnight */
.b26 #main .apx-tiles b {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--b26-stat);
  line-height: 1;
  letter-spacing: -0.03em;
  text-transform: none;
  color: var(--orange);
}

.b26 #main .apx-tiles span {
  font-size: 16px;
  line-height: 1.5;
  color: var(--on-dark);
}

/* The two acquisitions: "Acquired" as the stamp the home puts on its acquired clients' logos (PLAN 1.6), up beside
   the logo, the tile's line under both */
.b26 #main .apx-tiles .apx-acq {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 10px 12px;
}

.b26 #main .apx-acq .apx-mark {
  grid-column: 1;
  grid-row: 1;
}

.b26 #main .apx-tiles .apx-acq b {
  grid-column: 2;
  grid-row: 1;
  justify-self: start;
  margin-top: -6px;
  padding: 3px 7px;
  border: 2px solid var(--orange);
  border-radius: 3px;
  background: var(--midnight);
  color: var(--orange);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 12px;
  line-height: 1.1;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
  transform: rotate(-10deg);
}

.b26 #main .apx-acq span {
  grid-column: 1 / -1;
}

/* ---------- 5. what clients say (#clients): the video tile, the three quotes ---------- */

.b26 #main .apx-video {
  margin-top: clamp(40px, 5vw, 56px);
}

/* The video's frame: a player's midnight under the poster, and under the player once it is swapped in */
.b26 #main .apx-video .embed-box {
  border: 0;
  border-radius: var(--radius);
  background: var(--midnight);
}

/* The poster in its own colors; the play circle orange with a midnight mark; the label a midnight tag */
.b26 #main .apx-vid {
  background: var(--midnight);
  color: var(--white);
}

/* The frame clips what lies outside the tile (site.css: overflow hidden), so brand-2026.css's ring 3 px outside never
   showed on it: the ring is drawn 5 px inside, as site-apply.css did (the phase 3 review) */
.b26 #main .apx-vid:focus-visible {
  outline-offset: -5px;
}

.b26 #main .apx-vid img,
.b26 #main .apx-vid:hover img {
  opacity: 1;
}

.b26 #main .apx-vid-play {
  background: var(--orange);
  color: var(--midnight);
}

.b26 #main .apx-vid:hover .apx-vid-play {
  background: var(--b26-orange-hover);
  color: var(--midnight);
}

.b26 #main .apx-vid-label {
  right: auto;
  bottom: calc(clamp(16px, 2.5vw, 28px) + 13px);
  min-height: 0;
  padding: 8px 14px;
  border-radius: var(--radius);
  background: var(--midnight);
  color: var(--white);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: normal;
  text-transform: none;
}

.b26 #main .apx-quotes {
  margin-top: clamp(48px, 5vw, 64px);
  gap: 40px;
}

.b26 #main .apx-quotes .quote {
  gap: 20px;
  padding-top: 28px;
  border-top: 1px solid var(--divider);
}

/* Three in a row from 1,081 px: the home's quote, a size down */
.b26 #main .apx-quotes blockquote {
  font-size: clamp(22px, 1.7vw, 24px);
  line-height: 1.32;
  letter-spacing: -0.01em;
  text-wrap: pretty;
}

.b26 #main .apx-quotes figcaption {
  grid-template-columns: 48px minmax(0, 1fr);
  column-gap: 14px;
}

.b26 #main .apx-quotes figcaption img {
  width: 48px;
  height: 48px;
}

.b26 #main .apx-quotes figcaption span {
  line-height: 1.4;
}

/* ---------- 6. about Jose (#jose, bone): his line, the bio, the credentials; his four numbers ---------- */

/* After the section before it, on bone: the home's rhythm between two bone sections */
.b26 #main .apx-jose .wrap,
.b26 #main .apx-faq .wrap {
  padding-top: clamp(24px, 3vw, 40px);
}

.b26 #main .apx-jose-text {
  gap: 0;
}

/* His own line, in the home's quote ("Who you'll work with"): its turn in the orange of words on light */
.b26 #main .apx-jose .coach-line {
  margin-top: 28px;
  max-width: 640px;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: clamp(24px, 2.1vw, 28px);
  line-height: 1.32;
  letter-spacing: -0.01em;
  color: var(--midnight);
}

.b26 #main .apx-jose .coach-line em,
.b26 #main .apx-close .coach-line em {
  color: var(--orange-text);
}

.b26 #main .apx-jose .bio {
  margin-top: 16px;
  max-width: 620px;
  font-size: 18px;
  line-height: 1.55;
  color: var(--text);
}

.b26 #main .apx-jose .ticks {
  margin-top: 24px;
  font-size: 17px;
  line-height: 1.5;
  color: var(--text);
}

/* His four numbers: the home's track record, on bone */
.b26 #main .apx-label {
  font-size: 17px;
  line-height: 1.4;
}

.b26 #main .apx-label + .apx-creds {
  margin-top: 24px;
}

.b26 #main .apx-creds {
  gap: 32px;
  padding-top: 0;
  border-top: 0;
}

.b26 #main .apx-creds li {
  gap: 12px;
  padding-top: 20px;
  border-top: 1px solid var(--divider);
}

.b26 #main .apx-creds b {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--b26-stat);
  line-height: 1;
  letter-spacing: -0.03em;
  text-transform: none;
  color: var(--midnight);
}

.b26 #main .apx-creds span {
  font-size: 15px;
  line-height: 1.45;
  color: var(--text-muted);
}

/* ---------- 7. the questions (#faq) and the close: the home's closing card ---------- */

.b26 #main .apx-close {
  margin-top: clamp(48px, 5vw, 64px);
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px 40px;
  padding: clamp(24px, 3vw, 36px) clamp(24px, 3.5vw, 44px);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--white);
}

.b26 #main .apx-close .coach-line {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: clamp(24px, 2.2vw, 30px);
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--midnight);
}

.b26 #main .apx-close .btn-row {
  gap: 12px 20px;
}

.b26 #main .apx-close .hero-note {
  font-size: 15px;
  color: var(--text-muted);
}

/* ---------- the phone book bar: bone, a 1 px rule, the full-width main button with its arrow ---------- */

.b26 #main .apx-sticky {
  border-top-color: var(--border);
  background: var(--bone);
}

/* ---------- phones ---------- */

@media (max-width: 760px) {
  /* Seven lines on a phone, more than the browser balances: no last word alone on its line */
  .b26 #main .apx-book-head .h-article {
    text-wrap: pretty;
  }

  .b26 #main .apx-sheet {
    padding: 24px 22px 28px;
  }

  .b26 #main .apx-agenda li {
    grid-template-columns: 30px minmax(0, 1fr);
    gap: 8px 16px;
    font-size: 17px;
  }

  .b26 #main .apx-vid-label {
    bottom: calc(clamp(16px, 2.5vw, 28px) + 8px);
    font-size: 14px;
  }

  .b26 #main .apx-close {
    align-items: flex-start;
  }
}