/* Visual brief: silhouettes first; names/taglines second; exploration controls
 * tertiary. Original supplied palette, existing font/radius tokens, 24/32/48px
 * group spacing. Only .bc-* selectors; no body/button/card/global resets. */
.bc-host { --bc-max-width:1000px; --bc-min-height:460px; --bc-card-aspect:.84; --bc-mobile-width:88%; --bc-mobile-max:360px; width:100%; min-width:0; color:var(--ink,#1d1d1f); font-family:var(--font-body,sans-serif); container-type:inline-size; }
.bc-host.bc-workspace {margin-top:48px;}
.bc-host .bc-section {width:100%;max-width:var(--bc-max-width);margin:0 auto;}
.bc-host .bc-intro {margin:0 0 24px;}
.bc-host .bc-intro h3 {margin:0 0 8px;font-family:var(--font-display,sans-serif);font-size:clamp(22px,2.5vw,32px);font-weight:600;line-height:1.25;letter-spacing:-.035em;}
.bc-host .bc-intro p {margin:0;color:#62656c;font-size:13px;line-height:1.65;}
.bc-host .bc-deck {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;min-width:0;}
.bc-host .bc-card {position:relative;min-width:0;min-height:var(--bc-min-height);aspect-ratio:var(--bc-card-aspect);overflow:hidden;border:1px solid transparent;border-radius:var(--radius-lg,18px);background:var(--bc-surface);color:var(--bc-text);isolation:isolate;touch-action:pan-x pan-y;}
.bc-host .bc-card-head {position:absolute;top:24px;left:24px;right:24px;display:flex;align-items:center;justify-content:space-between;gap:12px;z-index:2;}
.bc-host .bc-brand {display:flex;align-items:center;gap:8px;}
.bc-host .bc-brand-icon {display:block;width:27px;height:27px;}
.bc-host .bc-brand h4 {margin:0;font-size:14px;line-height:1;font-weight:650;letter-spacing:-.02em;}
.bc-host .bc-number {font:10px/1 "SFMono-Regular",Consolas,monospace;color:var(--bc-secondary);letter-spacing:.04em;}
.bc-host .bc-field {position:absolute;top:77px;right:18px;bottom:102px;left:18px;display:flex;align-items:center;justify-content:center;}
.bc-host .bc-field canvas {display:block;width:100%;height:100%;}
.bc-host .bc-card-foot {position:absolute;bottom:24px;left:24px;right:24px;z-index:2;}
.bc-host .bc-tagline {margin:0 0 8px;font-size:15px;line-height:1.55;letter-spacing:.045em;font-weight:500;}
.bc-host .bc-source {display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:0;border:0;border-radius:0;color:var(--bc-secondary);background:transparent;font:500 12px/1.7 var(--font-body,sans-serif);letter-spacing:.015em;cursor:pointer;}
.bc-host .bc-arrow {display:inline-block;font-size:16px;line-height:1;transition:transform .25s;}
.bc-host .bc-source:hover,.bc-host .bc-source[aria-pressed=true] {color:var(--bc-text);}
.bc-host .bc-source:hover .bc-arrow {transform:translateX(4px);}
.bc-host .bc-pin {display:inline-block;width:4px;height:4px;border-radius:50%;background:currentColor;opacity:0;}
.bc-host .bc-source[aria-pressed=true] .bc-pin {opacity:1;}
.bc-host .bc-footer {display:flex;align-items:center;justify-content:space-between;gap:16px;padding-top:16px;}
.bc-host .bc-footer p {margin:0;color:#62656c;font-size:12px;line-height:1.7;}
.bc-host .bc-motion {display:flex;align-items:center;gap:8px;flex-shrink:0;min-height:44px;padding:8px 0;border:0;background:transparent;color:#555962;font:500 12px/1.5 var(--font-body,sans-serif);cursor:pointer;}
.bc-host .bc-motion-symbol {display:inline-flex;width:12px;height:12px;align-items:center;justify-content:center;gap:3px;}
.bc-host .bc-motion-symbol::before,.bc-host .bc-motion-symbol::after {content:"";display:block;width:2px;height:10px;background:currentColor;}
.bc-host .bc-motion[aria-pressed=true] .bc-motion-symbol::before {width:0;height:0;border-top:5px solid transparent;border-bottom:5px solid transparent;border-left:7px solid currentColor;background:transparent;}
.bc-host .bc-motion[aria-pressed=true] .bc-motion-symbol::after {display:none;}
.bc-host .bc-status {position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0;}
.bc-host .bc-mobile-hint {display:none;}
.bc-host .bc-source:focus-visible,.bc-host .bc-motion:focus-visible,.bc-host .bc-deck:focus-visible {outline:2px solid currentColor;outline-offset:4px;}
@media(max-width:760px){
  .bc-host .bc-deck {grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:min(var(--bc-mobile-width),var(--bc-mobile-max));gap:12px;overflow-x:auto;overflow-y:hidden;max-width:100%;padding-bottom:12px;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;scrollbar-width:thin;scrollbar-color:#b8bbc3 transparent;}
  .bc-host .bc-card {min-height:var(--bc-mobile-min-height,430px);scroll-snap-align:start;}
  .bc-host .bc-card-head,.bc-host .bc-card-foot {left:20px;right:20px;}
  .bc-host .bc-field {left:12px;right:12px;}
  .bc-host .bc-tagline {font-size:14px;}
  .bc-host .bc-footer p {font-size:11px;max-width:220px;}
  .bc-host .bc-mobile-hint {display:inline;}
  .bc-host.bc-workspace {margin-top:32px;}
}
@media(prefers-reduced-motion:reduce){.bc-host .bc-arrow{transition:none;}}
/* The same deck also works inside a narrow desktop container, not just phones. */
@container(max-width:760px){
  .bc-host .bc-deck {grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:min(var(--bc-mobile-width),var(--bc-mobile-max));gap:12px;overflow-x:auto;overflow-y:hidden;max-width:100%;padding-bottom:12px;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;scrollbar-width:thin;scrollbar-color:#b8bbc3 transparent;}
  .bc-host .bc-card {min-height:var(--bc-mobile-min-height,430px);scroll-snap-align:start;}
  .bc-host .bc-card-head,.bc-host .bc-card-foot {left:20px;right:20px;}
  .bc-host .bc-field {left:12px;right:12px;}
  .bc-host .bc-tagline {font-size:14px;}
  .bc-host .bc-footer p {font-size:11px;max-width:220px;}
  .bc-host .bc-mobile-hint {display:inline;}
}

/* Login composition: one integrated hero, not an extra page section.
 * Preserve the standalone component's proportions everywhere else. */
.bc-login-stage {grid-template-columns:minmax(0,1.2fr) minmax(310px,.8fr);gap:24px;padding:24px;min-height:100svh;}
.bc-login-stage .bc-login-hero {min-width:0;min-height:calc(100svh - 48px);padding:clamp(28px,4vw,64px);justify-content:center;background:#232426;}
.bc-login-stage .bc-login-hero::after {display:none;}
.bc-login-stage .bc-login-kicker {display:flex;align-items:center;justify-content:space-between;gap:16px;color:#aeb1ba;font:500 10px/1.5 "SFMono-Regular",Consolas,monospace;letter-spacing:.09em;}
.bc-login-stage .bc-login-kicker>span:first-child {color:#f5f5f7;letter-spacing:.16em;}
.bc-login-stage .bc-login-hero h1 {margin:28px 0 30px;font-size:clamp(30px,3.35vw,52px);line-height:1.2;letter-spacing:-.045em;font-weight:600;}
.bc-login-stage .signal-legend {gap:20px;margin-top:16px;padding-top:16px;border-top:1px solid #ffffff14;color:#aeb1ba;font-size:10px;}
.bc-login-stage .signal-legend .dot {width:5px;height:5px;}
.bc-login-stage .login-card {width:100%;max-width:420px;min-width:0;padding:32px clamp(20px,3vw,44px);}
.bc-login-stage .login-card h2 {font-size:clamp(28px,2.6vw,36px);}
.bc-login-stage .login-card>p {font-size:14px;}
.bc-host.bc-hero .bc-intro {display:none;}
.bc-host.bc-hero .bc-deck {grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-flow:row;grid-auto-columns:auto;gap:14px;overflow:visible;padding:0;}
.bc-host.bc-hero .bc-card {height:clamp(280px,44svh,420px);min-height:0;aspect-ratio:auto;border-radius:16px;}
.bc-host.bc-hero .bc-card-head {top:18px;left:16px;right:16px;gap:6px;}
.bc-host.bc-hero .bc-brand {gap:5px;}
.bc-host.bc-hero .bc-brand h4 {font-size:13px;}
.bc-host.bc-hero .bc-number {font-size:8px;}
.bc-host.bc-hero .bc-field {top:60px;bottom:98px;left:12px;right:12px;}
.bc-host.bc-hero .bc-card-foot {bottom:14px;left:16px;right:16px;}
.bc-host.bc-hero .bc-tagline {font-size:12px;letter-spacing:0;margin-bottom:2px;}
.bc-host.bc-hero .bc-source {font-size:10px;gap:6px;}
.bc-host.bc-hero .bc-footer {gap:8px;padding-top:8px;}
.bc-host.bc-hero .bc-footer p,.bc-host.bc-hero .bc-motion {color:#b3b8c3;font-size:10px;}
.bc-host.bc-hero .bc-mobile-hint {display:none;}
@media(min-width:721px) and (max-height:760px){
  .bc-login-stage .bc-login-hero {padding:24px 32px;}
  .bc-login-stage .bc-login-hero h1 {margin:18px 0 22px;font-size:clamp(30px,3vw,42px);}
  .bc-host.bc-hero .bc-card {height:clamp(240px,42svh,320px);}
  .bc-login-stage .signal-legend {margin-top:8px;padding-top:12px;}
}
@media(max-width:720px){
  .bc-login-stage {grid-template-columns:minmax(0,1fr);gap:8px;padding:12px;align-content:start;}
  .bc-login-stage .bc-login-hero {display:flex;min-height:0;padding:20px 20px 12px;border-radius:20px;}
  .bc-login-stage .bc-login-kicker {font-size:8px;gap:8px;}
  .bc-login-stage .bc-login-hero h1 {font-size:25px;line-height:1.18;margin:14px 0 18px;}
  .bc-login-stage .signal-legend {display:none;}
  .bc-login-stage .login-card {max-width:440px;padding:24px 20px 16px;}
  .bc-login-stage .login-card h2 {font-size:28px;margin-top:8px;}
  .bc-login-stage .login-card>p {margin-bottom:20px;font-size:12px;}
  .bc-host.bc-hero .bc-deck {grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:88%;gap:10px;overflow-x:auto;overflow-y:hidden;max-width:100%;padding-bottom:8px;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;}
  .bc-host.bc-hero .bc-card {height:196px;scroll-snap-align:start;border-radius:12px;}
  .bc-host.bc-hero .bc-card-head {top:10px;left:14px;right:14px;}
  .bc-host.bc-hero .bc-field {top:38px;bottom:62px;left:12px;right:12px;}
  .bc-host.bc-hero .bc-card-foot {bottom:5px;left:14px;right:14px;}
  .bc-host.bc-hero .bc-tagline {font-size:11px;margin:0;}
  .bc-host.bc-hero .bc-source {min-height:36px;}
  .bc-host.bc-hero .bc-footer {padding-top:0;}
  .bc-host.bc-hero .bc-footer p {font-size:9px;}
  .bc-host.bc-hero .bc-mobile-hint {display:inline;}
}