/* =====================================================================
   BILL WISE DESIGN SYSTEM
   =====================================================================

   The single source of truth for the public site's colour, type, spacing,
   shape and motion. The public and authentication layouts load:

       bootstrap.min.css   framework baseline (Reboot, grid, components)
       billwise.css        this file: tokens and primitives

   Three rules keep it from rotting:

   1. Tokens are declared in :root, here and nowhere else, and components
      use them. No literal colour appears outside the token blocks.
   2. Nothing here restyles a bare Bootstrap class. Every primitive has its
      own name, so the framework and the system never fight.
   3. Dark mode is a token override. Navy stays navy; only the cream band
      and card paper, and the type that sits on them, change. Components
      never ask which mode they are in.

   Sections
     01  Tokens
     02  Base and typography
     03  Container and bands
     04  Buttons
     05  Cards, grids and marks
     06  Forms
     07  Motion
     08  Utilities
     09  Masthead
     10  Footer
     11  Page head and closing call to action
     12  Homepage: hero and directory
     13  App preview card
     14  Inner page sections
     15  Welcome panel
     16  Authentication screens
     17  Responsive
   ===================================================================== */


/* ------------------------------------------------------------------ *
   01  TOKENS
 * ------------------------------------------------------------------ */

:root{

  /* Ground and accent. Gold is the accent: one thing at a time. */
  --ink:#0A1C33;
  --ink-raised:#102944;
  --gold:#D0A05C;
  --gold-soft:#E3BC80;
  --on-gold:#221704;

  /* The single light band, and what sits on it. Neutrals lean toward
     navy; nothing is a pure grey. */
  --cream:#FAF6EE;
  --paper:#FFFFFF;
  --text:#12233A;
  --muted:#5C6E86;
  --rule:#E3DCCE;

  /* Type, rules and washes on the navy ground. */
  --on-ink:#F4F1EA;
  --on-ink-muted:#A9B7CA;
  --rule-on-ink:#223A5C;
  --wash-on-ink:rgba(255,255,255,.06);
  --gold-wash:rgba(208,160,92,.12);

  /* States. --seal is the oxblood "filed" stamp, not a state. */
  --success:#2E7D5B;
  --success-tint:#EAF3EE;
  --danger:#B54747;
  --danger-tint:#F8ECEC;
  --warning:#9A6618;
  --warning-tint:#F7EFE2;
  --seal:#7A2A2A;

  /* Type. Playfair Display for display sizes only; Archivo for interface
     and body; IBM Plex Mono for eyebrows, amounts and metadata. */
  --font-display:'Playfair Display',Georgia,'Times New Roman',serif;
  --font-body:'Archivo',system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
  --font-mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,'Liberation Mono',monospace;

  /* Shape and depth. The shadow is spent on the app card alone. */
  --radius:4px;
  --radius-pill:999px;
  --shadow-app:0 30px 60px -28px rgba(4,12,24,.6),0 2px 8px rgba(4,12,24,.2);
  --focus:0 0 0 3px rgba(208,160,92,.45);

  /* Layout. The gutter never drops below 16px. */
  --container:1180px;
  --gutter:clamp(16px,4vw,40px);
  --measure:65ch;
  --band-y:clamp(56px,8vw,96px);
  --band-y-sm:clamp(40px,6vw,64px);

  /* Motion. */
  --ease:cubic-bezier(.2,.7,.3,1);
  --speed:180ms;

  /* Console aliases. website.css, the platform console's stylesheet, was
     written against these names. They resolve to the tokens above, so a
     colour is still decided in one place. Do not add new ones. */
  --billwise-gutter:var(--gutter);
  --billwise-container:var(--container);
  --navy:var(--ink);
  --teal:var(--ink);
  --brass:var(--gold);
  --brass-light:var(--gold-soft);
}

@media (prefers-color-scheme:dark){
  :root{
    --cream:#0E1F36;
    --paper:#132A48;
    --text:#E6EBF2;
    --muted:#A3B2C6;
    --rule:#26406A;
    --success-tint:#12352B;
    --danger-tint:#3A1D22;
    --warning-tint:#3A2C17;
  }
}


/* ------------------------------------------------------------------ *
   02  BASE AND TYPOGRAPHY
 * ------------------------------------------------------------------ */

