/* p.stonn "how it works" demos. Namespaced with dm- to avoid colliding with the
   app's own classes, and built entirely on the app's design tokens so light/dark
   themes track the rest of the site. Vehicle dot colours reuse the section hues. */

.features { --v1: var(--sec-schedule); --v2: var(--sec-vehicles); --v3: var(--sec-activity);
  display: flex; flex-direction: column; gap: 48px; margin: 8px 0 12px; }

/* Each feature is an explainer beside its demo. Because every demo is its own
   full-width row, no card has to height-match a neighbour (the problem the 2x2
   gallery had), and each demo gets room — the roster's 7 day cells fit their
   plates comfortably instead of barely. Rows alternate the demo side on wide
   screens; on narrow screens everything stacks, text above its demo. */
.feature { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 26px 46px; align-items: center; }
/* Alternate the demo side, but keep the demo in the WIDER track either way —
   otherwise the roster's 7 day cells land in the narrow column and clip plates. */
.features > .feature:nth-child(even) { grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); }
.features > .feature:nth-child(even) .feature-text { order: 2; }
.feature-text h2 { margin: 0 0 9px; font-size: 20px; font-weight: 700; letter-spacing: -.01em; color: var(--ink); }
.feature-text p { margin: 0; color: var(--ink); font-size: 15px; line-height: 1.6; }
.feature-demo { width: 100%; }
@media (max-width: 760px) {
  /* Stack every feature (text above its demo). The even-row desktop overrides
     have higher specificity, so they must be reset at matching specificity or
     they leak into mobile and keep even rows (roster, guest) cramped two-up. */
  .feature,
  .features > .feature:nth-child(even) { grid-template-columns: 1fr; gap: 15px; }
  .features > .feature .feature-text,
  .features > .feature:nth-child(even) .feature-text { order: 0; }
  .feature-demo { max-width: 420px; margin-inline: auto; }
}

.dm figure, figure.dm { margin: 0; }
.dm-label { display: flex; align-items: baseline; gap: 8px; margin-bottom: 10px; padding-left: 2px; }
.dm-label .t { font-size: 14px; font-weight: 650; letter-spacing: -.01em; color: var(--ink); }
.dm-label .s { font-size: 12px; color: var(--muted); }

.dm-phone {
  position: relative; background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow-lg); padding: 16px 16px 18px; overflow: hidden;
}
.dm-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 13px; }
/* The frame label is chrome, not a heading: as an h2 it put "This week" and
   "One-off booking" into the document outline beside the real section titles. */
.dm-head .dm-title { margin: 0; font-size: 14px; font-weight: 650; letter-spacing: -.01em; display: flex; align-items: center; gap: 8px; color: var(--ink); }
.dm-ic { width: 22px; height: 22px; border-radius: 7px; display: grid; place-items: center; background: color-mix(in srgb, var(--primary) 15%, transparent); color: var(--primary); flex: 0 0 auto; }
.dm-ic svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.dm-sample { font-size: 10px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); border: 1px dashed var(--line); border-radius: 999px; padding: 3px 8px; }

.dm-dot { width: 11px; height: 11px; border-radius: 50%; flex: 0 0 auto; }
.dm-rego { font-size: 12px; font-weight: 700; letter-spacing: .02em; font-variant-numeric: tabular-nums; color: var(--ink); }
.dm-cname { font-size: 10px; color: var(--muted); line-height: 1; }

/* weekly roster */
.dm-week { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; }
/* On narrow screens the demo is full-width and 7 columns get cramped, so wrap to
   4 like the real app's roster does — plates get plenty of room. */
