@charset "utf-8";

/* Intro only. Desktop retains its original sections and geometry. */
@media only screen and (max-width: 1000px) {
  .ct-intro-page { --cti-header-height: 66px; --cti-red: #ff315e; }
  .ct-intro-page .ct-intro-desktop { display: none; }
  .ct-intro-page .ct-intro-mobile[hidden] { display: block; padding-top: var(--cti-header-height); color: #0b1117; }
  .ct-intro-page .gnb { position: fixed; background: #fff; color: #333; border-bottom-color: #ededed; z-index: 20; }
  .ct-intro-page .gnb .logo b { color: #ed0018; }
  .ct-intro-page .ct-intro-mobile *, .ct-intro-page .ct-intro-mobile *::before,
  .ct-intro-page .ct-intro-mobile *::after { box-sizing: border-box; }
  .ct-intro-page .ct-intro-mobile em { font-style: normal; color: var(--cti-red); }
  .ct-intro-page .ct-intro-mobile a:focus-visible { outline: 3px solid #d10037; outline-offset: 4px; }
  /* THE HERO IS ONE PICTURE, AND EVERYTHING IS ON IT.

     It was two blocks: a square band of video across the top, melting into a
     pink panel that the words sat on. That shape existed because the clip was
     square (1254x1254) - covering a 390x778 hero with a square frame throws
     away a third of its height or half of its width, and the split screen is
     the whole point of the shot.

     The clip is now the VERTICAL cut of the same shot: 1080x1920, the shape
     of the screen it is shown on. So there is no band and no panel. The video
     fills the section - behind the crumbs, behind the heading, behind the
     paragraph and behind the cue - and what makes the type readable is a
     transparent gradient, not a plate.

     Cover crops 5.4% of the width per side at 390x844, 6.4% at 360x800 and
     5.9% at 430x932 (the hero is a little taller than 9:16 on every phone).
     Checked against the clip's three scenes: what those 59-69 source pixels
     take is wall and window at the outer edges - both faces are whole in all
     three, in every frame. Nothing is zoomed, nothing is stretched and there
     are no bars.

     `min-height`, not `height`: a short screen or a long translation makes
     the hero grow rather than squeezing the copy. `svh` and not `vh` - the
     small-viewport unit is the height WITH the address bar showing, so the
     hero does not resize while the bar slides away. */
  .ct-intro-page .cti-hero { position: relative; isolation: isolate; display: flex; flex-direction: column; min-height: calc(100vh - var(--cti-header-height)); min-height: calc(100svh - var(--cti-header-height)); padding: 0; background: #120c10; color: #fff; overflow: hidden; }

  /* --- the picture ------------------------------------------------------
     THE POSTER USED TO PAINT OVER THE VIDEO. The poster is positioned and the
     video was not, so in the same stacking context the still image won every
     time: the clip really was playing - currentTime ran, frames decoded - and
     none of it was ever seen.

     Both layers are absolute now and both fill the whole section; the video
     is above the poster, and the poster is what is seen only until the video
     has a frame to show (`is-video-live` is set on the first `playing`
     event). The crossfade is on the poster, so there is no frame in which
     neither is painted - and no black flash, because the video is not painted
     at all until it has data. Under reduced motion the clip is never fetched
     and this still frame is the hero.

     `object-position: 50% 50%` and nothing else: the source is a split screen
     divided down the middle, so the middle is where it has to be centred. Any
     offset moves the seam off centre and eats one of the two people. --- */
  .ct-intro-page .cti-hero-media { position: absolute; inset: 0; z-index: 0; overflow: hidden; background: #120c10; pointer-events: none; }
  .ct-intro-page .cti-hero-poster { position: absolute; inset: 0; opacity: 1; transition: opacity .6s ease; }
  .ct-intro-page .cti-hero-poster img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
  .ct-intro-page .cti-hero-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; opacity: 0; transition: opacity .6s ease; }
  .ct-intro-page .cti-hero.is-video-live .cti-hero-video { opacity: 1; }
  .ct-intro-page .cti-hero.is-video-live .cti-hero-poster { opacity: 0; }

  /* The only thing between the clip and the type, and it is transparent
     everywhere it can afford to be.

     Two ramps on one element. The head one is short and light - it exists so
     that white crumbs hold on the daylight window the first scene opens on.
     The foot one carries the copy and starts at the middle of the section,
     which on every phone is below the faces: measured on the cropped frame,
     the faces of all three scenes end by 57% of the height, and this reaches
     8% of black at 52%.

     Both are quoted at many stops rather than two, because a linear ramp on a
     photograph shows its own edge - a faint horizontal line across the
     picture where the eye expects none. These follow a curve, so there is
     nothing to see but the picture getting darker. No box, no blur, no shadow
     on the letters. */
  .ct-intro-page .cti-hero-shade { position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(180deg, rgba(10,6,10,.52) 0%, rgba(10,6,10,.40) 34%, rgba(10,6,10,.18) 68%, rgba(10,6,10,0) 100%) top / 100% 140px no-repeat; }

  /* The crumbs open the screen, over the picture rather than on a white bar
     of their own: a location, not a heading. Their left edge is the same left
     edge the heading and the paragraph use, so the three line up. */
  .ct-intro-page .cti-breadcrumb { position: relative; z-index: 1; display: flex; align-items: center; flex: 0 0 auto; min-height: 30px; margin: 0; padding: 14px clamp(22px, 5.8vw, 24px) 0; font-size: 11.5px; font-weight: 500; line-height: 1.4; letter-spacing: -.01em; color: rgba(255,255,255,.92); }
  .ct-intro-page .cti-breadcrumb b { font-weight: 700; color: #fff; }
  .ct-intro-page .cti-breadcrumb span { margin: 0 6px; color: rgba(255,255,255,.55); }

  /* The words sit at the foot, on the gradient, sharing the crumbs' left
     line. `margin-top: auto` puts them there and lets the section grow above
     them if the copy ever needs more room than the screen has.

     They end clear of the assistant: its launcher is 58px square, 14px off
     the bottom right corner of the WINDOW, and the paragraph's last line
     finishes 16px above the top of it at all three widths. */
  /* --- the foot: the words, the cue, and the only thing under them -------
     The gradient belongs to THIS block, not to a share of the section, and
     that is the whole trick. Its ramp is quoted in pixels from the block's
     own top edge, and the block's top padding is the same run-in, so the
     darkening always begins exactly 96px above the first line of the heading
     - in Korean, in English, at 360px and at 430px.

     Anchored to the screen instead, it could not hold both languages: English
     sets this heading in four lines rather than three, so its accent line sat
     12% of the screen higher, on the white sleeve of the first scene, and
     measured 1.5:1 against it. Anchored to the type, that line is at 0.69 of
     the ramp in both languages and measures 3:1 in the worst frame of the
     worst scene.

     Nine stops rather than two: a straight ramp over a photograph shows its
     own edge as a faint line across the picture. These follow a curve, so
     there is nothing to see but the picture getting darker - and it never
     reaches opaque, so the bedding, the arm and the phone are all still there
     behind the type. */
  .ct-intro-page .cti-hero-foot { position: relative; z-index: 1; display: flex; flex-direction: column; margin-top: auto; padding: 96px 0 calc(28px + env(safe-area-inset-bottom, 0px));
    background: linear-gradient(180deg,
      rgba(8,5,9,0) 0, rgba(8,5,9,.08) 30px, rgba(8,5,9,.26) 58px,
      rgba(8,5,9,.48) 90px, rgba(8,5,9,.60) 122px, rgba(8,5,9,.68) 158px,
      rgba(8,5,9,.74) 200px, rgba(8,5,9,.78) 255px, rgba(8,5,9,.82) 100%); }
  .ct-intro-page .cti-hero-copy { position: relative; padding: 0 clamp(22px, 5.8vw, 24px); }
  .ct-intro-page .cti-hero-copy h1 { font-size: clamp(29px, 8.7vw, 36px); line-height: 1.18; letter-spacing: -.035em; font-weight: 800; word-break: keep-all; color: #fff; }
  .ct-intro-page .cti-hero-copy h1 em { color: #ff5b87; }
  .ct-intro-page .cti-hero-copy p { margin-top: 15px; font-size: clamp(13.5px, 3.8vw, 15px); font-weight: 400; line-height: 1.62; letter-spacing: -.03em; word-break: keep-all; color: rgba(255,255,255,.88); }

  /* Centred at the foot. The launcher owns the right corner; this is 90px
     wide in the middle of the screen and the two never meet. */
  .ct-intro-page .cti-scroll { position: relative; display: flex; flex-direction: column; justify-content: center; align-items: center; align-self: center; flex-shrink: 0; gap: 6px; min-width: 90px; min-height: 44px; margin-top: 22px; font-size: 11px; font-weight: 500; letter-spacing: .04em; color: rgba(255,255,255,.82); }
  .ct-intro-page .cti-scroll svg { width: 17px; height: 10px; fill: none; stroke: currentColor; stroke-width: 1.4; }
  .ct-intro-page .cti-section { padding: 48px 22px; max-width: 560px; margin: 0 auto; scroll-margin-top: var(--cti-header-height); }
  .ct-intro-page .cti-section + .cti-section { border-top: 1px solid #f4f4f4; }
  .ct-intro-page .cti-eyebrow { color: #f20b37; font-size: 12px; line-height: 1.4; letter-spacing: .035em; font-weight: 600; margin-bottom: 12px; }
  .ct-intro-page .cti-section-heading h2 { font-size: clamp(27px, 7.6vw, 33px); line-height: 1.23; letter-spacing: -.035em; font-weight: 800; word-break: keep-all; }
  .ct-intro-page .cti-description { margin-top: 18px; color: #41464d; font-size: 15px; font-weight: 400; line-height: 1.6; letter-spacing: -.045em; word-break: keep-all; }
  .ct-intro-page .cti-section-heading { margin-bottom: 28px; }
  .ct-intro-page .cti-features { display: grid; gap: 15px; }
  .ct-intro-page .cti-feature { display: grid; grid-template-columns: 39% minmax(0, 1fr); min-height: 140px; border-radius: 16px; background: #f8f8f8; box-shadow: 0 3px 12px rgba(31,36,42,.065); overflow: hidden; }
  .ct-intro-page .cti-feature-media { position: relative; min-height: 140px; }
  .ct-intro-page .cti-feature-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; }
  .ct-intro-page .cti-feature-2 img { object-position: center 35%; }
  .ct-intro-page .cti-feature-3 img { object-fit: contain; background: #121212; }
  .ct-intro-page .cti-feature-copy { align-self: center; padding: 17px 12px 17px 17px; min-width: 0; }
  .ct-intro-page .cti-feature-title { display: flex; align-items: center; gap: 9px; margin-bottom: 11px; }
  .ct-intro-page .cti-feature-title svg { flex: 0 0 23px; width: 23px; height: 23px; fill: none; stroke: #ff2048; stroke-width: 1.65; stroke-linecap: round; stroke-linejoin: round; }
  .ct-intro-page .cti-feature h3 { font-size: 17px; font-weight: 800; line-height: 1.3; letter-spacing: -.05em; word-break: keep-all; }
  .ct-intro-page .cti-feature p { font-size: 14px; line-height: 1.5; font-weight: 400; letter-spacing: -.025em; color: #41464d; word-break: keep-all; }
  .ct-intro-page .cti-features-link { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 50px; margin-top: 24px; padding: 12px 14px; border-radius: 28px; background: #ff315e; color: #fff; font-size: 14px; font-weight: 500; }
  .ct-intro-page .cti-timeline { padding-left: 4px; }
  .ct-intro-page .cti-milestone { display: grid; grid-template-columns: minmax(0,1fr) 110px; column-gap: 10px; position: relative; padding: 0 0 27px 24px; min-height: 139px; word-break: normal; }
  .ct-intro-page .cti-milestone::before { content: ""; position: absolute; width: 1px; background: #ffacbf; top: 17px; bottom: -17px; left: 0; }
  .ct-intro-page .cti-milestone::after { content: ""; position: absolute; width: 9px; height: 9px; border-radius: 50%; background: #ff1748; left: -4px; top: 12px; }
  .ct-intro-page .cti-milestone:last-child { padding-bottom: 0; min-height: 112px; }
  .ct-intro-page .cti-milestone:last-child::before { display: none; }
  .ct-intro-page .cti-year { color: #f50930; font-size: 27px; font-weight: 700; line-height: 1.2; margin-bottom: 6px; letter-spacing: -.045em; }
  .ct-intro-page .cti-milestone h3 { font-size: 15.5px; font-weight: 700; line-height: 1.4; margin-bottom: 5px; letter-spacing: -.025em; word-break: keep-all; }
  .ct-intro-page .cti-milestone-copy > p:last-child { font-size: 14px; font-weight: 400; line-height: 1.5; color: #4c5159; letter-spacing: -.025em; word-break: keep-all; overflow-wrap: break-word; }
  .ct-intro-page .cti-history-image { width: 110px; height: 110px; object-fit: cover; border-radius: 12px; }
  .ct-intro-page .cti-history-image-6 { object-fit: contain; border-radius: 0; }
  .ct-intro-page .cti-today { padding-bottom: 64px; }
  .ct-intro-page .cti-today h2 { font-size: clamp(25px, 7.15vw, 31px); }
  .ct-intro-page .cti-today .cti-description { font-size: 14px; }
  .ct-intro-page .cti-banners { display: grid; gap: 18px; }
  .ct-intro-page .cti-banner { position: relative; isolation: isolate; display: flex; justify-content: flex-end; align-items: flex-start; min-height: 170px; border-radius: 15px; overflow: hidden; box-shadow: 0 3px 10px rgba(31,36,42,.07); }
  .ct-intro-page .cti-banner > img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
  .ct-intro-page .cti-banner-1 > img { object-position: 35% center; }
  .ct-intro-page .cti-banner-2 > img { object-position: 35% center; }
  .ct-intro-page .cti-banner-3 > img { object-position: 38% center; }
  .ct-intro-page .cti-banner-4 > img { object-position: 30% center; }
  .ct-intro-page .cti-banner::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, transparent 33%, rgba(250,247,247,.28) 51%, rgba(250,247,247,.7) 100%); }
  .ct-intro-page .cti-banner-copy { width: 51%; padding: 31px 9px 45px 0; }
  .ct-intro-page .cti-banner h3 { color: #f60021; font-size: 18px; font-weight: 800; line-height: 1.2; letter-spacing: -.045em; }
  .ct-intro-page .cti-banner p { margin-top: 10px; color: #3d4650; font-size: 14px; font-weight: 400; line-height: 1.5; letter-spacing: -.025em; word-break: keep-all; }
  .ct-intro-page .cti-banner-3 h3 { color: #008ce7; }
  .ct-intro-page .cti-banner-4::before { background: linear-gradient(90deg, transparent 30%, rgba(4,15,27,.1) 50%, rgba(4,15,27,.5)); }
  .ct-intro-page .cti-banner-4 h3 { color: #fff; }
  .ct-intro-page .cti-banner-4 p { color: #ecedf0; }
  .ct-intro-page .cti-banner-arrow { position: absolute; bottom: 13px; right: 14px; display: grid; place-items: center; width: 31px; height: 31px; border-radius: 50%; background: rgba(255,255,255,.8); color: #ff173b; }
  .ct-intro-page .cti-banner-arrow svg { width: 13px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.6; }
  /* Content is visible by default. Only an intersecting block gets a one-shot animation. */
  .ct-intro-page .cti-appear { animation: cti-appear 340ms ease-out both; }
  @keyframes cti-appear { from { opacity: .65; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
  .ct-intro-page .footer { padding-bottom: calc(100px + env(safe-area-inset-bottom)); }
  .ct-intro-page.lang-en .cti-hero-copy h1 { font-size: clamp(29px, 8vw, 36px); letter-spacing: -.045em; }
  .ct-intro-page.lang-en .cti-hero-copy p { font-size: 14px; line-height: 1.55; letter-spacing: -.015em; }
  .ct-intro-page.lang-en .cti-description { letter-spacing: -.015em; }
  .ct-intro-page.lang-en .cti-feature h3 { font-size: 16px; letter-spacing: -.025em; }
  .ct-intro-page.lang-en .cti-feature p,
  .ct-intro-page.lang-en .cti-banner p { letter-spacing: -.015em; word-break: normal; }
  .ct-intro-page.lang-en .cti-milestone { min-height: 148px; }
  .ct-intro-page.lang-en .cti-milestone h3,
  .ct-intro-page.lang-en .cti-milestone-copy > p:last-child { word-break: normal; }
}

@media only screen and (max-width: 374px) {
  .ct-intro-page .cti-feature-copy { padding-left: 12px; padding-right: 10px; }
  .ct-intro-page .cti-feature-title { gap: 6px; }
  .ct-intro-page .cti-feature h3 { font-size: 16px; }
  .ct-intro-page .cti-milestone { grid-template-columns: minmax(0,1fr) 100px; padding-left: 20px; column-gap: 8px; }
  .ct-intro-page .cti-history-image { width: 100px; height: 100px; }
  .ct-intro-page .cti-banner h3 { font-size: 16.5px; }
}
/* A short screen keeps the same composition - it only tightens it. The hero
   is `min-height`, so if even this is not enough the section grows and the
   copy is never clipped. */
@media only screen and (max-width: 1000px) and (max-height: 700px) {
  .ct-intro-page .cti-hero-foot { padding-top: 74px; padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px)); }
  .ct-intro-page .cti-breadcrumb { padding-top: 10px; }
  .ct-intro-page .cti-hero-copy h1 { font-size: 30px; }
  .ct-intro-page .cti-hero-copy p { margin-top: 11px; line-height: 1.52; }
  .ct-intro-page .cti-scroll { margin-top: 14px; min-height: 40px; }
}
@media only screen and (max-width: 1000px) and (prefers-reduced-motion: reduce) {
  .ct-intro-page .cti-appear { animation: none; }
}