body{
  background:var(--cream);
  color:var(--text);
  font-family:var(--font-body);
  font-size:1rem;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

a{color:var(--text);text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{color:var(--muted)}

h1,h2,h3,h4{text-wrap:balance}

.hero-title{
  font-family:var(--font-display);
  font-size:clamp(2.75rem,5.6vw,4.75rem);
  line-height:1.02;
  font-weight:600;
  letter-spacing:-.015em;
  color:var(--text);
  margin:0 0 22px;
}
.hero-title span,.hero-title em{display:block}
.hero-title em{font-style:normal;color:var(--gold)}

.page-title{
  font-family:var(--font-display);
  font-size:clamp(2.25rem,4.6vw,3.6rem);
  line-height:1.06;
  font-weight:600;
  letter-spacing:-.01em;
  color:var(--text);
  margin:0 0 16px;
  max-width:22ch;
}

.section-title{
  font-family:var(--font-display);
  font-size:clamp(1.75rem,3.2vw,2.6rem);
  line-height:1.12;
  font-weight:600;
  letter-spacing:-.01em;
  color:var(--text);
  margin:0 0 16px;
}

.subsection-title{
  font-family:var(--font-display);
  font-size:1.25rem;
  line-height:1.3;
  font-weight:500;
  color:var(--text);
  margin:0 0 8px;
}

.section-lede{
  font-size:1.125rem;
  line-height:1.65;
  color:var(--muted);
  margin:0 0 8px;
  max-width:var(--measure);
}

.section-description{
  font-size:1rem;
  line-height:1.7;
  color:var(--muted);
  max-width:var(--measure);
}

.text-fine{font-size:.8125rem;line-height:1.6;color:var(--muted)}

/* Amounts, matter numbers and dates line up only in the mono face with
   tabular figures. Prefixed because Bootstrap already has .figure. */
.billwise-figure{font-family:var(--font-mono);font-variant-numeric:tabular-nums}

/* On the navy ground, invert once rather than restating every colour. */
.on-navy{background:var(--ink);color:var(--on-ink)}
.on-navy .hero-title,.on-navy .page-title,.on-navy .section-title,.on-navy .subsection-title{color:var(--on-ink)}
.on-navy .section-lede,.on-navy .section-description,.on-navy .text-fine{color:var(--on-ink-muted)}
.on-navy a{color:var(--gold-soft)}


/* ------------------------------------------------------------------ *
   03  CONTAINER AND BANDS
 * ------------------------------------------------------------------ */

.billwise-container{
  width:min(100% - (var(--gutter) * 2),var(--container));
  margin-inline:auto;
}
.billwise-container-narrow{
  width:min(100% - (var(--gutter) * 2),820px);
  margin-inline:auto;
}

.section{padding:var(--band-y) 0}
.section-sm{padding:var(--band-y-sm) 0}
.section-lg{padding:calc(var(--band-y) * 1.25) 0}

/* Every inner page body sits on the one cream band, with a hairline
   between the sections it holds. The older names resolve to it. */
.section-cream,.section-white,.section-paper,.section-tint{background:var(--cream)}
.section-cream + .section-cream{border-top:1px solid var(--rule)}

.section-head{max-width:720px;margin:0 auto 48px;text-align:center}
.section-head .section-lede,.section-head .section-description{margin-inline:auto}

.section-head-start{max-width:var(--measure);margin:0 0 40px;text-align:left}
.section-head-start .section-lede{margin-inline:0}


/* ------------------------------------------------------------------ *
   04  BUTTONS
 * ------------------------------------------------------------------ */

.btn-billwise,
.btn-billwise-outline,
.btn-billwise-navy,
.btn-billwise-ghost{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-family:var(--font-body);font-size:.9375rem;font-weight:600;
  line-height:1;text-align:center;text-decoration:none;white-space:nowrap;
  padding:14px 22px;border-radius:var(--radius);
  border:1px solid transparent;cursor:pointer;
  transition:background-color var(--speed) var(--ease),
             border-color var(--speed) var(--ease),
             color var(--speed) var(--ease);
}

/* Gold with near-black text. Gold with navy text sat too close in value
   to the navy behind it, and the button read as disabled. */
.btn-billwise{background:var(--gold);border-color:var(--gold);color:var(--on-gold)}
.btn-billwise:hover,.btn-billwise:focus-visible{background:var(--gold-soft);border-color:var(--gold-soft);color:var(--on-gold)}

.btn-billwise-navy{background:var(--ink);border-color:var(--ink);color:var(--on-ink)}
.btn-billwise-navy:hover,.btn-billwise-navy:focus-visible{background:var(--ink-raised);border-color:var(--ink-raised);color:var(--on-ink)}

.btn-billwise-outline{background:transparent;border-color:var(--text);color:var(--text)}
.btn-billwise-outline:hover,.btn-billwise-outline:focus-visible{background:var(--text);border-color:var(--text);color:var(--cream)}

.btn-billwise-ghost{background:transparent;color:var(--text)}
.btn-billwise-ghost:hover,.btn-billwise-ghost:focus-visible{background:var(--rule);color:var(--text)}

.on-navy .btn-billwise-outline{border-color:var(--on-ink-muted);color:var(--on-ink)}
.on-navy .btn-billwise-outline:hover,.on-navy .btn-billwise-outline:focus-visible{border-color:var(--on-ink);background:var(--wash-on-ink);color:var(--on-ink)}

.btn-billwise-sm{padding:10px 16px;font-size:.875rem}
.btn-billwise-lg{padding:16px 26px;font-size:1rem}
.btn-billwise-block{display:flex;width:100%}

/* A visible focus ring is not optional. */
.btn-billwise:focus-visible,
.btn-billwise-outline:focus-visible,
.btn-billwise-navy:focus-visible,
.btn-billwise-ghost:focus-visible{outline:none;box-shadow:var(--focus)}

.btn-row{display:flex;flex-wrap:wrap;gap:12px;align-items:center}


/* ------------------------------------------------------------------ *
   05  CARDS, GRIDS AND MARKS
 * ------------------------------------------------------------------ */

/* Flat and ruled. No block carries a shadow; that is kept for the app
   card, so the product is the one thing that lifts off the page. */
.billwise-card{
  background:var(--paper);
  border:1px solid var(--rule);
  border-radius:var(--radius);
  padding:28px;
}
.billwise-card-lg{padding:36px}
.billwise-card-flat{background:var(--paper)}
.billwise-card-quiet{background:transparent}
.billwise-card-interactive{transition:border-color var(--speed) var(--ease)}
.billwise-card-interactive:hover{border-color:var(--text)}

.on-navy .billwise-card{
  background:var(--ink-raised);
  border-color:var(--rule-on-ink);
  color:var(--on-ink);
}

/* An icon plate, sized so a Bootstrap Icon sits centred without nudging. */
.billwise-icon{
  width:42px;height:42px;flex-shrink:0;
  display:inline-flex;align-items:center;justify-content:center;
  border-radius:var(--radius);border:1px solid var(--rule);
  background:var(--cream);color:var(--text);
  font-size:1.125rem;line-height:1;
}
.billwise-icon-navy{background:var(--ink);border-color:var(--ink);color:var(--gold)}
.on-navy .billwise-icon{background:var(--wash-on-ink);border-color:var(--rule-on-ink);color:var(--gold)}

.billwise-grid{display:grid;gap:24px}
.billwise-grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.billwise-grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.billwise-grid-4{grid-template-columns:repeat(4,minmax(0,1fr))}

/* Eyebrows are mono and letter-spaced: gold on navy, muted on cream,
   where gold at this size would not be legible. */
.eyebrow{
  display:inline-block;
  font-family:var(--font-mono);
  font-size:.75rem;font-weight:500;
  letter-spacing:.2em;text-transform:uppercase;
  color:var(--muted);
  margin:0 0 14px;
}
.on-navy .eyebrow{color:var(--gold)}

.ledger-rule{display:flex;align-items:center;justify-content:center;gap:12px;color:var(--gold)}
.ledger-rule:before,.ledger-rule:after{content:"";height:1px;width:34px;background:var(--rule)}

.billwise-pill{
  display:inline-flex;align-items:center;gap:7px;
  padding:4px 10px;border-radius:var(--radius-pill);
  background:var(--paper);border:1px solid var(--rule);
  font-family:var(--font-mono);font-size:.6875rem;font-weight:500;
  letter-spacing:.08em;text-transform:uppercase;color:var(--text);
}
.billwise-pill-brass{background:var(--gold-wash);border-color:var(--gold)}
.on-navy .billwise-pill{background:var(--wash-on-ink);border-color:var(--rule-on-ink);color:var(--on-ink)}


/* ------------------------------------------------------------------ *
   06  FORMS
 * ------------------------------------------------------------------ */

.billwise-field{margin-bottom:18px}
.billwise-label{
  display:block;font-family:var(--font-mono);font-size:.6875rem;font-weight:500;
  letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);margin-bottom:7px;
}
.billwise-input,.billwise-select,.billwise-textarea{
  width:100%;padding:12px 14px;
  font-family:var(--font-body);font-size:.9375rem;
  color:var(--text);background:var(--paper);
  border:1px solid var(--rule);
  border-radius:var(--radius);
  transition:border-color var(--speed) var(--ease),
             box-shadow var(--speed) var(--ease);
}
.billwise-input:focus,.billwise-select:focus,.billwise-textarea:focus{
  outline:none;border-color:var(--gold);box-shadow:var(--focus);
}
.billwise-input[aria-invalid="true"]{border-color:var(--danger)}
.billwise-hint{display:block;font-size:.75rem;color:var(--muted);margin-top:6px}
.billwise-error{display:block;font-size:.8125rem;color:var(--danger);margin-top:6px}


/* ------------------------------------------------------------------ *
   07  MOTION

   One entrance, on the hero: a short fade and rise, each part 80ms after
   the one before. Nothing waits on a scroll observer, so the page is
   readable at rest, and with motion reduced it is simply there.
 * ------------------------------------------------------------------ */

.rise{animation:billwise-rise 560ms var(--ease) both}
.rise-2{animation-delay:80ms}
.rise-3{animation-delay:160ms}
.rise-4{animation-delay:240ms}
.rise-5{animation-delay:320ms}
.rise-6{animation-delay:400ms}
@keyframes billwise-rise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}

