/* ═══ /brand-brain below the first screen and its first section: How it differs to the questions. Not
   render-blocking: fetched once the first paint is done (render-blocking only on an anchor landing; linked in
   noscript without script), long before anyone scrolls to them. The hero, the first section and the guards
   live in brand-brain.css. ═══ */
#how-it-differs{isolation:isolate}
#how-it-differs > h2{max-width:22ch}
#how-it-differs > p{max-width:40rem}
#how-it-differs > p:first-of-type{margin-top:clamp(28px, 4.4cqi, 48px); font-size:var(--text-lead)}
#how-it-differs > p:first-of-type > strong{display:block; margin-bottom:var(--space-3); font-weight:var(--weight-display); font-size:var(--text-h3); line-height:1.1; letter-spacing:var(--tracking-display)}
#how-it-differs > p:last-of-type{margin-top:clamp(32px, 5cqi, 48px)}
.brain-compare{position:relative; isolation:isolate; margin-top:clamp(36px, 6cqi, 64px)}
.brain-compare-table{width:100%; border-collapse:separate; border-spacing:0; font-size:var(--text-body); line-height:var(--leading-normal); color:var(--text-secondary)}
.brain-compare-table,.brain-compare-table tbody,.brain-compare-table tbody tr{display:block}
.brain-compare-table thead{position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0}
.brain-compare-table tbody tr{display:grid; gap:14px; padding:26px 0 28px; border-top:1px solid var(--border-hairline)}
.brain-compare-table tbody tr:last-child{border-bottom:1px solid var(--border-hairline)}
.brain-compare-table tbody th{display:block; padding:0; text-align:left; font-family:var(--font-body); font-weight:var(--weight-semibold); font-size:var(--text-body); line-height:1.4; letter-spacing:var(--tracking-tight); text-transform:none; color:var(--text-primary)}
.brain-compare-table td{display:block; position:relative; padding:0; text-wrap:pretty}
.brain-compare-table td::before{content:attr(data-col); content:attr(data-col) / ""; display:block; margin-bottom:2px; font-size:var(--text-small); font-weight:var(--weight-semibold); line-height:var(--leading-snug); color:var(--text-primary)}
.brain-compare-table td:last-child{margin-top:4px; padding:16px 18px 17px; border-radius:var(--radius-lg); background:var(--warm-50); color:var(--text-primary); font-weight:var(--weight-medium);
  box-shadow:inset 0 0 0 1px var(--border-hairline)}
