/* ==========================================================================
   Zest Bank
   Chase's structural language (1200px container, restrained nav, underline
   inputs, 4px radii, Open Sans) with Zest's identity kept in the name, the
   citrus mark, and a blue ramp rotated toward the original indigo.

   Like most retail bank sites this is a single always-light brand surface;
   it deliberately does not follow the OS dark-mode preference.
   ========================================================================== */

:root{
  /* ---------- Type ---------- */
  --font-body:"Open Sans","Helvetica Neue",Helvetica,Arial,sans-serif;
  --fw-light:300;
  --fw-regular:400;
  --fw-semibold:600;
  /* There is deliberately no --fw-bold. Chase ships no 700 face. */

  --fs-h1:40px;      --lh-h1:48px;
  --fs-h2:32px;      --lh-h2:40px;
  --fs-h3:24px;      --lh-h3:32px;
  --fs-h4:20px;      --lh-h4:28px;
  --fs-body:16px;    --lh-body:24px;
  --fs-sm:14px;      --lh-sm:20px;
  --fs-xs:12px;      --lh-xs:16px;
  --fs-balance:28px; --lh-balance:36px;

  /* ---------- Zest blue ramp ---------- */
  --blue-interactive:#1156E0;
  --blue-primary:#0A47B0;
  --blue-hover:#073A8C;
  --blue-deep:#052A63;
  --blue-brand:#12388F;
  --blue-hero:#0B4FBE;
  --blue-tint:#EBF2FF;

  /* ---------- Conversion CTA (account opening only) ---------- */
  --green-cta:#128842;
  --green-cta-hover:#0E6D35;

  /* ---------- Citrus: accent only, never a button or a large surface ------ */
  --zest-yellow:#F0C25E;
  --zest-yellow-soft:#FBEDC7;

  /* ---------- Status ---------- */
  --error:#BF2155;   --error-bg:#FDEEF3;
  --success:#00752F; --success-bg:#F1F8E3;
  --warning:#B24700; --warning-bg:#FDF6F0;
  --info:#12388F;    --info-bg:#EBF2FF;

  /* ---------- Text ---------- */
  --text-strong:#101820;
  --text-regular:#414042;
  --text-subdued:#717171;
  --text-disabled:#949494;
  --text-inverse:#FFFFFF;
  --text-inverse-subdued:#C6D2E8;

  /* ---------- Surfaces ---------- */
  --surface-page:#FFFFFF;
  --surface-secondary:#F6F6F6;
  --surface-tile:#F2F4F7;
  --surface-input:#F1F1F0;
  --surface-app-bar:#052A63;
  --surface-app-util:#0A3A80;

  /* ---------- Borders ---------- */
  --border-card:#CCCCCC;
  --border-input-rule:#8C8E90;
  --border-decorative:#BCBCBC;
  --border-rule-soft:#E4E4E4;

  /* ---------- Radii ---------- */
  --r-button:4px;
  --r-signin:5px;
  --r-card:8px;
  --r-tile:12px;
  --r-chip:100px;

  /* ---------- Spacing ---------- */
  --s-1:2px; --s-2:4px; --s-3:6px; --s-4:8px; --s-5:12px;
  --s-6:16px; --s-7:24px; --s-8:32px; --s-9:48px; --s-10:64px;

  /* ---------- Layout ---------- */
  --container:1200px;
  --container-pad:24px;
  --sidenav-w:240px;
  --quickpay-w:300px;

  --shadow-menu:0 4px 12px rgba(16,24,32,.14);
  --focus-ring:#1156E0;
  --focus-halo:rgba(17,86,224,.28);
  --t-fast:120ms;
  --ease:cubic-bezier(.2,0,.2,1);
}

/* ==========================================================================
   Base
   ========================================================================== */
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background:var(--surface-page);
  color:var(--text-strong);
  font:var(--fw-regular) var(--fs-body)/var(--lh-body) var(--font-body);
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{margin:0 0 var(--s-6);color:var(--text-strong);text-wrap:balance;}
h1{font-size:var(--fs-h1);line-height:var(--lh-h1);font-weight:var(--fw-light);}
h2{font-size:var(--fs-h2);line-height:var(--lh-h2);font-weight:var(--fw-light);}
h3{font-size:var(--fs-h3);line-height:var(--lh-h3);font-weight:var(--fw-semibold);}
h4{font-size:var(--fs-h4);line-height:var(--lh-h4);font-weight:var(--fw-semibold);}
p{margin:0 0 var(--s-6);}
a{color:var(--blue-interactive);text-decoration:none;}
a:hover{text-decoration:underline;}
button{font-family:inherit;}
small{font-size:var(--fs-sm);}
hr{border:0;border-top:1px solid var(--border-rule-soft);margin:var(--s-7) 0;}

:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px;}

.container{max-width:var(--container);margin:0 auto;padding:0 16px;}
@media (min-width:768px){.container{padding:0 var(--container-pad);}}

.visually-hidden{
  position:absolute;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}
.skip-link{
  position:absolute;left:-9999px;top:0;z-index:100;
  background:#fff;color:var(--blue-primary);padding:var(--s-5) var(--s-6);
}
.skip-link:focus{left:0;}

.u-text-right{text-align:right;}
.u-num{font-variant-numeric:tabular-nums;}
.u-mt-7{margin-top:var(--s-7);}
.u-mb-0{margin-bottom:0;}
.u-subdued{color:var(--text-subdued);}
.stack > * + *{margin-top:var(--s-6);}

@media (prefers-reduced-motion: reduce){
  *{animation:none !important;transition:none !important;}
}

/* ==========================================================================
   Buttons
   ========================================================================== */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--s-4);
  min-height:36px;min-width:10rem;padding:6px 16px;
  border:1px solid transparent;border-radius:var(--r-button);
  font:var(--fw-semibold) var(--fs-body)/var(--lh-body) var(--font-body);
  text-align:center;text-decoration:none;cursor:pointer;
  transition:background var(--t-fast) var(--ease),border-color var(--t-fast) var(--ease);
}
.btn:hover{text-decoration:none;}
.btn--primary{background:var(--blue-primary);color:var(--text-inverse);}
.btn--primary:hover{background:var(--blue-hover);}
.btn--secondary{background:#fff;color:var(--blue-primary);border-color:var(--blue-primary);}
.btn--secondary:hover{background:var(--blue-tint);}
.btn--convert{background:var(--green-cta);color:var(--text-inverse);}
.btn--convert:hover{background:var(--green-cta-hover);}
.btn--convert-outline{background:#fff;color:var(--green-cta);border-color:var(--green-cta);}
.btn--convert-outline:hover{background:#F1F8E3;}
.btn--danger{background:#fff;color:var(--error);border-color:var(--error);}
.btn--danger:hover{background:var(--error-bg);}
.btn--quiet{background:transparent;color:var(--blue-interactive);border-color:transparent;min-width:0;padding:6px 8px;}
.btn--block{width:100%;}
.btn--compact{min-width:0;}
.btn:disabled,.btn[aria-disabled="true"]{
  background:var(--surface-input);color:var(--text-disabled);
  border-color:transparent;cursor:not-allowed;
}
@media (pointer:coarse){.btn{min-height:44px;}}

.btn-row{display:flex;gap:var(--s-5);flex-wrap:wrap;align-items:center;}
.btn-row--end{justify-content:flex-end;}
.btn-row--split{justify-content:space-between;}

/* ==========================================================================
   Forms — underline inputs (the signature control)
   ========================================================================== */
.field{margin-bottom:var(--s-7);}
.field__label{
  display:block;font-size:var(--fs-sm);line-height:var(--lh-sm);
  color:var(--text-subdued);margin-bottom:var(--s-2);
}
.field__label .req{color:var(--error);text-decoration:none;margin-left:2px;}

.field__input,.field__select,.field__textarea{
  display:block;width:100%;margin:0;padding:6px 0 8px;
  font:var(--fw-regular) var(--fs-body)/var(--lh-body) var(--font-body);
  color:var(--text-strong);background:transparent;
  border:0;border-radius:0;appearance:none;
  box-shadow:0 -1px 0 0 inset var(--border-input-rule);
  transition:box-shadow var(--t-fast) var(--ease);
}
.field__input:hover,.field__select:hover,.field__textarea:hover{
  box-shadow:0 -1px 0 0 inset var(--text-strong);
}
.field__input:focus,.field__select:focus,.field__textarea:focus{
  outline:none;box-shadow:0 -2px 0 0 inset var(--blue-primary);
}
.field__input:focus-visible,.field__select:focus-visible,.field__textarea:focus-visible{
  box-shadow:0 -2px 0 0 inset var(--blue-primary),0 0 0 3px var(--focus-halo);
}
.field--error .field__input,
.field--error .field__select,
.field--error .field__textarea,
[aria-invalid="true"]{box-shadow:0 -2px 0 0 inset var(--error);}

.field__select{
  padding-right:24px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23414042' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 2px center;background-size:12px;
}
.field__textarea{min-height:96px;resize:vertical;}

.field__hint{font-size:var(--fs-sm);line-height:var(--lh-sm);color:var(--text-subdued);margin:var(--s-2) 0 0;}
.field__error{
  font-size:var(--fs-sm);line-height:var(--lh-sm);color:var(--error);
  margin:var(--s-2) 0 0;display:flex;gap:var(--s-2);align-items:flex-start;
}
.field__error svg{flex:none;width:16px;height:16px;margin-top:2px;fill:currentColor;}

.field__label-row{display:flex;justify-content:space-between;align-items:baseline;gap:var(--s-4);}
.field__label-row .field__label{margin-bottom:var(--s-2);}

/* money input: the $ shares the field's rule */
.field--money .field__control{display:grid;grid-template-columns:auto 1fr;align-items:baseline;}
.field--money .money-prefix{
  font-size:var(--fs-body);color:var(--text-regular);padding:6px 4px 8px 0;
  box-shadow:0 -1px 0 0 inset var(--border-input-rule);
}
.field--money .field__input{text-align:right;font-variant-numeric:tabular-nums;}

/* Chrome repaints a yellow box over a transparent borderless field. */
.field__input:-webkit-autofill{
  -webkit-text-fill-color:var(--text-strong);
  box-shadow:0 0 0 1000px #fff inset,0 -1px 0 0 inset var(--border-input-rule);
}

.check-row{display:flex;align-items:flex-start;gap:var(--s-4);margin-bottom:var(--s-6);font-size:var(--fs-sm);}
.check-row input{width:16px;height:16px;margin-top:2px;accent-color:var(--blue-primary);flex:none;}
.check-row label{color:var(--text-regular);}

fieldset{border:0;margin:0 0 var(--s-7);padding:0;}
fieldset legend{
  font-size:var(--fs-sm);color:var(--text-subdued);padding:0;margin-bottom:var(--s-4);
}
.fieldset--boxed{
  border:1px solid var(--border-card);border-radius:var(--r-card);
  padding:var(--s-6);
}
.fieldset--boxed legend{
  font-size:var(--fs-body);font-weight:var(--fw-semibold);color:var(--text-strong);
  padding:0 var(--s-4);margin-bottom:0;
}

.form-grid{display:grid;grid-template-columns:1fr;gap:0 var(--s-7);}
@media (min-width:768px){.form-grid{grid-template-columns:1fr 1fr;}}
.form-grid .field--full{grid-column:1/-1;}

.form-note{font-size:var(--fs-sm);color:var(--text-subdued);}
.required-key{font-size:var(--fs-sm);color:var(--text-subdued);margin-bottom:var(--s-6);}

/* label-left / control-right, used by the transfer form */
.form-rows .field{
  margin-bottom:var(--s-7);
}
@media (min-width:768px){
  .form-rows .field{display:grid;grid-template-columns:220px 1fr;gap:var(--s-6);align-items:start;}
  .form-rows .field > .field__label,
  .form-rows .field > .field__label-row{padding-top:6px;margin-bottom:0;}
  .form-rows .field__control{grid-column:2;}
  .form-rows .field__hint,.form-rows .field__error{grid-column:2;}
  .form-rows fieldset{display:grid;grid-template-columns:220px 1fr;gap:var(--s-6);}
  .form-rows fieldset legend{float:left;width:220px;padding-top:6px;}
  .form-rows .fieldset--boxed{display:block;max-width:520px;margin-left:244px;}
  .form-rows .fieldset--boxed legend{float:none;width:auto;padding:0 var(--s-4);}
  .form-rows .form-actions{margin-left:244px;}
}

/* ==========================================================================
   Cards, tiles, panels
   ========================================================================== */
.card{background:#fff;border:1px solid var(--border-card);border-radius:var(--r-card);}
.card__body{padding:var(--s-7);}
.card__header{
  padding:var(--s-6) var(--s-7);border-bottom:1px solid var(--border-rule-soft);
  font-size:var(--fs-h4);font-weight:var(--fw-semibold);
}
.tile{background:var(--surface-tile);border-radius:var(--r-tile);padding:var(--s-7);border:0;}
.tile h3{margin-bottom:var(--s-4);}
.tile p{color:var(--text-regular);margin-bottom:var(--s-5);}
.panel{background:#fff;border:1px solid var(--border-card);border-radius:var(--r-card);padding:var(--s-7);}

.tile-grid{display:grid;grid-template-columns:1fr;gap:var(--s-7);}
@media (min-width:768px){.tile-grid{grid-template-columns:repeat(3,1fr);}}
.tile-grid--2{grid-template-columns:1fr;}
@media (min-width:768px){.tile-grid--2{grid-template-columns:1fr 1fr;}}

.tile--choice{display:block;text-align:left;color:inherit;border:1px solid transparent;}
.tile--choice:hover{background:var(--blue-tint);border-color:var(--blue-primary);text-decoration:none;}

/* ==========================================================================
   Alerts
   ========================================================================== */
.alert{
  display:flex;gap:var(--s-5);padding:var(--s-5) var(--s-6);
  border-left:4px solid;border-radius:0 var(--r-button) var(--r-button) 0;
  margin-bottom:var(--s-7);
}
.alert svg{flex:none;width:20px;height:20px;margin-top:2px;fill:currentColor;}
.alert__body{flex:1;}
.alert__body > :last-child{margin-bottom:0;}
.alert__body h2{font-size:var(--fs-h4);line-height:var(--lh-h4);font-weight:var(--fw-semibold);margin-bottom:var(--s-4);}
.alert__body ul{margin:0;padding-left:var(--s-7);}
.alert--error{background:var(--error-bg);border-color:var(--error);}
.alert--error svg{color:var(--error);}
.alert--success{background:var(--success-bg);border-color:var(--success);}
.alert--success svg{color:var(--success);}
.alert--warning{background:var(--warning-bg);border-color:var(--warning);}
.alert--warning svg{color:var(--warning);}
.alert--info{background:var(--info-bg);border-color:var(--info);}
.alert--info svg{color:var(--info);}

/* ==========================================================================
   Tables
   ========================================================================== */
.table{width:100%;border-collapse:collapse;font-size:var(--fs-body);}
.table caption{text-align:left;font-size:var(--fs-sm);color:var(--text-subdued);padding-bottom:var(--s-4);}
.table thead th{
  background:var(--surface-tile);text-align:left;
  font-size:var(--fs-sm);font-weight:var(--fw-semibold);color:var(--text-regular);
  padding:var(--s-5) var(--s-6);border-bottom:1px solid var(--border-card);
}
.table td{padding:var(--s-5) var(--s-6);border-bottom:1px solid var(--border-rule-soft);vertical-align:middle;}
.table tbody tr:nth-child(even){background:var(--surface-secondary);}
.table tbody tr:hover{background:var(--blue-tint);}
.table .num{text-align:right;font-variant-numeric:tabular-nums;}
.table .actions{text-align:right;white-space:nowrap;}
.table .actions a + a{margin-left:var(--s-5);}
.table .amount-in{color:var(--success);}
.table-scroll{overflow-x:auto;}
.table-scroll:focus-visible{outline:2px solid var(--focus-ring);}

.payee-cell{display:flex;align-items:center;gap:var(--s-5);}
.payee-icon{width:22px;height:22px;flex:none;color:var(--text-subdued);}

@media (max-width:767px){
  .table--stack thead{display:none;}
  .table--stack tbody tr,
  .table--stack tbody tr:nth-child(even){
    display:block;background:#fff;border:1px solid var(--border-card);
    border-radius:var(--r-card);padding:var(--s-5);margin-bottom:var(--s-5);
  }
  .table--stack td{display:block;border:0;padding:var(--s-1) 0;}
  .table--stack td::before{
    content:attr(data-label) " ";color:var(--text-subdued);font-size:var(--fs-sm);
  }
  .table--stack .actions{text-align:left;padding-top:var(--s-4);}
}

/* ==========================================================================
   Public header / footer
   ========================================================================== */
.site-header{background:#fff;}
.site-header__inner{max-width:var(--container);margin:0 auto;padding:0 var(--container-pad);}

.audience-nav{display:flex;gap:var(--s-8);height:40px;align-items:stretch;}
.audience-nav a{
  display:flex;align-items:center;font-size:var(--fs-sm);font-weight:var(--fw-regular);
  color:var(--text-regular);border-bottom:3px solid transparent;
}
.audience-nav a[aria-current="true"]{color:var(--blue-brand);border-bottom-color:var(--blue-brand);}

.logo-row{display:flex;align-items:center;justify-content:space-between;height:56px;gap:var(--s-6);}
.logo{display:inline-flex;align-items:center;gap:var(--s-4);}
.logo:hover{text-decoration:none;}
.logo__mark{width:32px;height:32px;flex:none;}
.logo__text{font-size:22px;font-weight:var(--fw-semibold);color:var(--text-strong);letter-spacing:0;}
.logo__text b{color:var(--blue-brand);font-weight:var(--fw-semibold);}
.logo--inverse .logo__text{color:#fff;}
.logo--inverse .logo__text b{color:var(--zest-yellow);}
.header-actions{display:flex;gap:var(--s-7);align-items:center;font-size:var(--fs-sm);color:var(--text-regular);}

.primary-nav{display:flex;gap:var(--s-8);height:48px;align-items:center;overflow-x:auto;}
.primary-nav a{font-size:var(--fs-body);font-weight:var(--fw-regular);color:var(--text-strong);white-space:nowrap;}
.primary-nav a:hover{color:var(--blue-interactive);}

.mobile-only{display:none;}
@media (max-width:767px){
  .audience-nav,.primary-nav,.header-actions{display:none;}
  .logo-row{height:56px;}
  .mobile-only{display:flex;gap:var(--s-5);align-items:center;}
}

.site-footer{background:var(--blue-deep);color:var(--text-inverse-subdued);padding:var(--s-9) 0 var(--s-7);margin-top:var(--s-10);}
.footer-grid{display:grid;grid-template-columns:1fr;gap:var(--s-7);margin-bottom:var(--s-8);}
@media (min-width:768px){.footer-grid{grid-template-columns:1.4fr 1fr 1fr 1fr;}}
.footer-grid h4{color:#fff;font-size:var(--fs-sm);font-weight:var(--fw-semibold);margin-bottom:var(--s-5);}
.footer-grid ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--s-4);}
.footer-grid a{color:var(--text-inverse-subdued);font-size:var(--fs-sm);}
.footer-grid a:hover{color:#fff;}
.footer-tag{font-size:var(--fs-sm);max-width:34ch;margin-top:var(--s-5);}
.footer-bottom{
  border-top:1px solid rgba(255,255,255,.18);padding-top:var(--s-6);
  display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:var(--s-5);
}
.brand-bar{width:120px;height:4px;border-radius:4px;background:linear-gradient(90deg,var(--zest-yellow),var(--blue-interactive));}
.footer-bottom span{font-size:var(--fs-xs);}

/* ==========================================================================
   Homepage hero + sign-in card
   ========================================================================== */
.hero{background:var(--blue-hero);color:#fff;padding:var(--s-8) 0;}
.hero-inner{display:grid;grid-template-columns:1fr;gap:var(--s-8);align-items:start;}
.hero h1{color:#fff;font-weight:var(--fw-light);margin-bottom:var(--s-6);}
.hero p{color:#fff;font-size:18px;max-width:46ch;}
@media (min-width:1024px){
  .hero{padding:0;min-height:400px;display:flex;align-items:center;}
  .hero-inner{grid-template-columns:1fr 340px;gap:var(--s-9);padding:var(--s-9) 0;}
  /* The card is first in source so tab order matches visual order at every
     width; on desktop it moves to column 2. */
  .hero-copy{grid-column:1;grid-row:1;}
  .signin{grid-column:2;grid-row:1;}
}

.signin{
  width:100%;background:#fff;color:var(--text-strong);
  border:1px solid var(--border-card);border-radius:var(--r-signin);
  box-shadow:none;padding:var(--s-7);
}
@media (min-width:1024px){.signin{width:340px;}}
.signin__title{font-size:var(--fs-h4);font-weight:var(--fw-semibold);margin:0 0 var(--s-6);}
.signin .btn--primary{width:100%;background:var(--blue-interactive);border-radius:var(--r-signin);}
.signin .btn--primary:hover{background:var(--blue-primary);}
.signin__divider{
  display:flex;align-items:center;gap:var(--s-5);
  margin:var(--s-6) 0;font-size:var(--fs-sm);color:var(--text-subdued);
}
.signin__divider::before,.signin__divider::after{content:"";flex:1;height:1px;background:var(--border-decorative);}
.signin__links{margin-top:var(--s-6);display:flex;flex-direction:column;gap:var(--s-3);font-size:var(--fs-sm);}

.section{padding:var(--s-10) 0;}
.section--tint{background:var(--surface-secondary);}
.section__lead{font-size:var(--fs-h3);line-height:var(--lh-h3);font-weight:var(--fw-light);text-align:center;margin-bottom:var(--s-8);}
.product-icon{width:32px;height:32px;color:var(--blue-primary);margin-bottom:var(--s-5);}

/* ==========================================================================
   Funnel (application)
   ========================================================================== */
.funnel-header{background:#fff;border-bottom:1px solid var(--border-rule-soft);}
.funnel-header__inner{
  max-width:var(--container);margin:0 auto;padding:var(--s-5) var(--container-pad);
  display:flex;align-items:center;justify-content:space-between;gap:var(--s-6);
}
.funnel-main{background:var(--surface-secondary);padding:var(--s-8) 0 var(--s-10);min-height:60vh;}
.funnel-card{
  background:#fff;border:1px solid var(--border-card);border-radius:var(--r-card);
  max-width:720px;margin:0 auto;padding:var(--s-8);
}
.funnel-card--wide{max-width:900px;}
.funnel-card--narrow{max-width:560px;}

.steps{display:flex;list-style:none;margin:0 0 var(--s-8);padding:0;gap:var(--s-2);}
.steps li{
  flex:1;font-size:var(--fs-xs);line-height:var(--lh-xs);color:var(--text-subdued);
  padding-top:var(--s-5);border-top:4px solid var(--border-decorative);
}
.steps li.is-done{border-top-color:var(--zest-yellow);color:var(--text-regular);}
.steps li[aria-current="step"]{
  border-top-color:var(--blue-primary);color:var(--text-strong);font-weight:var(--fw-semibold);
}

.result-icon{
  width:56px;height:56px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  margin-bottom:var(--s-6);
}
.result-icon svg{width:28px;height:28px;}
.result-icon--ok{background:var(--success-bg);color:var(--success);}
.result-icon--warn{background:var(--warning-bg);color:var(--warning);}
.result-icon--info{background:var(--info-bg);color:var(--info);}

.summary-list{margin:0 0 var(--s-7);}
.summary-list dl{display:grid;grid-template-columns:1fr;gap:var(--s-2);margin:0;}
@media (min-width:560px){.summary-list dl{grid-template-columns:220px 1fr;gap:var(--s-4) var(--s-6);}}
.summary-list dt{color:var(--text-subdued);font-size:var(--fs-sm);}
.summary-list dd{margin:0;color:var(--text-strong);}
.summary-section{border-bottom:1px solid var(--border-rule-soft);padding-bottom:var(--s-6);margin-bottom:var(--s-6);}
.summary-section__head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:var(--s-5);}
.summary-section__head h3{margin:0;font-size:var(--fs-h4);}

/* ==========================================================================
   Authenticated app shell
   ========================================================================== */
.app-bar{background:var(--surface-app-bar);color:var(--text-inverse);}
.app-bar__inner{
  max-width:var(--container);margin:0 auto;padding:var(--s-5) var(--container-pad);
  display:flex;align-items:center;gap:var(--s-7);flex-wrap:wrap;
}
.app-bar__greeting{font-size:var(--fs-h4);line-height:var(--lh-h4);font-weight:var(--fw-light);margin:0;}
.app-bar__meta{font-size:var(--fs-xs);line-height:var(--lh-xs);color:var(--text-inverse-subdued);margin:var(--s-2) 0 0;}
.app-bar__meta dt{display:inline;font-weight:var(--fw-semibold);}
.app-bar__meta dd{display:inline;margin:0 var(--s-6) 0 var(--s-2);}
.app-bar__spacer{margin-left:auto;}
.app-bar .btn--secondary{background:transparent;color:#fff;border-color:rgba(255,255,255,.6);}
.app-bar .btn--secondary:hover{background:rgba(255,255,255,.12);}

.app-util{background:var(--surface-app-util);}
.app-util__inner{
  max-width:var(--container);margin:0 auto;padding:0 var(--container-pad);
  display:flex;gap:var(--s-7);height:40px;align-items:center;overflow-x:auto;
}
.app-util a{color:#fff;font-size:var(--fs-sm);display:inline-flex;gap:var(--s-2);align-items:center;white-space:nowrap;}
.badge{
  background:var(--zest-yellow);color:var(--text-strong);border-radius:var(--r-chip);
  font-size:var(--fs-xs);font-weight:var(--fw-semibold);padding:0 6px;min-width:18px;text-align:center;
}
@media (max-width:767px){.app-util .util-print{display:none;}}

.app-shell{
  display:grid;grid-template-columns:1fr;gap:var(--s-7);
  max-width:var(--container);margin:0 auto;padding:var(--s-7) 16px var(--s-10);
  align-items:start;
}
@media (min-width:768px){
  .app-shell{grid-template-columns:200px 1fr;padding:var(--s-7) var(--container-pad) var(--s-10);}
  .app-aside{grid-column:1/-1;}
}
@media (min-width:1024px){
  .app-shell{grid-template-columns:var(--sidenav-w) 1fr var(--quickpay-w);}
  .app-shell--wide{grid-template-columns:var(--sidenav-w) 1fr;}
  .app-aside{grid-column:3;grid-row:1;}
}
.app-main{background:#fff;border:1px solid var(--border-card);border-radius:var(--r-card);padding:var(--s-7);min-width:0;}

.sidenav ul{list-style:none;margin:0;padding:0;}
.sidenav a{
  display:block;padding:var(--s-5) var(--s-6);
  font-size:15px;line-height:20px;color:var(--text-strong);
  border-bottom:1px solid var(--border-rule-soft);
}
.sidenav a:hover{background:var(--blue-tint);text-decoration:none;}
.sidenav a[aria-current="page"]{background:var(--blue-deep);color:#fff;font-weight:var(--fw-semibold);}
@media (max-width:767px){
  .sidenav ul{display:flex;overflow-x:auto;border-bottom:1px solid var(--border-card);}
  .sidenav a{white-space:nowrap;border-bottom:3px solid transparent;padding:var(--s-5);}
  .sidenav a[aria-current="page"]{background:transparent;color:var(--blue-brand);border-bottom-color:var(--blue-brand);}
}

.page-head{display:flex;justify-content:space-between;align-items:flex-start;gap:var(--s-6);flex-wrap:wrap;margin-bottom:var(--s-7);}
.page-head h1{font-size:var(--fs-h2);line-height:var(--lh-h2);margin:0;}
.page-head .btn-row{margin-left:auto;}

/* ---------- account rows ---------- */
.acct-list{list-style:none;margin:0;padding:0;}
.acct-row{
  display:grid;grid-template-columns:32px 1fr auto;gap:var(--s-6);align-items:center;
  padding:var(--s-6) 0;border-bottom:1px solid var(--border-rule-soft);
}
.acct-row__icon{width:32px;height:32px;color:var(--blue-primary);}
.acct-row__name{font-size:var(--fs-body);font-weight:var(--fw-semibold);color:var(--blue-interactive);}
.acct-row__num{display:block;font-size:var(--fs-sm);color:var(--text-subdued);font-variant-numeric:tabular-nums;}
.acct-row__amounts{text-align:right;}
.acct-row__balance-label{display:block;font-size:var(--fs-xs);color:var(--text-subdued);}
.acct-row__balance{
  font-size:var(--fs-balance);line-height:var(--lh-balance);font-weight:var(--fw-light);
  font-variant-numeric:tabular-nums;color:var(--text-strong);
}
/* Red is reserved for a deposit account that is actually overdrawn. A credit
   card balance is money owed and is shown plain, US-style. */
.acct-row__balance.is-negative{color:var(--error);}
.acct-row__avail{display:block;font-size:var(--fs-sm);color:var(--text-subdued);font-variant-numeric:tabular-nums;}
@media (max-width:559px){
  .acct-row{grid-template-columns:24px 1fr;}
  .acct-row__icon{width:24px;height:24px;}
  .acct-row__amounts{grid-column:2;text-align:left;padding-top:var(--s-4);}
  .acct-row__balance{font-size:22px;line-height:28px;}
}

.msg-strip{
  display:flex;justify-content:space-between;align-items:center;gap:var(--s-6);flex-wrap:wrap;
  border:1px solid var(--border-card);border-radius:var(--r-card);
  padding:var(--s-5) var(--s-6);margin-bottom:var(--s-7);font-size:var(--fs-sm);
}
.do-search{display:flex;gap:var(--s-5);align-items:flex-end;margin-bottom:var(--s-7);}
.do-search .field{flex:1;margin-bottom:0;}

.link-row{display:flex;gap:var(--s-7);flex-wrap:wrap;font-size:var(--fs-sm);margin-top:var(--s-7);}

details.disclosure{border-top:1px solid var(--border-rule-soft);padding-top:var(--s-6);margin-top:var(--s-7);}
details.disclosure summary{cursor:pointer;font-weight:var(--fw-semibold);color:var(--blue-interactive);}
details.disclosure summary::marker{color:var(--text-subdued);}
details.disclosure > *:not(summary){margin-top:var(--s-5);}

/* ---------- Quick Pay ---------- */
.quickpay{border:1px solid var(--border-card);border-radius:var(--r-card);overflow:hidden;background:#fff;}
.quickpay__head{background:var(--blue-deep);color:#fff;padding:var(--s-5) var(--s-6);font-size:var(--fs-h4);font-weight:var(--fw-light);}
.quickpay__tabs{display:flex;border-bottom:1px solid var(--border-card);}
.quickpay__tabs a{
  flex:1;text-align:center;padding:var(--s-5);font-size:var(--fs-sm);
  color:var(--text-regular);border-bottom:3px solid transparent;
}
.quickpay__tabs a[aria-current="page"]{color:var(--blue-brand);border-bottom-color:var(--blue-brand);font-weight:var(--fw-semibold);}
.quickpay__body{padding:var(--s-6);}
.quickpay__body .field{margin-bottom:var(--s-6);}

/* ---------- account detail ---------- */
.balance-head{display:grid;grid-template-columns:1fr;gap:var(--s-6);margin-bottom:var(--s-7);}
@media (min-width:560px){.balance-head{grid-template-columns:repeat(3,1fr);}}
.balance-head .stat{background:var(--surface-tile);border-radius:var(--r-tile);padding:var(--s-6);}
.balance-head .stat dt{font-size:var(--fs-sm);color:var(--text-subdued);margin-bottom:var(--s-2);}
.balance-head .stat dd{
  margin:0;font-size:var(--fs-h3);line-height:var(--lh-h3);font-weight:var(--fw-light);
  font-variant-numeric:tabular-nums;
}
.filter-bar{display:flex;gap:var(--s-6);align-items:flex-end;flex-wrap:wrap;margin-bottom:var(--s-7);}
.filter-bar .field{margin-bottom:0;min-width:150px;}
.pagination{display:flex;gap:var(--s-6);align-items:center;justify-content:center;margin-top:var(--s-7);font-size:var(--fs-sm);}

.receipt-number{
  font-size:var(--fs-h3);line-height:var(--lh-h3);font-weight:var(--fw-light);
  font-variant-numeric:tabular-nums;
}

.chip{
  display:inline-block;border-radius:var(--r-chip);padding:2px 10px;
  font-size:var(--fs-xs);font-weight:var(--fw-semibold);
}
.chip--pending{background:var(--warning-bg);color:var(--warning);}
.chip--completed{background:var(--success-bg);color:var(--success);}
.chip--scheduled{background:var(--info-bg);color:var(--info);}
.chip--failed{background:var(--error-bg);color:var(--error);}

/* ==========================================================================
   Print
   ========================================================================== */
@media print{
  .site-header,.app-bar,.app-util,.sidenav,.app-aside,.site-footer,
  .btn,.btn-row,.skip-link,.filter-bar,.pagination{display:none !important;}
  .app-shell{display:block;padding:0;}
  .app-main{border:0;padding:0;}
  body{background:#fff;}
  details{display:block;}
  details > *{display:block !important;}
}