@media (prefers-reduced-motion:reduce){
  .rise{animation:none}
  *,*::before,*::after{
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
}


/* ------------------------------------------------------------------ *
   08  UTILITIES
 * ------------------------------------------------------------------ */

.text-brass{color:var(--gold)}
.text-navy{color:var(--text)}
.text-muted-bw{color:var(--muted)}
.bg-navy{background:var(--ink)}
.bg-paper{background:var(--paper)}
.rule{height:1px;background:var(--rule);border:0;margin:0}
.rule-on-navy{height:1px;background:var(--rule-on-ink);border:0;margin:0}

/* Jumps a keyboard user past the masthead. */
.skip-link{
  position:absolute;left:16px;top:-60px;z-index:1040;
  padding:10px 16px;border-radius:var(--radius);
  background:var(--gold);color:var(--on-gold);
  font-size:.875rem;font-weight:600;text-decoration:none;
  transition:top var(--speed) var(--ease);
}
.skip-link:focus{top:12px;color:var(--on-gold)}

.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;
}


/* ------------------------------------------------------------------ *
   09  MASTHEAD

   Wordmark, links, then Log in and the gold call to action. Below 1000px
   the links take a row of their own and wrap, rather than scrolling
   sideways or hiding behind a menu button.
 * ------------------------------------------------------------------ */

