.flatpickr-calendar {
  border: 1px solid rgb(226 232 240) !important;
  border-radius: 1rem !important;
  box-shadow: 0 18px 50px rgba(15, 23, 42, 0.18) !important;
  font-family: inherit !important;
  overflow: hidden !important;
}

.flatpickr-months {
  background: white !important;
}

.flatpickr-current-month {
  font-size: 1rem !important;
  font-weight: 700 !important;
  color: rgb(15 23 42) !important;
  padding-top: 0.35rem !important;
}

.flatpickr-weekdays {
  background: white !important;
}

span.flatpickr-weekday {
  color: rgb(100 116 139) !important;
  font-weight: 600 !important;
  font-size: 0.75rem !important;
}

.flatpickr-day {
  border-radius: 0.75rem !important;
  color: rgb(30 41 59) !important;
}

.flatpickr-day:hover {
  background: rgb(248 250 252) !important;
  border-color: rgb(248 250 252) !important;
}

.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange {
  background: rgb(15 23 42) !important;
  border-color: rgb(15 23 42) !important;
  color: white !important;
}

.flatpickr-day.today {
  border-color: rgb(148 163 184) !important;
}

.flatpickr-time {
  border-top: 1px solid rgb(241 245 249) !important;
  background: white !important;
  height: 52px !important;
}

.flatpickr-time input,
.flatpickr-time .flatpickr-am-pm {
  color: rgb(30 41 59) !important;
  font-weight: 600 !important;
}

.flatpickr-time input:hover,
.flatpickr-time .flatpickr-am-pm:hover,
.flatpickr-time input:focus,
.flatpickr-time .flatpickr-am-pm:focus {
  background: rgb(248 250 252) !important;
}

.flatpickr-prev-month,
.flatpickr-next-month {
  fill: rgb(100 116 139) !important;
}

.flatpickr-prev-month:hover,
.flatpickr-next-month:hover {
  fill: rgb(15 23 42) !important;
}

