/* Asset Manager — Layout E page-scoped styles. Builds on bundle.css tokens (:root vars). */
:root {
  --ame-navy: #000a7e;
  --ame-tint: #e0f2ff;
  --ame-shadow-float: 17px 88px 60px -100px #4f5e782e, 11px 0 20px -9px #4f5e781a;
  --ame-container-max: 90rem;
}

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

.ame-accent { color: var(--brand-primary); }
.num-tab { font-variant-numeric: tabular-nums; }
.caption.ame-caption-sm { font-size: .75rem; line-height: 1rem; }

/* ---- shared: tag pill (system has no badge component) ---- */
.ame-tag {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px .75rem;
  border-radius: 1.5rem;
  font-family: DM Sans, sans-serif; font-size: .875rem; line-height: 1.25rem; font-weight: 400;
  white-space: nowrap;
}
.ame-tag.is-neutral { background-color: var(--background-secondary); color: var(--background-default); }
.ame-tag.is-tint { background-color: var(--ame-tint); color: var(--brand-primary); }
.ame-tag.is-brand { background-color: var(--brand-primary); color: var(--contrast-primary); }

/* ---- shared: kv spec row (label left, value right, hairline above) ---- */
.ame-kv {
  display: flex; justify-content: space-between; align-items: baseline; gap: .75rem;
  padding: .5rem 0; border-top: 1px solid var(--contrast-divider-dark);
  font-size: .875rem; line-height: 1.25rem;
}
.ame-kv > span:first-child { color: var(--background-opacity-80); font-weight: 300; }
.ame-kv > span:last-child { color: var(--background-default); text-align: right; }

/* ---------- Hero ---------- */
.ame-hero { position: relative; overflow: hidden; }
.ame-hero-art { position: absolute; right: 0; bottom: 0; width: 56.25rem; max-width: 100%; height: auto; color: var(--ame-navy); }
.ame-hero-inner { position: relative; display: flex; align-items: flex-end; justify-content: space-between; gap: 3rem; flex-wrap: wrap; }
.ame-hero-body { position: relative; z-index: 2; display: flex; flex-direction: column; gap: 1.5rem; flex: 1; min-width: 0; }
.ame-hero-body h1 { max-width: 56.25rem; }
.ame-hero-p { max-width: 32.5rem; }
.ame-newtag { align-self: flex-start; margin-bottom: -.5rem; border-radius: 999em; }
.ame-btns { display: flex; gap: .75rem; flex-wrap: wrap; }

/* Opportunity carousel */
.ame-scan { position: relative; z-index: 2; flex: none; width: 21.25rem; max-width: 100%; display: flex; flex-direction: column; gap: 1rem; }
.ame-scan-stack { display: grid; }
.ame-scard {
  grid-area: 1 / 1; background-color: var(--contrast-primary); border-radius: 2rem; padding: 1.5rem;
  box-shadow: var(--ame-shadow-float); display: flex; flex-direction: column; gap: .75rem;
  opacity: 0; transform: translateX(90px) rotate(2deg); visibility: hidden;
  transition: transform .7s cubic-bezier(.2, .8, .2, 1), opacity .5s ease, visibility 0s linear .7s;
}
.ame-scard.is-on { opacity: 1; transform: none; visibility: visible; transition: transform .7s cubic-bezier(.2, .8, .2, 1), opacity .5s ease, visibility 0s; }
.ame-scard.is-out { opacity: 0; transform: translateX(-90px) rotate(-2deg); }
.ame-scan-head { display: flex; align-items: center; gap: 10px; }
.ame-scan-head .ame-scan-t { font-size: 1rem; line-height: 1.5rem; color: var(--background-default); }
.ame-scan-head .ame-tag { margin-left: auto; }
.ame-dot {
  width: 2rem; height: 2rem; border-radius: 999em; background-color: var(--brand-primary);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: var(--contrast-primary);
}
.ame-dot.is-report { background-color: var(--background-default); }
.ame-scard h4 { white-space: nowrap; }
.ame-scard h2 { font-variant-numeric: tabular-nums; }
.ame-scan-foot {
  margin-top: auto; border-top: 1px solid var(--contrast-divider-dark); padding-top: .75rem;
  display: flex; justify-content: space-between; align-items: center; gap: .5rem; flex-wrap: wrap;
  font-size: .875rem; line-height: 1.25rem; color: var(--background-opacity-80);
}
.ame-scan-dots { display: flex; gap: 6px; justify-content: center; }
.ame-scan-dots i { width: 6px; height: 6px; border-radius: 999em; background-color: var(--contrast-tertiary-dark); transition: width .3s, background-color .3s; }
.ame-scan-dots i.is-on { width: 18px; background-color: var(--background-default); }
@media (prefers-reduced-motion: reduce) {
  .ame-scard, .ame-scard.is-on, .ame-scard.is-out { transform: none; transition: opacity .3s, visibility 0s; }
}

