:root {
  --font-body: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Microsoft YaHei', sans-serif;
  --font-display: 'PingFang SC', 'Microsoft YaHei', sans-serif;
  --font-data: 'SFMono-Regular', Consolas, monospace;
  --space-xs: 8px; --space-sm: 12px; --space-md: 20px; --space-lg: 32px; --space-xl: 48px; --space-section: 100px;
  --brand-solid: #f05a22; --photo-ink: #201a17; --photo-white: #ffffff;
  font: 15px/1.7 var(--font-body); color: var(--bh-color-ink); background: var(--bh-color-canvas);
  font-synthesis: none; -webkit-font-smoothing: antialiased;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 24px; }
body { margin: 0; min-width: 320px; }
h1,h2,h3,p { margin: 0; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: 0; }
button,a,summary { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
img { display: block; max-width: 100%; }
:focus-visible { outline: 3px solid var(--bh-color-accent-strong); outline-offset: 4px; }
.wrap { width: min(1200px, calc(100% - 96px)); margin-inline: auto; }
.section { padding-block: var(--space-section); }
.skip-link { position: fixed; z-index: 10; top: -100px; left: 20px; padding: var(--space-md); background: var(--bh-color-surface); }
.skip-link:focus { top: 10px; }
.site-header { height: 100px; display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); border-bottom: 1px solid var(--bh-color-line); }
.brand { display: flex; gap: var(--space-sm); align-items: center; flex-shrink: 0; }
.brand img { border-radius: var(--bh-radius-control); }
.brand span { font-size: 24px; font-weight: 900; letter-spacing: -.6px; line-height: 1.15; }
.brand small { display: block; font-weight: 400; font-size: 10px; letter-spacing: 1.5px; color: var(--bh-color-muted); margin-top: var(--space-xs); }
nav { display: flex; gap: 36px; font-size: 13px; color: var(--bh-color-body); }
nav a:hover { color: var(--bh-color-accent-strong); }
.button { display: inline-flex; align-items: center; justify-content: space-between; gap: var(--space-xl); min-height: 52px; padding: 12px 24px; background: var(--bh-color-ink); color: var(--bh-color-surface); border: 1px solid var(--bh-color-ink); border-radius: var(--bh-radius-action); font-weight: 700; transition: opacity .2s, transform .2s; }
.button:hover { opacity: .8; transform: translateY(-2px); }
.button span,.text-link span { font-size: 22px; line-height: 1; font-weight: 400; }
.button-small { min-height: 44px; font-size: 12px; padding: 9px 16px; gap: var(--space-md); }
.button-outline { background: var(--bh-color-surface); color: var(--bh-color-ink); border-color: var(--bh-color-line); }
.eyebrow { color: var(--bh-color-muted); font-size: 12px; font-weight: 600; letter-spacing: 1px; }
.dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--bh-color-accent); margin-right: var(--space-xs); }
.hero { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 60px; padding-block: 56px 64px; }
h1 { margin-top: 26px; font: 900 clamp(38px,3.8vw,55px)/1.22 var(--font-display); letter-spacing: -2.4px; white-space: nowrap; }
h1 > span { display: inline-block; color: var(--bh-color-accent); font-size: clamp(80px,8.1vw,116px); line-height: 1.12; letter-spacing: -6px; margin-top: 8px; }
.hero-description { margin-top: 24px; color: var(--bh-color-body); font-size: 15px; line-height: 1.95; }
.hero-actions { display: flex; gap: var(--space-sm); flex-wrap: wrap; margin-top: 26px; }
.scan-inline { display: flex; align-items: center; gap: var(--space-md); margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--bh-color-line); width: fit-content; }
.scan-inline strong { font-size: 13px; }.scan-inline p { color: var(--bh-color-body); font-size: 12px; margin-top: 5px; }.scan-inline small { display: block; color: var(--bh-color-muted); font-size: 10px; margin-top: 8px; }
.hero-visual { position: relative; min-height: 604px; padding-left: 70px; }
.photo-frame { position: absolute; inset: 0 0 0 70px; border-radius: var(--bh-radius-card); overflow: hidden; background: var(--bh-color-control); }
.hero-photo { width: 100%; height: 100%; object-fit: cover; object-position: 68% center; }
.photo-caption { position: absolute; bottom: 0; left: 0; right: 0; padding: 70px 22px 22px; background: linear-gradient(transparent, var(--photo-ink)); color: var(--photo-white); text-align: right; font-size: 12px; letter-spacing: .8px; }
.mini-preview { position: relative; z-index: 1; width: 306px; margin: 45px 0 0 -70px; background: var(--bh-color-canvas); border: 5px solid var(--bh-color-surface); border-radius: 26px; overflow: hidden; box-shadow: var(--bh-shadow-float); transform: rotate(-3deg); }
.mini-status { display: flex; justify-content: space-between; padding: 14px 17px 10px; font-size: 11px; }.mini-status > span { border: 1px solid var(--bh-color-line); padding: 0 7px; border-radius: var(--bh-radius-pill); font-size: 10px; }
.mini-content { padding: 13px; }.mini-identity { display: flex; align-items: center; gap: 7px; font-size: 11px; font-weight: 700; }.mini-identity img { border-radius: 4px; }.mini-identity > span { margin-left: auto; color: var(--bh-color-subtle); font-size: 8px; font-weight: 400; }
.mini-content h2 { font-size: 20px; line-height: 1.2; letter-spacing: -.7px; margin-top: 15px; font-weight: 900; }.mini-content h2 em { color: var(--bh-color-accent); font-style: normal; }
.mini-subtitle { color: var(--bh-color-muted); font-size: 8px; margin-top: 7px; }.mini-search { display: flex; align-items: center; justify-content: space-between; font-size: 10px; color: var(--bh-color-muted); background: var(--bh-color-surface); border: 1px solid var(--bh-color-line); border-radius: var(--bh-radius-control); padding: 6px 7px 6px 12px; margin-top: 18px; }.mini-search > span { display: grid; place-items: center; border-radius: 50%; background: var(--bh-color-ink); color: var(--bh-color-surface); width: 26px; height: 26px; font-size: 21px; }
.mini-segments { display: flex; background: var(--bh-color-control); border-radius: var(--bh-radius-control); padding: 3px; margin-top: 12px; font-size: 9px; text-align: center; }.mini-segments > * { flex: 1; padding: 4px; }.mini-segments b { background: var(--bh-color-surface); border-radius: var(--bh-radius-action); }.mini-filters { display: flex; gap: 6px; margin-block: 12px; font-size: 8px; color: var(--bh-color-body); }.mini-filters span { border: 1px solid var(--bh-color-line); background: var(--bh-color-surface); border-radius: var(--bh-radius-pill); padding: 3px 8px; }
.mini-job { border: 1px solid var(--bh-color-line); border-radius: var(--bh-radius-card); background: var(--bh-color-surface); padding: 13px 10px; box-shadow: var(--bh-shadow-card); }.mini-job + .mini-job { margin-top: 10px; }.mini-job-top { display: flex; align-items: center; gap: 10px; }.mini-store { display: grid; place-items: center; width: 36px; height: 36px; background: var(--bh-color-accent-soft); color: var(--bh-color-accent-strong); border-radius: var(--bh-radius-card); font-weight: 900; }.mini-job h3 { font-size: 12px; font-weight: 900; }.mini-job h3 small { color: var(--bh-color-accent-strong); background: var(--bh-color-accent-soft); font-size: 8px; padding: 3px; border-radius: 3px; }.mini-job p { color: var(--bh-color-body); font-size: 9px; margin-top: 4px; }.mini-facts { color: var(--bh-color-muted); font-size: 8px; margin: 10px 0 0 46px; }.mini-tags { display: flex; gap: 4px; margin: 8px 0 0 46px; }.mini-tags span { border-radius: var(--bh-radius-pill); padding: 3px 5px; font-size: 7px; color: var(--bh-color-accent-strong); background: var(--bh-color-accent-soft); }
.mini-tabbar { display: flex; background: var(--bh-color-surface); border-top: 1px solid var(--bh-color-divider); margin-top: 5px; padding: 7px 0 12px; }.mini-tabbar > span { flex: 1; text-align: center; color: var(--bh-color-muted); font-size: 16px; line-height: 1.2; }.mini-tabbar small { display: block; font-size: 8px; margin-top: 4px; }.mini-tabbar .selected { color: var(--bh-color-accent); }
.roles-band { border-block: 1px solid var(--bh-color-line); }.roles-band .wrap { min-height: 78px; display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); }.roles-band p { font-size: 11px; color: var(--bh-color-muted); }.roles-band span { font-size: 15px; font-weight: 650; }.roles-band .role-band-end { color: var(--bh-color-accent); font-size: 24px; }
h2 { font-family: var(--font-display); font-size: clamp(28px,3vw,40px); font-weight: 850; line-height: 1.35; letter-spacing: -1.2px; margin-top: 14px; }
.section-heading { display: flex; justify-content: space-between; align-items: end; gap: var(--space-md); margin-bottom: 40px; }.section-heading > p { color: var(--bh-color-muted); font-size: 13px; }
.audience-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-md); }.audience-card { padding: 38px; border: 1px solid var(--bh-color-line); border-radius: var(--bh-radius-card); background: var(--bh-color-surface); box-shadow: var(--bh-shadow-card); }.label { display: inline-block; font-size: 11px; padding: 5px 10px; background: var(--bh-color-accent-soft); color: var(--bh-color-accent-strong); border-radius: var(--bh-radius-action); }.employer-card .label { background: var(--bh-color-accent-soft); color: var(--bh-color-accent-strong); }.audience-card h3 { font-size: 30px; line-height: 1.5; letter-spacing: -.8px; margin-top: 22px; }.audience-card p { color: var(--bh-color-muted); font-size: 13px; line-height: 1.9; margin-top: 16px; }.audience-card ul { list-style: none; padding: 22px 0; margin: 0; color: var(--bh-color-body); font-size: 12px; line-height: 2.5; }.audience-card li::before { content: '✓'; margin-right: 10px; color: var(--bh-color-accent-strong); }.text-link { display: flex; align-items: center; justify-content: space-between; width: 100%; border-top: 1px solid var(--bh-color-divider); padding: 18px 0 0; color: var(--bh-color-ink); background: transparent; font-weight: 650; font-size: 13px; }.text-link:hover { color: var(--bh-color-accent-strong); }
.process-section { background: var(--bh-color-surface-muted); }.role-switch { display: flex; gap: 4px; padding: 4px; border-radius: var(--bh-radius-control); background: var(--bh-color-control); flex-shrink: 0; }.role-switch button { border-radius: var(--bh-radius-action); background: transparent; color: var(--bh-color-muted); min-height: var(--bh-touch-min); padding: 10px 22px; font-size: 13px; }.role-switch button[aria-pressed=true] { background: var(--bh-color-surface); color: var(--bh-color-ink); font-weight: 750; }
.process-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 96px; align-items: center; }.step { display: flex; gap: 24px; padding: 26px 0; border-bottom: 1px solid var(--bh-color-line); }.step:last-child { border: 0; }.step-number { color: var(--bh-color-accent-strong); font: 14px/2 var(--font-data); }.step h3 { font-size: 19px; margin-bottom: 8px; }.step p { color: var(--bh-color-muted); font-size: 13px; max-width: 340px; }
.resume-preview { border: 1px solid var(--bh-color-line); background: var(--bh-color-canvas); border-radius: var(--bh-radius-card); padding: 24px; }.preview-heading { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 20px; font-size: 12px; }.preview-heading small { color: var(--bh-color-subtle); font-size: 10px; }.preview-sheet { background: var(--bh-color-surface); border: 1px solid var(--bh-color-line); border-radius: var(--bh-radius-card); padding: 26px; box-shadow: var(--bh-shadow-card); }.preview-logo { display: grid; place-items: center; width: 42px; height: 42px; background: var(--bh-color-accent-soft); color: var(--bh-color-accent-strong); border-radius: var(--bh-radius-control); font-size: 26px; margin-bottom: 16px; }.preview-sheet h3 { font-size: 21px; }.preview-sheet p { color: var(--bh-color-muted); font-size: 11px; margin-top: 4px; }.preview-tags { display: flex; gap: 8px; margin-top: 16px; }.preview-tags span { background: var(--bh-color-surface-muted); color: var(--bh-color-body); border-radius: var(--bh-radius-pill); font-size: 10px; padding: 4px 8px; }.preview-sheet dl { margin: 24px 0; font-size: 11px; }.preview-sheet dl div { display: flex; justify-content: space-between; gap: 12px; margin-top: 12px; }.preview-sheet dt { color: var(--bh-color-muted); flex-shrink: 0; }.preview-sheet dd { margin: 0; text-align: right; }.preview-footer { border-top: 1px solid var(--bh-color-divider); color: var(--bh-color-body); padding-top: 16px; font-size: 10px; }.preview-footer span { color: var(--bh-color-green); }.preview-note { display: block; text-align: right; font-size: 11px; color: var(--bh-color-muted); margin-top: 20px; }
.about-heading { display: grid; grid-template-columns: 1fr 1fr; gap: 96px; align-items: end; }.about-heading h2 { font-size: 48px; }.about-heading h2 span { color: var(--bh-color-accent); }.about-heading p { font-size: 14px; color: var(--bh-color-body); }.about-heading p + p { margin-top: 20px; }.principles { display: grid; grid-template-columns: repeat(3,1fr); gap: 48px; margin-top: 50px; padding-top: 32px; border-top: 1px solid var(--bh-color-line); }.principles article > span { color: var(--bh-color-accent-strong); font-size: 26px; }.principles h3 { font-size: 17px; margin-block: 10px; }.principles p { font-size: 12px; color: var(--bh-color-muted); }
.faq-section { display: grid; grid-template-columns: .8fr 1.2fr; gap: 64px; border-top: 1px solid var(--bh-color-line); }.faq-list details { border-bottom: 1px solid var(--bh-color-line); }.faq-list summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; list-style: none; cursor: pointer; padding: 22px 0; font-size: 14px; font-weight: 650; }.faq-list summary::-webkit-details-marker { display: none; }.faq-list summary span { color: var(--bh-color-muted); font-size: 20px; }.faq-list details[open] summary span { transform: rotate(45deg); }.faq-list p { font-size: 13px; color: var(--bh-color-muted); padding-bottom: 24px; }
.closing { padding-block: 64px; background: var(--bh-color-accent-soft); border-block: 1px solid var(--bh-color-line); }.closing-layout { display: flex; align-items: center; justify-content: space-between; gap: 48px; }.closing h2 { font-size: clamp(32px,4.2vw,60px); line-height: 1.4; }.closing h2 span { display: block; color: var(--bh-color-accent-strong); }.closing-description { color: var(--bh-color-body); font-size: 15px; margin-top: 20px; }.closing-roles { display: flex; gap: 16px; font-size: 11px; color: var(--bh-color-muted); margin-top: 32px; }.closing-roles span + span { padding-left: 16px; border-left: 1px solid var(--bh-color-line); }.closing-code { text-align: center; padding: 22px 36px; background: var(--bh-color-surface); border: 1px solid var(--bh-color-line); border-radius: var(--bh-radius-card); }.closing-code strong { display: block; font-size: 12px; margin-top: 16px; }.closing-code p { font-size: 11px; color: var(--bh-color-muted); margin-top: 4px; }
.code-slot { position: relative; width: 180px; height: 180px; background: var(--bh-color-surface); border: 1px solid var(--bh-color-line); border-radius: var(--bh-radius-control); padding: 12px; margin-inline: auto; display: grid; place-items: center; }.code-slot::before,.code-slot::after { position: absolute; content: ''; width: 18px; height: 18px; border-color: var(--bh-color-accent); border-style: solid; pointer-events: none; }.code-slot::before { top: -1px; left: -1px; border-width: 2px 0 0 2px; border-radius: var(--bh-radius-control) 0 0 0; }.code-slot::after { bottom: -1px; right: -1px; border-width: 0 2px 2px 0; border-radius: 0 0 var(--bh-radius-control) 0; }.code-state { display: flex; align-items: center; flex-direction: column; justify-content: center; text-align: center; gap: 8px; }.code-state img { border-radius: var(--bh-radius-control); }.code-state strong { font-size: 11px; margin: 0; line-height: 1.4; color: var(--bh-color-body); }.code-state > span { font-size: 9px; color: var(--bh-color-muted); }.miniapp-code-image { width: 100%; height: 100%; object-fit: contain; background: var(--photo-white); }.code-slot-small { width: 106px; height: 106px; padding: 8px; margin: 0; flex-shrink: 0; }.code-slot-small .code-state { gap: 6px; }.code-slot-small img:not(.miniapp-code-image) { width: 28px; height: 28px; }.code-slot-small .code-state strong { font-size: 9px; }.code-slot-small .code-state > span { display: none; }.code-retry { background: transparent; color: var(--bh-color-accent-strong); text-decoration: underline; font-size: 11px; min-height: var(--bh-touch-min); padding: 4px 12px; }.code-slot-small:has(.code-retry) .code-state img { display: none; }
.site-footer { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding-block: 36px; }.site-footer .brand span { font-size: 20px; }.site-footer > span,.site-footer > small { font-size: 10px; color: var(--bh-color-muted); }
dialog { width: min(420px,calc(100% - 32px)); max-height: calc(100dvh - 32px); overflow: auto; padding: 36px 26px; border: 1px solid var(--bh-color-line); border-radius: var(--bh-radius-card); color: var(--bh-color-ink); background: var(--bh-color-canvas); box-shadow: var(--bh-shadow-float); text-align: center; }dialog::backdrop { background: var(--bh-color-overlay); backdrop-filter: blur(5px); }.dialog-close { position: absolute; top: 8px; right: 8px; width: 44px; height: 44px; color: var(--bh-color-muted); background: transparent; font-size: 26px; }.dialog-brandline { display: flex; justify-content: center; align-items: center; gap: 10px; margin-bottom: 20px; font-size: 20px; }.dialog-brandline img { border-radius: var(--bh-radius-control); }dialog h2 { font-size: 25px; margin-block: 12px 24px; }.code-slot-dialog { width: 210px; height: 210px; }.dialog-scan { font-size: 14px; margin-top: 20px; font-weight: 650; }#entry-instruction { font-size: 12px; color: var(--bh-color-muted); max-width: 270px; margin: 12px auto 0; }body:has(dialog[open]) { overflow: hidden; }[hidden] { display: none !important; }
@media (max-width:1100px) { .wrap { width: calc(100% - 64px); }.hero { gap: 30px; }.hero-visual { padding-left: 35px; }.photo-frame { left: 35px; }.mini-preview { margin-left: -35px; width: 285px; }.process-grid,.about-heading { gap: 48px; }.audience-card { padding: 28px; }.hero .button { gap: 28px; }.roles-band p { max-width: 100px; } }
@media (max-width:850px) and (min-width:701px) { h1 { font-size: 32px; }h1 > span { font-size: 84px; }.hero { gap: 22px; }.mini-preview { width: 266px; }.hero .button { gap: 20px; padding-inline: 18px; }.scan-inline { gap: 12px; }.scan-inline strong { font-size: 11px; }.scan-inline p { font-size: 10px; }.scan-inline small { font-size: 8px; }nav { gap: 18px; }.brand span { font-size: 20px; }.hero-visual { min-height: 585px; }.photo-frame { left: 22px; } }
@media (max-width:700px) { :root { --space-section: 60px; }.wrap { width: calc(100% - 40px); }.site-header { height: 82px; gap: 12px; }.brand img { width: 40px; height: 40px; }.brand span { font-size: 20px; }.brand small { font-size: 8px; }nav { display: none; }.button-small { font-size: 11px; gap: 10px; padding-inline: 12px; }.hero { grid-template-columns: 1fr; padding-block: 36px 40px; gap: 36px; }.eyebrow { font-size: 10px; }h1 { font-size: clamp(32px,8.3vw,48px); letter-spacing: -1.5px; margin-top: 22px; }h1 > span { font-size: 86px; letter-spacing: -4px; }.hero-description { font-size: 14px; margin-top: 18px; }.hero-actions { margin-top: 22px; }.hero .button { min-width: 132px; gap: 28px; }.scan-inline { width: 100%; margin-top: 24px; padding-top: 20px; }.code-slot-small { width: 96px; height: 96px; }.scan-inline strong { font-size: 12px; }.hero-visual { min-height: 552px; padding-left: 24px; }.photo-frame { inset: 0 0 0 24px; }.mini-preview { width: min(290px,calc(100% - 10px)); margin: 28px 0 0 -24px; transform: rotate(-2deg); }.photo-caption { font-size: 10px; padding: 65px 15px 16px; }.roles-band .wrap { min-height: 100px; gap: 12px; justify-content: space-between; flex-wrap: wrap; padding-block: 16px; }.roles-band p { max-width: none; width: 100%; font-size: 10px; }.roles-band span { font-size: 12px; }.roles-band .role-band-end { display: none; }.section-heading { flex-direction: column; align-items: start; gap: 18px; margin-bottom: 28px; }h2 { font-size: 27px; letter-spacing: -.8px; }.section-heading > p { font-size: 12px; }.section-heading > p br { display: none; }.audience-grid,.process-grid,.about-heading,.faq-section { grid-template-columns: 1fr; gap: 24px; }.audience-card { padding: 26px; }.audience-card h3 { font-size: 26px; }.audience-card p { font-size: 12px; }.audience-card ul { font-size: 11px; }.process-grid { gap: 30px; }.resume-preview { padding: 18px; }.preview-sheet { padding: 20px; }.step { padding-block: 22px; gap: 18px; }.step h3 { font-size: 18px; }.about-heading h2 { font-size: 38px; }.about-heading p { font-size: 13px; }.principles { grid-template-columns: 1fr; gap: 28px; margin-top: 32px; }.principles article > span { float: left; width: 40px; line-height: 1.2; }.principles h3 { margin-top: 0; }.principles p { margin-left: 40px; }.faq-list summary { font-size: 13px; }.closing { padding-block: 44px; }.closing-layout { flex-direction: column; align-items: stretch; gap: 30px; }.closing h2 { font-size: 38px; }.closing-description { font-size: 13px; }.closing-roles { margin-top: 20px; }.closing-code { display: flex; flex-direction: column; align-items: center; padding: 24px; }.closing-code .code-slot { width: 180px; height: 180px; }.site-footer { flex-wrap: wrap; padding-block: 28px; }.site-footer > span { display: none; }.site-footer > small { font-size: 9px; } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior: auto !important; transition: none !important; animation: none !important; } }