.flatpickr-calendar.arrowTop:before,
.flatpickr-calendar.arrowTop:after {
  display: none !important;
}
/* Public authentication screens; kept separate from the signed-in application shell. */
.of-auth-page {
  font-family:"DM Sans",system-ui,-apple-system,sans-serif;
  -webkit-tap-highlight-color:transparent;
  -webkit-text-size-adjust:100%;
  overscroll-behavior-y:none;
}
.of-auth-display { font-family:"Manrope","DM Sans",system-ui,sans-serif; }
.of-auth-mono { font-family:ui-monospace,SFMono-Regular,Menlo,monospace; }
.of-auth-input {
  width:100%; min-height:52px; padding:0 1rem;
  border:1px solid #d8d6df; border-radius:.45rem; background:#fbfafc;
  font-family:inherit; font-size:16px; font-weight:500; line-height:1.4; color:#111128;
  transition:border-color .15s ease,box-shadow .15s ease,background .15s ease;
  appearance:none;
}
.of-auth-input::placeholder { color:#9793a2; font-weight:400; }
.of-auth-input:focus { outline:none; border-color:#6b59bf; background:#fff; box-shadow:0 0 0 4px rgba(91,72,181,.14); }
.of-auth-input:-webkit-autofill,.of-auth-input:-webkit-autofill:focus {
  -webkit-text-fill-color:#111128; -webkit-box-shadow:0 0 0 1000px #fff inset;
  transition:background-color 9999s ease-in-out 0s;
}
.of-auth-btn {
  min-height:52px; border:0; cursor:pointer; background:#21155e;
  box-shadow:0 14px 30px -14px rgba(33,21,94,.55);
  transition:transform .12s ease,box-shadow .2s ease,background .2s ease,opacity .2s ease;
  touch-action:manipulation;
}
.of-auth-btn:hover { background:#322080; box-shadow:0 18px 36px -14px rgba(33,21,94,.65); }
.of-auth-btn:active { transform:scale(.985); }
.of-auth-btn:disabled { opacity:.6; cursor:default; transform:none; }
.of-auth-btn:focus-visible { outline:2px solid #111128; outline-offset:3px; }
.of-auth-check>i {
  display:flex; width:19px; height:19px; flex:none; align-items:center; justify-content:center;
  border:1px solid #c8c5d0; border-radius:.25rem; background:#fff; color:transparent;
  font-size:.72rem; font-style:normal; transition:background .15s,border-color .15s,color .15s,box-shadow .15s;
}
.of-auth-check input:checked+i { border-color:#5a4aaa; background:#5a4aaa; color:#fff; }
.of-auth-check input:focus-visible+i { box-shadow:0 0 0 4px rgba(91,72,181,.14); }
.of-auth-mobile-benefits { padding:1rem 0; border-top:1px solid #e3e1e7; border-bottom:1px solid #e3e1e7; }
.of-auth-mobile-benefits span { display:flex; align-items:center; gap:.5rem; color:#5f5d6c; font-size:.72rem; font-weight:600; }
.of-auth-mobile-benefits i { display:flex; width:17px; height:17px; flex:none; align-items:center; justify-content:center; border-radius:50%; background:#f0edff; color:#5a4aaa; font-size:.62rem; font-style:normal; }
.of-auth-grid {
  background-image:linear-gradient(to right,rgba(33,21,94,.045) 1px,transparent 1px),linear-gradient(to bottom,rgba(33,21,94,.045) 1px,transparent 1px);
  background-size:56px 56px;
  mask-image:radial-gradient(ellipse 80% 60% at 50% 0%,#000 40%,transparent 100%);
}
.of-live-dot { box-shadow:0 0 0 0 currentColor; animation:of-auth-pulse 2s cubic-bezier(.4,0,.6,1) infinite; }
@keyframes of-auth-pulse { 50% { box-shadow:0 0 0 6px rgba(16,185,129,0); } }
@media (prefers-reduced-motion:reduce) { .of-live-dot { animation:none; }.of-auth-btn { transition:none; }.of-auth-btn:active { transform:none; } }
/* Mobile application shell. These rules also improve the narrow browser layout;
   display-mode overrides add native safe-area behavior when installed. */
:root {
  --app-safe-top: env(safe-area-inset-top, 0px);
  --app-safe-bottom: env(safe-area-inset-bottom, 0px);
  --mobile-accent: #2563eb;
  --mobile-accent-soft: #eff6ff;
  --mobile-ink: #0f172a;
  --mobile-metadata: #64748b;
  --mobile-divider: #e2e8f0;
  --mobile-surface: #ffffff;
  --mobile-control: #f1f5f9;
  --mobile-danger: #dc2626;
  --mobile-danger-soft: #fef2f2;
  --mobile-page-bg: #f8fafc;
  --mobile-font: -apple-system, BlinkMacSystemFont, "Roboto", "Segoe UI", sans-serif;

  /* Entity card list foundation (Vehicles, and later Trips/Devices/Places/
     Drivers/Alerts) — distinct, slightly deeper page background than the
     flat list_row screens, so cards read as surfaces floating above it. */
  --mobile-card-page-bg: #f1f5f9;
  /* Moving/idle/stopped match DevicesHelper::LIVE_STATUS_STYLES exactly
     (emerald-700 / amber-700 / rose-700 text, emerald-50 / amber-50 /
     rose-50 fill) — the same status colors device_live_status_badge
     renders on the web. Offline and untracked are the one deliberate
     exception: desktop can use slate-500 text for "offline" and slate-700
     for "untracked" because a bordered pill gives each its own shape
     regardless of color, but this list renders status as plain colored
     text with no badge chrome, so color alone has to carry the
     distinction — both are kept one notch darker than they'd otherwise
     be, and darker than --mobile-metadata (#64748b/slate-500), so neither
     disappears against surrounding gray meta text. */
  --mobile-state-moving: #047857;
  --mobile-state-moving-soft: #ecfdf5;
  --mobile-state-idle: #b45309;
  --mobile-state-idle-soft: #fffbeb;
  --mobile-state-stopped: #be123c;
  --mobile-state-stopped-soft: #fff1f2;
  --mobile-state-offline: #475569;
  --mobile-state-offline-soft: #f1f5f9;
  --mobile-state-untracked: #334155;
}

/* theme/octafleet_marketing.css has an unscoped `body { background:
   var(--of-paper); }` rule for the marketing site (--of-paper is #fbfaf7,
   a warm cream). Because it's a plain `body` selector, it wins by load
   order over
   application.html.erb's `bg-slate-50` on the SAME body element — not just
   on mobile, anywhere the app shell renders — leaving every page's empty
   space a faint cream instead of the intended cool gray. Same bug class,
   same fix, as the app-shell font-family override below: scope to
   `body.app-shell` (application.html.erb only) to win on specificity
   regardless of CSS load order, without touching the marketing/auth
   layouts that don't carry that class. */
body.app-shell { background: #f8fafc; }

.mobile-app-bar {
  position: sticky;
  top: 0;
  z-index: 45;
  flex-shrink: 0;
  background: rgba(255, 255, 255, .94);
  backdrop-filter: blur(16px);
}
.mobile-app-bar__row { min-height:3.5rem; padding:var(--app-safe-top) .75rem 0; display:flex; align-items:center; justify-content:space-between; gap:.5rem; }
.mobile-app-bar__leading, .mobile-app-bar__actions { min-width:0; display:flex; align-items:center; }
.mobile-app-bar__leading { flex:1; gap:.25rem; }
.mobile-app-bar__actions { flex:none; gap:.125rem; }
.mobile-app-bar__title { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--mobile-ink); font-size:1.125rem; line-height:1.5rem; font-weight:600; letter-spacing:-.01em; }

.mobile-bottom-nav {
  position: relative;
  z-index: 45;
  flex-shrink: 0;

  padding-bottom: var(--app-safe-bottom);
  border-top: 1px solid #e2e8f0;
  background: rgba(255, 255, 255, .96);
  box-shadow: 0 -8px 28px rgba(15, 23, 42, .06);
  backdrop-filter: blur(18px);
}
.mobile-bottom-nav-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); }
.mobile-bottom-nav-grid.has-places { grid-template-columns:repeat(5,minmax(0,1fr)); }
.mobile-nav-link:focus-visible { outline:2px solid var(--mobile-accent); outline-offset:2px; }
.mobile-nav-link { min-height:4rem; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.2rem; color:#94a3b8; font-size:.75rem; line-height:1rem; font-weight:600; transition:color .15s ease, transform .12s ease; -webkit-tap-highlight-color:transparent; touch-action:manipulation; }
.mobile-nav-icon { width:2.75rem; height:1.9rem; display:flex; align-items:center; justify-content:center; border-radius:999px; font-size:1.15rem; }
.mobile-nav-link.is-active { color:#2563eb; }
.mobile-nav-link.is-active .mobile-nav-icon { background:#dbeafe; }
.mobile-nav-link:active { transform:scale(.94); }

/* Shared mobile primitives. */
.mobile-control-region { padding:.75rem 1rem; background:var(--mobile-surface); }
.mobile-icon-button, .mobile-primary-button, .mobile-destructive-button, .mobile-filter-chip-hitbox, .mobile-segment, .mobile-row-action, .mobile-list-row__main { -webkit-tap-highlight-color:transparent; touch-action:manipulation; transition:background-color .1s ease, color .1s ease, transform .1s ease, opacity .1s ease; }
.mobile-icon-button:active, .mobile-primary-button:active, .mobile-destructive-button:active, .mobile-filter-chip-hitbox:active, .mobile-segment:active, .mobile-row-action:active { transform:scale(.97); opacity:.82; }
.mobile-icon-button:focus-visible, .mobile-primary-button:focus-visible, .mobile-destructive-button:focus-visible, .mobile-filter-chip-hitbox:focus-visible, .mobile-segment:focus-visible, .mobile-row-action:focus-visible, .mobile-list-row__main:focus-visible { outline:2px solid var(--mobile-accent); outline-offset:-2px; }
.mobile-icon-button { min-width:2.75rem; min-height:2.75rem; display:inline-flex; align-items:center; justify-content:center; border-radius:999px; color:#475569; }
.mobile-icon-button:active { background:var(--mobile-control); }
.mobile-primary-button, .mobile-destructive-button { min-height:2.75rem; display:inline-flex; align-items:center; justify-content:center; gap:.5rem; border-radius:.75rem; padding:.5rem 1rem; font-size:.875rem; line-height:1.25rem; font-weight:600; }
.mobile-primary-button { background:var(--mobile-accent); color:white; box-shadow:0 1px 2px rgba(15,23,42,.12); }
.mobile-destructive-button { background:var(--mobile-danger-soft); color:var(--mobile-danger); }
.mobile-search-field { position:relative; display:block; }
.mobile-search-field__icon { pointer-events:none; position:absolute; left:.75rem; top:50%; transform:translateY(-50%); color:var(--mobile-metadata); font-size:.875rem; }
.mobile-search-field__input { width:100%; height:2.75rem; border:1px solid var(--mobile-divider); border-radius:.75rem; background:white; padding:0 .75rem 0 2.25rem; color:var(--mobile-ink); font-size:.875rem; line-height:1.25rem; outline:none; }
.mobile-search-field__input:focus { border-color:var(--mobile-accent); box-shadow:0 0 0 3px rgba(37,99,235,.1); }
.mobile-filter-chips { display:flex; gap:.25rem; overflow-x:auto; margin-top:.5rem; }
.mobile-filter-chip-hitbox { min-height:2.75rem; display:inline-flex; flex:none; align-items:center; border-radius:999px; }
.mobile-filter-chip { height:2.25rem; display:inline-flex; align-items:center; gap:.375rem; border-radius:999px; padding:0 .875rem; background:var(--mobile-control); color:#475569; font-size:.875rem; line-height:1.25rem; font-weight:600; }
.mobile-filter-chip.is-active { background:var(--mobile-accent-soft); color:var(--mobile-accent); }
.mobile-filter-chip__count { min-width:1.125rem; height:1.125rem; display:inline-flex; align-items:center; justify-content:center; border-radius:999px; padding:0 .25rem; background:rgba(100,116,139,.12); font-size:.75rem; }
.mobile-filter-chip__icon { font-size:.75rem; color:inherit; opacity:.7; }
.mobile-filter-chip__label { max-width:9rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.mobile-filter-chip__caret { font-size:.625rem; color:inherit; opacity:.6; }
.mobile-bottom-sheet-trigger { display:contents; }
.mobile-status-badge { min-height:1.5rem; display:inline-flex; align-items:center; gap:.375rem; border-radius:999px; padding:.25rem .625rem; background:var(--mobile-control); color:#475569; font-size:.75rem; line-height:1rem; font-weight:600; }
.mobile-status-badge__dot { width:.4375rem; height:.4375rem; flex:none; border-radius:999px; background:#94a3b8; }
.mobile-status-badge--online { background:#ecfdf5; color:#047857; }
.mobile-status-badge--online .mobile-status-badge__dot { background:#10b981; }
.mobile-status-badge--untracked .mobile-status-badge__dot { border:1.5px solid #94a3b8; background:transparent; }
.mobile-status-badge--ongoing { background:var(--mobile-accent-soft); color:var(--mobile-accent); }
.mobile-status-badge--ongoing .mobile-status-badge__dot { background:var(--mobile-accent); }
.mobile-list-row { position:relative; display:flex; min-height:2.75rem; background:var(--mobile-surface); }
.mobile-list-row::after { content:""; position:absolute; right:0; bottom:0; left:1rem; height:1px; background:var(--mobile-divider); transform:scaleY(.5); transform-origin:bottom; }
.mobile-list-row__main { min-width:0; flex:1; display:flex; align-items:center; gap:.75rem; padding:.75rem 1rem; }
.mobile-list-row__main:active { background:var(--mobile-control); }
.mobile-list-row__main--destructive { color:var(--mobile-danger); }
.mobile-list-row__content { min-width:0; flex:1; display:flex; align-items:center; gap:.75rem; }
.mobile-list-row__chevron { flex:none; color:var(--mobile-metadata); font-size:.75rem; }
.mobile-row-icon { width:1.25rem; flex:none; text-align:center; color:var(--mobile-metadata); font-size:1rem; }
.mobile-list-row__main--destructive .mobile-row-icon { color:var(--mobile-danger); }
.mobile-row-title { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:.9375rem; line-height:1.25rem; font-weight:600; color:var(--mobile-ink); }
.mobile-list-row__main--destructive .mobile-row-title { color:var(--mobile-danger); }
.mobile-metadata-text { color:var(--mobile-metadata); font-size:.8125rem; line-height:1.125rem; font-weight:500; }
.mobile-section-label { padding:1.25rem 1rem .5rem; color:var(--mobile-metadata); font-size:.75rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; }
.mobile-page-bg { background:var(--mobile-page-bg); }
.mobile-segmented-control { display:grid; gap:.25rem; padding:.25rem; border-radius:.75rem; background:var(--mobile-control); }
.mobile-segment { min-height:2.75rem; display:flex; align-items:center; justify-content:center; gap:.5rem; border-radius:.6rem; color:#64748b; font-size:.8125rem; line-height:1.125rem; font-weight:600; }
.mobile-segment.is-active { background:white; color:var(--mobile-ink); box-shadow:0 1px 3px rgba(15,23,42,.12); }
.mobile-tappable-row { display:block; -webkit-tap-highlight-color:transparent; touch-action:manipulation; transition:background-color .12s ease; }
.mobile-tappable-row:active { background:#f8fafc; }
.mobile-action-rail { display:grid; background:var(--mobile-surface); }
.mobile-action-rail > * + * { border-left:1px solid var(--mobile-divider); }

/* Entity card list foundation --------------------------------------- */
/* Sizes below match the list-row title tier every other mobile screen
   already uses for its row's primary identifier — Alerts' alert title,
   Trips' vehicle name, Devices' device name, and Places' place name are
   all 14px/600-700. The vehicle registration shown here plays the exact
   same role (this row's own identifier), including on the Trips row where
   the same registration string is shown at this same size — so it gets no
   special-cased larger size here either. */
.mobile-card-list { background:var(--mobile-card-page-bg); padding:.75rem 1rem 1rem; display:flex; flex-direction:column; gap:.625rem; }
.mobile-card-title { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:.875rem; line-height:1.35; font-weight:600; letter-spacing:-.01em; color:var(--mobile-ink); }
.mobile-card-meta { font-size:.75rem; line-height:1.4; font-weight:400; color:var(--mobile-metadata); }
.mobile-stat-value { font-size:1rem; line-height:1.35; font-weight:600; color:var(--mobile-ink); font-variant-numeric:tabular-nums; }
.mobile-stat-label { font-size:.75rem; line-height:1.35; font-weight:400; color:var(--mobile-metadata); }
.mobile-hero-number { font-size:1.375rem; line-height:1.35; font-weight:600; color:var(--mobile-ink); font-variant-numeric:tabular-nums; }
.mobile-hero-number__unit { font-size:.8125rem; font-weight:400; margin-left:.125rem; }

.mobile-status-line { display:flex; align-items:center; gap:.5rem; font-size:.875rem; line-height:1.35; font-weight:500; }
.mobile-state-dot { width:.5rem; height:.5rem; flex:none; border-radius:999px; background:currentColor; }
.mobile-status-line--moving { color:var(--mobile-state-moving); }
.mobile-status-line--idle { color:var(--mobile-state-idle); }
.mobile-status-line--stopped { color:var(--mobile-state-stopped); }
.mobile-status-line--offline { color:var(--mobile-state-offline); }
.mobile-status-line--untracked { color:var(--mobile-state-untracked); }
.mobile-status-line--untracked .mobile-state-dot { background:transparent; border:1.5px solid currentColor; }

/* A compact badge for vehicle status used to live here as its own
   mobile-only pill. It's gone — the vehicle show page now renders the
   same device_live_status_badge/badge("Untracked", "slate") the web
   header already uses, instead of a second, mobile-specific component. */

.mobile-entity-card { position:relative; border-radius:1rem; background:var(--mobile-surface); box-shadow:0 1px 2px rgba(15,23,42,.04), 0 0 0 1px rgba(15,23,42,.04); padding:1rem; transition:transform .1s ease, background-color .1s ease; -webkit-tap-highlight-color:transparent; }
.mobile-entity-card:active { transform:scale(.98); background-color:#fafbfc; }
/* No per-card left-edge state accent — the colored summary strip above
   the list and each card's own status line already carry that signal;
   a third color cue here was redundant, and for the gray offline/
   untracked states it just read as a heavy outline rather than an accent. */
/* The whole card is the tap target via a stretched link: one invisible
   anchor absolutely covers the card (default stacking already paints it
   above the static content below), so tapping anywhere — including over
   plain text — navigates. The trailing slot and footer action are the ONE
   allowed extra interactive element per card: each is explicitly raised
   (position:relative + z-index) above the stretched link so it intercepts
   its own taps instead of triggering navigation. */
.mobile-entity-card__tap { position:absolute; inset:0; z-index:0; border-radius:inherit; }
.mobile-entity-card__header { display:flex; align-items:center; justify-content:space-between; gap:.75rem; }
.mobile-entity-card__trailing { position:relative; z-index:1; display:flex; align-items:center; gap:.375rem; color:var(--mobile-ink); pointer-events:none; }
.mobile-entity-card__trailing .mobile-icon-button, .mobile-entity-card__trailing a, .mobile-entity-card__trailing button { pointer-events:auto; }
/* Accent blue, not neutral ink — matches the footer "Assign device ›"
   link's color below, so this in-card tap action (Track) reads as the
   same accent-colored affordance instead of blending into the card's
   plain text. (.mobile-stat-value, the other trailing-slot variant shown
   for moving vehicles, keeps its own ink color — it's a telemetry
   reading, not a tap action.)
   The icon button's real touch target stays the 44px minimum, but its
   visual box shrinks to the title's line height so a 44px-tall flex
   sibling next to 14px/600 text stops forcing empty space above/below
   the title. The ::before expands the actual hit area back out to 44px
   via a transparent overlay instead of growing the button's own box. */
.mobile-entity-card__trailing .mobile-icon-button { color:var(--mobile-accent); min-width:1.75rem; min-height:1.75rem; position:relative; }
.mobile-entity-card__trailing .mobile-icon-button::before { content:""; position:absolute; inset:-.5rem; }
.mobile-entity-card__subtitle, .mobile-entity-card__status, .mobile-entity-card__detail { margin-top:.25rem; }
.mobile-entity-card__detail { display:flex; flex-direction:column; gap:.125rem; }
.mobile-entity-card__stats { margin-top:.75rem; padding-top:.75rem; border-top:1px solid var(--mobile-divider); display:grid; gap:.5rem; }
.mobile-entity-card__stat { min-width:0; }
.mobile-entity-card__stat .mobile-stat-label { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.mobile-entity-card__footer { position:relative; z-index:1; margin-top:.75rem; padding-top:.75rem; border-top:1px solid var(--mobile-divider); text-align:right; }
.mobile-entity-card__footer-link { font-size:.875rem; font-weight:600; color:var(--mobile-accent); }

.mobile-quick-actions { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.5rem; margin-top:.875rem; }
.mobile-quick-action { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.25rem; min-height:3.25rem; border-radius:.875rem; background:var(--mobile-control); color:var(--mobile-accent); font-size:.75rem; font-weight:600; -webkit-tap-highlight-color:transparent; touch-action:manipulation; transition:transform .1s ease, opacity .1s ease; }
.mobile-quick-action:active { transform:scale(.97); opacity:.82; }
.mobile-quick-action i { font-size:1rem; }

.mobile-summary-strip { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:.5rem; padding:0 1rem .75rem; }
.mobile-summary-cell { display:flex; flex-direction:column; align-items:center; gap:.125rem; border-radius:.875rem; padding:.625rem .25rem; background:var(--mobile-surface); box-shadow:0 1px 2px rgba(15,23,42,.04), 0 0 0 1px rgba(15,23,42,.04); -webkit-tap-highlight-color:transparent; touch-action:manipulation; transition:transform .1s ease; }
.mobile-summary-cell:active { transform:scale(.96); }
.mobile-summary-cell.is-active { box-shadow:0 0 0 2px var(--mobile-accent) inset; }
.mobile-summary-cell__value { font-size:1.0625rem; line-height:1.35; font-weight:600; font-variant-numeric:tabular-nums; }
.mobile-summary-cell__label { font-size:.75rem; line-height:1.35; color:var(--mobile-metadata); }
/* Soft tinted fill per status, same treatment (and the same emerald/amber/
   rose tokens) as the colored KPI tiles on the web dashboard's Live Map
   and Vehicles summary cards — so the count strip reads as the same kind
   of component, not a flatter mobile-only version of it. */
.mobile-summary-cell--moving { background:var(--mobile-state-moving-soft); }
.mobile-summary-cell--moving .mobile-summary-cell__value { color:var(--mobile-state-moving); }
.mobile-summary-cell--idle { background:var(--mobile-state-idle-soft); }
.mobile-summary-cell--idle .mobile-summary-cell__value { color:var(--mobile-state-idle); }
.mobile-summary-cell--stopped { background:var(--mobile-state-stopped-soft); }
.mobile-summary-cell--stopped .mobile-summary-cell__value { color:var(--mobile-state-stopped); }
.mobile-summary-cell--offline { background:var(--mobile-state-offline-soft); }
.mobile-summary-cell--offline .mobile-summary-cell__value { color:var(--mobile-state-offline); }

@media (max-width: 639px) {
  html, body { max-width:100%; overflow-x:hidden; }
  .desktop-app-topbar { display:none; }
  #app-content > section { min-width:0; }
  #app-content section.rounded-2xl { border-radius:1rem; }
  #app-content h1 { font-size:1.125rem; line-height:1.5rem; }
  #app-content input, #app-content select, #app-content button, #app-content a { max-width:100%; }
  #app-content form .md\:w-\[190px\], #app-content form .md\:w-\[300px\] { width:100%; }
  #app-content .overflow-x-auto { overscroll-behavior-inline:contain; scrollbar-width:thin; }
  #app-content { font-size:.875rem; line-height:1.25rem; }
  #app-content input, #app-content select, #app-content textarea { font-size:1rem; }
}

@media (max-width: 1023px) {
  #app-content:has(.mobile-map-screen) { padding:0; overflow:hidden; }
  .mobile-map-screen { height:100%; min-height:0; }

  html, body { scrollbar-width:none; }
  html::-webkit-scrollbar, body::-webkit-scrollbar { display:none; }
  body { -webkit-tap-highlight-color:transparent; touch-action:manipulation; overscroll-behavior-y:none; }
  /* .app-shell (not just `body`) so this reliably beats the unscoped
     `body { font-family: "DM Sans"... }` rule in theme/octafleet_marketing.css
     on specificity — that rule's plain `body` selector otherwise wins by
     load order alone regardless of this media query. Scoped to app-shell
     (application.html.erb only) so the marketing/auth layouts, which don't
     carry that class, keep their own web-font branding untouched. */
  body.app-shell { font-family:var(--mobile-font); }
  .mobile-bottom-nav, .mobile-app-bar, .mobile-list-row, button { user-select:none; }
}

@media (min-width: 1024px) {
  .place-form-scroll { max-height:calc(100dvh - 13.5rem); }
}

@media (display-mode: standalone) {
  body.app-shell { min-height:100dvh; user-select:none; -webkit-tap-highlight-color:transparent; }
  input, textarea { user-select:text; }
  #app-content { overscroll-behavior-y:contain; }
}
.mobile-row-action { min-height:2.75rem; display:flex; align-items:center; justify-content:center; gap:.45rem; background:white; color:#475569; font-size:.8125rem; line-height:1.125rem; font-weight:600; }
.mobile-row-action:focus-visible { outline:2px solid #2563eb; outline-offset:2px; }

@media (prefers-reduced-motion: reduce) {
  .mobile-nav-link, .mobile-icon-button, .mobile-primary-button, .mobile-secondary-button, .mobile-filter-chip, .mobile-segment, .mobile-row-action, .mobile-tappable-row, .mobile-entity-card, .mobile-summary-cell, .mobile-bottom-sheet, .mobile-bottom-sheet::backdrop { transition:none; }
}

/* Bottom-sheet picker ------------------------------------------------- */
/* A native <dialog> rather than a plain fixed div: showModal() renders it
   in the top layer, so it always sits above the app bar/bottom nav and
   escapes #app-content's overflow-y:auto without any z-index tuning, and
   focus trapping + Escape-to-close come for free. */
.mobile-bottom-sheet {
  position: fixed;
  inset: auto 0 0 0;
  margin: 0;
  width: 100%;
  max-width: 100%;
  max-height: 85dvh;
  border: none;
  border-radius: 1.25rem 1.25rem 0 0;
  padding: 0;
  background: var(--mobile-surface);
  box-shadow: 0 -12px 32px rgba(15, 23, 42, .18);
  flex-direction: column;
  transform: translateY(100%);
  opacity: 0;
  transition: transform .22s cubic-bezier(.32,.72,0,1), opacity .18s ease, overlay .22s ease allow-discrete, display .22s ease allow-discrete;
}
/* Only [open] gets `display: flex` — otherwise this rule would win over the
   UA stylesheet's `dialog:not([open]) { display: none }` (author styles
   always beat UA defaults for the same property), leaving every closed
   sheet still fixed-position, clickable and in the a11y tree despite being
   invisible via opacity/transform. */
.mobile-bottom-sheet[open] {
  display: flex;
  transform: translateY(0);
  opacity: 1;
}
.mobile-bottom-sheet::backdrop {
  background: rgba(15, 23, 42, .5);
  transition: background-color .22s ease, overlay .22s ease allow-discrete, display .22s ease allow-discrete;
}
@starting-style {
  .mobile-bottom-sheet[open] { transform: translateY(100%); opacity: 0; }
  .mobile-bottom-sheet[open]::backdrop { background-color: rgba(15, 23, 42, 0); }
}
.mobile-bottom-sheet__handle { width: 2.5rem; height: .25rem; flex: none; margin: .625rem auto .25rem; border-radius: 999px; background: var(--mobile-divider); }
.mobile-bottom-sheet__header { flex: none; display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .25rem .5rem .625rem 1.25rem; border-bottom: 1px solid var(--mobile-divider); }
.mobile-bottom-sheet__title { font-size: 1rem; line-height: 1.35; font-weight: 700; letter-spacing: -.01em; color: var(--mobile-ink); }
.mobile-bottom-sheet__body { flex: 1; overflow-y: auto; padding: .375rem 0 calc(.5rem + var(--app-safe-bottom)); }

.mobile-bottom-sheet-option { display: flex; align-items: center; justify-content: space-between; gap: .75rem; min-height: 2.75rem; padding: .625rem 1.25rem; color: var(--mobile-ink); font-size: .9375rem; line-height: 1.25rem; font-weight: 500; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.mobile-bottom-sheet-option:active { background: var(--mobile-control); }
.mobile-bottom-sheet-option.is-active { color: var(--mobile-accent); font-weight: 600; }
.mobile-bottom-sheet-option__check { font-size: .8125rem; color: var(--mobile-accent); }
.mobile-bottom-sheet-divider { height: 1px; margin: .375rem 1.25rem; background: var(--mobile-divider); }
.mobile-bottom-sheet-search { padding: .25rem 1.25rem .625rem; border-bottom: 1px solid var(--mobile-divider); }
.mobile-bottom-sheet-empty { padding: 1.5rem 1.25rem; text-align: center; color: var(--mobile-metadata); font-size: .875rem; }

.mobile-bottom-sheet-form { padding: .5rem 1.25rem calc(.75rem + var(--app-safe-bottom)); }
.mobile-bottom-sheet-form__label { margin-bottom: .5rem; color: var(--mobile-metadata); font-size: .75rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.mobile-bottom-sheet-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: .625rem; }
.mobile-bottom-sheet-form__field { display: flex; flex-direction: column; gap: .25rem; font-size: .75rem; font-weight: 600; color: var(--mobile-metadata); }
.mobile-bottom-sheet-form__field input { min-height: 2.75rem; border: 1px solid var(--mobile-divider); border-radius: .625rem; padding: 0 .625rem; font-size: .875rem; color: var(--mobile-ink); background: white; }
.mobile-bottom-sheet-form__field input:focus { outline: none; border-color: var(--mobile-accent); box-shadow: 0 0 0 3px rgba(37,99,235,.1); }
.mobile-bottom-sheet-form__submit { margin-top: .875rem; width: 100%; min-height: 2.75rem; border-radius: .75rem; background: var(--mobile-accent); color: white; font-size: .875rem; font-weight: 600; }
.mobile-bottom-sheet-form__submit:active { opacity: .85; }

/* Trips list: sticky date sections ------------------------------------ */
/* Each date is its own section (header + rows wrapper) rather than flat
   siblings of .mobile-card-list — infinite scroll needs a stable element
   per date to append a continued day's rows into without duplicating its
   header. See _mobile_trip_date_section and index.turbo_stream.erb. */
.mobile-trip-date-section { display: flex; flex-direction: column; }
.mobile-trip-date-section__rows { margin-top: .625rem; display: flex; flex-direction: column; gap: .625rem; }
.mobile-trip-date-header { position: sticky; top: 0; z-index: 20; background: var(--mobile-card-page-bg); padding: .5rem 0 .375rem; display: flex; align-items: baseline; justify-content: space-between; gap: .75rem; }
.mobile-card-list > .mobile-trip-date-section:first-child > .mobile-trip-date-header { padding-top: 0; }
.mobile-trip-date-header__title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .75rem; line-height: 1rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--mobile-metadata); }
.mobile-trip-date-header__summary { flex: none; font-size: .75rem; line-height: 1rem; font-weight: 500; color: var(--mobile-metadata); }

.mobile-trips-sentinel { display: flex; align-items: center; justify-content: center; padding: 1.25rem 0; color: var(--mobile-metadata); font-size: 1.125rem; }

/* Trips list: row anatomy ---------------------------------------------- */
/* Plate uses .mobile-card-title directly (no dedicated class) — same
   14px/600 tier as the vehicle registration on the Vehicles card and the
   title on the Alerts row, per the entity-card-list-foundation comment
   above: Trips' vehicle identifier gets no special-cased size of its own. */
.mobile-trip-row { display: grid; grid-template-columns: auto minmax(0,1fr) auto auto; align-items: center; gap: .75rem; }
.mobile-trip-row__time { font-size: .875rem; line-height: 1.35; font-weight: 600; color: var(--mobile-ink); font-variant-numeric: tabular-nums; }
.mobile-trip-row__route { min-width: 0; display: flex; align-items: stretch; gap: .5rem; }
.mobile-trip-route-line { flex: none; width: .5rem; display: flex; flex-direction: column; align-items: center; padding: .1875rem 0; }
.mobile-trip-route-dot { width: .5rem; height: .5rem; flex: none; border-radius: 999px; }
.mobile-trip-route-dot--start { background: #10b981; }
.mobile-trip-route-dot--end { background: #fb7185; }
.mobile-trip-route-connector { width: 1px; flex: 1; min-height: .75rem; margin: .1875rem 0; background: var(--mobile-divider); }
.mobile-trip-row__addresses { min-width: 0; flex: 1; display: flex; flex-direction: column; justify-content: space-between; gap: .5rem; }
.mobile-trip-row__address { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .8125rem; line-height: 1.1rem; color: #475569; }
.mobile-trip-row__meta { flex: none; text-align: right; }
.mobile-trip-row__distance { font-size: .875rem; line-height: 1.35; font-weight: 600; color: var(--mobile-ink); font-variant-numeric: tabular-nums; }
.mobile-trip-row__chevron { flex: none; color: var(--mobile-metadata); font-size: .75rem; }
:root{
  --indigo: 99,102,241;
  --sky: 56,189,248;
  --emerald: 52,211,153;
}

/* ---------- HERO BACKGROUND (dark tech) ---------- */
.aurora{
  background:
    radial-gradient(60% 60% at 10% 10%, rgba(var(--indigo),.35) 0%, transparent 55%),
    radial-gradient(55% 55% at 90% 15%, rgba(var(--sky),.25) 0%, transparent 60%),
    radial-gradient(50% 50% at 60% 90%, rgba(var(--emerald),.18) 0%, transparent 60%);
  filter: blur(22px);
  transform: scale(1.1);
  animation: auroraMove 10s ease-in-out infinite alternate;
}
@keyframes auroraMove{
  0%{ transform: translate3d(-1%, -1%, 0) scale(1.1); opacity:.9;}
  100%{ transform: translate3d(1%, 1%, 0) scale(1.15); opacity:1;}
}

.grid-overlay{
  background-image:
    linear-gradient(to right, rgba(255,255,255,.06) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.06) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(circle at 50% 30%, black 0%, transparent 60%);
  opacity:.35;
  animation: gridMove 14s linear infinite;
}
@keyframes gridMove{
  0%{ background-position: 0 0, 0 0;}
  100%{ background-position: 128px 64px, 128px 64px;}
}

/* floating particles (tech dust) */
.particles{
  background-image:
    radial-gradient(circle, rgba(255,255,255,.20) 1px, transparent 1px),
    radial-gradient(circle, rgba(56,189,248,.18) 1px, transparent 1px),
    radial-gradient(circle, rgba(99,102,241,.18) 1px, transparent 1px);
  background-size: 140px 140px, 220px 220px, 320px 320px;
  mix-blend-mode: screen;
  opacity:.25;
  animation: particlesDrift 26s linear infinite;
}
@keyframes particlesDrift{
  0%{ background-position: 0 0, 40px 80px, -80px 40px; }
  100%{ background-position: 240px 180px, 320px -40px, 120px 240px; }
}

/* moving routes */
.route, .route2{
  stroke: rgba(148,163,184,.7);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-dasharray: 10 10;
  animation: dash 5s linear infinite;
}
.route2{ stroke: rgba(56,189,248,.55); animation-duration: 7s; }
@keyframes dash{ to { stroke-dashoffset: -240; } }

/* shimmer/progress */
.progress{
  background: linear-gradient(90deg, rgba(var(--indigo),.95), rgba(var(--sky),.9), rgba(var(--emerald),.8));
  animation: shimmer 1.8s linear infinite;
  transform: translateX(-20%);
}
@keyframes shimmer{
  0%{ transform: translateX(-35%); }
  100%{ transform: translateX(35%); }
}

.floaty{ animation: floaty 3.5s ease-in-out infinite; }
@keyframes floaty{
  0%,100%{ transform: translateY(0); }
  50%{ transform: translateY(-8px); }
}

/* ---------- LIGHT SECTIONS TECH PATTERN ---------- */
.soft-grid{
  background-image:
    radial-gradient(circle at 1px 1px, rgba(15,23,42,.10) 1px, transparent 0);
  background-size: 18px 18px;
}

/* ---------- ICON MICRO-ANIMS ---------- */
.pulseDot{ animation: pulseDot 1.4s ease-in-out infinite; transform-origin: center; }
@keyframes pulseDot { 0%,100% { transform: scale(1); opacity: .55; } 50% { transform: scale(1.8); opacity: 1; } }

.pulseRing{
  position: relative;
}
.pulseRing::after{
  content:"";
  position:absolute;
  inset:-10px;
  border-radius:999px;
  border:1px solid rgba(var(--sky),.55);
  opacity:.0;
  transform: scale(.65);
  animation: ring 1.7s ease-out infinite;
}
@keyframes ring{
  0%{ opacity:.0; transform: scale(.65); }
  30%{ opacity:.55; }
  100%{ opacity:0; transform: scale(1.25); }
}

.radarSweep{ animation: radar 2.6s linear infinite; transform-origin: 50% 50%; }
@keyframes radar { from { transform: rotate(0deg); opacity: .95; } to { transform: rotate(360deg); opacity: .95; } }

.barShine{ animation: bar 1.4s ease-in-out infinite; }
@keyframes bar { 0%,100% { opacity: .55; } 50% { opacity: 1; } }

/* pricing highlight glow */
.glowBorder{
  box-shadow:
    0 0 0 1px rgba(var(--indigo),.35),
    0 0 0 1px rgba(34,211,238,.12) inset,
    0 18px 60px rgba(var(--indigo),.18);
}

/* card hover polish */
.cardHover{
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.cardHover:hover{
  transform: translateY(-3px);
  border-color: rgba(99,102,241,.35);
  box-shadow: 0 18px 55px rgba(2,6,23,.10);
}

/* animated road + truck (CSS motion path with fallback) */
.roadLine{
  stroke: rgba(148,163,184,.55);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-dasharray: 8 10;
  animation: dash 6s linear infinite;
}
.truck{
  width: 46px;
  height: 46px;
  position: absolute;
  left: 6%;
  top: 66%;
  filter: drop-shadow(0 10px 18px rgba(0,0,0,.35));
  animation: driveFallback 9s linear infinite;
}
@keyframes driveFallback{
  0%{ transform: translateX(0) translateY(0) rotate(-3deg); opacity:.95; }
  45%{ transform: translateX(260px) translateY(-42px) rotate(1deg); }
  100%{ transform: translateX(560px) translateY(-110px) rotate(3deg); opacity:.95; }
}
@supports (offset-path: path("M0 0 L10 10")){
  .truck{
    left: auto; top: auto;
    offset-path: path("M 70 290 C 210 180, 330 330, 470 230 S 680 120, 840 160");
    -webkit-offset-path: path("M 70 290 C 210 180, 330 330, 470 230 S 680 120, 840 160");
    offset-rotate: auto;
    -webkit-offset-rotate: auto;
    animation: drive 9.5s linear infinite;
  }
  @keyframes drive{
    0%{ offset-distance: 0%; opacity:.96; }
    100%{ offset-distance: 100%; opacity:.96; }
  }
}

/* reveal on scroll */
.reveal{ opacity:0; transform: translateY(14px); transition: opacity .7s ease, transform .7s ease; }
.reveal.is-visible{ opacity:1; transform:none; }

/* tiny sparkline anim */
.spark path{ stroke-dasharray: 160; stroke-dashoffset: 160; animation: draw 1.8s ease forwards; }
@keyframes draw{ to { stroke-dashoffset: 0; } }

@media (prefers-reduced-motion: reduce){
  .aurora,.grid-overlay,.particles,.route,.route2,.progress,.floaty,
  .pulseDot,.pulseRing::after,.radarSweep,.barShine,.truck,.reveal,.spark path{
    animation: none !important;
    transition: none !important;
  }
  .reveal{ opacity:1; transform:none; }
}

/* --- Control tower section enhancements --- */
.ctChip{
  display:inline-flex; align-items:center; gap:.5rem;
  border:1px solid rgba(226,232,240,1);
  background: rgba(255,255,255,.85);
  padding:.45rem .75rem;
  border-radius: 9999px;
  font-size:.875rem;
  color: rgb(51,65,85);
  box-shadow: 0 1px 0 rgba(15,23,42,.04);
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease, background .15s ease;
}
.ctChip:hover{ transform: translateY(-1px); box-shadow: 0 10px 30px rgba(15,23,42,.10); border-color: rgba(203,213,225,1); }
.ctChip.isActive{ border-color: rgba(var(--indigo),.35); box-shadow: 0 0 0 3px rgba(var(--indigo),.10), 0 18px 40px rgba(15,23,42,.10); background: rgba(255,255,255,.98); }
.ctChipDot{ width:.5rem; height:.5rem; border-radius:9999px; display:inline-block; }
.ctChipCount{ margin-left:.25rem; font-size:.75rem; color: rgb(100,116,139); background: rgba(226,232,240,.6); border: 1px solid rgba(226,232,240,1); padding: .05rem .4rem; border-radius: 9999px; }
.pulseDot{
  width:.55rem; height:.55rem; border-radius:9999px;
  background: rgba(16,185,129,1);
  position: relative;
}
.pulseDot:after{
  content:""; position:absolute; inset:-7px;
  border-radius:9999px;
  border: 2px solid rgba(16,185,129,.45);
  animation: ctPing 1.4s ease-out infinite;
}
.liveBadge{
  position:relative;
  display:inline-flex; align-items:center; justify-content:center;
  padding:.25rem .55rem;
  border-radius:9999px;
  border:1px solid rgba(226,232,240,1);
  background: rgba(255,255,255,.85);
}
.liveBadge:before{
  content:""; width:.4rem; height:.4rem; border-radius:9999px;
  background: rgba(16,185,129,1);
  margin-right:.4rem;
  box-shadow: 0 0 0 3px rgba(16,185,129,.15);
}
.ctBar{ display:block; width:100%; border-radius: 9999px; background: rgba(99,102,241,.28); }
.ctRoute{ stroke-dasharray: 10 14; animation: ctDash 7s linear infinite; }
.ctRoute2{ stroke-dasharray: 6 14; animation-duration: 9s; opacity:.75; }
.ctCluster{ animation: ctPulse 2.6s ease-in-out infinite; transform-origin: center; }
.ctCluster2{ animation-delay: .55s; }
.ctNode{ animation: ctNodePulse 2.2s ease-in-out infinite; }
.ctSignal{ opacity:.0; }
.ctSignalA{ animation: ctSignalMoveA 6.8s linear infinite; }
.ctSignalB{ animation: ctSignalMoveB 7.6s linear infinite; }

@keyframes ctPing{ 0%{ transform: scale(.6); opacity:.85 } 70%{ transform: scale(1.15); opacity:0 } 100%{ opacity:0 } }
@keyframes ctDash{ to { stroke-dashoffset: -200; } }
@keyframes ctPulse{ 0%,100%{ opacity:.7 } 50%{ opacity:1 } }
@keyframes ctNodePulse{ 0%,100%{ transform: scale(1); opacity:.95 } 50%{ transform: scale(1.08); opacity:1 } }
@keyframes ctSignalMoveA{
  0%{ opacity:0; transform: translate(0px,0px); }
  8%{ opacity:1 }
  100%{ opacity:0; transform: translate(640px,-25px); }
}
@keyframes ctSignalMoveB{
  0%{ opacity:0; transform: translate(0px,0px); }
  10%{ opacity:1 }
  100%{ opacity:0; transform: translate(600px,45px); }
}

/* filtering */
.ctHide{ opacity:.08 !important; filter: grayscale(1); }
/* OctaFleet marketing system — deliberately scoped away from the application UI. */
:root { --of-ink:#111128; --of-violet:#322080; --of-violet-deep:#1e1557; --of-lilac:#ebe7ff; --of-paper:#fbfaf7; --of-line:#dedde6; --of-muted:#666579; }
html { scroll-behavior:smooth; }
body { overflow-x:hidden; background:var(--of-paper); color:var(--of-ink); font-family:"DM Sans",ui-sans-serif,system-ui,sans-serif; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }
.of-page { background:var(--of-paper); color:var(--of-ink); }
.of-container { width:min(100% - 2.5rem, 1200px); margin-inline:auto; }
.of-header { background:rgba(251,250,247,.9); border-bottom:1px solid rgba(17,17,40,.1); backdrop-filter:blur(18px); }
.of-page h1,.of-page h2,.of-page h3 { font-family:"Manrope",ui-sans-serif,system-ui,sans-serif; letter-spacing:-.045em; }
.of-page h2 { font-size:clamp(2.25rem,4.3vw,4.2rem); line-height:1.04; font-weight:650; }
.of-eyebrow { display:flex; align-items:center; gap:.65rem; margin:0 0 1.5rem; color:#5a4aaa; font-size:.72rem; font-weight:700; letter-spacing:.15em; text-transform:uppercase; }
.of-eyebrow span { width:1.8rem; height:1px; background:currentColor; }
.of-eyebrow-light { color:#c9c0ff; }
.of-button { display:inline-flex; align-items:center; justify-content:space-between; gap:2.5rem; border-radius:.45rem; padding:.95rem 1.15rem; font-size:.9rem; font-weight:700; transition:transform .2s,background .2s; }
.of-button:hover { transform:translateY(-2px); }
.of-button-light { background:#fff; color:var(--of-ink); }
.of-button-dark { width:100%; background:var(--of-ink); color:#fff; border:0; cursor:pointer; }
.of-hero { position:relative; overflow:hidden; background:var(--of-violet-deep); color:#fff; }
.of-hero::before { content:""; position:absolute; inset:0; opacity:.25; background-image:radial-gradient(circle,rgba(255,255,255,.45) 1px,transparent 1.5px); background-size:20px 20px; mask-image:linear-gradient(to bottom,#000,transparent 70%); }
.of-hero-glow { position:absolute; width:50rem; height:40rem; left:52%; top:-18rem; border-radius:50%; background:#6046db; filter:blur(130px); opacity:.42; }
.of-hero-inner { position:relative; padding:clamp(5rem,10vw,8.5rem) 0 0; }
.of-hero-copy {  text-align:center; margin:auto; }
.of-hero h1 { margin:0; font-size:clamp(3.2rem,7.2vw,4.6rem); line-height:.96; font-weight:600; }
.of-hero h1 em { color:#bcb0ff; font-style:normal; }
.of-hero-lede { max-width:670px; margin:2rem auto 0; color:#d5d0e8; font-size:clamp(1.05rem,1.8vw,1.28rem); line-height:1.65; }
.of-actions { display:flex; align-items:center; justify-content:center; gap:1.75rem; margin-top:2rem; }
.of-text-link { color:#fff; font-size:.9rem; font-weight:650; border-bottom:1px solid rgba(255,255,255,.45); padding:.5rem 0; }
.of-trust-row { display:flex; flex-wrap:wrap; justify-content:center; gap:1rem 2rem; margin:2.3rem 0 3rem; color:#c8c3dc; font-size:.82rem; }
.of-trust-row i { color:#bcb0ff; font-style:normal; }
.of-product-stage { max-width:1080px; margin:auto; padding:.7rem; border:1px solid rgba(255,255,255,.18); border-bottom:0; border-radius:1rem 1rem 0 0; background:rgba(255,255,255,.08); box-shadow:0 -20px 80px rgba(0,0,0,.22); }
.of-product-caption { display:flex; justify-content:space-between; padding:.45rem .45rem 1rem; color:#bdb7d3; font-size:.7rem; letter-spacing:.05em; }
.of-product-caption i { display:inline-block; width:.45rem; height:.45rem; margin-right:.45rem; border-radius:50%; background:#80dbad; }
.of-product-image { display:block; width:100%; border-radius:.5rem .5rem 0 0; }
.of-proof { background:#fff; border-bottom:1px solid var(--of-line); }
.of-proof-grid { display:grid; grid-template-columns:repeat(3,1fr); }
.of-proof-grid>div { padding:2.3rem 2rem; border-left:1px solid var(--of-line); }
.of-proof-grid>div:last-child { border-right:1px solid var(--of-line); }
.of-proof strong { font-family:"Manrope"; font-size:.95rem; }
.of-proof p { margin:.45rem 0 0; color:var(--of-muted); font-size:.85rem; }
.of-section { padding:clamp(5rem,9vw,8rem) 0; }
.of-section-light { background:var(--of-paper); }
.of-heading-row { display:grid; grid-template-columns:1.25fr .75fr; align-items:end; gap:7rem; }
.of-heading-row h2 { max-width:760px; margin:0; }
.of-heading-row>p { color:var(--of-muted); line-height:1.8; }
.of-feature-grid { display:grid; grid-template-columns:repeat(3,1fr); margin-top:4.5rem; border-top:1px solid var(--of-line); border-left:1px solid var(--of-line); }
.of-feature-card { position:relative; overflow:hidden; min-height:250px; padding:2rem; border-right:1px solid var(--of-line); border-bottom:1px solid var(--of-line); background:rgba(255,255,255,.38); transition:background .3s,transform .3s,box-shadow .3s; }
.of-feature-card::before { content:""; position:absolute; top:0; left:0; width:100%; height:2px; background:linear-gradient(90deg,#6b59bf,#b9aff0); transform:scaleX(0); transform-origin:left; transition:transform .65s cubic-bezier(.2,.7,.2,1); }
.of-feature-card::after { content:""; position:absolute; width:9rem; height:9rem; right:-6rem; bottom:-7rem; border-radius:50%; background:rgba(107,89,191,.08); transition:transform .45s ease; }
.of-visible .of-feature-card::before,.of-feature-card:hover::before { transform:scaleX(1); }
.of-feature-card:hover { z-index:1; background:#fff; transform:translateY(-5px); box-shadow:0 18px 45px -30px rgba(33,21,94,.35); }
.of-feature-card:hover::after { transform:scale(1.7); }
.of-feature-card>span { color:#7666c5; font-family:ui-monospace,monospace; font-size:.68rem; }
.of-feature-card h3 { margin:4.5rem 0 .7rem; font-size:1.2rem; letter-spacing:-.025em; }
.of-feature-card p { margin:0; color:var(--of-muted); font-size:.9rem; line-height:1.7; }
.of-section-dark { position:relative; overflow:hidden; color:#fff; background:#21155e; }
.of-dot-field { position:absolute; inset:0; opacity:.14; background-image:radial-gradient(circle,#fff 1.4px,transparent 1.8px); background-size:22px 22px; mask-image:radial-gradient(ellipse at 70% 30%,#000,transparent 70%); }
.of-dark-grid { position:relative; display:grid; grid-template-columns:.9fr 1.1fr; gap:8rem; align-items:center; }
.of-dark-grid h2 { margin:0; }
.of-dark-lede { margin:2rem 0; color:#c9c3df; max-width:500px; line-height:1.8; }
.of-workflow { border-top:1px solid rgba(255,255,255,.2); }
.of-workflow>div { display:grid; grid-template-columns:3rem 1fr; gap:1rem; padding:2rem 0; border-bottom:1px solid rgba(255,255,255,.2); }
.of-workflow>div>span { color:#afa3ee; font-family:ui-monospace,monospace; font-size:.72rem; }
.of-workflow h3 { margin:0 0 .5rem; font-size:1.4rem; }
.of-workflow p { margin:0; color:#c9c3df; line-height:1.7; }
.of-section-warm { background:#efeee9; }
.of-split { display:grid; grid-template-columns:.9fr 1.1fr; gap:8rem; }
.of-split h2 { margin:0; }
.of-value-list article { display:grid; grid-template-columns:3rem 1fr; padding:1.8rem 0; border-top:1px solid #ceccd0; }
.of-value-list article:last-child { border-bottom:1px solid #ceccd0; }
.of-value-list i { color:#6b59bf; font-style:normal; }
.of-value-list h3 { margin:0 0 .5rem; font-size:1.25rem; }
.of-value-list p { margin:0; color:var(--of-muted); line-height:1.75; }
.of-hardware-panel { padding:clamp(2rem,5vw,4.5rem); border:1px solid var(--of-line); background:#fff; }
.of-hardware-panel h2 { margin:0; }
.of-hardware-heading { display:grid; grid-template-columns:.45fr 1fr 1fr; gap:3rem; align-items:start; }
.of-hardware-heading>p:last-child { margin:0; color:var(--of-muted); line-height:1.8; }
.of-data-flow { position:relative; display:grid; grid-template-columns:repeat(3,1fr); gap:0; margin-top:4rem; border-top:1px solid var(--of-line); }
.of-data-flow::before { content:""; position:absolute; top:-2px; left:0; width:33.33%; height:3px; background:#6b59bf; animation:of-flow 5s ease-in-out infinite; }
.of-flow-step { display:grid; grid-template-columns:2.4rem 1fr; gap:1rem; min-height:220px; padding:2rem 2rem 0 0; border-right:1px solid var(--of-line); }
.of-flow-step:not(:first-child) { padding-left:2rem; }.of-flow-step:last-child { border-right:0; padding-right:0; }
.of-flow-number { color:#7666c5; font-family:ui-monospace,SFMono-Regular,monospace; font-size:.68rem; }
.of-flow-step h3 { margin:0 0 .7rem; font-size:1.15rem; letter-spacing:-.025em; }
.of-flow-step p { margin:0; color:var(--of-muted); font-size:.88rem; line-height:1.7; }
.of-flow-step small { display:inline-block; margin-top:1.2rem; color:#4f3da2; font-size:.68rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; }
@keyframes of-flow { 0%,15% { transform:translateX(0); } 42%,58% { transform:translateX(100%); } 85%,100% { transform:translateX(200%); } }
.of-contact { position:relative; overflow:hidden; background:linear-gradient(145deg,#171331 0%,#21155e 58%,#2d1d72 100%); color:#fff; }
.of-contact::before { content:""; position:absolute; inset:0; opacity:.12; background-image:radial-gradient(circle,rgba(255,255,255,.7) 1px,transparent 1.5px); background-size:22px 22px; mask-image:linear-gradient(90deg,#000,transparent 70%); }
.of-contact-orbit { position:absolute; width:34rem; height:34rem; right:-10rem; top:-13rem; border:1px solid rgba(188,176,255,.16); border-radius:50%; box-shadow:0 0 0 5rem rgba(188,176,255,.035),0 0 0 10rem rgba(188,176,255,.025); animation:of-orbit-breathe 7s ease-in-out infinite; }
.of-contact-grid { position:relative; display:grid; grid-template-columns:.88fr 1.12fr; gap:clamp(4rem,8vw,7rem); align-items:center; }
.of-contact h2 { margin:0; }
.of-contact-copy>p { max-width:570px; color:#c9c4dc; line-height:1.8; }
.of-demo-path { margin-top:2.7rem; border-top:1px solid rgba(255,255,255,.18); }
.of-demo-path>div { display:grid; grid-template-columns:2.5rem 1fr; gap:1rem; padding:1.15rem 0; border-bottom:1px solid rgba(255,255,255,.18); }
.of-demo-path>div>span { padding-top:.15rem; color:#bcb0ff; font-family:ui-monospace,SFMono-Regular,monospace; font-size:.66rem; }
.of-demo-path strong { font-family:"Manrope"; font-size:.9rem; }.of-demo-path p { margin:.3rem 0 0; color:#aaa4c0; font-size:.8rem; line-height:1.55; }
.of-form-card { position:relative; overflow:hidden; padding:clamp(1.7rem,4vw,3rem); border:1px solid rgba(255,255,255,.65); border-radius:.8rem; background:linear-gradient(180deg,#fff 0%,#faf9ff 100%); color:var(--of-ink); box-shadow:0 35px 90px -30px rgba(5,2,25,.65); }
.of-form-card::before { content:""; position:absolute; top:0; left:0; right:0; height:4px; background:linear-gradient(90deg,#6b59bf,#a99bea,#6b59bf); background-size:200% 100%; animation:of-form-shimmer 6s linear infinite; }
.of-form-heading { margin:-.35rem 0 1.8rem; padding-bottom:1.5rem; border-bottom:1px solid #e2dfea; }
.of-form-heading>span { color:#6b59bf; font-size:.62rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; }
.of-form-card h3 { margin:0; font-size:1.6rem; }
.of-form-heading h3 { margin-top:.55rem; }.of-form-heading p { margin:.5rem 0 0; color:var(--of-muted); font-size:.86rem; line-height:1.6; }
.of-form-grid { display:grid; grid-template-columns:1fr 1fr; gap:1.1rem; }
.of-form label>span,.of-form legend { display:block; margin-bottom:.5rem; color:#373548; font-size:.78rem; font-weight:700; }
.of-form small { color:#8c8998; font-weight:400; }
.of-form input:not([type=radio]),.of-form select { width:100%; border:1px solid #d7d5de; border-radius:.35rem; background:#faf9fc; padding:.82rem .9rem; color:var(--of-ink); font:inherit; font-size:.9rem; }
.of-form input:focus,.of-form select:focus { outline:3px solid rgba(91,72,181,.15); border-color:#6b59bf; background:#fff; }
.of-form-wide { grid-column:1/-1; }
.of-form fieldset { margin:1.4rem 0; padding:0; border:0; }
.of-radio-grid { display:grid; grid-template-columns:1fr 1fr; gap:.6rem; }
.of-radio-grid label>input { position:absolute; opacity:0; }
.of-radio-grid label>span { display:flex; align-items:center; gap:.7rem; padding:.8rem; border:1px solid #dedce4; border-radius:.35rem; cursor:pointer; font-weight:500; }
.of-radio-grid i { width:.65rem; height:.65rem; border:2px solid #aaa6b6; border-radius:50%; }
.of-radio-grid input:checked+span { border-color:#6b59bf; background:#f1eeff; color:#36237f; }
.of-radio-grid input:checked+span i { border-color:#6b59bf; background:#6b59bf; box-shadow:inset 0 0 0 2px #f1eeff; }
.of-honeypot { position:absolute; left:-10000px; }
.of-faq { background:#fff; }
.of-faq-grid { display:grid; grid-template-columns:.7fr 1.3fr; gap:8rem; }
.of-faq h2 { margin:0; }
.of-faq-grid>div>p:last-child { color:var(--of-muted); }
.of-questions { border-top:1px solid var(--of-line); }
.of-questions details { border-bottom:1px solid var(--of-line); padding:1.5rem 0; }
.of-questions summary { display:flex; justify-content:space-between; gap:1rem; cursor:pointer; list-style:none; font-family:"Manrope"; font-weight:700; }
.of-questions summary span { color:#6b59bf; font-size:1.3rem; transition:transform .2s; }
.of-questions details[open] summary span { transform:rotate(45deg); }
.of-questions details p { max-width:650px; margin:1rem 0 0; color:var(--of-muted); line-height:1.75; }
.of-flash { position:fixed; z-index:80; top:6rem; left:50%; width:min(90%,600px); transform:translateX(-50%); }
.of-flash>div { display:flex; gap:.8rem; padding:1rem 1.2rem; border-radius:.5rem; background:#fff; color:var(--of-ink); box-shadow:0 15px 50px rgba(0,0,0,.18); }
.of-flash-success span { color:#18754c; }.of-flash-error span { color:#b42318; }
.of-reveal { animation:of-rise .75s cubic-bezier(.2,.7,.2,1) both; }
.js .of-scroll-reveal { opacity:0; transform:translateY(28px); transition:opacity .75s cubic-bezier(.2,.7,.2,1),transform .75s cubic-bezier(.2,.7,.2,1); }
.js .of-scroll-reveal.of-visible { opacity:1; transform:none; }
.js .of-scroll-item { opacity:0; transform:translateY(16px); transition:opacity .55s ease,transform .55s ease; }
.js .of-visible .of-scroll-item { opacity:1; transform:none; }
.js .of-visible .of-scroll-item:nth-child(2) { transition-delay:.09s; }.js .of-visible .of-scroll-item:nth-child(3) { transition-delay:.18s; }
.js .of-visible .of-scroll-item:nth-child(4) { transition-delay:.27s; }.js .of-visible .of-scroll-item:nth-child(5) { transition-delay:.36s; }.js .of-visible .of-scroll-item:nth-child(6) { transition-delay:.45s; }
.of-visible .of-feature-card:nth-child(2)::before { transition-delay:.09s; }.of-visible .of-feature-card:nth-child(3)::before { transition-delay:.18s; }
.of-visible .of-feature-card:nth-child(4)::before { transition-delay:.27s; }.of-visible .of-feature-card:nth-child(5)::before { transition-delay:.36s; }.of-visible .of-feature-card:nth-child(6)::before { transition-delay:.45s; }
@keyframes of-rise { from { opacity:0; transform:translateY(16px); } }
@keyframes of-orbit-breathe { 50% { transform:scale(1.06); opacity:.72; } }
@keyframes of-form-shimmer { to { background-position:200% 0; } }
.of-footer { border-top:1px solid #d9d8df; background:#fff; color:#45445a; }
.of-footer-grid { display:grid; grid-template-columns:1.65fr repeat(3,1fr); gap:clamp(2.5rem,6vw,6rem); padding:4.5rem 0 3.75rem; }
.of-footer-logo { width:auto; height:2.15rem; }
.of-footer-brand>p { max-width:310px; margin:1.25rem 0; color:#68677a; font-size:.94rem; line-height:1.75; }
.of-footer address { display:grid; gap:.35rem; color:#8a899a; font-size:.82rem; font-style:normal; line-height:1.55; }
.of-footer address strong { font-weight:500; }
.of-footer a { transition:color .18s ease; }
.of-footer a:hover { color:#322080; }
.of-footer nav,.of-footer-contact { display:flex; flex-direction:column; align-items:flex-start; gap:1rem; padding-top:.2rem; font-size:.9rem; }
.of-footer h2 { margin:0 0 .55rem; color:#9996ad; font-family:ui-monospace,SFMono-Regular,monospace; font-size:.62rem; font-weight:600; letter-spacing:.18em; text-transform:uppercase; }
.of-footer-contact span { color:#68677a; }
.of-footer-bottom { display:flex; justify-content:space-between; padding:1.5rem 0 2.5rem; border-top:1px solid #dedde4; color:#8d8a9e; font-family:ui-monospace,SFMono-Regular,monospace; font-size:.62rem; letter-spacing:.13em; text-transform:uppercase; }
.of-footer-bottom i { margin:0 .7rem; font-style:normal; }
.of-legal { min-height:70vh; background:#f5f4f0; }
.of-legal-hero { padding:5.5rem 0 3.5rem; border-bottom:1px solid var(--of-line); }
.of-legal-hero .of-container { display:grid; grid-template-columns:.55fr 1.45fr; gap:4rem; }
.of-legal-hero h1 { max-width:700px; margin:0; font-size:clamp(2.8rem,6vw,5rem); line-height:1; font-weight:600; }
.of-legal-intro { max-width:710px; margin:1.5rem 0 0; color:var(--of-muted); line-height:1.8; }
.of-legal-date { color:#827f90; font-family:ui-monospace,SFMono-Regular,monospace; font-size:.68rem; letter-spacing:.1em; text-transform:uppercase; }
.of-legal-body { display:grid; grid-template-columns:230px 1fr; gap:5rem; padding:4rem 0 6rem; }
.of-legal-nav { position:sticky; top:7rem; display:flex; flex-direction:column; align-items:flex-start; gap:.85rem; }
.of-legal-nav strong { margin-bottom:.5rem; color:#9b98a7; font-family:ui-monospace,SFMono-Regular,monospace; font-size:.62rem; letter-spacing:.16em; text-transform:uppercase; }
.of-legal-nav a { color:#626071; font-size:.82rem; }
.of-legal-nav a:hover { color:#322080; }
.of-legal-content { max-width:760px; }
.of-legal-content article { padding:0 0 2.4rem; margin:0 0 2.4rem; border-bottom:1px solid #d8d6dc; scroll-margin-top:7rem; }
.of-legal-content article:last-child { margin-bottom:0; border-bottom:0; }
.of-legal-content h2 { margin:0 0 1rem; font-size:1.35rem; font-weight:650; letter-spacing:-.025em; }
.of-legal-content p,.of-legal-content li { color:#5f5d6c; font-size:.94rem; line-height:1.8; }
.of-legal-content p { margin:.7rem 0; }.of-legal-content ul { display:grid; gap:.65rem; margin:.8rem 0; padding-left:1.2rem; }
.of-legal-content a { color:#322080; text-decoration:underline; text-underline-offset:3px; }
.of-legal-contact { padding:1.4rem!important; border:1px solid #d8d5e5!important; background:#fff; }
@media (max-width:900px) { .of-heading-row,.of-dark-grid,.of-split,.of-contact-grid,.of-faq-grid { grid-template-columns:1fr; gap:3rem; }.of-hardware-heading { grid-template-columns:1fr; gap:1.5rem; }.of-feature-grid { grid-template-columns:1fr 1fr; }.of-proof-grid { grid-template-columns:1fr; }.of-proof-grid>div { border-right:1px solid var(--of-line); }.of-product-caption span:last-child { display:none; } }
@media (max-width:600px) { .of-container { width:min(100% - 2rem,1200px); }.of-hero h1 { font-size:2.9rem; }.of-actions { flex-direction:column; }.of-trust-row { justify-content:flex-start; text-align:left; }.of-feature-grid,.of-form-grid,.of-radio-grid,.of-data-flow { grid-template-columns:1fr; }.of-feature-card { min-height:auto; }.of-feature-card h3 { margin-top:2.5rem; }.of-data-flow::before { display:none; }.of-flow-step,.of-flow-step:not(:first-child) { min-height:auto; padding:1.6rem 0; border-right:0; border-bottom:1px solid var(--of-line); }.of-button { gap:1rem; }.of-product-stage { padding:.35rem; }.of-product-caption { padding:.4rem .25rem .75rem; } }
@media (max-width:900px) { .of-footer-grid { grid-template-columns:1.4fr 1fr 1fr; }.of-footer-contact { display:none; } }
@media (max-width:900px) { .of-legal-hero .of-container { grid-template-columns:1fr; gap:1rem; }.of-legal-body { grid-template-columns:1fr; }.of-legal-body aside { display:none; } }
@media (max-width:600px) { .of-footer-grid { grid-template-columns:1fr 1fr; padding:3.5rem 0 2.5rem; }.of-footer-brand { grid-column:1/-1; }.of-footer-bottom { gap:1.5rem; flex-direction:column; } }
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; }.of-page * { animation:none!important; transition:none!important; }.js .of-scroll-reveal,.js .of-scroll-item { opacity:1; transform:none; } }
/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *


 */

.speed-badge {
  display: block;
  min-width: 78px;
  text-align: center;
}


.mb-15{
  margin-bottom: 15px;
}

@media (min-width: 1024px) {
  .place-form-layout {
    grid-template-columns: minmax(0, 3fr) minmax(360px, 2fr);
  }
}

.place-autocomplete-host gmp-place-autocomplete {
  display: block;
  width: 100%;
  min-height: 3rem;
}