/* ---------- You provide / we provide spec ticker ---------- */
.ame-specband { display: flex; align-items: stretch; background-color: var(--brand-primary); color: var(--contrast-primary); overflow: hidden; min-height: 4.5rem; }
.ame-sb-in {
  flex-shrink: 0; display: flex; flex-direction: column; justify-content: center; gap: 4px;
  padding: .75rem 2rem .75rem max(3rem, calc((100vw - var(--ame-container-max)) / 2 + 3rem));
  background-color: var(--ame-navy);
}
.ame-sb-in .caption, .ame-sb-out .caption { color: var(--contrast-secondary); }
.ame-sb-v { font-size: 1rem; line-height: 1.5rem; white-space: nowrap; }
.ame-sb-out { flex: 1; min-width: 0; display: flex; align-items: center; gap: 1.25rem; padding-left: 1.75rem; }
.ame-sb-out > .caption { flex-shrink: 0; }
.ame-sb-scroll {
  flex: 1; min-width: 0; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 40px, #000 calc(100% - 40px), transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 40px, #000 calc(100% - 40px), transparent 100%);
}
.ame-sb-track { display: flex; width: max-content; white-space: nowrap; animation: ame-ticker 70s linear infinite; }
.ame-sb-scroll:hover .ame-sb-track { animation-play-state: paused; }
.ame-sp { display: inline-flex; align-items: baseline; gap: 10px; padding-right: 2.5rem; }
.ame-sp i { font-style: normal; font-family: DM Mono, sans-serif; font-size: .75rem; line-height: 1rem; font-weight: 500; letter-spacing: .7px; text-transform: uppercase; color: var(--contrast-secondary); }
.ame-sp b { font-weight: 400; font-size: 1rem; line-height: 1.5rem; }
@keyframes ame-ticker { from { transform: translateX(0); } to { transform: translateX(-33.333%); } }
@media (prefers-reduced-motion: reduce) {
  .ame-sb-track { animation: none; }
  .ame-sb-scroll { overflow-x: auto; -webkit-mask-image: none; mask-image: none; }
}

/* ---------- What it is: story cards ---------- */
.ame-story-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin-top: 3rem; }
.ame-story-card { border-radius: 1rem; background-color: var(--background-secondary); padding: 2rem 1.5rem; display: flex; flex-direction: column; gap: .75rem; }
.ame-story-card.is-hi { background-color: var(--brand-primary); }

/* ---------- How it works ---------- */
.ame-how-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 3rem; flex-wrap: wrap; }
.ame-how-head h2 { max-width: 47.5rem; }
.ame-steps-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-top: 3rem; }
.ame-step-card { background-color: var(--contrast-primary); border-radius: 2rem; overflow: hidden; display: flex; flex-direction: column; }
.ame-step-card.is-hi { background-color: var(--brand-primary); }
.ame-step-body { flex: 1; padding: 2rem 2rem 2rem; display: flex; flex-direction: column; gap: .75rem; }
.ame-vis { height: 16.25rem; background-color: var(--additional-lightblue); padding: 1.75rem; display: flex; align-items: center; justify-content: center; }
.ame-step-card.is-hi .ame-vis { background-color: var(--ame-navy); }
.ame-mini { width: 100%; background-color: var(--contrast-primary); border-radius: .75rem; overflow: hidden; }
.ame-mini-sheet > div { padding: 9px 14px; border-top: 1px solid var(--contrast-divider-dark); font-size: .875rem; line-height: 1.25rem; color: var(--background-default); font-variant-numeric: tabular-nums; }
.ame-mini-sheet > div.ame-sh { display: flex; justify-content: space-between; gap: .5rem; background-color: var(--background-secondary); border-top: 0; }
.ame-mini-sheet > div.ame-hl { background-color: var(--ame-tint); color: var(--brand-primary); }
.ame-mini-spec { padding: 1rem 18px; }
.ame-mini-spec h6 { margin-bottom: 6px; }
.ame-count { display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; color: var(--contrast-primary); }
.ame-count .ame-n { font-size: 3.5rem; line-height: 4.25rem; letter-spacing: -.225rem; font-variant-numeric: tabular-nums; }

