/* Page-level styles for the savings collection page.
   Translated from the Claude Design source ("Savings Collection Page.dc.html"):
   its <helmet> <style> block verbatim, plus the hover/focus rules the design
   expressed as style-hover / style-focus attributes, plus the small-screen
   adjustments that make the same page work in an app webview. */

body {
  margin: 0;
  background: var(--colorBackground);
  color: var(--colorBody);
  font-family: var(--font-body);
}
* {
  box-sizing: border-box;
}
a {
  color: var(--colorLink);
}
a:hover {
  color: var(--greenDark);
}

details summary {
  list-style: none;
  cursor: pointer;
}
details summary::-webkit-details-marker {
  display: none;
}
details[open] .om-plus {
  transform: rotate(45deg);
}

/* ---------- header nav ----------
   Section links in the header. The sticky header is ~66px, so anchor targets
   carry a matching scroll-margin or their heading lands underneath it. */
html {
  scroll-behavior: smooth;
}
#how-it-works,
#about-insurely,
#questions {
  scroll-margin-top: 80px;
}
/* ---------- brand wordmark (header + footer) ---------- */
.logo-wordmark {
  display: block;
  width: auto;
  color: var(--midnight);
}
footer .logo-wordmark {
  color: var(--neutral-9);
}

.nav-link {
  color: var(--neutral-9);
  text-decoration: none;
  white-space: nowrap;
  transition: color 160ms cubic-bezier(0.2, 0.7, 0.2, 1);
}
.nav-link:hover {
  color: var(--midnight);
  text-decoration: none;
}

/* ---------- hover / focus states (design: style-hover, style-focus) ---------- */
.btn-primary:hover {
  background: var(--midnightShade);
}
.btn-ghost:hover {
  background: var(--neutral-3);
}
.btn-outline:hover {
  background: var(--white);
}
.provider-row:hover {
  background: var(--neutral-3);
}
.search-input:focus {
  border-color: var(--midnight);
  outline: none;
}

/* ---------- screen switching (design: <sc-if>) ---------- */
[data-screen] {
  display: none;
}
[data-screen].is-active {
  display: flex;
}

/* ---------- hero storyboard (scenes driven by hero.js) ---------- */
.scene {
  opacity: 0;
  transform: translateY(10px);
  transition:
    opacity 420ms cubic-bezier(0.2, 0.7, 0.2, 1),
    transform 420ms cubic-bezier(0.2, 0.7, 0.2, 1);
  pointer-events: none;
}
.scene.is-on {
  opacity: 1;
  transform: none;
}

/* Older messages scroll off the top of the thread; fade them out so the clip
   edge doesn't read as a cut-off element. */
.om-thread {
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 28px);
  mask-image: linear-gradient(to bottom, transparent 0, #000 28px);
}

/* The card holds a fixed height, so a long collection scrolls inside it; fade the
   bottom edge so a clipped row reads as "more below" rather than as a broken row. */
.om-accounts {
  -webkit-mask-image: linear-gradient(to top, transparent 0, #000 20px);
  mask-image: linear-gradient(to top, transparent 0, #000 20px);
}

/* every message fades up as it is appended */
.om-enter {
  animation: omEnter 260ms cubic-bezier(0.2, 0.7, 0.2, 1) both;
}
@keyframes omEnter {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* the composer caret, and the model's "typing" dots */
.om-caret {
  animation: omCaret 1s steps(1) infinite;
}
@keyframes omCaret {
  0%,
  49% {
    opacity: 0;
  }
  50%,
  100% {
    opacity: 1;
  }
}
@keyframes omDot {
  0%,
  100% {
    opacity: 0.35;
    transform: translateY(0);
  }
  40% {
    opacity: 1;
    transform: translateY(-3px);
  }
}

/* ---------- small screens / app webview ----------
   The layout is fluid (clamp + flex-wrap), so it already reflows. These rules
   only tighten the parts that a phone-width viewport would otherwise stretch. */
/* Below ~700px the header can't hold the nav and the market label at once —
   the nav links matter more, so the label goes. */
@media (max-width: 700px) {
  .header-meta {
    display: none;
  }
  [data-role='nav'] {
    gap: 16px;
    margin-left: auto;
  }
  .nav-link {
    font-size: 13px;
    line-height: 17px;
  }
}

@media (max-width: 640px) {
  .hero-mock {
    height: 380px;
  }
  .hero-cta {
    width: 100%;
  }
  .Headline-4 {
    font-size: 27px;
    line-height: 34px;
  }
}