/* Preserve the restored hero. All additions remain scoped to the company page.
   Body tokens follow LandingSection/LandingTypography and the current home page. */
/* Pretendard with the same faces as the main site (src/styles/pretendard.css, made by
   scripts/prepare-pretendard.py); update both together if the font files change.
   Copyright Kil Hyung-jin; SIL OFL 1.1: /fonts/pretendard-1.3.9/OFL.txt */
/* Compatibility for decomposed Hangul input: this face also advertises
 * the composed range needed by normalization. Later grouped faces take
 * precedence for ordinary precomposed Hangul, avoiding the full font. */
@font-face {
    font-family: 'Pretendard';
    font-weight: 45 920;
    font-style: normal;
    font-display: swap;
    src: url('/fonts/PretendardVariable.woff2') format('woff2-variations');
    unicode-range: U+1100-11FF, U+A960-A97F, U+AC00-D7FF;
}

@font-face {
    font-family: 'Pretendard';
    font-weight: 45 920;
    font-style: normal;
    font-display: swap;
    src: url('/fonts/pretendard-1.3.9/NotiflyHangulRare.f76d18fce97d.woff2') format('woff2-variations');
    unicode-range: U+AC00-D7A3;
}

@font-face {
    font-family: 'Pretendard';
    font-weight: 45 920;
    font-style: normal;
    font-display: swap;
    src: url('/fonts/pretendard-1.3.9/NotiflyHangulCommon.4dd7de55588f.woff2') format('woff2-variations');
    unicode-range: U+AC00-D7A3;
}

@font-face {
    font-family: 'Pretendard';
    font-weight: 45 920;
    font-style: normal;
    font-display: swap;
    src: url('/fonts/pretendard-1.3.9/NotiflySupplement.ceacf0946914.woff2') format('woff2-variations');
    unicode-range: U+20-7E, U+A0-148, U+14A-1C3, U+1C5-31E, U+321-377, U+37A-37F, U+384-38A, U+38C, U+38E-3A1, U+3A3-3E1, U+3F0-49D, U+4A0-4FF, U+52F, U+E3F, U+1D43, U+1D47-1D49, U+1D4D, U+1D4F-1D50, U+1D52, U+1D56-1D58, U+1D5B, U+1D62-1D65, U+1D9C, U+1DA0, U+1DBB, U+1DBF-1DF5, U+1DFC-1F15, U+1F18-1F1D, U+1F20-1F45, U+1F48-1F4D, U+1F50-1F57, U+1F59, U+1F5B, U+1F5D, U+1F5F-1F7D, U+1F80-1FB4, U+1FB6-1FC4, U+1FC6-1FD3, U+1FD6-1FDB, U+1FDD-1FEF, U+1FF2-1FF4, U+1FF6-1FFE, U+2000-200D, U+2010-2027, U+202F-2060, U+2070-2071, U+2074-208E, U+2090-209C, U+20A0-20BF, U+20DB-20DE, U+20E8, U+20F0, U+2100-2101, U+2103, U+2105-2106, U+2109, U+2113, U+2116-2117, U+211E-2123, U+2126, U+212A-212B, U+212E, U+2132, U+213B, U+214D, U+214F, U+2153, U+215A-2188, U+2190-2199, U+21A9-21AA, U+21B0-21B1, U+21B3-21B5, U+21BA-21BB, U+21D0, U+21D2, U+21D4, U+21DE-21DF, U+21E4-21E5, U+21E7, U+21EA, U+2202, U+2205-2206, U+220F, U+2211-2212, U+221A, U+221E, U+222B, U+2248, U+2260, U+2264-2265, U+226A-226B, U+22EF, U+2303, U+2305, U+2318, U+2325-2327, U+2329-232B, U+2380, U+2387, U+238B, U+23CE-23CF, U+2423, U+2460-2473, U+24B6-24CF, U+24EA-24F4, U+24FF, U+25A0-25A2, U+25AA, U+25B2-25B3, U+25B6-25B7, U+25BA-25BD, U+25C0-25C1, U+25C4-25C7, U+25CA-25CB, U+25CF, U+25E6, U+25EF, U+2600, U+2605-2606, U+263C, U+2661, U+2665, U+266A, U+26A0, U+2713, U+2717, U+2756, U+2776-2789, U+27EF, U+27F5-27FA, U+2985-2986, U+2B06, U+2B12-2B13, U+2B1C, U+2C7C, U+2C7F, U+2DFF, U+2E18, U+3000-3003, U+3008-3011, U+3014-301F, U+3041-3094, U+3099-309E, U+30A1-30FE, U+3131-3164, U+318D, U+321C, U+3380-3384, U+3388-33CA, U+33CF-33D0, U+33D3, U+33D6, U+33D8, U+33DB-33DD, U+A69F, U+A7FF, U+A92E, U+E000, U+E002-E05E, U+E06A-E080, U+E093-E096, U+E0A5-E0E6, U+E0F3-E11C, U+E11E-E12A, U+E131-E147, U+E14E-E164, U+EE01-EE05, U+F000-F057, U+F6C3, U+FE20-FE2D, U+FEFF, U+FF01-FF60, U+FFA1-FFBE, U+FFC2-FFC7, U+FFCA-FFCF, U+FFD2-FFD7, U+FFDA-FFDC, U+FFE0-FFE1, U+FFE5-FFE6, U+1F10B, U+1F12F-1F149, U+1F150-1F16B, U+1F170-1F189, U+1F850, U+1F852, U+F0000-F0002;
}

/* Lexend (Google Fonts v26, Latin), for the "mood." mark in the hero messages.
   Copyright 2018 The Lexend Project Authors (https://github.com/googlefonts/lexend),
   with Reserved Font Name "RevReading Lexend". SIL OFL 1.1: https://openfontlicense.org */
@font-face {
    font-family: 'Lexend';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('/about/company/assets/lexend-latin-b7e7538f59bf.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308,
        U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

.company-page {
    --bg: #050812;
    --bg-2: #07101f;
    --surface: #0a1323;
    --surface-2: #0f1b2e;
    --surface-3: #15243a;
    --ink: #f5f9ff;
    --ink-soft: #dce8ff;
    --muted: #8fa2bf;
    --muted-2: #61718b;
    --line: rgba(153, 185, 255, 0.16);
    --line-strong: rgba(153, 185, 255, 0.3);
    --blue: #3377ff;
    --blue-2: #6ea0ff;
    --blue-3: #a8c4ff;
    --blue-deep: #123a92;
    --shadow: rgba(2, 10, 28, 0.58);
    --radius: 8px;
    --ease: cubic-bezier(0.22, 1, 0.36, 1);
    --ease-heavy: cubic-bezier(0.16, 1, 0.3, 1);
    --font: 'Pretendard', 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
        'Helvetica Neue', Arial, sans-serif;
    --mono: 'SF Mono', 'Menlo', 'Monaco', monospace;
}

.company-page {
    --c6-bg: #0a0a0b;
    --c6-bg-2: #101012;
    --c6-ink: #fafafa;
    --c6-ink-soft: rgba(250, 250, 250, 0.72);
    --c6-ink-muted: rgba(250, 250, 250, 0.5);
    --c6-ink-faint: rgba(250, 250, 250, 0.32);
    --c6-line: rgba(255, 255, 255, 0.08);
    --c6-line-strong: rgba(255, 255, 255, 0.16);
    --c6-accent: #4d8aff;
    --c6-accent-strong: #6ca0ff;
    --c6-accent-soft: rgba(77, 138, 255, 0.16);
    --c6-accent-hover: #6ca0ff;

    /* --- Unified photo LUT (Linear-style: gently desaturated but colors stay alive) --- */
    --c6-photo-filter: brightness(0.92) contrast(1.05) saturate(0.85);
    --c6-photo-filter-hover: brightness(1) contrast(1.02) saturate(1);

    /* --- Slower, more cinematic ease curves --- */
    --c6-ease-slow: cubic-bezier(0.16, 0.84, 0.24, 1);
    --c6-ease-deep: cubic-bezier(0.2, 0.85, 0.15, 1);

    /* --- Layout — very generous --- */
    --c6-max: 1200px;
    --c6-max-wide: 1280px;
    --c6-gutter: clamp(24px, 6vw, 80px);
    --c6-section-pad: clamp(80px, 11vw, 140px);

    /* --- Type scale — Linear-inspired light weights --- */
    --c6-display: clamp(38px, 4.5vw, 64px);
    --c6-display-w: 580;
    --c6-display-line: 1.06;

    --c6-section: clamp(26px, 2.8vw, 38px);
    --c6-section-w: 560;
    --c6-section-line: 1.18;

    --c6-sub: clamp(19px, 1.5vw, 22px);
    --c6-sub-w: 560;
    --c6-sub-line: 1.32;

    --c6-body: 17px;
    --c6-body-w: 400;
    --c6-body-line: 1.85;

    --c6-meta: 14px;
    --c6-meta-w: 500;

    --c6-ease: cubic-bezier(0.22, 0.72, 0.18, 1);

    background: #0a0a0b;
}
/* Body sections reuse culture6.css: section headers, links, TRUST and NEWS. */
.company-page .brand-mark,
.company-page .brand-mark img {
    width: 106px;
    height: 30px;
    object-fit: contain;
}
.company-page .site-header.is-elevated {
    background: rgba(255, 255, 255, 0.96);
}
.company-page .site-header:not(.on-dark) {
    --nav-color: #52525b;
}
.company-page .site-header.on-dark.is-elevated {
    background: rgba(10, 10, 11, 0.94);
    box-shadow: none;
}
.company-page .nav-links a {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
}
.company-page .skip-link {
    background: #fff;
    color: #18181b;
}
.company-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Editorial body: existing culture typography and surfaces, with layouts led by each source. */
.company-section {
    background: var(--c6-bg);
    color: var(--c6-ink);
    scroll-margin-top: 76px;
}
.company-section h2,
.company-section h3,
.company-section p,
.company-section blockquote {
    word-break: keep-all;
    overflow-wrap: break-word;
}
.company-section h2 {
    margin: 0;
    font-size: var(--c6-display);
    font-weight: var(--c6-display-w);
    line-height: 1.2;
    letter-spacing: -0.035em;
}
.company-section figure {
    margin: 0;
}
.company-section .c6-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    font-size: 14px;
}
.company-section .c6-link[target='_blank']::after {
    content: '↗';
}

/* Keep the original hero artwork; shorten only the scroll and phrase timing. */
.company-page .company-scroll-hero {
    min-height: 150dvh;
}
.company-page .story-phrase {
    transition:
        opacity 240ms ease,
        transform 320ms var(--ease);
}
.company-definition {
    max-width: 900px;
}
.company-definition h2 {
    font-size: clamp(32px, 3.35vw, 48px);
    line-height: 1.4;
}
.company-definition p {
    margin: 24px 0 0;
    font-size: 17px;
    line-height: 1.85;
    color: var(--c6-ink-soft);
}
.company-metrics {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 32px;
    margin: 56px 0 0;
}
.company-metrics > div {
    display: flex;
    flex-direction: column-reverse;
    gap: 12px;
}
.company-metrics dd {
    margin: 0;
    font-size: 64px;
    font-weight: 500;
    line-height: 1.1;
    letter-spacing: -0.05em;
    white-space: nowrap;
}
.company-metrics dd span {
    margin-left: 3px;
    font-size: 28px;
    letter-spacing: -0.035em;
}
.company-metrics dt {
    font-size: 14px;
    line-height: 1.5;
    color: var(--c6-ink-soft);
}
/* Reuse the seven public home-page logo strips in two continuous rows. */
.company-customer-logos {
    margin-top: 48px;
}
.company-logo-window {
    overflow-x: auto;
    margin-bottom: 28px;
    mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent);
}
.company-logo-track,
.company-logo-group {
    display: flex;
    width: max-content;
    align-items: center;
}
.company-logo-group {
    flex-shrink: 0;
}
.company-logo-track img {
    display: block;
    flex-shrink: 0;
    width: auto;
    height: 21px;
    filter: brightness(0) invert(1);
    opacity: 0.72;
}