@media (max-width: 760px) { .dm-week { grid-template-columns: repeat(4, 1fr); } }
.dm-day { position: relative; overflow: hidden; height: 62px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); padding: 6px 3px; display: flex; flex-direction: column; align-items: center; gap: 6px; transition: border-color .25s, box-shadow .25s, transform .18s; }
.dm-day.today { border-color: color-mix(in srgb, var(--accent) 60%, var(--line)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 45%, transparent); }
.dm-day.tap { transform: scale(.93); }
.dm-dname { font-size: 10px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.dm-chip { display: flex; flex-direction: column; align-items: center; gap: 3px; opacity: 0; transform: translateY(4px) scale(.9); transition: opacity .3s, transform .3s cubic-bezier(.2,.9,.3,1.3); }
.dm-chip.show { opacity: 1; transform: none; }
.dm-chip .dm-rego { font-size: 9px; letter-spacing: 0; }
.dm-empty { color: var(--line); font-size: 16px; line-height: 1; margin-top: 6px; }

.dm-picker { position: absolute; z-index: 6; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow-lg); padding: 6px; width: 158px; opacity: 0; transform: translateY(-6px) scale(.96); transform-origin: top left; pointer-events: none; transition: opacity .2s, transform .2s; }
.dm-picker.show { opacity: 1; transform: none; }
.dm-picker .ph { font-size: 10px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); padding: 4px 8px 6px; font-weight: 600; }
.dm-opt { display: flex; align-items: center; gap: 9px; padding: 7px 9px; border-radius: 8px; transition: background .15s; }
.dm-opt.hot { background: color-mix(in srgb, var(--primary) 12%, transparent); }
.dm-opt .txt { display: flex; flex-direction: column; gap: 1px; line-height: 1.15; }

.dm-permit { margin-top: 14px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: color-mix(in srgb, var(--primary) 5%, var(--surface)); padding: 11px 12px; display: flex; align-items: center; gap: 10px; }
.dm-permit .plab { font-size: 11.5px; color: var(--muted); font-weight: 600; }
.dm-permit .pnow { margin-top: 3px; display: flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 650; color: var(--ink); }
.dm-permit .pnow .dm-rego { font-size: 12.5px; }
.dm-sync { margin-left: auto; width: 28px; height: 28px; border-radius: 50%; background: color-mix(in srgb, var(--ok) 15%, transparent); color: var(--ok); display: grid; place-items: center; flex: 0 0 auto; }
.dm-sync svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.dm-sync.pulse { animation: dm-pulse .6s ease; }
@keyframes dm-pulse { 0% { transform: scale(1); } 40% { transform: scale(1.22); } 100% { transform: scale(1); } }

.dm-cursor { position: absolute; z-index: 8; left: 0; top: 0; width: 20px; height: 20px; pointer-events: none; opacity: 0; transition: transform .5s cubic-bezier(.5,0,.2,1), opacity .3s; filter: drop-shadow(0 2px 3px rgba(0,0,0,.28)); }
.dm-cursor.on { opacity: 1; }

.dm-caption { margin-top: 14px; text-align: center; min-height: 44px; font-size: 13px; color: var(--muted); display: flex; align-items: center; justify-content: center; }
/* Captions fade IN PLACE — no slide. They swap every couple of seconds across
   five figures, and a 4px translate on each swap read as the whole page
   subtly moving, even though nothing reflows. */
.dm-caption span { display: inline-block; opacity: 0; transition: opacity .35s; }
.dm-caption span.show { opacity: 1; }
.dm-caption b { color: var(--ink); font-weight: 650; }

/* one-off booking */
.dm-fld { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 9px 11px; margin-bottom: 8px; background: var(--surface); transition: border-color .25s, background .25s; }
.dm-fld.lit { border-color: color-mix(in srgb, var(--primary) 55%, var(--line)); background: color-mix(in srgb, var(--primary) 6%, var(--surface)); }
.dm-fld .k { font-size: 10px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); font-weight: 600; }
.dm-fld .val { margin-top: 4px; font-size: 13px; font-weight: 600; color: var(--ink); display: flex; align-items: center; gap: 7px; height: 22px; line-height: 1; }
.dm-fade { opacity: 0; transition: opacity .3s; }
.dm-fade.show { opacity: 1; }
.dm-btn { margin-top: 4px; width: 100%; display: flex; align-items: center; justify-content: center; gap: 6px; background: var(--primary); color: var(--on-primary); font-weight: 650; font-size: 13px; padding: 9px; border-radius: var(--radius-sm); transition: transform .15s, filter .15s; }
/* Static illustration for the guides: the council's sign-in page, drawn. Fixed
   light colours on purpose — it depicts another site, so it does not follow
   our theme — with the council's own navy for the button and links so the real
   page is recognisable when it opens. */
