/* Vehicle Studio tool showcase on the /debadger/ landing (view public/views/vehicle-studio-about.php).
   Builds on the theme's debadger-landing.css and debadger-showcase.css (.fds tokens, .fds-frame, buttons).
   Tool sections (.fds-tool), before / after slider (.fds-compare), stats, export table and limits (.fvs-*).
   Motion: CSS only, off under prefers-reduced-motion. */

/* ---------- section head + stats */
.fmr-debadge-page .fds-tools { position: relative; padding: 96px 0 40px; }
.fmr-debadge-page .fds-tools::before {
    content: ""; position: absolute; left: 50%; top: 0; width: min(1240px, calc(100% - 64px)); height: 1px; transform: translateX(-50%);
    background: linear-gradient(90deg, transparent, rgba(255, 47, 158, .55), rgba(46, 230, 242, .55), transparent);
}
.fmr-debadge-page .fds-tools-head { text-align: center; }
.fmr-debadge-page .fds-tools-head .fdb-section-intro { margin: 0 auto 36px; max-width: 780px; font-size: 16px; }
.fmr-debadge-page .fds-tools-head .fdb-section-intro strong { color: var(--fds-ink, #f6f3ff); }
.fmr-debadge-page .fds-stats {
    list-style: none; margin: 0 auto; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr));
    border: 1px solid var(--fds-line, rgba(255, 255, 255, .09)); border-radius: 20px; overflow: hidden;
    background: linear-gradient(180deg, rgba(30, 24, 56, .6), rgba(14, 12, 28, .6));
}
.fmr-debadge-page .fds-stats li { padding: 22px 12px 20px; text-align: center; border-left: 1px solid var(--fds-line, rgba(255, 255, 255, .09)); }
.fmr-debadge-page .fds-stats li:first-child { border-left: 0; }
.fmr-debadge-page .fds-stats b {
    display: block; font: 700 clamp(34px, 3.4vw, 48px)/1 var(--fds-head, 'Rajdhani', sans-serif);
    background: var(--fds-grad, linear-gradient(100deg, #ff2f9e, #c04dff, #2ee6f2)); -webkit-background-clip: text; background-clip: text;
    color: transparent; -webkit-text-fill-color: transparent;
}
.fmr-debadge-page .fds-stats span { display: block; margin-top: 6px; color: var(--fds-muted, #b9b4d2); font-size: 12.5px; line-height: 1.35; }

/* ---------- one tool */
.fmr-debadge-page .fds-tool {
    display: grid; grid-template-columns: minmax(0, 1.28fr) minmax(0, 1fr); gap: clamp(28px, 4.5vw, 64px); align-items: center;
    padding: clamp(44px, 6vw, 76px) 0; scroll-margin-top: 100px;
}
.fmr-debadge-page .fds-tool + .fds-tool { border-top: 1px solid rgba(255, 255, 255, .05); }
.fmr-debadge-page .fds-tool--flip .fds-tool-media { order: 2; }
.fmr-debadge-page .fds-tool--wide { grid-template-columns: minmax(0, .85fr) minmax(0, 1.25fr); }
.fmr-debadge-page .fds-tool--build { grid-template-columns: minmax(0, 400px) minmax(0, 1fr); justify-content: center; }
.fmr-debadge-page .fds-tool-media { position: relative; min-width: 0; }
.fmr-debadge-page .fds-tool-media::before {
    content: ""; position: absolute; inset: 12% 8% -6%; z-index: -1; border-radius: 50%;
    background: radial-gradient(closest-side, rgba(168, 85, 247, .32), transparent); filter: blur(40px);
}
.fmr-debadge-page .fds-tool-copy { min-width: 0; }
.fmr-debadge-page .fds-kicker {
    display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0 0 14px;
    color: var(--fds-ink, #f6f3ff); font: 700 13px/1.2 Inter, system-ui, sans-serif; letter-spacing: .08em; text-transform: uppercase;
}
.fmr-debadge-page .fds-kicker .fds-ico { width: 36px; height: 36px; padding: 7px; border-radius: 11px; stroke: var(--fds-pink2, #ff79c0); background: rgba(255, 47, 158, .12); box-shadow: inset 0 0 0 1px rgba(255, 121, 192, .25); }
.fmr-debadge-page .fds-pill {
    display: inline-flex; align-items: center; padding: 5px 10px; border-radius: 999px; font: 700 11.5px/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    letter-spacing: .04em; text-transform: none; color: var(--fds-cyan, #2ee6f2); background: rgba(46, 230, 242, .08); box-shadow: inset 0 0 0 1px rgba(46, 230, 242, .3);
}
.fmr-debadge-page .fds-pill--free { color: #9ff5c9; background: rgba(80, 230, 160, .08); box-shadow: inset 0 0 0 1px rgba(80, 230, 160, .3); }
.fmr-debadge-page .fds-pill--soon { color: var(--fds-amber, #f8c56a); background: rgba(248, 197, 106, .08); box-shadow: inset 0 0 0 1px rgba(248, 197, 106, .35); }
.fmr-debadge-page .fds-tool h3 {
    font-family: var(--fds-head, 'Rajdhani', sans-serif); font-size: clamp(30px, 3.4vw, 46px); line-height: 1; letter-spacing: .005em;
    text-transform: uppercase; color: var(--fds-ink, #f6f3ff); -webkit-text-fill-color: currentColor; margin: 0 0 16px;
}
.fmr-debadge-page .fds-tool-copy > p { font-size: 16px; line-height: 1.7; margin: 0 0 22px; color: #cfcae4; }
.fmr-debadge-page .fds-tool-copy > .fds-note { font-size: 13px; line-height: 1.65; color: var(--fds-muted, #b9b4d2); margin: 18px 0 0; }
.fmr-debadge-page .fds-facts { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.fmr-debadge-page .fds-facts li {
    padding: 14px 14px 13px; border-radius: 14px; background: rgba(22, 18, 42, .72); border: 1px solid var(--fds-line, rgba(255, 255, 255, .09));
}
.fmr-debadge-page .fds-facts b {
    display: block; font: 700 28px/1 var(--fds-head, 'Rajdhani', sans-serif); color: var(--fds-ink, #f6f3ff); margin-bottom: 6px; white-space: nowrap;
}
.fmr-debadge-page .fds-facts li:first-child b {
    background: var(--fds-grad, linear-gradient(100deg, #ff2f9e, #c04dff, #2ee6f2)); -webkit-background-clip: text; background-clip: text;
    color: transparent; -webkit-text-fill-color: transparent;
}
.fmr-debadge-page .fds-facts span { display: block; font-size: 12.5px; line-height: 1.45; color: var(--fds-muted, #b9b4d2); }
.fmr-debadge-page .fds-more { margin-top: 16px; border-top: 1px solid var(--fds-line, rgba(255, 255, 255, .09)); }
.fmr-debadge-page .fds-more summary {
    display: flex; align-items: center; gap: 8px; padding: 14px 0 6px; cursor: pointer; list-style: none;
    color: var(--fds-ink, #f6f3ff); font: 600 14px/1.3 Inter, system-ui, sans-serif; text-transform: none; letter-spacing: 0;
}
.fmr-debadge-page .fds-more summary::-webkit-details-marker { display: none; }
.fmr-debadge-page .fds-more summary::after {
    content: ""; position: static; width: 8px; height: 8px; margin-left: 2px; border-right: 2px solid var(--fds-pink2, #ff79c0); border-bottom: 2px solid var(--fds-pink2, #ff79c0);
    transform: rotate(45deg) translateY(-2px); transition: transform .2s ease; background: none;
}
.fmr-debadge-page .fds-more[open] summary::after { transform: rotate(-135deg) translate(-2px, 0); }
.fmr-debadge-page .fds-links { display: flex; flex-wrap: wrap; gap: 6px 22px; margin: 18px 0 0; font-size: 14px; }
.fmr-debadge-page .fds-links a { color: var(--fds-cyan, #2ee6f2); text-decoration: underline; text-underline-offset: 4px; text-decoration-color: rgba(46, 230, 242, .4); }
.fmr-debadge-page .fds-links a:hover { text-decoration-color: currentColor; }

/* Your build card capture: a narrow, glowing card */
.fmr-debadge-page .fds-build-card img {
    display: block; width: 100%; max-width: 400px; height: auto; margin: 0 auto; border-radius: 18px;
    box-shadow: 0 30px 70px -30px rgba(0, 0, 0, .95), 0 0 60px -20px rgba(46, 230, 242, .35);
}

/* Plate Creator: template sheet + editor capture inset */
.fmr-debadge-page .fds-plate-media { padding-bottom: 40px; }
.fmr-debadge-page .fds-plate-inset {
    position: absolute; right: -28px; bottom: -6px; width: 40%; height: auto; border-radius: 12px; border: 1px solid var(--fds-line2, rgba(255, 255, 255, .17));
    box-shadow: 0 24px 50px -16px rgba(0, 0, 0, .95);
}
.fmr-debadge-page .fds-tool--soon .fds-frame { box-shadow: 0 40px 90px -40px rgba(0, 0, 0, .95), 0 0 70px -24px rgba(248, 197, 106, .3); }

/* ---------- before / after slider (debadge) */
.fmr-debadge-page .fds-compare { margin: 0; min-width: 0; }
.fmr-debadge-page .fds-compare-stage {
    position: relative; border-radius: 16px; overflow: hidden; border: 1px solid var(--fds-line2, rgba(255, 255, 255, .17)); background: #0a0916;
    box-shadow: 0 40px 90px -40px rgba(0, 0, 0, .95), 0 0 70px -24px rgba(255, 47, 158, .35); touch-action: pan-y;
}
.fmr-debadge-page .fds-compare { --pos: 20%; }
.fmr-debadge-page .fds-compare img { display: block; width: 100%; height: auto; user-select: none; -webkit-user-drag: none; }
.fmr-debadge-page .fds-compare-top { position: absolute; inset: 0; clip-path: inset(0 calc(100% - var(--pos)) 0 0); }
.fmr-debadge-page .fds-compare-handle { position: absolute; top: 0; bottom: 0; left: var(--pos); width: 2px; margin-left: -1px; background: #fff; box-shadow: 0 0 18px rgba(255, 47, 158, .9); pointer-events: none; }
.fmr-debadge-page .fds-compare-handle::after {
    content: ""; position: absolute; top: 50%; left: 50%; width: 46px; height: 46px; transform: translate(-50%, -50%); border-radius: 50%;
    background: rgba(12, 10, 26, .82) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 6-6 6 6 6M15 6l6 6-6 6'/%3E%3C/svg%3E") center / 22px no-repeat;
    border: 2px solid #fff; box-shadow: 0 0 0 4px rgba(255, 47, 158, .35), 0 8px 24px rgba(0, 0, 0, .6);
}
.fmr-debadge-page .fds-compare-range { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; -webkit-appearance: none; appearance: none; }
.fmr-debadge-page .fds-compare-stage:has(.fds-compare-range:focus-visible) .fds-compare-handle::after { box-shadow: 0 0 0 4px var(--fds-cyan, #2ee6f2), 0 8px 24px rgba(0, 0, 0, .6); }
.fmr-debadge-page .fds-compare-tag {
    position: absolute; top: 14px; padding: 6px 11px; border-radius: 999px; pointer-events: none;
    font: 700 11px/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: .14em; text-transform: uppercase; color: #fff; background: rgba(10, 9, 22, .72);
}
.fmr-debadge-page .fds-compare-tag--before { right: 14px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .25); }
.fmr-debadge-page .fds-compare-tag--after { left: 14px; box-shadow: inset 0 0 0 1px rgba(255, 47, 158, .6); }
.fmr-debadge-page .fds-compare figcaption { margin-top: 12px; font-size: 13px; line-height: 1.6; color: var(--fds-muted, #b9b4d2); }

/* ---------- export table, tests and limits (.fvs-*) */
.fmr-debadge-page .fvs-list { margin: 10px 0 0; padding-left: 18px; color: var(--fds-muted, #b9b4d2); font-size: 14px; line-height: 1.7; }
.fmr-debadge-page .fvs-list li { margin: 0 0 8px; }
.fmr-debadge-page .fvs-list strong { color: var(--fds-ink, #f6f3ff); }
.fmr-debadge-page .fvs-table { border: 1px solid var(--fds-line, rgba(255, 255, 255, .09)); border-radius: 18px; overflow: hidden; background: rgba(22, 18, 42, .6); }
.fmr-debadge-page .fvs-row { display: grid; grid-template-columns: minmax(150px, 220px) minmax(0, 1fr); gap: 18px; padding: 15px 22px; border-top: 1px solid var(--fds-line, rgba(255, 255, 255, .09)); color: var(--fds-muted, #b9b4d2); font-size: 14px; line-height: 1.65; }
.fmr-debadge-page .fvs-row:first-child { border-top: 0; }
.fmr-debadge-page .fvs-row:nth-child(even):not(.fvs-row--head) { background: rgba(255, 255, 255, .015); }
.fmr-debadge-page .fvs-row--head { background: rgba(255, 47, 158, .08); color: var(--fds-ink, #f6f3ff); font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.fmr-debadge-page .fvs-row code { overflow-wrap: anywhere; white-space: normal; }
.fmr-debadge-page .fvs-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.fmr-debadge-page .fvs-two > div { padding: 30px; border-radius: 20px; background: rgba(22, 18, 42, .6); border: 1px solid var(--fds-line, rgba(255, 255, 255, .09)); }
.fmr-debadge-page .fvs-two h2 { margin-top: 0; font-size: clamp(26px, 2.6vw, 34px); }
.fmr-debadge-page .fvs-checks { margin: 0; padding: 0; list-style: none; }
.fmr-debadge-page .fvs-checks li { position: relative; padding: 0 0 12px 30px; color: var(--fds-muted, #b9b4d2); font-size: 14px; line-height: 1.7; }
.fmr-debadge-page .fvs-checks li::before { content: ""; position: absolute; left: 4px; top: 7px; width: 11px; height: 6px; border-left: 2px solid var(--fds-cyan, #2ee6f2); border-bottom: 2px solid var(--fds-cyan, #2ee6f2); transform: rotate(-45deg); }
.fmr-debadge-page .fvs-price-note { margin-top: 22px; padding: 22px 26px; border: 1px solid rgba(46, 230, 242, .3); border-radius: 18px; background: linear-gradient(135deg, rgba(46, 230, 242, .07), rgba(22, 18, 42, .6)); }
.fmr-debadge-page .fvs-price-note h3 { margin: 0 0 8px; color: var(--fds-ink, #f6f3ff); font-size: 18px; text-transform: uppercase; letter-spacing: .03em; }
.fmr-debadge-page .fvs-price-note p { margin: 0; font-size: 14px; line-height: 1.7; }
.fmr-debadge-page .fvs-price-note strong { color: var(--fds-ink, #f6f3ff); }
.fmr-debadge-page .fvs-price-note a { color: var(--fds-cyan, #2ee6f2); text-underline-offset: 3px; }

/* ---------- motion */
@media (prefers-reduced-motion: no-preference) {
    @supports (animation-timeline: view()) {
        .fmr-debadge-page .fds-tool-media, .fmr-debadge-page .fds-compare {
            animation: fvs-in linear both; animation-timeline: view(); animation-range: entry 0% entry 45%;
        }
        .fmr-debadge-page .fds-tool-copy { animation: fvs-up linear both; animation-timeline: view(); animation-range: entry 5% entry 50%; }
    }
    .fmr-debadge-page .fds-compare-handle::after { animation: fvs-pulse 2.4s ease-in-out 3; }
}
@keyframes fvs-in { from { opacity: 0; transform: perspective(1400px) rotateY(var(--fvs-tilt, -6deg)) translateY(30px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes fvs-up { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
@keyframes fvs-pulse { 50% { box-shadow: 0 0 0 10px rgba(255, 47, 158, .12), 0 8px 24px rgba(0, 0, 0, .6); } }
.fmr-debadge-page .fds-tool--flip .fds-tool-media { --fvs-tilt: 6deg; }

/* ---------- responsive */
@media (max-width: 1100px) {
    .fmr-debadge-page .fds-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .fmr-debadge-page .fds-stats li:nth-child(4) { border-left: 0; }
    .fmr-debadge-page .fds-stats li:nth-child(n+4) { border-top: 1px solid var(--fds-line, rgba(255, 255, 255, .09)); }
    .fmr-debadge-page .fds-tool, .fmr-debadge-page .fds-tool--wide, .fmr-debadge-page .fds-tool--build { grid-template-columns: 1fr; }
    .fmr-debadge-page .fds-tool--flip .fds-tool-media { order: 0; }
    .fmr-debadge-page .fds-tool--wide .fds-tool-copy { order: 2; }
    .fmr-debadge-page .fds-plate-inset { right: 8px; }
    .fmr-debadge-page .fvs-two { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
    .fmr-debadge-page .fds-tools { padding-top: 64px; }
    .fmr-debadge-page .fds-tools::before { width: calc(100% - 32px); }
    .fmr-debadge-page .fds-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .fmr-debadge-page .fds-stats li:nth-child(n) { border-left: 0; border-top: 1px solid var(--fds-line, rgba(255, 255, 255, .09)); }
    .fmr-debadge-page .fds-stats li:nth-child(even) { border-left: 1px solid var(--fds-line, rgba(255, 255, 255, .09)); }
    .fmr-debadge-page .fds-stats li:nth-child(-n+2) { border-top: 0; }
    .fmr-debadge-page .fds-facts { grid-template-columns: 1fr; }
    .fmr-debadge-page .fds-facts li { display: grid; grid-template-columns: 96px minmax(0, 1fr); align-items: center; gap: 12px; }
    .fmr-debadge-page .fds-facts b { margin: 0; font-size: 24px; white-space: normal; }
    .fmr-debadge-page .fds-tool-copy > p { font-size: 15px; }
    .fmr-debadge-page .fds-plate-media { padding-bottom: 0; }
    .fmr-debadge-page .fds-plate-inset { display: none; }
    .fmr-debadge-page .fds-compare-handle::after { width: 38px; height: 38px; }
    .fmr-debadge-page .fvs-row { grid-template-columns: 1fr; gap: 4px; padding: 12px 16px; }
    .fmr-debadge-page .fvs-row--head span:last-child { display: none; }
    .fmr-debadge-page .fvs-two > div { padding: 22px 18px; }
    .fmr-debadge-page .fvs-price-note { padding: 18px; }
}