.billwise-masthead{
  position:sticky;top:0;z-index:1030;
  background:var(--ink);
  border-bottom:1px solid var(--rule-on-ink);
}
.billwise-masthead-inner{
  display:flex;flex-wrap:wrap;align-items:center;
  column-gap:24px;row-gap:4px;
  min-height:72px;padding-block:12px;
}

.billwise-wordmark{
  display:inline-flex;align-items:baseline;gap:9px;
  font-family:var(--font-display);font-size:1.3rem;font-weight:600;
  color:var(--on-ink);text-decoration:none;white-space:nowrap;
}
.billwise-wordmark span{
  font-family:var(--font-mono);font-size:.625rem;font-weight:500;
  letter-spacing:.2em;text-transform:uppercase;color:var(--gold);
}
.billwise-wordmark:hover{color:var(--on-ink)}

.billwise-masthead-links{
  display:flex;flex-wrap:wrap;align-items:center;gap:2px;
  margin:0 0 0 auto;padding:0;list-style:none;
}
.billwise-masthead-links a{
  display:block;padding:8px 12px;
  font-size:.875rem;font-weight:500;color:var(--on-ink-muted);text-decoration:none;
  transition:color var(--speed) var(--ease);
}
.billwise-masthead-links a:hover{color:var(--on-ink)}
.billwise-masthead-links a.is-current{color:var(--on-ink);box-shadow:inset 0 -2px 0 var(--gold)}

.billwise-masthead-actions{display:flex;align-items:center;gap:6px}
.billwise-masthead-signin{
  padding:8px 12px;font-size:.875rem;font-weight:600;
  color:var(--on-ink);text-decoration:none;
}
.billwise-masthead-signin:hover{color:var(--gold-soft)}

/* The reduced masthead on the authentication screens: wordmark and a way
   back, nothing that would lead out of the form. */
.billwise-masthead-back{margin-left:auto}


/* ------------------------------------------------------------------ *
   10  FOOTER
 * ------------------------------------------------------------------ */

.billwise-footer{
  background:var(--ink);
  color:var(--on-ink-muted);
  padding:64px 0 0;
}
.billwise-footer-top{
  display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:48px;
  padding-bottom:48px;
}
.billwise-footer .billwise-wordmark{margin-bottom:14px}
.billwise-footer-blurb{
  font-size:.9375rem;line-height:1.7;max-width:40ch;margin:0;
  color:var(--on-ink-muted);
}
.billwise-footer h2{
  font-family:var(--font-mono);font-size:.6875rem;font-weight:500;
  letter-spacing:.2em;text-transform:uppercase;
  color:var(--gold);margin:0 0 16px;
}
.billwise-footer ul{list-style:none;margin:0;padding:0}
.billwise-footer li{margin-bottom:10px}
.billwise-footer li a{
  color:var(--on-ink);font-size:.9375rem;text-decoration:none;
  transition:color var(--speed) var(--ease);
}
.billwise-footer li a:hover{color:var(--gold-soft)}

.billwise-footer-baseline{
  display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px 24px;
  padding:22px 0 28px;border-top:1px solid var(--rule-on-ink);
  font-family:var(--font-mono);font-size:.75rem;letter-spacing:.02em;
}
.billwise-footer-baseline p{margin:0}


/* ------------------------------------------------------------------ *
   11  PAGE HEAD AND CLOSING CALL TO ACTION

   Every inner page opens on a navy head and closes on the same call to
   action. The homepage has neither: it ends at its directory row.
 * ------------------------------------------------------------------ */

.page-head{padding:clamp(48px,7vw,88px) 0 clamp(44px,6vw,72px)}
.page-lede{
  font-size:1.125rem;line-height:1.65;
  color:var(--on-ink-muted);max-width:var(--measure);margin:0;
}

.billwise-cta-band{padding:var(--band-y-sm) 0;text-align:center}
.billwise-cta-band .section-title{max-width:24ch;margin-inline:auto}
.billwise-cta-band .section-lede{margin-inline:auto}
.billwise-cta-band .btn-row{justify-content:center;margin-top:24px}

