/* LogoIntern brand tokens */
:root {
    --li-blue:  #2babe2;
    --li-green: #a1cd3b;
}

/* White nav (overrides global #ededed default) */
nav { background-color: #fff; }

/* ── Logo hero ── */
.logo-lockup {
    display: flex;
    align-items: center;
    gap: 48px;
    margin-bottom: 48px;
}

.logo-lockup img {
    height: 72px;
    width: auto;
}

.logo-stat {
    border-left: 1px solid #d4d4d4;
    padding-left: 48px;
}

.logo-stat-number {
    font-size: 3.5rem;
    font-weight: 700;
    line-height: 1;
    color: var(--li-blue);
}

.logo-stat-label {
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #888;
    margin-top: 4px;
}

/* ── Two-col layout ── */
.two-col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    margin-bottom: 40px;
}

.two-col video,
.two-col img {
    width: 100%;
    height: auto;
    display: block;
}

/* ── Palette ── */
.palette-group { margin-bottom: 40px; }

/* ── Type specimens ── */
.type-display {
    font-size: 3rem;
    font-weight: 700;
    line-height: 1;
}

.type-display.univers {
    font-family: 'Helvetica Neue LT Std', 'Helvetica Neue', Helvetica, sans-serif;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--li-blue);
}

.type-display.helvetica {
    font-family: 'Helvetica Neue LT Std', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-weight: 400;
    font-size: 2.25rem;
    color: #333;
}

.type-sample-body {
    margin-top: 16px;
    font-size: 0.9rem;
    line-height: 1.65;
    color: #555;
    font-weight: 400;
    max-width: 320px;
}

/* ── Lottie animations grid ── */
.lottie-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-bottom: 40px;
}

.lottie-cell {
    background: #fff;
    padding: 32px 24px 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.lottie-player {
    width: 100%;
    max-width: 180px;
    aspect-ratio: 1;
}

.lottie-cell-label {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #555;
    text-align: center;
    margin-top: 12px;
}

/* ── Feature grid ── */
.feature-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 8px;
    margin-bottom: 40px;
}

.feature-cell {
    background: #fff;
    padding: 40px;
}

.feature-bar {
    width: 28px;
    height: 6px;
    margin-bottom: 20px;
}

.feature-bar.blue  { background: var(--li-blue); }
.feature-bar.green { background: var(--li-green); }
.feature-bar.dark  { background: #000; }

.feature-title {
    font-size: 1.15rem;
    font-weight: 700;
    margin-bottom: 10px;
}

.feature-desc {
    font-size: 0.9rem;
    line-height: 1.6;
    color: #555;
}

.feature-desc a {
    color: var(--li-blue);
    text-decoration: none;
}

/* ── Acquisition callout ── */
.acquisition-block {
    background: #000;
    color: #fff;
    padding: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 80px;
}

.acquisition-number {
    font-size: 7rem;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
    color: var(--li-green);
}

.acquisition-text h2 {
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 16px;
}

.acquisition-text p {
    font-size: 1rem;
    line-height: 1.65;
    color: #aaa;
    max-width: 560px;
}

/* ── Full-width video ── */
.full-video {
    width: 100%;
    height: auto;
    display: block;
    margin-bottom: 24px;
}

/* ── Hero browser hover ── */
a.browser-mockup {
    text-decoration: none;
    color: inherit;
    cursor: pointer;
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}

a.browser-mockup:hover {
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.18);
    transform: translateY(-2px);
}

/* ── Responsive ── */
@media (max-width: 900px) {
    .lottie-grid { grid-template-columns: repeat(2, 1fr); }
    .two-col,
    .feature-grid { grid-template-columns: 1fr; }
    .acquisition-block { flex-direction: column; gap: 32px; padding: 48px 24px; }
    .acquisition-number { font-size: 4rem; }
    .logo-lockup { flex-direction: column; align-items: flex-start; }
    .logo-stat { border-left: none; padding-left: 0; border-top: 1px solid #d4d4d4; padding-top: 24px; }
}

@media (max-width: 1024px) {
    .prev-versions-grid { grid-template-columns: 1fr !important; gap: 32px !important; }
}

@media (max-width: 768px) {
    .logo-stat-number { font-size: 1.75rem; }
    .palette [style*="border-left"] { border-left: none !important; padding-left: 0 !important; }
    .section-logo { margin-bottom: 16px; }
    .logo-lockup { margin-bottom: 16px; gap: 24px; }
    .logo-stat-number { margin-bottom: 4px; }
}