/* ==========================================================================
   Use-case pages
   Design tokens, the site header, and the button system live in brand.css,
   which this file assumes is loaded first. One stylesheet serves all five
   pages; each one uses a subset of the sections below.
   ========================================================================== */

/* These pages no longer load styles.min.css, so the browser's default body
   margin and content-box sizing have to be cleared here. */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    padding: 0;
}

.omni .content-container {
    width: 100%;
    max-width: var(--shell);
    margin-inline: auto;
    padding-inline: var(--gutter);
}

/* ==========================================================================
   Legacy button markup
   .button-cta comes from styles.min.css and is used across the site. Map it
   onto the shared .btn look here rather than editing the global stylesheet,
   exactly as home.css does.
   ========================================================================== */

.omni .button-cta {
    display: inline-flex;
    min-height: 44px;
    align-items: center;
    justify-content: center;
    gap: var(--s2);
    padding-inline: var(--s5);
    border: 1px solid var(--line-strong);
    border-radius: var(--r-md);
    background: transparent;
    color: var(--text);
    font-family: inherit;
    font-size: 15px;
    font-weight: var(--fw-medium);
    text-decoration: none;
    transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease;
}

.omni .button-cta:hover,
.omni .button-cta:focus-visible {
    border-color: var(--line-strong);
    background: var(--surface-hover);
}

.omni .button-cta-primary {
    border-color: var(--text);
    background: var(--text);
    color: var(--bg);
    font-weight: var(--fw-semibold);
}

.omni .button-cta-primary:hover,
.omni .button-cta-primary:focus-visible {
    border-color: #fff;
    background: #fff;
    color: var(--bg);
}

/* ==========================================================================
   Shared section rhythm
   ========================================================================== */

.usecase-hero,
.benefits-section,
.workflow-section,
.features-section,
.comparison-section,
.usecases-section,
.compatibility-section,
.final-cta {
    padding: var(--s8) 0;
}

.benefits-section h2,
.workflow-section h2,
.features-section h2,
.comparison-section h2,
.usecases-section h2,
.compatibility-section h2,
.final-cta h2 {
    max-width: 620px;
    margin: 0 auto var(--s6);
    color: var(--text);
    font-size: clamp(24px, 3vw, 30px);
    font-weight: var(--fw-semibold);
    letter-spacing: -0.02em;
    line-height: 1.2;
    text-align: center;
    text-wrap: balance;
}

/* ==========================================================================
   Hero — centred, matching the pricing and Blender sub-page pattern
   ========================================================================== */

.usecase-hero {
    padding: var(--s9) 0 var(--s7);
    text-align: center;
}

.usecase-hero h1 {
    max-width: 720px;
    margin: 0 auto var(--s4);
    color: var(--text);
    font-size: clamp(34px, 4.4vw, 48px);
    font-weight: var(--fw-semibold);
    letter-spacing: -0.03em;
    line-height: 1.1;
    text-wrap: balance;
}

.usecase-hero p {
    max-width: 580px;
    margin: 0 auto var(--s6);
    font-size: 17px;
    line-height: 1.6;
}

/* Badge: a hairline chip, not a pill, matching the format chips on the home
   page and the capability chips on the Blender page. */
.software-badge,
.usecase-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--s2);
    margin-bottom: var(--s5);
    padding: 6px var(--s3);
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    color: var(--text-2);
    font-size: 13px;
    line-height: 1.4;
}

.software-badge img {
    width: 16px;
    height: 16px;
    object-fit: contain;
}

/* ==========================================================================
   Cards — benefits, use cases, comparison
   ========================================================================== */

.benefits-grid,
.usecases-grid,
.comparison-grid {
    display: grid;
    gap: var(--s4);
}

.benefits-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.usecases-grid,
.comparison-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.benefit-card,
.usecase-item,
.comparison-card {
    padding: var(--s5);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    background: var(--surface);
    transition: border-color 150ms ease, background-color 150ms ease;
}

.benefit-card:hover,
.usecase-item:hover,
.comparison-card:hover {
    border-color: var(--line-strong);
    background: var(--surface-hover);
}

.benefit-card h3,
.usecase-item h3,
.comparison-card h3 {
    margin: 0 0 var(--s3);
    color: var(--text);
    font-size: 16px;
    font-weight: var(--fw-semibold);
    letter-spacing: -0.01em;
}

.benefit-card p,
.usecase-item p {
    margin: 0;
    font-size: 15px;
    line-height: 1.6;
}

/* Comparison lists */
.comparison-card ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.comparison-card li {
    display: flex;
    gap: var(--s3);
    padding: var(--s3) 0;
    color: var(--text-2);
    font-size: 15px;
    line-height: 1.5;
}