/* The marketing hero amplifies the mini program brand accent; controls keep its shape. */
.hero-actions .button:first-child { background: var(--bh-color-accent); border-color: var(--bh-color-accent); color: var(--photo-ink); }
.hero-actions .button:first-child:hover { background: var(--bh-color-accent-strong); border-color: var(--bh-color-accent-strong); }
.hero-visual::after { content: "热爱上场。"; position: absolute; top: 18px; right: 18px; z-index: 2; padding: 9px 13px; background: var(--brand-solid); color: var(--photo-ink); border-radius: var(--bh-radius-action); font-size: 17px; font-weight: 900; letter-spacing: -1px; transform: rotate(5deg); }

.mini-tabbar img { width: 17px; height: 17px; margin-inline: auto; object-fit: contain; }
.code-slot-small:has(.miniapp-code-image:not([hidden])) { width: 144px; height: 144px; }

/* Paired coffee-world artifacts: a talent pass and a shop recruitment sign. */
.audience-card { padding: 0; overflow: hidden; }
.audience-body { padding: 30px 36px; }
.audience-art { height: 218px; position: relative; overflow: hidden; display: flex; align-items: center; padding: 30px 36px; border-bottom: 1px solid var(--bh-color-line); }
.candidate-art { background: var(--bh-color-accent-soft); }
.employer-art { background: var(--bh-color-accent); }
.art-type { position: relative; z-index: 1; }.art-type small { font-size: 11px; letter-spacing: 3px; color: var(--bh-color-body); }.art-type > strong { display: block; font-size: 65px; line-height: 1.25; letter-spacing: -4px; font-weight: 900; color: var(--bh-color-accent-strong); }.employer-art .art-type > strong { color: var(--photo-ink); }
.employer-art .art-type small { color: var(--photo-ink); }
.talent-pass,.store-sign { width: 190px; position: absolute; right: 34px; top: 25px; background: var(--bh-color-surface); border: 1px solid var(--bh-color-line); border-radius: var(--bh-radius-card); padding: 22px; transform: rotate(9deg); box-shadow: var(--bh-shadow-float); }.talent-pass::before { content: ''; position: absolute; width: 13px; height: 70px; left: calc(50% - 6px); top: -62px; background: var(--bh-color-accent); }.pass-slot { display: block; width: 36px; height: 5px; border-radius: var(--bh-radius-pill); margin: -8px auto 12px; background: var(--bh-color-control); }.talent-pass > small,.store-sign > small { color: var(--bh-color-muted); font-size: 9px; }.talent-pass > strong { display: block; font-size: 20px; line-height: 1.4; letter-spacing: -.6px; margin-top: 8px; }.pass-skills { display: flex; gap: 5px; margin-top: 13px; }.pass-skills span { color: var(--bh-color-accent-strong); background: var(--bh-color-accent-soft); border-radius: var(--bh-radius-pill); font-size: 8px; padding: 3px 7px; }.pass-bottom { display: flex; justify-content: space-between; border-top: 1px dashed var(--bh-color-line); margin-top: 14px; padding-top: 8px; font-size: 8px; }.pass-bottom > span { font-size: 14px; }
.store-sign { transform: rotate(-7deg); top: 28px; padding-top: 32px; }.sign-awning { position: absolute; inset: 0 0 auto; height: 15px; border-radius: var(--bh-radius-card) var(--bh-radius-card) 0 0; background: repeating-linear-gradient(90deg,var(--bh-color-accent) 0 19px,var(--bh-color-accent-soft) 19px 38px); }.store-sign > strong { display: block; font-size: 26px; font-weight: 900; margin-top: 7px; }.sign-rule { height: 3px; background: var(--bh-color-accent); width: 32px; margin: 10px 0; }.store-sign > span { font-size: 8px; color: var(--bh-color-body); }
.audience-body h3 { font-size: 27px; margin-top: 16px; }.audience-body p { font-size: 12px; }.audience-body ul { padding-block: 18px; }
.process-grid { gap: 60px; align-items: stretch; }
.step-hint { display: flex; justify-content: space-between; gap: 12px; font-size: 11px; color: var(--bh-color-muted); margin: 8px 0 22px; }.step-hint span { color: var(--bh-color-accent-strong); }
.steps { display: grid; gap: 12px; }
.step,.step:last-child { width: 100%; text-align: left; position: relative; border: 1px solid transparent; background: transparent; color: var(--bh-color-ink); border-radius: var(--bh-radius-card); padding: 22px; display: flex; align-items: start; gap: 18px; transition: background .2s, border-color .2s; }
.step:hover { background: var(--bh-color-canvas); }.step[aria-pressed=true] { background: var(--bh-color-surface); border-color: var(--bh-color-line); box-shadow: var(--bh-shadow-card); }.step[aria-pressed=true]::before { content: ''; position: absolute; width: 3px; top: 22px; bottom: 22px; left: -1px; background: var(--bh-color-accent); border-radius: var(--bh-radius-pill); }.step-number { font-size: 12px; padding-top: 2px; }.step-copy { flex: 1; }.step-copy > strong { display: block; font-size: 18px; }.step-copy > span { display: block; margin-top: 8px; font-size: 12px; line-height: 1.8; color: var(--bh-color-muted); }.step-arrow { font-size: 21px; color: var(--bh-color-subtle); }.step[aria-pressed=true] .step-arrow { color: var(--bh-color-accent-strong); }
.resume-preview { border: 0; padding: 28px 34px; background: var(--bh-color-accent-soft); position: relative; display: flex; flex-direction: column; min-width: 0; }
.stage-heading { display: flex; justify-content: space-between; gap: 12px; font-size: 11px; color: var(--bh-color-body); }.stage-heading small { font-size: 9px; color: var(--bh-color-muted); }.stage-title { font-size: 26px; letter-spacing: -1px; line-height: 1.4; margin: 16px 0 26px; }.stage-scene { background: var(--bh-color-surface); border: 1px solid var(--bh-color-line); border-radius: var(--bh-radius-card); padding: 24px; min-height: 248px; box-shadow: var(--bh-shadow-card); transform: rotate(-1.5deg); }.stage-note { color: var(--bh-color-muted); font-size: 11px; margin-top: 24px; line-height: 1.6; }.demo-person { display: flex; align-items: center; gap: 12px; }.demo-person strong { font-size: 15px; }.demo-person p { font-size: 10px; color: var(--bh-color-muted); margin-top: 4px; }.demo-avatar { display: grid; place-items: center; width: 42px; height: 42px; flex-shrink: 0; background: var(--bh-color-accent-soft); color: var(--bh-color-accent-strong); border-radius: var(--bh-radius-card); font-size: 22px; font-weight: 800; }.demo-tags { display: flex; gap: 6px; margin-top: 18px; }.demo-tags span { font-size: 9px; padding: 4px 9px; border-radius: var(--bh-radius-pill); background: var(--bh-color-surface-muted); color: var(--bh-color-body); }.demo-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-block: 24px; }.demo-fields small { display: block; font-size: 9px; color: var(--bh-color-muted); margin-bottom: 5px; }.demo-fields strong { font-size: 12px; }.demo-privacy { border-top: 1px dashed var(--bh-color-line); padding-top: 14px; color: var(--bh-color-body); font-size: 10px; }.demo-search { display: flex; justify-content: space-between; font-size: 11px; border-bottom: 1px solid var(--bh-color-divider); padding-bottom: 14px; }.demo-search span { color: var(--bh-color-accent-strong); }.demo-job { display: flex; align-items: center; gap: 12px; padding-top: 19px; }.demo-job strong { font-size: 13px; }.demo-job p { font-size: 10px; margin: 3px 0; }.demo-job em { color: var(--bh-color-accent-strong); font-style: normal; margin-left: 6px; }.demo-job small { font-size: 9px; color: var(--bh-color-muted); }.demo-timeline > div { display: flex; gap: 14px; align-items: center; padding: 17px 0; border-bottom: 1px solid var(--bh-color-divider); }.demo-timeline > div:last-child { border: 0; }.demo-timeline i { width: 9px; height: 9px; background: var(--bh-color-accent); border: 2px solid var(--bh-color-accent-soft); border-radius: 50%; }.demo-timeline span { flex: 1; }.demo-timeline strong { font-size: 13px; }.demo-timeline small { display: block; font-size: 10px; color: var(--bh-color-muted); margin-top: 4px; }.demo-timeline b { font-weight: 400; color: var(--bh-color-accent-strong); }.demo-posting > small,.demo-posting > span { display: block; font-size: 10px; color: var(--bh-color-muted); }.demo-posting > strong { display: block; font-size: 27px; letter-spacing: -1px; margin: 9px 0; }.demo-share-card { border-top: 6px solid var(--bh-color-accent); padding: 14px 0; }.demo-share-card small { display: block; font-size: 10px; color: var(--bh-color-muted); }.demo-share-card strong { display: block; font-size: 32px; line-height: 1.2; letter-spacing: -1px; margin: 14px 0; }.demo-share-card > span { font-size: 10px; }.share-path { display: flex; justify-content: space-between; align-items: center; padding-top: 14px; border-top: 1px dashed var(--bh-color-line); font-size: 10px; }.share-path b { color: var(--bh-color-accent-strong); }.demo-people-head { border-bottom: 1px solid var(--bh-color-line); padding-bottom: 16px; margin-bottom: 18px; }.demo-people-head strong { font-size: 14px; }.demo-people-head span { display: block; color: var(--bh-color-muted); font-size: 10px; margin-top: 4px; }.scene-people .demo-person + .demo-person { margin-top: 18px; }.demo-indicator { margin-left: auto; font-size: 9px; color: var(--bh-color-muted); flex-shrink: 0; }
@media(max-width:1100px) { .audience-art { padding-inline: 24px; }.art-type > strong { font-size: 52px; }.talent-pass,.store-sign { right: 22px; width: 163px; padding-inline: 16px; }.process-grid { gap: 28px; }.resume-preview { padding: 24px; }.stage-scene { padding: 20px; }.audience-body { padding: 26px; } }
@media(max-width:850px) and (min-width:701px) { .audience-art { height: 205px; }.art-type > strong { font-size: 42px; }.talent-pass,.store-sign { right: 10px; width: 140px; }.talent-pass > strong { font-size: 16px; }.store-sign > strong { font-size: 20px; }.art-type small { font-size: 9px; }.process-grid { grid-template-columns: 1fr; }.stage-scene { min-height: 240px; } }
@media(max-width:700px) { .audience-art { height: 200px; padding-inline: 24px; }.art-type > strong { font-size: 47px; }.talent-pass,.store-sign { width: 153px; right: 20px; top: 25px; }.talent-pass > strong { font-size: 17px; }.store-sign > strong { font-size: 22px; }.audience-body { padding: 25px; }.audience-body h3 { font-size: 25px; }.process-grid { gap: 24px; }.step { padding: 18px 14px; gap: 12px; }.step-copy > strong { font-size: 16px; }.step-copy > span { font-size: 11px; }.stage-title { font-size: 23px; }.resume-preview { padding: 24px 18px; }.stage-scene { padding: 19px; }.stage-heading { font-size: 10px; }.demo-person strong { font-size: 13px; }.demo-person p { font-size: 9px; }.demo-avatar { width: 35px; height: 35px; }.demo-person { gap: 8px; }.step-hint { font-size: 10px; }.demo-fields { gap: 12px; }.demo-fields strong { font-size: 11px; } }
@media(max-width:360px) { .audience-art { padding-left: 18px; }.art-type > strong { font-size: 40px; }.talent-pass,.store-sign { width: 133px; right: 14px; }.talent-pass > strong { font-size: 15px; }.store-sign > strong { font-size: 19px; }.stage-title { font-size: 21px; } }

