/* Shared presentation refinement for the brochure and read-only demo.
   Keeps the original Home palette; no !important overrides. */

/* The feature list is editorial, rather than a grid of boxed cards. */
.feature-grid {
  gap: 0 34px;
  border: 0;
}
.feature-grid article {
  position: relative;
  padding: 26px 5px 31px;
  min-height: 184px;
  border: 0;
  border-top: 1px solid var(--line);
}
.feature-grid article::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 5px;
  width: 35px;
  height: 2px;
  background: #b7c9dc;
}
.feature-grid .num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 9px;
  color: #466b94;
  background: #e7edf5;
  letter-spacing: 0;
}
.feature-grid h3 { margin: 17px 0 7px; }
.feature-grid p { max-width: 28em; line-height: 1.85; }

/* Heading and summary are plain product information, not a two-line slogan. */
.intro h1 {
  font-size: clamp(29px, 3.7vw, 45px);
  letter-spacing: -.035em;
  line-height: 1.35;
}
.intro > p { max-width: 720px; }

/* Home uses restrained rails and whitespace for figures. */
.cards {
  gap: 0;
  border-block: 1px solid var(--line);
}
.metric-card {
  min-height: 116px;
  padding: 18px 19px;
  border: 0;
  border-right: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
}
.metric-card:last-child { border-right: 0; }
.metric-card small { font-size: 12px; font-weight: 600; }
.metric-card strong {
  color: #344f70;
  font-size: clamp(20px, 2vw, 26px);
  letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
  line-height: 1.45;
}
.chart-block {
  border-radius: 8px;
  border-color: #e2e7ee;
  box-shadow: 0 2px 8px rgba(37, 57, 80, .035);
}
.preview-metrics > div {
  background: transparent;
}

