/* walk.css · the homepage's 20-second walk, PRODUCTION PORT (DOORS 2026-10-01; REQ-HOMEPAGE-GOLIVE-1 G4 v2; lane rw-lane-8f99c8a7598b).
   Loaded after home-brand-b.css. Ported from the prototype's outside/assets/demo-walk.css (c3637317, flicker-fixed) and the walk's rows of
   the prototype's brand-b/home-brand-b.css that production's home-brand-b.css does not carry (the step line, the end row, its two buttons).
   The two views are SCRIPTED IMAGES (walk.js) with real HTML on them: the tour's spotlight, a button over the one control to press and the
   tour's line. Brand B tokens: navy #1B2F55, ink #16213A, gold #D5A63A (on navy only), night note #C9D2E3. Nothing says anything by color
   alone; every target is at least 44px; the focus ring is 3px.
   pkg-3 (DOORS, VALIDATE VERDICT-WALKPORT-PKG2-1 c92e1620): W-1 the view's line has two quiet forms ([data-host], [data-compact]) and the
   guide line sits in the team's column at full size; W-3 the end halo fades; W-4 both views hold their size from the first paint. */

/* (the stage stepping out of the content column is home-picture.css's first rule, unchanged) */
/* the walk's row: the kicker, the step count (at the end "That's Bisbe." + Start over) and the row's own "Request early access" (F3, kept in
   every state). The row keeps ONE height from the first step to the end, so the stage never moves (48px on a desk, two lines on a phone);
   [data-walk-js] = the walk is running, so a page without the script keeps its own row (W-4: the same row from the first paint where the
   browser knows scripts run, below) */
body.bb-home .workspace-wrap[data-walk-js] .demo-walk-top{height:56px!important;min-height:0!important;flex-wrap:nowrap!important;row-gap:0!important;padding:0 0 4px!important}
body.bb-home .demo-walk-top .demo-walk-kicker{order:0}
body.bb-home .demo-walk-top :is(.demo-walk-step,.demo-walk-end){order:1;margin-left:auto}
body.bb-home .demo-walk-top .walk-next{order:2;flex:none;position:relative}
/* at the end the row's "Request early access" carries the walk's gold halo (the prototype's end-card button; one button, not two). W-3: the
   halo is its own layer, so it fades in at the end and out at Start over instead of switching */
