/* The hub pages: /for-teams and /for-teams/approvers (October 27), and /for-you, the individual hub (October 28). Both open with a fork (one question, a few doors;
   src/door/fork.js) and show only the picked path. Load after door.css; this file adds what the two pages need: the fork, the
   path cards and their call bands, the AI door's branch to AI for GTM, the requester's note, the approver's questions and the SAMPLE certificate. */

/* headings below the page title carry no browser margins here; each adds only the space it means (Brand Design Director M7) */
:where(.door--teams, .door--approvers) :where(h3, h4) { margin: 0; }

/* ------------------------------------------------------------------ first screen: headline, lede and the fork */
.fhero { padding: 0 var(--pad-x) 9vh; }
/* /for-teams holds the first screen before a pick (a quiet zone that keeps the bowl's gold below it); the budget page does not,
   since its card is short (Brand Design Director M2). Once a door is picked the path starts right under the card (M1). */
html.has-fork .door--teams .fhero { min-height: calc(100svh - 92px); }
html.has-fork .fhero:has(.fdoor__in:checked) { min-height: 0; padding-bottom: clamp(36px, 6vh, 64px); }
/* /for-you's fork card is shorter (no second question), so the same hold left a band of empty plaster above "Who you'd work
   with" (402px at 1440 against /for-teams' 230px; Aylam, October 28: "should be smaller, like in the for-teams section") */
html.has-fork .door--you .fhero { min-height: 0; padding-bottom: 25vh; } /* the same space as /for-teams at 1440x900 */
.fhero__head { padding: clamp(28px, 4.4vh, 52px) 0 clamp(28px, 4vh, 44px); max-width: 1180px; }
.fhero__title { font-weight: 500; font-size: clamp(42px, 3.8vw, 56px); line-height: 1.05; letter-spacing: -.028em; text-wrap: balance; }
.fhero__lede { margin-top: 20px; font-size: 20px; line-height: 1.5; color: var(--charcoal-soft); max-width: 36em; text-wrap: pretty; }
.fhero__call { margin-top: 14px; font-size: 17px; }