/* Art-directed product fragments, with no imitation device chrome. */
.hero-visual { min-height: 610px; padding: 0; }
.hero-visual::after { display: none; }
.hero-visual .photo-frame { inset: 0 0 24px 48px; border-radius: var(--bh-radius-card); }
.hero-visual .hero-photo { object-position: 62% center; }
.hero-visual .photo-caption { padding: 80px 24px 24px; font-size: 11px; }
.hero-editorial { position: absolute; inset: 0; pointer-events: none; }
.editorial-label { position: absolute; top: 24px; left: 70px; right: 24px; display: flex; justify-content: space-between; gap: 12px; color: var(--photo-white); font-size: 12px; font-weight: 700; text-shadow: 0 1px 8px var(--photo-ink); }.editorial-label > span { font-size: 10px; font-weight: 400; letter-spacing: 2px; }
.opportunity-float { position: absolute; bottom: 4px; left: 0; width: 310px; padding: 26px; border: 1px solid var(--bh-color-line); background: color-mix(in srgb,var(--bh-color-surface) 94%,transparent); backdrop-filter: blur(18px); border-radius: var(--bh-radius-card); box-shadow: var(--bh-shadow-float); transform: rotate(-4deg); }
.float-kicker { display: flex; justify-content: space-between; color: var(--bh-color-muted); font-size: 10px; letter-spacing: 1px; }.float-kicker small { font-size: 8px; }.opportunity-float h2 { font-size: 43px; font-weight: 850; line-height: 1.2; letter-spacing: -2px; margin: 20px 0 24px; }.float-bottom { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 10px; border-top: 1px solid var(--bh-color-line); padding-top: 14px; color: var(--bh-color-body); }.float-bottom b { display: grid; place-items: center; background: var(--bh-color-accent); color: var(--photo-ink); width: 30px; height: 30px; border-radius: 50%; font-size: 21px; font-weight: 400; }
.skill-float { position: absolute; top: 126px; right: -14px; display: flex; align-items: center; gap: 13px; padding: 17px 22px; background: var(--bh-color-surface); border: 1px solid var(--bh-color-line); border-radius: var(--bh-radius-card); box-shadow: var(--bh-shadow-float); transform: rotate(5deg); }.skill-orbit { font-size: 32px; color: var(--bh-color-accent); line-height: 1; }.skill-float strong { display: block; font-size: 12px; }.skill-float div > span { display: block; font-size: 9px; margin-top: 3px; color: var(--bh-color-muted); }
/* A coffee workbench acts as a physical stage, rather than a tinted container. */
.resume-preview { padding: 0; background: transparent; border-radius: 0; }
.stage-heading { padding-inline: 2px; }.stage-title { margin: 14px 0 22px; font-size: 28px; }
.stage-workbench { position: relative; display: flex; align-items: center; min-height: 354px; padding: 30px 100px 30px 28px; background: var(--bh-color-control) url('./assets/workbench.jpg') center / cover; border-radius: var(--bh-radius-card); overflow: hidden; }
.stage-scene { position: relative; width: 100%; min-height: 250px; padding: 23px; transform: rotate(-3deg); background: color-mix(in srgb,var(--bh-color-surface) 96%,transparent); box-shadow: 9px 15px 28px var(--bh-color-overlay); border-color: var(--bh-color-surface); }
.stage-note { margin-top: 16px; font-size: 11px; }.stage-scene .demo-person strong { font-size: 14px; }.stage-scene .demo-person p { font-size: 9px; }.scene-share { transform: rotate(3deg); }.scene-posting { transform: rotate(-2deg); }.scene-progress,.scene-people { transform: rotate(-1deg); }
@media(max-width:1100px) { .hero-visual .photo-frame { left: 20px; }.editorial-label { left: 40px; }.opportunity-float { width: 275px; padding: 22px; }.skill-float { right: -8px; padding: 14px 16px; }.stage-workbench { padding: 26px 52px 26px 22px; }.stage-scene { padding: 19px; }.stage-title { font-size: 25px; } }
@media(max-width:850px) and (min-width:701px) { .opportunity-float { width: 240px; }.opportunity-float h2 { font-size: 36px; }.skill-float { right: 0; font-size: 11px; }.stage-workbench { padding: 38px 140px 38px 40px; }.hero-visual { min-height: 580px; } }
@media(max-width:700px) { .hero-visual { min-height: 470px; }.hero-visual .photo-frame { inset: 0 0 28px 20px; }.editorial-label { top: 20px; left: 38px; right: 18px; font-size: 10px; }.editorial-label > span { font-size: 8px; }.opportunity-float { width: 222px; bottom: 0; padding: 20px; }.opportunity-float h2 { font-size: 34px; margin: 15px 0 18px; }.float-bottom { font-size: 8px; gap: 6px; }.skill-float { top: 83px; right: 0; gap: 10px; padding: 13px; }.skill-float strong { font-size: 11px; }.skill-float div > span { font-size: 8px; }.skill-orbit { font-size: 27px; }.hero-visual .photo-caption { font-size: 9px; padding: 75px 15px 21px; }.resume-preview { padding: 0; }.stage-title { font-size: 24px; }.stage-workbench { min-height: 334px; padding: 36px 30px 36px 18px; }.stage-scene { padding: 18px; }.stage-scene .demo-person strong { font-size: 12px; }.stage-scene .demo-person p { font-size: 9px; }.stage-note { padding-inline: 4px; font-size: 10px; } }
@media(max-width:360px) { .stage-workbench { padding: 28px 18px 28px 14px; }.stage-scene { padding: 14px; }.stage-title { font-size: 21px; }.opportunity-float { width: 205px; }.hero-visual { min-height: 445px; } }

