/* Blogger Sans — local site assets only. See docs/FONT-NOTICE.md. */









/* CAPYBRO · Blue Clarity. Original responsive interface, no UI framework. */
:root {
  --blue:#3263D9;
  --blue-hover:#234DB8;
  --navy:#17325E;
  --muted:#64738C;
  --sky:#ECF2FC;
  --ice:#F6F9FE;
  --line:#DCE4F1;
  --white:#fff;
  --light-blue:#688BD0;
  --sand:#F7EEDB;
  --radius:22px;
  --container:1240px;
  --font:"Blogger Sans","Lato","Trebuchet MS",sans-serif
}

* {
  box-sizing:border-box
}

html {
  scroll-behavior:smooth;
  scroll-padding-top:106px;
  -webkit-text-size-adjust:100%
}

body {
  margin:0;
  color:var(--navy);
  background:#fff;
  font-family:var(--font);
  font-size:17px;
  font-weight:400;
  line-height:1.5;
  -webkit-font-smoothing:antialiased
}

body.dialog-open {
  overflow:hidden
}

body.menu-open {
  overflow:hidden
}

button,input,select,textarea {
  font:inherit
}

button,a,input,select,summary {
  -webkit-tap-highlight-color:transparent
}

button {
  color:inherit
}

button:not(:disabled),summary {
  cursor:pointer
}

button {
  border:0
}

a {
  color:inherit;
  text-decoration:none
}

p,h1,h2,h3,h4 {
  margin:0
}

h1,h2,h3 {
  font-weight:500
}

h2 {
  font-size:54px;
  line-height:1.08;
  letter-spacing:-1.8px
}

h3 {
  font-size:25px;
  line-height:1.25;
  letter-spacing:-.45px
}

p {
  color:var(--muted)
}

strong,b {
  font-weight:700
}

svg {
  display:block;
  flex-shrink:0
}

img,svg {
  max-width:100%
}

button:focus-visible,a:focus-visible,select:focus-visible,summary:focus-visible,[tabindex]:focus-visible {
  outline:3px solid #C09532;
  outline-offset:5px
}

::selection {
  background:#CBDDFE;
  color:var(--navy)
}

[hidden] {
  display:none!important
}

.container {
  width:min(var(--container),calc(100% - 96px));
  margin-inline:auto
}

.icon {
  display:inline-block;
  flex-shrink:0;
  vertical-align:middle;
  fill:none;
  stroke:currentColor
}

.svg-sprite {
  position:absolute;
  width:0;
  height:0;
  overflow:hidden
}

.sr-only {
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0
}

.skip-link {
  position:fixed;
  left:16px;
  top:-100px;
  z-index:200;
  background:var(--navy);
  color:white;
  padding:12px 18px;
  border-radius:10px
}

.skip-link:focus {
  top:16px
}

.btn {
  display:inline-flex;
  justify-content:center;
  align-items:center;
  gap:22px;
  min-height:58px;
  padding:15px 24px;
  border-radius:12px;
  font-size:17px;
  font-weight:500;
  line-height:1.25;
  text-align:center;
  border:1px solid transparent;
  transition:background .18s ease,transform .18s ease,box-shadow .18s ease;
  white-space:normal
}

.btn:hover {
  transform:translateY(-2px)
}

.btn:active {
  transform:translateY(0)
}

.btn .icon {
  width:19px;
  height:19px
}

.btn-primary {
  background:var(--blue);
  color:#fff;
  box-shadow:0 5px 10px #3263d913
}

.btn-primary:hover {
  background:var(--blue-hover);
  box-shadow:0 8px 20px #3263d925
}

.btn-small {
  min-height:45px;
  padding:11px 19px;
  font-size:15px;
  gap:15px;
  border-radius:10px
}

.btn-small .icon {
  width:16px;
  height:16px
}

.btn-outline {
  border-color:#CDD8EC;
  background:#fff;
  color:var(--navy)
}

.btn-outline:hover {
  background:var(--sky);
  border-color:#A8BDE5
}

.btn-white {
  background:white;
  color:var(--blue)
}

.btn-white:hover {
  background:#EBF2FF
}

.text-link,.link-button {
  display:inline-flex;
  align-items:center;
  gap:10px;
  color:var(--blue);
  line-height:1.4;
  font-weight:500
}

.text-link {
  padding-block:8px;
  min-height:44px
}

.text-link .icon {
  width:20px;
  height:20px;
  transition:transform .18s
}

.text-link:hover .icon {
  transform:translateX(4px)
}

.text-link:hover,.link-button:hover {
  text-decoration:underline;
  text-underline-offset:4px
}

.link-button {
  padding:3px 0;
  background:none;
  text-align:left;
  font-size:inherit
}

.eyebrow {
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-size:13px;
  letter-spacing:1.15px;
  line-height:1.45;
  font-weight:500;
  text-transform:uppercase
}

.eyebrow-dot {
  width:7px;
  height:7px;
  border-radius:50%;
  background:var(--blue);
  box-shadow:0 0 0 5px #3263d90b
}

.muted-blue {
  color:var(--light-blue)
}

.section {
  padding:105px 0
}

.section-topline {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:25px;
  margin-bottom:30px
}

.section-index {
  font-size:13px;
  color:#748099
}

.section-heading-row {
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:40px;
  margin-bottom:52px
}

.section-heading-row>p {
  font-size:18px;
  line-height:1.65;
  padding-bottom:3px;
  max-width:375px
}

/* Navigation */




.brand {
  display:inline-flex;
  align-items:center;
  gap:8px;
  white-space:nowrap;
  flex-shrink:0
}

.brand-mark {
  display:flex;
  align-items:center;
  justify-content:center;
  width:43px;
  height:43px;
  border-radius:13px;
  background:var(--blue);
  color:white
}

.brand-type {
  font-size:25px;
  line-height:1;
  font-weight:700;
  letter-spacing:-.7px
}

.beta {
  font-size:11px;
  line-height:1.3;
  margin-left:2px;
  padding:3px 5px;
  border:1px solid #CED9ED;
  border-radius:5px;
  align-self:flex-start;
  margin-top:7px;
  color:#7386A5
}

















/* First screen */
.hero {
  background:#F8FAFE;
  overflow:hidden
}

.hero-grid {
  display:grid;
  grid-template-columns:.88fr 1.12fr;
  gap:50px;
  align-items:center;
  padding-top:65px;
  padding-bottom:62px
}

.hero-copy {
  position:relative;
  z-index:3;
  padding-bottom:8px
}

.hero-copy .eyebrow {
  font-size:11px;
  letter-spacing:1.2px;
  margin-bottom:24px
}

.hero h1 {
  font-size:91px;
  letter-spacing:-3.5px;
  line-height:.98;
  margin-bottom:32px;
  font-weight:500
}

.hand-underline {
  display:inline-block;
  color:var(--blue);
  position:relative;
  padding-bottom:8px
}

.hand-underline>svg {
  position:absolute;
  left:-3px;
  bottom:-4px;
  width:102%;
  height:15px
}

.hero-description {
  font-size:19px;
  line-height:1.55;
  max-width:450px
}

.hero-ctas {
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:12px;
  margin-top:30px
}

.hero-ctas>.btn {
  min-height:62px;
  padding:17px 23px;
  font-size:18px;
  gap:28px
}

.hero-demo-link {
  font-size:16px;
  color:var(--navy);
  gap:16px
}

.hero-trust {
  display:flex;
  gap:20px;
  font-size:12px;
  color:#6B7A93;
  margin-top:18px;
  flex-wrap:wrap
}

.hero-trust>span {
  display:flex;
  align-items:center;
  gap:6px
}

.hero-trust .icon {
  color:#6581AC
}

.hero-art {
  position:relative;
  padding:44px 0 55px 8px;
  min-width:0
}

.hero-orbit {
  position:absolute;
  width:610px;
  height:610px;
  background:#E8F0FD;
  border-radius:50%;
  top:11px;
  left:2px;
  transform:rotate(-14deg);
  border:1px solid #DCE7FB
}

.hero-orbit::before {
  content:"";
  position:absolute;
  inset:-28px;
  border:1px solid #DFE9F9;
  border-radius:50%
}

.hero-orbit::after {
  content:"";
  position:absolute;
  height:15px;
  width:15px;
  background:#8CADEC;
  top:50px;
  right:63px;
  border:5px solid #F8FAFE;
  border-radius:50%
}

.hand-note {
  position:absolute;
  top:-7px;
  right:102px;
  z-index:3;
  color:#657FAD;
  font-size:19px;
  font-style:italic;
  transform:rotate(-7deg)
}

.hand-note svg {
  position:absolute;
  width:75px;
  height:47px;
  right:-53px;
  top:11px
}

.product-window {
  position:relative;
  z-index:2;
  width:100%;
  max-width:572px;
  margin-left:auto;
  border:1px solid #D8E2F2;
  border-radius:19px;
  background:white;
  box-shadow:0 23px 60px #1D458D12,0 3px 8px #1D458D08;
  overflow:hidden
}

.window-top {
  height:51px;
  display:flex;
  align-items:center;
  gap:10px;
  padding:0 24px;
  border-bottom:1px solid #EBEFF5
}

.window-name {
  display:flex;
  align-items:center;
  gap:5px;
  font-size:19px;
  letter-spacing:-.5px;
  font-weight:700;
  color:var(--blue)
}

.demo-tag {
  display:flex;
  align-items:center;
  gap:5px;
  margin-left:auto;
  font-size:10px;
  color:#7887A0
}

.demo-tag>span {
  display:block;
  width:5px;
  height:5px;
  border-radius:50%;
  background:#7794BF
}

.window-avatar {
  margin-left:7px;
  width:25px;
  height:25px;
  background:#EAF0FD;
  border:1px solid #D6E1F8;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:12px;
  font-weight:700;
  color:#6D85B5
}

.window-content {
  padding:22px 27px 20px
}

.window-head {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:15px
}

.window-head .overline {
  font-size:9px;
  letter-spacing:1.3px;
  color:#8190A7;
  display:block;
  margin-bottom:4px
}

.window-head h2 {
  font-size:27px;
  line-height:1.2;
  letter-spacing:-.6px
}

.month-select select {
  background-color:#F5F8FD;
  border:1px solid #E5ECF6;
  padding:9px 10px;
  border-radius:7px;
  min-height:38px;
  font-size:12px;
  color:var(--navy);
  max-width:130px
}

.overview-metric {
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-top:18px
}

.overview-metric>div>span {
  display:block;
  font-size:12px;
  color:#76839B;
  margin-bottom:3px
}

.overview-metric strong {
  font-size:47px;
  line-height:1.15;
  font-weight:500;
  letter-spacing:-1.8px;
  white-space:nowrap;
  display:block
}

.overview-metric strong small {
  font-size:33px;
  color:#7F97C1;
  font-weight:400
}

.metric-icon {
  display:flex;
  align-items:center;
  justify-content:center;
  height:48px;
  width:48px;
  border-radius:14px;
  background:#EDF3FE;
  color:#6E91D3
}

.income-row {
  display:flex;
  align-items:center;
  gap:25px;
  margin-top:13px;
  padding-bottom:18px;
  font-size:11px;
  color:#6A7D9D;
  flex-wrap:wrap
}

.income-row>span {
  display:flex;
  align-items:center;
  gap:5px
}

.income-row b {
  font-size:13px;
  color:var(--navy);
  font-weight:500;
  margin-left:3px
}

.flow-dot {
  width:5px;
  height:5px;
  border-radius:50%;
  flex-shrink:0
}

.income-dot {
  background:#6E9EA3
}

.expense-dot {
  background:var(--blue)
}

.demo-tabs {
  display:flex;
  gap:23px;
  border-bottom:1px solid #E7EDF6
}

