/* Hallmark · shape: Research demonstration · genre: modern-minimal · theme: brand · redesign: full
 * brand: HSI, existing measured light system · display: Manrope · body: Manrope
 * hero: Banner · nav: quiet single-line · footer: bilingual wordmark and demonstration return
 * signature: real robot tasks from a unified multicore world model · posture: Committed
 * job: watch · imagery: eleven task videos, four-stage watering walkthrough and four original robot geometries · v2.0.0 */
/* Hallmark · pre-emit critique: P4 H4 E4 S4 R4 V4 · weakest: S, connected real task demonstrations to the user's unified multicore world model. */
/* Hallmark · user override: separate animation pause buttons removed as explicitly requested; native video controls, hover, focus and reduced-motion behavior retained. */
/* Hallmark · dropped [data-loop-toggle], [data-mascots-toggle], [data-robot-motion], [data-reel-prev], [data-reel-next] · the user requested a continuous task reel and removal of separate animation controls. */
/* Hallmark · dismissed F7 · the pill selectors belong to native buttons, navigation controls and action links, not non-interactive cards. */
/* Hallmark · reworded "一个系统， 连接理解与行动。" to "统一的模型， 协作的多核。" · the user requested unified multicore world model terminology. */
/* Hallmark · reworded "看见智能， 在日常中发生。" to "真实任务， 看见行动。" · the user requested clearer research demonstrations and video hierarchy. */
/* Hallmark · finish-review: subagent · ship · ordered stage playback, bilingual responsive layouts, source transcript, concurrent videos and four fixed-scene robot configurations checked. */
/* Hallmark · dismissed 25 · .robot-exhibit__copy p is a one-sentence description at 42ch; the gate allows short ledes and captions from 28ch. */
/* Hallmark · waive 59 · Only the related hero and watering-pipeline use 64px; independent sections retain gaps of 144px or more · The user requested the watering breakdown directly below its recording, so this gap groups one continuous research demonstration. */
/* Hallmark · waive 39b · Full-width numbered accordion rows have 78px hit areas and expand descriptive content · These rows are the requested ordered task-stage navigation beside a shared video, so their generous spacing supports reading and selection. */
/* Hallmark · dismissed F6 · The pipeline canvas status selector displays a loading sentence, not numeric data, so tabular figures do not apply. */
/* Hallmark · dismissed F15 · The 24px terminal inset and 32px media inset are internal component spacing; top-level multi-column sections share the 64px column token. */
/* Hallmark · dismissed F1 · The arm's is a verbatim source-recording transcript in a terminal log; retain the original ASCII apostrophe. */
/* Hallmark · user override: the user explicitly requested a terminal window; its header identifies the task log without imitating browser or OS controls. */
/* Hallmark · waive 47b · The terminal header identifies an interactive transcript with typed input and a scrollable source log, not a screenshot placeholder · The user explicitly requested a terminal window for this task stage. */
@import url('./tokens.css');
@import url('./base.css');
@font-face { font-family: 'Manrope'; src: url('./assets/fonts/manrope-latin-variable.woff2') format('woff2'); font-weight: 400 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'HSI Noto Sans SC'; src: url('./assets/fonts/noto-sans-sc-hsi.woff2') format('woff2'); font-weight: 400 600; font-style: normal; font-display: swap; }
html { scroll-behavior: smooth; }
body { font-synthesis: none; }
a { text-decoration: none; }
button { color: inherit; cursor: pointer; }
button:disabled { opacity: .55; cursor: not-allowed; }
button[aria-busy='true'] { cursor: progress; }
a:active, button:active { transform: translateY(1px); }
a:focus-visible, button:focus-visible, video:focus-visible, summary:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 4px; }
.wrap { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.skip { position: absolute; z-index: var(--z-toast); top: var(--space-md); left: var(--space-lg); padding: var(--space-sm) var(--space-lg); color: var(--color-paper); background: var(--color-ink); transform: translateY(-160%); }
.skip:focus-visible { transform: none; }
.site-header { border-bottom: 1px solid var(--color-rule); }
.header { height: 80px; display: flex; align-items: center; gap: var(--space-xl); }
.brand { display: flex; align-items: center; gap: var(--space-sm); margin-right: auto; }
.brand-mark { width: 36px; height: 36px; position: relative; display: block; color: var(--color-brand); }
.brand-mark i { position: absolute; width: 30px; height: 16px; border: 2px solid currentColor; border-radius: 50%; transform: rotate(-35deg); top: 10px; left: 3px; }
.brand-mark i:nth-child(2) { transform: rotate(35deg); }
.brand-mark i:nth-child(3) { transform: rotate(90deg); }
.brand-word { font-size: 14px; font-weight: 600; line-height: 1.3; }
.brand-word b, .brand-word small { display: block; font-weight: inherit; }
.brand-word small { font-size: 11px; letter-spacing: .02em; }
.header nav { display: flex; gap: var(--space-xl); }
.header nav a { display: inline-flex; align-items: center; min-height: 48px; font-size: 14px; white-space: nowrap; }
.header nav a:hover, .text-link:hover { text-decoration: underline; text-underline-offset: .35em; }
.language { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: var(--space-xs) var(--space-md); border: 1px solid var(--color-rule); border-radius: var(--radius-pill); background: var(--color-paper); font-size: 14px; color: var(--color-muted); white-space: nowrap; }
.language:hover { border-color: var(--color-ink); }
.lang-current { color: var(--color-ink); font-weight: 600; }
.lang-slash { margin-inline: var(--space-xs); }
.mobile-menu { display: none; }
.hero { padding-top: var(--space-xl); }
.opening-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, .85fr); gap: var(--gap-columns); align-items: end; margin-bottom: var(--space-xl); }
.hero h1 { font-size: var(--text-display); letter-spacing: -.055em; line-height: 1.17; }
.hero-copy { padding-bottom: var(--space-2xs); }
.hero-copy p { font-size: var(--text-md); line-height: 1.8; max-width: 46ch; }
.hero-actions { display: flex; flex-wrap: wrap; gap: var(--space-lg); align-items: center; margin-top: var(--space-lg); }
.round-link { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-sm); min-height: 48px; padding: var(--space-sm) var(--space-lg); border: 0; border-radius: var(--radius-pill); background: var(--color-accent); color: var(--color-accent-ink); font-size: 14px; white-space: nowrap; transition: background-color var(--dur-short) var(--ease-out); }
.round-link:hover { background: var(--color-accent-hover); }
.round-link svg, .text-link svg { width: 20px; height: 20px; flex-shrink: 0; }
.text-link { display: inline-flex; align-items: center; gap: var(--space-xs); min-height: 48px; font-size: 14px; white-space: nowrap; }
.hero-stage { display: grid; grid-template-columns: minmax(0, .72fr) minmax(0, 1.6fr); align-items: stretch; background: var(--color-field); color: var(--color-field-ink); border-radius: var(--radius-card); overflow: clip; }
.hero-note { display: flex; flex-direction: column; justify-content: space-between; gap: var(--space-xl); padding: var(--space-xl); }
.hero-note p { font-size: clamp(1.5rem, 2.8vw, 2.5rem); line-height: 1.45; letter-spacing: -.04em; }
.hero-note small { display: block; margin-top: var(--space-md); font-size: var(--text-sm); }
.hero-media { margin: 0; width: 100%; height: 100%; min-width: 0; background: var(--color-video); color: var(--color-video-ink); position: relative; }
.hero-media video { width: 100%; height: 100%; object-fit: contain; }
.media-caption { display: flex; align-items: center; justify-content: space-between; gap: var(--space-lg); padding-top: var(--space-md); font-size: var(--text-sm); color: var(--color-muted); }
.section { margin-top: var(--space-section); }
.section-intro { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: var(--gap-columns); align-items: end; margin-bottom: var(--space-2xl); }
.section-intro h2 { line-height: 1.2; }
.section-intro p { font-size: var(--text-md); line-height: 1.85; max-width: 52ch; color: var(--color-muted); }
.architecture { background: var(--color-paper-2); border-radius: var(--radius-card); padding: var(--space-xl); }
.architecture-heading { display: flex; justify-content: space-between; align-items: center; gap: var(--space-lg); margin-bottom: var(--space-xl); }
.architecture-heading strong { font-size: 48px; font-weight: 400; letter-spacing: -.06em; }
.architecture-heading span { font-size: var(--text-sm); color: var(--color-muted); }
.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap-columns); }
.steps article { border-top: 1px solid var(--color-rule); padding-top: var(--space-lg); }
.steps h3 { font-size: var(--text-title); line-height: 1.35; margin-bottom: var(--space-md); }
.steps p { max-width: 45ch; color: var(--color-muted); font-size: var(--text-md); line-height: 1.8; }
.steps small { display: block; margin-top: var(--space-xl); font-size: var(--text-sm); }
.demos { padding-block: var(--space-3xl); background: var(--color-field-2); color: var(--color-ink); }
.demo-header { display: flex; align-items: end; justify-content: space-between; gap: var(--space-xl); margin-bottom: var(--space-2xl); }
.demo-header h2 { line-height: 1.2; }
.demo-header p { max-width: 45ch; margin-top: var(--space-lg); font-size: var(--text-md); line-height: 1.8; }
.demo-note { max-width: 25ch; font-size: var(--text-sm); line-height: 1.7; }
.video-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: var(--space-2xl) var(--gap-columns); align-items: start; }
.video-card { min-width: 0; }
.video-card:first-child { grid-row: span 2; position: sticky; top: var(--space-lg); }
.video-frame { position: relative; border-radius: var(--radius-card); overflow: clip; background: var(--color-video); color: var(--color-video-ink); }
.video-frame video { width: 100%; aspect-ratio: 16 / 9; object-fit: contain; }
.video-card:first-child .video-frame { padding-block: 0; }
.card-title { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-lg); padding-top: var(--space-lg); }
.card-title h3 { font-size: var(--text-title); line-height: 1.4; }
.card-title span { font-size: var(--text-sm); color: var(--color-ink-2); }
.more-demos { margin-top: var(--space-3xl); }
.reel-heading { display: flex; align-items: end; justify-content: space-between; gap: var(--space-lg); margin-bottom: var(--space-lg); }
.reel-heading h3 { font-size: clamp(1.5rem, 2.5vw, 2.25rem); line-height: 1.3; }
.reel-heading p { margin-top: var(--space-xs); font-size: var(--text-sm); line-height: 1.6; }
.demo-rail { display: flex; gap: var(--space-md); padding-bottom: var(--space-lg); overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-color: var(--color-ink-2) var(--color-field-rule); scrollbar-width: thin; }
.demo-rail:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 4px; }
.reel-card { flex: 0 0 clamp(240px, 25vw, 320px); min-width: 0; scroll-snap-align: start; }
.reel-media { overflow: clip; border-radius: var(--radius-card); background: var(--color-video); color: var(--color-video-ink); }
.reel-media video { width: 100%; aspect-ratio: 16 / 9; object-fit: contain; }
.reel-card h4 { font-size: var(--text-md); font-weight: 500; line-height: 1.5; margin: var(--space-md) 0 0; }
.vision { margin-top: var(--space-section); }
.vision-layout { display: grid; grid-template-columns: minmax(0, .7fr) minmax(0, 1.3fr); gap: var(--space-2xl); align-items: center; padding-bottom: var(--space-section); }
.vision-symbol { display: grid; place-items: center; aspect-ratio: 1; background: var(--color-paper-2); border-radius: 50%; }
.vision-symbol .brand-mark { width: 160px; height: 160px; }
.vision-symbol .brand-mark i { width: 144px; height: 72px; top: 44px; left: 8px; border-width: 4px; }
.vision h2 { line-height: 1.25; }
.vision p { max-width: 50ch; color: var(--color-muted); margin-top: var(--space-xl); font-size: var(--text-md); line-height: 1.85; }
.vision .text-link { margin-top: var(--space-lg); }
.footer { border-top: 1px solid var(--color-rule); }
.footer-main { display: flex; align-items: end; justify-content: space-between; gap: var(--space-xl); padding-block: var(--space-2xl); }
.footer-brand { font-size: clamp(1.5rem, 3vw, 2.5rem); font-weight: 500; line-height: 1.12; letter-spacing: -.04em; }
.footer-main p { font-size: var(--text-sm); margin-top: var(--space-lg); color: var(--color-muted); }
.footer-side { max-width: 25ch; font-size: var(--text-md); }
.footer-bottom { display: flex; justify-content: space-between; gap: var(--space-lg); padding-bottom: var(--space-lg); font-size: var(--text-xs); color: var(--color-muted); }
html[lang='en'] .hero h1 { font-size: clamp(2.5rem, 5.1vw, 4.75rem); line-height: 1.06; }
html[lang='en'] .hero-copy p { line-height: 1.6; }
@media (min-width: 1600px) { .hero { padding-top: var(--space-2xl); } .opening-grid { margin-bottom: var(--space-2xl); } }
@media (max-width: 1000px) {
  :root { --gutter: 32px; }
  .header { gap: var(--space-lg); } .header nav { gap: var(--space-lg); }
  .opening-grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); }
  .hero-stage { grid-template-columns: minmax(0, .55fr) minmax(0, 1.4fr); }
  .hero-note { padding: var(--space-lg); } .hero-note p { font-size: 28px; }
  .vision-layout { gap: var(--gap-columns); }
}
@media (max-width: 760px) {
  :root { --gutter: 24px; --space-section: 96px; }
  .header { height: 72px; gap: var(--space-md); }
  .brand-word { font-size: 12px; } .brand-word small { font-size: 10px; } .brand-mark { width: 32px; }
  .header > nav { display: none; } .language { padding-inline: var(--space-sm); }
  .mobile-menu { display: block; position: relative; }
  .mobile-menu summary { display: flex; align-items: center; justify-content: center; width: 48px; min-height: 48px; cursor: pointer; list-style: none; border-radius: var(--radius-pill); border: 1px solid var(--color-rule); }
  .mobile-menu summary::-webkit-details-marker { display: none; }
  .mobile-menu svg { width: 20px; height: 20px; }
  .mobile-menu nav { position: absolute; right: 0; top: calc(100% + var(--space-sm)); z-index: var(--z-dropdown); display: flex; flex-direction: column; align-items: stretch; gap: 0; min-width: 208px; padding: var(--space-md); border: 1px solid var(--color-rule); background: var(--color-paper); border-radius: var(--radius-card); }
  .mobile-menu nav a { padding-inline: var(--space-md); font-size: var(--text-md); }
  .hero { padding-top: var(--space-xl); }
  .opening-grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-lg); margin-bottom: var(--space-xl); }
  .hero h1 { font-size: clamp(2rem, 6.8vw, 3rem); line-height: 1.25; }
  .hero-copy p { font-size: 16px; max-width: 44ch; }
  .hero-stage { display: flex; flex-direction: column-reverse; } .hero-media { width: 100%; height: auto; aspect-ratio: 16 / 9; }
  .hero-note { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--space-md); padding: var(--space-lg); }
  .hero-note p { font-size: 20px; line-height: 1.4; } .hero-note p br { display: none; }
  .hero-note small { font-size: 12px; margin-top: var(--space-xs); }
  .hero-note .hsi-mascots { grid-column: 1 / -1; grid-row: 2; justify-self: center; }
  .media-caption { font-size: 12px; line-height: 1.6; } .media-caption span:last-child { max-width: 18ch; text-align: right; }
  .section-intro { grid-template-columns: minmax(0, 1fr); gap: var(--space-lg); margin-bottom: var(--space-xl); }
  .section-intro h2, .demo-header h2, .vision h2 { font-size: 34px; }
  .architecture { padding: var(--space-lg); } .architecture-heading { margin-bottom: var(--space-lg); }
  .architecture-heading strong { font-size: 40px; } .architecture-heading span { max-width: 16ch; text-align: right; }
  .steps { grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); } .steps small { margin-top: var(--space-md); }
  .demos { padding-block: var(--space-2xl); } .demo-header { display: block; margin-bottom: var(--space-xl); }
  .demo-note { margin-top: var(--space-lg); max-width: none; }
  .video-grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); } .video-card:first-child { grid-row: auto; position: static; }
  .video-card:first-child .video-frame { padding-block: 0; } .card-title { padding-top: var(--space-md); } .card-title h3 { font-size: 22px; }
  .more-demos { margin-top: var(--space-2xl); }
  .reel-card { flex-basis: min(76%, 320px); }
  .reel-heading { align-items: center; }
  .vision-layout { display: flex; flex-direction: column; align-items: stretch; gap: var(--space-xl); }
  .vision-symbol { width: 160px; } .vision-symbol .brand-mark { transform: scale(.55); }
  .vision p { margin-top: var(--space-lg); }
  .footer-main { flex-direction: column; align-items: flex-start; gap: var(--space-xl); padding-block: var(--space-xl); }
  .footer-bottom { flex-direction: column; gap: var(--space-xs); }
  html[lang='en'] .hero h1 { font-size: 40px; }
}
@media (max-width: 360px) {
  :root { --gutter: 16px; } .header { gap: var(--space-xs); } .brand { gap: var(--space-xs); }
  .hero-note { padding: var(--space-md); } .hero-note p { font-size: 18px; } .hero-pause { padding-inline: var(--space-sm); }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition: none !important; animation: none !important; } }