.comparison-card li + li {
    border-top: 1px solid var(--line);
}

/* No red and green: the two columns are already labelled, and colour-coding a
   competitor comparison reads as a sales chart rather than a spec sheet. */
.icon-good,
.icon-bad {
    flex: none;
    width: 1em;
    color: var(--text-3);
    font-size: 14px;
    line-height: 1.6;
}

.icon-good {
    color: var(--text);
}

/* ==========================================================================
   Workflow — numbered steps

   The steps were emoji (📱 📦 ⬇️ ✨), which sit outside the type system, render
   differently on every platform, and cannot be recoloured. A numbered sequence
   is what this actually is, so the number is generated from a counter and the
   markup carries nothing.
   ========================================================================== */

.workflow-steps {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--s4);
    counter-reset: step;
}

.workflow-step {
    padding: var(--s5);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    background: var(--surface);
    counter-increment: step;
}

.step-icon {
    display: inline-flex;
    width: 28px;
    height: 28px;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--s4);
    border: 1px solid var(--line-strong);
    border-radius: 50%;
    color: var(--text-2);
    font-size: 13px;
    font-variant-numeric: tabular-nums;
    font-weight: var(--fw-medium);
}

.step-icon::before {
    content: counter(step);
}

.workflow-step h3 {
    margin: 0 0 var(--s2);
    color: var(--text);
    font-size: 15px;
    font-weight: var(--fw-semibold);
}

.workflow-step p {
    margin: 0;
    font-size: 14px;
    line-height: 1.6;
}

/* ==========================================================================
   Feature checklist
   ========================================================================== */

.features-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 var(--s6);
    max-width: 780px;
    margin-inline: auto;
}

.feature-item {
    display: flex;
    align-items: center;
    gap: var(--s3);
    padding: var(--s3) 0;
    border-bottom: 1px solid var(--line);
    color: var(--text-2);
    font-size: 15px;
}

.feature-item .check {
    flex: none;
    color: var(--text-3);
    font-size: 13px;
}

/* ==========================================================================
   Compatibility strip
   ========================================================================== */

.compatibility-section {
    text-align: center;
}

.compatibility-section p {
    max-width: 560px;
    margin: 0 auto var(--s6);
    font-size: 15px;
    line-height: 1.6;
}

.compatibility-icons {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--s6);
}

.compatibility-icons img {
    width: 32px;
    height: 32px;
    object-fit: contain;
    filter: grayscale(1);
    opacity: 0.55;
    transition: opacity 150ms ease;
}

.compatibility-icons img:hover {
    opacity: 1;
}

.device-note,
.premium-note {
    max-width: 560px;
    margin: var(--s5) auto 0;
    color: var(--text-3);
    font-size: 13px;
    line-height: 1.6;
    text-align: center;
}

/* ==========================================================================
   Final call to action
   ========================================================================== */

.final-cta {
    padding: var(--s9) 0;
    border-top: 1px solid var(--line);
    text-align: center;
}

.final-cta p {
    max-width: 520px;
    margin: 0 auto var(--s6);
    font-size: 16px;
    line-height: 1.6;
}

.cta-buttons {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--s3);
}

/* ==========================================================================
   Footer — same markup and treatment as the home page
   ========================================================================== */

.omni .section {
    border-top: 1px solid var(--line);
}

.omni .footer {
    max-width: var(--shell);
    padding: var(--s8) var(--gutter);
    margin-inline: auto;
    color: var(--text-3);
    text-align: center;
}

.omni .footer p,
.omni .footer a {
    color: var(--text-3);
    font-size: 13px;
}

.omni .footer a:hover {
    color: var(--text);
}

.omni .links-container,
.omni .social-networks {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--s2);
    margin-bottom: var(--s4);
}

.omni .links-container a,
.omni .social-networks a {
    padding: 6px var(--s3);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    background: transparent;
    text-decoration: none;
    transition: border-color 150ms ease, color 150ms ease;
}

.omni .links-container a:hover,
.omni .social-networks a:hover {
    border-color: var(--line-strong);
    color: var(--text);
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 900px) {
    .benefits-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .workflow-steps {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 620px) {
    .usecase-hero {
        padding: var(--s7) 0 var(--s6);
    }

    .benefits-section,
    .workflow-section,
    .features-section,
    .comparison-section,
    .usecases-section,
    .compatibility-section {
        padding: var(--s7) 0;
    }

    .final-cta {
        padding: var(--s7) 0;
    }

    .benefits-grid,
    .usecases-grid,
    .comparison-grid,
    .workflow-steps,
    .features-list {
        grid-template-columns: 1fr;
    }

    .cta-buttons .button-cta {
        flex: 1 1 100%;
    }

    .compatibility-icons {
        gap: var(--s5);
    }
}