body.bb-home .demo-walk-top .walk-next::after{content:"";position:absolute;inset:-1px;border-radius:inherit;pointer-events:none;box-shadow:0 0 0 3px #D5A63A,0 0 22px 6px rgba(213,166,58,.55);opacity:0}
body.bb-home .workspace-wrap[data-walk-end] .demo-walk-top .walk-next::after{opacity:1}
@media (max-width:999px){
  body.bb-home .workspace-wrap[data-walk-js] .demo-walk-top{height:92px!important;flex-wrap:wrap!important;align-content:center!important;row-gap:8px!important;padding:0 0 6px!important}
}
/* PATCH A (2026-10-05, PRODUCT rulings r2 + r3). A1: the demo's title is its own band ABOVE both screens (a hairline under it and a
   clear gap), in its own larger style, so it no longer reads as a third screen label; its left edge is the stage's left edge, so its dot
   and Dana's dot share one x (on a phone and the 701-999 centered column too: the row takes the phone's 390px column there). The screen
   labels stay inside their own columns, level with each other; Priya's dot sits on the Bisbe window's left edge. */
body.bb-home .demo-walk-top{border-bottom:1px solid rgba(201,210,227,.3)!important;margin-bottom:14px!important}
body.bb-home .demo-walk-top .demo-walk-kicker{gap:10px;min-width:0;font:700 15px/1.25 var(--sans);color:#fff}
body.bb-home .demo-walk-top .demo-walk-kicker .dot{width:9px;height:9px}
@media (min-width:701px) and (max-width:999px){
  body.bb-home .demo-walk-top{max-width:390px;margin-left:auto!important;margin-right:auto!important}
  body.bb-home .demo-walk-top .demo-walk-kicker{font-size:17px}
  body.bb-home .demo-walk-kicker .dw-long{display:none}
  body.bb-home .demo-walk-kicker .dw-short{display:inline}
}
@media (min-width:1000px){
  body.bb-home .demo-walk-top .demo-walk-kicker{gap:12px;font:500 22px/1.2 var(--display)}
}
/* A3: the row's own "Request early access" belongs to the end frame. Steps 1-5 show the kicker and the step count only (the button keeps
   its place, so nothing moves; hidden = out of the tab order and the reading order too). On a desk the step count then sits at the right
   edge. A page whose script does not run keeps the button (no [data-walk-js]). */
body.bb-home .workspace-wrap[data-walk-js]:not([data-walk-end]) .demo-walk-top .walk-next{visibility:hidden;opacity:0;pointer-events:none}
@media (min-width:1000px){
  body.bb-home .workspace-wrap[data-walk-js]:not([data-walk-end]) .demo-walk-top .demo-walk-step{order:3}
}
/* on a phone the hidden button leaves the flow too (the row keeps its height, so the title and the count sit centered in the band); it comes
   back in the row's own dip at the end */
@media (max-width:999px){
  body.bb-home .workspace-wrap[data-walk-js]:not([data-walk-end]) .demo-walk-top .walk-next{position:absolute}
}
/* Dana's phone column hugs her scaled screen, so her phone never shows side bands. Below the full desk size her screen is limited by the
   team view's height; solving column = 348/598 x (team height - 14) + 14 with team height = 612/1004 x (stage - 16 - column) gives
   column = 26.1845% of the stage + .1308px, capped at 362px (her screen at full size, 348px plus the 7px bezel each side). */
body.bb-home .walk-stage{display:grid;grid-template-columns:min(362px,calc(26.1845% + .1308px)) minmax(0,1fr);gap:16px;align-items:start}
body.bb-home .walk-pane{position:relative;display:flex;flex-direction:column;min-width:0;margin:0}
body.bb-home .walk-who{display:flex;align-items:center;gap:8px;min-height:24px;margin:0 0 4px;font:600 14px/1.3 var(--sans);color:#C9D2E3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
body.bb-home .walk-who::before{content:"";flex:none;width:8px;height:8px;border-radius:50%;box-shadow:inset 0 0 0 1.5px #C9D2E3}
body.bb-home .walk-pane[data-acting] .walk-who{color:#fff}
body.bb-home .walk-pane[data-acting] .walk-who::before{background:#D5A63A;box-shadow:none}
/* below the full desk size Dana's column (above) is narrower than her caption: both captions may wrap to two lines (13px on the narrowest
   desks) instead of being cut off, and they share one two-line row with each dot on its caption's last line, so the views still start level */
@media (min-width:1000px) and (max-width:1340px){
  body.bb-home .walk-who{align-items:flex-end;min-height:calc(2.6em + 1px);white-space:normal;overflow:visible}
  body.bb-home .walk-who::before{align-self:flex-end;margin-bottom:calc(.65em - 4px)}
}
/* WALK_W = 1000 (walk.js): below it the walk shows the phone pictures; between 701 and 999 that phone sits centered at its natural width,
   never stretched */
@media (min-width:701px) and (max-width:999px){
  body.bb-home .walk-stage>.walk-pane{max-width:390px;margin-left:auto;margin-right:auto}
}
/* a view: a box the size of its scaled screen; the screen is the image at its captured size, scaled (walk.js) */
body.bb-home .walk-shot{position:relative;overflow:hidden;border-radius:12px;background:#737882;box-shadow:0 18px 44px -18px rgba(14,22,40,.55)}
body.bb-home .walk-pane[data-side="client"] .walk-shot{background:#fff}
body.bb-home .ws-screen{position:absolute;left:0;top:0;transform-origin:0 0}
body.bb-home .ws-img{position:absolute;left:0;top:0;display:block;width:100%;height:100%;user-select:none;-webkit-user-drag:none}
body.bb-home .ws-over{position:absolute;inset:0}
/* the tour's spotlight: the control keeps its shape with a gold glow; the rest of the view sits under a navy dim (as in the walk) */
body.bb-home .ws-spot{position:absolute;box-sizing:border-box;pointer-events:none;border-radius:10px;box-shadow:0 0 0 3px #D5A63A,0 0 24px 8px rgba(213,166,58,.6),0 0 0 200vmax rgba(14,22,40,.58)}
body.bb-home .ws-spot[data-end]{box-shadow:0 0 0 200vmax rgba(14,22,40,.46)}
body.bb-home .ws-spot[hidden]{display:none}
/* the one control to press: a real button exactly over it in the picture */
body.bb-home .ws-hit{position:absolute;box-sizing:border-box;min-width:44px;min-height:44px;margin:0;padding:0;border:0;border-radius:10px;background:transparent;cursor:pointer}
body.bb-home .ws-hit[hidden]{display:none}
body.bb-home .ws-hit:focus-visible{outline:3px solid #fff!important;outline-offset:3px!important}
/* the tour's line (the same look as in the walk: navy card, white words, the control's name in gold, an arrow to it) */
body.bb-home .ws-callout{position:absolute;z-index:3;box-sizing:border-box;height:auto!important;margin:0;padding:14px 18px 16px;border-radius:16px;background:#1B2F55;color:#fff;box-shadow:0 18px 44px -12px rgba(0,0,0,.55);font:500 18px/1.38 "Familjen Grotesk",system-ui,-apple-system,sans-serif;text-align:left;pointer-events:none}
body.bb-home .ws-callout[hidden]{display:none}
body.bb-home .ws-callout .ws-co-step{display:block;margin:0 0 6px;font:700 12px/1.3 "Familjen Grotesk",system-ui,sans-serif;letter-spacing:.08em;text-transform:uppercase;color:#C9D2E3}
body.bb-home .ws-callout .ws-co-say{margin:0}
body.bb-home .ws-callout .ws-co-press{margin:10px 0 0;font-weight:700;font-size:19px}
body.bb-home .ws-callout .ws-co-press :is(b,.ws-co-go){color:#D5A63A}
body.bb-home .ws-callout::after{content:"";position:absolute;width:0;height:0;border:10px solid transparent}
body.bb-home .ws-callout[data-side="right"]::after{left:-19px;top:calc(var(--bt-arrow,24px) - 10px);border-right-color:#1B2F55}
body.bb-home .ws-callout[data-side="left"]::after{right:-19px;top:calc(var(--bt-arrow,24px) - 10px);border-left-color:#1B2F55}
body.bb-home .ws-callout[data-side="below"]::after{top:-19px;left:calc(var(--bt-arrow,24px) - 10px);border-bottom-color:#1B2F55}
body.bb-home .ws-callout[data-side="above"]::after{bottom:-19px;left:calc(var(--bt-arrow,24px) - 10px);border-top-color:#1B2F55}
/* W-1: the line's two quiet forms, as in the prototype's tour (bisbe-webby-scenarios.js, DOORS H2/H3). [data-host]: on a desk the guide
   line beside Dana's phone shows her sentence, so this line stays for screen readers only. [data-compact]: on a phone only "Press Ask ▸"
   shows, one line under the text below the control; the sentence stays for screen readers. */
body.bb-home .ws-callout[data-host]{width:1px!important;height:1px!important;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;box-shadow:none}
body.bb-home .ws-callout[data-host]::after{display:none}
body.bb-home .ws-callout[data-compact]{width:max-content!important;padding:8px 14px;white-space:nowrap}
body.bb-home .ws-callout[data-compact] .ws-co-say{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}
body.bb-home .ws-callout[data-compact] .ws-co-press{margin-top:0}
/* Dana's phone: a quiet bezel, not a device picture */
body.bb-home .walk-phone{position:relative;padding:7px;border-radius:26px;background:#0E1628;box-shadow:0 18px 44px -18px rgba(14,22,40,.6),inset 0 0 0 1px rgba(255,255,255,.14)}
body.bb-home .walk-phone .walk-shot{border-radius:20px;box-shadow:none}
/* the end: the email Dana gets, as it lands on her phone (a picture of the notification; nothing is sent) */
body.bb-home .walk-mail{position:absolute;left:16px;right:16px;bottom:16px;z-index:4;margin:0;padding:10px 14px 12px;border-radius:14px;background:#fff;color:#16213A;box-shadow:0 14px 32px -10px rgba(14,22,40,.6),0 0 0 1px #DCE1E6;font:600 15px/1.3 var(--sans)}
body.bb-home .walk-mail[hidden]{display:none}
body.bb-home .walk-mail-h{display:block;margin:0 0 2px;font:700 11.5px/1.3 var(--sans);letter-spacing:.06em;text-transform:uppercase;color:#525E72}
body.bb-home .walk-mail-s{display:block;margin-top:4px;font:500 12.5px/1.3 var(--sans);color:#525E72}
/* the email card is drawn outside Dana's picture, at the picture's full size. Wherever her screen is scaled down (her column narrower than
   362px) the card scales with it by the same factor (walk.js sets --walk-k on the phone), from the place it sits at full size (the 7px
   bezel + 9px), so it stays one line under the end line instead of wrapping onto it. At full size (k = 1) nothing changes. */
@media (min-width:1000px){
  body.bb-home .walk-mail{box-sizing:border-box;width:330px;right:auto;left:calc(7px + 9px * var(--walk-k,1));bottom:calc(7px + 9px * var(--walk-k,1));scale:var(--walk-k,1);transform-origin:0 100%}
}
/* the view that is not acting: dimmed (lightness, not hue); its button is gone (walk.js) */
body.bb-home .walk-pane:not([data-acting]) :is(.walk-shot,.walk-phone){filter:brightness(.6) saturate(.75)}
/* a view whose image has not decoded yet stays on its ground (no empty box) */
body.bb-home .workspace-wrap[data-walk-js] .walk-pane:not([data-walk-ready]) .ws-screen{visibility:hidden}
/* Start over's dip: both views fade to ONE ground as SEEN, #737882 (the navy dim over white), so Dana's white phone does not flash white
   between the end and step 1. walk.js sets [data-walk-dip] while the pictures cover the boxes and clears it once they do again. The view
   that is not acting sits under the dim filter above (brightness .6, then saturate .75), so its ground is the color that filter turns into
   #737882: solved channel by channel, #BDC8DE (the filter keeps; switching it off would pop). */
body.bb-home .workspace-wrap[data-walk-dip] .walk-shot{background:#737882}
body.bb-home .workspace-wrap[data-walk-dip] .walk-pane:not([data-acting]) .walk-shot{background:#BDC8DE}
/* the guide line beside Dana's control on a desk (W-1: in the team's column at full size, never dimmed with the team's view; walk.js places
   it level with her control, as the prototype's walk did) */
body.bb-home .walk-call{position:absolute;z-index:5;box-sizing:border-box;margin:0;padding:12px 16px 14px;border-radius:16px;background:#1B2F55;color:#fff;box-shadow:0 18px 44px -12px rgba(0,0,0,.55);font:500 16px/1.34 "Familjen Grotesk",system-ui,-apple-system,sans-serif;text-align:left;pointer-events:none}
body.bb-home .walk-call[hidden]{display:none}
body.bb-home .walk-call p{margin:0}
body.bb-home .walk-call .walk-call-press{margin-top:8px;font-weight:700;font-size:16.5px}
body.bb-home .walk-call .walk-call-press :is(b,span){color:#D5A63A}
body.bb-home .walk-call::after{content:"";position:absolute;left:-19px;top:calc(var(--walk-arrow,24px) - 10px);width:0;height:0;border:10px solid transparent;border-right-color:#1B2F55}

/* the walk's line: step count, and at the end "That's Bisbe." + Request early access + Start over (rows production's sheet lacks) */
body.bb-home .demo-walk-step{margin:0;font:700 15px/1.3 var(--sans);color:#fff}
body.bb-home .demo-walk-end{display:flex;flex:1 1 auto;min-width:0;flex-wrap:nowrap;align-items:center;justify-content:space-between;gap:10px 16px}
body.bb-home .demo-walk-end[hidden]{display:none}
body.bb-home .demo-walk-end-h{min-width:0;margin:0;font:500 22px/1.25 var(--display);color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
body.bb-home .demo-walk-end-h .fs{color:var(--gold)}
body.bb-home .demo-walk-actions{display:flex;flex:none;flex-wrap:nowrap;gap:10px}
body.bb-home .walk-again{min-height:44px;padding:0 10px;border:0;background:transparent;color:#fff;text-decoration:underline;text-underline-offset:3px;font:600 15px/1.2 var(--sans);cursor:pointer}
body.bb-home .demo-walk :is(a,button):focus-visible{outline:3px solid #fff!important;outline-offset:3px!important}

@media (max-width:999px){
  /* a phone shows the acting view only; the two views share one place and cross-fade */
  body.bb-home .walk-stage{display:block;position:relative}
  body.bb-home .walk-stage>.walk-pane{position:absolute;left:0;right:0;top:0}
  body.bb-home .walk-stage>.walk-pane[data-acting]{position:relative}
  body.bb-home .walk-stage>.walk-pane:not([data-acting]){visibility:hidden;opacity:0}
  body.bb-home .walk-phone{padding:0;border-radius:12px;background:none;box-shadow:none}
  body.bb-home .walk-phone .walk-shot{border-radius:12px}
  body.bb-home .walk-who{font-size:13px;margin-bottom:6px}
  body.bb-home .ws-callout{font-size:16px;line-height:1.32;padding:10px 14px 12px}
  body.bb-home .ws-callout .ws-co-step{margin-bottom:4px;font-size:11px}
  body.bb-home .ws-callout .ws-co-press{margin-top:6px;font-size:16.5px}
  body.bb-home .demo-walk-end-h{display:none}
  body.bb-home .demo-walk-end{justify-content:flex-start}
  body.bb-home .walk-again{padding:0 12px;font-size:14px}
  body.bb-home .demo-walk-step{font-size:14px;text-align:right}
}

/* W-4 (VALIDATE): both views hold their size from the FIRST paint, so nothing below the walk moves when walk.js runs. The boxes take the
   pictures' proportions here (walk-data.js: desk team 1004x612 and Dana's 348x598 in the column above, which hugs her screen; phone
   342x696; the package builder checks these numbers against the data) and walk.js sets the same sizes, unrounded. (scripting:enabled): a
   page whose scripts do not run reserves nothing; a browser that does not know the query keeps the [data-walk-js] rows above. */
@media (scripting:enabled){
  body.bb-home .workspace-wrap .demo-walk-top{height:56px!important;min-height:0!important;flex-wrap:nowrap!important;row-gap:0!important;padding:0 0 4px!important}
  body.bb-home .walk-stage{container-type:inline-size}
  body.bb-home .walk-pane[data-side="team"] .walk-shot{aspect-ratio:1004/612}
  body.bb-home .walk-phone .walk-shot{height:min(598px,calc((100cqw - 16px - min(362px,calc(26.1845cqw + .1308px))) * 612 / 1004 - 14px))}
}
@media (scripting:enabled) and (max-width:999px){
  body.bb-home .workspace-wrap .demo-walk-top{height:92px!important;flex-wrap:wrap!important;align-content:center!important;row-gap:8px!important;padding:0 0 6px!important}
  body.bb-home .walk-stage .walk-pane .walk-shot{height:auto;aspect-ratio:342/696}
}

/* motion (REQ-HOMEPAGE-FLICKER-1 F-a..F-g): nothing pops; with reduced motion every change is one clean swap and nothing pulses */
@media (prefers-reduced-motion:no-preference){
  body.bb-home .ws-spot:not([data-end]){animation:ws-glow 1.6s ease-in-out infinite}
  /* the halo pulses at the end, and keeps pulsing while it fades out at Start over (walk.js [data-walk-halo-out], .26 s) */
  body.bb-home .demo-walk-top .walk-next::after{transition:opacity .22s ease-out}
  body.bb-home .demo-walk-top .walk-next{transition:opacity .22s ease-out}
  body.bb-home .workspace-wrap[data-walk-js]:not([data-walk-end]) .demo-walk-top .walk-next{transition:opacity .22s ease-out,visibility 0s linear .22s}
  /* on a phone the row fades out whole while it changes its layout (walk.js rowDip); the halo comes or goes with the row, not after it */
  body.bb-home .workspace-wrap[data-walk-rowdip] .demo-walk-top .walk-next::after{transition:none}
  body.bb-home .workspace-wrap:is([data-walk-end],[data-walk-halo-out]) .demo-walk-top .walk-next::after{animation:walk-halo 1.6s ease-in-out infinite}
  body.bb-home .walk-pane :is(.walk-shot,.walk-phone){transition:filter .35s ease}
  body.bb-home .ws-img{transition:opacity .22s ease-out}
  body.bb-home .ws-img[data-walk-arriving],body.bb-home .ws-img[data-walk-leaving]{opacity:0}
  body.bb-home :is(.walk-call,.ws-callout,.demo-walk-end,.demo-walk-step,#walk-mail){transition:opacity .18s ease-out}
  body.bb-home :is(.walk-call,.ws-callout,.demo-walk-end,.demo-walk-step,#walk-mail)[data-walk-leaving]{opacity:0}
  body.bb-home :is(.walk-call,.ws-callout,.demo-walk-end,.demo-walk-step):not([hidden]){animation:walk-fade-in .22s ease-out}
  body.bb-home .walk-mail:not([hidden]){animation:walk-mail-in .45s ease-out}
  /* the counter and the who-labels change their words through a fade: out .09 s, words, in .09 s (walk.js swapText) */
  body.bb-home .demo-walk-step,body.bb-home .walk-who{transition:opacity .09s ease}
  body.bb-home :is(.demo-walk-step,.walk-who)[data-walk-swap]{opacity:0}
}
@media (max-width:999px) and (prefers-reduced-motion:no-preference){
  body.bb-home .walk-stage>.walk-pane{transition:opacity .22s ease-out,visibility 0s linear 0s}
  body.bb-home .walk-stage>.walk-pane:not([data-acting]){transition:opacity .22s ease-out,visibility 0s linear .22s}
}
@keyframes ws-glow{50%{box-shadow:0 0 0 4px #E3BD5E,0 0 34px 12px rgba(213,166,58,.8),0 0 0 200vmax rgba(14,22,40,.58)}}
@keyframes walk-halo{50%{box-shadow:0 0 0 4px #E3BD5E,0 0 32px 10px rgba(213,166,58,.75)}}
@keyframes walk-fade-in{from{opacity:0}}
@keyframes walk-mail-in{from{transform:translateY(24px);opacity:0}}