/* ============================================================
   MarcMyCar — global styles
   Palette / type mirror marcmycar.co.uk:
     primary  #fdb515   primary-hover #e5a00d
     dark     #0f172a   dark-lighter  #1e293b
     light    #f8fafc   body #334155   muted #64748b
   Headings: Plus Jakarta Sans 600, -0.02em
   Body:     Poppins 400
   Radius:   4px everywhere
   ============================================================ */

:root {
  --primary: #fdb515;
  --primary-hover: #e5a00d;
  --primary-light: #fec33c;   /* lighter band for the two-tone highlight */
  --dark: #0f172a;
  --dark-lighter: #1e293b;
  --light: #f8fafc;
  --text-main: #334155;
  --text-muted: #64748b;
  --line: #e2e8f0;
  --radius: 4px;
}

*, *::before, *::after { box-sizing: border-box; }

/* ============================================================
   Global corner radius — 4px on every surface and control.
   The markup is Tailwind-utility based and mostly square by
   default, so element + attribute selectors apply the radius
   without editing hundreds of class lists.

   Wrapped in :where() = zero specificity, so anything with its
   own radius still wins (pill dots, circular avatars, and any
   rounded-* utility — which is also 4px now via the theme).
   ============================================================ */
:where(
  button, input, select, textarea, canvas, img, article, form, fieldset,
  .btn-primary,
  [class*="border-line"], [class*="border-dark"], [class*="border-white"],
  [class*="border-primary"],
  [class*="bg-white"], [class*="bg-dark"], [class*="bg-light"],
  [class*="bg-primary"], [class*="bg-["], [class*="bg-slate"],
  .t-panel, .t-panel-head, .t-btn, .t-input, .t-select, .t-drop, .t-thumb,
  .t-layer, .t-badge, .t-stage, .t-ratio-card, .t-notice, .t-seg,
  .t-seg > button, .t-anchors button, .t-ico, .t-num,
  .auth-toggle, .auth-toggle-pill, .auth-toggle button,
  .ob-drop, .ob-sample, .ob-seg, .ob-anch, .ob-stage,
  .ob-progress-track, .ob-progress-fill,
  .demo-row, .demo-tile, .demo-anch, .demo-seg, .demo-handle
) {
  border-radius: var(--radius);
}

/* Things that must stay perfectly round or perfectly square */
:where(.demo-dot) { border-radius: 9999px; }
/* The marker highlight is a background-image band, not a box — a radius
   here would clip the ends of the yellow bar. */
:where(.hero-highlight) { border-radius: 0; }

/* ============================================================
   Account menu — the signed-in identity in the header nav.
   Markup is injected by global.js into [data-account-menu], so
   every page gets the same control from one source.
   ============================================================ */
.acct { position: relative; }

/* The trigger: initials tile + dealership name + chevron. */
.acct-btn {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.375rem 0.5rem 0.375rem 0.375rem;
  border: 1px solid transparent; background: none; cursor: pointer;
  border-radius: var(--radius);
  transition: background 0.15s, border-color 0.15s;
}
.acct-btn:hover { background: var(--light); border-color: var(--line); }
.acct-btn[aria-expanded="true"] { background: var(--light); border-color: var(--dark); }

.acct-ini {
  display: grid; place-items: center; width: 2rem; height: 2rem; flex: none;
  background: var(--dark); color: #fff;
  font-family: "Plus Jakarta Sans", sans-serif; font-weight: 800;
  font-size: 0.6875rem; letter-spacing: 0.02em;
  border-radius: var(--radius);
}
.acct-name {
  max-width: 11rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-family: "Plus Jakarta Sans", sans-serif; font-weight: 700;
  font-size: 0.8125rem; color: var(--dark);
}
.acct-chev { width: 0.75rem; height: 0.75rem; flex: none; color: var(--text-muted); transition: transform 0.18s; }
.acct-btn[aria-expanded="true"] .acct-chev { transform: rotate(180deg); }

/* The dropdown is an nj-panel: 1px line, #eef2f6 body, #e4eaf0 head
   band with an uppercase display title. Same surface as every panel on
   new-job / new-panel / gallery / dashboard. */
.acct-menu {
  position: absolute; top: calc(100% + 0.5rem); right: 0; z-index: 60;
  min-width: 15.5rem;
  border: 1px solid var(--line); background: #eef2f6;
  border-radius: var(--radius);
  box-shadow: 0 1px 0 0 rgb(0 0 0 / 0.04), 0 8px 24px -12px rgb(0 0 0 / 0.15);
  animation: acct-in 0.16s ease both;
}
.acct-menu[hidden] { display: none; }
@keyframes acct-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