.company-story-intro {
    display: grid;
    grid-template-columns: 1.15fr 1fr;
    gap: 80px;
    align-items: start;
    margin-bottom: 72px;
}
.company-story-intro h2 {
    font-size: clamp(36px, 4vw, 56px);
    line-height: 1.25;
}
.company-story-copy p {
    margin: 0 0 20px;
    color: var(--c6-ink-soft);
    font-size: 17px;
    line-height: 1.85;
}
.company-story-copy p:last-child {
    margin-bottom: 0;
}

.company-approach .c6-section {
    padding-bottom: 72px;
}
/* TRUST and NEWS reuse the team page's logo wall, archive and heading scale. */
.company-trust h2,
.company-news h2 {
    font-size: var(--c6-section);
    font-weight: var(--c6-section-w);
    line-height: var(--c6-section-line);
    letter-spacing: -0.022em;
}
.company-news .c6-section {
    padding-top: 0;
}
.company-news {
    --c6-ink-muted: rgba(250, 250, 250, 0.72);
    --c6-ink-faint: rgba(250, 250, 250, 0.64);
}

.company-page a:focus-visible,
.company-page button:focus-visible {
    outline: 3px solid #6ca0ff;
    outline-offset: 5px;
}

@media (max-width: 1000px) {
    .company-desktop-break {
        display: none;
    }
    .company-story-intro {
        grid-template-columns: 1fr;
        gap: 32px;
    }
    .company-story-copy {
        max-width: 620px;
    }
}
@media (max-width: 700px) {
    .company-page .site-header {
        min-height: 68px;
        padding: 10px 20px;
    }
    .company-page .nav-links {
        gap: 18px;
        justify-self: end;
    }
    .company-page .nav-links a {
        font-size: 12px;
    }
    .company-page .nav-links .active {
        display: none;
    }
    .company-section .c6-section {
        padding: 72px 24px;
    }
    .company-definition h2 {
        font-size: 30px;
    }
    .company-definition p {
        font-size: 16px;
    }
    .company-metrics {
        gap: 12px;
        margin-top: 36px;
    }
    .company-metrics dd {
        font-size: clamp(30px, 8.7vw, 44px);
    }
    .company-metrics dd span {
        font-size: clamp(11px, 3.1vw, 17px);
        margin-left: 1px;
    }
    .company-metrics dt {
        font-size: 11px;
        word-break: keep-all;
    }
    .company-customer-logos {
        margin-top: 36px;
    }
    .company-story-intro {
        gap: 28px;
        margin-bottom: 36px;
    }
    .company-story-intro h2 {
        font-size: 36px;
    }
    .company-story-copy p {
        font-size: 16px;
    }
    .company-approach .c6-section {
        padding-bottom: 48px;
    }
    .company-news .c6-section {
        padding-top: 0;
    }
}
@media (max-width: 359px) {
    .company-definition h2 {
        font-size: 27px;
    }
    .company-story-intro h2 {
        font-size: 30px;
    }
}

/* Keep the landing footer above the about-page decorative grid overlay. */
/* Match the landing page's inherited text defaults inside the isolated footer. */
.company-landing-footer {
    position: relative;
    z-index: 1;
    color: #000;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.company-landing-footer h2 {
    line-height: 1.5;
    letter-spacing: normal;
}
.company-landing-footer img {
    color: transparent;
}

/* Refinement follows culture type weights and the home page's closing CTA. */
.company-page {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.company-section h2 {
    font-weight: 500;
    letter-spacing: -0.035em;
    text-wrap: balance;
}
.company-definition h2 {
    line-height: 1.3;
}
.company-definition p {
    max-width: 780px;
    line-height: 1.9;
}
.company-metrics dd {
    font-weight: 400;
    font-variant-numeric: tabular-nums;
}
.company-metrics dd span {
    font-weight: 400;
}

.company-story-intro h2 {
    font-size: clamp(32px, 3.5vw, 48px);
    line-height: 1.35;
}
.company-story-copy p {
    line-height: 1.9;
}

.company-trust .c6-section-header {
    max-width: 920px;
    margin-bottom: 72px;
}
.company-trust h2 {
    font-size: clamp(28px, 3.4vw, 44px);
    line-height: 1.4;
    text-wrap: pretty;
}
.company-trust .c6-section-lede {
    font-size: 15px;
}
.company-trust .c6-logos img {
    opacity: 0.72;
}
.company-trust .c6-logos img:hover {
    opacity: 1;
}
.company-news .c6-section-header {
    margin-bottom: 40px;
}
.company-news h2 {
    font-size: clamp(28px, 3vw, 40px);
    line-height: 1.3;
}
.company-news .c6-news-item a {
    grid-template-columns: 84px minmax(0, 1fr) 116px;
    gap: 28px;
    padding: 25px 0;
}
.company-news .c6-news-tag {
    display: none;
}
.company-news .c6-news-item h3 {
    font-size: 18px;
    font-weight: 450;
    line-height: 1.6;
    letter-spacing: -0.02em;
    text-wrap: pretty;
}
.company-news .c6-news-source {
    gap: 12px;
}

@media (max-width: 900px) {
    .company-news .c6-news-item a {
        grid-template-columns: 1fr auto;
        grid-template-rows: auto auto;
        gap: 10px 20px;
        padding: 24px 0;
    }
    .company-news .c6-news-item time {
        grid-column: 1;
        grid-row: 1;
    }
    .company-news .c6-news-source {
        grid-column: 2;
        grid-row: 1;
    }
    .company-news .c6-news-item h3 {
        grid-column: 1 / -1;
        grid-row: 2;
        font-size: 17px;
    }
}
@media (max-width: 700px) {
    .company-trust .c6-section-header {
        margin-bottom: 48px;
    }
    .company-trust h2 {
        font-size: 30px;
    }
}
@media (max-width: 359px) {
    .company-trust h2 {
        font-size: 27px;
    }
}

/* ==========================================================================
   Header: translucent surface and a pill CTA
   ========================================================================== */
.company-page .site-header.is-elevated {
    background: rgba(250, 251, 253, 0.92);
    box-shadow: 0 1px 0 rgba(15, 23, 42, 0.06);
    backdrop-filter: saturate(180%) blur(16px);
    -webkit-backdrop-filter: saturate(180%) blur(16px);
}
.company-page .site-header.on-dark.is-elevated {
    background: rgba(6, 9, 18, 0.86);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06);
}
/* Over the hero the header stays clear, as it is at the top of the page, so the
   scene runs full bleed; the glass surface starts below the hero. */
.company-page .site-header {
    transition:
        background 260ms ease,
        box-shadow 260ms ease;
}
.company-page .site-header.is-over-hero.is-elevated,
.company-page .site-header.on-dark.is-over-hero.is-elevated {
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}
.company-page .nav-links .company-nav-cta {
    min-height: 38px;
    padding: 0 16px;
    border-radius: 999px;
    background: #0044cc;
    color: #fff;
    font-weight: 600;
    transition:
        background 200ms ease,
        color 200ms ease;
}
.company-page .nav-links .company-nav-cta::after {
    display: none;
}
.company-page .nav-links .company-nav-cta:hover {
    background: #1a5ee6;
    color: #fff;
}
.company-page .site-header.on-dark .nav-links .company-nav-cta {
    background: #fff;
    color: #0a0a0b;
}
.company-page .site-header.on-dark .nav-links .company-nav-cta:hover {
    background: #e8eeff;
    color: #0a0a0b;
}

@media (max-width: 700px) {
    .company-page .nav-links .company-nav-cta {
        min-height: 34px;
        padding: 0 13px;
    }
}

.company-page .skip-link {
    transform: translateY(calc(-100% - 24px));
}
.company-page .skip-link:focus {
    transform: none;
}

/* ==========================================================================
   Hero phrase: balanced line breaks
   ========================================================================== */
.company-page .company-scroll-hero .story-phrase {
    text-wrap: balance;
    word-break: keep-all;
}

/* ==========================================================================
   Hero messages
   One customer's day of messages from fictional brands, each drawn in its
   own channel's UI. Inner sizes are in em, so --hc scales every card. Each
   .hm lands at the scroll progress in its data-on (company/script.js); all
   seven land on load. .hm-in carries the landing motion and .hm-ring the
   scroll gathering, so the two never fight over one transform.
   The mock screens use the platform's own font where it exists (Apple devices)
   and Pretendard elsewhere; when night falls they switch to dark mode.
   ========================================================================== */
