@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&family=Sora:wght@400;500;600;700&display=swap');

/* HN Market — the account ledger direction */
:root {
  --ink: #081321;
  --ink-soft: #101f30;
  --panel: #142537;
  --line: rgba(216, 224, 230, .15);
  --paper: #edf1f0;
  --muted: #aab9c5;
  --gold: #d7af62;
  --gold-bright: #f0d191;
  --data-font: 'IBM Plex Mono', Consolas, monospace;
}
body { background: var(--ink); color: var(--paper); font-family: 'DM Sans', Arial, sans-serif; }
h1, h2, h3, h4, h5, h6 { font-family: 'Sora', 'DM Sans', sans-serif; }
.wow { visibility: visible !important; opacity: 1 !important; animation: none !important; }
.sp_site_title, .plan-section .sp_site_title, .benefit-section .sp_site_title {
  background: none !important;
  color: var(--paper) !important;
  -webkit-text-fill-color: var(--paper) !important;
  font-family: 'Sora', sans-serif;
  font-weight: 600 !important;
  letter-spacing: -.055em;
  text-shadow: none !important;
}
.sp_site_header:after { display: none; }
.header { background: rgba(8, 19, 33, .96); border-bottom-color: var(--line); }
.header-bottom { padding: 15px 0; }
.site-logo .brand-text, .footer-logo .brand-text { font-family: 'Sora', sans-serif; font-weight: 700; letter-spacing: -.06em; }
.site-logo .brand-text:before, .footer-logo .brand-text:before { border-radius: 7px; width: 31px; height: 31px; font-family: var(--data-font); font-weight: 600; }
.sp_main_menu .nav-link { font-weight: 600; }
.sp_main_menu .active .nav-link { color: var(--gold-bright) !important; }
.navbar-toggler .menu-toggle { background: transparent !important; border-color: var(--gold-bright) !important; margin: 4px 0; width: 25px; height: 16px; }
.navbar-toggler .menu-toggle:before, .navbar-toggler .menu-toggle:after { background: var(--gold-bright) !important; }

