/* Commercial landings: the modules under the vehicles (inc/fleet_landing_view.php, templates/landing/).
   Tokens from fleet.css. The one loud moment is the road signs of the comparison; the rest stays quiet. */

/* hero of a landing: the illustration at full width, anchored to the bottom. Above it the sky carries on in its
   top colour, and that strip holds the texts, set as on the media kit: no pill, ink on the sky, one phrase in orange.
   Title, sentence and Trustpilot are one centred stack, on a soft light that lifts the sky behind them. */
.site-content .hero.hero--landing {
    --fl-hero-sky: #6ac3dc; /* top edge of the picture: no seam */
    --fl-hero-h: 780px; /* the same height on every desktop width: change it here */
    height: var(--fl-hero-h);
    max-height: none;
    padding-top: clamp(150px, calc(var(--fl-hero-h) / 2 - 25px - 14.2vw), 240px); /* halfway between the menu and the top of the volcano */
    background-color: var(--fl-hero-sky);
    background-image: var(--fl-hero);
    background-repeat: no-repeat;
    background-size: 100% auto;
    background-position: center calc(100% + clamp(0px, (100vw - 1440px) * .08, 40px)); /* wide screens: the volcano stays below the texts */
}
.site-content .hero.hero--landing::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 720px 230px at 50% calc(var(--fl-hero-h) / 2 + 40px - 14.2vw), rgba(255, 255, 255, .5), rgba(255, 255, 255, 0));
    pointer-events: none;
}
.site-content .hero--landing .hero-content.hero-title { top: 0; height: auto; max-height: none; transform: none; }
.site-content .hero--landing .hero-text { flex-direction: column; align-items: center; height: auto; text-align: center; }
.site-content .hero--landing .hero-text h1.fl-hero-title { margin: 0 0 14px; font-family: "Bubblegum Sans", cursive; font-weight: 400; font-size: clamp(56px, 5vw, 76px); line-height: 1.05; color: #14272c; text-wrap: balance; }
.fl-hero-title span { color: #f37720; white-space: nowrap; }
.site-content .hero--landing p.fl-hero-lead { max-width: 860px; margin: 0 0 14px; font-size: 19px; line-height: 1.4; color: #14272c; text-wrap: balance; }
.fl-hero-tp { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px 12px; color: #14272c; font-size: 16px; }
.fl-hero-tp .tp-row { display: inline-flex; align-items: center; gap: 8px; }
.fl-hero-tp .tp-link { display: inline-flex; }
.fl-hero-tp .tp-logo { display: block; width: 96px; height: 21px; filter: brightness(0) saturate(100%) invert(11%) sepia(14%) saturate(1200%) hue-rotate(149deg); } /* the file is white */
.fl-hero-tp .tp-score { font-family: "Bubblegum Sans", cursive; font-size: 24px; line-height: 1; }
.fl-hero-tp .tp-stars { display: inline-flex; gap: 2px; }
.fl-hero-tp .tp-stars svg { display: block; width: 20px; height: 20px; }
.fl-hero-tp .tp-text { font-weight: 700; }
.fl-hero-tp .tp-years { color: #f37720; font-family: "Bubblegum Sans", cursive; font-size: 20px; font-weight: 400; }
@media (max-width: 767px) { .fl-hero-tp .tp-years { color: #fff; } }
@media (max-width: 991px) {
    .site-content .hero.hero--landing { --fl-hero-h: 600px; padding-top: 140px; }
    .site-content .hero--landing .hero-text h1.fl-hero-title { font-size: 46px; }
}
/* very wide screens: the picture is taller than the site's 960px cap, so the volcano would climb into the texts */
@media (min-width: 2000px) {
    .site-content .hero.hero--landing { --fl-hero-h: 1120px; padding-top: 220px; }
}
/* phone: a strip of the picture, with the couple and the van in frame, under the texts */
@media (max-width: 767px) {
    .site-content .hero.hero--landing { --fl-hero-h: 540px; padding-top: 104px; background-size: auto 240px; } /* 104px: the texts 24px higher (Rasheed, 2026-11-10) */
    .site-content .hero.hero--landing::before { background: radial-gradient(ellipse 300px 170px at 50% 204px, rgba(255, 255, 255, .5), rgba(255, 255, 255, 0)); }
    .site-content .hero--landing .hero-text h1.fl-hero-title { margin-bottom: 12px; font-size: 38px; }
    .site-content .hero--landing p.fl-hero-lead { margin-bottom: 10px; font-size: 16px; }
    .fl-hero-tp { font-size: 14px; }
}

.fl {
    --fl-gap: 24px;
    --fl-note: #fff1e4;
    --fl-sign-orange: #f37720;
    --fl-sign-blue: #206c83;
    --fl-sign-green: #2f8f5b;
    --fl-post: #8a8275;
    background: #fffefb;
    color: var(--fleet-ink);
    font-family: "Cabin", sans-serif;
}
/* same width as the vehicle grid above */
.fl-wrap { max-width: 1360px; margin: 0 auto; padding: 0 15px; }
.fl-block { padding: 72px 0; } /* 144px between sections */
/* what belongs to one section stays together: a table with its cards, and the button under them */
.fl-block:has(+ .fl-block--joined) { padding-bottom: 40px; }
.fl-block--joined { padding-top: 0; padding-bottom: 40px; }
.fl-block--cta { padding: 0 0 72px; text-align: center; }
.fl-block--cta .fleet-card-cta { width: auto; min-width: 280px; }
.fl-block--cta .fl-title, .fl-block--cta .fl-lead { text-align: center; margin-inline: auto; } /* the closing block of the brand landings: heading and line over the button */
.fl-block--related { padding-bottom: 100px; }
.fl a:not(.fl-related-card):not(.fl-link):not(.fl-source):not(.fleet-pill):not(.btn) { color: var(--fleet-ink); text-decoration: underline; text-decoration-color: var(--fleet-accent); text-underline-offset: 3px; }
/* a link in the text of a «who is traveling» panel sits on the dark photo gradient: white, not ink (the same :not() chain, so it outranks the rule above) */
.fl .fl-pick-body p a:not(.fl-related-card):not(.fl-link):not(.fl-source):not(.fleet-pill):not(.btn) { color: #fff; }

.fl ul { margin: 0; padding: 0; list-style: none; }
.fl li::before { content: none; }
.fl h2.fl-title { margin: 0 0 28px; font-family: "Bubblegum Sans", cursive; font-weight: 400; font-size: clamp(32px, 4vw, 46px); line-height: 1.08; color: var(--fleet-ink); text-align: left; }
.fl .fl-lead { max-width: 760px; margin: -14px 0 28px; font-size: 18px; color: var(--fleet-muted); }
.fl h3 { margin: 0; font-family: "Bubblegum Sans", cursive; font-weight: 400; font-size: 26px; line-height: 1.1; color: var(--fleet-ink); }
.fl p { margin: 0; font-size: 17px; line-height: 1.5; color: var(--fleet-ink); }

.fl-icon { display: inline-flex; width: 30px; height: 30px; color: var(--fleet-accent); }
.fl-icon svg { width: 100%; height: 100%; }
.fl-price { font-weight: 700; white-space: nowrap; }

/* intro: a few lines, no heading */
.fl-block--intro { padding: 0 0 72px; } /* close to the vehicles, away from the next section */
.fl-block--intro p { max-width: 860px; font-size: 21px; line-height: 1.5; }
/* panoramic photo: the text sets the row's height and the photo fills it, whatever the length of the text */
.fl-intro--image { display: grid; grid-template-columns: 5fr 7fr; gap: 48px; align-items: stretch; }
.fl-intro-img { position: relative; min-height: 220px; overflow: hidden; border-radius: 30px; }
.fl-intro-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 54%; }

/* callout */
.fl p.fl-note { margin-top: 20px; padding: 14px 20px; border-radius: 16px; background: var(--fl-note); font-size: 16px; }

/* warning: a yellow road sign on its post, planted on the bottom edge of the card */
.fl-warning { display: grid; grid-template-columns: auto 1fr; gap: 32px; align-items: center; margin-top: 24px; padding: 22px 36px 0; border: 2px solid var(--fleet-line); border-radius: 30px; background: #fff; }
.fl-warning > div { padding-bottom: 22px; }
.fl-warning-sign { position: relative; display: block; align-self: end; padding-bottom: 34px; }
.fl-warning-sign::after { content: ""; position: absolute; left: 50%; bottom: 0; width: 10px; height: 36px; margin-left: -5px; background: var(--fl-post); }
.fl p.fl-warning-title { margin-bottom: 2px; font-family: "Bubblegum Sans", cursive; font-size: 30px; line-height: 1.1; }
.fl-warning--links { grid-template-columns: auto minmax(0, 1fr) auto; }
.fl .fl-sources { display: flex; gap: 12px; padding: 0 0 22px; }
.fl-sources li { flex: 1 1 0; min-width: 0; }
.fl-source { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; width: 190px; height: 100%; padding: 12px 14px; border: 2px solid var(--fleet-line); border-radius: 20px; background: #fff; color: var(--fleet-ink); font-size: 14px; line-height: 1.25; text-align: center; text-decoration: none; }
.fl-source::after { border-radius: 20px; }
.fl-source b { display: block; font-size: 16px; }
.fl-source-logo { display: flex; align-items: center; justify-content: center; max-width: 100%; height: 44px; }
.fl-source-logo img { display: block; width: auto; max-width: 100%; max-height: 44px; }
.fl-source:focus-visible { outline: 3px solid var(--fleet-ink); outline-offset: 2px; }

/* text link with an arrow: always a descriptive anchor to a listing */
.fl-link { display: inline-flex; gap: 6px; font-weight: 700; color: var(--fleet-accent); text-decoration: none; }
.fl-link:focus-visible, .fl summary:focus-visible, .fl-related-card:focus-visible { outline: 3px solid var(--fleet-ink); outline-offset: 2px; }
@media (hover: hover) { .fl-link:hover { color: #d9650f; text-decoration: underline; } }

/* cards */
.fl-features { display: flex; flex-wrap: wrap; gap: var(--fl-gap); }
.fl-feature { flex: 1 1 calc(33.333% - var(--fl-gap)); min-width: 260px; display: flex; flex-direction: column; gap: 10px; padding: 26px 28px; border: 2px solid var(--fleet-line); border-radius: 30px; background: #fff; }
.fl p.fl-why { margin-top: auto; padding-top: 12px; border-top: 2px dashed var(--fleet-line); font-weight: 700; }
.fl-pick { display: grid; grid-template-columns: 330px minmax(0, 1fr); gap: 24px; }
.fl-pick-tabs { display: grid; grid-auto-rows: 1fr; gap: 8px; }
.fl-pick-tabs button { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 22px; border: 2px solid var(--fleet-line); border-radius: 20px; background: #fff; color: var(--fleet-ink); font: 700 17px/1.2 "Cabin", sans-serif; text-align: left; cursor: pointer; }
.fl-pick-tabs button::after { border-radius: 20px; }
.fl-pick-tabs button span { opacity: 0; }
.fl-pick-tabs button[aria-selected="true"] { border-color: var(--fleet-accent); background: var(--fleet-accent); color: #fff; }
.fl-pick-tabs button[aria-selected="true"] span { opacity: 1; }
.fl-pick-tabs button:focus-visible { outline: 3px solid var(--fleet-ink); outline-offset: 2px; }
.fl-pick-stage { position: relative; min-height: 540px; }
.fl-pick-panel { position: absolute; inset: 0; display: flex; flex-direction: column; overflow: hidden; border-radius: 30px; background: var(--fleet-ink); }
.fl-pick-panel[hidden] { display: none; }
/* the photo sits above the text, never under it: the vehicle is usually in the lower half of the picture */
.fl-pick-panel > img { flex: 1 1 0; min-height: 0; width: 100%; object-fit: cover; object-position: 50% 80%; }
.fl-pick-body { display: grid; justify-items: start; gap: 8px; padding: 22px 32px 28px; background: var(--fleet-ink); }
.fl .fl-pick-body p { max-width: 62ch; color: #fff; font-size: 17px; line-height: 1.45; }
.fl .fl-pick-body p.fl-pick-tag { font-size: 15px; font-weight: 700; line-height: 1.2; }
.fl .fl-pick-body .fl-pick-name { font-family: "Bubblegum Sans", cursive; font-size: 40px; font-weight: 400; line-height: 1.08; color: #fff; }
.fl-pick-name span { font-size: 26px; opacity: .75; }
/* each price sits beside its own button: price and button read as one unit, and a model without a price just has less beside it */
.fl-pick-ctas { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 36px; width: 100%; margin-top: 10px; }
.fl-pick-cta { display: flex; align-items: center; gap: 14px; min-width: 0; }
.fl-pick-cta .fleet-card-cta.btn { flex: none; width: auto; min-width: 150px; margin: 0; padding: 10px 28px; font-size: 16px; line-height: 1.2; white-space: nowrap; }
.fl .fl-pick-body p.fl-pick-from { font-size: 14px; line-height: 1.25; white-space: nowrap; text-align: left; }
.fl-pick-from > span:first-child { display: block; }
.fl-pick-from b { font-size: 17px; white-space: nowrap; }
/* desktop: the photo fills the whole panel and the text sits on it, over a gradient of the ink colour (#14272c) that
   rises from the bottom so the white text always reads (Rasheed, 2026-11-09). Phones and tablets keep photo-then-text. */
@media (min-width: 992px) {
    .fl-pick-panel { position: relative; inset: auto; min-height: 540px; justify-content: flex-end; } /* grows when a card lists many models, instead of cutting its text */
    .fl-pick-panel > img { position: absolute; inset: 0; height: 100%; }
    .fl-pick-body { position: relative; padding-top: 120px; background: linear-gradient(to top, rgba(20, 39, 44, .94) 0%, rgba(20, 39, 44, .82) 55%, rgba(20, 39, 44, 0) 100%); }
}
@media (prefers-reduced-motion: no-preference) {
    .fl-pick-panel { animation: fl-pick-in .3s ease; }
    @keyframes fl-pick-in { from { opacity: 0; } }
}
.fl-points li { position: relative; padding-left: 18px; font-size: 16px; line-height: 1.45; }
.fl-points li + li { margin-top: 4px; }
.fl .fl-points li::before { content: ""; position: absolute; left: 2px; top: .55em; width: 7px; height: 7px; border-radius: 50%; background: var(--fleet-accent); }

/* seasons */
/* subgrid lines the labels up across the cards, however long each text runs */
.fl-seasons { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: auto auto auto; gap: 0 var(--fl-gap); }
.fl-season { display: grid; grid-row: span 3; grid-template-rows: subgrid; overflow: hidden; border: 2px solid var(--fleet-line); border-radius: 30px; background: #fff; }
.fl-season-photo { position: relative; display: flex; align-items: flex-end; height: 340px; background: var(--fleet-ink); }
.fl-season-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.fl-season-photo header { position: relative; width: 100%; padding: 64px 26px 18px; background: linear-gradient(to top, rgba(20, 39, 44, .8), rgba(20, 39, 44, 0)); }
.fl .fl-season-photo h3 { font-family: "Bubblegum Sans", cursive; font-size: 38px; font-weight: 400; line-height: 1.08; color: #fff; }
.fl .fl-season-photo p { margin-top: 2px; font-size: 15px; font-weight: 700; line-height: 1.2; color: #fff; }
.fl-season-text { grid-row: 2 / span 2; display: grid; grid-template-rows: subgrid; padding: 20px 26px 24px; }
.fl-season-text dl { margin: 0; }
.fl-season-text dl + dl { margin-top: 14px; }
.fl-season-text dt { font-size: 15px; font-weight: 700; line-height: 1.3; }
.fl-season-text dd { margin: 2px 0 0; font-size: 16px; line-height: 1.45; }

/* tables */
.fl-table { width: 100%; border: 2px solid var(--fleet-line); border-radius: 30px; border-collapse: separate; border-spacing: 0; overflow: hidden; background: #fff; }
.fl-table th, .fl-table td { padding: 14px 18px; font-size: 16px; line-height: 1.35; text-align: left; vertical-align: top; }
.fl-table thead th { background: var(--fleet-soft); font-size: 14px; font-weight: 700; color: var(--fleet-muted); white-space: nowrap; }
.fl-table tbody th { font-weight: 700; color: var(--fleet-ink); }
.fl-table tbody tr + tr > * { border-top: 1px solid #e3e9ec; }

/* the table's visual cells: vehicle photo beside the name, seat and bed icons, a chip for the heating */
.fl-table--photos tbody th, .fl-table--photos tbody td { vertical-align: middle; }
.fl-model { display: flex; align-items: center; gap: 14px; }
.fl-model img { flex: 0 0 96px; width: 96px; height: 58px; object-fit: contain; }
.fl-model img[src*="icon-van"] { padding: 8px; opacity: .55; } /* placeholder: a model without a photo in this database */
.fl-seats { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.fl-seats b { font-family: "Bubblegum Sans", cursive; font-size: 24px; font-weight: 400; line-height: 1; }
.fl-seats img + b { margin-left: 8px; }
.fl-seats img:last-child { width: 28px; height: auto; }
.fl-chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px 5px 8px; border-radius: 40px; font-size: 14px; font-weight: 700; line-height: 1.2; }
.fl-chip .fl-icon { flex: 0 0 18px; width: 18px; height: 18px; color: inherit; }
.fl-chip--webasto { background: var(--fl-note); color: #b4500f; }
.fl-chip--plug { background: #e6f3f6; color: #206c83; }
.fl-chip--dual { background: #e8f4ec; color: #24704a; }
.fl-chip--battery { background: #eef0fa; color: #47528f; }
.fl-chip--none { background: var(--fleet-soft); color: var(--fleet-muted); }

.fl-people, .fl-people-fit, .fl-people-snug { display: inline-flex; align-items: flex-end; }
.fl-people { gap: 14px; white-space: nowrap; }
.fl-people .fl-icon { width: 22px; height: 22px; margin-right: -3px; color: var(--fleet-ink); }
.fl-people .fl-icon--kid { width: 16px; height: 16px; margin-left: 2px; color: var(--fleet-accent); }
.fl-people-snug { padding-left: 14px; border-left: 1px solid #e3e9ec; }
.fl-people-snug .fl-icon { width: 18px; height: 18px; color: var(--fleet-muted); }
.fl-people-snug b { margin-left: 8px; font-size: 14px; font-weight: 700; line-height: 18px; color: var(--fleet-muted); }

/* guide under the table: what each chip means */
.fl-legend { display: flex; flex-wrap: wrap; gap: 8px 28px; margin: 16px 0 0; }
.fl-legend > div { display: flex; align-items: center; gap: 8px; }
.fl-legend dt { font-weight: 400; }
.fl-legend dt.fl-people { gap: 0; }
.fl-legend .fl-icon--kid { margin-left: 0; }
.fl-legend dd { margin: 0; font-size: 15px; color: var(--fleet-muted); }

/* in / cm: every measure carries both and shows the one chosen, inches by default (assets/js/fleet.js sets data-units on .fl) */
.fl [data-unit="cm"], .fl[data-units="cm"] [data-unit="in"] { display: none; }
.fl[data-units="cm"] [data-unit="cm"] { display: inline; }
.fl-units { display: inline-flex; margin-left: 8px; padding: 2px; border-radius: 40px; background: #fff; box-shadow: inset 0 0 0 1px var(--fleet-line); vertical-align: middle; }
.fl-units button { min-width: 30px; padding: 2px 8px; border: 0; border-radius: 40px; background: transparent; color: var(--fleet-muted); font: 700 13px/1.3 "Cabin", sans-serif; cursor: pointer; }
.fl-units button[aria-pressed="true"] { background: var(--fleet-ink); color: #fff; }
.fl-units button:focus-visible { outline: 2px solid var(--fleet-accent); outline-offset: 1px; }

/* comparison: each option under its road sign, as the signs of the About page */
.fl-compare { table-layout: fixed; overflow: visible; border: 0; background: transparent; }
.fl-compare thead td, .fl-compare thead th { padding: 0 12px 26px; background: transparent; white-space: normal; text-align: center; vertical-align: bottom; }
.fl-compare thead th { position: relative; }
.fl-compare thead th::after { content: ""; position: absolute; left: 50%; bottom: 0; width: 10px; height: 26px; margin-left: -5px; background: var(--fl-post); }
.fl-compare tbody { background: #fff; }
.fl-compare tbody th { width: 22%; }
.fl-compare tbody td { text-align: center; }
.fl-compare tbody td:nth-child(2) { background: var(--fl-note); }
@media (min-width: 768px) {
    .fl-compare tbody tr:first-child > * { border-top: 2px solid var(--fleet-line); }
    .fl-compare tbody tr:last-child > * { border-bottom: 2px solid var(--fleet-line); }
    .fl-compare tbody tr > :first-child { border-left: 2px solid var(--fleet-line); }
    .fl-compare tbody tr > :last-child { border-right: 2px solid var(--fleet-line); }
    .fl-compare tbody tr:first-child > :first-child { border-top-left-radius: 30px; }
    .fl-compare tbody tr:first-child > :last-child { border-top-right-radius: 30px; }
    .fl-compare tbody tr:last-child > :first-child { border-bottom-left-radius: 30px; }
    .fl-compare tbody tr:last-child > :last-child { border-bottom-right-radius: 30px; }
}
.fl-sign { display: inline-block; padding: 12px 22px; border: 3px solid #fff; border-radius: 12px; box-shadow: 0 0 0 2px rgba(20, 39, 44, .18); color: #fff; font-family: "Bubblegum Sans", cursive; font-weight: 400; font-size: 26px; line-height: 1.05; }
.fl-sign--yellow { background: #f3c13c; color: var(--fleet-ink); transform: rotate(-2deg); }
.fl-sign--orange { background: var(--fl-sign-orange); transform: rotate(-1.5deg); }
.fl-sign--blue { background: var(--fl-sign-blue); transform: rotate(1.5deg); }
.fl-sign--green { background: var(--fl-sign-green); transform: rotate(-1deg); }
.fl-mark { display: inline-block; width: 12px; height: 12px; margin-right: 8px; border-radius: 50%; background: #c8452c; }
.fl-mark--yes { background: var(--fl-sign-green); }
/* the fixed table gives every column the same width, so equal tracks keep each button under its column */
.fl-compare-foot { display: grid; grid-template-columns: repeat(var(--fl-tracks), minmax(0, 1fr)); align-items: center; margin-top: 24px; }
.fl-compare-foot p { grid-column: 1 / var(--fl-end); }
.fl-compare-cta { grid-column: var(--fl-col); }
.fl-compare-foot p { padding-right: 24px; }
.fl-compare-cta { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 0 10px; min-width: 0; text-align: center; }
.fl-compare-lead { color: var(--fleet-muted); font-size: 15px; line-height: 1.3; }
.fl-compare-cta .fleet-pill { padding: 13px clamp(20px, 2.7vw, 34px); }

/* FAQs */
.fl-faqs { display: grid; gap: 10px; }
@media (min-width: 992px) {
    .fl-block--faq .fl-wrap { display: grid; grid-template-columns: 4fr 8fr; gap: 24px; align-items: start; }
}
.fl-faq { border: 2px solid var(--fleet-line); border-radius: 20px; background: #fff; }
.fl-faq summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 20px; font-size: 18px; font-weight: 700; list-style: none; cursor: pointer; border-radius: 18px; }
.fl-faq summary::-webkit-details-marker { display: none; }
.fl-faq::after { border-radius: 20px; }
.fl-faq-plus { position: relative; flex: 0 0 auto; width: 28px; height: 28px; border-radius: 50%; background: var(--fl-note); transition: background-color .3s ease; }
.fl-faq-plus::before, .fl-faq-plus::after { content: ""; position: absolute; top: 50%; left: 50%; width: 12px; height: 2px; background: var(--fleet-accent); transform: translate(-50%, -50%); transition: transform .3s cubic-bezier(.22, 1, .36, 1), background-color .3s ease; }
.fl-faq-plus::after { transform: translate(-50%, -50%) rotate(90deg); }
/* is-closing: the panel is still animating shut, so the icon can already answer the click */
.fl-faq[open]:not(.is-closing) .fl-faq-plus { background: var(--fleet-accent); }
.fl-faq[open]:not(.is-closing) .fl-faq-plus::before, .fl-faq[open]:not(.is-closing) .fl-faq-plus::after { background: #fff; }
.fl-faq[open]:not(.is-closing) .fl-faq-plus::after { transform: translate(-50%, -50%); }
.fl .fl-faq-a p { padding: 0 20px 18px; } /* on the text, not the panel: the panel animates down to a height of 0 */

/* related listings */
.fl-related { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 18px; }
.fl-related-card.fleet-ring::after { border-radius: 24px; }
.fl-related-card { display: flex; flex-direction: column; gap: 10px; height: 100%; padding: 10px 10px 16px; border: 2px solid var(--fleet-line); border-radius: 24px; background: #fff; color: var(--fleet-ink); text-decoration: none; }
.fl-related-card img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 16px; }
.fl-related-card strong { display: flex; justify-content: space-between; gap: 8px; padding: 0 6px; font-size: 17px; line-height: 1.25; color: var(--fleet-ink); }
.fl-related-card strong span { color: var(--fleet-accent); }
.fl-related-card > span { padding: 0 6px; font-size: 15px; color: var(--fleet-muted); }

@media (prefers-reduced-motion: reduce) { .fl-faq-plus, .fl-faq-plus::before, .fl-faq-plus::after { transition: none; } }

@media (max-width: 991px) {
    .fl-intro--image { grid-template-columns: 1fr; gap: 24px; }
    .fl-intro-img { min-height: 0; aspect-ratio: 16 / 7; }
    .fl-warning--links { grid-template-columns: auto minmax(0, 1fr); }
    .fl .fl-sources { grid-column: 1 / -1; }
    .fl-source { width: 100%; }
    .fl-compare-cta { padding: 0 4px; }
    .fl-compare-cta .fleet-pill { padding: 12px 16px; font-size: 16px; text-align: center; }
    .fl-seasons { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; gap: var(--fl-gap); }
    .fl-season { grid-row: auto; display: block; }
    .fl-season-text { display: block; }
    .fl-sign { padding: 10px 14px; font-size: 21px; }
}
@media (max-width: 767px) {
    .fl-block { padding: 48px 0; }
    .fl-block:has(+ .fl-block--joined), .fl-block--joined { padding-bottom: 28px; }
    .fl-block--joined { padding-top: 0; }
    .fl-block--cta { padding: 0 0 48px; }
    .fl-block--intro { padding: 0 0 48px; }
    .fl-warning { grid-template-columns: 1fr; gap: 12px; padding: 22px 22px 0; }
    .fl-warning-sign { order: 2; justify-self: end; margin-right: 8px; padding-bottom: 26px; }
    .fl-warning-sign::after { height: 28px; }
    .fl-warning > div { padding-bottom: 0; }
    .fl-warning--links { grid-template-columns: minmax(0, 1fr); }
    .fl .fl-sources { grid-column: auto; padding-bottom: 0; }
    .fl-block--related { padding-bottom: 64px; }
    .fl-block--intro p { font-size: 19px; }
    .fl-feature { padding: 22px; }
    .fl-season { border-radius: 24px; }
    .fl-season-photo { height: 240px; }
    .fl-season-photo header { padding: 56px 20px 14px; }
    .fl .fl-season-photo h3 { font-size: 32px; }
    .fl-season-text { padding: 16px 20px 20px; }
    .fl-related { gap: 12px; }

    /* comparison: the signs in a row, then each row as a card with the value under its option */
    .fl-compare-foot { grid-template-columns: minmax(0, 1fr); gap: 10px; }
    .fl-compare-foot p { grid-column: auto; margin-bottom: 6px; padding-right: 0; }
    .fl-compare-cta { grid-column: auto; padding: 0; }
    .fl-compare-cta .fleet-pill { width: 100%; justify-content: center; }
    .fl-compare, .fl-compare tbody, .fl-compare tbody tr, .fl-compare tbody th, .fl-compare tbody td, .fl-compare thead { display: block; width: auto; }
    .fl-compare thead tr { display: flex; gap: 6px; }
    .fl-compare thead td { display: none; }
    .fl-compare thead th { flex: 1 1 0; display: flex; min-width: 0; padding: 0 0 16px; } /* the row stretches the signs to one height, so each one reaches its post */
    .fl-compare thead th::after { height: 16px; }
    .fl-sign { display: flex; align-items: center; justify-content: center; width: 100%; padding: 8px 6px; border-width: 2px; border-radius: 10px; font-size: 17px; }
    .fl-compare tbody { background: transparent; }
    .fl-compare tbody tr { margin-bottom: 10px; padding: 14px 18px; border: 2px solid var(--fleet-line); border-radius: 24px; background: #fff; }
    .fl-compare tbody tr > th { padding: 0 0 6px; border: 0; font-size: 18px; }
    .fl-compare tbody td { display: flex; justify-content: space-between; gap: 16px; padding: 6px 0; border-top: 1px solid #e3e9ec; text-align: right; }
    .fl-compare tbody td::before { content: attr(data-label); flex: 0 0 42%; font-size: 14px; font-weight: 700; color: var(--fleet-muted); text-align: left; }
    .fl-compare tbody td:nth-child(2) { background: transparent; }
}

/* below this the photo needs the whole width: the travelers become a row that scrolls */
@media (max-width: 991px) {
    .fl-pick { grid-template-columns: minmax(0, 1fr); gap: 12px; }
    .fl-pick-tabs { display: flex; overflow-x: auto; padding: 4px 2px; scrollbar-width: none; }
    .fl-pick-tabs::-webkit-scrollbar { display: none; }
    .fl-pick-tabs button { flex: 0 0 auto; padding: 10px 16px; font-size: 15px; }
    .fl-pick-tabs button span { display: none; }
    .fl-pick-stage { min-height: 0; }
    .fl-pick-panel { position: relative; inset: auto; display: flex; flex-direction: column; justify-content: flex-end; min-height: 500px; }

    /* models table: 8 rows read better side by side, so it scrolls with the model name fixed */
    .fl-scroll { position: relative; overflow-x: auto; border: 2px solid var(--fleet-line); border-radius: 24px; background: #fff; }
    .fl-scroll .fl-table { min-width: 920px; overflow: visible; border: 0; border-radius: 0; } /* overflow: the first column sticks to .fl-scroll, not to the table */
    .fl-model { flex-direction: column; align-items: flex-start; gap: 6px; }
    .fl-model img { flex: none; width: 72px; height: 44px; }
    .fl-scroll tbody th, .fl-scroll tbody td { padding-top: 10px; padding-bottom: 10px; }
    .fl-scroll th:first-child { position: sticky; left: 0; z-index: 1; width: 150px; background: #fff; box-shadow: 1px 0 0 #e3e9ec; }
    .fl-scroll thead th:first-child { background: var(--fleet-soft); }
}
@media (max-width: 767px) {
    .fl-pick-panel { min-height: 520px; border-radius: 24px; }
    .fl-pick-body { padding: 18px 20px 20px; }
    .fl .fl-pick-body p { font-size: 16px; }
    .fl .fl-pick-body .fl-pick-name { font-size: 32px; }
    .fl-pick-name span { font-size: 22px; }
    .fl-pick-ctas, .fl-pick-cta { width: 100%; }
    .fl-pick-body { grid-template-columns: minmax(0, 1fr); } /* a long button label must not widen the text beyond the card */
    .fl-pick-cta { flex-wrap: wrap; gap: 10px; }
    .fl-pick-cta .fleet-card-cta.btn { flex: 1 1 100%; min-width: 0; padding: 10px 12px; white-space: normal; }
    .fl .fl-pick-body p.fl-pick-from { white-space: normal; }
    .fl-pick-from > span:first-child { display: inline; }
    .fl-pick-tabs { margin-inline: -15px; padding-inline: 15px; scroll-padding-inline: 15px; } /* the row runs to the screen edge */
}