.hero-financial {
  position: relative;
  isolation: isolate;
  overflow: clip;
  padding: 20px 32px 0;
  color: #211a17;
  background: linear-gradient(180deg, #fbf7f2 0%, #faf2e9 42%, #efe7d2 100%);
  font-family: var(--body, system-ui, sans-serif);
}
.hero-financial *, .hero-financial *::before, .hero-financial *::after { box-sizing: border-box; }
.hero-financial a { text-decoration: none; }
.hero-financial :is(a, summary):focus-visible { outline: 3px solid #b33a29; outline-offset: 5px; }
.hf-light-beams { position: absolute; z-index: -1; inset: 0; overflow: hidden; pointer-events: none; }
.hf-light-beams span { position: absolute; left: 1%; top: -150px; width: 100px; height: 620px; transform: rotate(-31deg); border-radius: 80px; background: linear-gradient(#eea28d, #f6dbc6); filter: blur(36px); opacity: .64; }
.hf-light-beams span + span { left: 8%; top: -230px; width: 68px; background: linear-gradient(#ed927c, #f8dfca); }
.hf-header { position: relative; z-index: 3; display: flex; align-items: center; justify-content: space-between; gap: 24px; max-width: 1280px; min-height: 72px; margin: 0 auto; padding: 10px 12px 10px 22px; border: 1px solid #fff; border-radius: 16px; background: #ffffffe0; backdrop-filter: blur(20px); box-shadow: 0 5px 18px #53302708, 0 1px 3px #5330270c; }
.hf-brand { display: flex; flex-shrink: 0; align-items: center; }
.hf-brand img { width: 175px; height: 44px; object-fit: contain; }
.hf-navigation, .hf-account { display: flex; align-items: center; gap: 28px; }
.hf-navigation a, .hf-login { display: inline-flex; align-items: center; min-height: 44px; font-size: 14px; font-weight: 600; color: #685e57; }
.hf-navigation a:hover, .hf-login:hover { color: #b33a29; }
.hf-account { gap: 20px; }
.hf-nav-cta { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 12px 16px; min-height: 48px; border-radius: 12px; color: #fff; background: #201d1a; box-shadow: inset 2px 2px 5px #0008, inset -2px -2px 6px #60595366; font-size: 14px; font-weight: 700; white-space: nowrap; }
.hf-nav-cta:hover { background: #080706; }
.hf-copy { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 26px; max-width: 1200px; margin: 0 auto; padding: 94px 0 0; text-align: center; }
.hf-announcement { display: inline-flex; align-items: center; gap: 10px; padding: 5px 12px 5px 5px; margin: 0; border: 2px solid white; border-radius: 999px; background: #fff; color: #40352e; box-shadow: 0 8px 26px #d3653924; font-size: 14px; font-weight: 550; }
.hf-announcement span { padding: 6px 10px; border-radius: 999px; background: linear-gradient(130deg, #b33a29, #df7055); color: #fff; font-size: 11px; line-height: 1.2; font-weight: 650; text-transform: uppercase; letter-spacing: .075em; }
.hf-copy h1 { max-width: 1200px; margin: 0; font-size: clamp(48px, 5.6vw, 80px); font-weight: 550; line-height: 1.07; letter-spacing: -.065em; text-wrap: balance; }
.hf-copy h1 span { white-space: nowrap; }
.hf-description { max-width: 780px; margin: 0; color: #6a5e55; font-size: clamp(19px, 1.8vw, 24px); line-height: 1.55; font-weight: 450; text-wrap: balance; }
.hf-actions { display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 4px; }
.hf-button { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 54px; padding: 12px 20px; border: 1px solid; border-radius: 10px; box-shadow: 0 3px 6px #211a1710, inset 0 1px 0 #ffffff60; font-size: 18px; font-weight: 600; transition: transform .2s, box-shadow .2s; }
.hf-primary { border-color: #c15c45; background: linear-gradient(135deg, #a93223, #c84b35 60%, #df7559); color: white; }
.hf-secondary { border-color: #d5ccc3; background: linear-gradient(135deg, #fff, #f4eee7 55%, #dfd6cb); color: #302720; }
.hf-button:hover { transform: translateY(-2px); box-shadow: 0 5px 12px #211a1724, inset 0 1px 0 #ffffff80; }
.hf-trial { margin: -10px 0 0; color: #77675d; font-size: 13px; line-height: 1.5; }
.hf-product { position: relative; max-width: 1280px; margin: 66px auto 0; padding: 14px; border: 1px solid #ffffffdb; border-radius: 26px; background: #ffffff73; backdrop-filter: blur(16px); box-shadow: 0 24px 64px #69503916, inset 0 1px 0 white; }
.hf-product a, .hf-product picture { display: block; border-radius: 16px; overflow: hidden; }
.hf-product img { display: block; width: 100%; height: auto; aspect-ratio: 1440 / 1000; object-fit: cover; }
.hf-product figcaption { padding: 13px 8px 1px; color: #76665b; font-size: 12px; line-height: 1.5; text-align: center; }
.hf-facts { display: flex; justify-content: center; flex-wrap: wrap; gap: 20px 54px; max-width: 1280px; margin: 0 auto; padding: 34px 0; border-bottom: 1px solid #49302124; color: #685b4c; font-size: 14px; }
.hf-facts strong { color: #211a17; margin-right: 5px; font-size: 16px; }
.hero-financial .hf-menu { display: none; }
@media (min-width: 901px) and (prefers-reduced-motion: no-preference) {
  .hf-header, .hf-announcement, .hf-copy h1, .hf-description, .hf-actions, .hf-product { animation: hf-enter .75s cubic-bezier(.16,1,.3,1) backwards; }
  .hf-announcement { animation-delay: .04s; }
  .hf-copy h1 { animation-delay: .09s; }
  .hf-description { animation-delay: .14s; }
  .hf-actions { animation-delay: .19s; }
  .hf-product { animation-delay: .24s; }
  @keyframes hf-enter { from { transform: translateY(18px); } to { transform: translateY(0); } }
}
@media (max-width: 1100px) { .hf-navigation { gap: 18px; } .hf-account { gap: 12px; } .hf-header { gap: 18px; } }
@media (max-width: 900px) {
  .hero-financial { padding: 14px 22px 0; }
  .hf-header { min-height: 66px; padding: 8px 10px; gap: 12px; }
  .hf-navigation, .hf-login { display: none; }
  .hf-brand { margin-right: auto; }
  .hf-brand img { width: 155px; height: auto; }
  .hf-copy { padding-top: 64px; gap: 23px; }
  .hf-copy h1 { font-size: clamp(43px, 7vw, 64px); }
  .hero-financial .hf-menu { display: block; }
  .hero-financial .hf-menu summary { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 1px solid #d5ccc3; border-radius: 50%; color: #302720; background: #fff; cursor: pointer; list-style: none; }
  .hf-menu summary::-webkit-details-marker { display: none; }
  .hf-drawer { position: absolute; top: calc(100% + 12px); left: 0; display: flex; flex-direction: column; width: min(300px, calc(100vw - 44px)); padding: 16px; background: #fffdf9; border: 1px solid white; border-radius: 16px; box-shadow: 0 20px 50px #49302130; }
  .hf-drawer-title { margin-bottom: 12px; padding: 12px; font-size: 18px; font-weight: 700; }
  .hf-drawer a { display: flex; align-items: center; min-height: 48px; padding: 12px; border-radius: 8px; font-size: 16px; }
  .hf-drawer a:not(.hf-nav-cta):hover { background: #f5ece2; }
  .hf-drawer .hf-nav-cta { margin-top: 10px; }
  .hf-product { margin-top: 46px; padding: 10px; border-radius: 22px; }
}
@media (max-width: 700px) {
  .hero-financial { padding-inline: 14px; }
  .hf-header { background: #ffffffbf; border-radius: 14px; gap: 7px; }
  .hf-brand img { width: 129px; }
  .hf-nav-cta { min-height: 44px; padding: 10px 12px; font-size: 12px; gap: 2px; }
  .hf-nav-cta svg { width: 15px; }
  .hf-copy { gap: 22px; padding: 48px 6px 0; }
  .hf-announcement { gap: 8px; font-size: 12px; }
  .hf-announcement span { font-size: 10px; padding-inline: 8px; }
  .hf-copy h1 { font-size: clamp(38px, 10.4vw, 59px); line-height: 1.09; letter-spacing: -.057em; }
  .hf-copy h1 br { display: none; }
  .hf-description { max-width: 530px; font-size: 18px; line-height: 1.55; text-wrap: pretty; }
  .hf-actions { width: 100%; max-width: 360px; gap: 10px; flex-direction: column; }
  .hf-button { width: 100%; min-height: 50px; padding: 12px 14px; font-size: 15px; }
  .hf-trial { max-width: 310px; margin-top: -6px; font-size: 12px; }
  .hf-product { max-width: 440px; padding: 8px; margin-top: 36px; border-radius: 20px; }
  .hf-product a, .hf-product picture { border-radius: 12px; }
  .hf-product img { aspect-ratio: 390 / 844; }
  .hf-product figcaption { padding: 11px 8px 4px; font-size: 11px; }
  .hf-facts { flex-wrap: nowrap; justify-content: space-between; gap: 15px; padding: 26px 6px; font-size: 11px; line-height: 1.5; }
  .hf-facts strong { display: block; margin: 0 0 3px; font-size: 16px; }
}
@media (max-width: 360px) { .hf-brand img { width: 105px; } .hf-header { gap: 6px; padding-inline: 6px; } .hf-button { font-size: 14px; padding-inline: 12px; } }
@media (prefers-reduced-motion: reduce) { .hf-button { transition: none; } .hf-button:hover { transform: none; } }

/* A short introduction. The landing keeps loading underneath and never depends on playback. */
#site-intro[hidden] { display: none; }
#site-intro { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; overflow: hidden; background: #faf6f0; isolation: isolate; }
#site-intro video { display: block; width: min(84vw, 740px); max-height: 78dvh; object-fit: contain; transform-origin: center; }
.intro-skip { position: absolute; right: max(24px, env(safe-area-inset-right)); bottom: max(24px, env(safe-area-inset-bottom)); display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 12px 18px; border: 1px solid #b33a2940; border-radius: 999px; background: #fbf7f2cc; color: #7b3427; font: 500 14px var(--body, system-ui, sans-serif); cursor: pointer; }
.intro-skip:focus-visible { outline: 3px solid #b33a29; outline-offset: 4px; }
html[data-intro] { overflow: hidden; }
html[data-intro="loading"] body > :not(#site-intro):not(script), html[data-intro="playing"] body > :not(#site-intro):not(script) { visibility: hidden; }
html[data-intro="loading"] .hero-financial *, html[data-intro="playing"] .hero-financial * { animation-play-state: paused; }
#site-intro[data-stage="reveal"] { animation: intro-reveal .75s ease-in forwards; pointer-events: none; }
#site-intro[data-stage="reveal"] video { animation: intro-zoom .75s cubic-bezier(.55,.02,.85,.45) forwards; }
#site-intro[data-stage="reveal"] .intro-skip { visibility: hidden; }
@keyframes intro-zoom { from { transform: scale(1); } to { transform: scale(22); } }
@keyframes intro-reveal { 0%, 60% { opacity: 1; } 100% { opacity: 0; } }
@media (max-width: 700px) { #site-intro video { width: 100vw; } .intro-skip { right: 20px; bottom: max(20px, env(safe-area-inset-bottom)); } }
@media (prefers-reduced-motion: reduce) { #site-intro { display: none; } html[data-intro] { overflow: auto; } html[data-intro] body > :not(#site-intro):not(script) { visibility: visible; } }