.demo-tabs button {
  position:relative;
  background:none;
  padding:11px 0 12px;
  font-size:12px;
  color:#647A9C;
  min-height:43px
}

.demo-tabs button[aria-selected=true] {
  color:var(--blue);
  font-weight:700
}

.demo-tabs button[aria-selected=true]::after {
  content:"";
  height:2px;
  background:var(--blue);
  position:absolute;
  left:0;
  right:0;
  bottom:-1px;
  border-radius:2px
}

.demo-tabs button:hover {
  color:var(--blue)
}

.demo-pane {
  min-height:194px;
  padding:22px 0 15px
}

.category-chart {
  display:flex;
  align-items:center;
  gap:30px;
  justify-content:space-between
}

.donut {
  position:relative;
  width:149px;
  height:149px;
  border-radius:50%;
  background:conic-gradient(#3263D9 0 35%,#6B91ED 35% 61.9%,#A9BEF4 61.9% 75.9%,#CBD8F7 75.9% 84.1%,#E8EEFA 84.1% 100%);
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
  transform:rotate(-.5deg)
}

.donut::before {
  content:"";
  width:107px;
  height:107px;
  border-radius:50%;
  background:white;
  position:absolute
}

.donut>div {
  z-index:1;
  display:flex;
  align-items:center;
  flex-direction:column;
  line-height:1.2
}

.donut small {
  font-size:9px;
  color:#7285A1
}

.donut b {
  font-weight:500;
  font-size:26px;
  letter-spacing:-.6px;
  margin:4px 0 2px
}

.donut>div>span {
  font-size:10px;
  color:#7B8CA9
}

.chart-legend {
  display:flex;
  flex-direction:column;
  gap:12px;
  flex:1;
  min-width:0
}

.chart-legend>div {
  display:flex;
  align-items:center;
  gap:7px;
  font-size:11px;
  color:#6A7D9D;
  line-height:1.15
}

.chart-legend i {
  width:6px;
  height:6px;
  border-radius:2px;
  background:var(--dot);
  flex-shrink:0
}

.chart-legend b {
  margin-left:auto;
  font-weight:500;
  font-size:12px;
  color:var(--navy);
  white-space:nowrap
}

.next-payment {
  display:flex;
  align-items:center;
  gap:11px;
  background:#F3F6FC;
  border-radius:10px;
  padding:12px 14px;
  font-size:10px;
  color:#7C8FAB
}

.next-payment>.icon {
  width:22px;
  color:#6E8ABA
}

.next-payment>span>small {
  display:block;
  font-size:12px;
  color:var(--navy);
  margin-top:2px
}

.next-payment>b {
  margin-left:auto;
  font-size:14px;
  font-weight:500;
  color:var(--navy);
  white-space:nowrap
}

.floating-insight {
  position:absolute;
  z-index:4;
  bottom:29px;
  left:-18px;
  display:flex;
  align-items:center;
  gap:10px;
  padding:14px 16px;
  max-width:355px;
  background:white;
  border:1px solid #D9E5F6;
  box-shadow:0 12px 30px #28539513;
  border-radius:12px;
  transform:rotate(-3deg)
}

.floating-insight b {
  font-size:12px;
  display:block;
  font-weight:500
}

.floating-insight>div>span {
  display:block;
  font-size:10px;
  color:#7A8CA7;
  margin-top:3px
}

.insight-icon {
  display:flex;
  align-items:center;
  justify-content:center;
  width:34px;
  height:34px;
  background:#ECF3FF;
  border-radius:9px;
  color:var(--blue)
}

.insight-icon .icon {
  width:20px
}

.insight-check {
  color:#678F80;
  margin-left:3px
}

.hero-mascot {
  position:absolute;
  bottom:-28px;
  right:-34px;
  width:182px;
  z-index:3;
  transform:rotate(4deg);
  pointer-events:none
}

.mascot-svg {
  width:100%;
  height:auto;
  overflow:visible
}

.demo-caption {
  font-size:11px;
  color:#7F90AB;
  position:absolute;
  left:36px;
  bottom:-6px;
  display:flex;
  align-items:center;
  gap:5px
}

.bank-strip {
  display:flex;
  align-items:center;
  gap:32px;
  min-height:115px;
  padding:23px 0;
  border-top:1px solid #E0E7F3
}

.bank-intro {
  font-size:12px;
  color:#7283A0;
  line-height:1.5;
  min-width:112px
}

.bank-intro strong {
  font-weight:500;
  color:var(--navy)
}

.bank-names {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:22px;
  flex:1
}

.bank-names>span {
  display:flex;
  align-items:center;
  font-weight:700;
  color:#344D73;
  font-size:20px;
  letter-spacing:-.6px;
  white-space:nowrap;
  gap:5px
}

.bank-names i {
  font-size:19px;
  font-style:normal;
  display:inline-flex;
  align-items:center;
  justify-content:center
}

.bank-sber i {
  width:25px;
  height:25px;
  border:2px solid #6481AE;
  border-radius:50%;
  font-size:16px;
  color:#6481AE
}

.bank-t i {
  width:25px;
  height:27px;
  border-radius:4px 4px 10px 10px;
  background:#D2DFF2;
  color:#456591;
  font-size:18px
}

.bank-alpha i {
  font-size:28px;
  border-bottom:3px solid #6481AE;
  height:32px;
  line-height:1;
  color:#6481AE;
  padding-bottom:3px;
  margin-right:2px
}

.bank-vtb i {
  font-size:35px;
  line-height:1;
  transform:skew(-10deg);
  color:#6481AE
}

.bank-ozon {
  font-style:italic;
  letter-spacing:-1px!important
}

.bank-names small {
  font-size:12px;
  font-weight:400;
  letter-spacing:0
}

.bank-format {
  font-size:11px;
  white-space:nowrap;
  margin-left:4px;
  min-height:44px
}

.demo-budget-head {
  display:flex;
  justify-content:space-between;
  gap:12px;
  font-size:12px;
  margin-top:5px;
  margin-bottom:12px
}

.demo-budget-head b {
  font-weight:500
}

.progress-track {
  height:9px;
  overflow:hidden;
  border-radius:10px;
  background:#E9EFF9
}

.progress-track>span {
  height:100%;
  display:block;
  border-radius:inherit;
  background:var(--blue);
  transition:width .3s ease
}

.progress-track.small {
  height:5px
}

.budget-remaining {
  font-size:11px;
  margin-top:8px;
  margin-bottom:20px
}

.budget-remaining strong {
  font-weight:500;
  color:var(--blue)
}

.mini-budget {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  font-size:11px;
  margin-bottom:6px
}

.mini-budget b {
  font-weight:500
}

.demo-helper {
  font-size:11px;
  margin-top:13px
}

.mini-icon {
  width:43px;
  height:43px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:11px;
  background:#E9F0FD;
  color:var(--blue);
  flex-shrink:0
}

.demo-goal-title {
  display:flex;
  align-items:center;
  gap:10px
}

.demo-goal-title b {
  font-size:13px;
  font-weight:500;
  display:block
}

.demo-goal-title small {
  font-size:10px;
  color:var(--muted);
  display:block;
  margin-top:3px
}

.demo-goal-title>strong {
  margin-left:auto;
  font-size:16px;
  font-weight:500;
  color:var(--blue)
}

.demo-goal-title .mini-icon {
  width:35px;
  height:35px
}

.demo-goal-title .icon {
  width:20px;
  height:20px
}

.goal-total {
  display:flex;
  align-items:baseline;
  gap:10px;
  margin:12px 0 8px
}

.goal-total b {
  font-size:25px;
  font-weight:500;
  letter-spacing:-.5px
}

.goal-total span {
  font-size:10px;
  color:var(--muted)
}

/* Problem awareness: open editorial columns, not tiles */
.needs {
  padding-top:95px;
  padding-bottom:100px
}

.needs .section-heading-row>h2 {
  font-size:45px;
  line-height:1.15;
  letter-spacing:-1.4px
}

.needs-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:38px
}

.needs-grid article {
  padding-right:32px;
  border-right:1px solid var(--line);
  display:flex;
  flex-direction:column;
  align-items:flex-start
}

.needs-grid article:last-child {
  padding-right:0;
  border-right:0
}

.question-number {
  font-size:13px;
  color:#718FC1;
  display:block;
  margin-bottom:22px
}

.needs-grid h3 {
  font-size:23px;
  line-height:1.35;
  letter-spacing:-.6px;
  margin-bottom:16px
}

.needs-grid p {
  font-size:16px;
  line-height:1.6;
  max-width:335px;
  margin-bottom:17px
}

.needs-grid .text-link {
  font-size:14px;
  gap:14px;
  margin-top:auto
}

.needs-grid .text-link .icon {
  width:17px
}

/* Meaning, a live small example */
.meaning {
  padding:87px 0 76px;
  background:#234FAE;
  color:#fff;
  position:relative;
  overflow:hidden
}

.meaning::before {
  content:"";
  width:540px;
  height:540px;
  position:absolute;
  border:1px solid #FFFFFF12;
  border-radius:50%;
  left:-350px;
  bottom:-240px
}

.meaning-grid {
  display:grid;
  grid-template-columns:.93fr 1.07fr;
  gap:100px;
  align-items:center
}

.meaning-copy .eyebrow {
  color:#C0D3FF;
  font-size:11px;
  letter-spacing:1.05px;
  margin-bottom:26px
}

.meaning h2 {
  font-size:68px;
  letter-spacing:-2px;
  line-height:1.03;
  margin-bottom:26px
}

.meaning h2>span {
  color:#AFCAFF
}

.meaning-copy>p {
  color:#D5E1FC;
  font-size:18px;
  line-height:1.6;
  max-width:390px;
  margin-bottom:17px
}

.meaning-note {
  display:flex;
  align-items:center;
  gap:10px;
  margin-top:29px;
  padding-top:25px;
  border-top:1px solid #FFFFFF2E;
  color:#C2D4FB;
  font-size:12px;
  line-height:1.6;
  max-width:390px
}

.meaning-note>.icon {
  color:#AFC8F7
}

.meaning-example {
  min-width:0
}

.example-toggle {
  display:flex;
  gap:5px;
  padding:5px;
  background:#19449F;
  border:1px solid #4771C3;
  border-radius:12px;
  margin-bottom:19px
}

.example-toggle button {
  flex:1;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  min-height:43px;
  border-radius:8px;
  background:transparent;
  color:#C8DBFF;
  font-size:15px;
  padding:8px 10px;
  white-space:nowrap
}

.example-toggle button[aria-pressed=true] {
  background:#fff;
  color:var(--blue);
  box-shadow:0 3px 6px #0F2C6222
}

.example-toggle button:hover:not([aria-pressed=true]) {
  background:#FFFFFF0D
}

.receipt {
  border-radius:19px;
  background:#fff;
  color:var(--navy);
  padding:26px 28px 25px;
  box-shadow:0 18px 50px #112C6E22
}

.receipt-heading {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:15px;
  font-size:14px;
  padding-bottom:19px;
  border-bottom:1px solid #E5EBF4;
  font-weight:500
}

.receipt-heading>span:last-child {
  font-size:10px;
  color:#7F8BA0;
  font-weight:400;
  border:1px solid #E3EAF4;
  padding:2px 7px;
  border-radius:4px
}

.transaction {
  display:flex;
  gap:13px;
  align-items:center;
  min-height:82px;
  border-bottom:1px solid #EEF2F8
}

.transaction-icon {
  height:38px;
  width:38px;
  border-radius:10px;
  background:#F1F5FC;
  color:#6485BC;
  display:flex;
  align-items:center;
  justify-content:center
}

.transaction-icon>.icon {
  height:20px;
  width:20px
}

.transaction>div {
  min-width:0
}

.transaction b {
  display:block;
  font-size:15px;
  font-weight:500
}

.transaction small {
  display:block;
  font-size:11px;
  color:#7084A3;
  margin-top:4px
}

