/* Frame.io side-by-side composition, CamBrain colors/type, original Shade device. */
.cb-hero {
  --cb-hero-control-height: 30.8px;
  --cb-hero-control-gap: 9.8px;
  position: relative;
  isolation: isolate;
  color: #e2e8f0;
  background: transparent;
  border-bottom: 0;
  /* The shared intro clips the background stack, which crosses this section. */
  overflow: visible;
  padding-bottom: clamp(64px, 7vw, 120px);
}
.cb-hero__backdrop {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: url('./hero/fx3-charcoal.webp') left top / cover no-repeat;
  opacity: .8;
  mask-image: linear-gradient(#000 0%, #000 62%, transparent 100%);
}
/* Dim only the photograph: protect copy at left and fade toward the wordmark. */
.cb-hero__backdrop::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgb(0 0 0 / 16%) 0%, rgb(0 0 0 / 26%) 48%, rgb(0 0 0 / 86%) 100%),
    linear-gradient(90deg, rgb(0 0 0 / 62%) 0%, rgb(0 0 0 / 74%) 32%, rgb(0 0 0 / 51%) 58%, rgb(0 0 0 / 24%) 100%);
}
.cb-hero__watermark {
  --cb-watermark-overlap: .12em;
  position: absolute;
  z-index: 1;
  left: 50%;
  top: calc(100% - 1.215em);
  width: max-content;
  display: flex;
  flex-direction: column;
  align-items: center;
  pointer-events: none;
  user-select: none;
  white-space: nowrap;
  font-family: 'Arial Black', Pretendard, sans-serif;
  font-size: var(--cb-watermark-font-size, 21.675vw);
  font-weight: 900;
  font-kerning: none;
  font-variant-ligatures: none;
  line-height: .85;
  letter-spacing: calc(-1 * var(--cb-watermark-overlap));
  color: #b4c8bd;
  opacity: .055;
  /* One continuous fade for the tightly stacked product name. */
  mask-image: linear-gradient(180deg, #000 0%, #000 40%, rgb(0 0 0 / 70%) 60%, transparent 85%);
  /* Keep glyph widths and tracking independent of the vertical stretch. */
  transform: translateX(-50%) scaleY(1.9);
  transform-origin: center top;
}
.cb-hero__watermark-word,
.cb-hero__watermark-word.cb-decode {
  display: block;
  max-width: none;
  font: inherit;
  letter-spacing: inherit;
  color: inherit;
}
.cb-hero__watermark-word,
.cb-hero__watermark-word .cb-decode-live {
  background: linear-gradient(#d4e6dc, #a6bdb0);
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.cb-hero__watermark-word.cb-decode { background: none; }
.cb-hero__watermark-word + .cb-hero__watermark-word { margin-top: -.14em; }
.cb-hero__watermark-word .cb-decode-text { display: block; position: relative; }
/* Restore the final glyph's trailing space so the decode layer cannot clip N. */
.cb-hero__watermark-word:not(.cb-decode),
.cb-hero__watermark-word .cb-decode-text { padding-inline-end: var(--cb-watermark-overlap); }
.cb-hero__watermark-word .cb-decode-reserve { visibility: hidden; }
.cb-hero__watermark-word .cb-decode-live { position: absolute; inset: 0; overflow: clip; text-shadow: none; }
.cb-hero__watermark-word :is(.cb-decode-edge, .cb-sr-only) { display: none; }
.cb-hero__layout {
  position: relative;
  z-index: 2;
  width: calc(100% - 64px);
  max-width: 1080px;
  margin-inline: auto;
  padding: 0;
  min-height: 640px;
  display: grid;
  grid-template-columns: 400px minmax(0, 1fr);
  gap: 48px;
  align-items: center;
}
.cb-hero__copy { --cb-hero-copy-scale: 1; --cb-hero-title-size: 56.32px; position: relative; z-index: 3; min-width: 0; padding-bottom: 0; }
/* typography.css forces Space Mono on headings and spans; this approved hero
   follows the production site's Pretendard title instead. */
#cambrain-hero-title,
#cambrain-hero-title span { font-family: Pretendard, sans-serif !important; }
.cb-hero__copy h1 {
  display: grid;
  container-type: inline-size;
  margin: 0;
  color: #f1f5f2;
  /* Short lines give the main promise more presence beside the device. */
  font-size: var(--cb-hero-title-size);
  line-height: 1.12;
  font-weight: 600;
  letter-spacing: -.035em;
  word-break: keep-all;
}
.cb-hero__copy .cb-hero__title-lead {
  display: block;
  margin-bottom: 14px;
  color: #f1f5f2;
  font-size: .56em;
  font-weight: 600;
  letter-spacing: -.065em;
}
.cb-hero__copy .cb-hero__title-main { display: block; color: #00e5a0; }
/* All four messages occupy one grid cell; the tallest reserves the space. */
#cambrain-hero-title > .cb-hero__title-phase { grid-area: 1 / 1; min-width: 0; visibility: hidden; }
#cambrain-hero-title > .cb-hero__title-phase.is-active { visibility: visible; }
#cambrain-hero-title .cb-hero__title-phase > span {
  display: flex;
  align-items: baseline;
  height: 1.12em;
  font: inherit;
  letter-spacing: inherit;
  white-space: nowrap;
}
#cambrain-hero-title .cb-hero__title-phase > .cb-hero__title-accent { color: #00e5a0; }
/* CB-M02 compact prompt decoration; keep the approved hero's type scale. */
#cambrain-hero-title .cb-hero__title-lead,
#cambrain-hero-title .cb-hero__title-ending,
#cambrain-hero-title .cb-decode {
  display: flex;
  align-items: baseline;
}
#cambrain-hero-title .cb-decode {
  --cb-effective-size: 1em;
  font: inherit;
  letter-spacing: inherit;
  color: inherit;
}
#cambrain-hero-title .cb-hero__title-ending { height: 1.01em; }
#cambrain-hero-title .cb-decode-text {
  display: block;
  flex: 0 1 auto;
  min-width: 0;
  transform: none;
  padding-inline-end: .065em;
}
#cambrain-hero-title .cb-decode-reserve { visibility: hidden; }
#cambrain-hero-title .cb-decode-live { text-shadow: none; }
#cambrain-hero-title :is(.cb-decode-edge, .cb-sr-only) { display: none; }
.cb-hero__copy .cb-hero__product {
  margin: 0 0 6px;
  color: #f1f5f2;
  font: 700 20px/1.3 Pretendard, sans-serif;
  letter-spacing: -.02em;
}
.cb-hero__product > span { font: inherit; letter-spacing: inherit; color: #67f0bf; }
.cb-hero__copy .cb-hero__eyebrow {
  display: flex;
  align-items: center;
  margin: 0 0 20px;
  color: #67f0bf;
  font: 400 14px/1.5 Pretendard, sans-serif;
  letter-spacing: .01em;
  word-break: keep-all;
}
.cb-hero__eyebrow > span { font: inherit; letter-spacing: inherit; }
.cb-hero__eyebrow .cb-marker {
  --cb-marker-width: 12px;
  --cb-marker-gap: 8px;
  gap: 4px;
  transform: none;
}
.cb-hero__eyebrow .cb-marker::after { width: 4px; height: 4px; }
.cb-hero__support { display: grid; margin: 0; padding-bottom: 16px; }
.cb-hero__support > p {
  grid-area: 1 / 1; margin: 0; visibility: hidden;
  position: relative; align-self: start; width: fit-content; max-width: 100%;
  transform: translateY(var(--cb-support-offset, 0px));
  color: #c4d2cb; font: 400 21.6px/1.6 Pretendard, sans-serif;
  word-break: keep-all; overflow-wrap: anywhere;
}
/* Attach the closing corner to the final word, including wrapped copy. */
.cb-hero__support-end { position: relative; white-space: nowrap; }
.cb-hero__support > p::before,
.cb-hero__support-end::after {
  content: '';
  position: absolute;
  width: 12px; height: 12px;
  border-color: #00e5a0; border-style: solid; border-width: 0;
  pointer-events: none;
}
.cb-hero__support > p::before { left: -10px; top: -7px; border-left-width: 1px; border-top-width: 1px; }
.cb-hero__support-end::after { right: -10px; bottom: -7px; border-right-width: 1px; border-bottom-width: 1px; }
.cb-hero__support > p.is-active { visibility: visible; }
.cb-hero__support > p.cb-hero__support-empty { height: 0; line-height: 0; }
.cb-hero__support > p.cb-hero__support-empty::before { display: none; }
.cb-hero__nle { display: block; margin-top: 6px; color: #b6cec3; font-size: 15.36px; line-height: 1.5; }
.cb-hero__rotation { display: flex; align-items: center; gap: 8.4px; margin-top: var(--cb-hero-control-gap); }
.cb-hero__rotation button {
  display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: var(--cb-hero-control-height); padding: 0; cursor: pointer;
  border: 0; border-radius: 2.1px; background: transparent;
  color: #e2eee8; font: 700 15.4px/1 'Space Mono', monospace;
}
.cb-hero__rotation button[data-hero-phase]::before {
  content: ''; width: 100%; height: 3.5px; border-radius: 2.1px; background: #53615b;
}
.cb-hero__rotation button[data-hero-phase][aria-pressed="true"]::before { background: #00e5a0; }
.cb-hero__rotation button[data-hero-phase]:hover::before { background: #a0cbbb; }
.cb-hero__rotation button[data-hero-phase][aria-pressed="true"]:hover::before { background: #00e5a0; }
.cb-hero__rotation .cb-hero__rotation-pause { width: 30.8px; margin-left: 5.6px; }
.cb-hero__rotation .cb-hero__rotation-pause:hover { color: #00e5a0; }
.cb-hero__rotation button:focus-visible { outline: 2px solid #00e5a0; outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .cb-hero__rotation .cb-hero__rotation-pause { display: none; } }
.cb-hero__actions {
  display: grid; grid-template-columns: .86fr 1fr; gap: 8.4px;
  width: 70%; min-width: min(280px, 100%);
  margin-top: 16.8px; padding-top: 12.6px; border-top: 1px solid #6f938580;
}
.cb-hero__actions a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8.4px;
  min-width: 0;
  min-height: 32.2px;
  padding: 7px 8.4px;
  border: 1px solid #007a52;
  border-radius: 2.55px;
  font: 700 9.1px/1.4 'Space Mono', Pretendard, monospace;
  white-space: nowrap;
  text-decoration: none;
  transition: background .16s ease, border-color .16s ease;
}
/* Use the workflow CTA's quiet green surface and light mint lettering. */
.cb-hero__actions a { background: rgb(0 229 160 / .06); color: #c8fff0; }
.cb-hero__actions .cb-hero__primary { font-size: 11.2px; }
.cb-hero__actions a:hover { background: rgb(0 229 160 / .14); border-color: #00e5a0; }
.cb-hero__actions a:focus-visible { outline: 2px solid #00e5a0; outline-offset: 5px; }
/* Match the visible device to the reference, accounting for the PNG's transparent edges. */
.cb-hero__media {
  position: relative;
  min-width: 0;
  width: min(1040px, calc(100vw - max(32px, (100vw - 1080px) / 2) - 464px));
}
.cb-hero__macbook { position: relative; width: 100%; aspect-ratio: 3944 / 2564; }
.cb-hero__ai-badge {
  position: absolute; right: calc(10.4% + 20pt); bottom: calc(90% + 10px); z-index: 3;
  display: flex; align-items: center; gap: .6em; padding: 4px 12px;
  background: rgba(0,229,160,.12); border: 1px solid rgba(0,229,160,.25);
  color: #00e5a0; font: 400 clamp(7px, .75vw, 12px)/1.5 'Space Mono', monospace;
  letter-spacing: .1em; white-space: nowrap;
}
.cb-hero__ai-badge span { font: inherit; }
.cb-hero__ai-cursor { animation: cb-ai-prompt 1s steps(1, end) infinite; }
.cb-hero__ai-dot { animation: cb-ai-dot 3s ease-in-out infinite; }
@keyframes cb-ai-dot { 0%, 100% { opacity: 1; } 50% { opacity: .2; } }
@keyframes cb-ai-prompt { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .cb-hero__ai-cursor, .cb-hero__ai-dot { animation: none; } }
.cb-hero__screen {
  position: absolute;
  z-index: 1;
  left: 11.68%; top: 11.7%; width: 76.64%; height: 76.6%;
  overflow: hidden;
  background: #08090d;
}
.cb-hero__screen video { display: block; width: 100%; height: 100%; object-fit: contain; }
.cb-hero__frame { position: relative; z-index: 2; display: block; width: 100%; height: auto; pointer-events: none; }
/* Three identical groups keep the viewport filled across the loop boundary. */
.cb-hero__logos {
  --logo-scale: .75;
  --logo-gap: clamp(36px, 3.75vw, 72px);
  position: absolute;
  z-index: 2;
  inset-inline: 0;
  bottom: calc(max(12px, calc(clamp(20px, 2.5vw, 48px) - 25.5px)) + var(--cb-hero-logo-lift, 0px));
  overflow: hidden;
  mask-image: linear-gradient(to right, transparent, #000 3%, #000 97%, transparent);
}
.cb-hero__logo-track {
  display: flex;
  width: max-content;
  animation: cb-logo-slide var(--logo-duration, 50s) linear infinite;
  animation-play-state: paused;
}
.cb-hero__logos.is-running .cb-hero__logo-track { animation-play-state: running; }
.cb-hero__logos:focus-within .cb-hero__logo-track { animation-play-state: paused; }
@media (hover: hover) and (pointer: fine) {
  .cb-hero__logos:hover .cb-hero__logo-track { animation-play-state: paused; }
}
.cb-hero__logos:focus-visible { outline: 1px solid #789b89; outline-offset: -2px; }
.cb-hero__logo-group {
  display: flex;
  flex: 0 0 auto;
  /* Two remaining groups must still cover even an ultrawide viewport. */
  min-width: 50vw;
  align-items: center;
  justify-content: space-around;
  gap: var(--logo-gap);
  padding-inline-end: var(--logo-gap);
}
.cb-hero__logo-group img {
  display: block;
  flex: 0 0 auto;
  width: calc(var(--logo-width) * var(--logo-scale));
  height: calc(var(--logo-height) * var(--logo-scale));
  max-width: none;
  object-fit: contain;
  filter: brightness(0) invert(1);
  opacity: .49;
}
.cb-hero__logo-note {
  margin: 12px 0 0;
  padding-inline: 20px;
  color: rgb(255 255 255 / 35%);
  font-family: Pretendard, sans-serif;
  font-size: 9px;
  font-weight: 400;
  line-height: 13.5px;
  text-align: center;
}
@keyframes cb-logo-slide { to { transform: translateX(calc(-100% / 3)); } }
/* Frame.io-sized desktop composition, with room for the Korean headline. */
@media (min-width: 1200px) {
  .cb-hero { padding-bottom: 84px; }
  .cb-hero__logos { --cb-hero-logo-lift: clamp(64px, calc(896px - 100svh), 164px); }
  .cb-hero__layout {
    width: 100%;
    max-width: 1440px;
    min-height: clamp(760px, 54vw, 840px);
    padding-inline: 48px;
    grid-template-columns: clamp(464px, 38.89vw, 560px) minmax(0, 1fr);
    gap: 24px;
    align-content: center;
  }
  .cb-hero__copy {
    --cb-hero-copy-scale: .85;
    --cb-hero-title-size: clamp(64px, 5vw, 80px);
    /* Scale the complete copy together; reserve its row height for the laptop. */
    transform: translate(48px, var(--cb-hero-copy-offset, 0px)) scale(var(--cb-hero-copy-scale));
    transform-origin: left top;
  }
  .cb-hero__copy .cb-hero__title-lead { font-size: .5em; margin-bottom: 20px; }
  .cb-hero__copy .cb-hero__product { font-size: 24px; }
  .cb-hero__copy .cb-hero__eyebrow { font-size: 16px; margin-bottom: 28px; }
  /* Spread the available height between blocks; preserve type size and line rhythm.
     Keep their original layout boxes so the device's size/position cannot drift. */
  .cb-hero__copy .cb-hero__product { transform: translateY(var(--cb-hero-content-offset, 0px)); }
  .cb-hero__copy .cb-hero__eyebrow { transform: translateY(calc(var(--cb-hero-content-offset, 0px) * .85)); }
  .cb-hero__copy h1 { transform: translateY(calc(var(--cb-hero-content-offset, 0px) * .5)); }
  .cb-hero__actions { width: 80%; margin-top: 28px; padding-top: 20px; gap: 12px; }
  .cb-hero__actions a { min-height: 44px; padding: 10px 16px; font-size: 12px; }
  .cb-hero__actions .cb-hero__primary { font-size: 14px; }
  /* Size containment lets the copy determine the row height, not the image. */
  .cb-hero__media {
    width: calc(100vw - max(48px, (100vw - 1440px) / 2 + 48px) - clamp(464px, 38.89vw, 560px) - 24px);
    max-width: 1080px;
    align-self: stretch;
    container-type: size;
  }
  .cb-hero__macbook {
    --cb-hero-device-drop: 40px;
    position: absolute;
    /* Keep the entire laptop visible while allowing it beyond the text container.
       JS preserves the visible bezel alignment across the three messages. */
    width: min(100cqw, calc((100cqh - var(--cb-hero-control-gap) - var(--cb-hero-control-height)) * 3944 / 2296 * 1.1));
    bottom: calc(var(--cb-hero-control-gap) + var(--cb-hero-control-height));
    transform: translate(-5%, calc(100% * 23 / 2564 + var(--cb-hero-device-offset, 0px)));
  }
}
@media (min-width: 1700px) {
  .cb-hero__logos { --cb-hero-logo-lift: clamp(64px, calc(864px - 100svh), 128px); }
}
/* Fit the complete introduction on laptop displays without shrinking the copy
   or device. Reserve 109px for the offer/header and 84px for the logo footer.
   Intrinsic content height wins on shorter windows; never clip the content. */
@media (min-width: 1200px) and (max-width: 1699px) {
  .cb-hero__layout {
    min-height: min(clamp(760px, 54vw, 840px), calc(100svh - 193px));
    padding-block: 16px;
  }
}
@media (min-width: 1200px) and (max-width: 1699px) and (max-height: 800px) {
  /* Leave room below the lowered copy controls without moving the laptop. */
  .cb-hero { padding-bottom: 100px; }
  .cb-hero__layout { padding-block: 8px; }
  .cb-hero__copy .cb-hero__title-lead { margin-bottom: 14px; }
  .cb-hero__copy .cb-hero__eyebrow { margin-bottom: 20px; }
  .cb-hero__actions { margin-top: 20px; padding-top: 12px; }
}
@media (max-width: 1199px) {
  .cb-hero { padding-bottom: 88px; }
  .cb-hero__backdrop { background-size: auto 680px; opacity: .5; }
  .cb-hero__watermark { top: calc(100% - 1.3875em); transform: translateX(-50%) scaleY(1.75); }
  .cb-hero__layout { width: 100%; grid-template-columns: minmax(0, 1fr); gap: 32px; min-height: 0; padding: 64px 32px 64px; }
  .cb-hero__copy { --cb-hero-title-size: clamp(45.76px, 6.16vw, 56.32px); width: 100%; max-width: 620px; margin-inline: auto; padding-bottom: 0; text-align: center; }
  .cb-hero__copy .cb-hero__eyebrow { justify-content: center; }
  .cb-hero__support > p { justify-self: center; text-wrap: balance; }
  #cambrain-hero-title .cb-hero__title-phase > span,
  #cambrain-hero-title .cb-hero__title-ending,
  #cambrain-hero-title .cb-decode { justify-content: center; }
  /* Center each reserved text/cursor group; keep decoding inside its fixed box. */
  #cambrain-hero-title .cb-decode-text { text-align: left; }
  .cb-hero__actions { width: 100%; max-width: 360px; min-width: 0; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 24px auto 0; padding-top: 16px; }
  .cb-hero__actions a,
  .cb-hero__actions .cb-hero__primary { min-height: 44px; padding: 8px 6px; font-size: 11px; }
  .cb-hero__rotation { justify-content: center; }
  .cb-hero__media { width: 100%; max-width: 1000px; margin-inline: auto; }
}
@media (max-width: 599px) {
  .cb-hero__ai-badge { left: 50%; right: auto; transform: translateX(-50%); }
  .cb-hero { padding-bottom: 72px; }
  .cb-hero__logos { --logo-scale: .75; --logo-gap: 48px; }
  .cb-hero__backdrop { background-size: auto 450px; opacity: .42; }
  .cb-hero__watermark { top: calc(100% - 1.4075em); opacity: .07; }
  .cb-hero__layout { padding: 48px 20px 44px; gap: 26px; }
  .cb-hero__copy { --cb-hero-title-size: clamp(35.2px, 10.56vw, 49.28px); }
  .cb-hero__copy .cb-hero__eyebrow { margin-bottom: 18px; }
  .cb-hero__support > p { font-size: 20.4px; }
  .cb-hero__nle { font-size: 14.4px; }
}
@media (prefers-reduced-motion: reduce) { .cb-hero__actions a { transition: none; } }
@media (prefers-reduced-motion: reduce) {
  .cb-hero__logos { position: relative; bottom: auto; mask-image: none; }
  .cb-hero__logo-track { width: 100%; animation: none; }
  .cb-hero__logo-group { width: 100%; min-width: 0; flex-wrap: wrap; justify-content: center; gap: 32px 48px; padding: 20px 24px; }
  .cb-hero__logo-group[aria-hidden] { display: none; }
}