/* Research showcase refinement: real tasks lead, companions stay secondary. */
.hero { padding-top: var(--space-lg); }
.opening-grid { margin-bottom: var(--space-lg); }
.hero-note { padding: var(--space-xl); gap: var(--space-lg); justify-content: space-between; }
.hero-note p { font-size: clamp(1.5rem, 2.3vw, 2rem); line-height: 1.45; }
.hero-media { height: auto; aspect-ratio: 16 / 9; align-self: center; }
.hero-media video { width: 100%; height: 100%; }
.media-caption { line-height: 1.6; }
.demos { margin-top: var(--space-3xl); padding-block: var(--space-2xl); }
.demo-header { margin-bottom: var(--space-xl); }
.demo-header > div { max-width: 52ch; }
.demo-header p { font-size: var(--text-md); }
.demo-header .demo-note { font-size: var(--text-sm); flex-shrink: 0; }
.video-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap-columns); align-items: start; }
.video-card:first-child { grid-row: auto; position: static; }
.card-title { display: block; padding-top: var(--space-lg); }
.card-title h3 { font-size: clamp(1.25rem, 1.7vw, 1.5rem); line-height: 1.4; }
.card-title span { display: block; margin-top: var(--space-xs); }
.task-description { margin-top: var(--space-xs); font-size: var(--text-sm); color: var(--color-muted); line-height: 1.7; }
.more-demos { margin-top: var(--space-2xl); padding-top: var(--space-xl); border-top: 1px solid var(--color-field-rule); }
.reel-heading { margin-bottom: var(--space-lg); }
.demo-rail { gap: var(--gap-columns); padding-bottom: var(--space-xs); scroll-snap-type: none; overflow-anchor: none; scrollbar-width: none; }
.demo-rail::-webkit-scrollbar { display: none; }
.demo-rail > * { overflow-anchor: none; }
.reel-card { flex: 0 0 clamp(280px, 30vw, 400px); scroll-snap-align: none; }
.reel-card h4 { font-size: var(--text-md); }
.reel-media { position: relative; }
.media-error { position: absolute; inset-inline: 0; bottom: 0; padding: var(--space-sm); color: var(--color-video-ink); background: var(--color-video); font-size: var(--text-sm); }
.approach { margin-top: var(--section-gap); }
.section-intro { margin-bottom: var(--space-xl); }
.architecture { padding: var(--space-xl); }
.architecture-heading { align-items: baseline; margin-bottom: var(--space-xl); }
.architecture-heading strong { font-size: clamp(1.5rem, 2.5vw, 2.25rem); letter-spacing: -.035em; }
.architecture-heading span { max-width: 30ch; text-align: right; }
.steps { position: relative; padding-top: var(--space-lg); border-top: 1px solid var(--color-rule); }
.steps article { position: relative; border-top: 0; padding-top: var(--space-lg); }
.steps article::before { content: ''; position: absolute; top: calc(-1 * var(--space-lg)); left: 0; height: var(--space-lg); width: 1px; background: var(--color-rule); }
.steps h3 { font-size: var(--text-title); }
.steps p { font-size: var(--text-md); line-height: 1.8; }
.architecture-feedback { margin-top: var(--space-xl); padding-top: var(--space-lg); border-top: 1px solid var(--color-rule); text-align: right; font-size: var(--text-sm); color: var(--color-muted); }
.vision { margin-top: var(--section-gap); }
.vision-layout { grid-template-columns: minmax(0, .55fr) minmax(0, 1.45fr); gap: var(--space-2xl); padding-bottom: var(--section-gap-s); }
.vision-symbol { max-width: 320px; width: 100%; }
@media (min-width: 1600px) { .hero { padding-top: var(--space-xl); } .opening-grid { margin-bottom: var(--space-lg); } }
@media (max-width: 1000px) { .hero-note { padding: var(--space-lg); } .hero-note p { font-size: 24px; } }
@media (max-width: 760px) {
  .hero { padding-top: var(--space-xl); }
  .opening-grid { margin-bottom: var(--space-lg); }
  .hero-note { display: grid; grid-template-columns: minmax(0, 1fr) 120px; gap: var(--space-sm); padding: var(--space-md); }
  .hero-note p { font-size: 16px; line-height: 1.5; letter-spacing: -.02em; }
  .hero-note p br { display: initial; }
  .hero-note small { font-size: 12px; margin-top: var(--space-xs); }
  .hero-note .hsi-mascots { grid-column: 2; grid-row: 1; align-self: center; justify-self: end; }
  .media-caption { align-items: start; gap: var(--space-md); font-size: 12px; }
  .media-caption span:first-child { max-width: 16ch; }
  .demos { margin-top: var(--space-2xl); padding-block: var(--space-xl); }
  .demo-header p { margin-top: var(--space-md); }
  .demo-header .demo-note { margin-top: var(--space-lg); }
  .video-grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); }
  .card-title { display: flex; align-items: baseline; gap: var(--space-md); padding-top: var(--space-md); }
  .card-title h3 { font-size: 22px; }
  .card-title span { margin: 0; flex-shrink: 0; }
  .more-demos { margin-top: var(--space-xl); padding-top: var(--space-xl); }
  .reel-card { flex-basis: 86%; }
  .approach { margin-top: var(--space-3xl); }
  .section-intro { gap: var(--space-lg); }
  .architecture { padding: var(--space-lg); }
  .architecture-heading { flex-direction: column; align-items: flex-start; gap: var(--space-sm); margin-bottom: var(--space-lg); }
  .architecture-heading strong { font-size: 24px; }
  .architecture-heading span { text-align: left; max-width: none; }
  .steps { gap: var(--space-lg); border-top: 0; padding-top: 0; }
  .steps article { border-left: 1px solid var(--color-rule); padding-top: 0; padding-left: var(--space-md); }
  .steps article::before { display: none; }
  .steps h3 { margin-bottom: var(--space-xs); }
  .architecture-feedback { margin-top: var(--space-lg); padding-top: var(--space-md); text-align: left; }
  .vision { margin-top: var(--space-3xl); }
  .vision-layout { gap: var(--space-xl); padding-bottom: var(--space-3xl); }
  .vision-symbol { width: 120px; }
  .vision-symbol .brand-mark { transform: scale(.45); }
}
@media (max-width: 360px) { .hero-note { grid-template-columns: minmax(0, 1fr) 96px; } .hero-note .hsi-mascots { width: 96px; } .card-title { display: block; } .card-title span { margin-top: var(--space-xs); } }
@media (prefers-reduced-motion: reduce) { .demo-rail { scroll-snap-type: x proximity; } .reel-card { scroll-snap-align: start; } }