.acct-head {
  padding: 0.875rem 1rem;
  border-bottom: 1px solid var(--line);
  background: #e4eaf0;
}
.acct-head-name {
  font-family: "Plus Jakarta Sans", sans-serif; font-weight: 700;
  font-size: 0.8125rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--dark);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.acct-head-mail {
  margin-top: 0.25rem; font-size: 0.6875rem; line-height: 1.5; color: var(--text-muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Rows read like the summary rail: hairline-separated, no pills. */
.acct-item {
  display: flex; width: 100%; align-items: center; gap: 0.625rem;
  padding: 0.625rem 1rem; border: 0; border-top: 1px solid var(--line);
  background: none; cursor: pointer; text-align: left;
  font-size: 0.8125rem; font-weight: 500; color: var(--text-main);
  transition: background 0.15s, color 0.15s;
}
.acct-menu .acct-item:first-of-type,
.acct-m-list .acct-item:first-of-type { border-top: 0; }
.acct-item:hover, .acct-item:focus-visible { background: #fff; color: var(--dark); outline: none; }
.acct-item svg { width: 0.875rem; height: 0.875rem; flex: none; color: var(--text-muted); }
.acct-item:hover svg, .acct-item:focus-visible svg { color: var(--dark); }

/* Signing out isn't destructive — it gets separation, not a red flag.
   (Red is reserved for delete, as in the gallery.) */
.acct-sep { height: 1px; background: var(--line); }
.acct-out { font-family: "Plus Jakarta Sans", sans-serif; font-weight: 700; color: var(--dark); }

/* Mobile: no dropdown — the same actions listed flat inside the burger nav,
   framed as a panel so it doesn't float loose among the nav links. */
.acct-m {
  margin-top: 0.25rem; border: 1px solid var(--line); background: #eef2f6;
  border-radius: var(--radius); overflow: hidden;
}
.acct-m-head {
  display: flex; align-items: center; gap: 0.625rem;
  padding: 0.75rem 1rem; border-bottom: 1px solid var(--line); background: #e4eaf0;
}
.acct-m-list { display: flex; flex-direction: column; }

/* ============================================================
   Scrollbars — dark, slim, square-ish. Applies to the page and
   to any inner scroller (layer lists, drop zones, panel bodies)
   so nothing falls back to the OS chrome.
   ============================================================ */
html {
  scrollbar-width: thin;                       /* Firefox */
  scrollbar-color: var(--dark) var(--light);   /* thumb, track */
}

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--light); }
::-webkit-scrollbar-thumb {
  background: var(--dark);
  border: 2px solid var(--light);   /* inset the thumb off the track edges */
  border-radius: var(--radius);
}
::-webkit-scrollbar-thumb:hover { background: var(--dark-lighter); }
::-webkit-scrollbar-corner { background: var(--light); }

html {
  scroll-behavior: smooth;
}

/* Lenis drives scrolling where loaded — native smooth would double-ease */
html.lenis {
  scroll-behavior: auto;
}
html.lenis body {
  height: auto;
}

body {
  line-height: 1.6;
}

/* Text selection — a light sky blue instead of the browser default.
   Dark ink is forced so selected text stays legible on both the light
   pages and the dark footer. */
::selection {
  background: #c3dbf9;
  color: #0f172a;
}
::-moz-selection {
  background: #c3dbf9;
  color: #0f172a;
}

/* Heading defaults. No colour here — it lives in an unlayered rule, which
   would beat Tailwind's layered text-* utilities and make them unusable.
   Set heading colour with classes (text-dark / text-white). */
h1, h2, h3, h4, h5, h6 {
  font-family: "Plus Jakarta Sans", sans-serif;
  font-weight: 700;
  letter-spacing: -0.02em;
}

/* Header height */
.h-18 { height: 4.5rem; }

/* Primary button — lifted gold, matching the live site's feel */
.btn-primary {
  background: var(--primary);
  border: 2px solid var(--primary);
  box-shadow: 0 4px 15px rgba(253, 181, 21, 0.25);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.btn-primary:hover {
  background: var(--primary-hover);
  border-color: var(--primary-hover);
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(253, 181, 21, 0.4);
}

/* Marker-style highlight behind headline text.
   The bar is a ::before rather than a background gradient so it can carry
   its own 4px radius on all four corners — a radius on the span itself
   would only clip the element box and round the bottom two.
   isolation + z-index:-1 keeps the bar behind the text but still above any
   ancestor background (gold CTA band, dark footer). */
.hero-highlight {
  position: relative;
  isolation: isolate;
  padding: 0 0.08em;
}
.hero-highlight::before {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 0.38em;
  background: var(--primary);
  border-radius: var(--radius);
  z-index: -1;
}

/* White variant: white marker bar, for dark text on a gold background. */
.hero-highlight--ink::before {
  background: #ffffff;
}

/* Two-tone variant: two hard-edged bands, no blend. Lighter band sits on
   top of the brand gold. Scoped as a modifier so it can be dropped without
   touching the base highlight used by the logo, pricing and auth pages. */
.hero-highlight--duo::before {
  background: linear-gradient(
    to top,
    var(--primary)       0,
    var(--primary)       50%,
    var(--primary-light) 50%,
    var(--primary-light) 100%
  );
}

/* ============================================================
   Hero branding animation — minimal.
   One logo layer, restyled through presets by hero-presets in
   index.html — anchor, size, plate colour and opacity are all
   inline styles, so CSS just tweens between them. Everything is
   a % of the stage WIDTH, same maths as the real engine.
   ============================================================ */
/* Query container so banner height and type can be sized in cqw — i.e.
   as a % of the stage WIDTH, exactly like the engine's layer maths. */
.hero-stage {
  container-type: inline-size;
  --hero-t: 1400ms;
  --hero-ease: cubic-bezier(0.65, 0, 0.35, 1);
}

.hero-layer {
  position: absolute;
  z-index: 3;                   /* always above the photo stack */
  box-sizing: content-box;      /* width = logo width, plate padding sits outside */
  transform: translate(-50%, -50%);
  background-color: transparent;
  transition:
    left var(--hero-t) var(--hero-ease),
    top var(--hero-t) var(--hero-ease),
    width var(--hero-t) var(--hero-ease),
    padding var(--hero-t) var(--hero-ease),
    background-color var(--hero-t) var(--hero-ease),
    opacity var(--hero-t) var(--hero-ease);
  will-change: left, top, width, opacity;
}

/* The stacking context for the two inks. Without this the absolutely
   positioned dark logo would size itself against the layer's PADDING
   box and bleed over the plate edges. */
.hero-logo-wrap {
  display: block;
  position: relative;
}

/* Both inks are stacked; the preset cross-fades to whichever
   reads on the current plate. */
.hero-logo {
  display: block;
  width: 100%;
  height: auto;
  transition: opacity var(--hero-t) var(--hero-ease);
}
.hero-logo--dark {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: auto;
  opacity: 0;
}
.hero-layer[data-ink="dark"] .hero-logo--light { opacity: 0; }
.hero-layer[data-ink="dark"] .hero-logo--dark  { opacity: 1; }

/* ============================================================
   Hero slider — one Swiper slide per branding preset.
   ============================================================ */
.hero-swiper .hero-stage { container-type: inline-size; }

/* Slide transition: one long ease so the swipe glides in and settles
   without a bounce. Applies to the drag release too. */
.hero-swiper .swiper-wrapper {
  transition-timing-function: cubic-bezier(0.65, 0, 0.35, 1);
}

.hero-swiper .swiper-slide img.hero-slide-photo {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

/* Each slide is a finished state, so nothing tweens inside one. */
.hero-swiper .hero-layer,
.hero-swiper .hero-logo,
.hero-swiper .hero-banner { transition: none; }

/* Numbered pager, flush with the left edge of the stage. */
.hero-pager {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 1rem;
}
@media (max-width: 640px) {
  .hero-pager { flex-direction: column; align-items: flex-start; }
}
.hero-pager .swiper-pagination {
  position: static;
  display: flex;
  gap: 0.5rem;
  width: auto;
  text-align: left;
}
.hero-pager .swiper-pagination-bullet {
  width: 3.5rem;
  height: 3.5rem;
  margin: 0 !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: var(--radius);
  /* Subtle solid fill. Kept translucent so the sliding pill behind it
     deepens the box on hover, exactly like the header nav links. */
  background: rgb(15 23 42 / 0.055);
  opacity: 1;
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 1rem;
  font-weight: 800;
  color: var(--text-muted);
  cursor: pointer;
  transition: background-color 200ms ease, border-color 200ms ease, color 200ms ease;
}
.hero-pager .swiper-pagination-bullet:hover { color: var(--dark); }

/* The pill matches the bullet's box exactly, so it reads as a fill. */
.hero-pager .nav-slide { display: flex; }
.hero-pager .nav-slide-pill { border-radius: var(--radius); }
.hero-pager .swiper-pagination-bullet-active {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--dark);
}

/* Promo banner: a full-bleed strip on the bottom edge — offer flush left,
   deadline flush right. Colours and text come from the preset. It meets the
   left, right and bottom edges exactly, so no radius here. */
.hero-banner {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 6.2cqw;
  padding: 0 3cqw;
  font-family: "Plus Jakarta Sans", sans-serif;
  font-weight: 800;
  font-size: 1.95cqw;
  line-height: 1;
  letter-spacing: -0.01em;
  background-color: transparent;
  opacity: 0;
  transform: translateY(100%);
  transition:
    opacity var(--hero-t) var(--hero-ease),
    transform var(--hero-t) var(--hero-ease),
    background-color var(--hero-t) var(--hero-ease),
    color var(--hero-t) var(--hero-ease);
}
.hero-banner.is-on {
  opacity: 1;
  transform: translateY(0);
}

/* Circular badge: the plate is squared off against the layer's own width
   and fully rounded, so the logo sits in a coin. Padding has to come
   inside the circle, hence border-box just for this variant. */
.hero-layer--badge {
  box-sizing: border-box;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border-radius: 50%;
}
.hero-layer--badge .hero-logo-wrap { width: 100%; }

/* ------------------------------------------------------------
   Corner flag: a filled corner with text layers stacked along
   the diagonal. Everything is cqw, so it scales with the stage.
   ------------------------------------------------------------ */
.hero-flag {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 4;
  width: 27cqw;
  height: 27cqw;
  pointer-events: none;
}
.hero-flag-fill {
  position: absolute;
  inset: 0;
  clip-path: polygon(0 0, 100% 0, 0 100%);
}
/* Anchored on the triangle's centroid (a third along each edge) so the
   stack sits square in the flag, then turned to follow the hypotenuse. */
.hero-flag-text {
  position: absolute;
  left: 33.33%;
  top: 33.33%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.55cqw;
  transform: translate(-50%, -50%) rotate(-45deg);
  font-family: "Plus Jakarta Sans", sans-serif;
  font-weight: 800;
  font-size: 1.3cqw;
  line-height: 1.1;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* ------------------------------------------------------------
   Contact bar: a solid strip across the foot of the photo with
   the logo at the left and the dealer's details beside it.
   ------------------------------------------------------------ */
/* Overshoots the bottom edge by a pixel and lets the stage's overflow clip
   it — the photo's aspect-ratio box can land on a fractional height, and at
   bottom:0 that leaves a hairline of backdrop under the bar. */
.hero-footer {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  z-index: 4;
  display: flex;
  align-items: center;
  gap: 3cqw;
  padding: 1.1cqw 3cqw calc(1.1cqw + 1px);
  background: #fff;
  border-bottom: 0.3cqw solid var(--dark);
  font-family: "Plus Jakarta Sans", sans-serif;
  color: var(--dark);
}
/* Capped by height, not width — the bar's depth then stays put whatever
   shape the dealer's mark happens to be. */
.hero-footer-logo {
  display: block;
  height: 6cqw;
  width: auto;
  max-width: 20cqw;
  object-fit: contain;
}
.hero-footer-text {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5cqw;
  /* Optically centre the block against the logo on the left. */
  padding-right: 4cqw;
  text-align: center;
}
.hero-footer-line1 {
  font-weight: 800;
  font-size: 2.2cqw;
  line-height: 1;
  letter-spacing: -0.01em;
}
.hero-footer-line2 {
  font-weight: 600;
  font-size: 1.35cqw;
  line-height: 1;
  color: var(--text-main);
}

/* Only lift the logo off the photo when it has no plate behind it. */
.hero-layer:not([data-plate="on"]) {
  filter: drop-shadow(0 1px 5px rgb(15 23 42 / 0.45));
}

@media (prefers-reduced-motion: reduce) {
  .hero-layer,
  .hero-logo,
  .hero-banner { transition: none; }
}

/* Reduced motion: skip the loop, show the finished branded state */
@media (prefers-reduced-motion: reduce) {
  .hero-layer { animation: none; opacity: 1; transform: none; }
}

/* ============================================================
   Interactive system demo (index #how-it-works)
   ============================================================ */
.demo-dot {
  position: absolute;
  width: 9px;
  height: 9px;
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.75);
  box-shadow: 0 1px 3px rgb(0 0 0 / 0.45);
  cursor: pointer;
  transform: translate(-50%, -50%);
  transition: transform 0.15s, background 0.15s, box-shadow 0.15s;
}
.demo-dot:hover { transform: translate(-50%, -50%) scale(1.5); }
.demo-dot.is-active {
  background: var(--primary);
  box-shadow: 0 0 0 4px rgba(253, 181, 21, 0.35);
  transform: translate(-50%, -50%) scale(1.25);
}

.demo-layer { outline: 2px dashed transparent; outline-offset: 6px; }
.demo-layer.is-selected { outline-color: var(--primary); }

.demo-handle {
  position: absolute;
  width: 8px;
  height: 8px;
  background: #fff;
  border: 1px solid var(--dark);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s;
}
.is-selected > .demo-handle { opacity: 1; }

.demo-row.is-selected {
  border-color: var(--primary);
  box-shadow: inset 0 0 0 1px var(--primary);
}

.demo-anch.is-active { background: var(--primary); border-color: var(--primary); }

.demo-seg.is-active { background: var(--dark); border-color: var(--dark); color: #fff; }

/* ============================================================
   Reviews marquee — two rows, opposite drift, drag/swipe to browse.
   Motion lives in JS (requestAnimationFrame) rather than a CSS
   animation so a drag can take over mid-flight and hand back.
   ============================================================ */
.mmc-marquee {
  overflow: hidden;
  cursor: grab;
  touch-action: pan-y;          /* vertical page scroll still works */
  user-select: none;
  -webkit-user-select: none;
}
.mmc-marquee.is-dragging { cursor: grabbing; }

.mmc-track {
  display: flex;
  gap: 1.25rem;
  width: max-content;
  will-change: transform;
}

.mmc-card {
  position: relative;
  flex: 0 0 auto;
  width: 27.25rem;          /* 21rem + 30% — wider, rectangular cards */
  display: flex;
  flex-direction: column;
  border: 0;
  /* Top-down wash so the cards read clearly against the white section.
     Kept in the same family as the tool panels (#eef2f6). */
  background:
    linear-gradient(180deg, #f2f5f9 0%, #e4eaf1 100%);
  border-radius: var(--radius);
  padding: 1.75rem;
  transition: box-shadow .25s cubic-bezier(.32,.72,0,1),
              background .25s cubic-bezier(.32,.72,0,1);
}
.mmc-marquee:not(.is-dragging) .mmc-card:hover {
  background: linear-gradient(180deg, #ffffff 0%, #dde5ee 100%);
  box-shadow: 0 12px 30px -18px rgb(15 23 42 / .35);
}

.mmc-logo {
  height: 2.25rem;
  width: auto;
  max-width: 9rem;
  object-fit: contain;
  object-position: left center;
  pointer-events: none;
}

.mmc-stars {
  margin-top: 1.125rem;
  color: var(--primary);
  font-size: .875rem;
  letter-spacing: .12em;
}
.mmc-star-off { color: var(--line); }

.mmc-quote {
  margin-top: .875rem;
  font-size: .9375rem;
  line-height: 1.65;
  color: var(--text-main);
}

.mmc-by {
  margin-top: 1.25rem;
  font-family: "Plus Jakarta Sans", sans-serif;
  font-weight: 700;
  font-size: .6875rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-muted);
}

@media (max-width: 640px) {
  .mmc-card { width: 21rem; padding: 1.5rem; }
}
@media (max-width: 400px) {
  .mmc-card { width: 17.5rem; padding: 1.375rem; }
}

/* ============================================================
   Scroll-linked word reveal
   Words dim to --reveal-dim and light to full as the section
   travels through the viewport. Opacity is written by JS; the
   transition only smooths the per-frame steps.
   ============================================================ */
.mmc-reveal { --reveal-dim: 0.14; }
.mmc-reveal [data-word] {
  display: inline-block;
  transition: opacity .18s linear;
}
/* A marked word needs the same tight line box the headings use, or the
   bar lands in the descender space and reads as a thin underline rather
   than a marker across the bottom of the letters. */
.mmc-reveal .hero-highlight {
  line-height: 1.08;
}

/* Paragraph break inside the word stream: an empty block forces the next
   word onto a fresh line, and its height is the gap between the two. */
.mmc-reveal-break {
  display: block;
  height: 0.75em;
}

@media (prefers-reduced-motion: reduce) {
  .mmc-reveal [data-word] { opacity: 1 !important; transition: none; }
}

/* ============================================================
   Header nav — one shared pill that slides between links
   ============================================================ */
.nav-slide { position: relative; }
.nav-slide-pill {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  border-radius: var(--radius);
  background: rgb(15 23 42 / .11);
  opacity: 0;
  transform: translateX(0);
  pointer-events: none;
  transition: transform .32s cubic-bezier(.32,.72,0,1),
              width .32s cubic-bezier(.32,.72,0,1),
              opacity .2s ease;
}
.nav-slide.is-on .nav-slide-pill { opacity: 1; }
/* First reveal shouldn't slide in from the left edge */
.nav-slide-pill.no-anim { transition: opacity .2s ease; }
.nav-slide :where(a, button) { position: relative; z-index: 1; }

/* Dark header — dealer dashboard pages now carry the same obsidian chrome
   admin already used (id="site-header" plus a bg-dark class). Scoped to
   .bg-dark specifically so index/auth/logo-design/the free tool, which
   stay on the light header, are untouched. The dark wash the pill gets on
   a light header reads as nothing on obsidian, so it needs a light fill
   instead — same swap admin.css already made for its own header. */
#site-header.bg-dark .nav-slide-pill { background: rgb(255 255 255 / .12); }

/* The account-menu trigger — border/hover states tuned for the light
   header everywhere else — needs the same light-fill treatment here, and
   the dealership name needs to actually be visible on obsidian. */
#site-header.bg-dark .acct-btn:hover,
#site-header.bg-dark .acct-btn[aria-expanded="true"] {
  background: rgb(255 255 255 / .1); border-color: rgb(255 255 255 / .2);
}
#site-header.bg-dark .acct-name { color: #fff; }
#site-header.bg-dark .acct-chev { color: #94a3b8; }

@media (prefers-reduced-motion: reduce) {
  .nav-slide-pill { transition: opacity .2s ease; }
}

/* Sticky header gains a shadow once the page scrolls. The ID beats the
   .transition-shadow utility in the markup, so transform is tweened here
   too — otherwise the slide would snap. */
#site-header {
  transition:
    transform 340ms cubic-bezier(0.4, 0, 0.2, 1),
    box-shadow 200ms ease;
}
#site-header.is-scrolled {
  box-shadow: 0 1px 0 0 rgb(0 0 0 / 0.04), 0 8px 24px -12px rgb(0 0 0 / 0.15);
}

/* Scrolling down tucks the bar away; scrolling up brings it straight
   back. Nudged an extra pixel so no hairline of the border shows. */
#site-header.is-hidden {
  transform: translateY(calc(-100% - 1px));
}