.transaction strong {
  font-size:17px;
  font-weight:500;
  margin-left:auto;
  white-space:nowrap
}

.transaction strong.positive {
  color:#49817B
}

.receipt-total {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:15px;
  border-top:1px dashed #D6E0F1;
  margin-top:17px;
  padding-top:20px
}

.receipt-total>div>span {
  font-size:13px;
  color:#657A9D;
  display:block
}

.receipt-total strong {
  display:block;
  font-size:64px;
  font-weight:500;
  letter-spacing:-2px;
  line-height:1.2;
  color:var(--blue)
}

.receipt-total strong small {
  font-size:39px;
  font-weight:400;
  color:#86A2D3
}

.receipt-stamp {
  font-size:13px;
  line-height:1.3;
  font-style:italic;
  color:#5781C3;
  transform:rotate(-10deg);
  padding:14px 17px;
  border:1px solid #ADC4EB;
  border-radius:50%;
  display:flex;
  align-items:center;
  gap:8px
}

.receipt-formula {
  font-size:11px;
  color:#7790B5;
  line-height:1.55;
  min-height:35px;
  margin-top:5px;
  max-width:355px
}

.example-disclaimer {
  color:#B1C7F0;
  font-size:11px;
  text-align:center;
  margin-top:14px
}

.meaning-example.raw .receipt-total strong {
  color:#6E7E9D
}

.meaning-example.raw .receipt-stamp {
  border-color:#D1DCEB;
  color:#8190AA
}

/* Product benefit details */
.features {
  padding-bottom:93px
}

.feature-stage {
  display:grid;
  grid-template-columns:.95fr 1.05fr;
  gap:75px;
  align-items:center
}

.feature-options {
  display:flex;
  flex-direction:column;
  align-items:stretch;
  gap:5px
}

.feature-option {
  display:flex;
  align-items:flex-start;
  gap:20px;
  width:100%;
  padding:29px 23px;
  text-align:left;
  background:transparent;
  border:1px solid transparent;
  border-radius:13px;
  transition:background .18s,border-color .18s
}

.feature-option .feature-number {
  font-size:12px;
  color:#7E95BB;
  padding-top:3px
}

.feature-option>span:nth-child(2) {
  flex:1
}

.feature-option strong {
  display:block;
  font-size:25px;
  letter-spacing:-.5px;
  font-weight:500;
  line-height:1.2;
  margin-bottom:10px
}

.feature-option>span>span {
  font-size:16px;
  line-height:1.55;
  color:var(--muted);
  display:block;
  max-width:350px
}

.feature-option>.icon {
  width:21px;
  height:21px;
  margin-top:3px;
  color:#8DA6CE
}

.feature-option[aria-selected=true] {
  background:#F0F5FE;
  border-color:#DFE8F8
}

.feature-option[aria-selected=true]>.icon {
  color:var(--blue)
}

.feature-option[aria-selected=true] strong {
  color:var(--blue)
}

.feature-option:hover:not([aria-selected=true]) {
  background:#F9FBFF
}

.feature-visual {
  position:relative;
  background:#EBF2FE;
  border:1px solid #E5ECF8;
  border-radius:27px;
  padding:28px 37px 18px;
  min-width:0;
  min-height:474px
}

.visual-label {
  display:block;
  font-size:11px;
  color:#6F8AB3;
  margin-bottom:18px;
  letter-spacing:.2px
}

.feature-pane {
  min-width:0
}

.plan-card {
  background:white;
  border:1px solid #DFE8F6;
  box-shadow:0 12px 30px #2A518010;
  border-radius:16px;
  padding:24px 25px;
  min-height:331px
}

.plan-head {
  display:flex;
  gap:12px;
  align-items:center
}

.plan-head>span>b {
  display:block;
  font-size:16px;
  font-weight:500;
  letter-spacing:-.2px
}

.plan-head>span>small {
  display:block;
  font-size:11px;
  color:#8A99AF;
  margin-top:3px
}

.plan-big-number {
  font-size:38px;
  font-weight:500;
  letter-spacing:-1px;
  margin:25px 0 14px;
  line-height:1.1
}

.plan-big-number small {
  font-size:16px;
  letter-spacing:0;
  color:#8C9EBC;
  font-weight:400;
  white-space:nowrap
}

.segmented-budget {
  display:flex;
  gap:4px;
  height:26px
}

.segmented-budget span {
  border-radius:3px;
  flex:1;
  background:#5C83D7
}

.segmented-budget span:nth-child(n/**/+19) {
  background:#EBF0FA
}

