/* An editorial company introduction, scoped to /company and /en/company. */
[data-corporate-page="company"] { color: #111; font-family: "Pretendard Variable", sans-serif; }
.company-shell { width: min(1320px, calc(100% - 112px)); margin-inline: auto; }
.company-intro { display: grid; place-items: center; min-height: clamp(580px, 84svh, 900px); padding: 120px 32px 160px; text-align: center; }
.company-intro h1 { margin: 0; font-size: 54px; line-height: 72px; font-weight: 700; letter-spacing: normal; word-break: keep-all; }
.company-eyebrow { margin: 0; font-size: 13px; font-weight: 600; line-height: 1.4; letter-spacing: .12em; }
.company-visual { overflow: hidden; padding-block: 80px 120px; }
.company-visual__inner { display: grid; grid-template-columns: 1fr 1fr; align-items: center; width: min(1320px, calc(100% - 112px)); height: 720px; margin-inline: auto; }
.company-visual__copy { position: relative; z-index: 1; padding-block: 60px; }
.company-visual__statement { margin: 24px 0; font-size: clamp(54px, 6.1vw, 88px); font-weight: 600; line-height: 1.03; letter-spacing: normal; }
.company-visual__caption { margin: 0; color: #5f6368; font-size: 17px; line-height: 1.7; word-break: keep-all; }
.company-apps { display: flex; gap: 28px; margin-top: 56px; }
.company-apps > a { display: grid; gap: 12px; justify-items: center; }
.company-app-link { color: inherit; text-decoration: none; border-radius: 12px; }
.company-app-link:focus-visible { outline: 2px solid #454950; outline-offset: 6px; }
.company-app-link img { transition: transform .2s ease; }
.company-app-link:hover img { transform: translateY(-3px); }
.company-apps img { width: 48px; height: 48px; border-radius: 12px; object-fit: cover; }
.company-apps span { color: #62666d; font-size: 11px; }
.company-visual__screens { position: relative; height: 700px; margin-inline-start: 25px; }
.company-visual__screens img { position: absolute; width: 245px; height: 530px; object-fit: cover; border: 6px solid #25272c; border-radius: 34px; background: #fff; box-shadow: 0 24px 40px #16181d24; }
.company-visual__shopping { left: 0; top: 112px; transform: rotate(-10deg); }
.company-visual__screens .company-visual__live { right: 0; top: 36px; transform: rotate(9deg); }
.company-about { padding-block: 160px; border-top: 1px solid #e8e8e8; }
.company-about__body { display: grid; grid-template-columns: 1fr 1.15fr; gap: 80px; }
.company-about h2 { margin: 0; font-size: clamp(30px, 3vw, 42px); font-weight: 700; line-height: 1.4; letter-spacing: normal; }
.company-about__lead { margin: 0 0 25px; font-size: 24px; font-weight: 700; line-height: 1.6; letter-spacing: normal; word-break: keep-all; }
.company-description { margin: 0; color: #666; font-size: 16px; font-weight: 500; line-height: 28px; letter-spacing: normal; word-break: keep-all; overflow-wrap: break-word; }
.company-story { display: grid; grid-template-columns: 1fr 1.15fr; align-items: start; gap: 48px 80px; padding-block: 160px; border-top: 1px solid #e8e8e8; }
.company-story__heading { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1.15fr; align-items: start; gap: 80px; }
.company-story__copy { position: static; align-self: end; }
.company-story__heading h2 { margin: 0; font-size: 58px; font-weight: 700; line-height: 58px; letter-spacing: normal; }
.company-story__tagline { margin: 0; font-size: 32px; font-weight: 700; line-height: 44px; letter-spacing: normal; word-break: keep-all; }
.company-story__copy h3 { margin: 0 0 16px; font-size: 16px; font-weight: 700; line-height: 20px; letter-spacing: normal; word-break: keep-all; }

.company-build-art { min-width: 0; }
.company-build-art__apps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.company-build-art__apps > a { display: grid; gap: 18px; min-width: 0; border-radius: 8px; color: inherit; text-decoration: none; }
.company-build-art__apps > a:focus-visible { outline: 2px solid #454950; outline-offset: 6px; }
.company-build-art__apps img { display: block; width: 100%; height: auto; aspect-ratio: 600 / 1300; object-fit: contain; border-radius: 8px; }
.company-build-art__app-name { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 14px; line-height: 1.5; text-align: start; }
.company-build-art__app-name > span:first-child { min-width: 0; overflow-wrap: anywhere; }
.company-build-art__app-name > span:last-child { flex-shrink: 0; }
.company-text-link { display: inline-flex; align-items: center; gap: 36px; margin-top: 32px; padding-bottom: 8px; border-bottom: 1px solid currentColor; color: #111; font-size: 15px; font-weight: 500; line-height: 1.5; text-decoration: none; }
.company-text-link > span:last-child { font-size: 23px; transition: transform .2s; }
.company-text-link:hover > span:last-child { transform: translate(2px, -2px); }
.company-text-link:focus-visible { outline: 2px solid #111; outline-offset: 6px; }
.company-commerce-art { display: flex; align-items: center; justify-content: center; }
.company-commerce-art > img { display: block; width: min(320px, 80%); height: auto; object-fit: contain; border: 5px solid #292c32; border-radius: 38px; box-shadow: 0 20px 45px #16181d18; }
.company-global-art { position: relative; height: 490px; margin: 0; overflow: hidden; border-radius: 8px; background: #eee; }
.company-global-art img { width: 100%; height: 100%; object-fit: cover; }
.company-closing { margin-top: 0; padding-block: 160px; background: #f6f6f4; text-align: center; }
.company-closing h2 { margin: 32px 0 0; font-size: clamp(30px, 3.5vw, 48px); font-weight: 700; line-height: 1.5; letter-spacing: normal; word-break: keep-all; }
/* Desktop chapters align the title and supporting copy with the image's edges. */
@media (min-width: 769px) {
    .company-story { grid-template-rows: auto auto 1fr; }
    .company-story__heading { display: contents; }
    .company-story__heading h2 { grid-column: 1; grid-row: 1; }
    .company-story__tagline { grid-column: 1; grid-row: 2; }
    .company-story__copy { grid-column: 1; grid-row: 3; }
    .company-story > :is(.company-build-art, .company-commerce-art, .company-global-art) { grid-column: 2; grid-row: 1 / 4; align-self: start; }
}
@media (max-width: 1100px) {
    .company-visual__inner { height: 640px; }
    .company-visual__screens { height: 600px; }
    .company-visual__screens img { width: 210px; height: 455px; }
    .company-visual__screens .company-visual__live { right: -25px; }
    .company-about__body, .company-story__heading { column-gap: 44px; }
    .company-story { column-gap: 44px; }
    .company-build-art__apps { gap: 18px; }
}
@media (max-width: 768px) {
    .company-shell { width: calc(100% - 48px); }
    .company-intro { min-height: clamp(460px, 78svh, 680px); padding: 96px 24px 112px; }
    .company-intro h1 { font-size: 32px; line-height: 42px; }
    .company-visual { padding-block: 24px 96px; }
    .company-visual__inner { width: calc(100% - 48px); height: auto; grid-template-columns: 1fr; grid-template-rows: auto 500px; gap: 28px; }
    .company-visual__copy { padding: 0; align-self: start; }
    .company-visual__statement { margin: 18px 0; font-size: clamp(44px, 14vw, 60px); }
    .company-visual__caption { font-size: 14px; }
    .company-apps { gap: 24px; margin-top: 26px; }
    .company-apps img { width: 38px; height: 38px; border-radius: 10px; }
    .company-apps > a { gap: 8px; }
    .company-apps span { font-size: 9px; }
    .company-visual__screens { height: 500px; width: min(360px, 100%); margin: 0 auto; }
    .company-visual__screens img { width: min(180px, 44vw); height: auto; aspect-ratio: 774 / 1678; border-width: 4px; border-radius: 26px; }
    .company-visual__shopping { left: 16px; top: 70px; }
    .company-visual__screens .company-visual__live { right: 16px; top: 25px; }
    .company-about { padding-block: 88px; }
    .company-about__body { grid-template-columns: 1fr; gap: 30px; }
    .company-about h2 { font-size: 32px; }
    .company-about__lead { font-size: 21px; }
    .company-description { font-size: 15px; line-height: 26px; }
    .company-story { grid-template-columns: 1fr; gap: 36px; padding-block: 88px; }
    .company-story__heading { grid-template-columns: 1fr; gap: 16px; }
    .company-story__copy { position: static; padding-top: 0; }
    .company-story__heading h2 { font-size: 32px; line-height: 42px; }
    .company-story__tagline { margin: 0; font-size: 32px; line-height: 42px; }
    .company-story__copy h3 { font-size: 16px; line-height: 22px; }

    .company-build-art__apps { gap: 16px; }
    .company-build-art__apps > a { gap: 12px; }
    .company-build-art__app-name { font-size: 13px; }
    .company-commerce-art > img { width: min(280px, 80%); border-width: 4px; border-radius: 32px; }
    .company-global-art { height: 380px; }
    .company-closing { padding-block: 88px; }
    .company-closing h2 { font-size: 29px; }
}
@media (prefers-reduced-motion: reduce) {
    .company-text-link > span:last-child, .company-app-link img { transition: none; }
}

/* Allow translated headings and app names to wrap without expanding the grid. */
.company-story__heading > *, .company-story__copy, .company-about__body > *, .company-visual__copy { min-width: 0; }
.company-intro h1, .company-story h2, .company-visual__statement, .company-about h2, .company-closing h2 { overflow-wrap: anywhere; }
.company-about__lead, .company-story__tagline, .company-story__copy h3, .company-visual__caption { overflow-wrap: anywhere; }
.company-apps, .company-build-art__apps { align-items: start; }
.company-app-link { min-width: 0; text-align: center; }
.company-apps .company-app-link { max-width: 108px; }
.company-apps span { overflow-wrap: anywhere; }
[data-corporate-page="company"][dir="rtl"], html[dir="rtl"] [data-corporate-page="company"] { text-align: start; }
html[dir="rtl"] .company-closing { text-align: center; }
@media (max-width: 768px) {
    .company-apps { gap: 20px; }
    .company-apps .company-app-link { max-width: 90px; }
}