/* Kept for pages still using the older name. */
.billwise-cta{text-align:center}
.billwise-cta .btn-row{justify-content:center}


/* ------------------------------------------------------------------ *
   12  HOMEPAGE: HERO AND DIRECTORY
 * ------------------------------------------------------------------ */

.billwise-hero{padding:clamp(56px,8vw,104px) 0 clamp(64px,9vw,112px)}
.billwise-hero-grid{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
  gap:clamp(40px,5vw,72px);align-items:center;
}
.billwise-hero .eyebrow{letter-spacing:.24em}
.billwise-hero-lede{
  font-size:1.1875rem;line-height:1.6;color:var(--on-ink-muted);
  max-width:52ch;margin:0 0 30px;
}
.billwise-hero-note{
  margin:22px 0 0;font-family:var(--font-mono);font-size:.75rem;
  letter-spacing:.06em;color:var(--on-ink-muted);
}

/* The only way off a hero-only homepage, so it is given the weight of a
   band: cream, under a gold rule, four ruled columns. */
.billwise-directory{background:var(--cream);border-top:3px solid var(--gold)}
.billwise-directory-list{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  margin:0;padding:0;list-style:none;
  border-inline:1px solid var(--rule);
}
.billwise-directory-list li + li{border-left:1px solid var(--rule)}
.billwise-directory-link{
  display:block;height:100%;padding:32px 26px 36px;
  color:var(--text);text-decoration:none;
  transition:background-color var(--speed) var(--ease);
}
.billwise-directory-link:hover{background:var(--paper);color:var(--text)}
.billwise-directory-link h2{
  display:flex;align-items:baseline;gap:10px;
  font-family:var(--font-display);font-size:1.375rem;font-weight:500;line-height:1.25;
  margin:0 0 8px;
}
.billwise-directory-arrow{
  color:var(--gold);font-family:var(--font-body);
  transition:transform var(--speed) var(--ease);
}
.billwise-directory-link:hover .billwise-directory-arrow{transform:translateX(4px)}
.billwise-directory-link p{margin:0;font-size:.9375rem;line-height:1.55;color:var(--muted)}


/* ------------------------------------------------------------------ *
   13  APP PREVIEW CARD

   A drawn representation of the workspace, not a screenshot. Navy chrome,
   the sidebar on the raised navy, the ledger on paper. The one element on
   the site that carries a shadow.
 * ------------------------------------------------------------------ */

.billwise-mockup{
  background:var(--paper);
  border:1px solid var(--rule-on-ink);
  border-radius:var(--radius);
  box-shadow:var(--shadow-app);
  overflow:hidden;
}

.billwise-mockup-bar{
  display:flex;align-items:center;gap:12px;
  padding:11px 16px;
  background:var(--ink);
  border-bottom:1px solid var(--rule-on-ink);
}
.billwise-mockup-dots{display:flex;gap:6px}
.billwise-mockup-dots span{width:9px;height:9px;border-radius:50%;background:var(--rule-on-ink)}
.billwise-mockup-bar b{font-family:var(--font-display);font-size:.875rem;font-weight:600;color:var(--on-ink)}
.billwise-mockup-badge{
  margin-left:auto;
  font-family:var(--font-mono);font-size:.625rem;font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;
  color:var(--gold-soft);border:1px solid var(--gold-soft);
  padding:2px 8px;border-radius:var(--radius-pill);
}

.billwise-mockup-body{display:grid;grid-template-columns:150px minmax(0,1fr)}

.billwise-mockup-side{background:var(--ink-raised);padding:14px 0}
.billwise-mockup-side ul{list-style:none;margin:0;padding:0}
.billwise-mockup-side li{
  display:flex;align-items:center;gap:9px;
  padding:9px 16px;font-size:.8125rem;color:var(--on-ink-muted);
  border-left:2px solid transparent;
}
.billwise-mockup-side li.is-current{
  color:var(--on-ink);background:var(--wash-on-ink);
  border-left-color:var(--gold);font-weight:600;
}

.billwise-mockup-main{padding:22px 22px 18px;background:var(--paper)}
.billwise-mockup-matter{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 12px;
  padding-bottom:12px;border-bottom:1px solid var(--rule);
}
.billwise-mockup-matter b{font-family:var(--font-display);font-size:1.125rem;font-weight:600;color:var(--text)}
.billwise-mockup-matter span{font-family:var(--font-mono);font-size:.75rem;color:var(--muted)}

.billwise-mockup-rows{width:100%;border-collapse:collapse}
.billwise-mockup-rows th{
  font-family:var(--font-mono);font-size:.625rem;font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;color:var(--muted);
  text-align:left;padding:12px 0 8px;
}
.billwise-mockup-rows th:last-child,.billwise-mockup-rows td:last-child{text-align:right}
.billwise-mockup-rows td{
  padding:10px 0;font-size:.8125rem;color:var(--text);
  border-top:1px solid var(--rule);vertical-align:top;
}
.billwise-mockup-rows td small{
  display:block;margin-top:3px;
  font-family:var(--font-mono);font-size:.6875rem;color:var(--muted);
}
.billwise-mockup-rows td:last-child{
  padding-left:16px;white-space:nowrap;
  font-family:var(--font-mono);font-variant-numeric:tabular-nums;
}