/* JOIN US continues the existing HSI companion artwork. */
.join-us { margin-bottom: var(--space-3xl); }
.join-us__panel { position: relative; overflow: clip; border-radius: var(--radius-card); background: var(--color-mascot-warm); padding: 64px 56px 0; }
.join-us__copy { position: relative; z-index: 1; max-width: 780px; }
.join-us h2 { font-size: 16px; line-height: 1.5; margin: 0 0 28px; letter-spacing: 0; }
.join-us__headline { font-family: var(--font-display); font-size: clamp(32px, 4.8vw, 64px); line-height: 1.2; letter-spacing: -.04em; margin: 0; overflow-wrap: break-word; }
.join-us__description { font-size: 16px; line-height: 1.8; max-width: 42ch; margin: 24px 0; }
.join-us__email { display: inline-flex; align-items: center; gap: 12px; min-height: 48px; border-bottom: 1px solid currentColor; font-size: clamp(16px, 2vw, 22px); }
.join-us__email svg { width: 22px; height: 22px; flex: none; }
.join-us__email:hover { color: var(--color-brand); }
.join-us__companions.hsi-mascots { width: min(100%, 640px); margin: 24px 0 0 auto; }
.join-us__companions .hsi-mascots__stage { justify-content: flex-end; gap: 24px; padding-top: 18px; }
.join-us__companions .hsi-mascots__unit { transform-origin: center 92%; }
.join-us__companions.hsi-mascots--enhanced .hsi-mascots__unit { animation-name: join-welcome; }
@keyframes join-welcome { 0%, 100% { transform: translateY(6px) rotate(-3deg); } 50% { transform: translateY(-9px) rotate(3deg); } }
@media (max-width: 760px) {
  .join-us__panel { padding: 32px 24px 0; }
  .join-us__companions.hsi-mascots { margin-top: 40px; width: 100%; }
  .join-us__companions .hsi-mascots__stage { gap: 12px; }
  .join-us h2 { margin-bottom: 20px; }
}
@media (prefers-reduced-motion: reduce) { .join-us__companions.hsi-mascots--enhanced .hsi-mascots__unit { animation: none; } }