.company-page .company-scroll-hero {
    min-height: 210dvh;
    /* 0 to 1 while the headline swaps */
    --swap: clamp(0, calc((var(--hero-progress, 0) - 0.38) / 0.16), 1);
    /* 0 to 1 from the moment the second headline takes over to the end of the
       scroll, eased at both ends, while the messages gather in */
    --gather-t: clamp(0, calc((var(--hero-progress, 0) - 0.46) / 0.54), 1);
    --gather: calc(var(--gather-t) * var(--gather-t) * (3 - 2 * var(--gather-t)));
}
.company-page .notifly-hero-scene {
    --hc: clamp(10.5px, min(1.66vh, 1.08vw), 15.5px);
    --hm-shadow:
        0 1px 2px rgba(15, 23, 42, 0.06), 0 10px 24px -10px rgba(15, 35, 90, 0.22),
        0 30px 60px -24px rgba(15, 35, 90, 0.3);
    /* KakaoTalk */
    --k-room: #b2c7da;
    --k-bubble: #fff;
    --k-ink: #191919;
    --k-name: #3d4852;
    --k-btn: #f0f1f3;
    --k-time: #4d5a66;
    --k-soft: #8a8f98;
    /* iOS Messages */
    --s-screen: #fff;
    --s-bubble: #e9e9eb;
    --s-ink: #000;
    --s-meta: #8e8e93;
    /* Safari web push on macOS */
    --w-bg: #f5f5f7;
    --w-edge: rgba(255, 255, 255, 0.7);
    --w-ink: #1d1d1f;
    --w-sub: #86868b;
    /* Mail */
    --e-bg: #fff;
    --e-edge: rgba(15, 23, 42, 0.07);
    --e-ink: #18181b;
    --e-subject: #3f3f46;
    --e-sub: #8b8f98;
    --e-line: #f1f1f3;
    --e-count-bg: #e8eeff;
    --e-count: #0044cc;
    /* iOS notification */
    --i-bg: #fafafc;
    --i-ink: #1c1c1e;
    --i-sub: #8e8e93;
    --i-stack: rgba(236, 238, 243, 0.72);
    /* The app under the popup */
    --p-app-bg: #fff;
    --p-app-ink: #18181b;
    --p-app-sub: #8b8f98;
    --p-scrim: rgba(0, 0, 0, 0.4);
}
.company-page .company-scroll-hero.is-dark .notifly-hero-scene {
    --hm-shadow:
        0 1px 2px rgba(0, 0, 0, 0.3), 0 14px 28px -12px rgba(0, 0, 0, 0.45),
        0 28px 56px -28px rgba(0, 8, 32, 0.7);
    --k-room: #1c1c1e;
    --k-bubble: #2c2c2e;
    --k-ink: #f2f2f7;
    --k-name: #aeaeb2;
    --k-btn: #3a3a3c;
    --k-time: #8e8e93;
    --k-soft: #8e8e93;
    --s-screen: #000;
    --s-bubble: #262628;
    --s-ink: #fff;
    --w-bg: #2c2c2e;
    --w-edge: rgba(255, 255, 255, 0.1);
    --w-ink: #f5f5f7;
    --w-sub: #98989d;
    --e-bg: #1c1c1e;
    --e-edge: rgba(255, 255, 255, 0.08);
    --e-ink: #fff;
    --e-subject: #d1d1d6;
    --e-sub: #8e8e93;
    --e-line: #2c2c2e;
    --e-count-bg: rgba(51, 119, 255, 0.22);
    --e-count: #9bb8ff;
    --i-bg: #2c2c2e;
    --i-ink: #fff;
    --i-sub: #98989d;
    --i-stack: rgba(72, 72, 78, 0.62);
    --p-app-bg: #1c1c1e;
    --p-app-ink: #f2f2f7;
    --p-app-sub: #8e8e93;
    --p-scrim: rgba(0, 0, 0, 0.5);
}
/* Dark screens keep a hairline edge against the night */
.company-page .company-scroll-hero.is-dark :is(.hmk, .hms, .hmi-card, .hmp-screen) {
    outline: 1px solid rgba(255, 255, 255, 0.09);
    outline-offset: -1px;
}
.company-page .hm-sprite {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
}
.company-page .hm {
    position: absolute;
    z-index: 5;
    color: #191919;
    font-family: -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', var(--font);
    font-size: var(--hc);
    line-height: 1.5;
    letter-spacing: -0.01em;
    text-align: left;
    word-break: keep-all;
    -webkit-font-smoothing: antialiased;
    pointer-events: none;
    scale: var(--scale, 1);
}
/* The cards' shared layer. As the page scrolls, the ring gathers toward the
   headline: every card moves in by the same share of its distance from the
   middle and shrinks by as much, so no gap between two cards closes. */
.company-page .hm-ring {
    position: absolute;
    inset: 0;
    z-index: 5;
    pointer-events: none;
    scale: calc(1 - var(--gather, 0) * 0.15);
}
.company-page .hm :where(p, strong, time, ul, li, b) {
    margin: 0;
    padding: 0;
    color: inherit;
    font: inherit;
    letter-spacing: inherit;
    list-style: none;
}
/* Dark mode comes on with the night */
.company-page .hm :where(.hmk, .hmk-bubble, .hmk-btn, .hms, .hms-bubble, .hmw, .hme, .hme-row, .hmi-card, .hmi-stack, .hmp-screen, .hmp-app) {
    transition:
        background-color 600ms var(--motion-ease),
        color 600ms var(--motion-ease),
        border-color 600ms var(--motion-ease);
}
.company-page .hm-in {
    opacity: 0;
    transform: translate3d(var(--ax, 0px), var(--ay, 22px), 0) scale(0.94);
    transition:
        opacity 640ms var(--motion-ease) var(--delay, 0ms),
        transform 1300ms var(--motion-ease) var(--delay, 0ms);
}
.company-page .hm.is-on .hm-in {
    opacity: 1;
    transform: none;
}