.billwise-mockup-total{
  display:flex;justify-content:space-between;align-items:baseline;gap:14px;
  margin-top:14px;padding:13px 16px;
  background:var(--ink);border-radius:var(--radius);
}
.billwise-mockup-total span{
  font-family:var(--font-mono);font-size:.625rem;font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;color:var(--on-ink-muted);
}
.billwise-mockup-total b{
  font-family:var(--font-mono);font-size:1.3rem;font-weight:500;
  font-variant-numeric:tabular-nums;color:var(--gold);
}
.billwise-mockup-caption{margin:12px 0 0;font-size:.75rem;line-height:1.5;color:var(--muted)}


/* ------------------------------------------------------------------ *
   14  INNER PAGE SECTIONS
 * ------------------------------------------------------------------ */

/* The assurance strip: claims the system actually implements. */
.billwise-assurance{
  border-block:1px solid var(--rule);
  padding:20px 0;margin-bottom:44px;
}
.billwise-assurance-inner{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:14px 36px;
}
.billwise-assurance-inner > p{
  margin:0;font-family:var(--font-mono);font-size:.75rem;font-weight:500;
  letter-spacing:.18em;text-transform:uppercase;color:var(--muted);
}
.billwise-assurance-inner ul{display:flex;flex-wrap:wrap;gap:10px 28px;list-style:none;margin:0;padding:0}
.billwise-assurance-inner li{
  display:flex;align-items:center;gap:9px;
  font-size:.9375rem;font-weight:500;color:var(--text);
}
.billwise-assurance-inner li i{color:var(--gold)}

/* Steps: ruled columns, the number in mono. */
.billwise-steps{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  border-top:1px solid var(--rule);
}
.billwise-step{padding:28px 28px 4px 0}
.billwise-step + .billwise-step{padding-left:28px;border-left:1px solid var(--rule)}
.billwise-step-no{
  display:block;margin-bottom:12px;
  font-family:var(--font-mono);font-size:.8125rem;font-weight:500;
  letter-spacing:.1em;color:var(--muted);
}

/* Plans. The recommended one carries the gold rule, not a shadow. */
.billwise-plans{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));
  gap:24px;max-width:1000px;margin-inline:auto;align-items:stretch;
}
.billwise-plan{position:relative;display:flex;flex-direction:column}
.billwise-plan-best{border-color:var(--text);border-top:3px solid var(--gold)}
.billwise-plan-flag{position:absolute;top:18px;right:18px}
.billwise-plan-promo{margin:6px 0 8px}
.billwise-plan-amount{
  font-family:var(--font-mono);font-size:2.25rem;font-weight:500;
  font-variant-numeric:tabular-nums;color:var(--text);
  line-height:1.1;margin:8px 0 4px;
}
.billwise-plan-amount span{font-size:.8125rem;color:var(--muted)}
.billwise-plan ul{
  list-style:none;margin:18px 0 24px;padding:18px 0 0;
  border-top:1px solid var(--rule);flex:1;
}
.billwise-plan li{
  display:flex;gap:10px;margin-bottom:10px;
  font-size:.9375rem;line-height:1.5;color:var(--text);
}
.billwise-plan li i{color:var(--success);margin-top:2px}

/* Questions. Bootstrap's accordion, dressed through its own variables and
   scoped under .billwise-faq so the framework component stays as shipped
   everywhere else. The chevron is a mask, so it takes the token colour in
   either mode. */
.billwise-faq.accordion{
  --bs-accordion-bg:var(--paper);
  --bs-accordion-color:var(--text);
  --bs-accordion-border-color:var(--rule);
  --bs-accordion-border-radius:var(--radius);
  --bs-accordion-inner-border-radius:var(--radius);
  --bs-accordion-btn-color:var(--text);
  --bs-accordion-btn-bg:var(--paper);
  --bs-accordion-active-color:var(--text);
  --bs-accordion-active-bg:var(--paper);
  --bs-accordion-btn-focus-box-shadow:var(--focus);
}
.billwise-faq .accordion-item{
  margin-bottom:10px;overflow:hidden;
  background:var(--paper);border:1px solid var(--rule);
  border-radius:var(--radius) !important;
}
.billwise-faq .accordion-button{
  padding:18px 20px;
  font-family:var(--font-body);font-size:1rem;font-weight:600;
  color:var(--text);background:var(--paper);box-shadow:none;
}
.billwise-faq .accordion-button:not(.collapsed){color:var(--text);background:var(--paper);box-shadow:inset 0 -1px 0 var(--rule)}
.billwise-faq .accordion-button:focus{box-shadow:var(--focus)}
.billwise-faq .accordion-button::after{
  background-image:none;background-color:var(--muted);
  -webkit-mask:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e") center/1rem no-repeat;
  mask:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e") center/1rem no-repeat;
}
.billwise-faq .accordion-body{
  padding:16px 20px 20px;
  font-size:.9375rem;line-height:1.7;color:var(--muted);
}


