/* Asset Manager page — page-scoped styles. Builds on bundle.css tokens (:root vars). */
:root {
  --am-line: #0606061a;
  --am-line-soft: #0606060d;
  --am-blue-tint: var(--additional-lightblue);
  --am-blue-line: #0063f238;
  --am-shadow: 0 24px 60px #00205b1a;
  --am-green: #1a8a4c;
  --am-green-dark: #0f6b3a;
  --am-green-tint: #e8f6ed;
  --am-amber: #8a5b00;
  --am-amber-tint: #fff4dc;
  --am-gray-chip: #f1f5f9;
  --am-bar-track: #e9eef4;
}

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* ---- layout helpers ---- */
.am-wrap { max-width: 72rem; margin-left: auto; margin-right: auto; }
.am-center { justify-content: center; flex-wrap: wrap; }
.am-pad { padding-top: 5rem; padding-bottom: 5rem; }
.am-mt-3 { margin-top: 3rem; }
.am-mt-4 { margin-top: 4rem; }
.am-mono { font-family: DM Mono, sans-serif; letter-spacing: .02em; }
.am-anchor { scroll-margin-top: 6rem; }
.am-text-left { text-align: left; }

/* ---- hero ---- */
.am-hero-top { padding-top: 3.5rem; }
.am-hero-flow { margin-top: 3.5rem; padding-bottom: 4rem; }
asset-manager-flow { display: block; width: 100%; }
@media (min-width: 820px) { asset-manager-flow:not(.am-ready) { aspect-ratio: 1160 / 380; } }

