:root{
    --navy:#1b2a41;
    --navy-light:#2c4267;
    --gold:#a9812f;
    --paper:#fdfcf9;
    --line:#d8d3c7;
    --ink:#20242b;
    --warn-bg:#fdecec;
    --warn-border:#c94b4b;
    --ok-bg:#eaf3ea;
  }
  *{box-sizing:border-box;}
  body{
    font-family:"Georgia","Cambria","Times New Roman",serif;
    background:#eef0f3;
    color:var(--ink);
    margin:0;
    padding:0 0 60px 0;
  }
  header{
    background:var(--navy);
    color:#fff;
    padding:22px 30px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    flex-wrap:wrap;
  }
  header h1{
    margin:0;
    font-size:1.6em;
    letter-spacing:0.5px;
  }
  header h1 span{
    color:#c7a33a;
  }
  header .tag{
    font-family:Arial, sans-serif;
    font-size:0.78em;
    color:#c9d2e0;
    margin-top:4px;
  }
  .toolbar{display:flex;gap:10px;flex-wrap:wrap;}
  button{
    font-family:Arial, sans-serif;
    font-size:0.85em;
    border:none;
    border-radius:4px;
    padding:9px 16px;
    cursor:pointer;
    background:var(--gold);
    color:#1b1b1b;
    font-weight:bold;
  }
  button.secondary{background:#3d5378;color:#fff;}
  button.danger{background:#a53d3d;color:#fff;}
  button:hover{filter:brightness(1.08);}
  main{max-width:1480px;margin:24px auto;padding:0 20px;}
  /* the bill table is landscape by nature — let it use the full window width */
  section.card.wide{
    max-width:none;
    width:calc(100vw - 40px);
    margin-left:calc(-50vw + 50% + 20px);
    margin-right:calc(-50vw + 50% + 20px);
  }
  section.card{
    background:var(--paper);
    border:1px solid var(--line);
    border-radius:6px;
    padding:20px 24px;
    margin-bottom:22px;
  }
  section.card h2{
    font-family:Arial, sans-serif;
    font-size:1.05em;
    text-transform:uppercase;
    letter-spacing:1px;
    color:var(--navy);
    border-bottom:2px solid var(--gold);
    padding-bottom:8px;
    margin-top:0;
  }
  .grid{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(220px,1fr));
    gap:14px 20px;
  }
  label{
    font-family:Arial, sans-serif;
    font-size:0.75em;
    text-transform:uppercase;
    letter-spacing:0.5px;
    color:#555;
    display:block;
    margin-bottom:4px;
  }
  input[type=text], input[type=date], input[type=number], select, textarea{
    width:100%;
    padding:7px 8px;
    border:1px solid #b9b9b9;
    border-radius:3px;
    font-family:Arial, sans-serif;
    font-size:0.9em;
    background:#fff;
  }
  .checkline{display:flex;align-items:center;gap:8px;margin-top:6px;}
  .checkline input{width:auto;}
  table{
    width:100%;
    border-collapse:collapse;
    font-family:Arial, sans-serif;
    font-size:0.76em;
    margin-top:12px;
  }
  #entryTable th, #entryTable td{ padding:4px 4px; }
  th, td{
    border:1px solid #c8c8c8;
    padding:6px 6px;
    vertical-align:top;
    text-align:left;
  }
  th{
    background:var(--navy-light);
    color:#fff;
    font-weight:normal;
    text-transform:uppercase;
    font-size:0.78em;
    letter-spacing:0.3px;
  }
  td input, td select, td textarea{
    border:1px solid #ddd;
    padding:4px;
    font-size:0.95em;
    min-width:70px;
  }
  td.num{text-align:right;font-variant-numeric:tabular-nums;}
  tr.weekend-row{background:#fdecec;}
  tr.page-break-row td{
    background:var(--navy);
    color:#fff;
    font-weight:bold;
    text-align:right;
    font-family:Arial, sans-serif;
  }
  .small-btn{
    padding:4px 8px;
    font-size:0.75em;
  }
  #errorPanel{font-family:Arial, sans-serif;font-size:0.88em;}
  .err-item{
    background:var(--warn-bg);
    border-left:4px solid var(--warn-border);
    padding:8px 12px;
    margin-bottom:6px;
    border-radius:3px;
  }
  .err-ok{
    background:var(--ok-bg);
    border-left:4px solid #4a8a4a;
    padding:8px 12px;
    border-radius:3px;
  }
  .summary-table{max-width:560px;margin-left:auto;font-family:Arial,sans-serif;font-size:0.95em;}
  .summary-table td{border:none;padding:6px 4px;}
  .summary-table tr.total-row td{
    border-top:2px solid var(--navy);
    font-weight:bold;
    font-size:1.1em;
    color:var(--navy);
  }
  .note{
    font-family:Arial, sans-serif;
    font-size:0.78em;
    color:#777;
    margin-top:6px;
  }
  .rate-hint{
    font-family:Arial, sans-serif;
    font-size:0.78em;
    color:var(--navy);
    background:#eef1f6;
    padding:6px 10px;
    border-radius:3px;
    margin-top:6px;
    display:inline-block;
  }
  /* ============ HOME SCREEN — Bill Wise Legal Costs identity ============ */
  /* navy #12294d · teal #12294d · brass #c9a227 · paper #f2f3f5 */
  #homeScreen{background:#f2f3f5;min-height:100vh;}
  .home-wrap{max-width:1000px;margin:0 auto;padding:0 26px;}
  .body-wrap{padding-top:34px;padding-bottom:44px;}
  .home-nav{background:#12294d;color:#fff;position:sticky;top:0;z-index:20;box-shadow:0 3px 14px rgba(18,41,77,.16);}
  .home-nav-inner{max-width:1000px;margin:0 auto;padding:13px 26px;display:flex;align-items:center;justify-content:space-between;gap:20px;}
  .nav-brand{font:bold 1.05em Georgia,serif;letter-spacing:.3px;white-space:nowrap;}
  .nav-brand span{color:#c9a227;}
  .nav-links{display:flex;align-items:center;gap:22px;font:normal .72em Arial,sans-serif;text-transform:uppercase;letter-spacing:1px;}
  .nav-links a{color:#dce4ee;text-decoration:none;}
  #homeScreen .login-btn{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.45);padding:9px 15px;}
  #homeScreen .account-btn{background:#c9a227;color:#12294d;padding:10px 16px;}

  .hero{
    background:#fff;
    border-bottom:3px solid #c9a227;
    padding:44px 0 40px 0;
  }
  .brandline{display:flex;align-items:center;gap:18px;margin-bottom:30px;}
  .logomark{width:74px;height:74px;flex:0 0 74px;}
  .wordmark .wm-main{
    font-family:Georgia,"Times New Roman",serif;
    font-size:2.7em;color:#12294d;line-height:0.95;letter-spacing:0.5px;
  }
  .wordmark .wm-rule{
    display:flex;align-items:center;gap:10px;margin-top:7px;
  }
  .wordmark .wm-rule:before, .wordmark .wm-rule:after{
    content:"";height:1px;background:#c9a227;flex:1;min-width:16px;
  }
  .wordmark .wm-rule span{
    font-family:Arial,sans-serif;font-size:0.72em;color:#12294d;
    text-transform:uppercase;letter-spacing:4px;white-space:nowrap;
  }

  .hero-h1{
    font-family:Georgia,"Times New Roman",serif;
    font-size:2.55em;line-height:1.18;color:#12294d;
    margin:0 0 4px 0;font-weight:bold;letter-spacing:-0.3px;
  }
  .hero-h1 span{color:#12294d;}
  .nib-divider{
    height:1px;background:#c9a227;width:230px;margin:20px 0 22px 0;position:relative;
  }
  .nib-divider:after{
    content:"";position:absolute;right:-1px;top:-4px;
    border-left:11px solid #c9a227;border-top:4px solid transparent;border-bottom:4px solid transparent;
  }
  .hero-lede{
    font-size:1.06em;line-height:1.7;color:#3c4654;max-width:64ch;margin:0 0 26px 0;
  }
  .hero-lede b{color:#12294d;}
  .hero-note{display:flex;gap:22px;flex-wrap:wrap;margin-top:25px;font:normal .72em Arial,sans-serif;color:#667181;text-transform:uppercase;letter-spacing:.7px;}
  .hero-note span:before{content:"\2713";color:#12294d;font-weight:bold;margin-right:7px;}
  .home-actions{display:flex;gap:12px;flex-wrap:wrap;}
  #homeScreen button.cta{
    background:#12294d;color:#fff;padding:14px 30px;font-size:0.95em;
    border-radius:3px;letter-spacing:0.3px;
  }
  #homeScreen button.cta:hover{background:#12294d;}
  #homeScreen button.ghost{
    background:transparent;color:#12294d;border:1px solid #c1c6cf;
    padding:13px 26px;font-size:0.92em;border-radius:3px;font-weight:bold;
    font-family:Arial,sans-serif;cursor:pointer;
  }
  #homeScreen button.ghost:hover{border-color:#c9a227;color:#12294d;}

  /* signature ledger strip */
  .ledger{
    background:#fff;border:1px solid #dfe2e7;border-top:3px solid #c9a227;
    font-family:Arial,sans-serif;margin-bottom:34px;
    box-shadow:0 3px 14px rgba(18,41,77,0.07);overflow-x:auto;
  }
  .ledger-head,.ledger-row,.ledger-total{
    display:grid;grid-template-columns:46px minmax(210px,1fr) 84px 60px 134px 106px;
    align-items:center;min-width:640px;
  }
  .ledger-head{background:#eef0f3;color:#5a6472;font-size:0.68em;text-transform:uppercase;letter-spacing:1.2px;}
  .ledger-head span{padding:9px 10px;}
  .ledger-row{border-bottom:1px solid #edeff2;font-size:0.83em;color:#2a2f37;}
  .ledger-row span{padding:11px 10px;}
  .ledger-row span:first-child{color:#a9b0ba;font-variant-numeric:tabular-nums;}
  .ledger .r{text-align:right;font-variant-numeric:tabular-nums;}
  .ledger-total{
    grid-template-columns:1fr 134px 106px;background:#12294d;color:#c9a227;
    font-size:0.79em;font-weight:bold;text-transform:uppercase;letter-spacing:0.8px;
  }
  .ledger-total span{padding:12px 10px;}

  .sec-h{
    font-family:Arial,sans-serif;font-size:0.74em;text-transform:uppercase;
    letter-spacing:2.4px;color:#12294d;font-weight:bold;
    margin:0 0 14px 0;padding-bottom:9px;border-bottom:1px solid #c9a227;
  }
  .about{
    background:#fff;border:1px solid #dfe2e7;padding:26px 28px;margin-bottom:22px;
  }
  .about p{color:#3c4654;line-height:1.72;margin:0 0 14px 0;max-width:74ch;}
  .services{
    display:grid;grid-template-columns:1fr 1fr;gap:14px 24px;margin-top:20px;
  }
  .svc{display:flex;gap:12px;align-items:flex-start;font-size:0.9em;color:#3c4654;line-height:1.5;}
  .svc .n{
    flex:0 0 26px;width:26px;height:26px;border-radius:50%;
    background:#12294d;color:#fff;font-family:Arial,sans-serif;font-size:0.8em;
    display:flex;align-items:center;justify-content:center;font-weight:bold;
  }
  .svc b{color:#12294d;}

  .two-col{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-bottom:22px;}
  .panel{background:#fff;border:1px solid #dfe2e7;padding:24px 26px;}
  ul.tick{list-style:none;margin:0;padding:0;}
  ul.tick li{
    color:#3c4654;font-size:0.9em;line-height:1.55;
    padding:0 0 10px 20px;position:relative;
  }
  ul.tick li:before{content:"";position:absolute;left:0;top:8px;width:8px;height:8px;background:#c9a227;}
  .rates{margin-bottom:20px;}
  .steps{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:22px;}
  .step{background:#fff;border:1px solid #dfe2e7;padding:20px 18px;}
  .step-no{font:bold .68em Arial,sans-serif;color:#12294d;text-transform:uppercase;letter-spacing:1.2px;}
  .step h3{font-size:1em;color:#12294d;margin:9px 0 7px;}
  .step p{font:normal .79em/1.5 Arial,sans-serif;color:#667181;margin:0;}
  .final-cta{background:#12294d;color:#fff;padding:30px 32px;display:flex;align-items:center;justify-content:space-between;gap:24px;margin-top:22px;}
  .final-cta h3{font-size:1.45em;margin:0 0 7px;}
  .final-cta p{font:normal .86em Arial,sans-serif;color:#d7e0ea;margin:0;}
  .modal-backdrop{position:fixed;inset:0;background:rgba(7,18,35,.72);z-index:100;display:none;align-items:center;justify-content:center;padding:20px;}
  .modal-backdrop.open{display:flex;}
  .auth-card{background:#fff;width:min(430px,100%);padding:30px;border-top:4px solid #c9a227;box-shadow:0 22px 60px rgba(0,0,0,.28);position:relative;}
  .auth-close{position:absolute;right:14px;top:12px;background:transparent;color:#667181;font-size:1.25em;padding:5px 9px;}
  .auth-card h2{color:#12294d;margin:0 0 7px;font-size:1.55em;}
  .auth-card .auth-lede{font:normal .86em/1.5 Arial,sans-serif;color:#667181;margin:0 0 22px;}
  .auth-field{margin-bottom:14px;}
  .auth-field label{color:#344052;}
  .auth-card input{padding:11px;border-color:#c7ccd4;}
  .auth-options{display:flex;align-items:center;justify-content:space-between;gap:12px;font:normal .78em Arial,sans-serif;color:#667181;margin:4px 0 18px;}
  .auth-options label{display:flex;align-items:center;gap:7px;text-transform:none;letter-spacing:0;margin:0;}
  .auth-options a,.auth-switch a{color:#12294d;}
  .auth-submit{width:100%;background:#12294d;color:#fff;padding:12px;}
  .auth-switch{text-align:center;font:normal .8em Arial,sans-serif;color:#667181;margin:18px 0 0;}
  .prototype-note{background:#fff8df;border-left:3px solid #c9a227;padding:9px 11px;font:normal .72em/1.45 Arial,sans-serif;color:#63562f;margin-top:17px;}
  .pricing-intro{text-align:center;max-width:650px;margin:0 auto 24px;color:#596474;line-height:1.65;}
  .pricing-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;max-width:780px;margin:0 auto 22px;}
  .price-card{background:#fff;border:1px solid #d9dde4;padding:28px;position:relative;box-shadow:0 4px 18px rgba(18,41,77,.06);}
  .price-card.recommended{border-top:4px solid #c9a227;}
  .price-badge{position:absolute;right:18px;top:18px;background:#eef5f3;color:#12294d;padding:6px 9px;font:bold .64em Arial,sans-serif;text-transform:uppercase;letter-spacing:1px;}
  .price-name{font:bold .72em Arial,sans-serif;text-transform:uppercase;letter-spacing:1.6px;color:#12294d;}
  .price-amount{font:bold 2.25em Georgia,serif;color:#12294d;margin:12px 0 2px;}
  .price-amount span{font:normal .36em Arial,sans-serif;color:#6c7581;}
  .price-summary{font:normal .83em/1.55 Arial,sans-serif;color:#667181;margin:0 0 18px;min-height:40px;}
  .price-list{list-style:none;margin:0 0 22px;padding:18px 0 8px;border-top:1px solid #e5e8ec;}
  .price-list li{font:normal .82em/1.5 Arial,sans-serif;color:#3f4a58;padding:0 0 9px 20px;position:relative;}
  .price-list li:before{content:"\2713";position:absolute;left:0;color:#12294d;font-weight:bold;}
  #homeScreen .price-action{width:100%;background:#12294d;color:#fff;padding:12px;}
  #homeScreen .price-card.recommended .price-action{background:#12294d;}
  .trial-note{text-align:center;font:normal .8em Arial,sans-serif;color:#596474;margin:0 0 28px;}
  .trial-note b{color:#12294d;}
  .faq{margin-top:24px;}
  .faq details{background:#fff;border:1px solid #dfe2e7;margin-bottom:9px;}
  .faq summary{cursor:pointer;padding:16px 19px;font:bold .86em Arial,sans-serif;color:#12294d;list-style:none;position:relative;padding-right:46px;}
  .faq summary::-webkit-details-marker{display:none;}
  .faq summary:after{content:"+";position:absolute;right:18px;top:11px;color:#12294d;font:normal 1.5em Arial,sans-serif;}
  .faq details[open] summary:after{content:"\2212";}
  .faq details p{font:normal .82em/1.6 Arial,sans-serif;color:#5d6876;margin:0;padding:0 19px 17px;max-width:80ch;}
  .fu-note{float:right;color:#8b94a1;letter-spacing:0.6px;text-transform:none;font-weight:normal;}
  table.ratecard{width:100%;border-collapse:collapse;font-family:Arial,sans-serif;font-size:0.85em;margin-top:2px;}
  table.ratecard th{
    background:transparent;color:#6b7480;font-size:0.82em;text-transform:uppercase;
    letter-spacing:1px;border:none;border-bottom:1px solid #e2e5ea;
    padding:9px 10px;text-align:left;font-weight:normal;
  }
  table.ratecard td{border:none;border-bottom:1px solid #eef0f3;padding:10px;color:#2f3742;}
  table.ratecard .r{text-align:right;font-variant-numeric:tabular-nums;}
  table.ratecard i{color:#8b94a1;font-style:normal;font-size:0.88em;}
  table.ratecard .none{color:#a8433f;font-style:italic;}
  .caveat{color:#7b8492;font-family:Arial,sans-serif;font-size:0.78em;font-style:italic;margin:14px 0 0 0;}
  .caveat.centre{text-align:center;margin-top:26px;}

  .band{background:#12294d;padding:26px 0 0 0;}
  .band-inner{display:flex;align-items:center;gap:20px;}
  .band-text{color:#dbe3ee;font-size:0.95em;line-height:1.6;}
  .band-text b{color:#c9a227;}
  .band-tag{text-align:center;padding:18px 0 22px 0;}
  .band-tag span{
    font-family:Georgia,serif;font-style:italic;color:#c9a227;font-size:1.02em;
    padding:0 18px;position:relative;
  }
  .band-tag span:before,.band-tag span:after{
    content:"";position:absolute;top:50%;width:60px;height:1px;background:#c9a227;opacity:0.55;
  }
  .band-tag span:before{right:100%;}
  .band-tag span:after{left:100%;}

  @media (max-width:780px){
    .two-col,.services,.steps,.pricing-grid{grid-template-columns:1fr;}
    .hero-h1{font-size:1.8em;}
    .wordmark .wm-main{font-size:2em;}
    .logomark{width:56px;height:56px;flex:0 0 56px;}
    .band-inner{flex-direction:column;text-align:center;}
    .nav-links a{display:none;}
    .home-nav-inner{padding:11px 16px;}
    .final-cta{align-items:flex-start;flex-direction:column;}
  }
  @media (prefers-reduced-motion: reduce){*{animation:none !important;transition:none !important;}}
  .demo-banner{background:#fff4cf;border-bottom:1px solid #d9bd5d;color:#594814;padding:12px 22px;font:normal .82em Arial,sans-serif;display:flex;align-items:center;justify-content:space-between;gap:16px;}
  .demo-banner b{color:#12294d;}
  .demo-banner a{background:#12294d;color:#fff;text-decoration:none;padding:9px 14px;border-radius:3px;font-weight:bold;white-space:nowrap;}

  .pagebar{
    display:flex;gap:18px;flex-wrap:wrap;align-items:flex-end;
    background:#eef1f6;border:1px solid #dfe3ea;border-radius:4px;
    padding:10px 14px;margin:10px 0;
  }
  .pagebar-grp{display:flex;flex-direction:column;gap:4px;}
  .pagebar-grp label{margin-bottom:0;}
  .pagebar-grp select{width:auto;min-width:150px;}
  #pageNav{display:flex;gap:4px;flex-wrap:wrap;align-items:center;padding-bottom:2px;}

  .fold-btn{
    background:transparent;border:1px solid rgba(255,255,255,0.4);color:#fff;
    font-size:0.8em;padding:1px 6px;margin-right:8px;border-radius:3px;cursor:pointer;
  }
  .fold-btn:hover{background:rgba(255,255,255,0.15);}
  tr.folded-row td{background:#eef1f6;padding:6px 8px;}
  tr.folded-row button{width:100%;text-align:left;}

  @media print{
    @page{ size: A4 portrait; margin: 12mm; }
    header, .toolbar, .card.no-print, button, #entryForm, #advocateForm,
    .edit-only, .note{display:none !important;}
    body{background:#fff;font-family:"Times New Roman", Times, serif;font-size:10pt;}
    main{max-width:100%;}
    section.card{border:none;padding:0;margin-bottom:10px;}
    table{font-size:10pt;font-family:"Times New Roman", Times, serif;}
    #entryTable{table-layout:fixed;width:186mm;}
    #entryTable td, #entryTable th{padding:2px 3px;word-wrap:break-word;overflow-wrap:break-word;}
    section.card.wide{width:auto;margin-left:0;margin-right:0;}
    /* The matter details and advocates block is the bill's header page. It gets a
       sheet of its own, so bill page 1 starts clean and its "total carried
       forward" cannot be pushed onto the following sheet. */
    #entriesSection{page-break-before:always;}
    #summarySection{page-break-before:always;}
    th{background:#333 !important;-webkit-print-color-adjust:exact;print-color-adjust:exact;}
    tr{page-break-inside:avoid;}
    tr.page-break-row{page-break-after:always;page-break-inside:avoid;}
  }