/* The Beyond Success page (/beyond-success): "One crack, three rooms". Loads after /src/door/door.css, which holds the door
   pages' header, links, statistics, the tension rows, the fields and options, the mineral button, the waitlist card, "Who you'd work with" with
   its two quotes, the questions, the close slab and the checkbox box (the forms and questions moved there on October 15, for /ai). Tokens in /src/site/tokens.css. */
@property --gold-from { syntax: '<percentage>'; inherits: true; initial-value: 66%; }

/* ------------------------------------------------------------------ first screen: the question and the action left, the three rooms right */
.bsf { display: grid; grid-template-columns: minmax(0, 1.16fr) minmax(0, 1fr); gap: 0 5vw; align-items: start;
  padding: clamp(26px, 4.6vh, 58px) var(--pad-x) 10vh; }
.bsf__head { padding-top: clamp(4px, 2vh, 24px); max-width: 700px; }
/* the offer's name over its question, inside the h1 (Brand Design Director, October 15: a named exception to the no-kicker rule,
   offer pages' first screens only, 18px sentence case Slate) */
.bsf__label { display: block; margin-bottom: 14px; font-size: 18px; line-height: 1.4; font-weight: 500; letter-spacing: .01em; color: var(--slate); }
.bsf__title { font-weight: 500; font-size: clamp(42px, 3.95vw, 58px); line-height: 1.05; letter-spacing: -.028em; text-wrap: balance; }
.bsf__lede { margin-top: 22px; font-size: 20px; line-height: 1.5; color: var(--charcoal-soft); max-width: 31em; text-wrap: pretty; }
.bsf__act { margin-top: 36px; }
.bsf__call { margin-top: 18px; font-size: 17px; }

/* the rooms: one photographed crack (Phase 0 L1, flipped) runs down their gutter, bare through Clarity and Experiment and gilded
   from Direction's top edge into the pool. rooms.js sets --gold-from to Direction's top; the gold shows with the page (no sweep). */
.rooms { --gutter: 150px; position: relative; height: clamp(540px, calc(100svh - 230px), 700px); }
.rooms__crack { position: absolute; z-index: 0; left: 0; top: 0; bottom: 0; width: var(--gutter); pointer-events: none;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 12%, #000 80%, transparent 100%), linear-gradient(to bottom, transparent 0, #000 9%, #000 96%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to right, transparent 0, #000 12%, #000 80%, transparent 100%), linear-gradient(to bottom, transparent 0, #000 9%, #000 96%, transparent 100%);
  mask-composite: intersect; }
.rooms__crack img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 19% 100%; }
/* bare above Direction only, switching to gold right at Direction's top hairline (a soft crossfade read as a grey smudge:
   finish review, round 2); below it the crack exists only as gold, which the sweep draws down into the pool */
