/* intro — folio line: editorial single column, twin metrics + chart */
.folio-line__eyebrow {
    letter-spacing: 0.16em;
}

.folio-line__title {
    letter-spacing: -0.04em;
    text-wrap: balance;
}

.folio-line__rule {
    height: 0.2rem;
    width: 100%;
}

.folio-line__metrics {
    width: 100%;
}

@media (min-width: 576px) {
    .folio-line__metrics {
        width: 40%;
        flex-shrink: 0;
    }
}

.folio-line__strip {
    padding: 1.25rem;
}

.folio-line__caption {
    font-size: 0.75rem;
    line-height: 1rem;
}

.folio-line__chart {
    min-height: 5rem;
    overflow: visible;
}

.folio-line__chart-fill {
    transform-origin: center bottom;
    animation: folio-line-chart-fill 4.2s ease-in-out infinite;
}

.folio-line__chart-line {
    stroke-dasharray: 360;
    stroke-dashoffset: 360;
    animation: folio-line-chart-draw 4.2s ease-in-out infinite;
}

.folio-line__chart-dot {
    animation: folio-line-chart-dot 4.2s ease-in-out infinite;
}

@keyframes folio-line-chart-fill {
    0%, 12% { opacity: 0; transform: scaleY(0.55); }
    40%, 72% { opacity: 1; transform: scaleY(1); }
    88%, 100% { opacity: 0; transform: scaleY(0.55); }
}

@keyframes folio-line-chart-draw {
    0% { stroke-dashoffset: 360; opacity: 0.35; }
    38% { stroke-dashoffset: 0; opacity: 1; }
    72% { stroke-dashoffset: 0; opacity: 1; }
    100% { stroke-dashoffset: 360; opacity: 0.35; }
}

@keyframes folio-line-chart-dot {
    0%, 28% { opacity: 0; transform: translateY(5px) scale(0.6); }
    42%, 72% { opacity: 1; transform: translateY(0) scale(1); }
    88%, 100% { opacity: 0; transform: translateY(5px) scale(0.6); }
}

@media (prefers-reduced-motion: reduce) {
    .folio-line__chart-fill,
    .folio-line__chart-line,
    .folio-line__chart-dot {
        animation: none;
        opacity: 1;
        transform: none;
        stroke-dashoffset: 0;
    }
}

/* short stat captions sit in narrow columns on phones: long words break instead of spilling over */
.folio-line__caption { min-width: 0; overflow-wrap: anywhere; }

/* Steps v20 — Horizontal Boarding-Pass Ticket Row Steps with Perforated Stub Divider */

/* Responsive card grid (avoids mixing Bootstrap row/col with a flex/grid gap on the same node) */
.ticket-stub__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
}

@media (min-width: 768px) {
    .ticket-stub__grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 992px) {
    .ticket-stub__grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* Fixed-width code/number stub (no Bootstrap utility equivalent) */
.ticket-stub__code-box {
    width: 5rem;
}

/* Perforated divider — dashed edge between the stub and the ticket body */
.ticket-stub__divider {
    width: 0;
    border-left-style: dashed;
    margin-top: 1rem;
    margin-bottom: 1rem;
}

/* Prevents flex-child text overflow inside the ticket body */
.ticket-stub__min-shrink {
    min-width: 0;
}

.tips-cards__card {
    max-width: 24rem;
}

/* FAQ v1 — JS visibility hook (no Tailwind in script) */
.helpdesk-support-resolve-veiled {
    display: none;
}

.helpdesk-subtitle-width {
    max-width: 42rem;
}


.prose-bodycopy__media-overlay {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.prose-bodycopy__well-stack-gap {
    gap: 4rem;
}

.content-v43-badge-size {
    width: 2.25rem;
    height: 2.25rem;
    flex-shrink: 0;
}

.content-grid-gap {
    gap: 2rem;
}

.content-prose-measure {
    max-width: 48rem;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
}

.content-wide-frame {
    max-width: 72rem;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
}

.content-cta__lift { transition: transform 150ms ease; }
.content-cta__lift:hover { transform: translateY(-2px); }

.content-col-grow {
    flex: 1 1 0%;
    min-width: 0;
}

.content-img-ratio {
    display: block;
    width: 100%;
    height: 100%;
    min-width: 0;
    object-fit: cover;
    flex-shrink: 0;
}

.content-media-fullheight {
    min-height: 18rem;
}
@media (min-width: 992px) {
    .content-media-fullheight {
        height: 100%;
        min-height: 18rem;
    }
}

.content-thumb-height {
    display: block;
    width: 100%;
    height: 10rem;
    min-height: 10rem;
    flex-shrink: 0;
    object-fit: cover;
}