/* A quiet, purpose-led presentation. Actual app captures keep their full ratio. */
.balance-page { --balance-blue: #466174; --balance-pale: #b9cedd; }
.balance-page h1, .balance-page h2 { letter-spacing: -.045em; font-weight: 600; line-height: 1.08; }
.balance-page h1 em { font-family: var(--serif); font-weight: 400; color: var(--balance-blue); }
.balance-page .eyebrow { color: #526878; font-size: 11px; letter-spacing: .15em; }
.balance-page .btn-accent { background: #243e50; color: #fffcf6; border-color: #243e50; box-shadow: none; }
.balance-page .btn-accent:hover { background: #395b72; border-color: #395b72; }
.balance-link { display: inline-flex; align-items: center; gap: 14px; min-height: 44px; font-size: 14px; font-weight: 600; color: #344f62; text-decoration: none; }
.balance-link:hover { text-decoration: underline; text-underline-offset: 5px; }
.balance-link span { font-size: 19px; }
.balance-hero { padding: 76px 0 72px; }
.balance-hero-inner { display: grid; grid-template-columns: 1.2fr .8fr; align-items: center; gap: 72px; }
.balance-hero h1 { font-size: clamp(56px, 6.2vw, 82px); margin: 0 0 28px; }
.balance-hero .lede { font-size: 18px; line-height: 1.75; max-width: 37ch; color: #526070; }
.balance-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 25px; margin-top: 30px; }
.balance-actions .btn-lg { padding: 16px 24px; font-size: 15px; border-radius: 10px; }
.balance-availability { color: #5d6875; font-size: 12px; margin-top: 20px; }
.balance-phone { width: min(100%, 282px); margin: 0; justify-self: center; }
.balance-phone-frame { display: block; padding: 5px; background: #243441; border: 1px solid #536574; border-radius: 32px; box-shadow: 0 22px 48px -26px #1d2e4070; }
.balance-phone-frame img { width: 100%; height: auto; border-radius: 26px; background: #dde7ef; }
.balance-phone figcaption { text-align: center; color: #5d6875; font-size: 11px; margin-top: 18px; }
.balance-benefits { padding: 72px 0 76px; border-top: 1px solid var(--hairline); }
.balance-section-heading { margin-bottom: 42px; }
.balance-section-heading h2 { font-size: clamp(30px, 3.6vw, 44px); max-width: 25ch; }
.balance-section-intro { max-width: 64ch; margin-top: 22px; color: #526070; font-size: 17px; line-height: 1.8; }
.balance-benefit-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 42px; margin-bottom: 28px; }
.balance-benefit-grid article { border-top: 2px solid #b6a98e; padding-top: 22px; }
.balance-benefit-grid article:nth-child(3n + 2) { border-color: #8ea8bd; }
.balance-benefit-grid article:nth-child(3n) { border-color: #97ab9c; }
.balance-benefit-grid h3 { font-size: 21px; font-weight: 600; line-height: 1.35; letter-spacing: -.025em; margin-bottom: 10px; }
.balance-benefit-grid h3 a { display: inline-flex; align-items: center; gap: 12px; min-height: 44px; color: #253c4c; text-decoration: none; }
.balance-benefit-grid h3 a:hover { text-decoration: underline; text-underline-offset: 4px; }
.balance-benefit-grid h3 span { font-size: 16px; flex: none; }
.balance-benefit-grid article > p:last-child { font-size: 15px; line-height: 1.8; color: #5d6875; max-width: 31ch; }
.balance-tools { display: flex; align-items: center; gap: 28px; padding-top: 30px; margin-top: 38px; border-top: 1px solid var(--hairline); }
.balance-tools h3 { font-size: 18px; font-weight: 600; margin-bottom: 8px; }
.balance-tools p { max-width: 61ch; color: #5d6875; font-size: 15px; line-height: 1.8; }
.balance-tools .balance-link { flex: none; margin-left: auto; }
.balance-evening { padding: 64px 0; background: #e7e9e5; }
.balance-evening-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; }
.balance-evening h2 { font-size: clamp(30px, 3.5vw, 42px); }
.balance-evening-inner > p { color: #526070; font-size: 17px; line-height: 1.85; max-width: 39ch; }
.balance-signup { padding: 72px 0; background: #172833; }
.balance-signup .cta-glow { display: none; }
.balance-signup .eyebrow { color: #b9cedd; }
.balance-signup .display-sm { font-size: clamp(32px, 4vw, 44px); letter-spacing: -.04em; }
.balance-signup .lede { font-size: 16px; max-width: 46ch; margin-top: 18px; }
.balance-signup .signup-form { margin-top: 26px; }
.balance-signup .btn-dawn { background: #b9cedd; color: #172833; box-shadow: none; }
.balance-signup .btn-dawn:hover { background: #d3e3ee; }
.balance-signup .signup-field input { background: #223947; color: #fffcf6; border-color: #6d8799; }
.balance-signup .signup-field input::placeholder { color: #b9c8d2; }
.balance-signup .signup-field input:focus { border-color: #d3e3ee; outline-color: #b9cedd; }
.balance-signup .small { font-size: 12px; }
.balance-signup .small a { color: #b9cedd; }

/* The optional detail page gives each part of the day one short explanation. */
.balance-app-intro { padding: 80px 0 60px; }
.balance-app-intro h1 { font-size: clamp(50px, 6vw, 76px); margin-bottom: 26px; }
.balance-app-intro .lede { max-width: 45ch; font-size: 19px; line-height: 1.8; }
.balance-app-details { padding: 0 0 50px; }
.balance-app-details article { display: grid; grid-template-columns: 75px 1fr; gap: 24px; max-width: 800px; border-top: 1px solid var(--hairline); padding: 30px 0; }
.balance-app-details article[id] { scroll-margin-top: 110px; }
.balance-step { font-size: 13px; color: #5d6875; padding-top: 5px; font-variant-numeric: tabular-nums; }
.balance-app-details h2 { font-size: 27px; margin-bottom: 13px; }
.balance-app-details p { max-width: 60ch; color: #5d6875; font-size: 16px; line-height: 1.8; }
.balance-app-details .eyebrow { color: #526878; font-size: 11px; margin-bottom: 10px; }
.balance-screens { padding: 60px 0 64px; background: #e7e9e5; }
.balance-screen-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 65px; max-width: 570px; margin: 0 auto; }
.balance-screen-grid--overview { grid-template-columns: repeat(3, 1fr); gap: 54px; max-width: 900px; }
.balance-screen-grid--complete { grid-template-columns: repeat(4, 1fr); gap: 28px; max-width: 1064px; }
.balance-screen-grid figure { min-width: 0; }
.balance-screen-grid a:focus-visible { outline: 3px solid #466174; outline-offset: 6px; }
.balance-screen-grid figcaption { margin-top: 22px; text-align: center; font-size: 13px; color: #5d6875; }
.balance-screen-grid figcaption strong, .balance-screen-grid figcaption span { display: block; }
.balance-screen-grid figcaption strong { color: #253c4c; font-size: 15px; font-weight: 600; margin-bottom: 3px; }
.balance-gallery-note { margin-top: 34px; color: #5d6875; text-align: center; font-size: 12px; }
.balance-connections { padding: 50px 0; }
.balance-connections details { border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); }
.balance-connections summary { padding: 22px 0; min-height: 44px; cursor: pointer; font-size: 17px; font-weight: 600; }
.balance-connection-list { display: grid; grid-template-columns: 1fr 1fr; gap: 22px 45px; padding: 0 0 28px; }
.balance-connection-list p { color: #5d6875; font-size: 14px; }
.balance-connection-list strong, .balance-connection-list span { display: block; }
.balance-connection-list strong { color: #253c4c; font-weight: 600; margin-bottom: 4px; }
.balance-app-cta { padding: 20px 0 70px; }
.balance-app-cta .container { display: flex; align-items: center; flex-wrap: wrap; gap: 20px 28px; }
.balance-app-cta h2 { font-size: 30px; margin-right: auto; }

@media (max-width: 960px) {
  .balance-hero-inner { grid-template-columns: 1.1fr .9fr; gap: 40px; }
  .balance-hero h1 { font-size: 64px; }
  .balance-benefit-grid { gap: 25px; }
  .balance-benefit-grid h3 { font-size: 20px; }
  .balance-screen-grid { gap: 30px; }
  .balance-screen-grid--complete { grid-template-columns: repeat(2, 1fr); max-width: 570px; }
}
@media (max-width: 760px) {
  .balance-hero { padding: 44px 0 48px; }
  .balance-hero-inner { grid-template-columns: 1fr; gap: 42px; }
  .balance-hero h1 { font-size: clamp(49px, 10.5vw, 66px); }
  .balance-hero .lede { font-size: 17px; max-width: 36ch; }
  .balance-phone { width: min(66vw, 265px); }
  .balance-benefits { padding: 48px 0; }
  .balance-section-heading { margin-bottom: 30px; }
  .balance-benefit-grid { grid-template-columns: 1fr; gap: 28px; margin-bottom: 24px; }
  .balance-benefit-grid article { padding-top: 18px; }
  .balance-benefit-grid h3 { font-size: 22px; }
  .balance-benefit-grid article > p:last-child { max-width: 43ch; }
  .balance-tools { flex-direction: column; align-items: flex-start; gap: 12px; margin-top: 30px; }
  .balance-tools .balance-link { margin-left: 0; }
  .balance-evening { padding: 44px 0; }
  .balance-evening-inner { grid-template-columns: 1fr; gap: 24px; }
  .balance-evening-inner > p { font-size: 16px; max-width: 43ch; }
  .balance-signup { padding: 48px 0; }
  .balance-app-intro { padding: 44px 0 38px; }
  .balance-app-intro .lede { font-size: 17px; }
  .balance-app-details article { grid-template-columns: 32px 1fr; gap: 15px; padding: 25px 0; }
  .balance-app-details article[id] { scroll-margin-top: 124px; }
  .balance-app-details h2 { font-size: 25px; }
  .balance-screens { padding: 44px 0; }
  .balance-screen-grid { grid-template-columns: 1fr; gap: 42px; max-width: 260px; }
  .balance-connections { padding: 35px 0; }
  .balance-connection-list { grid-template-columns: 1fr; gap: 20px; }
  .balance-app-cta { padding: 5px 0 48px; }
  .balance-app-cta h2 { width: 100%; font-size: 29px; }
}
@media (prefers-reduced-motion: reduce) {
  .balance-page *, .balance-page *::before, .balance-page *::after { scroll-behavior: auto; transition: none; }
}