.segmented-budget span:nth-child(19) {
  background:linear-gradient(90deg,#5C83D7 28%,#EBF0FA 28%)
}

.plan-remainder {
  display:flex;
  justify-content:space-between;
  gap:10px;
  font-size:10px;
  color:#8396B6;
  margin-top:9px;
  margin-bottom:23px
}

.plan-remainder b {
  color:#526F9F;
  font-weight:400
}

.budget-category {
  margin-top:17px
}

.budget-category>div:first-child {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  margin-bottom:8px;
  font-size:11px
}

.budget-category>div>span {
  display:flex;
  align-items:center;
  gap:7px
}

.budget-category .icon {
  color:#7995C3
}

.budget-category b {
  font-weight:400;
  white-space:nowrap;
  font-size:11px
}

.progress-track.amber>span {
  background:#CEA55F
}

.budget-category p {
  font-size:9px;
  color:#A08660;
  margin-top:7px
}

.feature-sticker {
  color:#5E7FAA;
  font-size:12px;
  line-height:1.55;
  text-align:right;
  margin:18px 3px 0;
  transform:rotate(-3deg);
  font-style:italic
}

.feature-sticker b {
  color:#3E619A;
  font-weight:500
}

.feature-demo-note {
  font-size:9px;
  text-align:left;
  color:#7790B8;
  margin-top:9px
}

.calendar-week,.calendar-days {
  display:grid;
  grid-template-columns:repeat(7,1fr);
  gap:6px
}

.calendar-week {
  font-size:8px;
  color:#93A0B5;
  text-align:center;
  margin-top:25px;
  margin-bottom:10px
}

.calendar-days>span {
  text-align:center;
  font-size:12px;
  padding:6px 0;
  border-radius:6px
}

.calendar-days .faint {
  color:#C4CFE2
}

.calendar-days .marked {
  background:var(--blue);
  color:#fff
}

.calendar-days .secondary {
  background:#D6E5FC;
  color:var(--blue)
}

.calendar-event {
  display:flex;
  align-items:center;
  gap:10px;
  margin-top:14px;
  padding-top:13px;
  border-top:1px solid #EAF0F7
}

.date-badge {
  display:flex;
  align-items:center;
  flex-direction:column;
  background:#EDF3FF;
  color:var(--blue);
  width:33px;
  border-radius:5px;
  font-size:15px;
  line-height:1.1;
  padding:5px 3px
}

.date-badge small {
  font-size:8px;
  margin-top:2px
}

.calendar-event>span:nth-child(2)>b {
  display:block;
  font-size:12px;
  font-weight:500
}

.calendar-event>span:nth-child(2)>small {
  display:block;
  font-size:9px;
  color:#8396B6;
  margin-top:2px
}

.calendar-event>strong {
  margin-left:auto;
  font-weight:500;
  font-size:12px;
  white-space:nowrap
}

.goal-badge {
  font-size:12px;
  padding:4px 7px;
  border-radius:7px;
  background:#EAF2FF;
  color:var(--blue);
  margin-left:auto
}

.goal-illustration {
  margin:10px -10px -12px
}

.goal-illustration>svg {
  height:110px;
  width:100%
}

.savings-card .plan-big-number {
  margin-top:19px
}

.goal-milestone {
  display:flex;
  justify-content:space-between;
  gap:12px;
  margin-top:19px
}

.goal-milestone>span {
  font-size:10px;
  color:#8396B6
}

.goal-milestone b {
  display:block;
  color:#5274AA;
  font-weight:500;
  font-size:15px;
  margin-top:4px
}

.support-features {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:50px;
  margin-top:70px;
  border-top:1px solid var(--line);
  padding-top:35px
}

.support-features article {
  display:grid;
  grid-template-columns:30px 1fr;
  column-gap:17px;
  row-gap:9px;
  align-content:start
}

.support-features .icon {
  color:#7193C9;
  grid-row:1/3
}

.support-features h3 {
  font-size:20px;
  line-height:1.3;
  letter-spacing:-.4px
}

.support-features p {
  font-size:15px;
  line-height:1.6
}

/* Start */
.start {
  background:#F7F9FD;
  padding-top:92px;
  padding-bottom:55px;
  border-top:1px solid #EAF0F8;
  border-bottom:1px solid #EAF0F8
}

.steps {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:66px;
  margin-top:10px
}

.steps article {
  position:relative
}

.step-visual {
  position:relative;
  height:143px;
  display:flex;
  align-items:center;
  justify-content:flex-start;
  margin-bottom:22px
}

.step-index {
  position:absolute;
  top:8px;
  left:0;
  font-size:14px;
  color:#7791BA;
  border:1px solid #D7E1F0;
  width:29px;
  height:29px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#fff
}

.step-file {
  margin-left:70px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:7px;
  padding:15px 17px 13px;
  border:1px solid #CDDDF4;
  border-radius:9px;
  background:#fff;
  width:106px;
  height:128px;
  transform:rotate(-7deg);
  color:var(--blue);
  box-shadow:0 4px 10px #23539706
}

.step-file>span {
  font-size:12px;
  font-weight:500
}

.step-file>small {
  font-size:9px;
  color:#8D9FBC
}

.step-upload {
  margin-left:70px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:11px;
  width:121px;
  height:111px;
  border:1px dashed #9FBBE9;
  border-radius:15px;
  background:#E8F0FD;
  color:#6890CE;
  transform:rotate(5deg);
  font-size:12px
}

.step-ready {
  margin-left:60px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:10px;
  width:151px;
  height:103px;
  border:1px solid #CCDCF4;
  border-radius:13px;
  background:#fff;
  color:var(--blue);
  transform:rotate(-4deg);
  font-size:10px;
  box-shadow:0 4px 10px #23539706
}

.step-connector {
  position:absolute;
  right:-43px;
  top:48px;
  width:135px;
  height:36px;
  color:#9DB4D7
}

.steps h3 {
  font-size:24px;
  margin-bottom:12px
}

.steps p {
  font-size:16px;
  line-height:1.65
}

.steps-bottom {
  border-top:1px solid #E1E8F3;
  margin-top:45px;
  padding-top:25px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:35px
}

.steps-bottom>p {
  font-size:12px;
  max-width:545px;
  line-height:1.8
}

.steps-bottom .link-button {
  font-size:12px
}

.steps-bottom>.btn {
  min-height:50px;
  font-size:15px;
  flex-shrink:0
}

/* Trust */
.privacy-section {
  padding:78px 0 15px
}

.privacy-panel {
  position:relative;
  overflow:hidden;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:90px;
  background:#EDF3FD;
  border:1px solid #E0E9F7;
  border-radius:25px;
  padding:47px 54px;
  align-items:center
}

.privacy-copy {
  position:relative;
  z-index:1
}

.privacy-copy .eyebrow {
  font-size:11px;
  color:#6A88B5;
  margin-bottom:17px
}

.privacy-copy h2 {
  font-size:43px;
  line-height:1.12;
  letter-spacing:-1.1px;
  margin-bottom:18px
}

.privacy-copy>p {
  font-size:17px;
  line-height:1.65
}

.privacy-copy .text-link {
  font-size:13px;
  gap:12px;
  margin-top:15px
}

.privacy-points {
  position:relative;
  z-index:1;
  display:flex;
  flex-direction:column;
  gap:24px
}

.privacy-points>div {
  display:flex;
  gap:16px;
  align-items:flex-start
}

.privacy-points .icon {
  color:#7294CC;
  padding-top:2px
}

.privacy-points b {
  display:block;
  font-weight:500;
  font-size:18px;
  line-height:1.3
}

.privacy-points small {
  display:block;
  color:#7890B1;
  font-size:13px;
  line-height:1.5;
  margin-top:6px
}

.privacy-decoration {
  position:absolute;
  right:-24px;
  bottom:-26px;
  width:175px;
  height:211px;
  color:#CDDCF3;
  transform:rotate(-17deg);
  opacity:.65
}

/* Pricing */
.pricing {
  padding-top:92px;
  padding-bottom:75px
}

.pricing-heading {
  text-align:center;
  margin-bottom:50px
}

.pricing-heading .eyebrow {
  color:#7891B7;
  margin-bottom:19px
}

.pricing-heading h2 {
  font-size:58px
}

.pricing-heading>p {
  font-size:18px;
  line-height:1.65;
  margin-top:22px
}

.pricing-cards {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:20px
}

.price-card {
  position:relative;
  display:flex;
  flex-direction:column;
  padding:33px 32px 23px;
  border:1px solid #DCE5F3;
  border-radius:20px;
  background:#fff
}

.price-card-top>span {
  display:block;
  font-size:12px;
  color:#8499B9;
  margin-bottom:8px
}

.price-card h3 {
  font-size:27px;
  letter-spacing:-.65px;
  font-weight:500
}

.price {
  font-size:71px;
  font-weight:500;
  letter-spacing:-2.5px;
  color:var(--navy);
  line-height:1.1;
  margin:25px 0 4px
}

.price>span {
  font-size:34px;
  letter-spacing:-1px;
  color:#7994C1
}

.price-term {
  font-size:13px;
  color:#6A83AA;
  min-height:20px
}

.price-context {
  font-size:16px;
  line-height:1.55;
  color:#6D81A1;
  margin:25px 0 29px
}

.price-card>.btn {
  width:100%;
  margin-top:auto;
  font-size:16px;
  padding-inline:15px;
  min-height:55px;
  justify-content:space-between
}

.price-subnote {
  text-align:center;
  font-size:10px;
  color:#778CAC;
  margin-top:13px;
  min-height:17px
}

.price-card.featured {
  background:#2D5DCD;
  color:#fff;
  border-color:#2D5DCD
}

.price-badge {
  position:absolute;
  top:-13px;
  left:29px;
  border:1px solid #C1D6FF;
  background:#E1EBFE;
  color:#2353BD;
  padding:5px 12px;
  border-radius:7px;
  font-size:11px;
  font-weight:500;
  transform:rotate(-3deg)
}

.featured .price-card-top>span {
  color:#BECEF0
}

.featured .price {
  color:#fff
}

.featured .price>span {
  color:#B8CDF5
}

.featured .price-term {
  color:#C4D6FB
}

.featured .price-context {
  color:#D4E1FC
}

.featured .price-subnote {
  color:#BED2F9
}

.included {
  display:flex;
  justify-content:center;
  align-items:center;
  gap:27px;
  border-bottom:1px solid var(--line);
  padding:26px 0 23px;
  font-size:14px;
  flex-wrap:wrap
}

.included>span {
  color:#8B9AAF;
  font-size:12px
}

.included>p {
  display:flex;
  align-items:center;
  gap:7px;
  font-size:13px;
  color:#526D97
}

.included .icon {
  color:#7F9CC8
}

.pricing-footnote {
  font-size:11px;
  line-height:1.75;
  color:#8798B1;
  text-align:center;
  margin-top:23px
}

/* FAQ */
.faq {
  padding-top:60px;
  padding-bottom:90px
}

.faq-grid {
  display:grid;
  grid-template-columns:.8fr 1.2fr;
  gap:100px
}

.faq-heading {
  position:relative
}

.faq-heading .eyebrow {
  color:#7B95BB;
  margin-bottom:18px
}

.faq-heading h2 {
  font-size:60px
}

.faq-heading>p {
  font-size:18px;
  line-height:1.65;
  margin-top:21px
}

.faq-doodle {
  position:absolute;
  top:66px;
  right:30px;
  font-size:119px;
  line-height:1;
  font-weight:300;
  color:#D0E0F8;
  transform:rotate(14deg)
}

.faq-list details {
  border-top:1px solid #DCE5F1
}

.faq-list details:last-child {
  border-bottom:1px solid #DCE5F1
}

.faq-list summary {
  list-style:none;
  display:flex;
  gap:25px;
  align-items:center;
  justify-content:space-between;
  padding:23px 0;
  font-size:19px;
  line-height:1.35;
  font-weight:500;
  letter-spacing:-.2px
}

.faq-list summary::-webkit-details-marker {
  display:none
}

.faq-plus {
  width:29px;
  height:29px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#F2F6FE;
  border-radius:50%;
  color:#7497D3;
  flex-shrink:0;
  transition:transform .2s
}

.faq-list details[open] .faq-plus {
  transform:rotate(45deg)
}

.faq-list summary:hover {
  color:var(--blue)
}

.faq-answer {
  padding:0 40px 24px 0
}

.faq-answer p {
  font-size:16px;
  line-height:1.7
}

.faq-answer a {
  text-decoration:underline;
  text-underline-offset:3px;
  color:var(--blue)
}

.faq-answer .link-button {
  font-size:16px;
  display:inline;
  margin-top:8px
}

.faq-answer .link-button>.icon {
  display:inline-block
}

/* Final close */
.closing-section {
  padding:0 0 64px
}

.closing-panel {
  position:relative;
  overflow:hidden;
  display:grid;
  grid-template-columns:1.25fr .75fr;
  gap:20px;
  background:#E7EFFD;
  border:1px solid #DAE6FA;
  border-radius:27px;
  padding:59px 56px 54px;
  align-items:center
}

.closing-text {
  position:relative;
  z-index:2
}

.closing-text .eyebrow {
  font-size:11px;
  color:#7390BA;
  margin-bottom:22px
}

.closing-text h2 {
  font-size:55px;
  line-height:1.09;
  letter-spacing:-1.7px
}

.closing-text h2>span {
  color:var(--blue)
}

.closing-text>p {
  font-size:17px;
  color:#6E87AB;
  line-height:1.65;
  margin-top:18px;
  margin-bottom:28px
}

.closing-note {
  font-size:11px;
  color:#8199BC;
  display:block;
  margin-top:12px
}

.closing-illustration {
  position:relative;
  align-self:stretch;
  min-height:270px;
  display:flex;
  align-items:flex-end;
  justify-content:center;
  flex-direction:column;
  z-index:1
}

.closing-orbit {
  width:318px;
  height:318px;
  background:#D5E3FA;
  position:absolute;
  bottom:-17px;
  right:-19px;
  border:1px solid #CDDCF6;
  border-radius:50%
}

.closing-orbit::before {
  content:"";
  position:absolute;
  border:1px solid #CCDCF6;
  inset:-24px;
  border-radius:50%
}

.closing-illustration>.mascot-svg {
  width:287px;
  position:relative;
  z-index:1;
  margin-top:49px;
  margin-right:-4px
}

.capy-bubble {
  position:absolute;
  top:-5px;
  right:9px;
  z-index:2;
  background:#fff;
  border:1px solid #D4E1F5;
  border-radius:18px 18px 18px 0;
  padding:13px 24px;
  font-size:20px;
  line-height:1.3;
  transform:rotate(5deg);
  box-shadow:0 6px 14px #24508B08
}

.closing-caption {
  font-size:10px;
  color:#7C9BC9;
  position:relative;
  z-index:1;
  align-self:flex-end;
  padding-right:16px;
  font-style:italic;
  margin-top:2px
}































.mobile-sticky {
  display:none
}

/* Dialogs: native focus containment and Escape behavior */
.site-dialog {
  padding:0;
  max-width:min(620px,calc(100% - 32px));
  width:620px;
  border:1px solid #D6E1F3;
  border-radius:22px;
  background:#fff;
  color:var(--navy);
  box-shadow:0 30px 120px #16326240;
  max-height:calc(100dvh - 48px);
  font:inherit
}

.site-dialog::backdrop {
  background:#10284D99;
  backdrop-filter:blur(5px)
}

.dialog-inner {
  position:relative;
  padding:40px
}

.dialog-close {
  position:absolute;
  top:14px;
  right:14px;
  display:flex;
  align-items:center;
  justify-content:center;
  width:42px;
  height:42px;
  border-radius:50%;
  background:#EFF4FC
}

.dialog-close:hover {
  background:#E2EBFA
}

.dialog-inner>.eyebrow {
  font-size:11px;
  color:#6C8EC0;
  margin-bottom:15px;
  padding-right:30px
}

.dialog-inner>h2 {
  font-size:36px;
  line-height:1.15;
  letter-spacing:-1px;
  margin-bottom:19px
}

.dialog-inner>p {
  font-size:16px;
  line-height:1.6;
  margin-bottom:19px
}

.bank-table {
  margin:18px 0;
  border-top:1px solid var(--line)
}

.bank-table>div {
  display:grid;
  grid-template-columns:120px 1fr;
  gap:12px;
  padding:14px 0;
  border-bottom:1px solid var(--line);
  font-size:14px
}

.bank-table b {
  font-weight:500
}

.bank-table span {
  color:var(--muted)
}

.dialog-inner>p.dialog-note {
  font-size:13px;
  line-height:1.7
}

.dialog-inner>.btn {
  margin-top:5px
}



/* DLE informational messages, deliberately scoped to the new landing */
.capybro-cms-info:empty {
  display:none
}

.capybro-cms-info {
  width:min(var(--container),calc(100% - 48px));
  margin:0 auto
}

.capybro-cms-info:not(:empty) {
  padding:15px 0
}

.capybro-cms-info a {
  text-decoration:underline
}

.capybro-cms-info .error,.capybro-cms-info .errorbox {
  padding:15px;
  border:1px solid #E4C9C4;
  background:#FFF6F3;
  border-radius:10px
}

@media(min-width:1600px) {
  :root {
    --container:1320px
  }
  .hero-grid {
    grid-template-columns:.91fr 1.09fr;
    padding-top:83px;
    padding-bottom:78px
  }
  .hero h1 {
    font-size:102px
  }
  .hero-description {
    font-size:21px
  }
  .hero-art {
    padding-right:15px
  }
  .hero-orbit {
    left:32px
  }
  .product-window {
    max-width:588px
  }
  .window-content {
    padding:25px 30px
  }
  .demo-pane {
    min-height:202px
  }
  .donut {
    width:158px;
    height:158px
  }
  .donut::before {
    width:112px;
    height:112px
  }
  .chart-legend>div {
    font-size:12px
  }
  .chart-legend b {
    font-size:13px
  }
  .window-head h2 {
    font-size:29px
  }
}

@media(max-width:1200px) {
  .container {
    width:calc(100% - 64px)
  }
  
  
  
  .brand-type {
    font-size:23px
  }
  .beta {
    display:none
  }
  .hero-grid {
    gap:35px;
    grid-template-columns:.86fr 1.14fr
  }
  .hero h1 {
    font-size:83px
  }
  .hero-copy .eyebrow {
    font-size:10px;
    letter-spacing:.9px
  }
  .hero-description {
    font-size:18px
  }
  .hero-trust {
    gap:12px;
    font-size:10px
  }
  .hero-ctas>.btn {
    font-size:16px;
    padding-inline:20px
  }
  .window-content {
    padding:20px 23px
  }
  .category-chart {
    gap:19px
  }
  .donut {
    width:137px;
    height:137px
  }
  .donut::before {
    width:96px;
    height:96px
  }
  .donut b {
    font-size:23px
  }
  .chart-legend {
    gap:13px
  }
  .bank-strip {
    gap:20px
  }
  .bank-names {
    gap:17px
  }
  .bank-names>span {
    font-size:17px
  }
  .bank-names small {
    font-size:10px
  }
  .bank-intro {
    min-width:95px
  }
  .bank-format {
    display:none
  }
  .section-heading-row>p {
    font-size:16px;
    max-width:315px
  }
  .needs .section-heading-row>h2 {
    font-size:42px
  }
  .needs-grid {
    gap:28px
  }
  .needs-grid article {
    padding-right:23px
  }
  .needs-grid h3 {
    font-size:21px
  }
  .needs-grid .text-link {
    font-size:12px
  }
  .meaning-grid {
    gap:65px
  }
  .meaning h2 {
    font-size:65px
  }
  .feature-stage {
    gap:40px
  }
  .feature-option {
    padding-inline:18px;
    gap:16px
  }
  .feature-option strong {
    font-size:23px
  }
  .feature-option>span>span {
    font-size:15px
  }
  .feature-visual {
    padding-inline:26px
  }
  .plan-card {
    padding:23px 22px
  }
  .support-features {
    gap:30px
  }
  .steps {
    gap:40px
  }
  .step-connector {
    width:104px;
    right:-23px
  }
  .privacy-panel {
    gap:45px;
    padding-inline:43px
  }
  .price-card {
    padding-inline:25px
  }
  .price-context {
    font-size:15px
  }
  .faq-grid {
    gap:80px
  }
  .faq-doodle {
    right:7px
  }
  .closing-panel {
    padding-inline:42px
  }
  .closing-text h2 {
    font-size:50px
  }
  .closing-text>p {
    font-size:15px
  }
  
  
}

@media(max-width:1023px) {
  .container {
    width:calc(100% - 48px)
  }
  
  
  
  .hero-grid {
    gap:27px;
    grid-template-columns:.85fr 1.15fr;
    padding-top:49px;
    padding-bottom:53px
  }
  .hero h1 {
    font-size:76px;
    letter-spacing:-3px
  }
  .hero-description {
    font-size:17px
  }
  .desktop-br {
    display:none
  }
  .hero-ctas>.btn {
    gap:16px;
    font-size:15px
  }
  .hero-copy .eyebrow {
    font-size:9px;
    gap:8px
  }
  .hero-trust {
    flex-direction:column;
    gap:7px;
    font-size:11px
  }
  .hero-art {
    padding-left:0;
    padding-top:36px
  }
  .hand-note {
    right:71px;
    font-size:17px;
    top:-9px
  }
  .window-content {
    padding:17px 19px
  }
  .window-top {
    padding-inline:19px;
    height:46px
  }
  .overview-metric strong {
    font-size:39px
  }
  .overview-metric strong small {
    font-size:29px
  }
  .window-head h2 {
    font-size:25px
  }
  .income-row {
    gap:12px;
    font-size:9px
  }
  .income-row b {
    font-size:11px;
    margin-left:0
  }
  .category-chart {
    gap:15px
  }
  .donut {
    width:122px;
    height:122px
  }
  .donut::before {
    width:86px;
    height:86px
  }
  .donut b {
    font-size:22px
  }
  .donut small {
    font-size:8px
  }
  .donut>div>span {
    font-size:9px
  }
  .chart-legend>div {
    font-size:10px;
    gap:5px
  }
  .chart-legend b {
    font-size:11px
  }
  .demo-pane {
    min-height:171px;
    padding-top:19px
  }
  .demo-budget-head {
    font-size:10px
  }
  .demo-helper {
    font-size:10px
  }
  .demo-budget-head {
    margin-top:0
  }
  .budget-remaining {
    margin-bottom:14px
  }
  .floating-insight {
    left:-22px;
    bottom:30px;
    padding:10px 13px;
    gap:9px
  }
  .floating-insight b {
    font-size:10px
  }
  .floating-insight>div>span {
    font-size:9px
  }
  .hero-mascot {
    width:151px;
    right:-19px;
    bottom:-20px
  }
  .demo-caption {
    left:7px;
    font-size:10px;
    bottom:0
  }
  .hero-orbit {
    width:510px;
    height:510px;
    left:-12px
  }
  .bank-names>span {
    font-size:16px
  }
  .bank-names {
    gap:16px
  }
  .bank-names small {
    display:none
  }
  .bank-intro {
    font-size:11px;
    min-width:90px
  }
  .section {
    padding:78px 0
  }
  .section-heading-row {
    gap:28px;
    margin-bottom:42px
  }
  h2 {
    font-size:46px
  }
  .section-heading-row>p {
    font-size:15px;
    max-width:290px
  }
  .needs .section-heading-row>h2 {
    font-size:37px
  }
  .needs-grid {
    gap:23px
  }
  .needs-grid h3 {
    font-size:19px
  }
  .needs-grid p {
    font-size:14px
  }
  .needs-grid article {
    padding-right:20px
  }
  .needs-grid .text-link {
    gap:8px;
    font-size:11px
  }
  .meaning {
    padding:68px 0 60px
  }
  .meaning-grid {
    gap:42px
  }
  .meaning h2 {
    font-size:57px
  }
  .meaning-copy>p {
    font-size:16px
  }
  .meaning-note {
    font-size:11px
  }
  .meaning-copy .eyebrow {
    font-size:9px
  }
  .receipt {
    padding:23px 22px
  }
  .receipt-heading {
    font-size:12px
  }
  .transaction {
    gap:10px;
    min-height:75px
  }
  .transaction b {
    font-size:13px
  }
  .transaction small {
    font-size:10px
  }
  .transaction strong {
    font-size:15px
  }
  .transaction-icon {
    width:32px;
    height:32px
  }
  .receipt-total strong {
    font-size:56px
  }
  .receipt-stamp {
    font-size:10px;
    padding:11px 13px
  }
  .receipt-stamp .icon {
    width:15px
  }
  .receipt-formula {
    font-size:10px
  }
  .example-toggle button {
    font-size:13px
  }
  .feature-stage {
    gap:28px;
    grid-template-columns:.94fr 1.06fr
  }
  .feature-option {
    padding:24px 16px;
    gap:11px
  }
  .feature-option strong {
    font-size:21px
  }
  .feature-option>span>span {
    font-size:14px
  }
  .feature-option .feature-number {
    font-size:10px
  }
  .feature-visual {
    padding:24px 21px 17px;
    min-height:449px
  }
  .visual-label {
    font-size:10px
  }
  .plan-card {
    padding:21px 19px;
    min-height:314px
  }
  .plan-head>span>b {
    font-size:14px
  }
  .plan-head>span>small {
    font-size:10px
  }
  .plan-head {
    gap:9px
  }
  .plan-head .mini-icon {
    height:38px;
    width:38px
  }
  .plan-big-number {
    font-size:31px
  }
  .plan-big-number small {
    font-size:13px
  }
  .budget-category b {
    font-size:9px
  }
  .budget-category>div:first-child {
    font-size:10px
  }
  .budget-category>div>span {
    gap:4px
  }
  .budget-category .icon {
    width:15px
  }
  .plan-remainder {
    font-size:9px;
    gap:5px
  }
  .budget-category p {
    font-size:9px;
    line-height:1.45
  }
  .feature-sticker {
    font-size:10px
  }
  .support-features {
    margin-top:55px;
    gap:24px
  }
  .support-features h3 {
    font-size:17px
  }
  .support-features p {
    font-size:14px
  }
  .support-features article {
    column-gap:12px;
    grid-template-columns:25px 1fr
  }
  .support-features .icon {
    width:25px
  }
  .steps {
    gap:28px
  }
  .steps h3 {
    font-size:21px
  }
  .steps p {
    font-size:14px
  }
  .step-connector {
    width:75px;
    right:-15px;
    top:58px
  }
  .step-file,.step-upload {
    margin-left:50px
  }
  .step-ready {
    margin-left:40px
  }
  .steps-bottom>p {
    font-size:11px;
    max-width:440px
  }
  .steps-bottom .link-button {
    font-size:11px
  }
  .steps-bottom>.btn {
    font-size:13px;
    gap:15px;
    padding-inline:17px
  }
  .privacy-section {
    padding-top:60px
  }
  .privacy-panel {
    padding:40px 32px;
    gap:36px
  }
  .privacy-copy h2 {
    font-size:37px
  }
  .privacy-copy>p {
    font-size:15px
  }
  .privacy-copy .text-link {
    font-size:11px
  }
  .privacy-points b {
    font-size:16px
  }
  .privacy-points small {
    font-size:11px
  }
  .privacy-points>div {
    gap:12px
  }
  .pricing-heading h2 {
    font-size:52px
  }
  .price-card {
    padding:28px 22px 23px
  }
  .price {
    font-size:62px
  }
  .price-term {
    font-size:11px
  }
  .price-card>.btn {
    font-size:13px;
    gap:12px
  }
  .price-context {
    font-size:14px
  }
  .price-subnote {
    font-size:9px
  }
  .price-badge {
    font-size:10px
  }
  .included {
    gap:20px
  }
  .included>p {
    font-size:11px
  }
  .included>span {
    font-size:10px
  }
  .faq-grid {
    gap:65px;
    grid-template-columns:.73fr 1.27fr
  }
  .faq-heading h2 {
    font-size:54px
  }
  .faq-heading>p {
    font-size:16px
  }
  .faq-doodle {
    right:-17px;
    font-size:100px
  }
  .faq-list summary {
    font-size:17px;
    padding-block:22px
  }
  .faq-answer p {
    font-size:15px
  }
  .closing-text h2 {
    font-size:43px
  }
  .closing-panel {
    padding:44px 33px;
    grid-template-columns:1.3fr .7fr
  }
  .closing-text .eyebrow {
    font-size:9px
  }
  .closing-text>.btn {
    font-size:15px;
    gap:17px;
    padding-inline:19px;
    min-height:55px
  }
  .closing-illustration>.mascot-svg {
    width:239px;
    max-width:120%
  }
  .closing-orbit {
    width:259px;
    height:259px;
    right:-19px
  }
  .capy-bubble {
    font-size:18px;
    padding:10px 19px;
    top:4px;
    right:-4px
  }
  .closing-caption {
    font-size:8px;
    padding-right:0
  }
  
  
  
  
  
}

@media(max-width:767px) {
  html {
    scroll-padding-top:84px
  }
  .container {
    width:calc(100% - 40px)
  }
  
  
  .brand-mark {
    width:37px;
    height:37px;
    border-radius:11px
  }
  .brand-mark>svg {
    width:35px;
    height:35px
  }
  .brand-type {
    font-size:22px
  }
  .beta {
    display:block;
    font-size:9px;
    margin-top:3px
  }
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  .hero-grid {
    grid-template-columns:1fr;
    gap:27px;
    padding-top:38px;
    padding-bottom:43px;
    max-width:600px
  }
  .hero-copy {
    padding-bottom:0
  }
  .hero-copy .eyebrow {
    font-size:10px;
    letter-spacing:.85px;
    margin-bottom:23px
  }
  .hero h1 {
    font-size:79px;
    line-height:.99;
    letter-spacing:-3px;
    margin-bottom:28px
  }
  .hero h1>br:nth-child(2) {
    display:none
  }
  .hero h1 .hand-underline {
    margin-left:14px
  }
  .hero-description {
    font-size:18px;
    line-height:1.55;
    max-width:490px
  }
  .hero-description>br {
    display:none
  }
  .hero-ctas {
    margin-top:25px;
    gap:11px;
    align-items:flex-start
  }
  .hero-ctas>.btn {
    font-size:17px;
    min-height:58px;
    gap:25px;
    padding-inline:22px
  }
  .hero-demo-link {
    font-size:15px
  }
  .hero-trust {
    flex-direction:row;
    gap:20px;
    font-size:11px;
    margin-top:14px
  }
  .hero-art {
    width:100%;
    padding:47px 0 62px;
    margin-top:13px;
    max-width:532px;
    margin-inline:auto
  }
  .hand-note {
    top:8px;
    right:96px;
    font-size:18px
  }
  .hand-note svg {
    right:-48px;
    width:68px;
    top:7px
  }
  .product-window {
    max-width:none
  }
  .window-top {
    padding-inline:22px
  }
  .window-content {
    padding:22px 25px
  }
  .window-head h2 {
    font-size:27px
  }
  .month-select select {
    font-size:12px;
    min-height:40px
  }
  .overview-metric {
    margin-top:20px
  }
  .overview-metric strong {
    font-size:45px
  }
  .overview-metric strong small {
    font-size:32px
  }
  .overview-metric>div>span {
    font-size:11px
  }
  .metric-icon {
    height:43px;
    width:43px;
    border-radius:12px
  }
  .income-row {
    font-size:11px;
    gap:20px;
    margin-top:13px
  }
  .income-row b {
    font-size:12px;
    margin-left:2px
  }
  .category-chart {
    gap:25px
  }
  .donut {
    width:148px;
    height:148px
  }
  .donut::before {
    width:105px;
    height:105px
  }
  .donut b {
    font-size:25px
  }
  .donut small {
    font-size:9px
  }
  .chart-legend {
    gap:13px
  }
  .chart-legend>div {
    font-size:11px;
    gap:6px
  }
  .chart-legend b {
    font-size:12px
  }
  .demo-pane {
    min-height:196px;
    padding:24px 0 19px
  }
  .next-payment {
    padding:12px 14px
  }
  .floating-insight {
    bottom:36px;
    left:-6px;
    padding:12px 14px;
    max-width:315px;
    gap:9px
  }
  .floating-insight b {
    font-size:11px
  }
  .floating-insight>div>span {
    font-size:10px
  }
  .hero-mascot {
    width:154px;
    right:-18px;
    bottom:-11px
  }
  .demo-caption {
    font-size:10px;
    left:14px;
    bottom:1px
  }
  .hero-orbit {
    width:570px;
    height:570px;
    top:11px;
    left:-30px
  }
  .demo-budget-head {
    font-size:12px
  }
  .budget-remaining {
    font-size:11px;
    margin-bottom:22px
  }
  .mini-budget {
    font-size:11px
  }
  .demo-helper {
    font-size:11px;
    margin-top:16px
  }
  .demo-goal-title b {
    font-size:14px
  }
  .demo-goal-title small {
    font-size:11px
  }
  .demo-goal-title>strong {
    font-size:17px
  }
  .goal-total {
    margin-top:20px
  }
  .goal-total b {
    font-size:27px
  }
  .goal-total span {
    font-size:11px
  }
  .bank-strip {
    flex-wrap:wrap;
    padding:27px 0;
    gap:16px;
    max-width:600px
  }
  .bank-intro {
    font-size:13px;
    min-width:0;
    width:100%;
    display:flex;
    gap:4px;
    align-items:center
  }
  .bank-intro br {
    display:none
  }
  .bank-names {
    width:100%;
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:18px 17px;
    align-items:center
  }
  .bank-names>span {
    font-size:18px;
    gap:5px
  }
  .bank-names small {
    display:inline;
    font-size:10px
  }
  .bank-names .bank-alpha {
    font-size:15px
  }
  .bank-t i {
    width:22px;
    height:24px;
    font-size:16px
  }
  .bank-sber i {
    width:23px;
    height:23px;
    font-size:15px
  }
  .bank-alpha i {
    font-size:26px;
    height:29px
  }
  .bank-vtb i {
    font-size:32px
  }
  .bank-format {
    display:inline-flex;
    font-size:11px;
    min-height:36px;
    margin:0
  }
  .section {
    padding:65px 0
  }
  h2 {
    font-size:40px;
    letter-spacing:-1.15px;
    line-height:1.13
  }
  .section-topline {
    margin-bottom:24px;
    align-items:flex-start;
    gap:15px
  }
  .section-topline>.eyebrow {
    font-size:10px;
    letter-spacing:.8px
  }
  .section-index {
    font-size:9px;
    white-space:nowrap;
    padding-top:1px
  }
  .section-heading-row {
    display:block;
    margin-bottom:32px
  }
  .section-heading-row>p {
    font-size:16px;
    max-width:500px;
    padding:0;
    margin-top:20px
  }
  .section-heading-row>p>br {
    display:none
  }
  .needs .section-heading-row>h2 {
    font-size:36px;
    letter-spacing:-1px;
    line-height:1.15
  }
  .needs-grid {
    grid-template-columns:1fr;
    gap:0
  }
  .needs-grid article {
    padding:25px 0;
    border-right:0;
    border-top:1px solid var(--line);
    display:grid;
    grid-template-columns:30px 1fr;
    gap:12px
  }
  .needs-grid article:last-child {
    padding-bottom:0
  }
  .question-number {
    grid-row:1/4;
    margin:4px 0 0;
    font-size:12px
  }
  .needs-grid h3 {
    font-size:23px;
    line-height:1.3;
    letter-spacing:-.5px;
    margin:0
  }
  .needs-grid p {
    font-size:16px;
    max-width:480px;
    margin:0
  }
  .needs-grid .text-link {
    font-size:14px;
    margin:0;
    justify-self:start;
    min-height:40px;
    gap:12px
  }
  .meaning {
    padding:61px 0 43px
  }
  .meaning-grid {
    grid-template-columns:1fr;
    gap:34px;
    max-width:600px
  }
  .meaning-copy .eyebrow {
    font-size:10px;
    letter-spacing:.8px;
    margin-bottom:22px
  }
  .meaning h2 {
    font-size:59px;
    line-height:1.01;
    letter-spacing:-2px;
    margin-bottom:22px
  }
  .meaning h2>br:nth-child(2) {
    display:none
  }
  .meaning h2>span {
    margin-left:12px
  }
  .meaning-copy>p {
    font-size:17px;
    line-height:1.6;
    max-width:510px;
    margin-bottom:13px
  }
  .meaning-note {
    max-width:510px;
    font-size:12px;
    margin-top:20px;
    padding-top:19px
  }
  .meaning-note br {
    display:none
  }
  .meaning-example {
    max-width:540px;
    width:100%;
    margin-inline:auto
  }
  .example-toggle {
    margin-bottom:15px
  }
  .example-toggle button {
    font-size:14px;
    min-height:44px
  }
  .receipt {
    padding:22px 24px;
    border-radius:16px
  }
  .receipt-heading {
    font-size:14px;
    padding-bottom:17px
  }
  .transaction {
    min-height:83px;
    gap:11px
  }
  .transaction b {
    font-size:15px
  }
  .transaction small {
    font-size:11px
  }
  .transaction strong {
    font-size:17px
  }
  .transaction-icon {
    height:37px;
    width:37px
  }
  .receipt-total {
    padding-top:20px
  }
  .receipt-total strong {
    font-size:61px
  }
  .receipt-stamp {
    font-size:12px;
    padding:12px 16px
  }
  .receipt-stamp .icon {
    width:19px
  }
  .receipt-formula {
    font-size:11px;
    min-height:36px
  }
  .example-disclaimer {
    font-size:10px
  }
  .feature-stage {
    grid-template-columns:1fr;
    gap:21px
  }
  .feature-options {
    gap:5px
  }
  .feature-option {
    padding:23px 16px;
    gap:15px
  }
  .feature-option strong {
    font-size:23px
  }
  .feature-option>span>span {
    font-size:15px;
    max-width:none
  }
  .feature-number {
    font-size:11px!important
  }
  .feature-option>.icon {
    height:20px;
    width:20px
  }
  .feature-visual {
    padding:25px 28px 20px;
    min-height:445px;
    width:100%;
    max-width:540px;
    justify-self:center;
    border-radius:21px
  }
  .visual-label {
    font-size:11px;
    margin-bottom:17px
  }
  .plan-card {
    padding:24px;
    min-height:330px
  }
  .plan-head>span>b {
    font-size:16px
  }
  .plan-head>span>small {
    font-size:11px
  }
  .plan-big-number {
    font-size:37px;
    margin-top:27px
  }
  .plan-big-number small {
    font-size:15px
  }
  .plan-remainder {
    font-size:10px;
    margin-top:10px
  }
  .budget-category>div:first-child {
    font-size:11px
  }
  .budget-category b {
    font-size:11px
  }
  .budget-category p {
    font-size:10px
  }
  .budget-category .icon {
    width:17px
  }
  .budget-category>div>span {
    gap:6px
  }
  .feature-sticker {
    font-size:12px;
    margin-top:17px
  }
  .feature-demo-note {
    font-size:9px;
    margin-top:14px
  }
  .calendar-week {
    font-size:9px
  }
  .calendar-days>span {
    font-size:13px
  }
  .calendar-event {
    gap:11px
  }
  .calendar-event>span:nth-child(2)>b {
    font-size:13px
  }
  .calendar-event>span:nth-child(2)>small {
    font-size:10px
  }
  .calendar-event>strong {
    font-size:13px
  }
  .goal-milestone>span {
    font-size:10px
  }
  .goal-milestone b {
    font-size:16px
  }
  .support-features {
    grid-template-columns:1fr;
    gap:29px;
    margin-top:35px;
    padding-top:30px
  }
  .support-features article {
    grid-template-columns:29px 1fr;
    column-gap:18px;
    row-gap:7px
  }
  .support-features .icon {
    width:29px
  }
  .support-features h3 {
    font-size:21px
  }
  .support-features p {
    font-size:16px;
    max-width:490px
  }
  .steps {
    grid-template-columns:1fr;
    gap:26px;
    margin-top:10px
  }
  .steps article {
    display:grid;
    grid-template-columns:125px 1fr;
    column-gap:20px;
    align-content:center;
    align-items:center
  }
  .step-visual {
    grid-row:1/3;
    height:132px;
    margin:0;
    justify-content:center
  }
  .step-index {
    left:0;
    top:0;
    z-index:1;
    width:25px;
    height:25px;
    font-size:12px
  }
  .step-file {
    margin:0 0 0 13px;
    width:82px;
    height:104px;
    padding:13px 12px;
    gap:5px
  }
  .step-file>.icon {
    width:28px;
    height:28px
  }
  .step-file>span {
    font-size:10px
  }
  .step-file>small {
    font-size:8px
  }
  .step-upload {
    margin:0 0 0 8px;
    width:97px;
    height:98px;
    font-size:11px
  }
  .step-ready {
    margin:0 0 0 8px;
    width:106px;
    height:88px;
    font-size:8px;
    gap:6px
  }
  .step-connector {
    display:none
  }
  .steps h3 {
    font-size:22px;
    margin:0 0 9px;
    align-self:end
  }
  .steps p {
    font-size:15px;
    align-self:start;
    line-height:1.6
  }
  .steps p br {
    display:none
  }
  .steps-bottom {
    margin-top:29px;
    padding-top:22px;
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:18px
  }
  .steps-bottom>p {
    font-size:12px;
    line-height:1.7
  }
  .steps-bottom .link-button {
    font-size:12px
  }
  .steps-bottom>.btn {
    font-size:15px;
    min-height:53px;
    gap:20px
  }
  .privacy-section {
    padding:50px 0 5px
  }
  .privacy-panel {
    grid-template-columns:1fr;
    gap:32px;
    padding:31px 26px;
    border-radius:20px
  }
  .privacy-copy .eyebrow {
    font-size:10px;
    letter-spacing:.8px
  }
  .privacy-copy h2 {
    font-size:38px;
    letter-spacing:-1px;
    line-height:1.1;
    margin-bottom:18px
  }
  .privacy-copy>p {
    font-size:17px
  }
  .privacy-copy .text-link {
    font-size:12px;
    gap:8px;
    line-height:1.5;
    margin-top:15px
  }
  .privacy-points {
    border-top:1px solid #D9E4F5;
    padding-top:28px;
    gap:25px
  }
  .privacy-points>div {
    gap:14px
  }
  .privacy-points b {
    font-size:18px
  }
  .privacy-points small {
    font-size:13px
  }
  .privacy-decoration {
    width:170px;
    right:-30px;
    bottom:-24px
  }
  .pricing-heading {
    margin-bottom:36px
  }
  .pricing-heading .eyebrow {
    font-size:10px;
    margin-bottom:19px
  }
  .pricing-heading h2 {
    font-size:43px
  }
  .pricing-heading>p {
    font-size:16px;
    margin-top:20px
  }
  .pricing-heading>p>br {
    display:none
  }
  .pricing-cards {
    grid-template-columns:1fr;
    gap:19px;
    max-width:540px;
    margin-inline:auto
  }
  .price-card {
    padding:26px 28px 23px;
    display:grid;
    grid-template-columns:1fr auto;
    gap:0 15px;
    border-radius:18px
  }
  .price-card-top {
    grid-column:1;
    grid-row:1/3;
    align-self:center
  }
  .price-card h3 {
    font-size:27px
  }
  .price-card-top>span {
    font-size:11px;
    margin-bottom:7px
  }
  .price {
    grid-column:2;
    grid-row:1;
    font-size:57px;
    margin:0;
    text-align:right;
    letter-spacing:-1.8px
  }
  .price>span {
    font-size:27px
  }
  .price-term {
    grid-column:2;
    grid-row:2;
    font-size:10px;
    text-align:right
  }
  .price-context {
    grid-column:1/3;
    font-size:15px;
    margin:22px 0 21px;
    line-height:1.5
  }
  .price-context>br {
    display:none
  }
  .price-card>.btn {
    grid-column:1/3;
    font-size:16px;
    padding:13px 20px;
    min-height:54px;
    justify-content:space-between
  }
  .price-subnote {
    grid-column:1/3;
    font-size:11px;
    min-height:0;
    margin-top:12px
  }
  .price-card.featured {
    margin-top:9px;
    padding-top:30px
  }
  .price-badge {
    font-size:11px;
    top:-14px;
    left:26px
  }
  .included {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:13px 16px;
    padding:23px 0
  }
  .included>span {
    font-size:12px
  }
  .included>p {
    font-size:12px;
    gap:6px
  }
  .pricing-footnote {
    font-size:11px;
    line-height:1.75;
    margin-top:20px
  }
  .faq {
    padding-top:5px;
    padding-bottom:59px
  }
  .faq-grid {
    grid-template-columns:1fr;
    gap:26px
  }
  .faq-heading .eyebrow {
    font-size:10px;
    letter-spacing:.9px;
    margin-bottom:18px
  }
  .faq-heading h2 {
    font-size:44px;
    line-height:1.05;
    letter-spacing:-1.2px
  }
  .faq-heading h2>br {
    display:none
  }
  .faq-heading>p {
    font-size:16px;
    margin-top:16px;
    max-width:280px
  }
  .faq-heading>p>br {
    display:none
  }
  .faq-doodle {
    display:none
  }
  .faq-list summary {
    font-size:18px;
    line-height:1.35;
    padding:21px 0;
    gap:18px
  }
  .faq-answer {
    padding:0 25px 23px 0
  }
  .faq-answer p {
    font-size:16px;
    line-height:1.65
  }
  .faq-answer .link-button {
    font-size:16px
  }
  .closing-section {
    padding-bottom:37px
  }
  .closing-panel {
    grid-template-columns:1fr;
    padding:31px 25px 22px;
    border-radius:20px;
    gap:15px
  }
  .closing-text .eyebrow {
    font-size:9px;
    letter-spacing:.65px;
    margin-bottom:23px
  }
  .closing-text h2 {
    font-size:42px;
    line-height:1.09;
    letter-spacing:-1.3px
  }
  .closing-text>p {
    font-size:16px;
    line-height:1.6;
    margin-top:20px;
    margin-bottom:23px
  }
  .closing-text>.btn {
    font-size:15px;
    min-height:55px;
    padding:14px 17px;
    gap:16px
  }
  .closing-note {
    font-size:10px;
    margin-top:12px
  }
  .closing-illustration {
    min-height:192px;
    margin-top:0;
    justify-content:flex-end;
    align-items:flex-end
  }
  .closing-illustration>.mascot-svg {
    width:196px;
    margin:0 4px 0 0;
    max-width:100%
  }
  .capy-bubble {
    font-size:16px;
    padding:11px 19px;
    top:16px;
    left:8px;
    right:auto;
    border-radius:15px 15px 0 15px;
    transform:rotate(-7deg)
  }
  .closing-orbit {
    width:206px;
    height:206px;
    right:-26px;
    bottom:-19px
  }
  .closing-orbit::before {
    inset:-20px
  }
  .closing-caption {
    font-size:9px;
    margin-top:0;
    padding-right:0
  }
  
  
  
  
  
  
  
  
  
  .mobile-sticky {
    position:fixed;
    z-index:35;
    bottom:0;
    left:0;
    right:0;
    background:#FFFFFFF7;
    backdrop-filter:blur(12px);
    border-top:1px solid #DCE5F5;
    box-shadow:0 -4px 24px #18396709;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:14px;
    padding:12px 20px max(12px,env(safe-area-inset-bottom))
  }
  .mobile-sticky>span {
    font-size:10px;
    line-height:1.5;
    color:#7690B8
  }
  .mobile-sticky>span>b {
    color:var(--navy);
    font-size:12px;
    font-weight:500
  }
  .mobile-sticky>.btn {
    min-height:44px;
    font-size:13px;
    padding:11px 14px;
    gap:15px
  }
  .site-dialog {
    border-radius:17px;
    max-width:calc(100% - 24px);
    max-height:calc(100dvh - 24px)
  }
  .dialog-inner {
    padding:34px 23px 26px
  }
  .dialog-inner>h2 {
    font-size:31px;
    line-height:1.15
  }
  .dialog-inner>p {
    font-size:15px
  }
  .bank-table>div {
    grid-template-columns:90px 1fr;
    gap:10px;
    font-size:12px;
    padding-block:12px
  }
  .dialog-inner>.btn {
    font-size:15px;
    gap:13px;
    padding-inline:17px
  }
  .dialog-close {
    width:39px;
    height:39px;
    top:10px;
    right:10px
  }
  .dialog-inner>.eyebrow {
    font-size:9px
  }
}

@media(max-width:479px) {
  .hero h1 {
    font-size:75px
  }
  .hero h1>br:nth-child(2) {
    display:block
  }
  .hero h1 .hand-underline {
    margin-left:0
  }
  .hero-description {
    font-size:17px;
    max-width:370px
  }
  .hero-description>br:first-child {
    display:block
  }
  .hero-ctas>.btn {
    font-size:16px;
    gap:19px;
    min-height:58px;
    width:auto
  }
  .hero-trust {
    font-size:10px;
    gap:17px
  }
  .hero-art {
    margin-top:6px;
    padding-top:47px;
    padding-bottom:61px
  }
  .hero-copy .eyebrow {
    font-size:9px;
    letter-spacing:.9px
  }
  .window-top {
    padding-inline:17px;
    height:46px
  }
  .window-name {
    font-size:17px
  }
  .demo-tag {
    font-size:9px
  }
  .window-content {
    padding:19px 19px 17px
  }
  .window-head h2 {
    font-size:25px
  }
  .overview-metric strong {
    font-size:42px
  }
  .overview-metric strong small {
    font-size:29px
  }
  .income-row {
    font-size:9px;
    gap:15px
  }
  .income-row b {
    font-size:11px
  }
  .demo-tabs {
    gap:24px
  }
  .demo-tabs button {
    font-size:12px
  }
  .demo-pane {
    min-height:178px;
    padding-top:22px;
    padding-bottom:18px
  }
  .category-chart {
    gap:19px
  }
  .donut {
    width:126px;
    height:126px
  }
  .donut::before {
    width:89px;
    height:89px
  }
  .donut b {
    font-size:23px
  }
  .donut small {
    font-size:8px
  }
  .donut>div>span {
    font-size:9px
  }
  .chart-legend {
    gap:12px
  }
  .chart-legend>div {
    font-size:10px;
    gap:5px
  }
  .chart-legend b {
    font-size:11px
  }
  .next-payment {
    padding:11px 12px;
    font-size:9px;
    gap:8px
  }
  .next-payment>b {
    font-size:13px
  }
  .next-payment>span>small {
    font-size:11px
  }
  .floating-insight {
    max-width:284px;
    left:-3px;
    bottom:33px;
    gap:8px;
    padding:11px 12px
  }
  .floating-insight b {
    font-size:10px
  }
  .floating-insight>div>span {
    font-size:9px
  }
  .insight-icon {
    height:31px;
    width:31px
  }
  .insight-check {
    display:none
  }
  .hero-mascot {
    width:126px;
    right:-18px;
    bottom:-7px
  }
  .demo-caption {
    font-size:9px;
    left:8px;
    bottom:0
  }
  .hand-note {
    right:92px;
    font-size:17px;
    top:5px
  }
  .hero-orbit {
    width:495px;
    height:495px;
    left:-51px;
    top:31px
  }
  .demo-budget-head {
    font-size:10px;
    gap:10px
  }
  .demo-helper {
    font-size:10px
  }
  .budget-remaining {
    font-size:10px;
    margin-bottom:17px
  }
  .mini-budget {
    font-size:10px
  }
  .demo-goal-title b {
    font-size:12px
  }
  .demo-goal-title small {
    font-size:10px
  }
  .goal-total {
    margin-top:15px
  }
  .goal-total b {
    font-size:25px
  }
  .bank-names>span {
    font-size:17px
  }
  .bank-names {
    gap:15px 10px
  }
  .bank-names .bank-alpha {
    font-size:14px
  }
  .bank-alpha i {
    font-size:24px;
    margin-right:0
  }
  .bank-names small {
    font-size:9px
  }
  .section-topline {
    gap:8px
  }
  .section-topline>.eyebrow {
    font-size:9px;
    letter-spacing:.65px
  }
  .section-index {
    font-size:8px
  }
  .needs .section-heading-row>h2 {
    font-size:34px
  }
  .needs-grid h3 {
    font-size:21px
  }
  .needs-grid p {
    font-size:15px
  }
  .needs-grid .text-link {
    font-size:13px
  }
  .meaning h2 {
    font-size:55px;
    line-height:1.04
  }
  .meaning h2>br:nth-child(2) {
    display:block
  }
  .meaning h2>span {
    margin-left:0
  }
  .meaning-copy .eyebrow {
    font-size:9px;
    letter-spacing:.7px
  }
  .meaning-copy>p {
    font-size:16px
  }
  .receipt {
    padding:20px 19px
  }
  .receipt-heading {
    font-size:12px
  }
  .receipt-heading>span:last-child {
    font-size:9px
  }
  .transaction {
    gap:9px;
    min-height:77px
  }
  .transaction b {
    font-size:13px
  }
  .transaction small {
    font-size:10px
  }
  .transaction strong {
    font-size:15px
  }
  .transaction-icon {
    height:32px;
    width:32px
  }
  .transaction-icon>.icon {
    width:18px;
    height:18px
  }
  .receipt-total strong {
    font-size:55px
  }
  .receipt-total strong small {
    font-size:33px
  }
  .receipt-stamp {
    font-size:11px;
    padding:11px 13px;
    gap:5px
  }
  .receipt-stamp>.icon {
    width:16px
  }
  .receipt-formula {
    font-size:10px
  }
  .example-toggle button {
    font-size:13px;
    gap:7px
  }
  .feature-option {
    padding:21px 14px;
    gap:13px
  }
  .feature-option strong {
    font-size:21px
  }
  .feature-option>span>span {
    font-size:14px
  }
  .feature-visual {
    padding:23px 19px 17px;
    min-height:430px
  }
  .visual-label {
    font-size:10px;
    letter-spacing:0
  }
  .plan-card {
    padding:21px 18px;
    min-height:316px
  }
  .plan-head {
    gap:9px
  }
  .plan-head>span>b {
    font-size:14px
  }
  .plan-head>span>small {
    font-size:10px
  }
  .plan-head .mini-icon {
    height:37px;
    width:37px
  }
  .plan-big-number {
    font-size:33px
  }
  .plan-big-number small {
    font-size:13px
  }
  .plan-remainder {
    font-size:9px;
    gap:5px
  }
  .budget-category>div:first-child {
    font-size:10px
  }
  .budget-category b {
    font-size:10px
  }
  .budget-category .icon {
    width:15px
  }
  .budget-category>div>span {
    gap:4px
  }
  .budget-category p {
    font-size:9px
  }
  .feature-sticker {
    font-size:11px
  }
  .feature-demo-note {
    font-size:8px
  }
  .goal-milestone>span {
    font-size:9px
  }
  .goal-milestone b {
    font-size:14px
  }
  .calendar-event {
    gap:8px
  }
  .calendar-event>span:nth-child(2)>b {
    font-size:11px
  }
  .calendar-event>span:nth-child(2)>small {
    font-size:9px
  }
  .calendar-event>strong {
    font-size:11px
  }
  .steps article {
    grid-template-columns:104px 1fr;
    gap:0 17px
  }
  .step-file {
    margin-left:9px;
    width:75px
  }
  .step-upload {
    width:82px;
    height:92px;
    font-size:10px;
    margin-left:8px
  }
  .step-ready {
    width:93px;
    height:82px;
    margin-left:4px;
    font-size:7px
  }
  .steps h3 {
    font-size:20px
  }
  .steps p {
    font-size:14px
  }
  .privacy-panel {
    padding:29px 22px
  }
  .privacy-copy h2 {
    font-size:35px
  }
  .privacy-copy>p {
    font-size:16px
  }
  .privacy-points b {
    font-size:17px
  }
  .privacy-points small {
    font-size:12px
  }
  .pricing-heading h2 {
    font-size:39px
  }
  .pricing-heading>p {
    font-size:15px
  }
  .price-card {
    padding:25px 23px 21px;
    gap:0 9px
  }
  .price {
    font-size:52px
  }
  .price-card h3 {
    font-size:25px
  }
  .price-term {
    font-size:9px
  }
  .price-card-top>span {
    font-size:10px
  }
  .price-subnote {
    font-size:10px
  }
  .included>p {
    font-size:11px
  }
  .included>span {
    font-size:11px
  }
  .included {
    gap:12px 10px
  }
  .pricing-footnote {
    font-size:10px
  }
  .faq-heading h2 {
    font-size:40px
  }
  .faq-list summary {
    font-size:17px;
    gap:15px
  }
  .faq-answer p {
    font-size:15px
  }
  .faq-answer .link-button {
    font-size:15px
  }
  .closing-panel {
    padding:30px 22px 22px
  }
  .closing-text h2 {
    font-size:39px
  }
  .closing-text>p {
    font-size:15px
  }
  .closing-text>.btn {
    font-size:14px;
    padding-inline:15px;
    gap:15px
  }
  .closing-text .eyebrow {
    font-size:8px;
    letter-spacing:.5px
  }
  .capy-bubble {
    left:0;
    top:19px;
    font-size:15px;
    padding:10px 15px
  }
  .closing-illustration>.mascot-svg {
    width:176px;
    margin-right:-9px
  }
  .closing-illustration {
    min-height:173px
  }
  .closing-orbit {
    width:188px;
    height:188px
  }
  .closing-caption {
    font-size:8px
  }
  
  .hero-grid {
    gap:24px
  }
}

@media(max-width:359px) {
  .container {
    width:calc(100% - 32px)
  }
  .brand-type {
    font-size:20px
  }
  .brand-mark {
    width:34px;
    height:34px
  }
  .beta {
    display:none
  }
  
  .hero h1 {
    font-size:68px
  }
  .hero-copy .eyebrow {
    font-size:8px
  }
  .hero-trust {
    gap:11px;
    font-size:9px
  }
  .hero-ctas>.btn {
    font-size:14px;
    padding-inline:17px;
    gap:16px
  }
  .window-content {
    padding:17px 14px
  }
  .window-top {
    padding-inline:14px
  }
  .window-head h2 {
    font-size:23px
  }
  .month-select select {
    font-size:11px;
    padding-inline:7px;
    max-width:105px
  }
  .overview-metric strong {
    font-size:37px
  }
  .overview-metric strong small {
    font-size:26px
  }
  .income-row {
    gap:10px;
    font-size:8px
  }
  .income-row b {
    font-size:10px
  }
  .category-chart {
    gap:11px
  }
  .donut {
    width:111px;
    height:111px
  }
  .donut::before {
    width:79px;
    height:79px
  }
  .donut b {
    font-size:21px
  }
  .donut small {
    font-size:7px
  }
  .chart-legend>div {
    font-size:9px;
    gap:4px
  }
  .chart-legend b {
    font-size:10px
  }
  .demo-pane {
    min-height:169px
  }
  .floating-insight {
    padding:10px;
    gap:7px;
    max-width:249px
  }
  .floating-insight b {
    font-size:9px
  }
  .floating-insight>div>span {
    font-size:8px
  }
  .hero-mascot {
    width:111px;
    right:-13px;
    bottom:-4px
  }
  .bank-names {
    gap:17px 9px
  }
  .bank-names>span {
    font-size:16px
  }
  .bank-names .bank-alpha {
    font-size:12px
  }
  .bank-alpha i {
    font-size:21px;
    height:26px
  }
  .section-index {
    display:none
  }
  h2 {
    font-size:36px
  }
  .needs .section-heading-row>h2 {
    font-size:30px
  }
  .needs-grid article {
    grid-template-columns:23px 1fr;
    gap:10px
  }
  .needs-grid h3 {
    font-size:20px
  }
  .needs-grid .text-link {
    font-size:12px
  }
  .receipt {
    padding:18px 15px
  }
  .transaction {
    gap:8px
  }
  .transaction b {
    font-size:12px
  }
  .transaction small {
    font-size:9px
  }
  .transaction strong {
    font-size:13px
  }
  .transaction-icon {
    height:28px;
    width:28px
  }
  .receipt-total strong {
    font-size:51px
  }
  .receipt-stamp {
    font-size:10px;
    padding:10px
  }
  .feature-visual {
    padding:20px 14px 15px
  }
  .plan-card {
    padding:20px 15px
  }
  .plan-big-number {
    font-size:31px
  }
  .plan-big-number small {
    font-size:11px
  }
  .budget-category b {
    font-size:9px
  }
  .plan-remainder {
    font-size:8px
  }
  .visual-label {
    font-size:9px
  }
  .feature-option {
    padding-inline:12px;
    gap:10px
  }
  .feature-option strong {
    font-size:20px
  }
  .feature-option>span>span {
    font-size:13px
  }
  .support-features h3 {
    font-size:19px
  }
  .support-features p {
    font-size:15px
  }
  .steps article {
    grid-template-columns:93px 1fr;
    column-gap:13px
  }
  .steps h3 {
    font-size:19px
  }
  .steps p {
    font-size:13px
  }
  .privacy-panel {
    padding:27px 19px
  }
  .privacy-copy h2 {
    font-size:32px
  }
  .privacy-copy .text-link {
    font-size:11px
  }
  .privacy-points b {
    font-size:16px
  }
  .privacy-points small {
    font-size:11px
  }
  .price-card {
    padding-inline:20px
  }
  .price-card h3 {
    font-size:23px
  }
  .price {
    font-size:47px
  }
  .price-term {
    font-size:8px
  }
  .price {
    letter-spacing:-1px
  }
  .price-card-top>span {
    font-size:9px
  }
  .price-context {
    font-size:14px
  }
  .price-subnote {
    font-size:9px
  }
  .price-card>.btn {
    font-size:15px
  }
  .included {
    gap:12px 8px
  }
  .included>p {
    font-size:10px
  }
  .included>span {
    font-size:10px
  }
  .included .icon {
    width:14px
  }
  .closing-text h2 {
    font-size:34px
  }
  .closing-text>.btn {
    font-size:12px;
    padding-inline:14px;
    gap:15px
  }
  .closing-panel {
    padding-inline:20px
  }
  .mobile-sticky {
    padding-inline:16px
  }
  .mobile-sticky>span {
    font-size:9px
  }
  .mobile-sticky>span>b {
    font-size:10px
  }
  .mobile-sticky>.btn {
    font-size:12px;
    padding-inline:12px;
    gap:12px
  }
}

@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior:auto
  }
  *,*::before,*::after {
    animation:none!important;
    transition:none!important
  }
  .btn:hover {
    transform:none
  }
}