/* Sticky rails (.st-nav on settings/support, .nj-panel summaries) reserve
   top-24 assuming the header is sitting above them. Once the header tucks
   away on scroll-down, that gap is dead space and the rail sits stranded
   low — collapse it back down near the top edge while hidden. Two classes
   on the selector out-specifies Tailwind's single-class .lg\:top-24, so
   this wins regardless of stylesheet order. */
@media (min-width: 1024px) {
  html.header-hidden .lg\:top-24 {
    top: 1.5rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  #site-header { transition: box-shadow 200ms ease; }
}

/* Focus ring */
:where(a, button):focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
  border-radius: var(--radius);
}

/* ============================================================
   Coming-soon placeholder slides (index #coming-soon)
   Three example slides built from layers, not baked images.
   Each slide is a container, so the logo (% width) and message
   (cqw font size) scale with the slide exactly as the engine
   sizes layers as a % of image width. No motion.
   ============================================================ */
.cs-slide {
  container-type: inline-size;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.cs-slide--flat { background: #f2f3f1; }
.cs-slide--dark { background: var(--dark); }
/* A soft studio sweep rendered in CSS — a clean, car-free backdrop
   without shipping another image. */
.cs-slide--backdrop {
  background:
    radial-gradient(115% 80% at 50% 112%, #d7dce3 0%, rgb(215 220 227 / 0) 58%),
    linear-gradient(180deg, #fcfcfd 0%, #edf0f4 100%);
}

/* Photo backdrop: a forecourt shot dimmed behind the branding, for stock
   that's on site but not yet photographed. The scrim is a layer of its
   own, so the logo and message keep their contrast. */
.cs-slide--photo { background: var(--dark); }
.cs-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.cs-slide--photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgb(15 23 42 / 0.62) 0%, rgb(15 23 42 / 0.78) 100%);
}
/* Lift the branding above both the photo and its scrim. */
.cs-slide--photo .cs-logo,
.cs-slide--photo .cs-msg { position: relative; z-index: 1; }

.cs-logo {
  display: block;
  height: auto;
}

.cs-msg {
  margin-top: 5.5cqw;
  font-family: "Plus Jakarta Sans", sans-serif;
  font-weight: 800;
  font-size: 4.2cqw;
  line-height: 1;
  letter-spacing: 0.42em;
  text-indent: 0.42em;   /* recentre: tracking leaves a trailing gap */
  text-transform: uppercase;
}

/* ============================================================
   Marc — the dealer assistant (global.js mounts it everywhere).

   Built to the shape current assistants have settled on rather
   than the 2015 support bubble: Marc's replies are plain text at
   full width with no container and no avatar, only the dealer's
   own turn gets a pill, the composer is the roomiest thing in
   the panel, and the one accent — the brand gold — is spent on
   exactly two objects, the mark and the send key.

   The panel is deliberately its own surface: obsidian, while the
   app around it is white. It reads as a thing hovering over the
   page rather than a page panel that has come loose, and it puts
   the gold where it has the most contrast to work with.

   Toggle: ASSISTANT_ON in global.js. Off = none of this is used.
   ============================================================ */
:root {
  --ma-bg:      #0f172a;                 /* panel ground — brand obsidian */
  --ma-raised:  #1b2434;                 /* composer + the dealer's own turn */
  --ma-line:    rgb(255 255 255 / 0.10); /* hairlines do the separating */
  --ma-line-lo: rgb(255 255 255 / 0.06);
  --ma-ink:     #e8eef7;
  --ma-ink-dim: #94a3b8;
  --ma-accent:  #fdb515;

  /* The iOS sheet curve for surfaces, a snappier one for icons. */
  --ma-ease:  cubic-bezier(0.32, 0.72, 0, 1);
  --ma-ease2: cubic-bezier(0.2, 0, 0, 1);
}

/* ---------- Launcher ----------
   The product stamps a dealer's mark into the corner of a photo at
   a few percent inset. This sits in the corner of the page doing
   exactly that, which is why it stays square while the panel above
   it is soft: it's a stamp, not a chat bubble. */
.ma-launch {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  z-index: 1100;
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  padding: 0;
  border: 0;
  border-radius: 10px;
  background: var(--ma-accent);
  color: var(--ma-bg);
  cursor: pointer;
  box-shadow: 0 2px 6px rgb(15 23 42 / 0.16), 0 8px 24px -12px rgb(15 23 42 / 0.4);
  transition: transform .18s var(--ma-ease2), box-shadow .18s var(--ma-ease2), background .15s;
}
.ma-launch:hover { background: #ffc23d; transform: scale(1.04); }
.ma-launch:active { transform: scale(0.96); }
.ma-launch:focus-visible { outline: 2px solid var(--ma-bg); outline-offset: 3px; }

/* The two glyphs sit on top of one another and trade places, so the
   button never jumps and the state change is legible. */
.ma-launch-ico {
  grid-area: 1 / 1;
  display: grid;
  place-items: center;
  transition: opacity .12s ease-out, transform .2s var(--ma-ease2), filter .2s var(--ma-ease2);
}
.ma-launch-ico svg { width: 1.125rem; height: 1.125rem; display: block; }
.ma-launch-ico--mark {
  font-family: "Plus Jakarta Sans", sans-serif;
  font-weight: 800;
  font-size: 1.0625rem;
  line-height: 1;
}
.ma-launch[aria-expanded="true"] .ma-launch-ico--mark,
.ma-launch[aria-expanded="false"] .ma-launch-ico--close {
  opacity: 0;
  transform: scale(0.25);
  filter: blur(4px);
}

/* ---------- Panel ---------- */
.ma-panel {
  position: fixed;
  right: 1rem;
  bottom: 4.75rem;                        /* 48px launcher + 16px inset + 12px gap */
  z-index: 1200;
  display: flex;
  flex-direction: column;
  width: 25rem;
  max-width: calc(100vw - 2rem);
  height: 35rem;
  max-height: calc(100dvh - 7.5rem);
  overflow: hidden;
  border: 1px solid var(--ma-line);
  border-radius: 16px;
  background: var(--ma-bg);
  color: var(--ma-ink);
  transform-origin: bottom right;
  box-shadow: 0 1px 2px rgb(15 23 42 / 0.16), 0 24px 48px -24px rgb(15 23 42 / 0.55);
  animation: ma-in .3s var(--ma-ease) both;
}
.ma-panel[hidden] { display: none; }
.ma-panel.is-out { animation: ma-out .2s var(--ma-ease) both; }

@keyframes ma-in  { from { opacity: 0; transform: scale(.95) translateY(8px); } }
@keyframes ma-out { to   { opacity: 0; transform: scale(.95) translateY(8px); } }

/* ---------- Header ----------
   Name, what it is, and the two controls. No avatar, no status
   line, no "typically replies in" — none of it earns its height. */
.ma-head {
  display: flex;
  align-items: center;
  gap: .625rem;
  flex: none;
  padding: .75rem .75rem .75rem 1rem;
  border-bottom: 1px solid var(--ma-line-lo);
}
.ma-head-name {
  font-family: "Plus Jakarta Sans", sans-serif;
  font-weight: 700;
  font-size: .9375rem;
  letter-spacing: -0.01em;
  line-height: 1.1;
}
/* Says plainly what it is, at the first point of contact. */
.ma-head-sub { display: block; margin-top: .125rem; font-size: .6875rem; color: var(--ma-ink-dim); }
.ma-head-acts { margin-left: auto; display: flex; align-items: center; gap: .25rem; }

.ma-icon {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  flex: none;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--ma-ink-dim);
  cursor: pointer;
  transition: background .15s, color .15s;
}
a.ma-icon { text-decoration: none; }
.ma-icon:hover { background: rgb(255 255 255 / 0.07); color: var(--ma-ink); }
.ma-icon:focus-visible { outline: 2px solid var(--ma-accent); outline-offset: 1px; }
.ma-icon svg { width: 1rem; height: 1rem; }

/* ---------- Transcript ---------- */
.ma-log {
  flex: 1 1 auto;
  overflow-y: auto;
  scrollbar-gutter: stable;
  padding: 1.25rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
.ma-log::-webkit-scrollbar { width: 10px; }
.ma-log::-webkit-scrollbar-thumb { background: rgb(255 255 255 / 0.12); border-radius: 99px;
                                   border: 3px solid transparent; background-clip: content-box; }

/* Marc: no container, no avatar, no name label — position and plain
   text carry it, the way every current assistant does it. */
.ma-say {
  font-size: .9375rem;
  line-height: 1.65;
  color: var(--ma-ink);
  max-width: 34ch;
  max-width: 100%;
}
.ma-say strong { font-weight: 600; color: #fff; }
.ma-say + .ma-say { margin-top: -.5rem; }

/* The dealer's own turn is the only thing in a pill. */
.ma-me {
  align-self: flex-end;
  max-width: 80%;
  padding: .5rem .875rem;
  border-radius: 16px 16px 4px 16px;
  background: var(--ma-raised);
  color: var(--ma-ink);
  font-size: .875rem;
  line-height: 1.55;
}

/* Per-word reveal. Cheap, and it does more for how current this
   feels than any amount of chrome — the reply arrives rather than
   appearing. Killed outright under reduced motion. */
.ma-w {
  display: inline-block;
  opacity: 0;
  transform: translateY(4px);
  animation: ma-word .18s var(--ma-ease2) forwards;
}
@keyframes ma-word { to { opacity: 1; transform: none; } }

/* ---------- Result of an action ----------
   A quiet status line, not a toast: what changed, and the way back. */
.ma-did {
  display: flex;
  align-items: flex-start;
  gap: .5rem;
  padding: .625rem .75rem;
  border: 1px solid var(--ma-line);
  border-radius: 10px;
  background: rgb(255 255 255 / 0.03);
  font-size: .8125rem;
  line-height: 1.5;
  color: var(--ma-ink);
}
.ma-did svg { width: .875rem; height: .875rem; flex: none; margin-top: .1875rem; color: var(--ma-accent); }
.ma-did strong { font-weight: 600; color: #fff; }
.ma-undo {
  margin-left: auto;
  flex: none;
  border: 0;
  background: none;
  padding: 0;
  font-family: "Plus Jakarta Sans", sans-serif;
  font-weight: 700;
  font-size: .75rem;
  color: var(--ma-accent);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.ma-undo:hover { color: #ffc23d; }

/* ---------- Suggestions ---------- */
.ma-chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.ma-chip {
  border: 1px solid var(--ma-line);
  border-radius: 999px;
  background: transparent;
  color: var(--ma-ink);
  font-family: inherit;
  font-size: .8125rem;
  line-height: 1.3;
  padding: .375rem .75rem;
  cursor: pointer;
  transition: background .15s, border-color .15s;
}
.ma-chip:hover { background: rgb(255 255 255 / 0.06); border-color: rgb(255 255 255 / 0.2); }
.ma-chip:focus-visible { outline: 2px solid var(--ma-accent); outline-offset: 1px; }
.ma-chip small { display: block; margin-top: .0625rem; font-size: .6875rem; color: var(--ma-ink-dim); }

/* ---------- Empty state ----------
   One line, then the things worth asking for. No welcome speech. */
.ma-empty { margin: auto 0; display: flex; flex-direction: column; gap: 1rem; }
.ma-empty-h {
  font-family: "Plus Jakarta Sans", sans-serif;
  font-weight: 700;
  font-size: 1.375rem;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: #fff;
}
.ma-empty-h span { color: var(--ma-ink-dim); }

/* ---------- Composer ----------
   The roomiest object in the panel, which is the point: it is the
   thing you came to use. */
.ma-form { flex: none; padding: .75rem; }
.ma-field {
  display: flex;
  align-items: flex-end;
  gap: .5rem;
  padding: .375rem .375rem .375rem .875rem;
  border: 1px solid var(--ma-line);
  border-radius: 22px;
  background: var(--ma-raised);
  transition: border-color .15s;
}
.ma-field:focus-within { border-color: rgb(255 255 255 / 0.24); }
.ma-input {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 2rem;
  max-height: 7.5rem;
  padding: .3125rem 0;
  border: 0;
  border-radius: 0;
  background: none;
  color: var(--ma-ink);
  font-family: inherit;
  font-size: .875rem;
  line-height: 1.5;
  resize: none;
  overflow-y: auto;
}
.ma-input:focus { outline: none; }
.ma-input::placeholder { color: var(--ma-ink-dim); }

/* Grey until there is something to send, gold the moment there is. */
.ma-send {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  flex: none;
  border: 0;
  border-radius: 999px;
  background: rgb(255 255 255 / 0.10);
  color: var(--ma-ink-dim);
  cursor: not-allowed;
  transition: background .15s, color .15s;
}
.ma-send svg { width: 1rem; height: 1rem; }
.ma-send.is-ready { background: var(--ma-accent); color: var(--ma-bg); cursor: pointer; }
.ma-send.is-ready:hover { background: #ffc23d; }
.ma-send:focus-visible { outline: 2px solid var(--ma-accent); outline-offset: 2px; }

.ma-foot {
  flex: none;
  padding: 0 1rem .75rem;
  font-size: .6875rem;
  line-height: 1.45;
  color: var(--ma-ink-dim);
  text-align: center;
}

/* Announces a finished reply once, rather than every word of it. */
.ma-sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- Phone: the panel takes the screen ---------- */
@media (max-width: 47.99rem) {
  .ma-panel {
    inset: 0;
    width: auto;
    height: auto;
    max-width: none;
    max-height: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    transform-origin: bottom center;
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
  }
  .ma-launch { right: .875rem; bottom: .875rem; }
}

@media (prefers-reduced-motion: reduce) {
  .ma-launch, .ma-launch-ico, .ma-icon, .ma-chip, .ma-send, .ma-field { transition: none; }
  .ma-panel, .ma-panel.is-out { animation: none; }
  .ma-w { animation: none; opacity: 1; transform: none; }
}


/* ============================================================
   Toasts — MMC.toast (global.js).
   Classic corner stack: fixed bottom-right on desktop, full-width
   bottom on phones, newest nearest the corner, capped at four.
   Auto-dismiss runs off the progress bar's CSS animation, so
   hovering or focusing a toast pauses the clock with no JS timer.
   Same .15s / cubic-bezier(.4,0,.2,1) move as the nav links.
   ============================================================ */
.mmc-toasts {
  position: fixed; right: 1rem; bottom: 1rem; z-index: 1300;
  display: flex; flex-direction: column; align-items: stretch;
  width: 22rem; max-width: calc(100vw - 2rem);
  pointer-events: none;
}
/* Sit clear of the assistant launcher on pages that have one. */
body:has(.ma-launch) .mmc-toasts { bottom: 4.75rem; }

/* Traffic-light surfaces: a solid pale-to-mid card of the variant
   colour — opaque, nothing shows through — with a 1px border and a
   3px accent edge in the full colour, and deep variant ink that
   holds 4.5:1 on the stronger ground. Info and loading stay neutral:
   they are not traffic-light states, and a loading toast takes on
   its resolved colour in place through the background transition. */
.mmc-toast {
  pointer-events: auto;
  position: relative; overflow: hidden;
  display: flex; align-items: flex-start; gap: 0.625rem;
  margin-top: 0.5rem;
  padding: 0.75rem 2.25rem 0.75rem 0.875rem;
  border: 1px solid var(--line); border-left-width: 3px; background: #fff;
  border-radius: var(--radius);
  box-shadow: 0 4px 12px -2px rgb(15 23 42 / 0.18), 0 16px 40px -12px rgb(15 23 42 / 0.4);
  animation: mmc-toast-in 0.15s cubic-bezier(0.4, 0, 0.2, 1) both;
  transition:
    height 0.15s cubic-bezier(0.4, 0, 0.2, 1),
    margin 0.15s cubic-bezier(0.4, 0, 0.2, 1),
    padding 0.15s cubic-bezier(0.4, 0, 0.2, 1),
    opacity 0.15s cubic-bezier(0.4, 0, 0.2, 1),
    background-color 0.15s cubic-bezier(0.4, 0, 0.2, 1),
    border-color 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}
.mmc-toast.is-success { border-color: #16a34a; background: #bbf7d0; }
.mmc-toast.is-warning { border-color: #b45309; background: #fed7aa; }
.mmc-toast.is-error   { border-color: #dc2626; background: #fecaca; }
.mmc-toast.is-info,
.mmc-toast.is-loading { border-color: var(--line); border-left-color: #64748b; background: #fff; }

.mmc-toast.is-success .mmc-toast-title { color: #14532d; }
.mmc-toast.is-success .mmc-toast-body  { color: #166534; }
.mmc-toast.is-warning .mmc-toast-title { color: #78350f; }
.mmc-toast.is-warning .mmc-toast-body  { color: #92400e; }
.mmc-toast.is-error   .mmc-toast-title { color: #7f1d1d; }
.mmc-toast.is-error   .mmc-toast-body  { color: #991b1b; }
@keyframes mmc-toast-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}
/* Fade + collapse out; the stack above reflows through the same curve. */
.mmc-toast.is-out {
  height: 0 !important;
  margin-top: 0; padding-top: 0; padding-bottom: 0;
  border-top-width: 0; border-bottom-width: 0;
  opacity: 0;
}

.mmc-toast-ico { flex: none; width: 1.125rem; height: 1.125rem; margin-top: 0.0625rem; }
.mmc-toast-ico svg { width: 100%; height: 100%; display: block; }
.mmc-toast.is-success :is(.mmc-toast-ico, .mmc-toast-bar) { color: #16a34a; }
.mmc-toast.is-error   :is(.mmc-toast-ico, .mmc-toast-bar) { color: #dc2626; }
.mmc-toast.is-warning :is(.mmc-toast-ico, .mmc-toast-bar) { color: #b45309; }
.mmc-toast.is-info    :is(.mmc-toast-ico, .mmc-toast-bar) { color: var(--dark); }
.mmc-toast.is-loading .mmc-toast-ico { color: var(--text-muted); }

.mmc-toast-spin { animation: mmc-toast-spin 0.8s linear infinite; }
@keyframes mmc-toast-spin { to { transform: rotate(360deg); } }

.mmc-toast-txt { min-width: 0; flex: 1; }
.mmc-toast-title {
  margin: 0;
  font-family: "Plus Jakarta Sans", sans-serif; font-weight: 700;
  font-size: 0.8125rem; line-height: 1.35; color: var(--dark);
  overflow-wrap: break-word;
}
.mmc-toast-count { font-weight: 600; color: inherit; opacity: 0.85; white-space: nowrap; }
.mmc-toast-body {
  margin: 0.125rem 0 0;
  font-size: 0.75rem; line-height: 1.5; color: var(--text-muted);
  overflow-wrap: break-word;
}
.mmc-toast-act {
  margin: 0.375rem 0 0; padding: 0; border: 0; background: none; cursor: pointer;
  font-family: "Plus Jakarta Sans", sans-serif; font-weight: 700; font-size: 0.75rem;
  color: var(--dark); text-decoration: underline; text-underline-offset: 2px;
  transition: color 0.15s;
}
.mmc-toast-act:hover { opacity: 0.7; }
.mmc-toast-act:focus-visible { outline: 2px solid var(--dark); outline-offset: 2px; }

.mmc-toast-x {
  position: absolute; top: 0.5rem; right: 0.5rem;
  display: grid; place-items: center; width: 1.375rem; height: 1.375rem;
  padding: 0; border: 0; background: none; cursor: pointer; color: var(--text-main);
  border-radius: var(--radius);
  transition: background 0.15s, color 0.15s;
}
.mmc-toast-x:hover { background: rgb(15 23 42 / 0.08); color: var(--dark); }
.mmc-toast-x:focus-visible { outline: 2px solid var(--dark); outline-offset: 1px; }
.mmc-toast-x svg { width: 0.75rem; height: 0.75rem; display: block; }

/* The visible clock. animationend on this is what dismisses the toast,
   so pausing it really does stop the timer, not just the picture. */
.mmc-toast-bar {
  position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: currentColor;
  transform-origin: left;
  animation: mmc-toast-bar linear both;
}
@keyframes mmc-toast-bar {
  from { transform: scaleX(1); }
  to   { transform: scaleX(0); }
}
.mmc-toast:hover .mmc-toast-bar,
.mmc-toast:focus-within .mmc-toast-bar { animation-play-state: paused; }

/* Screen-reader announcers; one polite, one assertive for errors. */
.mmc-toast-sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Phone: the stack takes the full width of the bottom edge. */
@media (max-width: 47.99rem) {
  .mmc-toasts { left: 0.75rem; right: 0.75rem; bottom: 0.75rem; width: auto; max-width: none; }
  body:has(.ma-launch) .mmc-toasts { bottom: 4.75rem; }
}

@media (prefers-reduced-motion: reduce) {
  .mmc-toast { animation-name: mmc-toast-fade; transition: opacity 0.15s linear; }
  .mmc-toast-spin { animation-duration: 1.6s; }
}
@keyframes mmc-toast-fade { from { opacity: 0; } to { opacity: 1; } }