@container layout (min-width:541px) and (max-width:899px){
  .brain-compare-table td{display:flow-root; padding-left:11rem}
  .brain-compare-table td::before{float:left; width:10rem; margin:calc((var(--leading-normal) * var(--text-body) - var(--leading-snug) * var(--text-small)) / 2) 0 0 -11rem}
  .brain-compare-table td:last-child{padding-left:11rem}
  .brain-compare-table td:last-child::before{width:calc(10rem - 18px); margin-left:calc(18px - 11rem)}
}
@container layout (min-width:900px){
  .brain-compare-table{display:table; table-layout:fixed}
  .brain-compare-table thead{position:static; width:auto; height:auto; margin:0; overflow:visible; clip:auto; clip-path:none; white-space:normal; display:table-header-group}
  .brain-compare-table tbody{display:table-row-group}
  .brain-compare-table tbody tr,.brain-compare-table thead tr{display:table-row; padding:0; border:0}
  .brain-compare-table thead th,.brain-compare-table tbody th,.brain-compare-table tbody td{display:table-cell; padding:22px clamp(16px, 2cqi, 28px); vertical-align:top; text-align:left; border-top:1px solid var(--border-hairline)}
  .brain-compare-table td::before{content:none}
  .brain-compare-table tbody tr:last-child th,.brain-compare-table tbody tr:last-child td{border-bottom:1px solid var(--border-hairline)}
  .brain-compare-table thead th{border-top:0; vertical-align:bottom; padding-bottom:20px; font-weight:var(--weight-regular); font-size:var(--text-h4); line-height:1.2; letter-spacing:var(--tracking-tight); color:var(--text-secondary); text-wrap:balance}
  .brain-compare-table .brain-compare-corner{width:19%}
  .brain-compare-table thead th:nth-child(2),.brain-compare-table thead th:nth-child(3){width:25.5%}
  .brain-compare-table thead th:last-child{width:30%}
  .brain-compare-table tbody th{padding-left:0; padding-top:22px; font-size:var(--text-body)}
    .brain-compare-table thead th:last-child,.brain-compare-table td:last-child{background:var(--warm-50); color:var(--text-primary); border-left:1px solid var(--border-hairline); border-right:1px solid var(--border-hairline)}
  .brain-compare-table thead th:last-child{padding-top:34px; border-top:1px solid var(--border-hairline); border-radius:var(--radius-lg) var(--radius-lg) 0 0; font-weight:var(--weight-medium); color:var(--text-primary)}
  .brain-compare-table td:last-child{margin:0; padding:22px clamp(16px, 2cqi, 28px); border-radius:0; box-shadow:none; font-weight:var(--weight-medium); border-top-color:rgba(232,228,222,.7)}
  .brain-compare-table tbody tr:last-child td:last-child{padding-bottom:34px; border-radius:0 0 var(--radius-lg) var(--radius-lg)}
  .bb-light--compare{display:block; z-index:-2; top:-24%; bottom:-26%; right:-18%; width:58%}
}
#customer-owned > p:first-of-type{margin-top:var(--space-5); max-width:38rem}
#customer-owned > ul{counter-reset:bb-own; margin-top:clamp(28px, 5cqi, 40px); padding:6px clamp(20px, 3.4cqi, 36px); background:var(--warm-50); border-radius:var(--radius-xl); box-shadow:inset 0 0 0 1px var(--border-hairline)}
#customer-owned > ul > li{counter-increment:bb-own; display:grid; grid-template-columns:clamp(44px, 7cqi, 72px) minmax(0,1fr); gap:var(--space-4); align-items:baseline; padding:clamp(18px, 2.6cqi, 26px) 0; border-top:1px solid var(--border-hairline); color:var(--text-primary); font-size:var(--text-body); line-height:1.55}
#customer-owned > ul > li:first-child{border-top:0}
#customer-owned > ul > li::before{content:counter(bb-own, decimal-leading-zero) / ""; font-weight:var(--weight-stage); font-size:clamp(2rem, 1.5rem + 1.6cqi, 2.9rem); line-height:.9; letter-spacing:var(--tracking-display); color:var(--text-primary)}
#customer-owned > p:last-of-type{margin-top:var(--space-5); font-size:var(--text-small)}
@container layout (min-width:900px){
  #customer-owned{display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); grid-template-rows:auto auto 1fr; column-gap:clamp(40px, 5cqi, 96px); align-items:start}
  #customer-owned > h2{grid-column:1; grid-row:1}
  #customer-owned > p:first-of-type{grid-column:1; grid-row:2}
  #customer-owned > ul{grid-column:2; grid-row:1 / span 3; margin:0}
  #customer-owned > p:last-of-type{grid-column:2; grid-row:4}
}
#where-it-works{isolation:isolate; overflow:hidden; margin-inline:calc(-1 * var(--edge)); padding:clamp(72px, 12cqi, 150px) var(--edge)}
.bb-light--band{inset:0; -webkit-mask-image:linear-gradient(to bottom, transparent 0, #000 22%, #000 78%, transparent 100%); mask-image:linear-gradient(to bottom, transparent 0, #000 22%, #000 78%, transparent 100%)}
.bb-light--band img{object-position:50% 40%}
#where-it-works > h2{max-width:none}
#where-it-works .brain-pull{margin-top:clamp(18px, 2.6cqi, 28px); max-width:min(36ch, 100%); font-weight:var(--weight-display); font-size:var(--text-statement); line-height:1.3; letter-spacing:var(--tracking-tight); color:var(--text-primary); text-wrap:balance}
#where-it-works > p:not(.brain-pull){margin-top:var(--space-5); max-width:34rem; color:var(--text-primary)}
@container layout (min-width:900px){
  #where-it-works{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); column-gap:clamp(40px, 5cqi, 96px)}
  #where-it-works > h2,#where-it-works > .brain-pull{grid-column:1 / -1}
  #where-it-works > p:not(.brain-pull){margin-top:clamp(36px, 5cqi, 56px); padding-top:var(--space-5); border-top:1px solid rgba(44,40,37,.18)}
}
#who-it-is-for .brain-pull{margin-top:var(--space-5); font-weight:var(--weight-display); font-size:var(--text-statement); line-height:1.3; letter-spacing:var(--tracking-tight); color:var(--text-primary)}
#who-it-is-for > p:not(.brain-pull){margin-top:var(--space-5); padding-top:var(--space-5); border-top:1px solid var(--border-hairline); max-width:38rem}
@container layout (min-width:900px){
  #who-it-is-for{display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); column-gap:clamp(40px, 5cqi, 96px); align-items:start}
  #who-it-is-for > h2{grid-column:1; grid-row:1 / span 2}
  #who-it-is-for .brain-pull{grid-column:2; margin:0; font-size:var(--text-h2); line-height:1.15; letter-spacing:var(--tracking-display)}
  #who-it-is-for > p:not(.brain-pull){grid-column:2; margin-top:var(--space-6)}
  #who-it-is-for > p:last-of-type{margin-top:var(--space-5)}
}
/* ═══ 6 · HOW WE BUILD IT: the pinned moment; phases dim, never hide ═══ */
#how-it-gets-built{margin-inline:calc(-1 * var(--edge)); color:var(--text-primary)}
.bb-build{position:relative}
.bb-build__stage{position:relative; overflow:hidden; isolation:isolate; display:flex; flex-direction:column; padding:clamp(40px, 9cqi, 88px) var(--edge) clamp(40px, 6cqi, 72px); background:var(--surface-canvas)}
.bb-build__copy{order:1; position:relative; z-index:2}
.bb-build__copy h2{max-width:14ch; font-family:var(--font-display); font-weight:var(--weight-display); font-size:var(--text-h1); line-height:var(--leading-tight); letter-spacing:var(--tracking-display); text-wrap:balance; color:var(--text-primary)}
.bb-build__copy p{margin-top:var(--space-5); max-width:30rem; font-size:var(--text-lead); line-height:1.5; color:var(--text-secondary); text-wrap:pretty}
.bb-build__copy a{color:var(--text-primary)}
.bb-build__stage > .brain-support-art{order:2; position:relative; z-index:2; display:block; width:100%; max-width:36rem; margin-top:clamp(28px, 6cqi, 40px); overflow:hidden; border-radius:var(--radius-lg); aspect-ratio:3 / 2; background:var(--surface-raised); box-shadow:0 0 0 1px rgba(44,40,37,.06)}
.bb-build__stage > .brain-support-art img{display:block; width:100%; height:100%; object-fit:cover}
.bb-build__plate{order:3; position:relative; z-index:0; margin:clamp(28px, 7cqi, 48px) calc(-1 * var(--edge)) 0; aspect-ratio:1586 / 992; overflow:hidden; pointer-events:none}
.bb-build__plate img{display:block; width:100%; height:100%; max-width:none; object-fit:cover; object-position:var(--plate-x, 50%) 60%; transform:scale(calc(1 + .06 * var(--p, 0))); transform-origin:50% 72%}
.bb-build ul{order:4; position:relative; z-index:2; display:grid; gap:var(--space-6); margin:clamp(28px, 6cqi, 48px) 0 0; padding:0; list-style:none}
.bb-build li{position:relative; margin:0; padding-top:22px; font-size:var(--text-small); line-height:1.55; color:var(--text-secondary); text-wrap:pretty; transition:color var(--dur-base) var(--ease-brand)}
.bb-build li::before,.bb-build li::after{content:""; position:absolute; left:0; top:0; height:2px; border-radius:2px}
.bb-build li::before{right:0; background:var(--border-strong)}
.bb-build li::after{width:100%; background:var(--text-primary); transform:scaleX(var(--fill, 1)); transform-origin:0 50%}
.bb-build li strong{display:block; margin-bottom:6px; font-weight:var(--weight-display); font-size:clamp(1.6rem, 1.05rem + 1.6cqi, 2.4rem); line-height:1.05; letter-spacing:var(--tracking-display); color:var(--text-primary); transition:color var(--dur-base) var(--ease-brand)}
.bb-build-after{position:relative; z-index:3; margin-top:calc(-1 * var(--radius-xl)); padding:clamp(40px, 7cqi, 88px) var(--edge) 0; background:var(--surface-canvas); border-radius:var(--radius-xl) var(--radius-xl) 0 0}
.bb-build-after::before{content:""; position:absolute; inset:0; z-index:-1; border-radius:inherit; box-shadow:var(--shadow-sheet); clip-path:inset(-120px 0 0 0); pointer-events:none}
.bb-build-after .brain-timing{margin-top:0; max-width:40rem; font-size:var(--text-small)}
.bb-build-after > p:not(.brain-timing){margin-top:var(--space-5); max-width:40rem; font-size:var(--text-statement); line-height:1.3; letter-spacing:var(--tracking-tight); color:var(--text-primary)}
.bb-build-after .brain-mid{margin-top:var(--space-6)}
@container layout (max-width:430px){ .bb-build-after .brain-mid .button{width:100%} }
/* from 600px: the plate at true scale in its own row, between the words and the phases; behind it, the plate's own
   top sky row (48x1, inline) stretched over the stage, so a tall heading row never runs past the picture's sky */
@media (min-width:600px){
  .bb-build__stage{display:grid; grid-template-columns:minmax(0,1fr) auto; grid-template-rows:auto auto auto auto; grid-template-areas:"copy copy" "art art" "plate plate" "steps steps"; column-gap:clamp(24px, 4cqi, 56px); padding:calc(var(--header-h) + clamp(24px, 3cqi, 48px)) var(--edge) clamp(20px, 4svh - 8px, 44px);
    background:url(data:image/webp;base64,UklGRnAAAABXRUJQVlA4TGMAAAAvLwAAALmI6H9s4gL0U9H/MCBo2zZN+vNHcoovDYWRJENuXP7R+llrIG2b/v41LxEvyMGFVopC8ocWw2b6YlrjcQVUnCBMJRIJlrpg7GP/puPgxMqVbe2c376u7r5zu6p3XgoA) 0 0 / 100% 100% no-repeat, var(--surface-raised)}
  .bb-build__copy{grid-area:copy}
  .bb-build__copy h2{max-width:19ch}
  .bb-build__copy p{max-width:26rem; font-size:var(--text-body)}
  .bb-build__stage > .brain-support-art{grid-area:art; justify-self:start; align-self:start; width:100%; max-width:36rem; margin:clamp(28px, 4cqi, 40px) 0 0}
  /* plate rows (of 2992 at 1586 wide): crown 1540, last card 2056; 28px sky above, 16px floor + push below */
  .bb-build__plate{grid-area:plate; align-self:end; aspect-ratio:auto; --plate-w:calc(100% + 2 * var(--edge));
    margin:calc(28px - var(--plate-w) * .97100) calc(-1 * var(--edge)) calc(16px - var(--plate-w) * .58040)}
  .bb-build__plate img{height:auto; transform-origin:50% 60.09%}
  .bb-build ul{grid-area:steps; grid-template-columns:repeat(3, minmax(0,1fr)); gap:clamp(24px, 3cqi, 56px); margin:0}
  .bb-build ul::before{content:""; position:absolute; z-index:-1; inset:-72px calc(-1 * var(--edge)) -60px; pointer-events:none;
    background:linear-gradient(to top, rgba(250,250,249,.9) 0, rgba(250,250,249,.62) 55%, rgba(250,250,249,0) 100%)}
  .bb-build li{max-width:22rem}
}
@media (min-width:900px){
  .bb-build__stage{grid-template-rows:auto auto auto; grid-template-areas:"copy art" "plate plate" "steps steps"}
  .bb-build__stage > .brain-support-art{width:clamp(320px, 34cqi, 520px); max-width:none; margin:0}
}
/* held from 600px when it fits (script): stage sticks --bb-lead above the screen */
/* a step not yet lit dims by colour, never below 4.5:1 for its text and 3:1 for its title, on any floor */
.bb-build:is(.is-pinned, .is-scroll-lit) li:not(.is-lit){color:#66615B}
.bb-build:is(.is-pinned, .is-scroll-lit) li:not(.is-lit) strong{color:#857F78}
.bb-build:is(.is-pinned, .is-scroll-lit) li::after{transform:scaleX(var(--fill, 0))}
.bb-build.is-pinned{height:calc(var(--stage-vh, 100svh) * 2.6 + var(--bb-lead, 0px))}
.bb-build.is-pinned .bb-build__stage{position:sticky; top:calc(-1 * var(--bb-lead, 0px)); height:calc(var(--stage-vh, 100svh) + var(--bb-lead, 0px)); min-height:0; grid-template-rows:auto auto minmax(0,1fr) auto}
@media (min-width:900px){ .bb-build.is-pinned .bb-build__stage{grid-template-rows:auto minmax(0,1fr) auto} }
/* the light sweeps the desk left to right: a cream scrim over the whole stage (plate and its sky alike, under the
   words and the picture) recedes as the hold plays */
.bb-build.is-pinned .bb-build__stage::before{content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(90deg, rgba(243,240,236,0) 0, rgba(243,240,236,0) var(--reveal, 100%), rgba(243,240,236,.62) calc(var(--reveal, 100%) + 16%))}
@media (prefers-reduced-motion:reduce){ .bb-build li,.bb-build li strong{transition:none} }
/* ═══ 7 · THE NEXT STEP: the shared close with the page's own words ═══ */
#next-step{margin-inline:calc(-1 * var(--edge))}
.close__copy h2{font-family:var(--font-display); font-weight:var(--weight-display); font-size:var(--text-h1); line-height:var(--leading-tight); letter-spacing:var(--tracking-display); color:var(--text-primary); max-width:11ch}
.close__copy .close__line{margin-top:20px; max-width:30rem; font-size:var(--text-lead); line-height:1.55; color:var(--text-secondary)}
.close__copy .close__line:first-of-type{color:var(--text-primary)}
.close__copy .close__line + .close__line{margin-top:var(--space-4); font-size:var(--text-body)}
.close__copy .actions{margin-top:26px}
@container layout (max-width:430px){ .close__copy .actions{display:grid; grid-template-columns:minmax(0,1fr)} .close__copy .button{width:100%} }
/* phones: the word stands at Adapt's chest, measured up from his feet like Adapt himself, so it sits in the room
   kept under the calls to action (however long the copy runs) and clear of him */
@container layout (max-width:430px){ #next-step .close{--word-base-phone:calc(100% - 64px - var(--_actor-h) * .55)} }
.bb-more::before{content:"more"}
/* the hero's --sm-cover timeline must not reach the close */
:root[data-motion="on"] #next-step{timeline-scope:--sm-cover}
#questions-answered > h2{margin-bottom:var(--space-5)}
.brain-page .qa{border-top:1px solid var(--border-hairline)}
.brain-page .qa:last-child{border-bottom:1px solid var(--border-hairline)}
.brain-page .qa h3{font-weight:var(--weight-medium); font-size:var(--text-body); line-height:1.4; letter-spacing:var(--tracking-tight)}
.brain-page .qa h3 a{display:block; position:relative; min-height:64px; padding:20px 56px 20px 0; color:var(--text-primary); text-decoration:none}
.brain-page .qa h3 a:hover{text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:4px}
.brain-page .qa h3 a[aria-expanded]::after{content:"+" / ""; position:absolute; right:0; top:50%; translate:0 -50%; width:36px; height:36px; border-radius:50%; box-shadow:inset 0 0 0 1px var(--border-strong);
  font-family:var(--font-body); font-weight:var(--weight-display); font-size:22px; line-height:34px; text-align:center; transition:background-color var(--dur-fast) var(--ease-brand), color var(--dur-fast) var(--ease-brand)}
.brain-page .qa h3 a[aria-expanded="true"]::after{content:"−" / ""; background:var(--text-primary); color:var(--text-on-ink); box-shadow:none}
.brain-page .qa p{padding:0 56px 24px 0; max-width:44rem}
@container layout (max-width:430px){ .brain-page .qa p{padding-right:0} }
@container layout (min-width:900px){
  #questions-answered{display:grid; grid-template-columns:minmax(0,4fr) minmax(0,8fr); column-gap:clamp(40px, 5cqi, 96px); align-items:start}
  #questions-answered > h2{grid-column:1; grid-row:1 / span 6; position:sticky; top:calc(var(--header-h) + 32px); margin:0}
  #questions-answered > .qa{grid-column:2}
  .brain-page .qa h3{font-size:1.125rem}
}