.toast:not(.show) { visibility: hidden; pointer-events: none; }

@font-face {
  font-family: "Satoshi";
  src: url("./satoshi-medium.woff2") format("woff2");
  font-style: normal;
  font-weight: 500;
  font-display: swap;
}

html, body { font-family: "Satoshi", sans-serif; font-weight: 500; }
button, a { -webkit-tap-highlight-color: transparent; }
button { font-family: inherit; }
.hero-shell { min-height: 100svh; }
.brand { gap: 9px; font-size: 21px; font-weight: 500; letter-spacing: -.055em; color: #30312e; }
.brand-symbol { display: grid; place-items: center; width: 31px; height: 33px; border-radius: 8px; background: linear-gradient(145deg, #42433f, #30312e); color: #faf7ed; box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 1px 2px rgba(46,47,43,.12); }
.brand-symbol svg { display: block; width: 30px; height: 30px; }
.brand-wordmark { transform: translateY(-.5px); }
.account-actions, .sign-in, .primary-cta, .cta-row { font-weight: 500; letter-spacing: -.025em; }
.sign-in, .primary-cta { background: linear-gradient(180deg, #3b3c38, #2e2f2c); color: #fbf9f1; border: 1px solid rgba(42,43,39,.22); box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 2px 3px rgba(48,49,44,.10), 0 5px 10px rgba(48,49,44,.08); transition: transform .25s ease, box-shadow .25s ease, background .25s ease; }
.sign-in, .primary-cta { display: inline-flex; align-items: center; justify-content: center; gap: 12px; flex-shrink: 0; white-space: nowrap; font-size: 13px; line-height: 1; }
.sign-in { height: 44px; padding: 0 19px; }
.primary-cta { height: 52px; padding: 0 22px; }
.sign-in .cta-label, .primary-cta .cta-label { display: block; margin: 0; font-size: inherit; line-height: 1; }
.cta-icon { display: block; width: 16px; height: 16px; flex: 0 0 16px; }
.sign-in:hover, .primary-cta:hover { transform: translateY(-1px); background: linear-gradient(180deg, #44453f, #34352f); box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 2px 4px rgba(48,49,44,.10), 0 6px 12px rgba(48,49,44,.10); }
.sign-in:active, .primary-cta:active { transform: translateY(0); box-shadow: inset 0 1px 2px rgba(0,0,0,.12), 0 1px 3px rgba(48,49,44,.08); }
.brand:focus-visible, .sign-in:focus-visible, .primary-cta:focus-visible { outline: 2px solid #77796d; outline-offset: 4px; }
.hero-content { padding-top: 58px; }
.eyebrow { font-weight: 500; letter-spacing: .13em; }
.hero-content h1 { font-size: clamp(44px, 5vw, 74px); font-weight: 500; letter-spacing: -.065em; line-height: .99; }
.hero-content h1 span { font-weight: 500; }
.intro { font-size: 15px; font-weight: 500; letter-spacing: -.025em; line-height: 1.5; margin: 20px 0 21px; }
.trusted { position: relative; top: auto; left: auto; transform: none; width: fit-content; max-width: calc(100% - 40px); margin: 27px auto 0; font-size: 11px; letter-spacing: -.02em; gap: 26px; color: #92918a; opacity: 1; }
.tool-logos { display: flex; align-items: center; justify-content: center; gap: 26px; }
.tool-logo { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; line-height: 18px; color: #8e8f87; font-weight: 500; }
.tool-logo img { display: block; flex-shrink: 0; filter: grayscale(1); opacity: .43; }
.trusted strong { font-weight: 500; font-size: 12px; }
.art-stage { position: relative; height: 480px; margin-top: 16px; }
.hand-card { z-index: 8; width: 360px; bottom: -66px; mix-blend-mode: normal; pointer-events: none; animation: card-drift 7s ease-in-out infinite; }
.dashboard-backdrop { bottom: -18px; }
.terrain { position: absolute; z-index: 6; bottom: -3px; width: 43%; max-width: 660px; height: auto; pointer-events: none; object-fit: contain; mask-image: linear-gradient(to bottom, #000 0%, #000 82%, transparent 100%); -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 82%, transparent 100%); }
.terrain-right { right: -2%; }
.terrain-left { left: -2%; bottom: -18px; width: 39%; transform: scaleX(-1); }
.art-stage::after { content: ""; position: absolute; z-index: 9; inset: auto 0 0; height: 62px; pointer-events: none; background: linear-gradient(to bottom, rgba(245,243,234,0), rgba(245,243,234,.55) 65%, #f5f3ea); }
.balance-panel strong, .spend-panel b { font-weight: 500; }
.fine-print { font-weight: 500; }
@keyframes card-drift { 50% { transform: translateX(-50%) translateY(-7px) rotate(.5deg); } }
@media (min-width: 1500px) { .art-stage { height: 520px; } .hand-card { width: 390px; bottom: -65px; } }
@media (max-width: 800px) {
  .hero-content { padding: 58px 22px 0; }
  .hero-content h1 { font-size: clamp(40px, 6.5vw, 54px); letter-spacing: -.06em; }
  .intro { font-size: 14px; }
  .trusted { justify-content: center; flex-wrap: wrap; white-space: normal; gap: 9px 12px; overflow: visible; margin-top: 25px; }
  .trusted > span { flex-basis: 100%; text-align: center; }
  .tool-logos { gap: 22px; }
  .trusted > i:first-of-type { display: none; }
  .art-stage { height: 430px; margin-top: 20px; }
  .hand-card { width: 320px; bottom: -52px; }
  .terrain { width: 55%; max-width: none; }
  .terrain-left { left: -17%; width: 55%; }
  .terrain-right { right: -17%; }
  .hero-shell { min-height: 100svh; }
}
@media (max-width: 430px) {
  .hero-content { padding-top: 48px; }
  .hero-content h1 { font-size: 40px; }
  .intro { font-size: 13px; }
  .trusted { display: flex; font-size: 10px; }
  .trusted strong { font-size: 11px; }
  .tool-logos { gap: 17px; }
  .tool-logo { font-size: 12px; gap: 5px; }
  .tool-logo img { width: 16px; height: 16px; }
  .art-stage { height: 400px; }
  .hand-card { width: 295px; bottom: -44px; }
  .terrain { width: 70%; }
  .terrain-left { left: -30%; width: 70%; }
  .terrain-right { right: -30%; }
}
@media (prefers-reduced-motion: reduce) {
  .hand-card { animation: none; }
  .primary-cta, .toast { transition: none; }
}

/* One-screen composition: artwork occupies the space left by the content. */
html, body { height: 100%; }
.hero-shell { display: flex; flex-direction: column; height: 100vh; height: 100dvh; min-height: 0; }
.topbar { flex: 0 0 clamp(56px, 8dvh, 78px); height: auto; }
.hero-content { flex: 0 0 auto; padding-top: clamp(14px, 3.5dvh, 40px); }
.hero-content h1 { max-width: 900px; margin-inline: auto; font-size: clamp(40px, min(4.9vw, 7.2dvh), 72px); letter-spacing: -.055em; line-height: 1.06; }
.eyebrow { margin-bottom: clamp(14px, 2dvh, 20px); }
.intro { max-width: 440px; margin: clamp(18px, 2.5dvh, 25px) auto clamp(20px, 2.9dvh, 28px); font-size: clamp(13px, 1.6dvh, 14px); line-height: 1.6; letter-spacing: -.015em; }
.primary-cta { height: clamp(44px, 5.4dvh, 48px); }
.cta-row { gap: 28px; }
.trusted { flex: 0 0 auto; margin-top: clamp(22px, 3.2dvh, 32px); }
.art-stage { flex: 1 1 0; min-height: 0; height: auto; margin-top: clamp(16px, 2.2dvh, 24px); }
.contours { opacity: .42; }
.hand-card { width: auto; height: calc(100% + 66px); max-width: 70vw; bottom: -66px; object-fit: contain; }
.terrain { width: auto; height: min(38dvh, 100%); max-width: 46%; object-fit: fill; }
.terrain-left { width: auto; height: min(34dvh, 90%); max-width: 42%; }
.dashboard-backdrop { height: min(215px, 25dvh); }
.art-stage::after { height: clamp(30px, 6.5dvh, 62px); }
.fine-print { bottom: 15px; }
@media (max-width: 800px) {
  .hero-content { padding: clamp(14px, 3dvh, 28px) 20px 0; }
  .hero-content h1 { font-size: clamp(30px, min(9.9vw, 6dvh), 50px); line-height: 1.08; }
  .eyebrow { font-size: 9px; margin-bottom: 10px; }
  .intro { font-size: 13px; margin: 18px auto 22px; }
  .cta-row { gap: 20px; }
  .trusted { gap: 12px; margin-top: clamp(20px, 3dvh, 26px); }
  .hand-card { height: calc(100% + 44px); bottom: -44px; max-width: 78vw; }
  .terrain { max-width: 65%; height: min(28dvh, 85%); }
  .terrain-left { left: -17%; height: min(25dvh, 78%); }
  .terrain-right { right: -17%; }
  .fine-print { font-size: 7px; bottom: 10px; }
}
@media (max-height: 600px) and (min-width: 801px) {
  .hero-content { padding-top: 12px; }
  .hero-content h1 { font-size: clamp(28px, 7.2dvh, 43px); }
  .eyebrow { margin-bottom: 8px; font-size: 8px; }
  .intro { margin: 9px 0 12px; font-size: 12px; }
  .primary-cta { height: 40px; }
  .trusted { margin-top: 12px; }
  .hand-card { height: calc(100% + 34px); bottom: -34px; }
  .fine-print { bottom: 8px; font-size: 7px; }
}

/* Reference composition: foreground card, wide logo rail, lower dashboard. */
.art-stage { margin-top: clamp(8px, 1.2dvh, 14px); }
.hand-card { height: calc(100% + 38px); bottom: -24px; max-width: 46vw; filter: drop-shadow(0 10px 14px rgba(86,53,17,.10)); }
.trusted { position: absolute; top: 18%; left: 50%; transform: translateX(-50%); width: min(960px, 80%); max-width: none; margin: 0; display: block; }
.trusted > span { display: none; }
.tool-logos { display: grid; grid-template-columns: 1fr 1fr 2fr 1fr 1fr; width: 100%; gap: 14px; align-items: center; }
.tool-logo { justify-content: center; }
.tool-logo:nth-child(3) { grid-column: 4; }
.tool-logo:nth-child(4) { grid-column: 5; }
.dashboard-backdrop { width: min(980px, 70vw); height: min(275px, 28dvh); opacity: .4; }
.terrain { height: min(39dvh, 95%); }
.terrain-left { height: min(35dvh, 88%); }
@media (max-width: 800px) {
  .hand-card { height: calc(100% + 20px); bottom: -20px; max-width: 78vw; }
  .trusted { top: 13%; width: 94%; }
  .tool-logos { grid-template-columns: 1fr 1.6fr 1fr; gap: 8px; row-gap: 16px; }
  .tool-logo:nth-child(1) { grid-column: 1; grid-row: 1; }
  .tool-logo:nth-child(2) { grid-column: 1; grid-row: 2; }
  .tool-logo:nth-child(3) { grid-column: 3; grid-row: 1; }
  .tool-logo:nth-child(4) { grid-column: 3; grid-row: 2; }
  .tool-logo { font-size: 11px; gap: 5px; }
  .tool-logo img { width: 14px; height: 14px; }
  .dashboard-backdrop { width: 92vw; height: min(190px, 26dvh); }
  .terrain { height: min(26dvh, 75%); }
  .terrain-left { height: min(23dvh, 68%); }
}
@media (max-height: 600px) and (min-width: 801px) {
  .hand-card { height: calc(100% + 10px); bottom: -10px; }
  .trusted { top: 14%; }
  .tool-logo { font-size: 11px; }
}