@media print {
  .mobile-sticky,.dialog-close,.hero-orbit,.hand-note,.hero-mascot,.floating-insight,.demo-caption,.btn,.text-link,.link-button{
    display:none!important
  }
  body {
    font-size:12pt;
    color:#000;
    background:white
  }
  .container {
    width:100%;
    max-width:100%
  }
  .section,.meaning {
    padding:30px 0
  }
  .hero-grid {
    padding:25px 0;
    grid-template-columns:1fr 1fr;
    gap:25px
  }
  .hero h1 {
    font-size:48pt
  }
  .hero-description {
    font-size:13pt
  }
  .hero-art {
    padding-top:0
  }
  .meaning {
    background:#ECF1FA;
    color:#17325E
  }
  .meaning p,.meaning .eyebrow {
    color:#17325E
  }
  .meaning-grid {
    gap:30px
  }
  .meaning h2 {
    font-size:38pt
  }
  .section-heading-row h2,h2 {
    font-size:30pt
  }
  .pricing-cards {
    grid-template-columns:repeat(3,1fr)
  }
  .price-card {
    break-inside:avoid
  }
  .faq-list details {
    break-inside:avoid
  }
  
}

/* Keep decorative elements outside the actual payment information. */
@media(min-width:768px) {
  .hero-grid {
    padding-top:35px;
    padding-bottom:35px
  }
  .hero-art {
    padding-bottom:100px
  }
  .floating-insight {
    bottom:27px
  }
  .hero-mascot {
    width:155px;
    bottom:-20px;
    right:-24px
  }
  .demo-caption {
    bottom:1px
  }
}

