:root {
    --primary: #0d9488;
    --primary-light: #2dd4bf;
    --accent: #f59e0b;
    --dark: #0f172a;
    --light: #f8fafc;

    /* Per-site accent: remap all teal-* utility classes to the site's colour family. */
    --color-teal-50:  oklch(98.4% .014 180.72);
    --color-teal-100: oklch(95.3% .051 180.801);
    --color-teal-200: oklch(91% .096 180.426);
    --color-teal-300: oklch(85.5% .138 181.071);
    --color-teal-400: oklch(77.7% .152 181.912);
    --color-teal-500: oklch(70.4% .14 182.503);
    --color-teal-600: oklch(60% .118 184.704);
    --color-teal-700: oklch(51.1% .096 186.391);
    --color-teal-800: oklch(43.7% .078 188.216);
    --color-teal-900: oklch(38.6% .063 188.416);
    --color-teal-950: oklch(27.7% .046 192.524);

    /* Per-site corner radius personality (overrides Tailwind radius utilities site-wide). */
    --radius-lg: 0.25rem;
    --radius-xl: 0.375rem;
    --radius-2xl: 0.5rem;
    --radius-3xl: 0.75rem;
}
body {
    font-family: 'Syne', system-ui, -apple-system, sans-serif;
    color: #334155;
    line-height: 1.6;
}
.hero-gradient {
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.88) 0%, rgba(13, 148, 136, 0.75) 100%);
}
.glass-card {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.2);
}
.feature-icon {
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 16px;
    background: linear-gradient(135deg, var(--primary), var(--primary-light));
    color: white;
    font-size: 22px;
}
.btn-primary {
    background: linear-gradient(135deg, var(--primary), var(--primary-light));
    color: white;
    padding: 14px 32px;
    border-radius: 12px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: all 0.3s ease;
    border: none;
    cursor: pointer;
}
.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 32px -8px rgba(13, 148, 136, 0.4);
}
.section-title {
    font-size: 2.25rem;
    font-weight: 800;
    color: var(--dark);
    line-height: 1.2;
}
@media (max-width: 768px) {
    .section-title { font-size: 1.75rem; }
}
.car-card {
    transition: all 0.3s ease;
    border: 1px solid #e2e8f0;
}
.car-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 48px -12px rgba(0, 0, 0, 0.12);
    border-color: var(--primary-light);
}
.price-tag {
    background: linear-gradient(135deg, var(--primary), var(--primary-light));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.testimonial-card {
    background: white;
    border-radius: 20px;
    padding: 32px;
    box-shadow: 0 4px 24px -4px rgba(0, 0, 0, 0.06);
}
.footer-link {
    color: #94a3b8;
    transition: color 0.2s;
}
.footer-link:hover {
    color: white;
}
[x-cloak] { display: none !important; }
.site-logo {
    height: 52px;
    max-height: 52px;
    width: auto;
    max-width: 200px;
    object-fit: contain;
    display: block;
}
.search-cigarette,
.highlight-container,
.vehicles-grid,
.search__buttons,
.search__results {
    display: none !important;
}
.landing-hero { background: #1e293b; color: #fff; padding: 4rem 2rem; text-align: center; }
.landing-hero h1 { margin: 0 0 1rem; font-size: 2.5rem; }
.landing-hero p { margin: 0; opacity: 0.9; }
.landing-content { max-width: 800px; margin: 2rem auto; padding: 0 2rem; }
.landing-nav ul { list-style: none; padding: 1rem 2rem; margin: 0; display: flex; gap: 1rem; background: #f8fafc; border-bottom: 1px solid #e2e8f0; }
.landing-nav a { text-decoration: none; color: var(--primary); font-weight: 500; }
.landing-footer { text-align: center; padding: 2rem; color: #64748b; border-top: 1px solid #e2e8f0; }

/* ─── Nav responsive breakpoints ─────────────────────────────────────── */
/* Applies to the `classic` header variant only. Every other nav-* variant ships its own
   breakpoints inside its own scoped <style> block. */
.nav-container { width: 100%; }   /* burger visible → full width */
.nav-logo { display: flex; }
/* Desktop menu: hidden below 1100px */
.nav-menu { display: none; }
/* Contact info block: hidden below 1500px */
.nav-info { display: none; }
/* Burger: visible below 1100px. 44px is the minimum comfortable tap target and this is the
   ONLY nav control on a phone, so it is sized explicitly rather than left to icon + padding
   (which came out at 34px). */
.nav-burger { display: inline-flex; align-items: center; justify-content: center;
              min-width: 44px; min-height: 44px; }
/* Mobile dropdown: hidden below 1100px (shown via Alpine x-show) */

@media (min-width: 1100px) {
    .nav-container { width: max-content; } /* burger hidden → shrink to content */
    .nav-menu { display: flex; }
    .nav-burger { display: none; }
    .nav-mobile-panel { display: none !important; }
    /* The logo used to be display:none here, to buy room for a long translated menu between
       1100 and 1300px. That blanked the brand at 1280, one of the most common laptop widths,
       and removed the only link back to home. Shrink it instead: a 32px wordmark still reads
       and gives back ~110px. !important is required because the <img> carries its size INLINE
       (that inline style is deliberate: /shared/*.css is cached for 24h, so a stylesheet-only
       size rule would leave cached visitors with an oversized logo). */
    .nav-logo img.site-logo {
        height: 32px !important;
        max-height: 32px !important;
        max-width: 130px !important;
    }
}
@media (min-width: 1300px) {
    .nav-logo img.site-logo {
        height: 52px !important;
        max-height: 52px !important;
        max-width: min(200px, 42vw) !important;
    }
}
@media (min-width: 1500px) {
    .nav-info { display: flex; }
}

/* ─── Car filter pills – wrap blocks, not text ─────────────────────────── */
.car-search-widget .flex-wrap {
    flex-wrap: wrap !important;
    overflow-x: visible !important;
}
/* ─── Responsive utility classes missing from per-site compiled Tailwind ────── */
/* sm: ≥ 640px */
@media (min-width: 640px) {
    .sm\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .sm\:p-7  { padding: 1.75rem; }
    .sm\:p-8  { padding: 2rem; }
    .sm\:px-6 { padding-left: 1.5rem; padding-right: 1.5rem; }
    .sm\:text-3xl { font-size: 1.875rem; line-height: 2.25rem; }
    .sm\:text-4xl { font-size: 2.25rem;  line-height: 2.5rem; }
    .sm\:text-base { font-size: 1rem; line-height: 1.5rem; }
    .sm\:text-lg   { font-size: 1.125rem; line-height: 1.75rem; }
}

/* md: ≥ 768px */
@media (min-width: 768px) {
    .md\:block          { display: block; }
    .md\:flex           { display: flex; }
    .md\:hidden         { display: none; }
    .md\:col-span-2     { grid-column: span 2 / span 2; }
    .md\:flex-row       { flex-direction: row; }
    .md\:grid-cols-2    { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .md\:grid-cols-3    { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .md\:items-center   { align-items: center; }
    .md\:items-end      { align-items: flex-end; }
    .md\:justify-between{ justify-content: space-between; }
}

/* lg: ≥ 1024px */
@media (min-width: 1024px) {
    .lg\:col-span-3     { grid-column: span 3 / span 3; }
    .lg\:gap-12         { gap: 3rem; }
    .lg\:grid-cols-2    { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .lg\:grid-cols-3    { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .lg\:grid-cols-4    { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .lg\:grid-cols-\[1\.2fr\,0\.9fr\,1\.05fr\] { grid-template-columns: 1.2fr 0.9fr 1.05fr; }
    .lg\:pt-12          { padding-top: 3rem; }
    .lg\:px-8           { padding-left: 2rem; padding-right: 2rem; }
    .lg\:text-5xl       { font-size: 3rem; line-height: 1; }
}

/* xl: ≥ 1280px */
@media (min-width: 1280px) {
    .xl\:grid-cols-4    { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ─── Missing opacity / dark-shade utilities ────────────────────────────────── */
.bg-slate-950          { background-color: #020617; }
.bg-slate-900\/70      { background-color: rgba(15, 23, 42, 0.70); }
.bg-slate-900\/90      { background-color: rgba(15, 23, 42, 0.90); }
.bg-white\/5           { background-color: rgba(255,255,255,0.05); }
.bg-white\/10          { background-color: rgba(255,255,255,0.10); }
.bg-white\/95          { background-color: rgba(255,255,255,0.95); }
.bg-white\/\[0\.03\]   { background-color: rgba(255,255,255,0.03); }
.bg-black\/40          { background-color: rgba(0,0,0,0.40); }
.bg-teal-400\/10       { background-color: rgba(59,130,246,0.10); }
.bg-cyan-400\/10       { background-color: rgba(34,211,238,0.10); }
.border-white\/10      { border-color: rgba(255,255,255,0.10); }
.border-teal-400\/30   { border-color: rgba(59,130,246,0.30); }
.text-white\/80        { color: rgba(255,255,255,0.80); }
.text-teal-600\/70     { color: rgba(30,64,175,0.70); }
.shadow-slate-900\/10  { --tw-shadow-color: rgba(15,23,42,0.10); }
.shadow-teal-500\/20   { --tw-shadow-color: rgba(59,130,246,0.20); }
.shadow-teal-500\/25   { --tw-shadow-color: rgba(59,130,246,0.25); }
.hover\:bg-teal-400\/10:hover       { background-color: rgba(59,130,246,0.10); }
.hover\:bg-black\/60:hover          { background-color: rgba(0,0,0,0.60); }
.hover\:border-teal-400\/30:hover   { border-color: rgba(59,130,246,0.30); }
.hover\:border-teal-400\/40:hover   { border-color: rgba(59,130,246,0.40); }
.hover\:shadow-slate-200\/50:hover  { --tw-shadow-color: rgba(226,232,240,0.50); }
.focus\:ring-teal-500\/20:focus     { --tw-ring-color: rgba(59,130,246,0.20); }
.text-\[11px\]         { font-size: 11px; line-height: 1.5; }
.tracking-\[0\.22em\]  { letter-spacing: 0.22em; }
.tracking-\[0\.24em\]  { letter-spacing: 0.24em; }
.group-hover\:translate-x-0\.5 { --tw-translate-x: 0.125rem; }

/* ─── Language selector: limit height and make scrollable ───────────────────── */
[x-show="open"][class*="min-w-56"],
[class*="min-w-56"][class*="max-h-96"] {
    max-height: 320px !important;
    overflow-y: auto !important;
}/* --- Arbitrary-value utilities missing from the compiled Tailwind subset ---
   The per-site subset only emits z-10..z-50 and a fixed set of sizes. These [..] values are
   used by the language modal, image lightbox, footer and car cards, so without them the modal
   has no z-index (gets overlapped) and bottom sheets have no max-height. Keep in sync with
   templates; see build-rental-site skill ("compiled subset") notes. */
.z-\[60\]{z-index:60}
.z-\[100\]{z-index:100}
.z-\[9999\]{z-index:9999}
.z-\[10000\]{z-index:10000}
.max-h-\[60vh\]{max-height:60vh}
.max-h-\[80vh\]{max-height:80vh}
.max-h-\[85vh\]{max-height:85vh}
.max-h-\[90vh\]{max-height:90vh}
.min-h-\[40px\]{min-height:40px}
.min-w-\[160px\]{min-width:160px}
.min-w-\[200px\]{min-width:200px}
.max-w-\[200px\]{max-width:200px}
.text-\[10px\]{font-size:10px;line-height:1.2}
.text-\[11px\]{font-size:11px;line-height:1.3}
.text-\[15px\]{font-size:15px}
.tracking-\[0\.14em\]{letter-spacing:.14em}
.tracking-\[0\.22em\]{letter-spacing:.22em}
.tracking-\[0\.24em\]{letter-spacing:.24em}
.scale-\[0\.99\]{scale:.99}
.w-\[min\(92vw\,34rem\)\]{width:min(92vw,34rem)}

/* === Supplement: utilities used by authored content but absent from the compiled subset (anti-empty-padding). Generated from a Tailwind v4.3 compile of the authored pages. === */
.bg-emerald-50{background-color:var(--color-emerald-50)}
.bg-slate-200{background-color:var(--color-slate-200)}
.bg-slate-300{background-color:var(--color-slate-300)}
.bg-slate-50\/70{background-color:#f8fafcb3}
.bg-slate-900\/60{background-color:#0f172b99}
.border-collapse{border-collapse:collapse}
.border-emerald-100{border-color:var(--color-emerald-100)}
.border-slate-700{border-color:var(--color-slate-700)}
.border-teal-200\/80{border-color:#bfdbfecc}
.border-teal-500{border-color:oklch(70.4% .14 182.503)}
.cursor-zoom-in{cursor:zoom-in}
.cursor-zoom-out{cursor:zoom-out}
.divide-slate-100>:not([hidden])~:not([hidden]){border-color:var(--color-slate-100)}
.flex-none{flex:none}
.font-normal{--tw-font-weight:var(--font-weight-normal);font-weight:var(--font-weight-normal)}
.from-slate-50{--tw-gradient-from:var(--color-slate-50);--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position))}
.from-teal-50{--tw-gradient-from:oklch(98.4% .014 180.72);--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position))}
.gap-0\.5{gap:calc(var(--spacing) * .5)}
.group-hover\:bg-teal-100:is(:where(.group):hover *){background-color:oklch(95.3% .051 180.801)}
.group-hover\:rotate-12:is(:where(.group):hover *){rotate:12deg}
.group-hover\:text-teal-600:is(:where(.group):hover *){color:oklch(60% .118 184.704)}
.group-hover\:text-teal-700:is(:where(.group):hover *){color:oklch(51.1% .096 186.391)}
.h-96{height:calc(var(--spacing) * 96)}
.h-auto{height:auto}
.hover\:bg-slate-800:hover{background-color:var(--color-slate-800)}
.hover\:bg-teal-700:hover{background-color:oklch(51.1% .096 186.391)}
.hover\:border-slate-200:hover{border-color:var(--color-slate-200)}
.hover\:border-teal-300:hover{border-color:oklch(85.5% .138 181.071)}
.hover\:border-teal-400:hover{border-color:oklch(77.7% .152 181.912)}
.hover\:border-teal-500:hover{border-color:oklch(70.4% .14 182.503)}
.hover\:border-teal-500\/30:hover{border-color:#3b82f64d}
.hover\:scale-105:hover{--tw-scale-x:105%;--tw-scale-y:105%;--tw-scale-z:105%;scale:var(--tw-scale-x) var(--tw-scale-y)}
.hover\:shadow-md:hover{--tw-shadow:0 4px 6px -1px var(--tw-shadow-color,#0000001a), 0 2px 4px -2px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}
.hover\:text-slate-700:hover{color:var(--color-slate-700)}
.leading-6{--tw-leading:calc(var(--spacing) * 6);line-height:calc(var(--spacing) * 6)}
.line-clamp-2{-webkit-line-clamp:2;-webkit-box-orient:vertical;display:-webkit-box;overflow:hidden}
.max-w-3xl{max-width:var(--container-3xl)}
.max-w-5xl{max-width:var(--container-5xl)}
.mb-2\.5{margin-bottom:calc(var(--spacing) * 2.5)}
.mb-7{margin-bottom:calc(var(--spacing) * 7)}
.ml-0\.5{margin-left:calc(var(--spacing) * .5)}
.mt-5{margin-top:calc(var(--spacing) * 5)}
.my-6{margin-block:calc(var(--spacing) * 6)}
.my-8{margin-block:calc(var(--spacing) * 8)}
.origin-top-right{transform-origin:100% 0}
.p-7{padding:calc(var(--spacing) * 7)}
.pb-1{padding-bottom:calc(var(--spacing) * 1)}
.pb-20{padding-bottom:calc(var(--spacing) * 20)}
.pb-5{padding-bottom:calc(var(--spacing) * 5)}
.pl-6{padding-left:calc(var(--spacing) * 6)}
.pt-0{padding-top:calc(var(--spacing) * 0)}
.pt-16{padding-top:calc(var(--spacing) * 16)}
.pt-5{padding-top:calc(var(--spacing) * 5)}
.px-7{padding-inline:calc(var(--spacing) * 7)}
.py-5{padding-block:calc(var(--spacing) * 5)}
.right-4{right:calc(var(--spacing) * 4)}
.ring-1{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}
.ring-inset{--tw-ring-inset:inset}
.ring-slate-900\/5{--tw-ring-color:#0f172b0d}
.rounded-t-3xl{border-top-left-radius:var(--radius-3xl);border-top-right-radius:var(--radius-3xl)}
.shadow-2xl{--tw-shadow:0 25px 50px -12px var(--tw-shadow-color,#00000040);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}
.shadow-md{--tw-shadow:0 4px 6px -1px var(--tw-shadow-color,#0000001a), 0 2px 4px -2px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}
.shadow-slate-900\/20{--tw-shadow-color:#0f172b33}
.shadow-teal-500\/10{--tw-shadow-color:#3b82f61a}
@media (min-width:640px){.sm\:p-12{padding:calc(var(--spacing) * 12)}}
@media (min-width:640px){.sm\:px-12{padding-inline:calc(var(--spacing) * 12)}}
@media (min-width:640px){.sm\:py-16{padding-block:calc(var(--spacing) * 16)}}
.text-cyan-300{color:var(--color-cyan-300)}
.text-emerald-700{color:var(--color-emerald-700)}
.text-slate-200{color:var(--color-slate-200)}
.text-slate-900{color:var(--color-slate-900)}
.text-teal-200{color:oklch(91% .096 180.426)}
.text-teal-50{color:oklch(98.4% .014 180.72)}
.text-teal-900{color:oklch(38.6% .063 188.416)}
.text-teal-950{color:oklch(27.7% .046 192.524)}
.to-emerald-50{--tw-gradient-to:var(--color-emerald-50);--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position))}
.to-slate-100{--tw-gradient-to:var(--color-slate-100);--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position))}
.top-4{top:calc(var(--spacing) * 4)}
.w-1\/2{width:50%}
.w-1\/3{width:33.3333%}
.w-1\/4{width:25%}
.w-2\/3{width:66.6667%}

/* minimal typography for legal/prose pages (no @tailwindcss/typography plugin installed) */
.prose{color:var(--color-slate-600);max-width:none;line-height:1.75}
.prose-slate{--tw-prose-body:var(--color-slate-600)}
.prose :where(h2):not(.not-prose *){color:var(--color-slate-900);font-weight:700;font-size:1.25rem;margin-top:2rem;margin-bottom:.75rem}
.prose :where(h3):not(.not-prose *){color:var(--color-slate-900);font-weight:600;font-size:1.075rem;margin-top:1.5rem;margin-bottom:.5rem}
.prose :where(p):not(.not-prose *){margin-top:0;margin-bottom:1rem}
.prose :where(ul,ol):not(.not-prose *){margin:1rem 0;padding-left:1.5rem;list-style:revert}
.prose :where(li):not(.not-prose *){margin:.35rem 0}
.prose :where(a):not(.not-prose *){color:oklch(51.1% .096 186.391);text-decoration:underline}
.prose :where(strong):not(.not-prose *){color:var(--color-slate-900);font-weight:600}
.prose :where(table):not(.not-prose *){width:100%;border-collapse:collapse;margin:1.25rem 0}
.prose :where(th,td):not(.not-prose *){border:1px solid var(--color-slate-200);padding:.5rem .75rem;text-align:left}

/* LocalRent WL booking script: keep ONLY the booking modal (#spa__modal). Hide the app's inline
   white-label search UI (<lr-whitelabel>) — it duplicates our own car-search section and drives a
   runaway ResizeObserver growth loop (the mrc_wl container ballooned to thousands of nodes). The
   booking modal is a sibling, so booking is unaffected (verified: same navigation on click). */
[id^="mrc_wl_"], lr-whitelabel { display: none !important; }

/* Car-search loading states (per-site loader_style: skeleton/shimmer/spinner/dots; uses --primary) */
.lr-skel{background:#e2e8f0;position:relative;overflow:hidden}
.lr-skel--img{height:11rem;width:100%}
.lr-skel--line{height:.8rem;border-radius:5px}
.lr-skel--btn{height:2rem;border-radius:7px}
.lr-skel-card{border:1px solid #f1f5f9;border-radius:1rem;background:#fff;overflow:hidden}
.lr-skel-body{padding:1.15rem;display:flex;flex-direction:column;gap:.6rem}
.lr-loader--skeleton .lr-skel{animation:lr-pulse 1.5s ease-in-out infinite}
@keyframes lr-pulse{0%,100%{opacity:1}50%{opacity:.45}}
.lr-loader--shimmer .lr-skel::after{content:"";position:absolute;inset:0;transform:translateX(-100%);background:linear-gradient(90deg,transparent,rgba(255,255,255,.65),transparent);animation:lr-shimmer 1.4s infinite}
@keyframes lr-shimmer{100%{transform:translateX(100%)}}
.lr-spinner{width:46px;height:46px;border-radius:50%;border:4px solid #e2e8f0;border-top-color:var(--primary,#4f46e5);animation:lr-spin .8s linear infinite}
@keyframes lr-spin{to{transform:rotate(360deg)}}
.lr-dots{display:inline-flex;gap:9px}
.lr-dots span{width:13px;height:13px;border-radius:50%;background:var(--primary,#4f46e5);animation:lr-bounce 1.2s infinite both}
.lr-dots span:nth-child(2){animation-delay:.18s}
.lr-dots span:nth-child(3){animation-delay:.36s}
@keyframes lr-bounce{0%,80%,100%{transform:scale(.45);opacity:.5}40%{transform:scale(1);opacity:1}}

/* supplement: axis gaps used by authored content grids */
.gap-x-10{column-gap:calc(var(--spacing) * 10)}
.gap-y-8{row-gap:calc(var(--spacing) * 8)}

/* supplement: responsive/variant utilities used by authored content */
.hover\:text-teal-800:hover{color:oklch(43.7% .078 188.216)}
@media (min-width: 1024px){
  .lg\:col-span-2{grid-column:span 2 / span 2}
  .lg\:border-l{border-left-style:var(--tw-border-style);border-left-width:1px}
}

/* Timeline dot offset: negative arbitrary inset used by authored timeline sections.
   Tailwind emits no -left-* utilities in the compiled subset, so this is manual. */
.-left-\[calc\(2rem\+5px\)\] { left: calc((2rem + 5px) * -1); }

/* ── FIGURES ───────────────────────────────────────────────────────────────
   Syne is the brand face and it keeps every WORD, but it cannot carry a figure.
   Measured in the live font at 40px / weight 800:

     "111" = 63.5px   vs   "888" = 129.7px   -> a "1" is less than half an "8",
                                                 so no column of figures lines up
     euro sign = 56.3px vs 27.8px in the system face -> twice as wide, and at 800
                                                 the two bars close up the bowl

   Worse, Syne's DEFAULT figures are old-style: x-height, with descending zeros.
   "100" rendered as "1oo", "EUR 50" as "EUR 5o" and "Up to EUR150" as "EUR15o".
   That, not the width, is what made the prices look squashed and struck through.

   Earlier work declared `font-variant-numeric: tabular-nums` in several places and
   it appeared to do nothing. It was not a no-op -- Syne does ship both `lnum` and
   `tnum` -- but `tabular-nums` ALONE never turns on lining figures, so the digits
   stayed old-style. Asking for lining-nums as well is what fixes it.

   1. Everything inherits lining, tabular figures, so a figure sitting inside a
      sentence or a pill keeps the brand face and still reads as a number. */
body {
    font-variant-numeric: lining-nums tabular-nums;
}

/* 2. A standalone FIGURE at display size -- a price, a count, a deposit -- leaves
      the display face entirely for the system numeric stack, which is what the car
      cards already do (.slt .sl-n in car-results-rail_slats). `tabular-nums` is the
      marker the page templates already use for exactly this, so it switches the
      family too rather than only the variant. The car cards and the hero set their
      own family at higher specificity and are unaffected. */
:root {
    --site-num: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
.tabular-nums,
.fig {
    font-family: var(--site-num);
    font-variant-numeric: lining-nums tabular-nums;
    font-feature-settings: "tnum" 1, "lnum" 1;
}

/* ── CONTENT TABLES ────────────────────────────────────────────────────────
   The seven page tables sit in an `overflow-x-auto` scroller and are `w-full`.
   Their headers are `whitespace-nowrap`, so on a phone a long header such as
   "Distance from Muscat" claims its width first and the browser starves whichever
   column is still able to wrap. On coast-and-wahiba that left the "Stop" column at
   roughly 115px: "Sur via the coast road" broke over FOUR lines and "Wadi Shab car
   park" over four more, while the distance column kept a comfortable single line.

   A floor width lets the columns lay out at a sane ratio and leaves the scrolling to
   the wrapper that is already there. Past this width `w-full` takes over again, so
   desktop is untouched. Scoped to the content tables; the car cards build their own
   layout and match nothing here. */
.overflow-x-auto > table.w-full {
    min-width: 44rem;
}

/* A long word in a wide display face overflows the page rather than breaking.
   Measured on dubrovnik/old-town-lapad: the h2 "Parking and neighbourhoods, answered"
   set in Syne 800 at text-3xl pushed the document 25px past a 390px phone, and the
   heading box itself measured as fitting, so nothing showed up as an offender. Headings
   are where this bites because they are the biggest type on the page. */
h1, h2, h3, h4, h5, h6 {
    overflow-wrap: break-word;
}