.rooms__bare {
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(var(--gold-from) - 0.3%), transparent calc(var(--gold-from) + 0.3%));
  mask-image: linear-gradient(to bottom, #000 calc(var(--gold-from) - 0.3%), transparent calc(var(--gold-from) + 0.3%)); }
.rooms__gold {
  -webkit-mask-image: linear-gradient(to bottom, transparent calc(var(--gold-from) - 0.3%), #000 calc(var(--gold-from) + 0.3%));
  mask-image: linear-gradient(to bottom, transparent calc(var(--gold-from) - 0.3%), #000 calc(var(--gold-from) + 0.3%)); }
/* without JavaScript nothing measures Direction's top, so the rooms are equal and Direction starts at two thirds (Brand Design Director M3) */
html.no-js .rooms__list { grid-auto-rows: 1fr; }
html.no-js .rooms { --gold-from: 66.7%; }

.rooms__list { position: relative; z-index: 1; height: 100%; list-style: none; margin: 0; padding: 0; display: grid; grid-auto-rows: 1fr; }
.room { padding: 26px 0 0 calc(var(--gutter) + 22px); border-top: 1px solid rgba(17,20,17,.1); }
.room:first-child { border-top: 0; padding-top: 4px; }
.room__head { display: flex; align-items: baseline; justify-content: space-between; gap: 6px 18px; flex-wrap: wrap; }
.room__name { font-size: clamp(28px, 2.35vw, 34px); font-weight: 500; letter-spacing: -.02em; line-height: 1.1; color: var(--ink); }
.room__meta { font-size: 15px; color: var(--slate); letter-spacing: .005em; }
.room__line { margin-top: 12px; font-size: 18px; line-height: 1.45; color: var(--charcoal-soft); max-width: 22em; text-wrap: pretty; }

/* page sections share one column line, 4 to 8, the one "What you'll experience" needs for its three columns (Aylam, October 15:
   its right side started further left than the sections above it) */

/* ------------------------------------------------------------------ is this for you: the three people V11 names, apart */
.fit { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 26px 6vw; align-items: start;
  margin: 0 var(--pad-x); padding: 10vh 0 12vh; border-top: 1px solid rgba(17,20,17,.1); }
.fit__h { font-size: clamp(27px, 2.3vw, 36px); font-weight: 500; line-height: 1.2; letter-spacing: -.02em; color: var(--ink); text-wrap: balance; }
.fit__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.fit__list li { padding: 20px 20px 22px; border-radius: 18px; font-size: 18px; line-height: 1.45; color: var(--ink); text-wrap: pretty; background: #FBF8F1;
  border: 1px solid rgba(17,20,17,.09); box-shadow: inset 0 1px 0 rgba(255,255,255,.85), 0 8px 20px rgba(37,42,38,.07), 0 1px 3px rgba(37,42,38,.06); }
.fit__lead { margin-top: 12px; font-size: 19px; line-height: 1.5; color: var(--graphite); max-width: 22em; text-wrap: pretty; }
/* the mid-page soft close: the Success Gap Assessment, a smaller mineral button so the gold free call stays the page's one main action
   (Aylam, October 15) */
.soft { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; margin-top: 26px; padding-top: 24px; border-top: 1px solid rgba(17,20,17,.1); }
.soft__line { font-size: 18px; line-height: 1.5; color: var(--ink); }
/* after the mineral rules in source order, so it stays smaller than the gold button (Brand Design Director M1, October 15) */
.soft .btn--mineral { padding: 12px 20px; font-size: 16px; }
.fit__close { margin-top: 24px; font-size: 19px; line-height: 1.55; color: var(--graphite); max-width: 34em; text-wrap: pretty; }
.tension__body .stat--bs { margin-top: 30px; padding-top: 22px; border-top: 1px solid rgba(17,20,17,.09); font-size: 17px; color: var(--charcoal-soft); }

/* ------------------------------------------------------------------ what happens in each part: the rooms again, opened up */
.parts { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 30px 6vw; align-items: start; padding: 4vh var(--pad-x) 6vh; }
.parts__side { position: sticky; top: 32px; }
.parts__h { font-size: clamp(30px, 2.6vw, 40px); font-weight: 500; letter-spacing: -.022em; line-height: 1.12; text-wrap: balance; }
.parts__format { margin-top: 16px; font-size: 18px; line-height: 1.5; color: var(--graphite); }
.leave { margin-top: 30px; padding-top: 22px; border-top: 1px solid rgba(17,20,17,.1); max-width: 24em; }
.leave__h { font-size: 21px; font-weight: 500; letter-spacing: -.012em; line-height: 1.25; color: var(--ink); }
.leave__list { list-style: none; margin: 8px 0 0; padding: 0; }
.leave__list li { padding: 14px 0; font-size: clamp(19px, 1.45vw, 21px); line-height: 1.4; color: var(--ink); text-wrap: pretty; }
.leave__list li + li { border-top: 1px solid rgba(17,20,17,.08); }
.part { padding: 30px 0 34px; border-top: 1px solid rgba(17,20,17,.1); }
.part:first-child { border-top: 0; padding-top: 4px; }
.part__head { display: flex; align-items: baseline; gap: 8px 18px; flex-wrap: wrap; margin-bottom: 10px; font-size: clamp(26px, 2.1vw, 32px); font-weight: 500; }
.part__name { font-size: clamp(26px, 2.1vw, 32px); font-weight: 500; letter-spacing: -.02em; line-height: 1.12; }
.part__meta { font-size: 15px; font-weight: 400; color: var(--slate); }
.part__sub { margin-bottom: 22px; font-size: 17.5px; line-height: 1.45; color: var(--charcoal-soft); max-width: 34em; text-wrap: pretty; }
.steps { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px 34px; }
.steps--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.steps:has(.step__voice) > .step { display: grid; grid-row: span 3; grid-template-rows: subgrid; row-gap: 0; align-content: start; }
.steps:has(.step__voice) > .step > .step__voice { align-self: start; }
.qa__a .qa__acts { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; padding: 0 0 26px; font-size: 17px; max-width: none; }
/* the questions' call button: mineral and smaller than the gold button, which can share its screen (Brand Design Director M1) */
.qa__acts .btn--mineral { padding: 12px 20px; font-size: 16px; }
.step__name { font-size: 17.5px; font-weight: 500; line-height: 1.35; color: var(--ink); }
.step__line { margin-top: 8px; font-size: 16px; line-height: 1.5; color: var(--charcoal-soft); text-wrap: pretty; }
/* the inner voice each Part One module answers (V11): the visitor's own question, never a testimonial, so no name and no italic
   (Space Grotesk has none; Brand Design Director M1). A speech bubble with a small bubble mark makes it read as the visitor's own
   words (Aylam, October 15: "using only UI changes") */
.step__voice { position: relative; display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 10px; margin-top: 14px; padding: 12px 14px;
  font-size: 16px; line-height: 1.5; color: var(--ink); text-wrap: pretty; background: rgba(255,255,255,.62); border: 1px solid rgba(17,20,17,.1);
  border-radius: 14px 14px 14px 4px; }
.step__voice-i { width: 18px; height: 18px; margin-top: 2px; fill: none; stroke: var(--slate); stroke-width: 1.5; stroke-linejoin: round; }
.step__more { margin-top: 12px; font-size: 15.5px; }
/* the one-on-one call included in the experiment (Aylam: "love this section"), the Experiment's third column so the three parts
   keep one rhythm (Aylam, October 15): a raised Plaster card with a one-row title; "call included" moved to the Experiment's meta
   line so the card is quieter (Aylam, October 15, second round) */
/* an outline only, no fill or shadow, so it sits in the row instead of floating above it (Aylam, October 15, fourth round: "the
   one-on-one tile still sticks out too much"; Mist, a quiet green-grey, rather than gold, which stays for the button and the crack;
   full Deep Mineral read almost black and like a picked date: Brand Design Director M1) */
.incl { display: flex; flex-wrap: wrap; align-items: baseline; align-content: flex-start; column-gap: 10px; margin: -14px 0 0 -16px; padding: 14px 16px 18px;
  background: none; border: 1px solid var(--mist); border-radius: 18px; }
.incl__title { font-size: 17.5px; font-weight: 500; line-height: 1.35; color: var(--ink); white-space: nowrap; }
.incl__line { flex-basis: 100%; margin-top: 8px; font-size: 16px; line-height: 1.5; color: var(--graphite); text-wrap: pretty; }
.parts__next { margin-top: 26px; font-size: 17px; }

/* ------------------------------------------------------------------ the dates form under the workshop, then the retreat row */
/* the dates: the next cohort only, the rest and "no date for now" behind "See more dates" (Aylam: push the immediate cohort) */
.dates { display: flex; flex-direction: column; gap: 10px; margin-top: 6px; }
.date { position: relative; display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 14px; align-items: start; padding: 16px 18px;
  background: rgba(255,255,255,.55); border: 1px solid rgba(17,20,17,.2); border-radius: 12px; cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: border-color 160ms ease, box-shadow 160ms ease; }
.dates:not(.is-open) .date:not(.is-next), .date.is-past { display: none; }
.date__in { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.date__dot { position: relative; width: 22px; height: 22px; margin-top: 2px; border: 1.5px solid rgba(17,20,17,.55); border-radius: 50%; background: rgba(255,255,255,.8); }
.date__dot::after { content: ""; position: absolute; inset: 4px; border-radius: 50%; background: var(--mineral); transform: scale(0); transition: transform 160ms var(--ease-out); }
.date:has(.date__in:checked) { border-color: var(--mineral); box-shadow: inset 0 0 0 1px var(--mineral); }
.date:has(.date__in:checked) .date__dot { border-color: var(--mineral); }
.date:has(.date__in:checked) .date__dot::after { transform: scale(1); }
.date:has(.date__in:focus-visible) { outline: 2px solid var(--slate); outline-offset: 3px; }
@media (hover: hover) and (pointer: fine) { .date:hover { border-color: rgba(17,20,17,.45); } }
.date__t { font-size: 16.5px; line-height: 1.45; color: var(--graphite); }
.date__top { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin-bottom: 8px; }
.date__badge { font-size: 15px; font-weight: 500; color: var(--slate); }
.date:not(.is-next) .date__badge { display: none; }
/* each cohort's price before the pay step; the founding cohort's in a warm wash so it stands out without competing with the gold
   button (Aylam, October 15: "highlight it") */
.date__price { font-size: 15.5px; font-weight: 400; color: var(--ink); }
.date__amount { font-weight: 500; white-space: nowrap; }
.date__amount.is-founding { padding: 3px 10px; border-radius: 999px; background: #EFE4C8; }
.dates__plain .date__price { display: inline-block; margin-bottom: 6px; }
.seat__tax { font-size: 15.5px; color: var(--slate); }
.date__row { display: block; text-wrap: pretty; }
.date__row b { display: inline-block; min-width: 5.4em; font-weight: 500; color: var(--ink); }
.date__d { white-space: nowrap; }
.date--none .date__t { color: var(--charcoal-soft); }
.dates__more { display: inline-flex; align-items: center; gap: 8px; margin-top: 14px; padding: 6px 0; font: inherit; font-size: 16px; font-weight: 500; color: var(--ink);
  background: none; border: 0; cursor: pointer; text-decoration: underline; text-decoration-color: rgba(17,20,17,.32); text-underline-offset: .3em; }
.dates__more svg { width: 18px; height: 18px; fill: none; stroke: var(--slate); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: transform 220ms var(--ease-out); }
.dates__more[aria-expanded="true"] svg { transform: rotate(180deg); }
/* after a valid submit: the pay step, with a free call as the other way (Aylam: "pushed to pay with an option for a call with me") */
.seat { grid-column: 2; }
/* the form, the pay step and their parts swap with the hidden attribute, which display rules would otherwise override */
.wl [hidden] { display: none !important; }
.seat__h { font-size: clamp(22px, 1.8vw, 27px); font-weight: 500; letter-spacing: -.015em; line-height: 1.2; color: var(--ink); }
.seat__h:focus, .seat__note:focus { outline: none; }
.seat__dates { margin-top: 14px; font-size: 17px; line-height: 1.5; color: var(--graphite); }
.seat__act { margin-top: 22px; }
/* paying is this page's main action, and the first screen's button leads here, so it is gold; no other gold shares its window (Aylam, November 5) */
.wl__submit .btn--gold, .wl__submit .btn--mineral, .seat__act .btn--gold { border: 0; cursor: pointer; font-family: inherit; }
/* until a payment link exists the pay button is a flat light mineral tint, plainly not live (Brand Design Director, October 15) */
.seat__act .btn[aria-disabled="true"] { background: rgba(23,48,56,.1); color: rgba(17,20,17,.5); box-shadow: none; cursor: not-allowed; transform: none; }
.seat__note { margin-top: 14px; padding: 14px 18px; font-size: 16px; line-height: 1.5; color: var(--ink); background: rgba(23,48,56,.06); border-radius: 10px; }
.seat__note--first { margin-top: 0; }
.seat__call { margin-top: 26px; padding-top: 20px; border-top: 1px solid rgba(17,20,17,.1); font-size: 17px; line-height: 1.5; color: var(--graphite); }
.seat__call .tlink { margin-left: 4px; }
.seat__change { margin-top: 14px; font-size: 15.5px; }
.seat__change .tlink { padding: 4px 0; font: inherit; font-weight: 500; background: none; border: 0; cursor: pointer; text-underline-offset: .3em; }
/* arrow links that can wrap: inline, so the arrow follows the last word instead of the box's far edge */
.step__more .tlink--arrow, .seat__call .tlink--arrow, .retreat__more .tlink--arrow { display: inline; }
.step__more .tlink--arrow svg, .seat__call .tlink--arrow svg, .retreat__more .tlink--arrow svg { display: inline-block; vertical-align: -.22em; margin-left: 8px; }
.dates__plain { list-style: none; margin: 0 0 16px; padding: 0; }
.dates__plain li { padding: 12px 0; border-top: 1px solid rgba(17,20,17,.1); }

.retreat { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 8px 6vw; align-items: baseline;
  margin-top: 34px; padding: 0 clamp(28px, 3.4vw, 52px); }
.retreat__h { font-size: 22px; font-weight: 500; letter-spacing: -.012em; line-height: 1.25; }
.retreat__line { grid-column: 2; font-size: 17px; line-height: 1.5; color: var(--graphite); max-width: 32em; }
.retreat__more { grid-column: 2; font-size: 17px; }

/* ------------------------------------------------------------------ one-on-one coaching */
.coach { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 20px 6vw; align-items: start;
  margin: 0 var(--pad-x); padding: 10vh 0 6vh; border-top: 1px solid rgba(17,20,17,.1); }
.coach__h { font-size: clamp(28px, 2.4vw, 38px); font-weight: 500; letter-spacing: -.02em; line-height: 1.15; text-wrap: balance; }
.coach__line { font-size: 19px; line-height: 1.55; color: var(--graphite); max-width: 32em; text-wrap: pretty; }
.coach__more { margin-top: 18px; font-size: 17px; }
.quote--coach { margin-top: 6vh; max-width: 34em; }
.quote--coach p { font-size: clamp(21px, 1.7vw, 25px); line-height: 1.4; letter-spacing: -.01em; }

/* "Who you'd work with" and its two quotes come from door.css */
.door--beyond .who { padding-top: 10vh; }


.door--beyond .dclose { padding-top: 0; }

/* ------------------------------------------------------------------ tablet and phone */
/* "Led by Aylam Hofstein" on the page's 4-to-8 line; door.css is shared with /leadership, so this page only (Brand Design Director M2) */
@media (min-width: 981px) { .door--beyond .who { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); } }

@media (max-width: 980px) {
  .bsf { grid-template-columns: 1fr; padding-bottom: 8vh; }
  .bsf__head { max-width: 640px; }
  .rooms { --gutter: 132px; height: auto; margin-top: 7vh; }
  .rooms__crack img { object-position: 30% 100%; }
  .rooms__list { grid-auto-rows: auto; }
  .room { padding-top: 24px; padding-bottom: 26px; }
  .room:first-child { padding-top: 8px; }
  .fit, .parts, .coach { grid-template-columns: 1fr; }
  .fit__list { grid-template-columns: 1fr; }
  .steps, .steps--2 { gap: 26px; }
  .incl { margin: 4px 0 0; padding: 18px 20px 20px; }
  .parts__side { position: static; }
  .steps, .steps--2 { grid-template-columns: 1fr; gap: 16px; }
  .seat { grid-column: 1; }
  .retreat { grid-template-columns: 1fr; }
  .retreat__line, .retreat__more { grid-column: 1; }
}
@media (max-width: 700px) {
  .bsf { padding-top: 30px; }
  .bsf__title { font-size: clamp(34px, 10.2vw, 42px); }
  .bsf__lede { font-size: 18px; margin-top: 16px; }
  .bsf__act { margin-top: 28px; }
  .bsf__act .btn--gold, .wl__submit .btn--gold, .wl__submit .btn--mineral, .seat__act .btn--gold { width: 100%; justify-content: center; font-size: 17px; padding: 18px 24px; }
  /* the crack wanders about 260 px of the plate sideways: at a phone's scale that needs about 116 px to stay whole */
  .rooms { --gutter: 116px; }
  /* the plate bleeds into the page margin so the pool stays whole; the text column does not move (Brand Design Director M1) */
  .rooms__crack { left: calc(6px - var(--pad-x)); width: calc(var(--gutter) + var(--pad-x) - 6px);
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 7%, #000 90%, transparent 100%), linear-gradient(to bottom, transparent 0, #000 7%, #000 96%, transparent 100%);
    mask-image: linear-gradient(to right, transparent 0, #000 7%, #000 90%, transparent 100%), linear-gradient(to bottom, transparent 0, #000 7%, #000 96%, transparent 100%); }
  .rooms__crack img { object-position: 22% 100%; }
  .room { padding-left: calc(var(--gutter) + 14px); }
  .room__name { font-size: 27px; }
  .room__head { flex-direction: column; gap: 4px; }
  .room__line { font-size: 17px; }
  .date__row b { display: block; }
  .date__row + .date__row { margin-top: 8px; }
  .incl { border-radius: 16px; }
  .qa__acts .btn--mineral { width: auto; justify-content: flex-start; }
  /* the Assessment button's label wraps on narrow phones instead of widening the page */
  .soft .btn--mineral { width: auto; justify-content: flex-start; white-space: normal; text-align: left; }
  .fit__list li { border-radius: 16px; }
  .retreat { padding: 0 4px; }
  .coach__line { font-size: 17.5px; }
  .quote--coach p { font-size: 20px; }
}
/* narrow phones: the crack keeps its 116 px (it is drawn larger here, the rooms being taller), the words a step smaller */
@media (max-width: 360px) {
  .room { padding-left: calc(var(--gutter) + 10px); }
  .room__line { font-size: 16px; }
  /* the longest date ("Wednesday, September 30,") stays inside its card */
  .date { padding: 14px 12px; gap: 10px; }
  .date__t { font-size: 15.5px; }
  /* the Assessment button stays no taller than the gold one when its label wraps (Brand Design Director M1) */
  .soft .btn--mineral { padding: 9px 16px; font-size: 15px; line-height: 1.3; gap: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .dates__more svg, .date__dot::after { transition: none; }
}