@media(min-width:1600px) {
  .hero-grid {
    padding-top:52px;
    padding-bottom:52px
  }
  .hero-mascot {
    right:-15px
  }
}

@media(max-width:767px) {
  .hero-art {
    padding-bottom:84px
  }
  .floating-insight {
    bottom:27px
  }
  .hero-mascot {
    bottom:-12px
  }
  .demo-caption {
    bottom:0
  }
}

/* Final responsive fit: real word spacing, compact receipt and tablet headline. */
.faq-heading,.faq-list {
  min-width:0
}

@media(min-width:768px) and (max-width:900px) {
  .hero h1 {
    font-size:clamp(62px,8.1vw,73px)
  }
  .hero-mascot {
    right:-15px
  }
}

@media(max-width:359px) {
  .receipt-total {
    gap:8px
  }
  .receipt-total>div {
    min-width:0
  }
  .receipt-total strong {
    font-size:46px
  }
  .receipt-total strong small {
    font-size:28px
  }
  .receipt-stamp {
    flex-shrink:0;
    font-size:9px;
    padding:9px 8px
  }
  .receipt-stamp>.icon {
    width:14px
  }
  .faq-heading h2 {
    font-size:36px
  }
}

/* Capybara brand v2 — one profile throughout the interface. */
.brand-mark svg{overflow:visible}