@font-face{font-family:'AntonV3';src:url('/public/assets/fonts/Anton-Regular.ttf') format('truetype');font-display:swap}
/* margin-top clears the site's fixed ~95px header, the same way .pt-bredwrap does on every
   other page. Without it the top of the hero sits underneath the navigation. */
.lto-hero{background:#29303D;color:#F5F6F8;padding:70px 0 60px;text-align:center;margin-top:95px}
.lto-hero h1{font-family:'Black Range Free',sans-serif;font-size:clamp(38px,6vw,66px);line-height:1;margin:0 0 16px;text-wrap:balance}
/* The photo hero carries its headline inside the artwork, so the page had no
   top-level heading at all whenever a hero image was uploaded - it lived only in
   the text fallback. This gives that branch a real heading for search engines and
   screen readers without drawing it over the photo. Clip rather than display:none
   or visibility:hidden, both of which take the text out of the accessibility tree
   too, which would defeat the point. The site stylesheet has no such utility, so
   it is page-scoped here like the rest of this page's CSS.
   (Deliberately no literal heading tag written in this comment: it would be
   counted by any tool that greps the rendered HTML for one.) */
.lto-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
    clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.lto-hero .kick{color:var(--primary, #FFFF00);font-size:12px;font-weight:700;letter-spacing:.24em;text-transform:uppercase;margin-bottom:14px}
.lto-hero p{max-width:60ch;margin:0 auto;color:#A7ABB3;line-height:1.65;font-size:16px}

/* ---- the photo hero's overlaid CTAs, placed as in the approved banner mock:
   lower left, above the feature strip. Sizes ride the viewport so the pair keeps
   its place in the artwork at any width. ---- */
.lto-hero--photo{position:relative}
.lto-hero-cta{position:absolute;left:6.6%;bottom:15.5%;display:flex;align-items:center;
    gap:clamp(10px,1.2vw,22px);line-height:1.2;font-size:16px}
.lto-cta-collection{display:inline-flex;align-items:center;gap:clamp(6px,0.7vw,12px);
    background:#FFF200;color:#111;border-radius:999px;
    padding:clamp(9px,1vw,19px) clamp(16px,1.8vw,34px);
    font-weight:800;font-size:clamp(11px,1vw,19px);letter-spacing:.06em;
    text-transform:uppercase;text-decoration:none;white-space:nowrap}
.lto-cta-collection svg{width:clamp(12px,1vw,19px);height:auto;flex:none}
/* A breath of the banner's yellow around the pair - a soft glow under the yellow
   pill, and the same hue warming the glass button's edge and icon. */
.lto-cta-collection{box-shadow:0 6px 26px rgba(255,242,0,.35)}
.lto-cta-collection:hover{color:#111;filter:brightness(1.05);
    box-shadow:0 6px 32px rgba(255,242,0,.5)}
.lto-cta-eligibility{display:inline-flex;align-items:center;gap:clamp(6px,0.7vw,12px);
    background:rgba(20,22,26,.35);color:#fff;border:1.5px solid rgba(255,242,0,.55);
    border-radius:999px;padding:clamp(9px,1vw,19px) clamp(16px,1.8vw,30px);
    font-weight:700;font-size:clamp(11px,1vw,19px);letter-spacing:.06em;
    text-transform:uppercase;text-decoration:none;white-space:nowrap}
.lto-cta-eligibility svg{width:clamp(14px,1.2vw,24px);height:auto;flex:none;color:#FFF200}
.lto-cta-eligibility:hover{color:#fff;background:rgba(20,22,26,.55);
    border-color:rgba(255,242,0,.85)}
@media (max-width:640px){
    /* On phones the banner is short and the overlaid pair covered the cars, so
       the buttons step OFF the artwork onto the navy band right under it. */
    .lto-hero-cta{position:static;justify-content:center;gap:8px;padding:12px 10px 16px}
    .lto-cta-collection,.lto-cta-eligibility{padding:9px 14px;font-size:11px}
}
/* On phones the header is shorter than the 77px the heroes clear, which left a
   white band above the photo. The photo hero instead starts at the very top and
   pads that clearance in its own navy - the same colour as the bar - so whatever
   the header's exact height, the strip above the photo reads as one dark piece. */
@media (max-width:767px){
    .lto-hero--photo{margin-top:0 !important;padding-top:77px !important;background:#29303D !important}
}
.lto-steps{display:flex;gap:18px;justify-content:center;flex-wrap:wrap;margin-top:34px}
.lto-step{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.09);border-radius:14px;padding:16px 20px;min-width:190px;text-align:left}
.lto-step b{display:block;color:var(--primary, #FFFF00);font-size:11px;letter-spacing:.16em;margin-bottom:5px}
.lto-step span{font-size:14px;color:#E7E9ED}
.lto-wrap{max-width:1220px;margin:0 auto;padding:52px 20px 80px}

/* ---- listing head ----
   Not a bare "3 cars available" line: an editorial block that gives the list a voice, with
   the live count kept as a quiet chip beside it. The sort form is byte-identical in
   behaviour - same GET, same select, same submit-on-change - only dressed to match. */
.lto-head{display:flex;align-items:flex-end;justify-content:space-between;gap:22px;
    flex-wrap:wrap;margin-bottom:30px}
.lto-head .kick{color:#9A9DA6;font-size:11.5px;font-weight:700;letter-spacing:.24em;
    text-transform:uppercase;margin-bottom:8px}
.lto-head h2{font-family:'Black Range Free',sans-serif;font-size:clamp(28px,3.4vw,42px);
    line-height:1.02;color:#0C0D10;margin:0 0 10px;text-transform:uppercase}
.lto-head .sub{color:#787D86;font-size:14.5px;margin:0 0 12px}
.lto-count{display:inline-flex;align-items:center;gap:7px;margin:0;color:#3C4048;
    font-size:13px;font-weight:600;background:#F3F4F7;border:1px solid #E7E9EE;
    border-radius:999px;padding:6px 14px}
.lto-count::before{content:"";width:7px;height:7px;border-radius:50%;
    background:var(--primary, #FFFF00);box-shadow:0 0 0 3px rgba(255,255,0,.18)}
.lto-count strong{color:#0C0D10}
.lto-sort{display:flex;align-items:center;gap:10px;margin:0}
.lto-sort label{margin:0;color:#787D86;font-size:12px;font-weight:700;letter-spacing:.08em;
    text-transform:uppercase}
/* The select wears the page's dark luxury tone rather than the platform's grey widget.
   Same element, same name, same onchange - the chrome is the only thing that changed. */
.lto-sort select{border:1.5px solid #16181D;border-radius:999px;padding:11px 40px 11px 18px;
    font-size:14px;font-weight:600;color:#F5F6F8;background-color:#16181D;cursor:pointer;
    appearance:none;transition:border-color .2s ease,box-shadow .2s ease;
    background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23FFFF00' stroke-width='1.8' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat:no-repeat;background-position:right 16px center}
.lto-sort select:focus{outline:none;border-color:var(--primary, #FFFF00);
    box-shadow:0 0 0 3px rgba(255,255,0,.22)}
.lto-sort button{border:1px solid #D8DCE3;border-radius:999px;padding:9px 16px;background:#fff;
    font-size:14px;cursor:pointer}

/* ---- grid ----
   min() rather than a bare 320px: on a 320px phone the 40px of wrapper padding leaves 280px,
   and a hard minimum forces the grid wider than the screen - the whole page then scrolls
   sideways, which looks like a broken layout rather than a narrow one. */
.lto-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(320px,100%),1fr));gap:26px}

/* ---- card ----
   The photo is the hero: it fills the top of the card over a dark studio gradient, with a
   quiet vignette so the car sits somewhere. Everything below is deliberately calm so the
   image and the price carry the card. */
.lto-card{position:relative;background:#fff;border:1px solid #E9EBF0;border-radius:20px;
    overflow:hidden;display:flex;flex-direction:column;
    box-shadow:0 1px 3px rgba(12,13,16,.06),
               0 14px 30px -12px rgba(12,13,16,.12);
    transition:transform .3s ease,box-shadow .3s ease,border-color .3s ease}
.lto-card:hover{transform:translateY(-5px);border-color:#DDE0E7;
    box-shadow:0 1px 3px rgba(12,13,16,.07),
               0 24px 44px -14px rgba(12,13,16,.22),
               0 44px 80px -24px rgba(12,13,16,.24)}
/* The wrapper carries the chip; the base .videogalry-playbtn rule is a full-cover
   dark overlay, so every declaration below exists to beat it into the small yellow
   disc the sports cards wear. */
.lto-mediaw{position:relative}
.lto-card .videogalry-playbtn{left:auto;top:auto;right:14px;bottom:12px;width:38px;height:38px;
    background:#FEFA04;border-radius:50%;line-height:normal;
    box-shadow:0 2px 10px rgba(0,0,0,.3);z-index:2}
.lto-card .videogalry-playbtn:hover{filter:brightness(1.04)}
.lto-card .videogalry-playbtn img{max-width:none;width:12px;height:auto;margin-left:3px}
.lto-media{position:relative;display:block;aspect-ratio:16/10;overflow:hidden;
    /* The same studio backdrop the sports cards stand on, so both listings share one
       photographic world; the flat colour paints first while it loads, and a faint
       shimmer plays until the lazy car image covers it - a loading state without a
       script. */
    background:#F0F0F0 url('/public/assets/images/card-v3-bg.webp') center/cover no-repeat}
.lto-media::before{content:"";position:absolute;inset:0;
    background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.35) 48%,transparent 62%);
    background-size:220% 100%;animation:lto-shimmer 1.8s ease-in-out infinite}
@keyframes lto-shimmer{from{background-position:130% 0}to{background-position:-70% 0}}
.lto-media img{position:relative;width:100%;height:100%;object-fit:cover;display:block;
    transition:transform .45s ease}
/* TWO TRIGGERS, one per kind of device, and never both at once - the same split the car
   cards use, so the whole site behaves one way.

   A mouse points at one card at a time, so hover answers the card you are actually looking
   at and reverses when you leave. A touch screen has no hover at all, so there the card
   entering view is the only moment available - which is why these cards, bound to :hover
   alone, sat perfectly still on a phone while every other card had started moving.

   Split on (hover: hover), not on width: a small laptop window still has a mouse and a
   large tablet still has not. .zoom-ready comes from utilities.js, so with no script the
   photo rests at its natural size; .in-view is shared with the car cards, which is why one
   observer serves both. */
@media (hover:hover){
    .lto-card:hover .lto-media img{transform:scale(1.05)}
}
@media (hover:none){
    .lto-card.zoom-ready .lto-media img{transition:transform .55s cubic-bezier(.22,.61,.36,1)}
    .lto-card.zoom-ready.in-view .lto-media img{transform:scale(1.05)}
}
@media (prefers-reduced-motion:reduce){
    .lto-card .lto-media img,
    .lto-card:hover .lto-media img,
    .lto-card.zoom-ready.in-view .lto-media img{transform:none;transition:none}
}
/* A soft vignette along the photo's bottom edge gives it depth and keeps the badge legible
   on bright photos; it never covers the car. */
.lto-media::after{content:"";position:absolute;inset:auto 0 0 0;height:38%;
    background:linear-gradient(180deg,transparent,rgba(10,11,14,.22));pointer-events:none}
/* SOLD: a big translucent word stamped diagonally across the whole photo. Chosen
   2026-09-24 from three candidates that rotated here for a week - a red corner ribbon
   and a red rubber-stamp seal were the others, and both are now deleted.

   85% white rather than solid: it has to be unmissable on a car that is still being
   shown off, not a sticker that hides it. Impact with no letter-spacing to speak of
   keeps the word dense enough to read over a busy photo, and the soft shadow stops it
   disappearing against a white car. clamp() so it scales with the card instead of
   overflowing on a phone. */
.lto-sold-stamp{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
    transform:rotate(-28deg);color:rgba(255,255,255,.85);
    letter-spacing:.05em;line-height:1;text-transform:uppercase;
    font-family:Impact,'Arial Black','Franklin Gothic Bold',sans-serif;font-weight:400;
    text-shadow:0 2px 14px rgba(0,0,0,.22);pointer-events:none;z-index:3;
    font-size:clamp(56px,7.2vw,96px)}
/* The term badge is real plan data, not decoration - the longest term this offer sells. */
.lto-badge{position:absolute;left:14px;bottom:12px;z-index:1;display:inline-flex;
    align-items:center;gap:6px;background:rgba(12,13,16,.66);backdrop-filter:blur(6px);
    color:#fff;font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
    border:1px solid rgba(255,255,255,.16);border-radius:999px;padding:6px 12px}
.lto-badge::before{content:"";width:6px;height:6px;border-radius:50%;
    background:var(--primary, #FFFF00)}

.lto-body{padding:20px 20px 22px;display:flex;flex-direction:column;flex:1}
.lto-year{color:#9A9DA6;font-size:11.5px;font-weight:700;letter-spacing:.14em;
    text-transform:uppercase}
.lto-name{font-family:'AntonV3',sans-serif;font-size:23px;font-weight:400;
    text-transform:uppercase;color:#0C0D10;margin:5px 0 13px;line-height:1.04;
    letter-spacing:.01em}
.lto-name a{color:inherit;text-decoration:none}
.lto-name a:hover{color:#0C0D10}

/* Spec chips: only facts the record actually holds - seats, transmission, plan count. */
.lto-chips{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:16px}
.lto-chip{display:inline-flex;align-items:center;gap:5px;border:1px solid #E7E9EE;
    background:#F8F9FB;border-radius:8px;padding:4px 10px;font-size:11.5px;font-weight:600;
    color:#3C4048}
.lto-chip svg{width:12px;height:12px;stroke:#0C0D10;stroke-width:1.7;fill:none;
    stroke-linecap:round;stroke-linejoin:round;flex:none}

/* The price block sits on its own hairline, and the figure is the loudest thing below the
   photo - tabular so neighbouring cards align digit for digit. */
.lto-pricewrap{border-top:1px solid #EEF0F4;padding-top:14px;margin-top:auto}
.lto-price{font-variant-numeric:tabular-nums;line-height:1}
.lto-price .from{display:block;color:#9A9DA6;font-size:11px;font-weight:700;
    letter-spacing:.14em;text-transform:uppercase;margin-bottom:5px}
.lto-price b{font-size:30px;font-weight:800;color:#0C0D10;letter-spacing:-.01em}
.lto-price .per{color:#787D86;font-size:13px;font-weight:500;margin-left:3px}
.lto-meta{color:#787D86;font-size:12.5px;margin:7px 0 16px}
.lto-meta b{color:#3C4048;font-weight:600}

.lto-cta{display:flex;align-items:center;justify-content:center;gap:9px;text-align:center;
    background:var(--primary, #FFFF00);color:#111;font-weight:700;font-size:15px;
    border-radius:999px;padding:13px 18px;text-decoration:none;
    box-shadow:0 2px 0 rgba(12,13,16,.08);
    transition:box-shadow .25s ease,filter .25s ease}
.lto-cta svg{width:15px;height:12px;stroke:#111;stroke-width:2.2;fill:none;
    stroke-linecap:round;stroke-linejoin:round;flex:none;transition:transform .25s ease}
.lto-cta:hover{color:#111;text-decoration:none;filter:brightness(1.03);
    box-shadow:0 6px 18px -4px rgba(255,255,0,.55),0 2px 0 rgba(12,13,16,.08)}
.lto-cta:hover svg{transform:translateX(4px)}
.lto-cta:focus-visible{outline:3px solid #0C0D10;outline-offset:2px}

/* ---- empty state, in the same voice as the hero ---- */
.lto-empty{text-align:center;background:#29303D;color:#E7E9ED;border-radius:24px;
    padding:64px 24px}
.lto-empty h2{font-family:'Black Range Free',sans-serif;font-size:clamp(24px,3vw,34px);
    text-transform:uppercase;color:#fff;margin-bottom:12px}
.lto-empty p{color:#A7ABB3;max-width:46ch;margin:0 auto}

@media (prefers-reduced-motion:reduce){
    .lto-card,.lto-media img,.lto-cta,.lto-cta svg{transition:none}
    .lto-card:hover{transform:none}
    .lto-card:hover .lto-media img{transform:none}
    .lto-media::before{animation:none}
}

/* Mobile last, so it wins the cascade against the equal-specificity rules above.
   767px is the site's own phone breakpoint - the same one where .pt-bredwrap drops its
   header clearance from 95px to 77px, because the mobile header is shorter. Matching it
   keeps this page level with every other page instead of leaving a gap under the nav. */
@media only screen and (max-width:767px){
    .lto-hero{margin-top:77px;padding:44px 0 38px}
    /* clamp() already shrinks the display face, but 6vw on a 360px screen is only 22px -
       too small for the one line that has to carry the page. */
    .lto-hero h1{font-size:clamp(30px,9vw,44px)}
    .lto-hero p{font-size:15px;padding:0 4px}
    .lto-hero .kick{letter-spacing:.18em}
    /* Full-width steps rather than three cramped columns: at 190px minimum they were
       wrapping into an uneven 2+1 that read as a mistake. */
    .lto-steps{gap:10px;margin-top:26px}
    .lto-step{min-width:0;width:100%;padding:13px 16px}
    .lto-wrap{padding:34px 16px 56px}
    .lto-grid{gap:18px}
    .lto-name{font-size:22px}
    .lto-price b{font-size:27px}
    .lto-body{padding:17px 16px 18px}
    /* The head stacks: title block, then a full-width sort that is comfortable to tap. */
    .lto-head{flex-direction:column;align-items:stretch;gap:14px;margin-bottom:22px}
    .lto-sort{justify-content:space-between}
    .lto-sort select{flex:1;min-width:0}
    /* The editorial section scales fluidly through clamp(), so almost nothing needs a
       breakpoint. What is left here is the handful of things clamp cannot express: the
       side gutter, and the card radius, which should shrink faster than its padding does
       or the corners start to look inflated against a 360px screen. */
    .lto-content{padding-left:16px;padding-right:16px}
    .lto-content .lto-block{border-radius:16px}
    .lto-content .cms-table-scroll{border-radius:12px}
    /* A phone cannot fit a wide table however it is styled, so let the columns tighten
       rather than forcing more of the row off-screen behind the scroll. */
    .lto-content table{font-size:14.5px}
}

/* ------------------------------------------------------------------ editorial content

   The prose the SEO team writes on the fleet record, styled to belong to THIS page rather
   than to the legacy .cntntstyle0* sections, which carry their own backgrounds and shape
   decorations built for the old page shell.

   It borrows the page's existing language on purpose: the display face and uppercase
   treatment from .lto-head h2, the yellow accent, the 20px card radius and the #E9EBF0
   hairline. The first version was generic - 800-weight system headings and a RED link
   colour on a site that is yellow and near-black - so it read as something pasted in from
   a different website. */
.lto-editorial{background:#F7F8FA;border-top:1px solid #ECEEF2}

/* THE CONTAINER MATCHES THE PAGE, THE PROSE MEASURE IS CAPPED SEPARATELY.

   An earlier version set the whole section to 68ch - about 600px - which is a good reading
   measure and completely wrong here: the car grid above spans 1220px, so on a desktop the
   text became a narrow strip floating in the middle of an empty band, and the section read
   as a phone layout that had wandered onto the wrong screen.

   So the container is the page's own 1220px and lines up with the cards, while the
   individual runs of text cap their own width further down. That keeps both things true -
   the section belongs to the page, and no line runs to 130 characters. */
.lto-content{max-width:1220px;margin:0 auto;
    padding:clamp(42px,4.4vw,74px) 20px clamp(50px,5vw,84px);
    color:#3A3F47;font-size:clamp(16px,0.4vw + 15px,18px);line-height:1.75}

/* The measure cap, applied to the runs of TEXT rather than to the container, and left
   aligned so everything starts on the same edge as the cards above. Headings are exempt -
   they are short, and letting them run full width is what makes the section feel wide.
   Tables, images and the block panels are exempt too; they are scanned, not read. */
.lto-content p,.lto-content ul,.lto-content ol,.lto-content blockquote{max-width:74ch}

/* EVERY RULE BELOW IS WRITTEN FOR ARBITRARY ADMIN CONTENT, NOT FOR THE TEXT THAT HAPPENS TO
   BE THERE TODAY. Whoever writes in that editor may use any heading level, any number of
   columns, tables with or without a header row, lists, quotes, images - and the section has
   to hold together for all of it. An earlier draft of this styled the FIRST TABLE ROW as a
   header and the LAST COLUMN as figures, which is a description of one particular table and
   would have mis-rendered the next one somebody wrote. */

/* Every level, not just h2/h3 - an editor offers h1..h6 and all of them will eventually be
   used. h1 is demoted to h2 before it reaches here (see App\Support\CmsContent) so the page
   keeps one top-level heading, but it is styled anyway in case that ever changes. */
/* AntonV3, not the 'Black Range Free' brush face the section headings use. That face is
   built for three or four words on a hero - at the length these headings actually run
   ("Performance Cars Available on a Lease to Own Plan") its hand-drawn baseline turns a
   sentence into a scrawl. Anton is the page's other display face, already loaded for the
   car names, and stays legible at any length. Slight positive tracking because Anton is
   condensed and sets tight in uppercase. */
.lto-content h1,.lto-content h2{font-family:'AntonV3','Anton',sans-serif;font-weight:400;
    font-size:clamp(26px,3vw,40px);line-height:1.12;letter-spacing:.012em;color:#0C0D10;
    text-transform:uppercase;margin:clamp(38px,3.6vw,60px) 0 clamp(14px,1.2vw,20px)}
.lto-content h3{font-size:clamp(19px,1.7vw,25px);line-height:1.28;color:#0C0D10;
    font-weight:800;margin:clamp(28px,2.4vw,40px) 0 12px}
.lto-content h4{font-size:clamp(17px,1.2vw,20px);line-height:1.35;margin:28px 0 10px;
    color:#0C0D10;font-weight:800}
.lto-content h5,.lto-content h6{font-size:15px;line-height:1.4;margin:26px 0 8px;color:#3A3F47;
    font-weight:700;text-transform:uppercase;letter-spacing:.08em}

/* :first-child on ANY element, so whatever opens the content or a block does not carry a
   top margin - the author may start with a paragraph, a table or an image, not a heading. */
.lto-content > :first-child,.lto-content .lto-block > :first-child{margin-top:0}

/* A short yellow rule under the top-level headings - the one piece of decoration, and it is
   the page's own accent rather than a new colour. */
.lto-content h1::after,.lto-content h2::after{content:"";display:block;width:54px;height:3px;
    border-radius:2px;background:var(--primary, #FFF200);margin-top:14px}

.lto-content p{margin:0 0 18px}
.lto-content ul,.lto-content ol{margin:0 0 20px;padding-left:20px}
.lto-content li{margin:0 0 9px;padding-left:4px}
.lto-content li::marker{color:#B9BDC5}
.lto-content strong,.lto-content b{color:#0C0D10;font-weight:700}
.lto-content hr{border:0;border-top:1px solid #E4E7EC;margin:34px 0}
.lto-content blockquote{margin:0 0 20px;padding:2px 0 2px 20px;
    border-left:3px solid var(--primary, #FFF200);color:#3A3F47;font-style:italic}
/* The editor can emit a bare <br> paragraph; collapse the gap rather than leaving a hole. */
.lto-content p:empty{margin:0}

/* Dark text with a yellow underline rather than a coloured link: on a near-black-and-yellow
   page, a red or blue link is the only thing of that colour anywhere on screen. */
.lto-content a{color:#0C0D10;text-decoration:none;
    box-shadow:inset 0 -2px 0 var(--primary, #FFF200);transition:box-shadow .15s}
.lto-content a:hover{color:#0C0D10;box-shadow:inset 0 -9px 0 var(--primary, #FFF200)}

.lto-content img{max-width:100%;height:auto;border-radius:16px;margin:8px 0 22px;
    border:1px solid #E9EBF0}
/* An image the author put inside a paragraph must not inherit the text baseline gap. */
.lto-content p > img:only-child{margin-bottom:4px}

/* Tables are wrapped by App\Support\CmsContent because a table cannot be narrower than its
   widest cell - unwrapped it pushes the WHOLE page sideways on a phone, not just itself.
   The wrapper confines that to the table.

   Allowed wider than the prose column: a table is scanned in columns, and squeezing it to
   reading width is what forces a scrollbar on desktop as well as mobile. */
.lto-content .cms-table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;
    margin:6px 0 30px;border:1px solid #E9EBF0;border-radius:16px;background:#fff;
    width:min(100%,940px)}
.lto-content table{width:100%;border-collapse:collapse;font-size:clamp(14.5px,1vw,16px);
    margin:0}
.lto-content th,.lto-content td{padding:clamp(11px,1.1vw,16px) clamp(14px,1.4vw,22px);
    border-bottom:1px solid #EEF0F4;text-align:left;vertical-align:top}
.lto-content tr:last-child > *{border-bottom:0}

/* The dark header row applies ONLY to real header cells - <th>, or a row inside <thead>.
   This editor emits a plain first <td> row for its header, so the author is asked to mark it
   up properly rather than the stylesheet guessing by position: a table whose first row is
   data (a two-column spec list, say) would otherwise have its first line of content styled
   as a heading. A table with no header simply renders as clean rows, which is correct. */
.lto-content thead th,.lto-content thead td,.lto-content tbody th{background:#16181D;
    color:#F5F6F8;font-weight:700;border-bottom:0}
.lto-content thead tr:first-child > *:first-child{border-top-left-radius:15px}
.lto-content thead tr:first-child > *:last-child{border-top-right-radius:15px}

/* Numerals line up in columns whatever the table's shape - applied to every cell rather than
   guessing which column holds the figures. Text cells are unaffected by tabular-nums. */
.lto-content td,.lto-content th{font-variant-numeric:tabular-nums}
.lto-content tbody tr:hover{background:#FAFBFC}
.lto-content thead tr:hover{background:#16181D}

/* Each numbered block is its own panel, matching the car cards above - white on the tinted
   band, same radius and hairline. A bare rule between sections read as an accident. */
.lto-content .lto-block{background:#fff;border:1px solid #E9EBF0;border-radius:20px;
    padding:clamp(24px,2.8vw,46px) clamp(20px,2.8vw,48px) clamp(10px,1.4vw,26px);
    margin-top:clamp(28px,3.2vw,52px)}