/* Curated mini program preview: readable product UI, not a screenshot replica. */
.hero-visual { min-height: 640px; }
.hero-visual .photo-frame { inset: 0 0 26px 75px; }
.product-showcase { position: relative; z-index: 1; width: 348px; margin: 28px 0 0; padding: 20px 20px 0; background: var(--bh-color-canvas); border: 1px solid var(--bh-color-surface); border-radius: 20px; box-shadow: 0 18px 36px var(--bh-color-overlay-soft), 0 4px 10px var(--bh-color-overlay-soft); transform: rotate(-3deg); }
.product-topline { display: flex; align-items: center; gap: 9px; }.product-topline > span:first-child { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 850; }.product-topline img { border-radius: var(--bh-radius-action); }.product-topline > small { margin-left: auto; font-size: 8px; color: var(--bh-color-muted); }.product-capsule { font-size: 9px; letter-spacing: .5px; border: 1px solid var(--bh-color-line); border-radius: var(--bh-radius-pill); padding: 1px 6px; }
.product-intro { margin: 25px 0 21px; }.product-intro > p { font-size: 10px; color: var(--bh-color-accent-strong); font-weight: 700; letter-spacing: 1px; }.product-intro h2 { font-size: 31px; letter-spacing: -1.6px; line-height: 1.2; margin: 9px 0; font-weight: 900; }.product-intro > span { font-size: 10px; color: var(--bh-color-muted); }
.product-search { display: flex; align-items: center; gap: 9px; background: var(--bh-color-surface); border: 1px solid var(--bh-color-line); border-radius: var(--bh-radius-control); padding: 10px 12px; font-size: 10px; color: var(--bh-color-muted); }.product-search svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.7; }.product-search small { margin-left: auto; font-size: 11px; color: var(--bh-color-subtle); }
.product-filters { display: flex; align-items: center; gap: 17px; padding: 17px 0 13px; color: var(--bh-color-muted); font-size: 10px; }.product-filters strong { position: relative; color: var(--bh-color-ink); font-weight: 800; }.product-filters strong::after { content: ''; display: block; width: 15px; height: 2px; background: var(--bh-color-accent); margin-top: 4px; border-radius: var(--bh-radius-pill); }.product-location { margin-left: auto; font-size: 9px; }
.showcase-job { background: var(--bh-color-surface); border: 1px solid var(--bh-color-line); border-radius: var(--bh-radius-card); padding: 16px; box-shadow: var(--bh-shadow-card); }.showcase-job-heading { display: flex; gap: 11px; align-items: center; }.showcase-store { flex-shrink: 0; display: grid; place-items: center; width: 42px; height: 42px; color: var(--bh-color-accent-strong); background: var(--bh-color-accent-soft); border-radius: var(--bh-radius-card); }.showcase-store svg { width: 27px; height: 27px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }.showcase-job h3 { font-size: 15px; letter-spacing: -.5px; }.showcase-job h3 span { font-size: 8px; vertical-align: middle; letter-spacing: 0; color: var(--bh-color-accent-strong); background: var(--bh-color-accent-soft); border-radius: 3px; padding: 3px 5px; margin-left: 4px; }.showcase-job-heading p { font-size: 9px; color: var(--bh-color-body); margin-top: 5px; }.showcase-bookmark { margin-left: auto; align-self: start; color: var(--bh-color-muted); font-size: 17px; }.showcase-job-meta { font-size: 9px; color: var(--bh-color-muted); margin-top: 14px; }.showcase-job-meta i { font-style: normal; padding-inline: 7px; color: var(--bh-color-line); }.showcase-tags { display: flex; gap: 6px; margin-top: 11px; }.showcase-tags span { border-radius: var(--bh-radius-pill); padding: 3px 7px; font-size: 8px; background: var(--bh-color-surface-muted); color: var(--bh-color-body); }.secondary-job { margin-top: 10px; padding: 13px 16px; }.store-letter { background: var(--bh-color-surface-muted); color: var(--bh-color-body); font-size: 20px; font-weight: 850; }
.product-navigation { display: flex; justify-content: space-between; margin: 18px -20px 0; padding: 12px 24px 15px; border-top: 1px solid var(--bh-color-divider); background: var(--bh-color-surface); border-radius: 0 0 20px 20px; }.product-navigation > span { display: flex; flex-direction: column; gap: 5px; align-items: center; font-size: 8px; color: var(--bh-color-muted); }.product-navigation img { width: 17px; height: 17px; object-fit: contain; }.product-navigation .active { color: var(--bh-color-accent-strong); }
@media(max-width:1100px) { .product-showcase { width: 318px; padding: 18px 17px 0; }.hero-visual .photo-frame { left: 42px; }.product-navigation { margin-inline: -17px; }.product-intro h2 { font-size: 29px; } }
@media(max-width:850px) and (min-width:701px) { .product-showcase { width: 276px; padding: 16px 14px 0; }.product-topline > small { display: none; }.product-capsule { margin-left: auto; }.product-intro h2 { font-size: 27px; }.product-filters { gap: 12px; }.product-navigation { margin-inline: -14px; }.showcase-job { padding: 13px; }.showcase-job-heading { gap: 8px; }.showcase-job h3 { font-size: 13px; }.showcase-job-heading p { font-size: 8px; }.showcase-store { width: 34px; height: 34px; }.hero-visual { min-height: 630px; } }
@media(max-width:700px) { .hero-visual { min-height: 645px; }.hero-visual .photo-frame { inset: 0 0 0 30px; }.product-showcase { width: min(318px,calc(100% - 20px)); margin: 26px 0 0 4px; padding: 18px 16px 0; transform: rotate(-2deg); }.product-intro h2 { font-size: 29px; }.product-navigation { margin-inline: -16px; }.hero-visual .photo-caption { padding-bottom: 14px; }.product-topline > small { font-size: 7px; }.product-capsule { font-size: 8px; }.showcase-job h3 { font-size: 14px; } }
@media(max-width:360px) { .product-showcase { width: calc(100% - 10px); padding-inline: 13px; }.product-navigation { margin-inline: -13px; }.product-topline > small { display: none; }.product-capsule { margin-left: auto; }.product-intro h2 { font-size: 27px; }.showcase-job { padding: 12px; }.showcase-store { width: 34px; height: 34px; }.showcase-job h3 { font-size: 13px; }.showcase-job-heading { gap: 8px; }.showcase-job-heading p { font-size: 8px; } }