/* the fork card: the question left on the page's 4:8 line, the doors right as rows between hairlines (finish review: rows, not tiles) */
.fork { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 18px 4vw; align-items: start; scroll-margin-top: 24px;
  padding: clamp(22px, 2.2vw, 32px) clamp(24px, 2.8vw, 40px); background: #FBF8F1; border: 1px solid rgba(17,20,17,.09); border-radius: 18px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.85), 0 18px 40px rgba(37,42,38,.13), 0 2px 6px rgba(37,42,38,.08); }
.fork__ask { padding-top: 14px; font-size: clamp(22px, 1.75vw, 26px); font-weight: 500; line-height: 1.25; letter-spacing: -.016em; text-wrap: balance; }
.fork__doors { margin: 0; padding: 0; border: 0; min-width: 0; }
/* /for-you: the headline is the question (Aylam, October 28), so the card's left column holds the lede and the quiet call link,
   on the same line as the doors' first row, where /for-teams puts its question */
.fork__intro { padding-top: 14px; }
.fork__intro .fhero__lede { margin-top: 0; font-size: clamp(18px, 1.4vw, 20px); max-width: 20em; }
.door--you .fhero__head { padding-bottom: clamp(22px, 3.2vh, 36px); }
.fdoor { position: relative; isolation: isolate; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr) 20px; gap: 6px 28px; align-items: baseline;
  margin: 0 -14px 0 -18px; padding: 18px 14px 18px 26px; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.fdoor + .fdoor { border-top: 1px solid rgba(17,20,17,.09); }
.fdoor__in { position: absolute; z-index: 1; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.fdoor__name { font-size: clamp(19px, 1.45vw, 22px); font-weight: 500; line-height: 1.25; letter-spacing: -.012em; color: var(--ink); }
.fdoor__line { font-size: 16.5px; line-height: 1.45; color: var(--charcoal-soft); text-wrap: pretty; }
.fdoor__go { align-self: center; display: flex; }
/* the budget page: under each door's line, a short preview of what it opens (Brand Design Director M2b; Aylam's yes, October 27) */
.fdoor__peek { display: grid; gap: 2px; margin-top: 10px; font-size: 15px; line-height: 1.45; color: var(--charcoal-soft); }
.fdoor__peek span { display: flex; gap: 10px; }
.fdoor__peek span::before { content: ""; flex: none; width: 5px; height: 5px; margin-top: calc(.5lh - 2.5px); border-radius: 50%; background: var(--slate); }
.fdoor__go svg { width: 18px; height: 18px; fill: none; stroke: var(--slate); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
  transition: transform 160ms var(--ease-out); }
/* hover and press tint start right of the seam, as on the checklist rows */
.fdoor::after { content: ""; position: absolute; z-index: -1; inset: 4px 0 4px 8px; border-radius: 10px; transition: background-color 160ms ease; }
@media (hover: hover) and (pointer: fine) {
  .fdoor:hover::after { background: rgba(23,48,56,.05); }
  .fdoor:hover .fdoor__go svg { transform: translateX(3px); }
}
.fdoor:active::after { background: rgba(23,48,56,.08); }
/* the picked door: the checklist's tick seam, 3px of flat gold on the row's left edge (gold marks the visitor's pick) */
.fdoor::before { content: ""; position: absolute; left: 0; top: 20px; bottom: 20px; width: 3px; border-radius: 2px; background: var(--gold);
  transform: scaleY(0); transition: transform 240ms var(--ease-out); }
.fdoor:has(.fdoor__in:checked)::before { transform: scaleY(1); }
.fdoor:has(.fdoor__in:checked) .fdoor__go svg { transform: rotate(90deg); }
.fdoor:has(.fdoor__in:focus-visible)::after { outline: 2px solid var(--slate); outline-offset: -2px; }
.fork__jumps ul { display: flex; flex-wrap: wrap; gap: 8px 26px; list-style: none; padding: 14px 0 0; }
.fork__jumps a { font-size: 18px; font-weight: 500; color: var(--ink); text-decoration: underline; text-decoration-color: rgba(17,20,17,.32); text-underline-offset: .3em; }
html.no-js .fork__doors { display: none; }
html:not(.no-js) .fork__jumps { display: none; }

/* ------------------------------------------------------------------ a path: shows only once its door is picked */
.path { scroll-margin-top: 24px; }
.path[hidden] { display: none; }
.path.is-in { animation: path-in 280ms var(--ease-out) both; }
@keyframes path-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.path__h { font-size: clamp(30px, 2.6vw, 40px); font-weight: 500; letter-spacing: -.022em; line-height: 1.12; text-wrap: balance; }

/* ------------------------------------------------------------------ the call band: obsidian concrete under the dark grade, the gold action,
   across the foot of a path's card (the start line left, the action and its line right) */
.pcall { position: relative; isolation: isolate; color: var(--white); padding: clamp(28px, 3vw, 42px) clamp(26px, 3vw, 44px); background-color: var(--canvas);
  background-image: linear-gradient(180deg, rgba(9,11,9,.6) 0%, rgba(9,11,9,.82) 100%), url(/public/plates/d1-slab.jpg); background-size: cover; background-position: center; }
.pcall__start { font-size: clamp(22px, 1.75vw, 27px); font-weight: 500; line-height: 1.3; letter-spacing: -.012em; text-wrap: balance; max-width: 20em; }
.pcall__line { margin-top: 14px; font-size: 15px; line-height: 1.5; color: var(--warm-gray); max-width: 24em; text-wrap: pretty; }
.pcall :focus-visible { outline-color: var(--champagne); }
.pcall--foot { grid-area: call; grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "start btn" ". line";
  gap: 0 48px; align-items: start; }
.pcall--foot .pcall__start { grid-area: start; align-self: center; }
.pcall--foot .btn--gold { grid-area: btn; align-self: start; justify-self: end; } /* as wide as its words (November 1) */
.pcall--foot .pcall__line { grid-area: line; justify-self: end; max-width: 22em; }
/* a free-standing slab under a path's content (the budget page) */
.pcall--band { margin: 4vh var(--pad-x) 0; border-radius: 18px; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 14px 48px; align-items: center;
  box-shadow: 0 18px 40px rgba(37,42,38,.16), 0 2px 6px rgba(37,42,38,.1); }
.pcall--band .btn--gold { grid-row: 1 / 3; grid-column: 2; }
.pcall--band .pcall__line { margin-top: 0; }

/* ------------------------------------------------------------------ the page column line (4:8): the story, how we'd work, the note */
.pline { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 22px 6vw; align-items: start;
  margin: 0 var(--pad-x); padding: 12vh 0; border-top: 1px solid rgba(17,20,17,.1); }
.pline__h { font-size: clamp(30px, 2.6vw, 40px); font-weight: 500; letter-spacing: -.022em; line-height: 1.12; text-wrap: balance; }
.pline__lead { margin-top: 16px; font-size: 18px; line-height: 1.5; color: var(--graphite); max-width: 26em; text-wrap: pretty; }
.pline__body > p { font-size: 19px; line-height: 1.55; color: var(--graphite); max-width: 34em; text-wrap: pretty; }
.pline__body > p + p { margin-top: 14px; }
@media (min-width: 981px) { .pline__side { position: sticky; top: 32px; } }
/* the AE story reads a step larger, in his voice */
.ftstory .pline__body > p { font-size: clamp(19px, 1.5vw, 22px); line-height: 1.5; letter-spacing: -.008em; color: var(--ink); }
.ftstory .pline__body > p + p { margin-top: 18px; color: var(--graphite); }
.steps { list-style: none; padding: 0; margin: 0; }
.step { padding: 22px 0; border-top: 1px solid rgba(17,20,17,.1); }
.step:last-child { border-bottom: 1px solid rgba(17,20,17,.1); }
.step__h { font-size: clamp(22px, 1.8vw, 26px); font-weight: 500; letter-spacing: -.016em; line-height: 1.25; }
.step__meta { margin-left: 10px; font-size: 15px; font-weight: 400; letter-spacing: 0; color: var(--slate); white-space: nowrap; }
.step__line { margin-top: 8px; font-size: 17.5px; line-height: 1.5; color: var(--charcoal-soft); max-width: 36em; text-wrap: pretty; }
.steps__cert { margin-top: 20px; font-size: 17px; font-weight: 500; color: var(--ink); }

/* ------------------------------------------------------------------ the other paths: one card, the intro left, the offer's own structure
   right, the call band across the foot */
.pcard { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); grid-template-areas: "intro body" "call call";
  margin: 0 var(--pad-x); background: #FBF8F1; border: 1px solid rgba(17,20,17,.09); border-radius: 18px; overflow: hidden;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.85), 0 18px 40px rgba(37,42,38,.13), 0 2px 6px rgba(37,42,38,.08); }
html.no-js .path + .path .pcard { margin-top: 12vh; }
/* the budget page without JavaScript: the approver's path starts a section of its own under a hairline (Brand Design Director M1) */
html.no-js .door--approvers .path + .path { padding-top: 12vh; }
html.no-js .door--approvers .path + .path::before { content: ""; display: block; margin: 0 var(--pad-x) 12vh; border-top: 1px solid rgba(17,20,17,.1); }
.pcard__intro { grid-area: intro; padding: clamp(30px, 3vw, 44px) 0 clamp(30px, 3vw, 44px) clamp(24px, 3.2vw, 46px); }
.pcard__body { grid-area: body; padding: clamp(30px, 3vw, 44px) clamp(24px, 3.2vw, 46px) clamp(30px, 3vw, 44px) 4vw; }
.pcard__p { margin-top: 16px; font-size: 18px; line-height: 1.55; color: var(--graphite); max-width: 30em; text-wrap: pretty; }
.pcard__p + .pcard__p { margin-top: 10px; }
.pcard__more { margin-top: 18px; font-size: 17px; }
.pcard__note { margin-top: 22px; font-size: 16.5px; font-weight: 500; color: var(--ink); }
.pcard .quote--panel { margin-top: 26px; }
/* /for-you: a quiet second way in under a path's structure (one-on-one coaching), under a hairline */
.palt { margin-top: 26px; padding-top: 18px; border-top: 1px solid rgba(17,20,17,.1); max-width: 40em; }
.palt__h { font-size: 18px; font-weight: 500; line-height: 1.3; letter-spacing: -.01em; }
.palt__line { margin-top: 6px; font-size: 16.5px; line-height: 1.5; color: var(--charcoal-soft); text-wrap: pretty; }
/* AI: the three levels on one track, numbers on a hairline as on the level check's ladder, with no gold (nothing is picked) */
.lad3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 28px; list-style: none; padding: 0; margin: 0; }
.lad3__i { position: relative; padding-top: 34px; }
.lad3__i::before { content: ""; position: absolute; left: 0; right: -28px; top: 10px; height: 1px; background: rgba(17,20,17,.18); }
.lad3__i:last-child::before { right: 0; }
.lad3__n { position: absolute; top: 0; left: 0; padding-right: 10px; font-size: 15px; font-weight: 500; line-height: 20px; color: var(--ink); background: #FBF8F1; }
.lad3__h { font-size: clamp(20px, 1.6vw, 23px); font-weight: 500; line-height: 1.25; letter-spacing: -.014em; text-wrap: balance; }
.lad3__for { margin-top: 10px; font-size: 16px; line-height: 1.5; color: var(--charcoal-soft); text-wrap: pretty; }
/* leadership: the four topics with their Start lines, two by two between hairlines */
.grid4 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 32px; list-style: none; padding: 0; margin: 0; }
.grid4__i { padding: 16px 0 18px; border-top: 1px solid rgba(17,20,17,.1); }
.grid4__i:nth-last-child(-n+2) { border-bottom: 1px solid rgba(17,20,17,.1); }
.grid4__h { font-size: 20px; font-weight: 500; line-height: 1.25; letter-spacing: -.012em; }
.grid4__line { margin-top: 6px; font-size: 16.5px; line-height: 1.45; color: var(--charcoal-soft); text-wrap: pretty; }
/* Beyond Success: the three rooms in a row */
.rooms3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 28px; list-style: none; padding: 0; margin: 0; }
.rooms3__i { padding-top: 16px; border-top: 1px solid rgba(17,20,17,.14); }
.rooms3__h { font-size: clamp(22px, 1.8vw, 26px); font-weight: 500; line-height: 1.2; letter-spacing: -.016em; }
.rooms3__meta { display: block; margin-top: 4px; font-size: 15px; font-weight: 400; letter-spacing: 0; color: var(--slate); }
.rooms3__line { margin-top: 12px; font-size: 16.5px; line-height: 1.5; color: var(--charcoal-soft); text-wrap: pretty; }
/* the plain data line for the AI programs (Aylam, October 27), under the format line */
.pcard__data { margin-top: 8px; font-size: 16px; line-height: 1.5; color: var(--charcoal-soft); max-width: 36em; text-wrap: pretty; }
/* AI for GTM, the branch for sales and GTM teams: one row between hairlines that leads to its own page (a door, so the door's
   Slate arrow; no gold, nothing is picked here) */