/* ------------------------------------------------------------------ *
   15  WELCOME PANEL
 * ------------------------------------------------------------------ */

.modal-backdrop.welcome-backdrop{background:var(--ink)}
.modal-backdrop.welcome-backdrop.show{opacity:.78}

.billwise-welcome-modal{
  background:var(--paper);color:var(--text);
  border:1px solid var(--rule);border-top:3px solid var(--gold);
  border-radius:var(--radius);
  overflow:hidden;
}
#welcomeModal .modal-dialog{max-width:486px}

.welcome-close{
  position:absolute;top:12px;right:12px;z-index:2;
  width:32px;height:32px;border:0;background:none;padding:0;
  color:var(--muted);font-size:1.25rem;line-height:1;cursor:pointer;
  border-radius:var(--radius);
}
.welcome-close:hover{color:var(--text);background:var(--cream)}
.welcome-close:focus-visible{outline:none;box-shadow:var(--focus)}

/* The mark inside draws in currentColor, so the gold comes from here. */
.welcome-logo{
  width:56px;height:56px;margin:0 auto;display:flex;
  align-items:center;justify-content:center;
  background:var(--ink);border-radius:var(--radius);
  color:var(--gold);
}
.welcome-logo svg{width:30px;height:30px}
.welcome-logo img{width:34px;height:34px;object-fit:contain}

.welcome-eyebrow{
  font-family:var(--font-mono);font-size:.6875rem;font-weight:500;
  letter-spacing:.22em;text-transform:uppercase;
  color:var(--muted);margin:0 0 10px;
}
.welcome-title{
  font-family:var(--font-display);
  font-size:1.875rem;line-height:1.15;font-weight:600;
  color:var(--text);margin:0 0 14px;
}
.welcome-text{
  font-size:.9375rem;line-height:1.65;
  color:var(--muted);margin:0 auto 22px;max-width:380px;
}

.welcome-security{
  display:flex;gap:12px;text-align:left;
  background:var(--cream);
  border:1px solid var(--rule);
  border-radius:var(--radius);
  padding:14px 16px;margin-bottom:24px;
  font-size:.8125rem;line-height:1.6;color:var(--muted);
}
.welcome-security i{color:var(--gold);font-size:1.0625rem;line-height:1.4}
.welcome-security b{display:block;color:var(--text);font-weight:600;margin-bottom:2px}

.continue-btn{
  background:none;border:0;padding:4px;
  font-size:.8125rem;font-weight:600;color:var(--muted);
  text-decoration:underline;text-underline-offset:3px;
}
.continue-btn:hover{color:var(--text)}

.welcome-legal{
  font-size:.6875rem;line-height:1.6;color:var(--muted);
  margin:20px 0 0;padding-top:16px;border-top:1px solid var(--rule);
}


/* ------------------------------------------------------------------ *
   16  AUTHENTICATION SCREENS
 * ------------------------------------------------------------------ */

.billwise-auth-wrap{
  min-height:calc(100vh - 72px);
  display:grid;place-items:center;
  padding:56px var(--gutter);
}
.billwise-auth{
  width:min(460px,100%);
  background:var(--paper);
  border:1px solid var(--rule);
  border-top:3px solid var(--gold);
  border-radius:var(--radius);
  padding:36px;
}
.billwise-auth-wide{width:min(620px,100%)}

.billwise-auth h1{
  font-family:var(--font-display);
  font-size:1.75rem;line-height:1.2;font-weight:600;
  color:var(--text);margin:0 0 8px;
}
.billwise-auth-intro{font-size:.9375rem;line-height:1.65;color:var(--muted);margin:0 0 24px}
.billwise-auth-foot{
  margin:22px 0 0;padding-top:20px;border-top:1px solid var(--rule);
  text-align:center;font-size:.875rem;color:var(--muted);
}
.billwise-auth-aside{display:flex;justify-content:flex-end;margin:-10px 0 18px;font-size:.8125rem}

.billwise-notice{
  display:flex;gap:11px;align-items:flex-start;
  padding:13px 15px;margin-bottom:20px;
  border:1px solid var(--rule);
  border-radius:var(--radius);
  background:var(--paper);
  font-size:.875rem;line-height:1.6;color:var(--muted);
}
.billwise-notice i{font-size:1rem;line-height:1.5;flex-shrink:0}
.billwise-notice p{margin:0}
.billwise-notice ul{margin:0;padding-left:18px}
.billwise-notice-ok{border-color:var(--success);background:var(--success-tint);color:var(--text)}
.billwise-notice-ok i{color:var(--success)}
.billwise-notice-bad{border-color:var(--danger);background:var(--danger-tint);color:var(--text)}
.billwise-notice-bad i{color:var(--danger)}
.billwise-notice-warn{border-color:var(--warning);background:var(--warning-tint);color:var(--text)}
.billwise-notice-warn i{color:var(--warning)}