.dm-councillink { display: block; color: inherit; text-decoration: none; border-radius: var(--radius); }
.dm-councillink:hover .dm-councilcard, .dm-councillink:focus-visible .dm-councilcard { box-shadow: 0 6px 22px rgba(20, 50, 90, .18); }
.dm-councillink:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; }
.dm-council { background: linear-gradient(180deg, #eef3fb, #f7f9fd); border: 1px solid #dfe6f1; border-radius: var(--radius); padding: 18px 16px; }
.dm-councilcard { background: #fff; border: 1px solid #e3e8ef; border-radius: 6px; padding: 16px 14px 14px; box-shadow: 0 2px 10px rgba(20, 50, 90, .08); transition: box-shadow .2s; }
.dm-cbrand { color: #235789; font-weight: 800; font-size: 13px; letter-spacing: .04em; text-transform: uppercase; text-align: center; margin-bottom: 14px; }
.dm-cfld { margin-bottom: 10px; }
.dm-cfld .k { display: flex; align-items: center; font-size: 11.5px; font-weight: 600; color: #333; margin-bottom: 4px; }
.dm-cfld .val { border: 1px solid #ccd3dc; border-radius: 4px; padding: 7px 9px; font-size: 12px; color: #8a929c; background: #fff; }
.dm-cbtn { margin-top: 12px; background: #235789; color: #fff; text-align: center; font-weight: 600; font-size: 12.5px; padding: 8px; border-radius: 4px; }
.dm-clinks { display: grid; gap: 9px; justify-items: center; margin-top: 13px; font-size: 12px; color: #235789; }
.dm-clinks > span { display: inline-flex; align-items: center; text-decoration: underline; text-underline-offset: 2px; }
.dm-mark { display: inline-grid; place-items: center; width: 17px; height: 17px; border-radius: 50%; background: var(--primary); color: var(--on-primary); font-size: 10.5px; font-weight: 700; margin-right: 7px; flex: 0 0 auto; text-decoration: none; }
.dm-static-cap { margin-top: 10px; font-size: 12px; color: var(--muted); text-align: center; line-height: 1.4; }
.dm-btn svg { width: 14px; height: 14px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.dm-btn.press { transform: scale(.97); filter: brightness(1.06); }
.dm-uph { font-size: 10px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); font-weight: 600; margin: 14px 0 8px; }
.dm-booking { display: flex; align-items: center; gap: 9px; border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 9px 11px; opacity: 0; transform: translateX(10px); transition: opacity .4s, transform .4s cubic-bezier(.2,.9,.3,1.2); }
.dm-booking.show { opacity: 1; transform: none; }
.dm-booking .when { margin-left: auto; font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; text-align: right; }
.dm-cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; margin-top: 12px; }
.dm-calday { text-align: center; font-size: 9.5px; color: var(--muted); }
.dm-caldot { height: 7px; margin-top: 4px; border-radius: 3px; background: color-mix(in srgb, var(--line) 60%, transparent); transition: background .3s; }
.dm-caldot.on { background: var(--v2); }

/* notifications */
.dm-toggles { display: flex; gap: 7px; margin-bottom: 12px; }
.dm-toggle { flex: 1; display: flex; align-items: center; gap: 8px; border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 8px 10px; font-size: 12px; font-weight: 600; color: var(--ink); }
.dm-swi { margin-left: auto; width: 30px; height: 18px; border-radius: 999px; background: var(--primary); position: relative; flex: 0 0 auto; }
.dm-swi::after { content: ""; position: absolute; top: 2px; left: 14px; width: 14px; height: 14px; border-radius: 50%; background: #fff; }
.dm-push { display: flex; gap: 11px; align-items: flex-start; border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 11px 12px; margin-top: 9px; background: var(--surface); box-shadow: var(--shadow); opacity: 0; transform: translateY(-10px); transition: opacity .4s, transform .4s cubic-bezier(.2,.9,.3,1.15); }
.dm-push.show { opacity: 1; transform: none; }
.dm-push .badge { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; flex: 0 0 auto; color: var(--on-primary); }
.dm-push .badge svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.dm-push .bd { min-width: 0; }
.dm-push .ttl { font-size: 12px; font-weight: 700; color: var(--ink); display: flex; justify-content: space-between; gap: 8px; }
.dm-push .ttl .ago { font-size: 10.5px; color: var(--muted); font-weight: 500; }
.dm-push .msg { font-size: 12px; color: var(--muted); margin-top: 2px; line-height: 1.35; }
.dm-push .msg b { color: var(--ink); }

/* connect */
.dm-pw { letter-spacing: 3px; font-size: 15px; }
.dm-disabled { opacity: .72; }
.dm-result { display: flex; align-items: center; gap: 10px; border: 1px solid color-mix(in srgb, var(--ok) 40%, var(--line)); background: color-mix(in srgb, var(--ok) 8%, var(--surface)); border-radius: var(--radius-sm); padding: 11px 12px; margin-top: 10px; opacity: 0; transform: translateY(6px); transition: opacity .4s, transform .4s; }
.dm-result.show { opacity: 1; transform: none; }
.dm-result .chk { width: 26px; height: 26px; border-radius: 50%; background: color-mix(in srgb, var(--ok) 18%, transparent); color: var(--ok); display: grid; place-items: center; flex: 0 0 auto; }
.dm-result .chk svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.dm-result .msg { font-size: 12px; line-height: 1.4; color: var(--ink); }
.dm-result .msg b { font-weight: 650; }

/* hand a visitor access (guest link / QR) */
.dm-gsub { font-size: 11.5px; color: var(--muted); margin-bottom: 10px; line-height: 1.4; }
.dm-gcars { display: flex; flex-direction: column; gap: 7px; }
.dm-gcar { display: flex; align-items: center; gap: 9px; border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 9px 11px; background: var(--surface);
  opacity: 0; transform: translateY(4px); transition: opacity .3s, transform .3s cubic-bezier(.2,.9,.3,1.3), border-color .2s, background .2s; }
.dm-gcar.in { opacity: 1; transform: none; }
.dm-gcar.on { border-color: color-mix(in srgb, var(--primary) 55%, var(--line)); background: color-mix(in srgb, var(--primary) 7%, var(--surface)); }
.dm-gcar .dm-cname { margin-left: 1px; }
.dm-gcar .dm-tick { margin-left: auto; color: var(--ok); display: grid; place-items: center; opacity: 0; transform: scale(.7); transition: opacity .2s, transform .2s cubic-bezier(.2,.9,.3,1.4); }
.dm-gcar .dm-tick svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.dm-gcar.on .dm-tick { opacity: 1; transform: none; }
/* until-text on its OWN reserved line. A FIXED height and matching line-height,
   not min-height: the inherited line-height made the text render ~17px tall, so
   a 15px minimum let the strip grow 2px when the text appeared and shrink when
   it cleared — a subtle whole-page bounce on every loop. */
.dm-guntil { height: 17px; line-height: 17px; margin-top: 3px; color: var(--muted); font-weight: 600; font-size: 11px; overflow: hidden; }

/* pretend QR, ties the card to the "link or QR" feature. Always dark-on-white
   (a QR is), independent of theme. */
.dm-qrwrap { display: flex; align-items: center; gap: 12px; margin: 4px 0 13px; }
.dm-qr { display: block; width: 56px; height: 56px; background: #fff; border-radius: 9px; padding: 5px; box-sizing: border-box; box-shadow: var(--shadow); flex: 0 0 auto; }
.dm-qrcap { font-size: 11px; color: var(--muted); line-height: 1.45; }

/* overlay "second phone" screens (visitor QR / door QR flows): a card that
   slides over the base phone so one figure can show both sides of a flow
   without a second device frame. Hidden until .show, like .dm-push. */
.dm-screen { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm);
  box-shadow: var(--shadow-lg); padding: 12px; opacity: 0; transform: translateY(-8px); pointer-events: none;
  transition: opacity .35s, transform .35s cubic-bezier(.2,.9,.3,1.15); }
/* As an overlay it plays a whole second phone screen, so it covers the base
   card completely — content pokes out beneath it otherwise. */
.dm-screen.dm-over { bottom: 12px; }
.dm-screen.show { opacity: 1; transform: none; }
.dm-vlabel { font-size: 10px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); font-weight: 700; }
/* status line under a visitor action: reserved height so spinner → tick never
   reflows the card. */
.dm-vstat { min-height: 34px; margin-top: 8px; display: flex; align-items: center; gap: 8px;
  font-size: 12px; line-height: 1.35; color: var(--muted); }
.dm-vstat b { color: var(--ink); }
.dm-vstat.ok { color: var(--ink); }
.dm-vstat .dm-vtick { width: 20px; height: 20px; border-radius: 50%; background: color-mix(in srgb, var(--ok) 18%, transparent);
  color: var(--ok); display: grid; place-items: center; flex: 0 0 auto; }
.dm-vstat .dm-vtick svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.dm-spin { width: 14px; height: 14px; border-radius: 50%; border: 2px solid color-mix(in srgb, var(--primary) 30%, transparent);
  border-top-color: var(--primary); flex: 0 0 auto; animation: dm-spin .8s linear infinite; }
@keyframes dm-spin { to { transform: rotate(360deg); } }
/* approve / decline pair on the door-QR notification */
.dm-actions { display: flex; gap: 8px; margin-top: 10px; }
.dm-actions .dm-btn { margin-top: 0; }
.dm-btn-ghost { background: var(--surface); color: var(--ink); border: 1px solid var(--line); }
.dm-btn-sm { font-size: 11px; padding: 6px 7px; flex: 1; }
.dm-btn-sm svg { width: 12px; height: 12px; }

/* The on-screen QR's centre stage: a RESERVED slot the big code fades into, so
   its arrival can never reflow the card. */
.dm-qrstage { min-height: 186px; display: grid; place-items: center; text-align: center; padding-top: 10px; }
.dm-qr-lg { width: 128px; height: 128px; margin: 0 auto 9px; display: block; }
.dm-qrline { font-size: 11.5px; color: var(--muted); line-height: 1.45; max-width: 260px; margin: 0 auto; }

/* The printed QR in situ: fridge + mobile, side by side. */
.dm-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: stretch; min-height: 218px; }
/* A suggestion of a fridge front: brushed panel, door seam, a handle — enough
   to say "kitchen" without a whole appliance catalogue. */
.dm-fridge { position: relative; border: 1px solid var(--line); border-radius: 12px; padding: 26px 12px 14px;
  background: linear-gradient(165deg, color-mix(in srgb, var(--ink) 4%, var(--surface)), color-mix(in srgb, var(--ink) 9%, var(--surface)));
  display: grid; place-items: center; overflow: hidden; }
.dm-fridge-seam { position: absolute; top: 18px; left: 0; right: 0; height: 2px; background: color-mix(in srgb, var(--ink) 12%, transparent); }
.dm-fridge-handle { position: absolute; top: 26px; right: 7px; width: 5px; height: 46px; border-radius: 3px;
  background: color-mix(in srgb, var(--ink) 18%, var(--surface)); }
/* The paper: white always (it's paper, like the QR), a shade of a tilt, a strip
   of tape. Kept dark-on-white in both themes. */
.dm-paper { position: relative; background: #fff; color: #1a2233; border-radius: 3px; padding: 12px 10px 9px;
  width: min(150px, 92%); text-align: center; transform: rotate(-2.2deg);
  box-shadow: 0 2px 6px rgba(0,0,0,.18), 0 8px 18px rgba(0,0,0,.12); transition: transform .25s; }
.dm-paper.lit { transform: rotate(-2.2deg) scale(1.04); }
.dm-tape { position: absolute; top: -7px; left: 50%; transform: translateX(-50%) rotate(1.5deg); width: 46px; height: 14px;
  background: rgba(255, 244, 214, .82); border-left: 1px solid rgba(0,0,0,.06); border-right: 1px solid rgba(0,0,0,.06); }
.dm-paper-kicker { font-size: 8.5px; text-transform: uppercase; letter-spacing: .09em; font-weight: 700; color: #0d9488; }
.dm-paper-lead { font-size: 10px; font-weight: 650; line-height: 1.3; }
/* The holder's mobile: a slim frame whose screen stacks its states in one grid
   cell, so notification → outcome swaps without moving a pixel of layout. */
.dm-mobile { border: 2px solid color-mix(in srgb, var(--ink) 22%, var(--line)); border-radius: 18px; background: var(--surface);
  padding: 16px 8px 12px; position: relative; display: flex; flex-direction: column; }
.dm-mobile-notch { position: absolute; top: 6px; left: 50%; transform: translateX(-50%); width: 38px; height: 5px;
  border-radius: 999px; background: color-mix(in srgb, var(--ink) 18%, var(--line)); }
.dm-mobile-screen { flex: 1; display: grid; padding-top: 6px; }
.dm-mscene { grid-area: 1 / 1; align-self: start; }
.dm-mpush { display: flex; gap: 8px; align-items: flex-start; border: 1px solid var(--line); border-radius: 10px;
  padding: 8px; background: var(--surface); box-shadow: var(--shadow); }
.dm-mbadge { width: 22px; height: 22px; border-radius: 7px; display: grid; place-items: center; flex: 0 0 auto;
  background: var(--accent); color: var(--on-primary); }
.dm-mbadge svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.dm-mtxt { font-size: 10.5px; line-height: 1.4; color: var(--muted); min-width: 0; }
.dm-mtxt b { color: var(--ink); font-weight: 700; }

/* mini demo for the landing hero */
.dm-mini { max-width: 340px; margin: 0 auto; }
.dm-mini .dm-day { height: 54px; }
.dm-mini .dm-permit { margin-top: 12px; }

/* The vehicle-dot colour vars are declared on .features for the /how demos; the
   landing showcase lives outside .features, so declare them here too — otherwise
   the car dots and the share badge resolve to an undefined var and vanish. */
.dm-showcase { --v1: var(--sec-schedule); --v2: var(--sec-vehicles); --v3: var(--sec-activity); }

/* landing showcase: the notify + share cards slide in over the phone's top edge,
   one at a time (driven by initShowcase). Absolutely positioned so they overlay
   the header for those beats without reflowing the week + permit below. */
.dm-over { position: absolute; top: 12px; left: 12px; right: 12px; margin: 0; z-index: 7; }

.dm-foot { text-align: center; margin-top: 26px; font-size: 12px; color: var(--muted); }

@media (prefers-reduced-motion: reduce) {
  .dm-cursor { display: none; }
  .dm-chip, .dm-caption span, .dm-picker, .dm-booking, .dm-push, .dm-result, .dm-fade, .dm-caldot, .dm-fld, .dm-btn, .dm-screen, .dm-gcar, .dm-vstat, .dm-paper { transition: none !important; }
  .dm-spin { animation: none; }
}