/* ---- pills / chips ---- */
.am-pill {
  display: inline-block;
  background: var(--am-blue-tint);
  color: var(--brand-primary);
  border-radius: 999em;
  padding: .4rem .75rem;
  font-size: .75rem;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
}
.am-pill.is-solid { background: var(--brand-primary); color: #fff; }
.am-pill.is-dark { background: var(--background-default); color: #fff; }
.am-pill.is-gray { background: var(--am-gray-chip); color: var(--background-default); }
.am-pill.is-muted { background: var(--am-gray-chip); color: #06060699; }
.am-pill.is-amber { background: var(--am-amber-tint); color: var(--am-amber); }
.am-pill.is-lg { padding: .5rem .875rem; font-size: .8125rem; }

/* ---- cards (shared by all UI mocks) ---- */
.am-card {
  background: #fff;
  border: 1px solid var(--am-line);
  border-radius: 1rem;
  box-shadow: var(--am-shadow);
  overflow: hidden;
  color: var(--background-default);
}
.am-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.5rem;
  border-bottom: 1px solid var(--am-line-soft);
  font-size: .9375rem;
  font-weight: 500;
}
.am-card-head.is-start { justify-content: flex-start; gap: .75rem; }
.am-card-body { padding: 1.375rem 1.5rem; display: flex; flex-direction: column; gap: .875rem; }
.am-card-body.is-roomy { gap: 1.375rem; padding-top: 1.5rem; padding-bottom: 1.5rem; }
.am-dot { width: 10px; height: 10px; border-radius: 999em; background: var(--brand-primary); flex: none; }

/* ---- "what you get": list -> arrow -> enriched record ---- */
.am-scene-wrap { max-width: 60rem; margin-left: auto; margin-right: auto; }
.am-scene {
  display: grid;
  grid-template-columns: minmax(0, 3fr) auto minmax(0, 7fr);
  align-items: start;
  gap: 0 1rem;
}
.am-scene-arrow { align-self: center; width: 3rem; height: 1rem; color: var(--brand-primary); }
.am-scene-arrow path { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.am-list-panel {
  min-width: 0;
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--am-line);
  border-radius: 1rem;
  box-shadow: 0 10px 30px #00205b14;
  color: var(--background-default);
}
.am-list-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  padding: .75rem 1rem;
  background: var(--background-secondary);
  border-bottom: 1px solid var(--am-line);
  font-size: .8125rem;
  font-weight: 500;
}
.am-list-panel-head span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.am-list-panel-col,
.am-list-panel-row { display: grid; grid-template-columns: 2rem minmax(0, 1fr); }
.am-list-panel-col { font-size: .6875rem; font-weight: 500; color: #06060673; background: #f7fafd; border-bottom: 1px solid #06060612; }
.am-list-panel-col span { padding: .375rem .625rem; border-right: 1px solid #06060612; }
.am-list-panel-col span:last-child { border-right: 0; }
.am-list-panel-row { font-size: .8125rem; border-bottom: 1px solid var(--am-line-soft); }
.am-list-panel-row:last-child { border-bottom: 0; }
.am-list-panel-row span { padding: .5rem .625rem; }
.am-list-panel-row span:first-child { font-size: .6875rem; color: #9aa6b4; background: #f7fafd; border-right: 1px solid #06060612; }
.am-list-panel-row span:last-child { font-family: DM Mono, sans-serif; font-weight: 500; letter-spacing: .02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.am-list-panel-row.is-hl { background: var(--am-blue-tint); }
.am-list-panel-row.is-hl span:last-child { color: var(--brand-primary); }
.am-record { min-width: 0; }
.am-record-title { display: flex; align-items: center; gap: .625rem; min-width: 0; }
.am-record-thumb { flex: none; width: 2.25rem; height: 2.25rem; object-fit: contain; }
.am-record-checks {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .875rem 1.5rem;
  padding: 1.125rem 1.5rem;
  background: var(--am-blue-tint);
  border-bottom: 1px solid var(--am-line-soft);
}
.am-check { display: flex; align-items: center; gap: .625rem; font-size: .875rem; font-weight: 500; }
.am-check::before {
  content: "\2713";
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 999em;
  background: var(--brand-primary);
  color: #fff;
  font-size: .7rem;
  font-weight: 700;
}
.am-record-scroll { position: relative; height: 19rem; overflow: hidden; }
.am-record-scroll::before,
.am-record-scroll::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  pointer-events: none;
  z-index: 1;
}
.am-record-scroll::before { top: 0; height: 40px; background: linear-gradient(180deg, #fff, #fff0); }
.am-record-scroll::after { bottom: 0; height: 56px; background: linear-gradient(0deg, #fff, #fff0); }
.am-record-track { animation: am-spec-scroll 34s linear infinite; }
.am-spec-group { display: flex; flex-direction: column; gap: 2px; padding: 0 1.5rem; }
.am-spec-title {
  font-family: DM Mono, sans-serif;
  font-size: .6875rem;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--brand-primary);
  padding: 1.25rem 0 .375rem;
}
.am-spec-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1.25rem;
  padding: .5625rem 0;
  border-bottom: 1px solid var(--am-line-soft);
  font-size: .84375rem;
}
.am-spec-row span:first-child { color: #06060680; }
.am-spec-row span:last-child { font-weight: 500; text-align: right; }
@keyframes am-spec-scroll {
  0%, 8% { transform: translateY(0); }
  92%, 100% { transform: translateY(-50%); }
}

/* ---- how it works ---- */
.am-gradient-bg {
  background-image: url("../images/Light-Blue-Gradient.avif");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.am-steps-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.5rem;
  margin-top: 3rem;
}
.am-step {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 2.25rem 1.75rem;
  background: #fff;
  border: 1px solid #0000001a;
  border-radius: 1rem;
}
.am-step-num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 999em;
  background: var(--brand-primary);
  color: #fff;
  font-family: DM Mono, sans-serif;
  font-size: 1rem;
  font-weight: 500;
}
.am-app-wrap { position: relative; margin-top: 4rem; }
.am-float-chip {
  position: absolute;
  top: 3.75rem;
  right: -1rem;
  z-index: 3;
  padding: .75rem 1rem;
  background: #fff;
  border: 1px solid var(--am-line);
  border-radius: 1rem;
  box-shadow: 0 14px 34px #00205b24;
  transform: rotate(-2deg);
  color: var(--brand-primary);
  font-size: .875rem;
  font-weight: 500;
  white-space: nowrap;
}
.am-app { overflow-x: auto; overflow-y: hidden; }
.am-app-bar,
.am-filters,
.am-table-head,
.am-table-row { min-width: 800px; }
.am-app-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.5rem;
  border-bottom: 1px solid var(--am-line-soft);
}
.am-app-bar > div { display: flex; align-items: center; gap: .875rem; }
.am-dots { display: flex; gap: 6px; }
.am-dots span { width: 10px; height: 10px; border-radius: 999em; background: #e3e7ec; }
.am-app-title { font-size: .875rem; font-weight: 500; }
.am-app-sub { font-size: .8125rem; color: #06060673; }
.am-app-actions { gap: .625rem; }
.am-filters {
  display: flex;
  gap: .5rem;
  padding: .875rem 1.5rem;
  border-bottom: 1px solid var(--am-line-soft);
}
.am-table-head,
.am-table-row {
  display: grid;
  grid-template-columns: 1.15fr 1.55fr .55fr .85fr 1fr;
  gap: 1rem;
  align-items: center;
  padding: .75rem 1.5rem;
}
.am-table-head {
  font-family: DM Mono, sans-serif;
  font-size: .6875rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #06060673;
  border-bottom: 1px solid var(--am-line-soft);
}
.am-table-row {
  padding: .9375rem 1.5rem;
  font-size: .875rem;
  border-bottom: 1px solid var(--am-line-soft);
}
.am-table-row:last-child { border-bottom: 0; }
.am-table-row.is-active { background: var(--am-blue-tint); }
.am-strong { font-weight: 500; }
.am-muted { color: #060606b3; }
.am-faint { color: #0606068c; }

/* ---- use cases ---- */
.am-uc-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(2.5rem, 5vw, 5rem);
  align-items: center;
}
.am-uc-text { display: flex; flex-direction: column; align-items: flex-start; gap: 1.25rem; }
.am-quote {
  display: flex;
  gap: 1rem;
  padding: 1.5rem 1.75rem;
  background: #fff;
  border: 1px solid var(--am-blue-line);
  border-radius: 1rem;
}
.am-quote-mark { flex: none; color: var(--brand-primary); font-size: 2.75rem; line-height: .9; font-weight: 500; }
.am-quote p { margin: 0; font-size: 1rem; line-height: 1.6; color: var(--background-default); }
.am-kv {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: .8125rem;
  border-bottom: 1px solid var(--am-line-soft);
  font-size: .875rem;
}
.am-kv:last-child { border-bottom: 0; padding-bottom: 0; }
.am-kv .k { color: #06060680; }
.am-kv .v { font-weight: 500; text-align: right; }
.am-kv .v.is-brand { color: var(--brand-primary); }
.am-list { padding-top: .5rem; padding-bottom: 1.375rem; gap: 0; }
.am-list-row {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: .9375rem 0;
  border-bottom: 1px solid var(--am-line-soft);
}
.am-list-row:last-of-type { border-bottom: 0; }
.am-list-main { flex: 1; min-width: 0; }
.am-list-title { font-size: .875rem; font-weight: 500; }
.am-list-sub { font-size: .75rem; color: #06060680; }
.am-bar { flex: none; width: 6.875rem; height: 6px; border-radius: 999em; background: var(--am-bar-track); overflow: hidden; }
.am-bar > span { display: block; height: 100%; border-radius: 999em; background: var(--brand-primary); }
.am-bar.is-wide { flex: 1; width: auto; height: 8px; }
.am-list-num { min-width: 3.25rem; font-family: DM Mono, sans-serif; font-size: .8125rem; font-weight: 500; text-align: right; white-space: nowrap; }
.am-note {
  margin-top: .625rem;
  padding: .875rem 1.125rem;
  background: var(--am-blue-tint);
  border-radius: .75rem;
  font-size: .84375rem;
  font-weight: 500;
  color: #060606b3;
}
.am-stack { display: flex; flex-direction: column; gap: .625rem; }
.am-label { font-size: .75rem; font-weight: 500; color: #06060673; }
.am-chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.am-big-stat {
  display: flex;
  flex-direction: column;
  gap: .25rem;
  padding: 1.375rem;
  background: var(--am-blue-tint);
  border-radius: .875rem;
  text-align: center;
}
.am-big-stat .n { font-size: 2.625rem; font-weight: 500; letter-spacing: -.02em; line-height: 1; color: var(--brand-primary); }
.am-big-stat .l { font-size: .875rem; font-weight: 500; color: #06060699; }
.am-btn-row { display: flex; gap: .625rem; }
.am-btn-row .am-pill { flex: 1; padding: .75rem 0; font-size: .875rem; text-align: center; }
.am-bar-row { display: flex; align-items: center; gap: .875rem; }
.am-bar-label { width: 6rem; font-family: DM Mono, sans-serif; font-size: .875rem; font-weight: 500; }
.am-bar-row .am-list-num { min-width: 2.25rem; }
.am-stats-mini { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .625rem 1.125rem; }
.am-stats-mini div { display: flex; justify-content: space-between; gap: .625rem; font-size: .84375rem; }
.am-stats-mini .k { color: #0606068c; }
.am-stats-mini .v { font-weight: 500; }
.am-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
.am-tile { display: flex; flex-direction: column; gap: .1875rem; padding: 1rem 1.125rem; background: var(--am-blue-tint); border-radius: .75rem; }
.am-tile .t { font-size: .875rem; font-weight: 500; }
.am-tile .n { font-size: 1.5rem; font-weight: 500; letter-spacing: -.02em; line-height: 1.15; color: var(--brand-primary); }
.am-tile .s { font-size: .78125rem; color: #06060680; }

/* ---- why this matters (inside the CTA panel) ---- */
.cta-container.am-cta-green { background-color: var(--am-green-tint); }
.am-stat-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.5rem;
  margin-top: 3rem;
  text-align: left;
}
.am-stat {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: .75rem;
  padding: 2.5rem 1.625rem 1.875rem;
  background: #fff;
  border: 1px dashed #06060638;
  border-radius: 1rem;
}
.am-stat.is-green { background: var(--am-green); border: 1px solid var(--am-green); }
.am-stat-chip {
  position: absolute;
  top: -1rem;
  left: 1.25rem;
  padding: .5rem .875rem;
  background: #fff;
  border: 1px solid var(--am-line);
  border-radius: 999em;
  box-shadow: 0 12px 28px #00205b2e;
  transform: rotate(-2deg);
  font-family: DM Mono, sans-serif;
  font-size: .6875rem;
  font-weight: 500;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: #0606068c;
  white-space: nowrap;
}
.am-stat.is-green .am-stat-chip { color: var(--am-green-dark); }
.am-stat-num { font-size: clamp(2.375rem, 4vw, 3.125rem); font-weight: 400; letter-spacing: -.03em; line-height: 1; color: #06060680; }
.am-stat.is-green .am-stat-num { color: #fff; }
.am-stat-desc { font-size: .9375rem; color: #0606068c; }
.am-stat.is-green .am-stat-desc { color: #ffffffd9; }

/* ---- responsive ---- */
@media screen and (max-width: 991px) {
  .am-scene { gap: 0 .75rem; }
  .am-scene-arrow { width: 2.25rem; }
  .am-uc-grid { grid-template-columns: minmax(0, 1fr); gap: 2.5rem; }
}
@media screen and (max-width: 767px) {
  .am-pad { padding-top: 3.5rem; padding-bottom: 3.5rem; }
  .am-hero-top { padding-top: 2rem; }
  .am-list-panel-col span, .am-list-panel-row span { padding-left: .5rem; padding-right: .5rem; }
  .am-steps-grid { grid-template-columns: minmax(0, 1fr); }
  .am-stat-grid { grid-template-columns: minmax(0, 1fr); }
  .am-app-wrap { display: flex; flex-direction: column; align-items: flex-end; gap: .75rem; }
  .am-float-chip { position: static; transform: none; }
  .am-app { align-self: stretch; }
  .am-hero-flow { margin-top: 2.5rem; padding-bottom: 3rem; }
  .am-record-scroll { height: 16rem; }
}
@media screen and (max-width: 479px) {
  .am-record-checks,
  .am-tiles,
  .am-stats-mini { grid-template-columns: minmax(0, 1fr); }
  .am-scene { grid-template-columns: minmax(0, 1fr) auto minmax(0, 2.2fr); gap: 0 .375rem; }
  .am-scene-arrow { width: 1.25rem; height: .75rem; }
  .am-list-panel-col,
  .am-list-panel-row { grid-template-columns: minmax(0, 1fr); }
  .am-list-panel-col span:first-child,
  .am-list-panel-row span:first-child { display: none; }
  .am-list-panel-row { font-size: .75rem; }
  .am-list-panel-head { padding: .625rem .75rem; font-size: .75rem; }
  .am-list-panel-head .am-pill { display: none; }
  .am-scene .am-card-head { flex-wrap: wrap; padding: .875rem 1rem; font-size: .875rem; }
  .am-scene .am-record-checks { padding: .875rem 1rem; }
  .am-scene .am-spec-group { padding: 0 1rem; }
  .am-scene .am-spec-row { font-size: .78rem; }
  .am-bar { width: 4.5rem; }
  .am-btn-row { flex-direction: column; }
  .am-cta-green h2 br { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .am-record-track { animation: none; }
}