/* ---------- Why: chat demo ---------- */
.ame-why { display: grid; grid-template-columns: 7fr 5fr; gap: 4rem; align-items: center; }
.ame-why-t { display: flex; flex-direction: column; gap: 1.5rem; }
.ame-why-t .paragraph-secondary { max-width: 37.5rem; }
.ame-chat { display: flex; flex-direction: column; gap: .75rem; border-radius: 2rem; padding: 2rem; background-color: var(--contrast-primary); }
.ame-chat-head { text-align: center; }
.ame-bubble { max-width: 82%; padding: 14px 18px; font-size: 1rem; line-height: 1.5rem; font-weight: 300; }
.ame-bubble.is-out { align-self: flex-end; max-width: 85%; background-color: var(--brand-primary); color: var(--contrast-primary); border-radius: 20px 20px 4px 20px; }
.ame-bubble.is-in { align-self: flex-start; max-width: 75%; background-color: var(--background-secondary); border-radius: 20px 20px 20px 4px; color: var(--background-default); }
.ame-chat .ame-booked { align-self: center; margin-top: .5rem; }
.ame-chat .ame-booked .ame-tag { padding: .5rem 1rem; white-space: normal; text-align: center; }

/* ---------- Closing CTA ---------- */
.ame-closing { display: flex; flex-direction: column; align-items: center; gap: 2rem; text-align: center; }
.ame-closing h2 { max-width: 62.5rem; }

/* ---------- Responsive ---------- */
@media screen and (max-width: 1199px) {
  .ame-hero-inner { flex-direction: column; align-items: stretch; }
  .ame-scan { width: auto; max-width: 21.25rem; margin: 0 auto; }
}
@media screen and (max-width: 991px) {
  .ame-sb-in { padding-left: 1.25rem; }
  .ame-how-head { flex-direction: column; align-items: flex-start; gap: 1.5rem; }
  .ame-story-grid { grid-template-columns: repeat(2, 1fr); }
  .ame-steps-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ame-steps-grid .ame-step-card.is-hi { grid-column: 1 / -1; }
  .ame-why { grid-template-columns: 1fr; gap: 2rem; }
}
@media screen and (max-width: 767px) {
  .ame-story-grid { grid-template-columns: 1fr; }
  .ame-steps-grid { grid-template-columns: 1fr; }
  .ame-steps-grid .ame-step-card.is-hi { grid-column: auto; }
  .ame-specband { flex-direction: column; }
  .ame-sb-in { flex-direction: row; align-items: baseline; justify-content: space-between; gap: .75rem; padding: .75rem 1.25rem; }
  .ame-sb-out { padding: .75rem 0 14px 1.25rem; flex-direction: column; align-items: stretch; gap: .5rem; }
  .ame-sb-scroll { -webkit-mask-image: none; mask-image: none; }
  .ame-story-card { padding: 1.25rem; }
  .ame-vis { height: auto; min-height: 12.5rem; padding: 1.25rem; }
  .ame-step-body { padding: 22px 1.25rem 26px; }
}
@media screen and (max-width: 479px) {
  .ame-btns { flex-direction: column; width: 100%; }
  .ame-btns .button-wrapper { width: 100%; }
  .ame-scard h4 { white-space: normal; }
}