/* ==================================================================
   OZAVION — Solutions page
   Page-specific touches only; everything structural reuses the
   shared section/component system (sections.css, components.css).
   ================================================================== */

/* Small uppercase label used to introduce a sub-block inside a card. */
.sol-label {
    font-size: var(--fs-xs);
    font-weight: var(--fw-semibold);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--color-text-muted);
}

/* "Related brand:" inline line in the solution-category tiles. */
.sol-related {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--fs-xs);
    color: var(--color-text-muted);
}

/* Problem statement inside outcome cards. */
.sol-problem { font-size: var(--fs-sm); color: var(--color-text-soft); }
.sol-problem .sol-label { margin-right: var(--space-1, 0.25rem); }

/* "Suggested next step" link — pushes to the bottom of the card. */
.sol-step {
    margin-top: auto;
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--fs-sm);
    font-weight: var(--fw-semibold);
    color: var(--color-accent-2);
}
.sol-step .icon { transition: transform var(--transition); }
.sol-step:hover .icon { transform: translateX(4px); }

/* Bundle panel internals. */
.sol-bundle__name { font-size: var(--fs-lg); font-weight: var(--fw-semibold); }
.sol-bundle__for { font-size: var(--fs-sm); color: var(--color-text-soft); }
.sol-bundle__outcome {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--fs-sm);
    font-weight: var(--fw-medium);
    color: var(--color-text);
}
.sol-bundle__outcome .icon { color: var(--color-accent-2); flex: none; }

/* Solution-journey problem quote. */
.sol-quote {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--fs-md);
    font-weight: var(--fw-medium);
    color: var(--color-text);
}
.sol-quote .icon { color: var(--color-accent-2); flex: none; }