.branch { position: relative; isolation: isolate; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "head go" "line go";
  gap: 2px 28px; align-items: center; margin: 26px -14px 0; padding: 18px 14px 20px; border-top: 1px solid rgba(17,20,17,.12); border-bottom: 1px solid rgba(17,20,17,.12);
  color: var(--ink); text-decoration: none; -webkit-tap-highlight-color: transparent; }
.branch::after { content: ""; position: absolute; z-index: -1; inset: 4px 0; border-radius: 10px; transition: background-color 160ms ease; }
.branch__head { grid-area: head; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 14px; }
.branch__for { font-size: 15px; color: var(--slate); }
.branch__name { font-size: clamp(21px, 1.7vw, 24px); font-weight: 500; letter-spacing: -.014em; line-height: 1.25; }
.branch__line { grid-area: line; font-size: 16.5px; line-height: 1.45; color: var(--charcoal-soft); text-wrap: pretty; }
.branch__go { grid-area: go; display: inline-flex; align-items: center; gap: 10px; font-size: 16.5px; font-weight: 500;
  text-decoration: underline; text-decoration-color: rgba(17,20,17,.32); text-underline-offset: .3em; }
.branch__go svg { flex: none; width: 18px; height: 18px; fill: none; stroke: var(--slate); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
  transition: transform 160ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .branch:hover::after { background: rgba(23,48,56,.05); }
  .branch:hover .branch__go { text-decoration-color: var(--ink); }
  .branch:hover .branch__go svg { transform: translateX(3px); }
}
.branch:active::after { background: rgba(23,48,56,.08); }
.branch:focus-visible { outline-offset: -2px; }
.pcard__lbl { margin-bottom: 14px; font-size: 16px; font-weight: 500; color: var(--charcoal-soft); }
.pcard__lbl--leave { margin-top: 30px; }
.leave { list-style: none; padding: 0; margin: 0; max-width: 40em; }
.leave li { display: flex; gap: 14px; padding: 5px 0; font-size: 17px; line-height: 1.5; color: var(--graphite); text-wrap: pretty; }
.leave li::before { content: ""; flex: none; width: 6px; height: 6px; margin-top: calc(.5lh - 3px); border-radius: 50%; background: var(--slate); }