/* Search controls appear as part of the toolbar instead of boxed form cards. */
.search-field { min-width: 230px; }
.search-control { position: relative; }
.search-control input {
  width: 100%;
  min-height: 39px;
  padding: 9px 35px 9px 38px;
  border: 1px solid #e0e5ec;
  border-radius: 10px;
  color: var(--text);
  background: #eef1f5;
  outline: none;
  transition: background .15s, border-color .15s, box-shadow .15s;
}
.search-control input::placeholder { color: #8793a4; }
.search-control input:focus {
  background: #fff;
  border-color: #8fa8c5;
  box-shadow: 0 0 0 3px rgba(85, 117, 154, .10);
}
.search-glyph {
  position: absolute;
  left: 14px;
  top: 11px;
  width: 13px;
  height: 13px;
  border: 1.7px solid #728298;
  border-radius: 50%;
  pointer-events: none;
}
.search-glyph::after {
  content: "";
  position: absolute;
  width: 6px;
  height: 1.7px;
  background: #728298;
  transform: rotate(46deg);
  top: 11px;
  left: 10px;
  border-radius: 2px;
}

/* Vehicle and contact-type filters share the search field treatment. */
.toolbar .field select {
  min-height: 39px;
  padding: 9px 36px 9px 14px;
  border: 1px solid #e0e5ec;
  border-radius: 10px;
  color: var(--text);
  background-color: #eef1f5;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23728298' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  cursor: pointer;
  outline: none;
  transition: background-color .15s, border-color .15s, box-shadow .15s;
}
.toolbar .field select:focus {
  background-color: #fff;
  border-color: #8fa8c5;
  box-shadow: 0 0 0 3px rgba(85, 117, 154, .10);
}

/* Home: match the production hierarchy, icon shortcuts and two-column ledger. */
.home-view { padding-top: 1px; }
.home-title { margin: 0 0 32px; }
.home-section-top,
.home-column-head { display: flex; justify-content: space-between; align-items: center; gap: 14px; }
.home-section-top h2,
.home-column-head h2 { font-size: 15px; margin: 0; }
.home-section-top .button { min-height: 35px; }
.home-favorites { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; margin: 15px 0 35px; }
.home-favorite {
  background: transparent; border: 0; border-bottom: 1px solid var(--line);
  height: 76px; min-height: 76px; padding: 8px 10px; color: #44698f;
  display: grid; align-content: center; justify-items: center;
  font-size: 14px; font-weight: 600; line-height: 1.2; gap: 4px;
}
.home-favorite-icon { display: block; width: 20px; height: 20px; color: #475467; }
.home-favorite-icon svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.home-favorite:hover:not(:disabled) { background: #edf1f6; }
.home-add:disabled { cursor: not-allowed; opacity: 1; color: #43668e; }
.home-favorite-plus { font-size: 20px; line-height: 1; color: inherit; }
.home-status-title { font-size: 15px; margin: 0 0 22px; }
.home-status-row { display: grid; grid-template-columns: repeat(4, 1fr); border-block: 1px solid var(--line); margin-bottom: 33px; }
.home-status-row > div { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 17px 16px; border-right: 1px solid var(--line); }
.home-status-row > div:last-child { border: 0; }
.home-status-row span { color: #536c8c; font-size: 12px; white-space: nowrap; }
.home-status-row strong { color: #476a91; font-size: 24px; line-height: 1; font-variant-numeric: tabular-nums; }
.home-status-row strong.alert { color: #cf4838; }
.home-status-row small { font-size: 11px; font-weight: 500; }
.home-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 31px; }
.home-column-head { padding: 2px 0 22px; }
.home-column-head button { border: 0; background: none; color: #4c6d94; font-size: 12px; cursor: pointer; padding: 4px; }
.home-column-head button:hover { text-decoration: underline; }
.home-record { display: flex; gap: 13px; align-items: center; border-top: 1px solid var(--line); min-height: 64px; padding: 10px 7px; }
.home-record:last-child { border-bottom: 1px solid var(--line); }
.home-motorcycle { flex-shrink: 0; width: 47px; height: 32px; color: #243140; }
.home-record-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.home-record-link { display: block; max-width: 100%; width: max-content; border: 0; background: transparent; color: #416790; padding: 0; font-size: 12px; font-weight: 750; text-align: left; line-height: 1.45; }
.home-record-link:hover { text-decoration: underline; }
.home-record-text span { color: #526e92; font-size: 11px; overflow-wrap: anywhere; }
.home-record-tail { border: 0; background: transparent; color: #476b95; cursor: pointer; font-size: 11px; flex-shrink: 0; }
.home-record time { color: #4f7098; font-size: 11px; flex-shrink: 0; }
.home-disclaimer { margin-top: 20px; }

/* The demo sidebar uses the same SVG path set and collapsed groups as production. */
.sidebar .sidebar-brand { gap: 8px; padding-inline: 14px; font-size: 11px; line-height: 1.15; letter-spacing: -.01em; }
.sidebar-logo { width: 36px; height: 36px; object-fit: contain; flex-shrink: 0; }
.sidebar .sidebar-brand small { color: #526984; font-size: 11px; font-weight: 700; margin-top: 4px; }
.sidebar nav button {
  display: flex;
  align-items: center;
  gap: 11px;
  min-height: 44px;
  padding: 10px 15px;
}
.sidebar nav button span { margin-left: 0; }
.sidebar nav .nav-icon {
  display: block;
  width: 15px;
  height: 15px;
  flex: 0 0 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linejoin: round;
  stroke-linecap: round;
}
.sidebar nav .nav-more { border-top: 1px solid var(--line); margin: 9px 7px 0; padding-top: 9px; }
.sidebar nav .nav-more summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  list-style: none;
  padding: 10px 6px;
  color: #647085;
  font-size: 11px;
  font-weight: 750;
}
.sidebar nav .nav-more summary::-webkit-details-marker { display: none; }
.sidebar nav .nav-more summary::after { content: "⌄"; font-size: 12px; }
.sidebar nav .nav-more[open] summary::after { transform: rotate(180deg); }
.sidebar nav .nav-more-content { padding: 1px 0 5px; }
.sidebar nav .nav-more-content button { padding-left: 11px; }
.sidebar nav .nav-placeholder { display: block; padding: 7px 12px; color: #8b95a4; font-size: 11px; }
.home-motorcycle {
  width: 47px;
  height: 37px;
  object-fit: contain;
  flex-shrink: 0;
  mix-blend-mode: multiply;
}
@media (max-width: 1150px) {
  .home-status-row > div { padding-inline: 10px; }
  .home-status-row span { font-size: 11px; }
  .home-status-row strong { font-size: 21px; }
  .home-columns { gap: 22px; }
}
@media (max-width: 760px) {
  .home-columns { grid-template-columns: 1fr; gap: 28px; }
  .home-status-row { grid-template-columns: repeat(2, 1fr); }
  .home-status-row > div:nth-child(2) { border-right: 0; }
  .home-status-row > div:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
}
@media (max-width: 850px) {
  .sidebar .sidebar-brand { padding: 10px; justify-content: center; }
  .sidebar nav button { justify-content: center; gap: 0; padding: 11px 6px; }
  .sidebar nav button span { display: none; }
  .sidebar nav .nav-more { margin-inline: 2px; }
  .sidebar nav .nav-more summary { justify-content: center; font-size: 0; }
  .sidebar nav .nav-more summary::after { font-size: 12px; }
  .sidebar nav .nav-more-content button { padding: 11px 6px; }
}
@media (max-width: 560px) {
  .home-title { margin-bottom: 24px; }
  .home-favorites { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; }
  .home-favorite { font-size: 11px; min-height: 63px; }
  .home-status-row > div { padding: 15px 8px; }
  .home-record { gap: 8px; }
  .home-motorcycle { width: 37px; }
}

@media (max-width: 760px) {
  .feature-grid { gap: 0 22px; }
  .feature-grid article { padding: 24px 4px; min-height: 174px; }
}
@media (max-width: 560px) {
  .cards { grid-template-columns: repeat(2, 1fr); }
  .metric-card:nth-child(2) { border-right: 0; }
  .metric-card:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .metric-card { padding: 14px 11px; min-height: 105px; }
}
@media (max-width: 470px) {
  .feature-grid { gap: 0; }
  .feature-grid article { min-height: 0; }
}
.brand-logo { width: 39px; height: 39px; object-fit: contain; flex-shrink: 0; }
@media (max-width: 760px) { .brand-logo { width: 34px; height: 34px; } }
.preview-window.preview-live { --preview-scale: .75; position: relative; display: block; height: calc(850px * var(--preview-scale)); overflow: hidden; background: #f6f7f9; }
.preview-live iframe { display: block; width: 1440px; height: 850px; border: 0; pointer-events: none; transform: scale(var(--preview-scale)); transform-origin: top left; }
.preview-caption a { color: #44698f; text-decoration: underline; text-underline-offset: 2px; }
@media (max-width: 1000px) { .preview-window.preview-live { --preview-scale: .61; } }
@media (max-width: 760px) { .preview-window.preview-live { --preview-scale: .48; } }
@media (max-width: 570px) { .preview-window.preview-live { --preview-scale: .35; } }
@media (max-width: 440px) { .preview-window.preview-live { --preview-scale: .27; } }
.site-about { padding-top: 29px; padding-bottom: 24px; }
.site-about h2 { font-size: 15px; margin: 0 0 15px; color: #202a3a; letter-spacing: 0; }
.site-about dl { margin: 0; display: grid; gap: 9px; }
.site-about dl > div { display: grid; grid-template-columns: 90px minmax(0,1fr); gap: 13px; }
.site-about dt { font-weight: 700; color: #536477; }
.site-about dd { margin: 0; color: #334155; }
.support-subhead { font-size: 15px; font-weight: 700; margin: 0 0 13px; }
.support-subhead-spaced { margin-top: 34px; }