/* Livery Studio (BETA): public copy under the tool (views/livery-studio-about.php).
   Scoped to .fla-about (outside #fls-root, so livery-studio.css tokens do not apply here). */
.fla-about {
    --fla-pink: var(--fmr-tool-pink, #ff2f9e);
    --fla-cyan: var(--fmr-tool-cyan, #00f0ff);
    --fla-panel: var(--fmr-tool-panel, #12171f);
    --fla-line: var(--fmr-tool-line, #2a3245);
    --fla-text: var(--fmr-tool-text, #e6edf3);
    --fla-muted: var(--fmr-tool-muted, #9ba4af);
    --fla-good: var(--fmr-tool-good, #55d89b);
    color: var(--fla-text);
    font-family: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
    max-width: 1180px;
    margin: 0 auto;
    padding: 8px 16px 56px;
    line-height: 1.65;
    overflow-wrap: anywhere;
    position: relative;
    z-index: 1;
    /* Own opaque sheet: the tool page background (palms) would otherwise run under the text. */
    background: #0a0a1a;
    border-radius: 16px;
    box-shadow: 0 0 60px rgba(0, 0, 0, .85);
    padding-left: 28px;
    padding-right: 28px;
    margin-top: 24px;
}
.fla-about *, .fla-about *::before, .fla-about *::after { box-sizing: border-box; }
.fla-about p, .fla-about li { color: var(--fla-text); text-shadow: none; }
.fla-about a { color: var(--fla-cyan); text-underline-offset: 3px; }
.fla-about a:hover { color: var(--fla-pink); }
.fla-about strong { color: #fff; }
.fla-about code { background: #16162e; color: #fff; padding: 1px 6px; border-radius: 4px; font-size: .9em; }
.fla-about h2 {
    font-size: clamp(1.3rem, 2.6vw, 1.75rem);
    line-height: 1.25;
    color: #fff;
    margin: 0 0 12px;
    scroll-margin-top: 110px;
}
.fla-section { padding: 36px 0 0; }
.fla-lead, .fla-note { color: var(--fla-muted) !important; font-size: .95rem; margin: 0 0 14px; }
.fla-note { margin-top: 14px; }
.fla-beta {
    display: inline-block; padding: 0 8px; border: 1px solid var(--fla-pink); border-radius: 999px;
    color: var(--fla-pink); font-size: .62em; font-weight: 800; letter-spacing: .12em; vertical-align: middle;
}

.fla-intro {
    margin-top: 28px;
    padding: 20px 24px;
    border: 1px solid rgba(0, 240, 255, .3);
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(0, 240, 255, .06), rgba(255, 47, 158, .05)), #0b0d16;
}
.fla-intro h2 { font-size: 1.05rem; letter-spacing: .02em; }
.fla-quote { margin: 0; font-size: 1rem; }

.fla-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.fla-steps li { display: flex; gap: 14px; align-items: flex-start; padding: 16px; border: 1px solid var(--fla-line); border-radius: 12px; background: var(--fla-panel); }
.fla-steps li > span {
    flex: 0 0 34px; height: 34px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    font-weight: 800; color: #0a0a1a; background: linear-gradient(135deg, var(--fla-cyan), #a855f7);
}
.fla-steps strong { display: block; margin-bottom: 4px; }
.fla-steps small { display: block; color: var(--fla-muted); font-size: .9rem; line-height: 1.55; }

.fla-two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 36px; }
.fla-list { margin: 0; padding-left: 20px; }
.fla-list li { margin: 0 0 8px; }

.fla-table { border: 1px solid var(--fla-line); border-radius: 14px; overflow: hidden; background: var(--fla-panel); }
.fla-row { display: grid; grid-template-columns: minmax(150px, 220px) minmax(0, 1fr); border-top: 1px solid var(--fla-line); }
.fla-row:first-child { border-top: 0; }
.fla-row > span { padding: 13px 18px; font-size: .95rem; }
.fla-row--head > span { font-size: .72rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--fla-muted); background: rgba(255, 255, 255, .03); }
.fla-file { border-right: 1px solid var(--fla-line); }
.fla-row--head > span:first-child { border-right: 1px solid var(--fla-line); }

.fla-checks { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.fla-checks li { position: relative; margin: 0; padding: 12px 16px 12px 44px; border: 1px solid var(--fla-line); border-radius: 12px; background: var(--fla-panel); }
.fla-checks li::before {
    content: "\2713"; position: absolute; left: 14px; top: 13px;
    width: 18px; height: 18px; border-radius: 50%;
    font-size: 11px; font-weight: 800; line-height: 18px; text-align: center;
    color: #06180f; background: var(--fla-good);
}

.fla-price { font-size: 1rem; margin: 0; }

.fla-faq details { border: 1px solid var(--fla-line); border-radius: 12px; margin: 0 0 10px; background: var(--fla-panel); overflow: hidden; }
.fla-faq summary { cursor: pointer; padding: 15px 18px; font-weight: 600; color: #fff; line-height: 1.45; }
.fla-faq details[open] summary { color: var(--fla-cyan); }
.fla-faq details p { padding: 0 18px 16px; margin: 0; color: var(--fla-text); }

.fla-final { margin-top: 36px; padding: 20px 24px; border: 1px solid var(--fla-line); border-radius: 14px; background: var(--fla-panel); display: flex; flex-wrap: wrap; gap: 14px; align-items: center; justify-content: space-between; }
.fla-final p { margin: 0; }
.fla-actions { display: flex; flex-wrap: wrap; gap: 10px; }

@media (max-width: 860px) {
    .fla-steps, .fla-checks { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
    .fla-about { padding-left: 16px; padding-right: 16px; border-radius: 0; }
    .fla-two { grid-template-columns: minmax(0, 1fr); gap: 0; }
    .fla-row { grid-template-columns: minmax(0, 1fr); }
    .fla-row--head { display: none; }
    .fla-file { border-right: 0; padding-bottom: 0 !important; }
    .fla-intro { padding: 16px; }
}