/* Unified product walkthrough: navigation, live example and guidance share one frame. */
.flow-panel { display: grid; grid-template-columns: 34% 66%; border: 1px solid var(--bh-color-line); border-radius: 16px; background: var(--bh-color-surface); overflow: hidden; box-shadow: var(--bh-shadow-card); }
.flow-controls { padding: 32px 24px; border-right: 1px solid var(--bh-color-line); background: var(--bh-color-canvas); }
.flow-controls-heading { display: flex; align-items: center; gap: 10px; margin-bottom: 35px; }.flow-controls-heading img { border-radius: var(--bh-radius-action); }.flow-controls-heading > span { font-size: 15px; font-weight: 800; line-height: 1.3; }.flow-controls-heading small { display: block; font-size: 10px; font-weight: 400; color: var(--bh-color-muted); margin-top: 4px; }.flow-controls .step-hint { margin: 0 0 16px; font-size: 10px; }
.flow-controls .steps { gap: 12px; }.flow-controls .step,.flow-controls .step:last-child { padding: 20px 14px; gap: 12px; border: 1px solid transparent; border-radius: var(--bh-radius-control); box-shadow: none; }.flow-controls .step[aria-pressed=true] { background: var(--bh-color-accent-soft); border-color: transparent; }.flow-controls .step[aria-pressed=true]::before { display: none; }.flow-controls .step-number { width: 25px; height: 25px; display: grid; place-items: center; flex-shrink: 0; padding: 0; background: var(--bh-color-control); border-radius: var(--bh-radius-action); color: var(--bh-color-body); font-size: 10px; }.flow-controls .step[aria-pressed=true] .step-number { background: var(--bh-color-accent); color: var(--photo-ink); }.flow-controls .step-copy > strong { font-size: 16px; line-height: 1.55; }.flow-controls .step-copy > span { font-size: 11px; line-height: 1.75; margin-top: 6px; }.flow-controls .step-arrow { font-size: 17px; }
.flow-display { padding: 36px; min-width: 0; display: flex; flex-direction: column; justify-content: center; }
.flow-display-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 27px; }.flow-eyebrow { font-size: 11px; color: var(--bh-color-muted); }.flow-display-head h3 { font-size: 27px; font-weight: 850; letter-spacing: -1px; line-height: 1.3; margin-top: 10px; }.flow-page { color: var(--bh-color-accent-strong); font: 36px/1 var(--font-data); letter-spacing: -2px; white-space: nowrap; }.flow-page small { color: var(--bh-color-subtle); font-size: 11px; letter-spacing: 0; margin-left: 6px; }
.flow-window { border: 1px solid var(--bh-color-line); border-radius: var(--bh-radius-card); overflow: hidden; background: var(--bh-color-surface); }
.flow-window-bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 20px; background: var(--bh-color-surface-muted); border-bottom: 1px solid var(--bh-color-line); font-size: 11px; color: var(--bh-color-body); }.flow-window-bar > span { font-weight: 700; }.flow-window-bar small { font-size: 9px; color: var(--bh-color-muted); }
.flow-content { min-height: 300px; padding: 26px; }.flow-content-profile { padding: 0; display: grid; grid-template-columns: 34% 66%; }
.resume-identity { background: var(--bh-color-accent-soft); padding: 24px 20px; display: flex; flex-direction: column; align-items: start; }.resume-portrait { width: 65px; height: 65px; border: 1px solid var(--bh-color-accent); border-radius: 50%; padding: 8px; color: var(--bh-color-accent-strong); margin-bottom: 18px; }.resume-portrait svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }.resume-identity > span { font-size: 9px; color: var(--bh-color-body); }.resume-identity > strong { font-size: 24px; letter-spacing: -1px; line-height: 1.3; margin-top: 9px; }.resume-identity > small { color: var(--bh-color-muted); font-size: 9px; margin-top: auto; padding-top: 15px; }
.resume-details { padding: 23px; min-width: 0; }.resume-section-label { display: flex; align-items: center; justify-content: space-between; gap: 8px; }.resume-section-label strong { font-size: 10px; color: var(--bh-color-muted); font-weight: 500; }.resume-section-label > span { font-size: 8px; padding: 3px 6px; color: var(--bh-color-accent-strong); background: var(--bh-color-accent-soft); border-radius: var(--bh-radius-action); }.resume-details h4 { font-size: 22px; letter-spacing: -.6px; margin: 12px 0 17px; }.resume-details h4 span { font-size: 10px; font-weight: 500; color: var(--bh-color-body); margin-left: 6px; }.resume-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding-bottom: 18px; margin-bottom: 18px; border-bottom: 1px solid var(--bh-color-divider); }.resume-facts small { display: block; font-size: 8px; color: var(--bh-color-muted); margin-bottom: 5px; }.resume-facts span { font-size: 10px; }.resume-details .demo-tags { margin-top: 10px; flex-wrap: wrap; }.resume-details .demo-tags span { font-size: 8px; padding: 4px 7px; }.resume-experience { display: flex; align-items: center; gap: 10px; margin-top: 22px; }.resume-experience > span { color: var(--bh-color-accent-strong); font-size: 22px; }.resume-experience strong { font-size: 10px; font-weight: 650; }.resume-experience p { font-size: 8px; color: var(--bh-color-muted); margin-top: 3px; }
.flow-display-foot { display: flex; align-items: center; gap: 9px; margin-top: 22px; }.flow-foot-icon { color: var(--bh-color-accent-strong); font-size: 18px; }.flow-display-foot p { font-size: 10px; color: var(--bh-color-muted); flex: 1; }.flow-progress { display: flex; gap: 5px; flex-shrink: 0; }.flow-progress i { width: 6px; height: 6px; border-radius: var(--bh-radius-pill); background: var(--bh-color-line); }.flow-progress .is-current { width: 20px; background: var(--bh-color-accent); }
.flow-content-jobs .demo-job { padding: 18px; margin-top: 14px; border: 1px solid var(--bh-color-line); border-radius: var(--bh-radius-control); }.flow-content-progress .demo-timeline > div { padding: 20px 5px; }.flow-content-posting .demo-posting { border-left: 3px solid var(--bh-color-accent); padding-left: 18px; }.flow-content-share { display: grid; grid-template-columns: 1.2fr 1fr; align-items: center; gap: 24px; }.flow-content-share .demo-share-card { background: var(--bh-color-accent-soft); padding: 22px; border-radius: var(--bh-radius-control); }.flow-content-share .demo-share-card strong { font-size: 29px; }.flow-content-share .share-path { flex-direction: column; gap: 18px; border-top: 0; text-align: center; }.flow-content-share .share-path b { transform: rotate(90deg); font-size: 24px; }.flow-content-people .demo-person { padding: 15px 0; }.flow-content-people .demo-avatar { border-radius: 50%; }
@media(max-width:1100px) { .flow-panel { grid-template-columns: 36% 64%; }.flow-controls { padding: 26px 16px; }.flow-display { padding: 28px 24px; }.flow-display-head h3 { font-size: 24px; }.flow-controls .step-copy > strong { font-size: 14px; }.flow-controls .step-arrow { display: none; }.resume-details { padding: 18px; }.resume-identity { padding: 23px 16px; }.resume-identity > strong { font-size: 21px; }.flow-page { font-size: 29px; } }
@media(max-width:850px) { .flow-panel { grid-template-columns: 1fr; }.flow-controls { padding: 24px; border-right: 0; border-bottom: 1px solid var(--bh-color-line); }.flow-controls-heading { margin-bottom: 20px; }.flow-controls .steps { grid-template-columns: repeat(3,1fr); gap: 8px; }.flow-controls .step,.flow-controls .step:last-child { flex-direction: column; gap: 9px; padding: 14px; }.flow-controls .step-copy > span { display: none; }.flow-controls .step-copy > strong { font-size: 13px; }.flow-controls .step-hint { font-size: 10px; }.flow-display { padding: 28px; } }
@media(max-width:520px) { .flow-controls { padding: 20px 14px; }.flow-controls-heading { padding-inline: 6px; margin-bottom: 17px; }.flow-controls .step-hint { padding-inline: 6px; }.flow-controls .step,.flow-controls .step:last-child { padding: 10px; }.flow-controls .step-copy > strong { font-size: 11px; line-height: 1.7; }.flow-display { padding: 23px 16px; }.flow-display-head { margin-bottom: 20px; gap: 10px; }.flow-display-head h3 { font-size: 20px; }.flow-eyebrow { font-size: 10px; }.flow-page { font-size: 25px; }.flow-page small { display: block; font-size: 9px; margin: 5px 0 0; text-align: right; }.flow-content { padding: 17px; min-height: 290px; }.flow-content-profile { padding: 0; grid-template-columns: 1fr; }.resume-identity { flex-direction: row; align-items: center; flex-wrap: wrap; gap: 10px; padding: 16px; }.resume-portrait { width: 45px; height: 45px; margin: 0; padding: 5px; }.resume-identity > strong { font-size: 17px; margin: 0; }.resume-identity > strong br { display: none; }.resume-identity > span { display: none; }.resume-identity > small { display: none; }.resume-details { padding: 18px; }.resume-experience { margin-top: 17px; }.flow-display-foot { align-items: start; gap: 7px; }.flow-progress { display: none; }.flow-display-foot p { font-size: 10px; }.flow-window-bar { padding: 11px 15px; }.flow-content-share { grid-template-columns: 1fr; gap: 15px; }.flow-content-share .share-path { flex-direction: row; gap: 10px; }.flow-content-share .share-path b { transform: none; }.flow-content-share .demo-share-card strong { font-size: 28px; }.flow-content .demo-person strong { font-size: 12px; }.flow-content .demo-person p { font-size: 9px; } }
.step-copy > .step-short { display: none; }
.skip-link:not(:focus) { clip-path: inset(50%); width: 1px; height: 1px; padding: 0; overflow: hidden; white-space: nowrap; }
@media(max-width:850px) { .flow-controls .step-copy > .step-full { display: none; }.flow-controls .step-copy > .step-short { display: block; } }