/* The opening view behaves like a quiet account overview, without sample balances. */
.banner-section {
  min-height: 650px;
  padding: 94px 0 82px !important;
  background: radial-gradient(700px 490px at 88% 42%, #18314a 0%, transparent 68%), var(--ink) !important;
}
.banner-section:before { background: repeating-linear-gradient(90deg, transparent 0 95px, rgba(255,255,255,.025) 96px); }
.banner-content { max-width: 650px; }
.hero-eyebrow, .section-eyebrow { font: 600 .72rem/1.5 var(--data-font); letter-spacing: .14em; color: var(--gold-bright); }
.hero-eyebrow { margin-bottom: 27px; }
.banner-title { max-width: 675px; font: 600 clamp(3.3rem, 5.1vw, 5.65rem)/1.08 'Sora', sans-serif !important; letter-spacing: -.072em !important; }
.banner-title em { color: var(--gold-bright); font-style: normal; }
.banner-description { max-width: 540px; margin-top: 25px !important; color: #b8c5cf !important; line-height: 1.75 !important; }
.hero-actions { gap: 11px; margin-top: 32px; }
.hero-actions .main-btn, .hero-actions .main-btn2 { padding: 14px 19px !important; font-size: .92rem; }
.main-btn, .cmn-btn { border-radius: 7px !important; background: var(--gold) !important; border-color: var(--gold) !important; color: var(--ink) !important; font-family: 'DM Sans', sans-serif; }
.main-btn:before, .main-btn:after, .cmn-btn:before, .cmn-btn:after { display: none !important; }
.main-btn2 { border-radius: 7px !important; background: transparent !important; color: var(--paper) !important; border-color: rgba(216,224,230,.28) !important; }
.hero-actions .main-btn2, .hero-actions .main-btn2 span { color: var(--paper) !important; }
.main-btn2:before, .main-btn2:after { display: none !important; }
.main-btn, .main-btn2 { -webkit-mask-image: none !important; mask-image: none !important; }
.main-btn span, .main-btn2 span { padding: 0 !important; background: transparent !important; }
.hero-footnote { margin: 27px 0 0; padding-top: 17px; border-top: 1px solid var(--line); max-width: 540px; color: #899dab; font: 400 .73rem/1.6 var(--data-font); }

.hero-terminal {
  width: min(38vw, 485px);
  right: 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid rgba(215,175,98,.3);
  border-radius: 4px;
  background: #142538;
  box-shadow: 20px 24px 0 rgba(215,175,98,.065), 0 25px 70px rgba(0,0,0,.22);
  backdrop-filter: none;
}
.terminal-top, .terminal-bottom { display: flex; justify-content: space-between; padding: 18px 25px; margin: 0; border-bottom: 1px solid var(--line); color: #aabbc8; font: 500 .66rem/1.5 var(--data-font); letter-spacing: .12em; }
.terminal-status { color: var(--gold-bright); }
.terminal-intro { padding: 35px 25px 29px; color: var(--paper); font: 500 clamp(1.85rem, 2.6vw, 2.75rem)/1.2 'Sora', sans-serif; letter-spacing: -.055em; }
.terminal-intro strong { font-weight: 500; color: var(--gold-bright); }
.terminal-list { display: block; padding: 0 25px 19px; }
.terminal-list div { display: flex; justify-content: space-between; gap: 16px; padding: 15px 0; border: 0; border-top: 1px solid var(--line); border-radius: 0; background: none; }
.terminal-list span { color: var(--gold-bright); font: 500 .66rem/1.5 var(--data-font); letter-spacing: .08em; }
.terminal-list b { margin: 0; color: #d6e0e5; font: 500 .83rem/1.5 'DM Sans', sans-serif; text-align: right; }
.terminal-bottom { justify-content: flex-start; gap: 12px; border-top: 1px solid var(--line); border-bottom: 0; color: #758a9b; }
.terminal-bottom span { color: var(--gold); }

/* Benefits use the same rules and spacing as the account panel. */
.benefit-section { background: #0d1b2a; }
.overview-heading { margin-bottom: 35px; }
.overview-heading .sp_site_header { margin: 0 !important; }
.overview-heading .sp_site_title { margin: 14px 0 0; font-size: clamp(2.15rem, 3.8vw, 3.8rem) !important; line-height: 1.16 !important; }
.section-intro { max-width: 335px; margin: 0 0 8px auto; color: var(--muted); font-size: 1rem; line-height: 1.75; }
.benefit-item { position: relative; padding: 29px !important; border-radius: 4px !important; background: #132436 !important; }
.benefit-section .benefit-item { display: block !important; text-align: left !important; }
.benefit-item:hover { transform: translateY(-3px); border-color: rgba(215,175,98,.45); }
.benefit-item .benefit-icon { display: grid !important; place-items: center; width: 43px; height: 43px; margin: 0 0 33px; border: 1px solid rgba(215,175,98,.38); border-radius: 4px; background: transparent !important; }
.benefit-icon svg { width: 24px; height: 24px; stroke: var(--gold-bright); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.benefit-item .title { font-size: 1.1rem; color: var(--paper); }
.benefit-item p { max-width: 285px; margin: 12px 0 0; line-height: 1.65; color: var(--muted); }

/* Investment options read as comparable terms, with their supplied values intact. */
.plan-section { padding-top: 100px !important; background: var(--ink) !important; }
.plan-section .sp_site_header { margin-bottom: 42px !important; }
.plan-section .sp_site_title { display: block; font-size: clamp(2.1rem, 3.2vw, 3.35rem) !important; }
.plan-section .plan-item { padding: 30px !important; border-radius: 4px !important; background: #132436 !important; }
.plan-item .plan-name-area { padding-bottom: 20px !important; }
.plan-item .plan-name { font-size: 1.5rem !important; letter-spacing: -.03em; }
.plan-item .plan-status { color: var(--muted) !important; }
.plan-item .plan-rio { position: static; width: auto; height: auto; display: block; margin: 21px 0 0 !important; padding: 17px 0 0 !important; border-top: 1px solid var(--line); border-radius: 0; background: none !important; }
.plan-item .plan-rio:before { display: none !important; }
.plan-item .plan-rio h6 { color: var(--muted) !important; }
.plan-item .plan-amount { color: var(--gold-bright) !important; font: 600 2.6rem/1.15 'Sora', sans-serif !important; }
.plan-item .plan-fatures { margin: 0 !important; }
.plan-list li { flex-wrap: nowrap; gap: 10px; margin: 0 !important; padding: 12px 0 !important; }
.plan-list li:before { display: none !important; }
.plan-list li .caption, .plan-list li .details { padding: 0 !important; }
.plan-list li .details { text-align: right; font-family: var(--data-font); font-size: .78rem !important; }
.plan-item .plan-action { padding-top: 20px !important; }
.plan-item .plan-btn { border-radius: 4px !important; text-align: center; }
.calculate-area { border-top: 1px solid var(--line); background: #142537 !important; }

/* The existing consent component shares the public site's palette. */
.cookie-modal { max-width: min(360px, calc(100vw - 28px)); border: 1px solid rgba(215,175,98,.4) !important; border-radius: 5px !important; background: #142537 !important; box-shadow: 0 16px 50px rgba(0,0,0,.35) !important; color: var(--paper) !important; }
.cookie-modal { left: auto !important; right: 24px !important; bottom: 24px !important; }
.cookies-card__icon { color: var(--gold-bright) !important; background: rgba(215,175,98,.1) !important; }
.cookie-consent__message { color: var(--paper) !important; }
.cookie-consent__agree { border-radius: 4px !important; background: var(--gold) !important; color: var(--ink) !important; font-weight: 700 !important; }

@media (max-width: 1199px) {
  .hero-terminal { right: 0; width: 42vw; }
}
@media (max-width: 991px) {
  .banner-section { min-height: 0; padding: 80px 0 70px !important; }
  .banner-section .row > div:first-child { width: 100%; }
  .hero-terminal { position: relative; left: auto; right: auto; top: auto; bottom: auto; width: 100%; max-width: 610px; margin: 54px auto 0; transform: none; }
  .section-intro { margin: 22px 0 0; }
  .plan-section { padding-top: 76px !important; }
}
@media (max-width: 575px) {
  .cookie-modal { display: flex !important; align-items: center; gap: 10px; left: 12px !important; right: 12px !important; bottom: 12px !important; width: auto !important; max-width: none; padding: 11px !important; }
  .cookie-modal .cookies-card__icon { display: none !important; }
  .cookie-modal .cookie-consent__message { flex: 1; margin: 0 !important; font-size: .74rem !important; line-height: 1.35; }
  .cookie-modal .cookie-consent__agree { flex: 0 0 auto; width: auto !important; margin: 0 !important; padding: 10px 11px !important; font-size: .74rem !important; }
  .header-bottom { padding: 11px 0; }
  .banner-section { padding: 62px 0 56px !important; }
  .hero-eyebrow { font-size: .64rem; margin-bottom: 21px; }
  .banner-title { font-size: clamp(2.8rem, 11vw, 4rem) !important; line-height: 1.11 !important; }
  .banner-description { font-size: 1rem !important; line-height: 1.65 !important; }
  .hero-actions { display: grid; grid-template-columns: 1fr; }
  .hero-actions .main-btn, .hero-actions .main-btn2 { width: 100%; margin: 0 !important; text-align: center; }
  .hero-terminal { margin-top: 38px; }
  .terminal-intro { padding: 28px 20px; font-size: 2rem; }
  .terminal-top, .terminal-bottom { padding: 16px 20px; }
  .terminal-list { padding: 0 20px 15px; }
  .terminal-list div { gap: 9px; }
  .terminal-list b { font-size: .75rem; }
  .overview-heading .sp_site_title { font-size: 2.2rem !important; }
  .benefit-item { padding: 25px !important; }
  .benefit-icon { margin-bottom: 25px; }
  .plan-section .plan-item { padding: 25px !important; }
  .plan-item .plan-amount { font-size: 2.25rem !important; }
}