/* App icons, one mark per brand */
.company-page .hm-app {
    display: grid;
    flex-shrink: 0;
    place-items: center;
    width: 2.2em;
    height: 2.2em;
    border-radius: 0.5em;
    color: #fff;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.06);
}
.company-page .hm-app svg {
    display: block;
    width: 64%;
    height: 64%;
}
.company-page .hm-app b {
    line-height: 1;
}
.company-page .hm-app-stay {
    background: #1f5c4a;
    color: #f3e9d6;
}
.company-page .hm-app-class {
    background: linear-gradient(160deg, #ff8a3d 0%, #f25f0f 100%);
}
.company-page .hm-app-class b {
    font-size: 0.66em;
    font-weight: 800;
    letter-spacing: -0.06em;
}
.company-page .hm-app-money {
    background: #14b87a;
}
.company-page .hm-app-run {
    background: #ff4a2b;
}
.company-page .hm-app-mood {
    background: #121212;
}
.company-page .hm-app-mood b {
    font-family: 'Lexend', var(--font);
    font-size: 0.64em;
    font-weight: 500;
    letter-spacing: -0.04em;
}

/* KakaoTalk chat room: AlimTalk and brand message */
.company-page .hmk {
    width: 20.5em;
    padding: 1em 0.95em 1.05em 0.85em;
    border-radius: 1.3em;
    background: var(--k-room);
    color: var(--k-ink);
    box-shadow: var(--hm-shadow);
}
.company-page .hmk-row {
    display: grid;
    grid-template-columns: 2.25em minmax(0, 1fr);
    align-items: start;
    gap: 0.5em;
}
.company-page .hmk .hm-app {
    width: 2.25em;
    height: 2.25em;
    border-radius: 0.82em;
}
.company-page .hmk-name {
    margin: 0 0 0.3em 0.1em;
    color: var(--k-name);
    font-size: 0.76em;
}
.company-page .hmk-msg {
    display: flex;
    align-items: flex-end;
    gap: 0.3em;
}
.company-page .hmk-bubble {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    border-radius: 0.8em;
    background: var(--k-bubble);
}
.company-page .hmk-head {
    padding: 0.58em 0.95em 0.56em;
    background: #fee500;
    color: #191919;
    font-size: 0.78em;
    font-weight: 700;
}
.company-page .hmk-body {
    padding: 0.8em 0.92em 0.9em;
    font-size: 0.84em;
    line-height: 1.52;
}
.company-page .hmk-body > p + p,
.company-page .hmk-list {
    margin-top: 0.6em;
}
.company-page .hmk .hmk-btn {
    margin-top: 0.85em;
    padding: 0.58em 0.5em;
    border-radius: 0.45em;
    background: var(--k-btn);
    font-weight: 500;
    text-align: center;
}
.company-page .hmk-time {
    flex-shrink: 0;
    color: var(--k-time);
    font-size: 0.62em;
    white-space: nowrap;
    word-spacing: 0.12em;
}
.company-page .hmb-image {
    position: relative;
    overflow: hidden;
    aspect-ratio: 2 / 1;
    padding: 0.8em 0.95em;
    background: linear-gradient(135deg, #ff6a3d 0%, #f0305a 100%);
    color: #fff;
}
/* Lane lines of a track running away under the type */
.company-page .hmb-image::before {
    content: '';
    position: absolute;
    right: -30%;
    bottom: -8%;
    left: -30%;
    height: 62%;
    background: repeating-linear-gradient(
        90deg,
        rgba(255, 255, 255, 0) 0 1.7em,
        rgba(255, 255, 255, 0.34) 1.7em calc(1.7em + 1.5px)
    );
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 70%);
    mask-image: linear-gradient(180deg, transparent 0%, #000 70%);
    transform: perspective(9em) rotateX(58deg);
    transform-origin: 50% 100%;
}
.company-page .hmb-kicker {
    position: relative;
    font-size: 0.62em;
    font-weight: 700;
    opacity: 0.92;
}
.company-page .hmb-headline {
    position: relative;
    margin-top: 0.2em;
    font-size: 1.02em;
    font-weight: 800;
    line-height: 1.22;
    letter-spacing: -0.035em;
}
/* A finisher's medal on its ribbon */
.company-page .hmb-medal {
    position: absolute;
    right: 0.95em;
    bottom: 0.7em;
    width: 2.5em;
    height: 3.9em;
}
.company-page .hmb-medal::before,
.company-page .hmb-medal::after {
    content: '';
    position: absolute;
    left: 0;
}
.company-page .hmb-medal::before {
    top: 0;
    left: 0.45em;
    width: 1.6em;
    height: 1.9em;
    background: linear-gradient(90deg, #1d3fae 0 50%, #2f63e6 50% 100%);
    clip-path: polygon(0 0, 100% 0, 80% 100%, 20% 100%);
}
.company-page .hmb-medal::after {
    bottom: 0;
    width: 2.5em;
    height: 2.5em;
    border-radius: 50%;
    background: radial-gradient(circle at 34% 30%, #fff6cc 0%, #f7c948 44%, #d4921a 100%);
    box-shadow:
        0 0.25em 0.6em rgba(120, 30, 0, 0.35),
        inset 0 0 0 0.2em rgba(255, 255, 255, 0.4);
}
.company-page .hmb-optout {
    margin-top: 0.7em;
    color: var(--k-soft);
    font-size: 0.86em;
}

/* Web push as Safari shows it on a Mac: the site's own icon, with no browser
   mark and no domain line */
.company-page .hmw {
    display: grid;
    grid-template-columns: 2.2em minmax(0, 1fr);
    align-items: start;
    gap: 0.7em;
    width: 23em;
    padding: 0.8em 0.95em 0.85em 0.8em;
    border: 1px solid var(--w-edge);
    border-radius: 1.15em;
    background: var(--w-bg);
    color: var(--w-ink);
    box-shadow: var(--hm-shadow);
}
.company-page .hmw-top {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75em;
}
.company-page .hmw-title {
    overflow: hidden;
    font-size: 0.88em;
    font-weight: 650;
    line-height: 1.38;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.company-page .hmw-top time {
    flex-shrink: 0;
    color: var(--w-sub);
    font-size: 0.76em;
}
.company-page .hmw-text {
    margin-top: 0.08em;
    font-size: 0.88em;
    line-height: 1.38;
    text-wrap: pretty;
}

/* In-app popup, over the app it opened in */
.company-page .hmp-screen {
    position: relative;
    overflow: hidden;
    width: 15.2em;
    height: 20.5em;
    border-radius: 1.7em;
    background: var(--p-app-bg);
    color: var(--p-app-ink);
    box-shadow: var(--hm-shadow);
}
/* The phone's status bar: time, network, battery */
.company-page .hmp-status {
    display: flex;
    align-items: center;
    gap: 0.35em;
    padding: 0.75em 1.25em 0.1em 1.5em;
    font-size: 0.68em;
    font-weight: 600;
}
.company-page .hmp-status b {
    flex: 1;
    font-weight: 600;
}
.company-page .hmp-status span {
    font-size: 0.86em;
}
.company-page .hmp-status i {
    position: relative;
    width: 1.9em;
    height: 0.9em;
    border: 1px solid currentColor;
    border-radius: 0.3em;
    opacity: 0.9;
}
.company-page .hmp-status i::before {
    content: '';
    position: absolute;
    inset: 0.12em 0.5em 0.12em 0.12em;
    border-radius: 0.14em;
    background: currentColor;
}
.company-page .hmp-app {
    padding: 0.5em 1em 0;
}
.company-page .hmp-app-bar {
    display: flex;
    align-items: baseline;
    gap: 0.35em;
    font-size: 0.92em;
    font-weight: 700;
}
.company-page .hmp-app-bar span + span {
    color: #ff5a1f;
}
.company-page .hmp-app-item {
    display: flex;
    align-items: center;
    gap: 0.7em;
    margin-top: 0.9em;
}
.company-page .hmp-app-item i {
    flex-shrink: 0;
    width: 3.3em;
    height: 3.9em;
    border-radius: 0.45em;
}
.company-page .hmp-app-item i.is-coat {
    background: linear-gradient(160deg, #d8c3a2 0%, #b8966b 100%);
}
.company-page .hmp-app-item i.is-knit {
    background: linear-gradient(160deg, #f1ebe0 0%, #d9cdb9 100%);
}
.company-page .hmp-app-item p {
    color: var(--p-app-sub);
    font-size: 0.74em;
    line-height: 1.45;
}
.company-page .hmp-app-item b {
    color: var(--p-app-ink);
    font-weight: 700;
}
.company-page .hmp-screen::after {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--p-scrim);
    transition: background-color 600ms var(--motion-ease);
}
.company-page .hmp {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 1;
    width: 12em;
    overflow: hidden;
    border-radius: 1.2em;
    background: #0f0f10;
    color: #fff;
    text-align: center;
    box-shadow:
        0 1.2em 2.4em -0.8em rgba(0, 0, 0, 0.6),
        inset 0 0 0 1px rgba(255, 255, 255, 0.08);
    translate: -50% -40%;
}
.company-page .hmp-card {
    padding: 1.45em 1.1em 1.05em;
    background: radial-gradient(120% 70% at 50% 0%, rgba(250, 204, 21, 0.13), transparent 62%);
}
.company-page .hmp-label {
    color: #facc15;
    font-size: 0.72em;
    font-weight: 800;
    letter-spacing: 0.02em;
}
.company-page .hmp-num {
    margin-top: 0.02em;
    font-size: 3.5em;
    font-weight: 900;
    line-height: 1.05;
    letter-spacing: -0.045em;
    font-variant-numeric: tabular-nums;
}
.company-page .hmp-num span {
    margin-left: 0.04em;
    font-size: 0.5em;
    font-weight: 800;
    letter-spacing: -0.02em;
}
.company-page .hmp-text {
    margin-top: 0.45em;
    color: rgba(255, 255, 255, 0.72);
    font-size: 0.76em;
    line-height: 1.5;
}
.company-page .hmp-btn {
    margin-top: 0.95em;
    padding: 0.72em 0.4em;
    border-radius: 0.75em;
    background: #facc15;
    color: #0f0f10;
    font-size: 0.8em;
    font-weight: 700;
}
.company-page .hmp-foot {
    display: flex;
    justify-content: space-between;
    padding: 0.8em 1.15em 0.85em;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.55);
    font-size: 0.64em;
}

/* Mail inbox, as the phone's mail app lists it */
.company-page .hme {
    overflow: hidden;
    width: 21em;
    border: 1px solid var(--e-edge);
    border-radius: 1em;
    background: var(--e-bg);
    color: var(--e-ink);
    box-shadow: var(--hm-shadow);
}
.company-page .hme-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.85em 1.1em 0.7em 1.4em;
    font-size: 0.8em;
    font-weight: 700;
}
.company-page .hme-count {
    min-width: 1.9em;
    padding: 0.06em 0.5em;
    border-radius: 999px;
    background: var(--e-count-bg);
    color: var(--e-count);
    font-size: 0.9em;
    text-align: center;
}
.company-page .hme-row {
    position: relative;
    display: grid;
    grid-template-columns: 2.1em minmax(0, 1fr);
    gap: 0.7em;
    padding: 0.75em 1.05em 0.8em 1.25em;
    border-top: 1px solid var(--e-line);
}
/* Unread: a blue dot in the left margin */
.company-page .hme-row.is-new::before {
    content: '';
    position: absolute;
    top: 1.55em;
    left: 0.42em;
    width: 0.48em;
    height: 0.48em;
    border-radius: 50%;
    background: #0a84ff;
}
.company-page .hme .hm-app {
    width: 2.1em;
    height: 2.1em;
    border-radius: 50%;
}
.company-page .hme-main {
    min-width: 0;
}
.company-page .hme-top {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75em;
    font-size: 0.84em;
}
.company-page .hme-top strong {
    font-weight: 500;
}
.company-page .hme-row.is-new .hme-top strong {
    font-weight: 700;
}
.company-page .hme-top time {
    color: var(--e-sub);
    font-size: 0.9em;
    white-space: nowrap;
}
.company-page .hme-subject,
.company-page .hme-preview {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.company-page .hme-subject {
    margin-top: 0.15em;
    color: var(--e-subject);
    font-size: 0.82em;
    line-height: 1.4;
}
.company-page .hme-row.is-new .hme-subject {
    color: var(--e-ink);
    font-weight: 600;
}
.company-page .hme-preview {
    margin-top: 0.1em;
    color: var(--e-sub);
    font-size: 0.78em;
}

/* iOS Messages: a received text */
.company-page .hms {
    width: 16.5em;
    padding: 0.95em 0.95em 1.1em 1.15em;
    border-radius: 1.3em;
    background: var(--s-screen);
    box-shadow: var(--hm-shadow);
}
.company-page .hms-meta {
    color: var(--s-meta);
    font-size: 0.66em;
    font-weight: 500;
    line-height: 1.45;
    text-align: center;
}
.company-page .hms-meta strong {
    font-weight: 600;
}
.company-page .hms-bubble {
    position: relative;
    width: fit-content;
    max-width: 92%;
    margin-top: 0.7em;
    padding: 0.55em 0.85em 0.6em;
    border-radius: 1.15em;
    background: var(--s-bubble);
    color: var(--s-ink);
    font-size: 0.84em;
    line-height: 1.42;
}
/* The tail: a bubble-colored corner, then the screen color carving its curve */
.company-page .hms-bubble::before,
.company-page .hms-bubble::after {
    content: '';
    position: absolute;
    bottom: 0;
    height: 1.1em;
    transition: background-color 600ms var(--motion-ease);
}
.company-page .hms-bubble::before {
    left: -0.4em;
    width: 1.2em;
    border-bottom-right-radius: 0.95em;
    background: var(--s-bubble);
}
.company-page .hms-bubble::after {
    left: -0.62em;
    width: 0.62em;
    border-bottom-right-radius: 0.6em;
    background: var(--s-screen);
}

/* iOS notification, with an older one stacked beneath */
.company-page .hmi {
    position: relative;
    width: 23.5em;
}
.company-page .hmi-card {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 2.3em minmax(0, 1fr);
    align-items: center;
    gap: 0.75em;
    padding: 0.8em 1em 0.85em 0.8em;
    border-radius: 1.45em;
    background: var(--i-bg);
    color: var(--i-ink);
    box-shadow: var(--hm-shadow);
}
.company-page .hmi .hm-app {
    width: 2.3em;
    height: 2.3em;
    border-radius: 0.55em;
}
.company-page .hmi-main {
    min-width: 0;
}
.company-page .hmi-top {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.6em;
}
.company-page .hmi-title {
    overflow: hidden;
    font-size: 0.9em;
    font-weight: 650;
    line-height: 1.35;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.company-page .hmi-top time {
    flex-shrink: 0;
    color: var(--i-sub);
    font-size: 0.76em;
}
.company-page .hmi-text {
    margin-top: 0.06em;
    font-size: 0.88em;
    line-height: 1.38;
}
.company-page .hmi-stack {
    position: absolute;
    right: 1em;
    bottom: -0.6em;
    left: 1em;
    height: 2.4em;
    border-radius: 0 0 1.2em 1.2em;
    background: var(--i-stack);
}

/* All seven land together as the page opens, one after another clockwise, each
   from outside the ring along its own line toward the headline */
.company-page .hm-kakao {
    --ax: -120px;
    --ay: -50px;
    --delay: 150ms;
}
.company-page .hm-sms {
    --ax: -92px;
    --ay: -80px;
    --delay: 260ms;
}
.company-page .hm-web {
    --ax: 42px;
    --ay: -116px;
    --delay: 370ms;
}
.company-page .hm-popup {
    --ax: 122px;
    --ay: -42px;
    --delay: 480ms;
}
.company-page .hm-mail {
    --ax: 114px;
    --ay: 60px;
    --delay: 590ms;
}
.company-page .hm-ios {
    --ax: 0px;
    --ay: 124px;
    --delay: 700ms;
}
.company-page .hm-brand {
    --ax: -114px;
    --ay: 62px;
    --delay: 810ms;
}

/* Placement: a ring around the headline, clear of its band at every size */
.company-page .hm-kakao {
    top: max(100px, 12.5vh);
    left: max(24px, 3.2vw);
}
.company-page .hm-sms {
    top: max(124px, 16vh);
    left: 25vw;
    --scale: 0.92;
}
.company-page .hm-web {
    top: max(106px, 12.8vh);
    left: 45.5vw;
    --scale: 0.94;
}
.company-page .hm-popup {
    top: max(104px, 12.6vh);
    right: max(28px, 4.2vw);
}
.company-page .hm-brand {
    bottom: max(24px, 4.2vh);
    left: 6.4vw;
}
.company-page .hm-ios {
    bottom: max(60px, 12.6vh);
    left: calc(50% - 11.75em);
}
.company-page .hm-mail {
    right: max(40px, 5.8vw);
    bottom: max(40px, 7vh);
}

/* The night grows out of the blue arc: a dark disc with a lit rim sweeps across
   the light scene with the scroll, and the switch to the dark scene happens
   under it. --tide-max (company/script.js) is the scale that reaches the far corner. */
.company-page .scene-tide {
    --tide-t: clamp(0, calc((var(--hero-progress, 0) - 0.34) / 0.22), 1);
    position: absolute;
    top: 50%;
    left: -41vw;
    z-index: 4;
    width: min(78vw, 1040px);
    height: min(78vw, 1040px);
    border-radius: 50%;
    background: radial-gradient(
        closest-side,
        #060912 0%,
        #070b19 60%,
        #0a1846 84%,
        #1447d6 94.5%,
        #86a8ff 98.3%,
        rgba(134, 168, 255, 0) 100%
    );
    opacity: clamp(0, calc(1 - (var(--hero-progress, 0) - 0.57) / 0.08), 1);
    transform: translate3d(var(--arc-shift, -2vw), -50%, 0)
        scale(calc(0.02 + var(--tide-t) * (var(--tide-max, 3.2) * 1.32 - 0.02)));
    pointer-events: none;
    will-change: transform, opacity;
}
@media (max-width: 1100px) {
    .company-page .scene-tide {
        left: -55vw;
        width: 96vw;
        height: 96vw;
    }
}
@media (max-width: 700px) {
    .company-page .scene-tide {
        left: -640px;
        width: 860px;
        height: 860px;
    }
}

/* The headline swap follows the scroll: the first line lifts away out of focus,
   the second rises into it */
.company-page .company-scroll-hero .story-phrase[data-phrase],
.company-page .company-scroll-hero.is-dim .story-phrase[data-phrase],
.company-page .company-scroll-hero.is-dark .story-phrase[data-phrase] {
    transition: none;
    will-change: transform, opacity, filter;
}
.company-page .company-scroll-hero .story-phrase[data-phrase='0'],
.company-page .company-scroll-hero.is-dim .story-phrase[data-phrase='0'],
.company-page .company-scroll-hero.is-dark .story-phrase[data-phrase='0'] {
    color: #121826;
    opacity: clamp(0, calc(1 - var(--swap) * 1.8), 1);
    transform: translate3d(-50%, calc(-50% - var(--swap) * 44px), 0) scale(calc(1 - var(--swap) * 0.03));
    filter: blur(calc(var(--swap) * 8px));
}
.company-page .company-scroll-hero .story-phrase[data-phrase='1'],
.company-page .company-scroll-hero.is-dim .story-phrase[data-phrase='1'],
.company-page .company-scroll-hero.is-dark .story-phrase[data-phrase='1'] {
    color: #fff;
    text-shadow: 0 18px 80px rgba(51, 119, 255, 0.3);
    opacity: clamp(0, calc(var(--swap) * 1.8 - 0.8), 1);
    transform: translate3d(-50%, calc(-50% + (1 - var(--swap)) * 44px), 0) scale(calc(0.97 + var(--swap) * 0.03));
    filter: blur(calc((1 - var(--swap)) * 8px));
}

@media (max-height: 820px) and (min-width: 1181px) {
    .company-page .company-scroll-hero .story-phrase {
        font-size: 64px;
    }
}
/* Narrow desktops: the headline runs under the popup's column, so the screen is shorter */
@media (max-width: 1360px) {
    .company-page .hmp-screen {
        height: 18.6em;
    }
}
/* Between phone and desktop five messages keep the ring open, and they stay put */
@media (max-width: 1199px) {
    .company-page .hm-sms,
    .company-page .hm-web {
        display: none;
    }
    .company-page .hm-ring {
        scale: none;
    }
    .company-page .notifly-hero-scene {
        --hc: clamp(10.5px, min(1.5vh, 1.3vw), 14px);
    }
    .company-page .hm-ios {
        left: calc(50% - 11.75em);
    }
}
/* Portrait tablets: the push lands in the open band under the headline */
@media (max-width: 900px) and (min-width: 701px) {
    .company-page .hm-ios {
        top: calc(50% + 110px);
        bottom: auto;
    }
}
@media (max-width: 700px) {
    .company-page .company-scroll-hero {
        min-height: 190dvh;
    }
    .company-page .notifly-hero-scene {
        --hc: clamp(9.5px, min(2.85vw, 1.42vh), 12px);
    }
    .company-page .hm-brand {
        display: none;
    }
    .company-page .hm-kakao {
        top: max(88px, 11vh);
        left: 12px;
    }
    .company-page .hmk {
        width: 18.6em;
    }
    /* On a phone the room keeps the booking and drops the checkout line */
    .company-page .hmk-list li:last-child {
        display: none;
    }
    .company-page .hm-popup {
        top: max(96px, 12vh);
        right: 12px;
    }
    .company-page .hmp-screen {
        width: 13.4em;
        height: 18.6em;
    }
    .company-page .hmp {
        width: 11.4em;
    }
    .company-page .hm-ios {
        top: calc(50% + 78px);
        right: 12px;
        bottom: auto;
        left: 12px;
    }
    .company-page .hmi {
        width: auto;
    }
    .company-page .hm-mail {
        right: 12px;
        bottom: max(20px, 3.6vh);
    }
    .company-page .hme {
        width: 20em;
    }
}
@media (max-width: 700px) and (max-height: 720px) {
    .company-page .hm-mail {
        display: none;
    }
}
@media (max-width: 360px) {
    .company-page .company-scroll-hero .story-phrase {
        font-size: 32px;
    }
    .company-page .hmk {
        width: 17.4em;
    }
    .company-page .hmp-screen {
        width: 12.6em;
    }
    .company-page .hmp {
        width: 10.8em;
    }
}

/* ==========================================================================
   Hero arc: same shape, deeper blue without the grid texture, and a thin
   light rim on the inner edge
   ========================================================================== */
.company-page .scene-blue-arc {
    background: radial-gradient(circle at 80% 50%, #3a78ff 0%, #1455ea 30%, #0a3cbc 62%, #06267a 100%);
    box-shadow: 44px 0 110px rgba(0, 68, 204, 0.18);
}
.company-page .scene-blue-arc::after {
    box-shadow:
        -1px 0 0 rgba(255, 255, 255, 0.7),
        -22px 0 56px rgba(247, 251, 255, 0.9);
}
.company-page .company-scroll-hero.is-dark .scene-blue-arc {
    background: radial-gradient(circle at 80% 50%, #2e6bff 0%, #0f47d6 28%, #072d93 60%, #041a55 100%);
    box-shadow: 36px 0 140px rgba(51, 119, 255, 0.24);
}
.company-page .company-scroll-hero.is-dark .scene-blue-arc::after {
    box-shadow:
        -1px 0 0 rgba(168, 196, 255, 0.75),
        -12px 0 40px rgba(51, 119, 255, 0.4),
        -48px 0 90px rgba(5, 8, 18, 0.55);
}

/* ==========================================================================
   One navy ink for every dark surface, and the hero dissolves into it
   ========================================================================== */
.company-page {
    --c6-bg: #060912;
    --c6-bg-2: #0b0f1a;
    background: #060912;
}
.company-page .company-scroll-hero.is-dark .sticky-company-hero {
    background: linear-gradient(180deg, #080c19 0%, #060912 60%, #060912 100%);
}
.company-page .company-scroll-hero.is-dark .sticky-company-hero::after {
    background:
        linear-gradient(90deg, rgba(6, 9, 18, 0.78) 0%, transparent 18%, transparent 80%, rgba(6, 9, 18, 0.86) 100%),
        linear-gradient(180deg, rgba(6, 9, 18, 0.76) 0%, transparent 24%, transparent 68%, #060912 100%);
}
/* The messages drift on their own, so the scene stays put and its fade always reaches the bottom edge */
.company-page .notifly-hero-scene {
    transform: none;
}
.company-page .notifly-hero-scene::after {
    content: '';
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1;
    height: 30vh;
    /* ends in the rendered tone of the grained sections below, so the seam disappears */
    background: linear-gradient(180deg, rgba(7, 11, 22, 0), rgba(7, 11, 22, 0.82) 62%, #070b16);
    opacity: 0;
    pointer-events: none;
    transition: opacity 720ms var(--ease-heavy);
}
.company-page .company-scroll-hero.is-dark .notifly-hero-scene::after {
    opacity: 1;
}

/* ==========================================================================
   Customer logos: continuous rows, like the home page
   ========================================================================== */
.company-logo-window.is-marquee {
    overflow: hidden;
}
.company-logo-window.is-marquee .company-logo-track {
    animation: company-logo-marquee var(--marquee-duration, 90s) linear infinite;
    will-change: transform;
}
.company-logo-window.is-marquee.is-reverse .company-logo-track {
    animation-direction: reverse;
}
.company-logo-window.is-marquee:hover .company-logo-track,
.company-logo-window.is-marquee:focus-within .company-logo-track {
    animation-play-state: paused;
}
@keyframes company-logo-marquee {
    from {
        transform: translate3d(0, 0, 0);
    }
    to {
        transform: translate3d(-50%, 0, 0);
    }
}

/* ==========================================================================
   Closing: contact and team in one panel
   ========================================================================== */
.company-closing .c6-section {
    padding-top: clamp(16px, 3vw, 40px);
}
.company-closing-panel {
    position: relative;
    isolation: isolate;
    display: grid;
    gap: clamp(36px, 4vw, 56px);
    overflow: hidden;
    padding: clamp(40px, 5.5vw, 80px) clamp(24px, 5vw, 72px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 28px;
    background: linear-gradient(180deg, #0e1528 0%, #0a0f1c 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
.company-closing-panel::before,
.company-closing-panel::after {
    content: '';
    position: absolute;
    z-index: -1;
    pointer-events: none;
}
/* One soft light from the top right */
.company-closing-panel::before {
    inset: 0;
    background:
        radial-gradient(58% 80% at 92% -6%, rgba(51, 119, 255, 0.3), transparent 64%),
        radial-gradient(44% 60% at -4% 106%, rgba(0, 68, 204, 0.14), transparent 66%);
}
/* and where it catches the top edge */
.company-closing-panel::after {
    top: 0;
    right: 6%;
    left: 38%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(155, 184, 255, 0.6) 62%, transparent);
}
.company-section .company-closing-panel h2 {
    color: #fff;
    font-size: clamp(32px, 3.5vw, 52px);
    font-weight: 500;
    line-height: 1.3;
    letter-spacing: -0.035em;
}
.company-closing-links {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}
.company-closing-link {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 48px;
    min-height: 212px;
    padding: 24px 24px 28px 28px;
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.035);
    color: #fff;
    text-decoration: none;
    transition:
        background 220ms ease,
        border-color 220ms ease;
}
.company-closing-link:hover {
    border-color: rgba(255, 255, 255, 0.18);
    background: rgba(255, 255, 255, 0.065);
}
.company-closing-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}
.company-closing-icon {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 13px;
    background: linear-gradient(150deg, #4d8aff 0%, #1a5ee6 48%, #0044cc 100%);
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.16),
        0 10px 24px -10px rgba(26, 94, 230, 0.7);
    color: #fff;
}
.company-closing-icon svg {
    width: 22px;
    height: 22px;
}
.company-closing-text {
    display: grid;
    gap: 8px;
    min-width: 0;
}
.company-closing-label {
    color: rgba(245, 249, 255, 0.56);
    font-size: 13px;
    font-weight: 500;
}
.company-closing-value {
    font-size: clamp(22px, 2.1vw, 30px);
    font-weight: 500;
    line-height: 1.3;
    letter-spacing: -0.025em;
    overflow-wrap: anywhere;
}
.company-closing-link.is-team .company-closing-value {
    color: rgba(245, 249, 255, 0.9);
    font-size: 18px;
    font-weight: 450;
    line-height: 1.6;
    letter-spacing: -0.015em;
    text-wrap: balance;
    word-break: keep-all;
    overflow-wrap: break-word;
}
.company-closing-arrow {
    display: grid;
    flex-shrink: 0;
    place-items: center;
    width: 44px;
    height: 44px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    color: #fff;
    transition: transform 220ms ease;
}
.company-closing-link.is-primary .company-closing-arrow {
    border-color: transparent;
    background: #fff;
    color: #0a0a0b;
}
.company-closing-link:hover .company-closing-arrow {
    transform: translateX(3px);
}
.company-closing-arrow svg {
    width: 18px;
    height: 18px;
}
.company-closing-avatars {
    display: flex;
    padding-left: 10px;
}
.company-closing-avatars img {
    width: 40px;
    height: 40px;
    margin-left: -10px;
    border: 2px solid #121a30;
    border-radius: 50%;
    object-fit: cover;
}
.company-page .company-closing-link:focus-visible {
    outline-offset: 4px;
}
/* Side by side, the two cards share rows so their labels line up */
@media (min-width: 901px) {
    @supports (grid-template-rows: subgrid) {
        .company-closing-links {
            grid-template-rows: auto minmax(48px, 1fr) auto auto;
        }
        .company-closing-link {
            display: grid;
            grid-row: span 4;
            grid-template-rows: subgrid;
            justify-content: stretch;
            gap: 0;
        }
        .company-closing-text {
            display: contents;
        }
        .company-closing-top {
            grid-row: 1;
        }
        .company-closing-label {
            grid-row: 3;
            margin-bottom: 8px;
        }
        .company-closing-value {
            grid-row: 4;
            align-self: start;
        }
}
}
@media (max-width: 900px) {
    .company-closing-links {
        grid-template-columns: 1fr;
    }
    .company-closing-link {
        min-height: 0;
        gap: 36px;
    }
}
@media (max-width: 700px) {
    .company-closing-panel {
        padding: 36px 20px 20px;
        border-radius: 20px;
    }
    .company-section .company-closing-panel h2 {
        padding: 0 4px;
        font-size: 30px;
    }
    .company-closing-link {
        gap: 28px;
        padding: 18px 16px 20px 20px;
        border-radius: 16px;
    }
    .company-closing-value {
        font-size: 21px;
    }
    .company-closing-link.is-team .company-closing-value {
        font-size: 15px;
    }
    .company-closing-icon,
    .company-closing-arrow {
        width: 40px;
        height: 40px;
    }
    .company-closing-avatars img {
        width: 34px;
        height: 34px;
        margin-left: -9px;
    }
}
@media (max-width: 359px) {
    .company-section .company-closing-panel h2 {
        font-size: 27px;
    }
    .company-closing-value {
        font-size: 18px;
    }
}

/* ==========================================================================
   Metrics read as one band: hairlines, label first, larger figures
   ========================================================================== */
.company-metrics {
    gap: 0;
    margin-top: 64px;
    border-top: 1px solid var(--c6-line-strong);
}
.company-metrics > div {
    flex-direction: column;
    gap: 20px;
    padding: 28px 24px 0 0;
}
.company-metrics > div + div {
    padding-left: 32px;
    border-left: 1px solid var(--c6-line);
}
.company-metrics dt {
    color: var(--c6-ink-muted);
    font-size: 14px;
    font-weight: 500;
}
.company-metrics dd {
    font-size: clamp(56px, 5.6vw, 80px);
    font-weight: 500;
    line-height: 1;
    letter-spacing: -0.055em;
}
.company-metrics dd span {
    margin-left: 0.05em;
    color: var(--c6-ink-soft);
    font-size: 0.32em;
    font-weight: 500;
    letter-spacing: -0.02em;
}
@media (max-width: 700px) {
    .company-metrics {
        margin-top: 40px;
    }
    .company-metrics > div {
        gap: 12px;
        padding: 20px 8px 0 0;
    }
    .company-metrics > div + div {
        padding-left: 12px;
    }
    .company-metrics dt {
        font-size: 11px;
    }
    .company-metrics dd {
        font-size: clamp(28px, 8.4vw, 40px);
    }
    .company-metrics dd span {
        margin-left: 2px;
        font-size: 0.4em;
    }
}

/* ==========================================================================
   Investor and program logos balanced by eye, not by one height
   ========================================================================== */
.company-trust .c6-logos img[alt*='Google'] { height: 52px; }
.company-trust .c6-logos img[alt*='StartX'] { height: 32px; }
.company-trust .c6-logos img[alt*='AppWorks'] { height: 31px; }
.company-trust .c6-logos img[alt*='TIPS'] { height: 50px; max-width: 94px; }
.company-trust .c6-logos img[alt*='L-CAMP'] { height: 21px; }
.company-trust .c6-logos img[alt*='dcamp'] { height: 26px; }
.company-trust .c6-logos img[alt*='IBK'] { height: 36px; }
.company-trust .c6-logos img[alt*='KB'] { height: 38px; }
.company-trust .c6-logos img[alt*='MARU'] { height: 27px; }
.company-trust .c6-logos img[alt*='매쉬업'] { height: 38px; }
.company-trust .c6-logos img[alt*='Schmidt'] { height: 27px; }
.company-trust .c6-logos img[alt*='스프링캠프'] { height: 32px; }

/* ==========================================================================
   One heading size for the section titles on wide screens
   ========================================================================== */
@media (min-width: 701px) {
    .company-page .company-trust h2,
    .company-section .company-closing-panel h2 {
        font-size: clamp(32px, 3.35vw, 48px);
    }
}

/* ==========================================================================
   Footer in the page's dark ink
   ========================================================================== */
.company-page footer[data-header-tone] {
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    background-color: #04070e;
}
.company-page footer .text-\[\#4D5867\] {
    color: rgba(226, 232, 242, 0.62);
}
.company-page footer h2.text-\[\#4D5867\] {
    color: rgba(226, 232, 242, 0.38);
}
.company-page footer a.text-\[\#4D5867\]:hover {
    color: #fff;
}
.company-page footer img[src*='landing-logo'] {
    filter: brightness(0) invert(1);
    opacity: 0.86;
}
.company-page footer img[src*='powered-by-aws'] {
    filter: brightness(0) invert(1);
    opacity: 0.66;
}
.company-page footer svg path[fill='#B0B5BB'] {
    fill: rgba(226, 232, 242, 0.42);
}
.company-page footer .border-t {
    border-color: rgba(255, 255, 255, 0.08);
}
.company-page footer [class*='md:border-l'] {
    border-color: rgba(255, 255, 255, 0.16);
}

@media (prefers-reduced-motion: reduce) {
    .company-logo-window.is-marquee .company-logo-track {
        animation: none;
    }
    .company-closing-link,
    .company-closing-arrow {
        transition: none;
    }
    .company-closing-link:hover .company-closing-arrow {
        transform: none;
    }
}

/* ==========================================================================
   Motion layer
   Continuous motion moves only transform and opacity, runs on wide pointer
   screens, and pauses offscreen. Reveals play once. Reduced motion turns all
   of it off, and without script every element stays in its final place.
   ========================================================================== */
.company-page {
    --motion-ease: cubic-bezier(0.23, 1, 0.32, 1);
}

/* 1. Hero: slow light drifting behind the cards once the scene turns dark */
.company-page .scene-aurora {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    opacity: 0;
    transition: opacity 1400ms var(--motion-ease);
}
.company-page .company-scroll-hero.is-dark .scene-aurora {
    opacity: 1;
}
.company-page .scene-aurora i {
    position: absolute;
    top: 50%;
    left: 50%;
    display: block;
    width: 54vmax;
    height: 54vmax;
    margin: -27vmax 0 0 -27vmax;
    border-radius: 50%;
    background: radial-gradient(closest-side, rgba(51, 119, 255, 0.2), rgba(51, 119, 255, 0.07) 52%, transparent);
    will-change: transform;
}
.company-page .scene-aurora i:nth-child(2) {
    width: 40vmax;
    height: 40vmax;
    margin: -20vmax 0 0 -20vmax;
    background: radial-gradient(closest-side, rgba(26, 94, 230, 0.22), transparent);
}

/* 2. Hero: landed messages keep a gentle float */
@keyframes company-aurora-a {
    from { transform: translate3d(-16vw, -10vh, 0) scale(1); }
    to { transform: translate3d(12vw, 8vh, 0) scale(1.14); }
}
@keyframes company-aurora-b {
    from { transform: translate3d(18vw, 12vh, 0) scale(1.1); }
    to { transform: translate3d(-8vw, -6vh, 0) scale(0.92); }
}
/* Floats downward only, so a card never rises toward the header */
@keyframes company-card-float {
    from { translate: 0 0; }
    to { translate: 0 4px; }
}
@keyframes company-dot-ping {
    0% { box-shadow: 0 0 0 0 rgba(51, 119, 255, 0.55); }
    100% { box-shadow: 0 0 0 0.6em rgba(51, 119, 255, 0); }
}
@media (prefers-reduced-motion: no-preference) and (min-width: 1200px) and (hover: hover) and (pointer: fine) {
    .company-page .scene-aurora i {
        animation: company-aurora-a 22s ease-in-out infinite alternate;
    }
    .company-page .scene-aurora i:nth-child(2) {
        animation-name: company-aurora-b;
        animation-duration: 28s;
    }
    .company-page .hm.is-on .hm-in {
        animation: company-card-float 7s ease-in-out infinite alternate;
    }
    .company-page .hm-web.is-on .hm-in { animation-duration: 8.8s; animation-delay: -3.4s; }
    .company-page .hm-popup.is-on .hm-in { animation-duration: 8.4s; animation-delay: -2.6s; }
    .company-page .hm-mail.is-on .hm-in { animation-duration: 6.2s; animation-delay: -4.1s; }
    .company-page .hm-sms.is-on .hm-in { animation-duration: 9.6s; animation-delay: -5.2s; }
    .company-page .hm-brand.is-on .hm-in { animation-duration: 7.4s; animation-delay: -0.8s; }
    .company-page .hm-ios.is-on .hm-in { animation-duration: 7.7s; animation-delay: -1.3s; }
    .company-page .company-scroll-hero:not(.is-in-view) .scene-aurora i,
    .company-page .company-scroll-hero:not(.is-in-view) .hm.is-on .hm-in {
        animation-play-state: paused;
    }
}

/* 3. Hero: the unread dots ping as the mail lands */
@media (prefers-reduced-motion: no-preference) {
    .company-page .hm-mail.is-on .hme-row.is-new .hme-top strong::after {
        animation: company-dot-ping 1.3s 0.45s cubic-bezier(0, 0, 0.2, 1) 2;
    }
}

/* 4. Section titles rise line by line; blocks follow */
.company-motion [data-motion='lines'] .ln {
    display: block;
    overflow: hidden;
    padding-bottom: 0.08em;
    margin-bottom: -0.08em;
}
.company-motion [data-motion='lines'] .ln-i {
    display: block;
    transform: translate3d(0, 110%, 0);
    transition: transform 1050ms var(--motion-ease);
    transition-delay: calc(var(--i, 0) * 90ms);
}
.company-motion [data-motion='lines'].is-in .ln-i {
    transform: none;
}
@media (max-width: 1000px) {
    /* Titles whose breaks are desktop only wrap freely here, so they fade up whole */
    .company-motion [data-motion='lines'][data-desktop-breaks] .ln,
    .company-motion [data-motion='lines'][data-desktop-breaks] .ln-i {
        display: inline;
        overflow: visible;
        padding: 0;
        margin: 0;
        transform: none;
    }
    .company-motion [data-motion='lines'][data-desktop-breaks] {
        opacity: 0;
        transform: translate3d(0, 20px, 0);
        transition:
            opacity 900ms var(--motion-ease),
            transform 1000ms var(--motion-ease);
    }
    .company-motion [data-motion='lines'][data-desktop-breaks].is-in {
        opacity: 1;
        transform: none;
    }
}
.company-motion [data-motion='fade'] {
    opacity: 0;
    transform: translate3d(0, 24px, 0);
    transition:
        opacity 900ms var(--motion-ease),
        transform 1000ms var(--motion-ease);
    transition-delay: calc(var(--i, 0) * 90ms);
}
.company-motion [data-motion='fade'].is-in {
    opacity: 1;
    transform: none;
}
.company-motion .company-closing-link[data-motion='fade'] {
    transition:
        opacity 900ms var(--motion-ease) calc(var(--i, 0) * 90ms),
        transform 1000ms var(--motion-ease) calc(var(--i, 0) * 90ms),
        background 220ms ease,
        border-color 220ms ease;
}

/* 5. Photos open from a softly clipped frame */
.company-motion img[data-motion='photo'] {
    clip-path: inset(8% 6% 8% 6% round 18px);
    scale: 1.08;
    transition:
        clip-path 1300ms var(--motion-ease),
        scale 1700ms var(--motion-ease);
}
.company-motion img[data-motion='photo'].is-in {
    clip-path: inset(0 round 8px);
    scale: 1;
}

/* 6. One light travels the edge of the primary contact card.
   A static ring mask with a rotating conic layer inside it, so only the compositor moves. */
.company-closing-link.is-primary {
    position: relative;
}
.company-beam {
    position: absolute;
    inset: -1px;
    overflow: hidden;
    padding: 1px;
    border-radius: inherit;
    pointer-events: none;
    -webkit-mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
}
.company-beam i {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 120%;
    aspect-ratio: 1;
    margin: -60% 0 0 -60%;
    background: conic-gradient(
        transparent 0deg 250deg,
        rgba(155, 184, 255, 0) 262deg,
        rgba(155, 184, 255, 0.85) 322deg,
        rgba(255, 255, 255, 0.95) 336deg,
        rgba(155, 184, 255, 0) 350deg,
        transparent 360deg
    );
    will-change: transform;
}
@keyframes company-beam-turn {
    to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: no-preference) {
    .company-beam i {
        animation: company-beam-turn 7s linear infinite;
    }
    .company-closing:not(.is-in-view) .company-beam i {
        animation-play-state: paused;
    }
}
@media (prefers-reduced-motion: reduce) {
    .company-beam {
        display: none;
    }
    .company-page .scene-aurora,
    .company-page .hm-in {
        transition: none;
    }
    /* Messages appear in place, stay there, and the headline crossfades without moving */
    .company-page .hm-ring {
        scale: none;
    }
    /* The night fades in over the whole scene instead of sweeping across it */
    .company-page .scene-tide {
        opacity: min(
            clamp(0, calc((var(--hero-progress, 0) - 0.36) / 0.14), 1),
            clamp(0, calc(1 - (var(--hero-progress, 0) - 0.57) / 0.08), 1)
        );
        transform: translate3d(var(--arc-shift, -2vw), -50%, 0) scale(calc(var(--tide-max, 3.2) * 1.32));
    }
    .company-page .company-scroll-hero .story-phrase[data-phrase],
    .company-page .company-scroll-hero.is-dim .story-phrase[data-phrase],
    .company-page .company-scroll-hero.is-dark .story-phrase[data-phrase] {
        transform: translate3d(-50%, -50%, 0);
        filter: none;
    }
}

/* 7. Fine grain on the dark surfaces so large gradients do not band */
.company-page {
    --company-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0.6 0 0 0 0.044 0.6 0 0 0 0.044 0.6 0 0 0 0.044 0 0 0 0 1'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
/* Overlay blending keeps the average tone: the grain only dithers, it does not lift the navy */
.company-page .company-section,
.company-page footer[data-header-tone] {
    background-image: var(--company-grain);
    background-size: 180px 180px;
    background-blend-mode: overlay;
}
.company-closing-panel {
    background:
        var(--company-grain) 0 0 / 180px 180px,
        linear-gradient(180deg, #0e1528 0%, #0a0f1c 100%);
    background-blend-mode: overlay, normal;
}
.company-page .company-scroll-hero.is-dark .sticky-company-hero {
    background:
        var(--company-grain) 0 0 / 180px 180px,
        linear-gradient(180deg, #080c19 0%, #060912 60%, #060912 100%);
    background-blend-mode: overlay, normal;
}

/* ==========================================================================
   Sections: one navy, told apart by small steps in tone and by where a soft
   blue light falls in each. A hairline marks each handover.
   ========================================================================== */
.company-page .company-section {
    position: relative;
    background-color: #060912;
    background-image: var(--company-grain);
    background-repeat: repeat;
    background-size: 180px 180px;
    background-blend-mode: overlay;
}
.company-page .company-section + .company-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    z-index: 1;
    width: min(var(--c6-max), 100% - 48px);
    height: 1px;
    translate: -50% 0;
    background: linear-gradient(
        90deg,
        rgba(155, 184, 255, 0),
        rgba(155, 184, 255, 0.16) 24%,
        rgba(155, 184, 255, 0.16) 76%,
        rgba(155, 184, 255, 0)
    );
    pointer-events: none;
}
/* A low light on the left, clear of the top edge so the hero still dissolves into it */
.company-page .company-customers {
    background-image:
        var(--company-grain),
        radial-gradient(760px 380px at 0% 62%, rgba(26, 94, 230, 0.12), transparent 72%);
    background-repeat: repeat, no-repeat;
    background-size:
        180px 180px,
        100% 100%;
    background-blend-mode: overlay, normal;
}
/* One step lighter, lit from the top right and low on the left */
.company-page .company-approach {
    background-color: #080c18;
    background-image:
        var(--company-grain),
        radial-gradient(56% 42% at 94% 4%, rgba(51, 119, 255, 0.13), transparent 72%),
        radial-gradient(48% 36% at 0% 96%, rgba(0, 68, 204, 0.1), transparent 72%);
    background-repeat: repeat, no-repeat, no-repeat;
    background-size:
        180px 180px,
        100% 100%,
        100% 100%;
    background-blend-mode: overlay, normal, normal;
}
/* A pool of light and a faint dot grid under the partner logos */
.company-page .company-trust {
    background-image:
        var(--company-grain),
        radial-gradient(52% 58% at 50% 74%, rgba(51, 119, 255, 0.09), transparent 72%);
    background-repeat: repeat, no-repeat;
    background-size:
        180px 180px,
        100% 100%;
    background-blend-mode: overlay, normal;
}
.company-page .company-trust::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(155, 184, 255, 0.28) 1px, transparent 1.5px);
    background-size: 24px 24px;
    -webkit-mask-image: radial-gradient(58% 52% at 50% 72%, #000 0%, transparent 78%);
    mask-image: radial-gradient(58% 52% at 50% 72%, #000 0%, transparent 78%);
    opacity: 0.45;
    pointer-events: none;
}
.company-page .company-trust .c6-section {
    position: relative;
    z-index: 1;
}
/* Half a step lighter, lit from the left. The section now opens on its own hairline, so it gets its own top space. */
.company-news .c6-section {
    padding-top: clamp(72px, 8vw, 112px);
}
.company-page .company-news {
    background-color: #070a15;
    background-image:
        var(--company-grain),
        radial-gradient(52% 40% at 0% 16%, rgba(26, 94, 230, 0.1), transparent 72%);
    background-repeat: repeat, no-repeat;
    background-size:
        180px 180px,
        100% 100%;
    background-blend-mode: overlay, normal;
}

/* ==========================================================================
   Approach: the founder's note beside the section copy
   ========================================================================== */
.company-founder-note {
    margin: 36px 0 0;
    padding-top: 30px;
    border-top: 1px solid var(--c6-line);
}
.company-founder-note blockquote {
    margin: 0;
    color: var(--c6-ink);
    font-size: 19px;
    font-weight: 400;
    line-height: 1.75;
    letter-spacing: -0.02em;
    text-wrap: pretty;
}
.company-founder-note figcaption {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 20px;
    color: var(--c6-ink-soft);
    font-size: 14px;
}
.company-founder-note img {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
}
/* The interview photos follow the copy closely, as part of the same story */
.company-approach .c6-section {
    padding-bottom: 16px;
}

/* ==========================================================================
   Hero interviews: photos of the team at each interview, one height, each as
   wide as it was shot, in a row that runs past the right edge. The first lines
   up with the page column. A photo opens its interview; buttons, a mouse drag,
   touch and keys move the row.
   ========================================================================== */
.company-voices {
    --voices-edge: max(var(--c6-gutter), calc((100% - var(--c6-max)) / 2 + var(--c6-gutter)));
    --strip-h: clamp(240px, 24vw, 340px);
    padding-bottom: clamp(88px, 10vw, 136px);
}
.company-voices-bar {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 16px;
    padding: 0 var(--voices-edge);
    margin-bottom: 18px;
}
.company-voices-nav {
    display: flex;
    gap: 10px;
}
.company-voices-button {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.03);
    color: #fff;
    cursor: pointer;
    transition:
        background 200ms ease,
        border-color 200ms ease,
        opacity 200ms ease;
}
.company-voices-button svg {
    width: 18px;
    height: 18px;
    transition: opacity 200ms ease;
}
.company-voices-button:hover:not([aria-disabled='true']) {
    border-color: rgba(255, 255, 255, 0.32);
    background: rgba(255, 255, 255, 0.08);
}
/* Unavailable at an end of the row: the same dimming as a whole-button opacity of 0.32,
   applied to the border, fill and arrow so a keyboard focus ring on it stays at full
   strength (the button keeps focus, see voices.js) */
.company-voices-button[aria-disabled='true'] {
    cursor: default;
    border-color: rgba(255, 255, 255, 0.0512);
    background: rgba(255, 255, 255, 0.0096);
}
.company-voices-button[aria-disabled='true'] svg {
    opacity: 0.32;
}
.company-voices.is-static .company-voices-nav,
.company-voices.is-static .company-voices-progress {
    visibility: hidden;
}
.company-voices-track {
    position: relative;
    display: flex;
    gap: 16px;
    margin: 0;
    padding: 8px var(--voices-edge);
    overflow-x: auto;
    overscroll-behavior-x: contain;
    list-style: none;
    scroll-padding-inline: var(--voices-edge);
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    cursor: grab;
}
.company-voices-track::-webkit-scrollbar {
    display: none;
}
/* While a drag runs and settles, the script places the row, so snapping waits */
.company-voices-track.is-free {
    scroll-snap-type: none;
}
.company-voices-track.is-dragging {
    cursor: grabbing;
    user-select: none;
}
.company-voices-track.is-dragging a {
    pointer-events: none;
}
.company-voices-track:focus-visible {
    outline: 3px solid #6ca0ff;
    outline-offset: -3px;
}
.company-voice {
    flex: none;
    height: var(--strip-h);
    aspect-ratio: var(--ratio, 1.5);
    scroll-snap-align: start;
}
.company-voice a {
    position: relative;
    display: block;
    height: 100%;
    overflow: hidden;
    border-radius: 18px;
    background: #0e1528;
    color: #fff;
    text-decoration: none;
    isolation: isolate;
}
.company-voice a:focus-visible {
    outline: 3px solid #6ca0ff;
    outline-offset: 3px;
}
.company-voice img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: var(--c6-photo-filter);
    transition:
        filter 420ms var(--c6-ease),
        transform 700ms var(--c6-ease);
    -webkit-user-drag: none;
}
/* The reveal (motion layer) and the hover share one transition list */
.company-motion .company-voice img[data-motion='photo'].is-in {
    transition:
        clip-path 1300ms var(--motion-ease),
        scale 1700ms var(--motion-ease),
        filter 420ms var(--c6-ease),
        transform 700ms var(--c6-ease);
}
.company-voice a:hover img {
    filter: var(--c6-photo-filter-hover);
    transform: scale(1.03);
}
/* A low shade for the name, and a hairline so light photos keep an edge */
.company-voice a::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    border-radius: inherit;
    background: linear-gradient(180deg, rgba(6, 9, 18, 0) 58%, rgba(6, 9, 18, 0.62) 100%);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
    pointer-events: none;
}
.company-voice-tag {
    position: absolute;
    right: 14px;
    bottom: 14px;
    left: 16px;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}
/* The name stays quiet so the photo leads */
.company-voice-tag b {
    overflow: hidden;
    color: rgba(255, 255, 255, 0.66);
    font-size: 15px;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: -0.02em;
    white-space: nowrap;
    text-overflow: ellipsis;
    text-shadow: 0 1px 10px rgba(0, 0, 0, 0.35);
}
.company-voice-tag i {
    display: grid;
    flex: none;
    place-items: center;
    width: 30px;
    height: 30px;
    border: 1px solid rgba(255, 255, 255, 0.28);
    border-radius: 50%;
    background: rgba(8, 12, 24, 0.32);
    font-size: 13px;
    font-style: normal;
    line-height: 1;
    transition:
        background 240ms var(--c6-ease),
        border-color 240ms var(--c6-ease),
        color 240ms var(--c6-ease);
}
.company-voice a:hover .company-voice-tag i,
.company-voice a:focus-visible .company-voice-tag i {
    border-color: #fff;
    background: #fff;
    color: #0a0f1c;
}
.company-voices-progress {
    position: relative;
    height: 2px;
    margin: 24px var(--voices-edge) 0;
    overflow: hidden;
    border-radius: 2px;
    background: rgba(255, 255, 255, 0.08);
}
.company-voices-progress i {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: calc(var(--voices-view, 0.4) * 100%);
    border-radius: inherit;
    background: rgba(155, 184, 255, 0.72);
    transform: translateX(calc(var(--voices-at, 0) * (1 / var(--voices-view, 0.4) - 1) * 100%));
}
@media (max-width: 1000px) {
    .company-founder-note {
        max-width: 620px;
    }
}
@media (max-width: 700px) {
    .company-voices {
        --voices-edge: 24px;
        --strip-h: min(52vw, 210px);
    }
    .company-voices-track {
        gap: 12px;
    }
    .company-voices-nav {
        display: none;
    }
    .company-voice a {
        border-radius: 14px;
    }
    .company-voice-tag {
        right: 10px;
        bottom: 10px;
        left: 12px;
    }
    .company-voice-tag b {
        font-size: 14px;
    }
    .company-voice-tag i {
        width: 26px;
        height: 26px;
        font-size: 12px;
    }
    .company-founder-note blockquote {
        font-size: 17px;
    }
    .company-approach .c6-section {
        padding-bottom: 40px;
    }
}

/* ==========================================================================
   Press: three stories with pictures, then the rest as a list
   ========================================================================== */
.company-press-featured {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
    margin-bottom: 48px;
}
.company-press-card {
    display: flex;
    flex-direction: column;
    color: var(--c6-ink);
    text-decoration: none;
}
.company-press-thumb {
    position: relative;
    display: block;
    overflow: hidden;
    aspect-ratio: 16 / 10;
    border-radius: 16px;
    background: #0e1528;
}
/* A hairline on top of the picture, so light pictures keep an edge on the dark page */
.company-press-thumb::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
    pointer-events: none;
}
.company-press-thumb img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: var(--c6-photo-filter);
    transition:
        filter 420ms var(--c6-ease),
        transform 700ms var(--c6-ease);
}
.company-press-card:hover .company-press-thumb img {
    filter: var(--c6-photo-filter-hover);
    transform: scale(1.03);
}
/* A wide banner shown whole, over a blurred copy of itself that fills the frame */
.company-press-thumb.is-banner {
    display: grid;
    place-items: center;
    background: #e6f2ff;
}
.company-press-thumb.is-banner img {
    position: relative;
    height: auto;
    object-fit: contain;
    filter: none;
}
.company-press-thumb.is-banner img.is-fill {
    position: absolute;
    inset: 0;
    height: 100%;
    object-fit: cover;
    filter: blur(14px) saturate(1.1);
    transform: scale(1.15);
}
.company-press-card:hover .company-press-thumb.is-banner img {
    filter: none;
    transform: scale(1.03);
}
.company-press-card:hover .company-press-thumb.is-banner img.is-fill {
    filter: blur(14px) saturate(1.1);
    transform: scale(1.15);
}
/* Until the story's own picture is in hand, the outlet and its subject hold the place */
.company-press-thumb.is-mark {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 6px;
    padding: 22px 24px;
    background:
        radial-gradient(90% 80% at 24% 0%, rgba(51, 119, 255, 0.3), transparent 64%),
        linear-gradient(160deg, #111c3b 0%, #0a1022 100%);
}
.company-press-thumb.is-mark small {
    color: rgba(245, 249, 255, 0.62);
    font-size: 13px;
    font-weight: 500;
}
.company-press-thumb.is-mark b {
    color: #fff;
    font-size: 26px;
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: -0.03em;
}
.company-press-meta {
    display: flex;
    align-items: baseline;
    gap: 12px;
    margin-top: 20px;
    color: var(--c6-ink-muted);
    font-size: 13px;
    font-weight: 500;
}
.company-press-meta time {
    font-family: var(--mono, 'SF Mono', 'Menlo', monospace);
    font-size: 12px;
    letter-spacing: 0.04em;
}
.company-section .company-press-card h3 {
    margin: 8px 0 0;
    color: inherit;
    font-size: 17px;
    font-weight: 500;
    line-height: 1.55;
    letter-spacing: -0.02em;
    text-wrap: pretty;
    transition: color 240ms var(--c6-ease);
}
.company-press-card:hover h3 {
    color: var(--c6-accent-strong);
}
@media (max-width: 900px) {
    .company-press-featured {
        grid-auto-columns: min(74vw, 340px);
        grid-auto-flow: column;
        grid-template-columns: none;
        gap: 16px;
        margin-right: calc(var(--c6-gutter) * -1);
        margin-left: calc(var(--c6-gutter) * -1);
        padding: 0 var(--c6-gutter) 4px;
        overflow-x: auto;
        overscroll-behavior-x: contain;
        scroll-padding-inline: var(--c6-gutter);
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
    }
    .company-press-featured::-webkit-scrollbar {
        display: none;
    }
    .company-press-card {
        scroll-snap-align: start;
    }
}
@media (max-width: 700px) {
    .company-press-featured {
        margin-right: -24px;
        margin-left: -24px;
        padding-right: 24px;
        padding-left: 24px;
        scroll-padding-inline: 24px;
    }
    .company-section .company-press-card h3 {
        font-size: 16px;
    }
}
@media (prefers-reduced-motion: reduce) {
    .company-voice img,
    .company-motion .company-voice img[data-motion='photo'].is-in,
    .company-press-thumb img,
    .company-voice-tag i,
    .company-voices-button,
    .company-voices-button svg {
        transition: none;
    }
    .company-voice a:hover img,
    .company-press-card:hover .company-press-thumb img {
        transform: none;
    }
}

/* Narrow phones keep the product link: up to 389px the links sit a little closer, and
   below 360px the team page link (also in the closing section) gives way */
@media (max-width: 389px) {
    .company-page .nav-links {
        gap: 12px;
    }
}
@media (max-width: 359px) {
    .company-page .nav-links a[href='/about/culture'] {
        display: none;
    }
}