/* Art-directed mini program: one photographic opportunity card, one quiet secondary row. */
.app-demo { position: relative; z-index: 1; width: 354px; padding: 20px 18px 0; margin-top: 18px; border: 1px solid var(--bh-color-surface); border-radius: 23px; background: var(--bh-color-canvas); transform: rotate(-3deg); box-shadow: 0 20px 42px var(--bh-color-overlay-soft), 0 3px 9px var(--bh-color-overlay-soft); }
.app-demo-brand { display: flex; align-items: center; justify-content: space-between; gap: 12px; }.app-demo-brand > span:first-child { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 850; }.app-demo-brand img { border-radius: var(--bh-radius-action); }.app-demo-capsule { display: flex; align-items: center; gap: 8px; border: 1px solid var(--bh-color-line); border-radius: var(--bh-radius-pill); padding: 2px 8px; font-size: 10px; }.app-demo-capsule i { height: 10px; width: 1px; background: var(--bh-color-line); }
.app-demo-welcome { display: flex; justify-content: space-between; align-items: end; margin: 24px 0 18px; gap: 12px; }.app-demo-eyebrow { font-size: 9px; color: var(--bh-color-muted); letter-spacing: .6px; }.app-demo-welcome h2 { font-size: 28px; font-weight: 900; letter-spacing: -1.5px; margin-top: 6px; line-height: 1.25; }.app-demo-welcome em { font-style: normal; color: var(--bh-color-accent-strong); }.app-demo-mode { font-size: 7px; color: var(--bh-color-subtle); line-height: 1.7; text-align: right; }
.app-demo-search { display: flex; align-items: center; gap: 8px; padding: 7px 8px 7px 12px; border: 1px solid var(--bh-color-line); border-radius: var(--bh-radius-control); background: var(--bh-color-surface); color: var(--bh-color-muted); font-size: 10px; }.app-demo-search svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.6; }.app-demo-search-end { display: grid; place-items: center; margin-left: auto; width: 25px; height: 25px; border-radius: var(--bh-radius-action); background: var(--bh-color-ink); color: var(--bh-color-surface); font-size: 17px; }
.app-demo-tabs { display: flex; align-items: center; gap: 20px; padding: 16px 0 13px; font-size: 11px; color: var(--bh-color-muted); }.app-demo-tabs strong { position: relative; color: var(--bh-color-ink); }.app-demo-tabs strong::after { position: absolute; left: 0; right: 0; bottom: -6px; height: 2px; background: var(--bh-color-accent); border-radius: var(--bh-radius-pill); content: ''; }.app-demo-tabs small { font-size: 9px; margin-left: auto; }
.app-job-feature { border: 1px solid var(--bh-color-line); border-radius: 12px; overflow: hidden; background: var(--bh-color-surface); box-shadow: var(--bh-shadow-card); }.app-job-cover { height: 123px; position: relative; overflow: hidden; background: var(--bh-color-control); }.app-job-cover img { width: 100%; height: 100%; object-fit: cover; object-position: center 52%; }.app-job-cover > span { position: absolute; top: 12px; left: 13px; padding: 3px 7px; border-radius: 3px; background: var(--photo-white); color: var(--photo-ink); font-size: 8px; }.app-job-cover-caption { position: absolute; left: 14px; bottom: 12px; font-size: 18px; line-height: 1.35; letter-spacing: -.5px; font-weight: 850; color: var(--photo-ink); background: color-mix(in srgb,var(--photo-white) 85%,transparent); padding: 4px 8px; border-radius: 3px; }
.app-job-content { padding: 15px; }.app-job-title { display: flex; gap: 9px; align-items: center; }.app-job-title h3 { font-size: 21px; letter-spacing: -.7px; font-weight: 850; }.app-job-title > span { padding: 3px 6px; font-size: 8px; color: var(--bh-color-accent-strong); background: var(--bh-color-accent-soft); border-radius: var(--bh-radius-action); }.app-job-title b { display: grid; place-items: center; margin-left: auto; border-radius: 50%; background: var(--bh-color-accent); color: var(--photo-ink); width: 27px; height: 27px; font-size: 20px; font-weight: 400; }.app-job-content > p { font-size: 10px; margin-top: 4px; color: var(--bh-color-body); }.app-job-content > p small { font-size: 8px; color: var(--bh-color-muted); }.app-job-tags { display: flex; gap: 6px; margin: 13px 0; }.app-job-tags span { font-size: 8px; padding: 4px 7px; border-radius: var(--bh-radius-pill); background: var(--bh-color-surface-muted); color: var(--bh-color-body); }.app-job-footer { display: flex; justify-content: space-between; gap: 10px; border-top: 1px solid var(--bh-color-divider); padding-top: 10px; color: var(--bh-color-muted); font-size: 8px; }
.app-job-compact { display: flex; align-items: center; gap: 11px; padding: 13px 3px; margin-top: 7px; }.app-store-icon { display: grid; place-items: center; width: 35px; height: 35px; border-radius: var(--bh-radius-control); background: var(--bh-color-accent-soft); color: var(--bh-color-accent-strong); }.app-store-icon svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }.app-job-compact h3 { font-size: 13px; }.app-job-compact h3 small { font-size: 8px; font-weight: 400; color: var(--bh-color-muted); margin-left: 6px; }.app-job-compact p { font-size: 9px; color: var(--bh-color-muted); margin-top: 4px; }.app-job-compact > span:last-child { margin-left: auto; color: var(--bh-color-muted); font-size: 17px; }
.app-demo-nav { display: flex; justify-content: space-between; margin: 3px -18px 0; padding: 11px 26px 14px; background: var(--bh-color-surface); border-top: 1px solid var(--bh-color-divider); border-radius: 0 0 23px 23px; }.app-demo-nav > span { display: flex; flex-direction: column; align-items: center; gap: 5px; color: var(--bh-color-muted); font-size: 8px; }.app-demo-nav img { width: 17px; height: 17px; object-fit: contain; }.app-demo-nav .is-active { color: var(--bh-color-accent-strong); }
@media(max-width:1100px) { .app-demo { width: 320px; }.app-demo-welcome h2 { font-size: 26px; } }
@media(max-width:850px) and (min-width:701px) { .app-demo { width: 277px; padding-inline: 14px; }.app-demo-welcome h2 { font-size: 23px; }.app-demo-mode { display: none; }.app-demo-nav { margin-inline: -14px; }.app-job-cover { height: 114px; }.app-job-content { padding: 12px; }.app-demo-tabs { gap: 16px; } }
@media(max-width:700px) { .app-demo { width: min(320px,calc(100% - 16px)); margin: 23px 0 0 4px; padding-inline: 15px; transform: rotate(-2deg); }.app-demo-nav { margin-inline: -15px; }.app-demo-welcome h2 { font-size: 26px; }.hero-visual:has(.app-demo) { min-height: 655px; } }
@media(max-width:360px) { .app-demo { width: calc(100% - 8px); padding-inline: 12px; }.app-demo-nav { margin-inline: -12px; }.app-demo-welcome h2 { font-size: 23px; }.app-demo-mode { font-size: 6px; }.app-job-cover { height: 110px; }.app-job-content { padding: 12px; } }

/* Recruiting uses the same orange family with a stronger poster emphasis. */
.employer-card .text-link { color: var(--bh-color-accent-strong); }
.employer-card .store-sign { border-color: var(--bh-color-line); }