/* Registration wizard progress. */
.billwise-steps-bar{display:flex;align-items:center;gap:8px;margin:0 0 26px;padding:0;list-style:none}
.billwise-steps-bar li{
  display:flex;align-items:center;gap:8px;flex:1;
  font-size:.75rem;font-weight:600;color:var(--muted);
}
.billwise-steps-bar li span{
  display:inline-flex;align-items:center;justify-content:center;
  width:26px;height:26px;flex-shrink:0;border-radius:50%;
  border:1px solid var(--rule);background:var(--paper);
  font-family:var(--font-mono);font-size:.6875rem;
}
.billwise-steps-bar li.is-current{color:var(--text)}
.billwise-steps-bar li.is-current span{border-color:var(--gold);color:var(--text);background:var(--gold-wash)}
.billwise-steps-bar li.is-done{color:var(--muted)}
.billwise-steps-bar li.is-done span{border-color:var(--success);background:var(--success);color:var(--paper)}
.billwise-steps-bar li:not(:last-child):after{content:"";flex:1;height:1px;background:var(--rule)}

/* Choosing a plan during registration. */
.billwise-choice{
  display:flex;gap:12px;align-items:flex-start;
  padding:14px 16px;margin-bottom:10px;
  border:1px solid var(--rule);border-radius:var(--radius);
  background:var(--paper);cursor:pointer;
  transition:border-color var(--speed) var(--ease),background-color var(--speed) var(--ease);
}
.billwise-choice:hover{border-color:var(--gold)}
.billwise-choice:has(input:checked){border-color:var(--gold);background:var(--gold-wash)}
.billwise-choice input{margin-top:3px;flex-shrink:0}
.billwise-choice b{display:block;color:var(--text);font-size:.9375rem}
.billwise-choice em{display:block;font-style:normal;font-size:.875rem;color:var(--muted);margin-top:2px}
.billwise-choice small{display:block;font-size:.8125rem;color:var(--muted);margin-top:5px}
.billwise-choice-group{display:grid;gap:0;margin:16px 0 20px}

/* The review step's read-back of what was entered. */
.billwise-review{margin:0 0 22px}
.billwise-review dt{
  font-family:var(--font-mono);font-size:.625rem;font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);margin-top:14px;
}
.billwise-review dd{margin:3px 0 0;font-size:.9375rem;color:var(--text)}


/* ------------------------------------------------------------------ *
   17  RESPONSIVE

   Two columns down to 1000px, one below. Under 720px the app card drops
   its sidebar so the ledger keeps its width, and calls to action go full
   width. No width here is fixed wider than a 400px screen.
 * ------------------------------------------------------------------ */

@media (max-width:1000px){
  .billwise-hero-grid{grid-template-columns:minmax(0,1fr)}
  .billwise-grid-2{grid-template-columns:minmax(0,1fr)}
  .billwise-grid-3,.billwise-grid-4{grid-template-columns:repeat(2,minmax(0,1fr))}

  .billwise-masthead-links{order:3;width:100%;margin:0 0 0 -12px}
  .billwise-masthead-actions{margin-left:auto}

  .billwise-directory-list{grid-template-columns:repeat(2,minmax(0,1fr))}
  .billwise-directory-list li:nth-child(3){border-left:0}
  .billwise-directory-list li:nth-child(n+3){border-top:1px solid var(--rule)}

  .billwise-steps{grid-template-columns:minmax(0,1fr)}
  .billwise-step,.billwise-step + .billwise-step{padding:22px 0;border-left:0}
  .billwise-step + .billwise-step{border-top:1px solid var(--rule)}

  .billwise-footer-top{grid-template-columns:repeat(2,minmax(0,1fr))}
  .billwise-footer-top > :first-child{grid-column:1 / -1}
}

@media (max-width:720px){
  .billwise-mockup-body{grid-template-columns:minmax(0,1fr)}
  .billwise-mockup-side{display:none}

  .billwise-grid-3,.billwise-grid-4{grid-template-columns:minmax(0,1fr)}

  .billwise-directory-list{grid-template-columns:minmax(0,1fr)}
  .billwise-directory-list li + li{border-left:0;border-top:1px solid var(--rule)}

  .btn-row{flex-direction:column;align-items:stretch}
  .btn-row > *{width:100%}

  .section-head{margin-bottom:32px}
  .billwise-card{padding:22px}
  .billwise-card-lg{padding:26px}
  .billwise-auth{padding:26px 20px}
  .billwise-auth-wrap{padding:32px var(--gutter)}

  .billwise-footer{padding-top:48px}
  .billwise-footer-top{grid-template-columns:minmax(0,1fr);gap:32px}

  .billwise-steps-bar li{font-size:0}
  .billwise-steps-bar li.is-current{font-size:.75rem}
  .billwise-steps-bar li span{width:23px;height:23px}
}