/* without JavaScript every path shows: only the first keeps a gold button (one gold action per screen) */
html.no-js .path + .path .btn--gold { width: auto; justify-content: flex-start; padding: 6px 0; background: none; box-shadow: none;
  color: var(--white); font-size: 17px; text-decoration: underline; text-decoration-color: rgba(247,243,234,.4); text-underline-offset: .3em; }
html.no-js .path + .path .btn--gold svg { stroke: var(--white); }
html.no-js .path + .path .btn--gold:hover { transform: none; }

/* ------------------------------------------------------------------ the budget page: the requester's note */
.pline--top { border-top: 0; padding-top: 0; }
/* the panel is the letter: the chips above a hairline, then the subject and body on the same paper (finish review: not two boxes) */
.note { padding: clamp(22px, 2.4vw, 34px); background: #FBF8F1; border: 1px solid rgba(17,20,17,.09); border-radius: 18px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.85), 0 18px 40px rgba(37,42,38,.13), 0 2px 6px rgba(37,42,38,.08); }
.note__set { display: flex; flex-wrap: wrap; gap: 16px 28px; margin-bottom: 22px; }
.nchips { margin: 0; padding: 0; border: 0; min-width: 0; }
.nchips__l { padding: 0; margin-bottom: 8px; font-size: 15px; font-weight: 500; color: var(--charcoal-soft); }
.nchips__row { display: flex; flex-wrap: wrap; gap: 8px; }
html.no-js .note__set { display: none; }
.chip { position: relative; display: inline-flex; -webkit-tap-highlight-color: transparent; }
.chip__in { position: absolute; z-index: 1; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.chip__t { display: block; padding: 10px 15px; font-size: 16px; line-height: 1.3; color: var(--graphite); background: rgba(255,255,255,.55);
  border: 1px solid rgba(17,20,17,.45); border-radius: 10px; transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease; }
.chip__in:checked + .chip__t { color: var(--white); background: var(--ink); border-color: var(--ink); }
.chip__in:focus-visible + .chip__t { outline: 2px solid var(--slate); outline-offset: 3px; }
@media (hover: hover) and (pointer: fine) { .chip:hover .chip__in:not(:checked) + .chip__t { color: var(--ink); border-color: rgba(17,20,17,.8); } }
.chip:active .chip__t { transform: translateY(1px); }
.note__mail { padding-top: 22px; border-top: 1px solid rgba(17,20,17,.1); }
html.no-js .note__mail { padding-top: 0; border-top: 0; }
.note__subj { padding-bottom: 14px; margin-bottom: 16px; border-bottom: 1px solid rgba(17,20,17,.09); font-size: 17.5px; font-weight: 500; line-height: 1.4; color: var(--ink); }
.note__sk { font-weight: 400; color: var(--slate); }
.note__body p { font-size: 17px; line-height: 1.6; color: var(--graphite); max-width: 40em; text-wrap: pretty; }
.note__body p + p { margin-top: 12px; }
.note__act { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; margin-top: 22px; }
.note__copy svg { width: 18px; height: 18px; fill: none; stroke: var(--white); stroke-width: 1.6; }
.note__copy[hidden] { display: none; }
.note__say { font-size: 15.5px; line-height: 1.45; color: var(--ink); }
.note__say:empty { display: none; }
.note__nojs { font-size: 15.5px; color: var(--charcoal-soft); }
html:not(.no-js) .note__nojs { display: none; }
.facts { margin-top: 6vh; }
.facts__h { font-size: 22px; font-weight: 500; letter-spacing: -.012em; }
.facts__list { margin: 14px 0 0; }
.facts__list > div { display: grid; grid-template-columns: minmax(0, 9em) minmax(0, 1fr); gap: 4px 24px; padding: 14px 0; border-top: 1px solid rgba(17,20,17,.1); }
.facts__list > div:last-child { border-bottom: 1px solid rgba(17,20,17,.1); }
.facts__list dt { font-size: 15px; font-weight: 500; color: var(--slate); padding-top: 2px; }
.facts__list dd { margin: 0; font-size: 17px; line-height: 1.5; color: var(--graphite); text-wrap: pretty; }
.facts__more { margin-top: 18px; font-size: 17px; }

/* ------------------------------------------------------------------ the approver's questions: an index that follows the reader
   (the current question in Ink 500 with a Slate seam, not gold: reading is not a pick) */
.qs { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 0 6vw; margin: 0 var(--pad-x); }
.qs__index ol { list-style: none; padding: 0; margin: 0; }
@media (min-width: 981px) { .qs__index { position: sticky; top: 32px; align-self: start; } }
.qs__index li + li { border-top: 1px solid rgba(17,20,17,.08); }
.qs__index a { position: relative; display: block; padding: 13px 8px 13px 20px; font-size: 17px; line-height: 1.35; color: var(--charcoal-soft);
  text-decoration: none; transition: color 160ms ease; }
.qs__index li:first-child a { padding-top: 4px; }
.qs__index a::before { content: ""; position: absolute; left: 0; top: 14px; bottom: 14px; width: 3px; border-radius: 2px; background: var(--slate);
  transform: scaleY(0); transition: transform 200ms var(--ease-out); }
.qs__index li:first-child a::before { top: 5px; }
.qs__index a[aria-current] { color: var(--ink); font-weight: 500; }
.qs__index a[aria-current]::before { transform: scaleY(1); }
@media (hover: hover) and (pointer: fine) { .qs__index a:hover { color: var(--ink); } }
.qa2 { scroll-margin-top: 112px; padding: 0 0 9vh; }
.qa2 + .qa2 { padding-top: 7vh; border-top: 1px solid rgba(17,20,17,.1); }
.qa2__h { font-size: clamp(28px, 2.3vw, 36px); font-weight: 500; letter-spacing: -.02em; line-height: 1.15; text-wrap: balance; margin-bottom: 18px; }
.qa2__p { font-size: 18px; line-height: 1.55; color: var(--graphite); max-width: 36em; text-wrap: pretty; }
.qa2__p + .qa2__p { margin-top: 12px; }
.progs { list-style: none; padding: 0; margin: 22px 0 0; max-width: 40em; }
.progs li { padding: 14px 0; border-top: 1px solid rgba(17,20,17,.1); font-size: 17.5px; line-height: 1.5; color: var(--graphite); text-wrap: pretty; }
.progs li:last-child { border-bottom: 1px solid rgba(17,20,17,.1); }
.progs b { display: block; margin-bottom: 2px; font-weight: 500; color: var(--ink); }

/* the program tabs: the topic rail's idiom, a flat gold seam under the program the reader picked */
.ptabs__rail { position: relative; display: flex; flex-wrap: wrap; border-bottom: 1px solid rgba(17,20,17,.12); }
.ptabs__rail[hidden] { display: none; }
.ptab { min-height: 52px; padding: 12px 18px 14px; font: inherit; font-size: 16.5px; color: var(--charcoal-soft); background: none; border: 0; cursor: pointer;
  border-radius: 8px 8px 0 0; transition: color 160ms ease, background-color 160ms ease; }
.ptab:first-child { padding-left: 2px; }
.ptab[aria-selected="true"] { color: var(--ink); font-weight: 500; }
.ptab:focus-visible { outline-offset: -4px; }
@media (hover: hover) and (pointer: fine) { .ptab[aria-selected="false"]:hover { color: var(--ink); background: rgba(23,48,56,.05); } }
.ptabs__rail.is-set .rail__seam { opacity: 1; }
.lp { padding-top: 24px; }
.lp[hidden] { display: none; }
.lp:focus-visible { outline-offset: 6px; }
.lp__h { font-size: 22px; font-weight: 500; letter-spacing: -.012em; margin-bottom: 12px; }
html:not(.no-js) .lp__h { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
html.no-js .lp + .lp { margin-top: 28px; border-top: 1px solid rgba(17,20,17,.1); }
.lp__runs { font-size: 18px; line-height: 1.55; color: var(--graphite); max-width: 36em; text-wrap: pretty; }
.lp__runs b { font-weight: 500; color: var(--ink); }
.lp__named { list-style: none; padding: 0; margin: 16px 0 0; max-width: 38em; }
.lp__named li { padding: 12px 0; border-top: 1px solid rgba(17,20,17,.08); font-size: 17px; line-height: 1.5; color: var(--charcoal-soft); text-wrap: pretty; }
.lp__named li:last-child { border-bottom: 1px solid rgba(17,20,17,.08); }
.lp__named b { display: block; font-weight: 500; color: var(--ink); }
.lp__lead { margin-top: 22px; font-size: 16px; font-weight: 500; color: var(--ink); }
.lp__end { list-style: none; padding: 0; margin: 10px 0 0; max-width: 38em; }
.lp__end li { display: flex; gap: 14px; padding: 6px 0; font-size: 17px; line-height: 1.5; color: var(--graphite); text-wrap: pretty; }
.lp__end li::before { content: ""; flex: none; width: 6px; height: 6px; margin-top: calc(.5lh - 3px); border-radius: 50%; background: var(--slate); }
.lp__levels { display: grid; gap: 18px; margin-top: 16px; }
.lp__level { padding-top: 14px; border-top: 1px solid rgba(17,20,17,.08); }
.lp__lh { font-size: 19px; font-weight: 500; }
.lp__lh span { margin-left: 8px; font-weight: 400; color: var(--charcoal-soft); }

/* ------------------------------------------------------------------ the SAMPLE certificate, drawn in HTML from the approved sample
   (October 8). A pictured document keeps its own gold and type, at landscape proportions only (Brand Design Director, October 27):
   the thin gold rule and title bar are the real certificate's. No hours, prices or contact details. It scales with its column like
   a document (container units) and reflows into one readable column when narrow, where the long rule turns Ink (M5). */
.qa2__split { display: grid; gap: 30px; }
.cert { margin: 6px 0 0; container-type: inline-size; max-width: 860px; }
.cert__paper { position: relative; overflow: hidden; aspect-ratio: 1056 / 816; padding: 6.2cqi 6.8cqi 5cqi; background: #F7F3EA; color: var(--ink);
  border: 1px solid rgba(17,20,17,.35); border-radius: 6px; box-shadow: 0 18px 40px rgba(37,42,38,.14), 0 2px 6px rgba(37,42,38,.08); }
.cert__paper::before { content: ""; position: absolute; inset: 1.1cqi; border: 1px solid rgba(218,165,32,.85); border-radius: 3px; pointer-events: none; }
.cert__logo { width: 8.6cqi; height: auto; }
.cert__title { margin-top: 3.4cqi; font-size: 4.3cqi; font-weight: 500; letter-spacing: -.02em; line-height: 1.1; }
.cert__title::after { content: ""; display: block; width: 6cqi; height: .3cqi; margin-top: 1.6cqi; background: var(--gold); border-radius: 1px; }
.cert__k { margin-top: 2.6cqi; font-size: 1.5cqi; color: var(--charcoal-soft); }
.cert__name { margin-top: .6cqi; padding-bottom: 1.3cqi; max-width: 58%; border-bottom: 1px solid rgba(17,20,17,.25); font-size: 3.2cqi; font-weight: 500; letter-spacing: -.015em; }
.cert__done { margin-top: 2cqi; font-size: 1.65cqi; line-height: 1.5; max-width: 78%; }
.cert__done b { font-weight: 500; }
.cert__cols { display: grid; grid-template-columns: 1.4fr 1fr; gap: 4cqi; margin-top: 3cqi; }
.cert__cols--one { grid-template-columns: 1fr; }
.cert__cols--one .cert__facts { display: grid; grid-template-columns: repeat(2, minmax(0, max-content)); gap: 1.2cqi 7cqi; }
.cert__cols--one .cert__facts > div + div { margin-top: 0; }
.cert__cols [hidden] { display: none; }
.cert__lbl { font-size: 1.15cqi; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--slate); margin-bottom: .9cqi; }
.cert__areas { margin: 0; padding-left: 1.7cqi; font-size: 1.32cqi; line-height: 1.55; color: var(--graphite); }
.cert__facts { margin: 0; }
.cert__facts > div + div { margin-top: .9cqi; }
.cert__facts dt { font-size: 1.32cqi; color: var(--charcoal-soft); }
.cert__facts dd { margin: 0; font-size: 1.4cqi; font-weight: 500; }
.cert__facts dd[data-cert-id] { white-space: nowrap; }
.cert__foot { position: absolute; left: 6.8cqi; right: 6.8cqi; bottom: 4.6cqi; display: flex; justify-content: space-between; align-items: flex-end; gap: 4cqi; }
.cert__sign { padding-top: 1cqi; min-width: 30%; border-top: 1px solid rgba(17,20,17,.6); font-size: 1.32cqi; line-height: 1.4; color: var(--graphite); }
.cert__sign b { display: block; font-weight: 500; color: var(--ink); }
.cert__fine { max-width: 40%; font-size: 1.05cqi; line-height: 1.45; color: var(--charcoal-soft); text-align: right; }
.cert__mark { position: absolute; left: 50%; top: 52%; transform: translate(-50%, -50%) rotate(-24deg); font-size: 15cqi; font-weight: 500; letter-spacing: .06em;
  color: rgba(17,20,17,.075); pointer-events: none; user-select: none; }
.cert__cap { margin-top: 12px; font-size: 14.5px; color: var(--charcoal-soft); }
/* narrow (below a 760px column, where the landscape text would drop under 10px; Brand Design Director O5): one column at readable
   sizes, the paper as tall as its words, the long rule in Ink, only the short title bar in gold */
@container (max-width: 760px) {
  .cert__paper { aspect-ratio: auto; padding: 34px 30px 28px; }
  .cert__paper::before { inset: 8px; border-color: rgba(17,20,17,.18); }
  .cert__logo { width: 64px; }
  .cert__title { margin-top: 18px; font-size: 28px; }
  .cert__title::after { width: 44px; height: 2px; margin-top: 10px; }
  .cert__k { margin-top: 18px; font-size: 14.5px; }
  .cert__name { margin-top: 4px; padding-bottom: 8px; max-width: none; font-size: 24px; }
  .cert__done { margin-top: 12px; font-size: 15px; max-width: none; }
  .cert__cols { grid-template-columns: 1fr; gap: 18px; margin-top: 20px; }
  .cert__cols--one .cert__facts { gap: 8px 28px; }
  .cert__lbl { font-size: 11.5px; margin-bottom: 6px; }
  .cert__areas { padding-left: 18px; font-size: 14px; }
  .cert__facts > div + div { margin-top: 6px; }
  .cert__facts dt { font-size: 13.5px; }
  .cert__facts dd { font-size: 14.5px; }
  .cert__foot { position: static; flex-direction: column; align-items: flex-start; gap: 14px; margin-top: 24px; }
  .cert__sign { font-size: 14px; min-width: 60%; padding-top: 8px; }
  .cert__fine { max-width: none; font-size: 12.5px; text-align: left; }
  .cert__mark { font-size: 80px; top: 46%; }
}
@container (max-width: 420px) {
  .cert__paper { padding: 28px 22px 24px; }
  .cert__title { font-size: 25px; }
  .cert__name { font-size: 21px; }
  .cert__cols--one .cert__facts { grid-template-columns: 1fr; gap: 6px; }
  .cert__mark { font-size: 64px; }
}

/* ------------------------------------------------------------------ back to For Teams; the budget page is short before a pick, so its
   footer is held to the screen's bottom (Brand Design Director R1) */
body.door--approvers { min-height: 100svh; display: flex; flex-direction: column; }
body.door--approvers > main { flex: 1; }
.back { margin: 0 var(--pad-x); padding: 9vh 0 12vh; font-size: 17px; }
/* before a pick the budget page is only its card, so the way back sits right under it */
html.has-fork:not([data-for]) .door--approvers .back { padding-top: 0; }

/* ------------------------------------------------------------------ tablet and phone */
@media (max-width: 980px) {
  .fork { grid-template-columns: 1fr; }
  .fork__ask { padding-top: 0; }
  .fork__intro { padding-top: 0; padding-bottom: 12px; }
  .fork__intro .fhero__lede { max-width: 36em; }
  .pcall--foot { grid-template-columns: 1fr; grid-template-areas: "start" "btn" "line"; }
  .pcall--foot .btn--gold { margin-top: 24px; justify-self: start; }
  .pcall--foot .pcall__line { justify-self: start; }
  .pline, .qs { grid-template-columns: 1fr; }
  .pcard { grid-template-columns: 1fr; grid-template-areas: "intro" "body" "call"; }
  .pcard__intro { padding: clamp(28px, 3vw, 40px) clamp(24px, 3.2vw, 46px) 8px; }
  .pcard__body { padding: 22px clamp(24px, 3.2vw, 46px) clamp(28px, 3vw, 40px); }
  .qs__index { margin-bottom: 6vh; }
  .pcall--band { grid-template-columns: 1fr; }
  .pcall--band .btn--gold { grid-row: auto; grid-column: auto; margin-top: 10px; justify-self: start; }
}
@media (max-width: 700px) {
  html.has-fork .door--teams .fhero { min-height: calc(100svh - 76px); }
  html.has-fork .door--you .fhero { min-height: 0; padding-bottom: 12vh; } /* and at 390x844 */
  .fhero { padding-bottom: 7vh; }
  .fhero__head { padding: 26px 0 22px; }
  .fhero__title { font-size: clamp(34px, 10.2vw, 42px); }
  .fhero__lede { font-size: 18px; margin-top: 14px; }
  .fhero__call { font-size: 16.5px; margin-top: 10px; }
  .fork { padding: 20px 18px 10px; gap: 6px; }
  .fork__ask { font-size: 21px; }
  /* phones: each door's name over its line, compact, so all four names show at 390x844 (Brand Design Director O2) */
  .fdoor { grid-template-columns: minmax(0, 1fr) 18px; gap: 2px 12px; margin: 0 -8px 0 -10px; padding: 13px 8px 13px 18px; }
  .fdoor__name { grid-column: 1; font-size: 18px; }
  .fdoor__line { grid-column: 1; font-size: 15px; }
  .fdoor__go { grid-column: 2; grid-row: 1 / 3; }
  .fdoor::before { top: 15px; bottom: 15px; }
  .pcard { margin: 0 12px; border-radius: 16px; }
  .pcall { padding: 26px 20px 28px; }
  .pcall .btn--gold { width: 100%; justify-content: center; font-size: 17px; padding: 18px 24px; }
  .pcard__intro { padding: 26px 20px 4px; }
  .pcard__body { padding: 20px 20px 26px; }
  .pcard__p { font-size: 17.5px; }
  .lad3, .rooms3 { grid-template-columns: 1fr; }
  .lad3__i { padding: 0 0 18px 46px; }
  .lad3__i::before { left: 15px; right: auto; top: 26px; bottom: 0; width: 1px; height: auto; }
  .lad3__i:last-child::before { display: none; }
  .lad3__n { padding: 0; }
  .rooms3__i { padding-bottom: 16px; }
  .grid4 { grid-template-columns: 1fr; }
  .branch { grid-template-columns: 1fr; grid-template-areas: "head" "line" "go"; margin: 22px -8px 0; padding: 16px 8px 18px; }
  .branch__go { margin-top: 10px; }
  .grid4__i:nth-last-child(-n+2) { border-bottom: 0; }
  .grid4__i:last-child { border-bottom: 1px solid rgba(17,20,17,.1); }
  .pline { padding: 9vh 0; }
  .pline--top { padding-top: 0; }
  .pline__body > p { font-size: 17.5px; }
  .ftstory .pline__body > p { font-size: 18.5px; }
  .step__meta { display: block; margin: 4px 0 0; }
  .note { padding: 18px 16px 20px; border-radius: 16px; }
  .note__mail { padding-top: 18px; }
  .note__body p { font-size: 16px; }
  .note__copy { width: 100%; justify-content: center; }
  .facts__list > div { grid-template-columns: 1fr; }
  .qa2__p { font-size: 17px; }
  .ptab { padding: 10px 12px 12px; font-size: 15.5px; min-height: 46px; }
  .pcall--band { margin: 4vh 12px 0; }
  html.no-js .door--approvers .path + .path { padding-top: 9vh; }
  html.no-js .door--approvers .path + .path::before { margin-bottom: 9vh; }
}
@media (max-width: 360px), (max-width: 700px) and (max-height: 700px) {
  .fhero__head { padding: 20px 0 18px; }
  .fhero__title { font-size: 32px; }
  .fhero__lede { font-size: 17px; }
  .fdoor { padding: 11px 8px 11px 18px; }
  .fdoor__line { font-size: 14.5px; }
}
@media (prefers-reduced-motion: reduce) {
  .path.is-in { animation: none; }
  .fdoor::before, .fdoor::after, .fdoor__go svg, .chip__t, .branch__go svg, .qs__index a::before { transition: none; }
  .chip:active .chip__t { transform: none; }
}