/* Finapp's canonical dark tokens, shared with its product showcase. */
.finapp, .featured-product {
  --fin-canvas: #101522;
  --fin-panel: #171d2b;
  --fin-card: #20263a;
  --fin-control: #26304a;
  --fin-text: #e9eef8;
  --fin-muted: #95a3b8;
  --fin-border: #303850;
  --fin-blue: #4f8dff;
  --fin-mint: #20d99f;
  color: var(--fin-text);
  background: var(--fin-canvas);
}
.site-header .nav-finapp {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.finapp-nav-icon { width: 15px; height: 15px; flex: 0 0 auto; color: #2563eb; }
.finapp .finapp-nav-icon { color: #8bc1ff; }
.product-status-dot { display: inline-block; width: 6px; height: 6px; flex: 0 0 auto; background: #4f8dff; border-radius: 50%; }
.finapp .site-header { border-color: var(--fin-border); }
.finapp .brand img { filter: none; }
.finapp .nav-cta, .finapp .menu-toggle { border-color: #95a3b860; }
.finapp .nav-cta:hover { background: var(--fin-text); color: var(--fin-canvas); }
.finapp .language-switch a[aria-current] { background: var(--fin-control); color: var(--fin-text); }
.finapp .language-switch { border-color: var(--fin-border); }
.finapp .mobile-menu { background: var(--fin-panel); border-color: var(--fin-border); }
.finapp :focus-visible { outline-color: #8bc1ff; }
.finapp .skip-link { color: #101522; }
.finapp-hero, .featured-product { position: relative; isolation: isolate; }
.finapp-hero { background: var(--fin-canvas); padding-top: 40px; }
.finapp-overline { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.finapp-overline .eyebrow { display: flex; align-items: center; gap: 12px; color: #b8c7de; }
.product-status-dot { background: var(--fin-mint); box-shadow: 0 0 12px #20d99f40; }
.finapp .product-brand, .featured-product .product-brand { color: var(--fin-blue); }
.finapp-hero-copy { margin-top: 52px; }
.finapp-hero .product-brand { font-size: clamp(95px, 11vw, 160px); letter-spacing: -.075em; }
.finapp-hero h1 { margin-top: 27px; font-size: clamp(36px, 4.2vw, 66px); }
.finapp-hero h1 em { color: #b1cdf7; }
.finapp-hero .page-lead { color: #b1bdd0; }
.finapp .button-dark, .featured-product .button-dark { color: #101522; background: #8bc1ff; box-shadow: 0 8px 35px #4f8dff15; }
.finapp .button-dark:hover, .featured-product .button-dark:hover { background: #b4d7ff; }
.product-rhythm { display: flex; gap: 30px; flex-wrap: wrap; margin: 55px 0 0; padding-top: 22px; border-top: 1px solid #303850; color: #a9b6cb; font-size: 12px; }
.product-rhythm span { display: flex; gap: 10px; align-items: center; }
.product-rhythm b { color: #4f8dff; font-size: 10px; font-weight: 500; }
.finapp .product-showcase { margin-top: 40px; }
.finapp .browser-frame { background: var(--fin-panel); border-color: #465679; box-shadow: 0 35px 100px #0006, 0 0 65px #4f8dff0d; }
.finapp .browser-chrome { background: var(--fin-panel); border-color: var(--fin-border); }
.finapp .browser-chrome i { background: #465679; }
.finapp .browser-chrome span { color: var(--fin-muted); }
.finapp .phone-frame { border-color: #35415a; box-shadow: 0 28px 65px #0007; }
.finapp .product-showcase figcaption { color: var(--fin-muted); }
.finapp .product-problem { border-top: 1px solid var(--fin-border); }
.finapp .product-problem > p:last-child, .finapp .product-design p { color: #b1bdd0; }
.finapp .eyebrow { color: #b8c7de; }
.finapp .product-features { background: #121827; }
.finapp .feature-panel { background: var(--fin-panel); border-color: var(--fin-border); box-shadow: none; transition: border-color .25s, transform .25s; }
.finapp .feature-panel:hover { border-color: #4f8dff70; transform: translateY(-4px); }
.finapp .feature-panel p { color: #aab7cb; }
.finapp .feature-index { color: #8bc1ff; background: #172b4d; }
.finapp .design-specimen { border-color: var(--fin-border); background: var(--fin-panel); }
.finapp .specimen-type { color: var(--fin-text); }
.finapp .palette-swatches span:nth-child(1) { background: var(--fin-blue); }
.finapp .palette-swatches span:nth-child(2) { background: var(--fin-control); }
.finapp .palette-swatches span:nth-child(3) { background: var(--fin-mint); }
.finapp .palette-swatches span:nth-child(4) { background: var(--fin-text); }
.finapp .text-link:hover { color: #8bc1ff; }
.featured-product { padding-top: 110px; padding-bottom: 110px; }
.featured-product .eyebrow { color: #9fbbdf; }
.featured-product .product-brand { font-size: clamp(80px, 7vw, 115px); }
.featured-description { max-width: 36em; font-size: 16px; line-height: 1.7; color: #aab7cb; margin: -8px 0 28px; }
.featured-image { border-color: #465679; box-shadow: 0 25px 65px #0005; }

/* Keep navigation native; avoid competing page and section animations. */
.featured-image, .featured-image:hover { transform: none; }
.finapp .feature-panel:hover { transform: none; }
.product-showcase { display: grid; grid-template-columns: minmax(0, 1fr) clamp(185px, 17vw, 280px); align-items: center; gap: 24px; padding-bottom: 0; }
.product-showcase .browser-frame { width: 100%; }
.product-showcase .phone-frame { position: static; width: 100%; border-width: 5px; border-radius: 25px; }
.product-showcase figcaption { grid-column: 1 / -1; margin-top: 0; }
.product-showcase > a { display: block; cursor: zoom-in; }
.screenshot-hint { display: block; margin-top: 4px; }
@media (max-width: 900px) {
  .finapp-hero-copy { margin-top: 30px; }
  .finapp-hero .page-lead { max-width: 620px; }
  .featured-product { padding-block: 75px; }
  .featured-description { max-width: 520px; }
  .featured-image { margin-top: 16px; }
}
@media (max-width: 600px) {
  .finapp-hero { padding-top: 24px; }
  .finapp-overline { align-items: start; }
  .finapp-overline .eyebrow { font-size: 10px; gap: 8px; max-width: none; }
  .finapp-hero .product-brand { font-size: 92px; }
  .finapp-hero h1 { font-size: clamp(34px, 9.5vw, 54px); }
  .finapp-hero .page-lead { font-size: 16px; }
  .product-rhythm { gap: 14px; margin-top: 36px; font-size: 10px; }
  .product-rhythm span { gap: 6px; }
  .finapp .product-showcase { margin-top: 30px; }
  .finapp .product-showcase figcaption { max-width: 70%; font-size: 10px; }
  .finapp .browser-chrome { height: 22px; }
  .site-header .mobile-menu .nav-finapp { align-self: flex-start; }
}
@media (prefers-reduced-motion: reduce) {
  .featured-image, .featured-image:hover, .finapp .feature-panel:hover { transform: none; }
}

@media (max-width: 700px) {
  .product-showcase { display: flex; flex-direction: column; gap: 24px; }
  .product-showcase .phone-frame { width: min(72%, 270px); }
  .finapp .product-showcase figcaption { max-width: 100%; text-align: center; }
}