@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@500;600;700;800&family=Inter:wght@400;500;600&family=IBM+Plex+Mono:wght@500;600&display=swap');

  /* ─────────────────────────────────────────────────────────────
     Clean Energy Enrollment — design tokens.
     Every existing variable NAME is preserved so all 178 existing class
     rules re-skin automatically instead of being rewritten. Only the
     VALUES move to the approved navy / green / gold identity.
     ───────────────────────────────────────────────────────────── */
  :root{
    /* Surfaces: near-white, cool neutral. Depth comes from borders, not fills. */
    --bg:#F7F9FC; --surface:#FFFFFF; --surface-sunk:#F2F5F9;
    --border:#E4EAF1; --border-strong:#CBD5E1;

    /* Text: deep navy rather than black - warmer and more expensive. */
    --ink:#0F1F3A; --ink-muted:#5A6B84; --ink-faint:#8593A8;
    --navy:#0B2B55;

    /* Green is reserved for primary actions and success ONLY. */
    --brand:#1E8A4C; --brand-dark:#14663A; --brand-tint:#EAF7EE;
    --brand-ring:rgba(30,138,76,.16);

    /* Gold is an accent, never a surface. */
    --gold:#E0A517; --gold-tint:#FEF6E4; --gold-ink:#8A6A0C;

    --danger:#C0271F; --danger-tint:#FDECEB; --danger-ring:rgba(192,39,31,.14);
    --warn:#9A6410; --warn-tint:#FEF6E4;

    /* Radii: refined, not cartoonish. */
    --radius:12px; --radius-sm:8px; --radius-lg:16px; --radius-pill:999px;

    /* Shadows: barely there. Depth is a whisper. */
    --shadow-xs:0 1px 2px rgba(11,43,85,.04);
    --shadow:0 1px 2px rgba(11,43,85,.04), 0 4px 16px -8px rgba(11,43,85,.10);
    --shadow-md:0 2px 4px rgba(11,43,85,.04), 0 12px 32px -12px rgba(11,43,85,.14);
    --shadow-lg:0 24px 60px -16px rgba(11,43,85,.22);

    /* Spacing scale. */
    --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px;
    --s7:48px; --s8:64px;

    /* Motion. One easing, three durations - continuation, not spectacle. */
    --ease:cubic-bezier(.22,.61,.36,1);
    --ease-out:cubic-bezier(.16,1,.3,1);
    --t-quick:140ms; --t-base:200ms; --t-slow:260ms;
  }

  /* Honour the OS setting. Usability is preserved; only motion is removed. */
  @media (prefers-reduced-motion: reduce){
    :root{ --t-quick:1ms; --t-base:1ms; --t-slow:1ms; }
    *,*::before,*::after{
      animation-duration:1ms !important; animation-iteration-count:1 !important;
      transition-duration:1ms !important; scroll-behavior:auto !important;
    }
    .cee-anim-in,.prog-option,.stat-card,.btn{transform:none !important;}
  }
  *{box-sizing:border-box;}
  html,body{margin:0;padding:0;}
  body{background:var(--bg);color:var(--ink);font-family:'Inter',system-ui,sans-serif;-webkit-font-smoothing:antialiased;min-height:100vh;}
  body::before{content:'';position:fixed;top:0;left:0;right:0;height:3px;background:var(--brand);z-index:1000;}
  h1,h2,h3,.display{font-family:'Manrope',system-ui,sans-serif;}
  .mono{font-family:'IBM Plex Mono',monospace;}
  .screen{display:none;}
  .screen.active{display:block;}

  /* ---------- LOGIN (shared look) ---------- */
  .login-split{display:grid;grid-template-columns:1fr;min-height:100vh;}
  @media(min-width:880px){.login-split{grid-template-columns:0.9fr 1fr;}}
  .login-brand{background:var(--brand-dark);color:#fff;padding:56px 48px;display:flex;flex-direction:column;justify-content:space-between;position:relative;overflow:hidden;min-height:280px;}
  .login-brand-top{position:relative;z-index:2;}
  .brand-mark{display:flex;align-items:center;gap:10px;font-family:'Manrope';font-weight:800;font-size:19px;letter-spacing:-0.01em;}
  .brand-badge{width:27px;height:27px;border-radius:8px;background:var(--gold);color:var(--brand-dark);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:12px;font-family:'Manrope';flex:none;}
  .brand-mark.on-dark .brand-badge{background:rgba(255,255,255,0.94);}
  .login-tagline{margin-top:28px;font-family:'Manrope';font-weight:700;font-size:30px;line-height:1.25;max-width:380px;letter-spacing:-0.01em;}
  .login-sub{margin-top:14px;color:rgba(255,255,255,0.72);font-size:14.5px;max-width:340px;line-height:1.6;}
  .login-quote{border-top:1px solid rgba(255,255,255,0.18);padding-top:18px;font-size:13px;color:rgba(255,255,255,0.62);line-height:1.6;max-width:340px;}
  .bg-orbit{position:absolute;right:-120px;bottom:-140px;width:420px;height:420px;border-radius:50%;border:1px solid rgba(255,255,255,0.14);}
  .bg-orbit.b2{right:-60px;bottom:-260px;width:560px;height:560px;}
  .login-form-wrap{display:flex;align-items:center;justify-content:center;padding:48px 28px;}
  .login-card{width:100%;max-width:360px;}
  .login-card h2{font-size:22px;margin:0 0 6px;letter-spacing:-0.01em;}
  .login-card .lead{color:var(--ink-muted);font-size:14px;margin:0 0 28px;}
  .switch-role{text-align:center;margin-top:18px;font-size:12.5px;color:var(--ink-faint);}
  .switch-role a{color:var(--brand);font-weight:600;text-decoration:none;cursor:pointer;}

  /* ---------- SHARED FORM ---------- */
  label{display:block;font-size:12.5px;font-weight:600;color:var(--ink-muted);margin-bottom:6px;letter-spacing:0.01em;}
  .field{margin-bottom:18px;}
  input[type=text],input[type=email],input[type=tel],input[type=password],input[type=number],select{
    width:100%;padding:12px 13px;border:1.5px solid var(--border-strong);border-radius:var(--radius-sm);background:#fff;
    font-size:14.5px;font-family:'Inter',sans-serif;color:var(--ink);outline:none;transition:border-color .12s ease, box-shadow .12s ease;
  }
  input.mono-field{font-family:'IBM Plex Mono',monospace;letter-spacing:0.02em;}
  input:focus,select:focus{border-color:var(--brand);box-shadow:0 0 0 3.5px var(--brand-tint);}
  .row2{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
  .row3{display:grid;grid-template-columns:1.4fr 0.9fr 0.9fr;gap:14px;}
  @media(max-width:560px){.row2,.row3{grid-template-columns:1fr;}}

  .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:'Inter',sans-serif;font-weight:600;font-size:14.5px;
    padding:12px 20px;border-radius:10px;border:1.5px solid transparent;cursor:pointer;transition:transform .05s ease, background .12s ease, border-color .12s ease;text-decoration:none;}
  .btn:active{transform:translateY(1px);}
  .btn-primary{background:var(--brand);color:#fff;box-shadow:0 1px 2px rgba(19,68,50,0.15);}
  .btn-primary:hover{background:var(--brand-dark);box-shadow:0 4px 10px -2px rgba(19,68,50,0.35);}
  .btn-primary:disabled{background:#B9C8C0;cursor:not-allowed;}
  .btn-ghost{background:transparent;color:var(--ink-muted);border-color:var(--border-strong);}
  .btn-ghost:hover{border-color:var(--ink-faint);color:var(--ink);}
  .btn-sm{padding:8px 14px;font-size:13px;}
  .btn-full{width:100%;}
  .btn-lg{padding:14px 22px;font-size:15px;}
  .helper{font-size:12.5px;color:var(--ink-faint);margin-top:6px;}

  /* ---------- APP SHELL: SIDEBAR ---------- */
  .app-shell{display:none;min-height:100vh;}
  .app-shell.active{display:flex;}
  .sidebar{width:230px;flex:none;background:var(--surface);border-right:1px solid var(--border);padding:24px 18px;display:flex;flex-direction:column;}
  .sidebar-brand{padding:0 4px 20px;}
  .sidebar-profile{text-align:center;padding:14px 4px 18px;border-bottom:1px solid var(--border);margin-bottom:14px;}
  .sidebar-avatar{width:50px;height:50px;border-radius:50%;background:var(--brand-tint);color:var(--brand-dark);display:flex;align-items:center;justify-content:center;font-weight:800;font-family:'Manrope';font-size:17px;margin:0 auto 9px;}
  .sidebar-name{font-weight:700;font-size:14px;}
  .sidebar-role{font-size:11.5px;color:var(--ink-faint);margin-top:2px;}
  .nav-label{font-size:10.5px;font-weight:700;color:var(--ink-faint);letter-spacing:0.07em;text-transform:uppercase;margin:12px 8px 7px;}
  .nav-link{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:8px;font-size:13.5px;font-weight:600;color:var(--ink-muted);cursor:pointer;margin-bottom:1px;}
  .nav-link:hover{background:var(--bg);}
  .nav-link.active{background:var(--brand-tint);color:var(--brand-dark);}
  .nav-ico{width:16px;height:16px;flex:none;opacity:0.85;}
  .sidebar-spacer{flex:1;}

  .main-area{flex:1;padding:32px 38px 60px;overflow-y:auto;min-width:0;}
  .view{display:none;}
  .view.active{display:block;}
  .page-head{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:22px;flex-wrap:wrap;gap:12px;}
  .page-head h1{font-size:25px;margin:0;letter-spacing:-0.01em;}
  .page-head .sub{color:var(--ink-muted);font-size:14px;margin-top:4px;}

  .stat-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;margin-bottom:30px;}
  @media(max-width:1050px){.stat-grid{grid-template-columns:repeat(2,1fr);}}
  .stat-card{background:var(--surface);border:1px solid var(--border);border-left:3px solid var(--gold);border-radius:var(--radius);padding:16px 17px;transition:transform .12s ease, box-shadow .12s ease;}
  .stat-card:hover{transform:translateY(-2px);box-shadow:var(--shadow);}
  .stat-card.stat-verified{border-left-color:var(--brand);}
  .stat-card .sc-num{font-family:'Manrope';font-weight:800;font-size:25px;letter-spacing:-0.01em;}
  .stat-card .sc-label{font-size:11.5px;color:var(--ink-muted);margin-top:4px;font-weight:600;}

  .section-title{font-family:'Manrope';font-weight:700;font-size:15px;margin:0 0 12px;display:flex;justify-content:space-between;align-items:center;}
  .section-title a{font-size:12.5px;font-weight:600;color:var(--brand);cursor:pointer;text-decoration:none;}

  .project-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);margin-bottom:16px;transition:transform .15s ease, box-shadow .15s ease;}
  .project-card:hover{transform:translateY(-2px);box-shadow:0 4px 6px rgba(18,39,32,0.06), 0 14px 30px -12px rgba(18,39,32,0.16);}
  .project-card-head{padding:15px 20px;border-bottom:1px solid var(--border);background:#FBFCFB;}
  .project-card-head .pc-name{font-weight:700;font-size:14.5px;}
  .project-card-head .pc-addr{font-size:12.5px;color:var(--ink-faint);margin-top:2px;}
  .project-card-body{padding:22px 20px;display:grid;grid-template-columns:auto 1.2fr 1fr auto;gap:24px;align-items:center;}
  @media(max-width:920px){.project-card-body{grid-template-columns:1fr;}}
  .gauge{width:84px;height:84px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex:none;}
  .gauge-inner{width:65px;height:65px;border-radius:50%;background:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;}
  .gauge-inner .g-pct{font-family:'Manrope';font-weight:800;font-size:14.5px;}
  .gauge-inner .g-status{font-size:10px;color:var(--ink-faint);font-weight:700;text-transform:uppercase;}
  .pc-detail-list .pd-row{margin-bottom:9px;}
  .pc-detail-list .pd-val{font-size:13.5px;font-weight:600;}
  .pc-detail-list .pd-label{font-size:10.5px;color:var(--ink-faint);text-transform:uppercase;letter-spacing:0.03em;}
  .pc-actions{display:flex;flex-direction:column;gap:8px;min-width:150px;}
  .util-wordmark{font-family:'Manrope';font-weight:700;font-size:14px;}
  .util-wordmark .u1{color:var(--ink-muted);}
  .util-wordmark .u2{color:#2f6fb8;}

  .table-wrap{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);}
  table.data-table{width:100%;border-collapse:collapse;}
  table.data-table th{text-align:left;font-size:10.5px;color:var(--ink-faint);text-transform:uppercase;letter-spacing:0.04em;padding:12px 16px;border-bottom:1px solid var(--border);background:#FBFCFB;}
  table.data-table td{padding:13px 16px;font-size:13.5px;border-bottom:1px solid var(--border);vertical-align:middle;}
  table.data-table tr:last-child td{border-bottom:none;}
  .cust-name{font-weight:600;}
  .cust-sub{font-size:12px;color:var(--ink-faint);}
  .status-pill{display:inline-block;padding:5px 10px;border-radius:999px;font-size:11.5px;font-weight:700;white-space:nowrap;}
  .status-opp{background:var(--gold-tint);color:var(--gold-ink);}
  .status-verified{background:var(--brand-tint);color:var(--brand-dark);}
  .status-danger{background:var(--danger-tint);color:var(--danger);}
  .resume-link{font-size:12.5px;font-weight:700;color:var(--brand);cursor:pointer;}
  .search-input{padding:9px 12px;border:1.5px solid var(--border-strong);border-radius:8px;font-size:13.5px;width:220px;}

  .wizard-wrap{padding-top:4px;}
  /* 620px was the old single-card wizard width. Customer & Bill is now a
     full workbench, so the shell no longer caps it - each step sets its own
     width. THIS was why the rebuilt screen rendered as a ~200px column with
     dead space on both sides. */
  .wizard-inner{width:100%;max-width:1200px;margin:0 auto;}
  /* Steps that are still single-card keep the original measure. */
  .wizard-inner > .wizard-step:not(.wb){max-width:620px;margin-left:auto;margin-right:auto;}
  .wizard-inner > .exit-wizard, .wizard-inner > .stepper{max-width:1200px;margin-left:auto;margin-right:auto;}
  .exit-wizard{font-size:12.5px;color:var(--ink-faint);cursor:pointer;font-weight:600;margin-bottom:14px;display:inline-flex;align-items:center;gap:5px;}
  .exit-wizard:hover{color:var(--ink);}
  .arc-panel{margin-bottom:8px;}
  .step-labels{display:flex;justify-content:space-between;margin-top:2px;padding:0 6px;}
  .step-label{font-size:11px;color:var(--ink-faint);font-weight:600;letter-spacing:0.01em;text-align:center;flex:1;}
  .step-label.done{color:var(--brand);}
  .step-label.now{color:var(--ink);}
  .card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:32px;box-shadow:var(--shadow);}
  .card-eyebrow{font-size:12px;font-weight:700;color:var(--brand);letter-spacing:0.06em;text-transform:uppercase;margin:0 0 8px;}
  .card h2{font-size:23px;margin:0 0 6px;letter-spacing:-0.01em;}
  .card .lead{color:var(--ink-muted);font-size:14px;margin:0 0 26px;line-height:1.55;}
  .wizard-actions{display:flex;justify-content:space-between;align-items:center;margin-top:28px;}

  .radio-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:6px;}
  @media(max-width:560px){.radio-grid{grid-template-columns:1fr;}}
  .radio-card{border:1.5px solid var(--border-strong);border-radius:var(--radius-sm);padding:14px 15px;cursor:pointer;transition:border-color .12s ease, background .12s ease;position:relative;}
  .radio-card:hover{border-color:var(--brand);}
  .radio-card.selected{border-color:var(--brand);background:var(--brand-tint);}
  .radio-card.disabled{opacity:0.5;cursor:not-allowed;}
  .radio-card.disabled:hover{border-color:var(--border-strong);}
  .radio-card .u-name{font-weight:600;font-size:14.5px;}
  .radio-card .u-meta{font-size:12px;color:var(--ink-faint);margin-top:3px;}
  .radio-card .u-check{position:absolute;top:12px;right:12px;width:18px;height:18px;border-radius:50%;border:1.5px solid var(--border-strong);}
  .radio-card.selected .u-check{border-color:var(--brand);background:var(--brand);}
  .radio-card.selected .u-check::after{content:'';display:block;width:5px;height:9px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg);margin:2.5px auto;}

  .dropzone{border:1.75px dashed var(--border-strong);border-radius:var(--radius-sm);padding:26px 18px;text-align:center;cursor:pointer;transition:border-color .12s ease, background .12s ease;background:#FBFCFB;}
  .dropzone:hover,.dropzone.drag{border-color:var(--brand);background:var(--brand-tint);}
  .dropzone .dz-title{font-weight:600;font-size:14px;}
  .dropzone .dz-sub{font-size:12.5px;color:var(--ink-faint);margin-top:4px;}
  .file-chip{display:flex;align-items:center;justify-content:space-between;gap:10px;border:1.5px solid var(--border);border-radius:var(--radius-sm);padding:11px 14px;margin-top:12px;background:#fff;}
  .file-chip .fc-left{display:flex;align-items:center;gap:10px;min-width:0;}
  .file-chip .fc-icon{width:30px;height:30px;border-radius:7px;background:var(--brand-tint);color:var(--brand-dark);display:flex;align-items:center;justify-content:center;flex:none;}
  .file-chip .fc-name{font-size:13.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:260px;}
  .file-chip .fc-size{font-size:12px;color:var(--ink-faint);}
  .file-chip .fc-remove{background:none;border:none;color:var(--ink-faint);cursor:pointer;font-size:13px;font-weight:600;}
  .file-chip .fc-remove:hover{color:var(--danger);}

  .ocr-panel{margin-top:16px;border:1px solid var(--border);border-radius:var(--radius-sm);overflow:hidden;}
  .ocr-head{background:#FBFCFB;padding:10px 14px;font-size:12px;font-weight:700;color:var(--ink-muted);letter-spacing:0.03em;text-transform:uppercase;border-bottom:1px solid var(--border);}
  .ocr-row{display:flex;align-items:center;justify-content:space-between;padding:11px 14px;border-bottom:1px solid var(--border);font-size:13.5px;}
  .ocr-row:last-child{border-bottom:none;}
  .ocr-left{display:flex;align-items:center;gap:9px;}
  .ocr-check{width:17px;height:17px;border-radius:50%;background:var(--brand);display:flex;align-items:center;justify-content:center;flex:none;}
  .ocr-check::after{content:'';width:4px;height:8px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg);margin-bottom:1px;}
  .ocr-check.warn{background:var(--gold);}
  .ocr-check.warn::after{content:'!';border:none;width:auto;height:auto;font-size:11px;color:#fff;font-weight:800;transform:none;margin-bottom:0;}
  .ocr-conf{font-family:'IBM Plex Mono',monospace;font-size:12px;color:var(--ink-faint);}
  .ocr-analyzing{display:flex;align-items:center;gap:10px;padding:16px 14px;font-size:13.5px;color:var(--ink-muted);}
  .spinner{width:15px;height:15px;border-radius:50%;border:2px solid var(--border-strong);border-top-color:var(--brand);animation:spin .7s linear infinite;}
  @keyframes spin{to{transform:rotate(360deg);}}

  .toggle-row{display:flex;gap:10px;}
  .toggle-btn{padding:13px;text-align:center;border:1.5px solid var(--border-strong);border-radius:var(--radius-sm);cursor:pointer;font-weight:600;font-size:13.5px;color:var(--ink-muted);transition:all .12s ease;flex:1;}
  .toggle-btn:hover{border-color:var(--brand);}
  .toggle-btn.selected{border-color:var(--brand);background:var(--brand-tint);color:var(--brand-dark);}

  .review-block{border:1px solid var(--border);border-radius:var(--radius-sm);margin-bottom:14px;overflow:hidden;}
  .review-head{background:#FBFCFB;padding:9px 14px;font-size:11.5px;font-weight:700;color:var(--ink-muted);letter-spacing:0.04em;text-transform:uppercase;border-bottom:1px solid var(--border);}
  .review-line{display:flex;justify-content:space-between;padding:10px 14px;font-size:13.5px;border-bottom:1px solid var(--border);gap:12px;}
  .review-line:last-child{border-bottom:none;}
  .review-line .rl-label{color:var(--ink-faint);flex:none;}
  .review-line .rl-val{font-weight:600;text-align:right;}
  .link-option{margin-bottom:14px;}
  .link-option-label{font-size:12px;font-weight:600;color:var(--ink-muted);margin-bottom:6px;}
  .link-box{display:flex;align-items:center;gap:10px;border:1.5px solid var(--border-strong);border-radius:var(--radius-sm);padding:9px 9px 9px 13px;background:#FBFCFB;}
  .link-box .lb-text{font-family:'IBM Plex Mono',monospace;font-size:12.5px;color:var(--ink-muted);flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .badge{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:700;padding:5px 10px;border-radius:999px;}
  .badge-gold{background:var(--gold-tint);color:var(--gold-ink);}
  .badge-brand{background:var(--brand-tint);color:var(--brand-dark);}

  #screen-customer.active,#screen-customer-portal.active{display:flex;min-height:100vh;justify-content:center;background:var(--bg);}
  .customer-wrap{width:100%;max-width:520px;padding:40px 20px 80px;}
  .customer-top{display:flex;align-items:center;gap:10px;margin-bottom:26px;}
  .customer-top .brand-mark{color:var(--brand-dark);}
  .sig-canvas-wrap{border:1.75px dashed var(--border-strong);border-radius:var(--radius-sm);background:#FBFCFB;transition:all .15s ease;touch-action:none;overflow:hidden;}
  .sig-canvas-wrap.signed{border-style:solid;border-color:var(--brand);background:#fff;}
  #sig-canvas{display:block;width:100%;height:130px;cursor:crosshair;}
  .btn-clear{background:none;border:none;color:var(--ink-faint);font-size:12.5px;font-weight:600;cursor:pointer;padding:0;}
  .btn-clear:hover{color:var(--danger);}
  .doc-packet{margin-bottom:20px;}
  .doc-item{border:1px solid var(--border);border-radius:var(--radius-sm);margin-bottom:10px;overflow:hidden;background:#fff;}
  .doc-item summary{list-style:none;cursor:pointer;padding:13px 16px;display:flex;align-items:center;gap:12px;background:#FBFCFB;}
  .doc-item summary::-webkit-details-marker{display:none;}
  .doc-item summary::marker{content:'';}
  .doc-item .di-chevron{width:14px;flex:none;color:var(--ink-faint);transition:transform .15s ease;font-weight:700;}
  .doc-item[open] .di-chevron{transform:rotate(90deg);}
  .doc-item .di-title{font-weight:600;font-size:13.5px;flex:1;}
  .doc-item .di-sub{font-size:11.5px;color:var(--ink-faint);font-weight:400;margin-top:2px;}
  .doc-item .di-status{font-size:11px;font-weight:700;color:var(--ink-faint);flex:none;}
  .doc-item .di-status.done{color:var(--brand);}
  .doc-item-body{padding:14px 16px 4px;font-size:12.5px;line-height:1.6;color:var(--ink-muted);border-top:1px solid var(--border);}
  .doc-item-body p{margin:0 0 8px;}
  .doc-item-body strong{color:var(--ink);}
  .doc-item-body ul,.doc-item-body ol{margin:0 0 8px;padding-left:18px;}
  .doc-item-body li{margin-bottom:4px;}
  .doc-item-check{display:flex;align-items:center;gap:8px;padding:11px 16px;border-top:1px solid var(--border);background:#FBFCFB;font-size:12.5px;font-weight:600;color:var(--ink-muted);cursor:pointer;}
  .doc-item-check input{margin:0;}
  .agree-row{display:flex;align-items:flex-start;gap:10px;margin:18px 0;font-size:13px;color:var(--ink-muted);line-height:1.5;}
  .agree-row input{margin-top:3px;}

  .complete-wrap{display:flex;flex-direction:column;align-items:center;text-align:center;padding:20px 10px 6px;}
  .complete-check{width:56px;height:56px;border-radius:50%;background:var(--brand);display:flex;align-items:center;justify-content:center;margin-bottom:18px;}
  .complete-check::after{content:'';width:16px;height:28px;border:solid #fff;border-width:0 4px 4px 0;transform:rotate(45deg) translate(-2px,-3px);}

  input[type=file]{display:none;}

  /* ---------- Workflow renderer (Milestone 2) ---------- */
  /* Generic step-rendering styles. Uses existing design tokens only - no new
     colors, no visual redesign. Nothing here is specific to any one step. */
  .draft-banner{display:flex;justify-content:space-between;align-items:center;gap:12px;
    background:var(--brand-tint);border:1px solid var(--border);border-radius:var(--radius-sm);
    padding:10px 14px;margin-bottom:18px;font-size:13px;color:var(--brand-dark);}
  .product-card{border:1.5px solid var(--border-strong);border-radius:var(--radius-sm);
    padding:16px;margin-bottom:12px;}
  .product-card .prod-name{font-weight:700;font-size:14.5px;font-family:'Manrope',sans-serif;}
  .prod-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;}
  .prod-metric .pm-val{font-family:'Manrope',sans-serif;font-weight:800;font-size:19px;}
  .prod-metric .pm-label{font-size:10.5px;color:var(--ink-faint);text-transform:uppercase;
    letter-spacing:0.03em;margin-top:2px;}
  .wf-segments{display:flex;flex-direction:column;gap:7px;}
  .wf-segment{display:flex;align-items:center;gap:9px;font-size:13px;color:var(--ink-faint);}
  .wf-segment.available{color:var(--ink);}
  .wf-seg-dot{width:9px;height:9px;border-radius:50%;background:var(--border-strong);flex:none;}
  .wf-segment.available .wf-seg-dot{background:var(--brand);}
  .wf-seg-state{margin-left:auto;font-size:11.5px;font-weight:600;}
  .wf-segment.available .wf-seg-state{color:var(--brand);}
  .wf-notice{border-radius:var(--radius-sm);padding:10px 13px;font-size:12.5px;line-height:1.55;}
  .wf-notice.info{background:var(--bg);border:1px solid var(--border);color:var(--ink-muted);}
  .wf-notice.warn{background:var(--gold-tint);border:1px solid var(--gold);color:var(--gold-ink);}
  .wf-field-error{margin-top:6px;}

  /* ---------- Password visibility toggle ---------- */
  .pw-wrap{position:relative;display:block;}
  .pw-wrap input{width:100%;padding-right:42px;}
  .pw-eye{position:absolute;right:8px;top:50%;transform:translateY(-50%);
    background:none;border:none;cursor:pointer;font-size:15px;line-height:1;
    padding:6px;border-radius:6px;color:var(--ink-muted);}
  .pw-eye:hover{background:var(--bg);}
  .pw-eye:focus-visible{outline:2px solid var(--brand);outline-offset:1px;}

  /* ═══════════ Agreement review — shared by rep and customer ═══════════
     One component, two entry points. Extends the existing Dalton tokens;
     no new palette. The signature element is the document rail inside the
     overlay: agreements read as a stack of real papers, not a form. */

  .agr-summary{border:1px solid var(--border);border-radius:var(--radius);
    background:var(--surface);padding:18px 20px;margin-bottom:18px;box-shadow:var(--shadow);}
  .agr-summary h3{font-family:'Manrope',sans-serif;font-size:15px;margin:0 0 14px;font-weight:800;}
  .agr-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:14px 22px;}
  .agr-item .agr-label{font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;
    color:var(--ink-faint);font-family:'IBM Plex Mono',monospace;margin-bottom:3px;}
  .agr-item .agr-value{font-size:14px;font-weight:600;line-height:1.4;}

  .agr-cta{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:4px;}
  .agr-count{font-size:12.5px;color:var(--ink-muted);}

  /* Overlay ------------------------------------------------------------ */
  .agr-overlay{position:fixed;inset:0;z-index:1000;display:none;
    background:rgba(18,39,32,.55);backdrop-filter:blur(3px);
    align-items:center;justify-content:center;padding:28px;}
  .agr-overlay.open{display:flex;}
  .agr-modal{background:var(--surface);border-radius:var(--radius);width:min(1080px,100%);
    height:min(88vh,900px);display:flex;flex-direction:column;overflow:hidden;
    box-shadow:0 24px 64px -16px rgba(18,39,32,.4);}
  .agr-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;
    padding:20px 24px;border-bottom:1px solid var(--border);}
  .agr-head h2{font-family:'Manrope',sans-serif;font-size:19px;margin:0 0 3px;font-weight:800;}
  .agr-head p{margin:0;font-size:13px;color:var(--ink-muted);}
  .agr-close{background:none;border:1px solid var(--border-strong);border-radius:var(--radius-sm);
    width:38px;height:38px;font-size:19px;line-height:1;cursor:pointer;color:var(--ink-muted);flex:none;}
  .agr-close:hover{background:var(--bg);color:var(--ink);}
  .agr-close:focus-visible{outline:2px solid var(--brand);outline-offset:2px;}

  .agr-body{display:flex;flex:1;min-height:0;}
  /* The rail: the one place we spend visual boldness. */
  .agr-rail{width:290px;flex:none;border-right:1px solid var(--border);overflow-y:auto;
    background:var(--brand-tint);padding:14px;}
  .agr-rail-title{font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;
    color:var(--brand-dark);font-family:'IBM Plex Mono',monospace;margin:2px 4px 10px;}
  .agr-doc{display:flex;gap:11px;align-items:flex-start;width:100%;text-align:left;
    background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-sm);
    padding:12px;margin-bottom:9px;cursor:pointer;font:inherit;transition:border-color .12s,transform .12s;}
  .agr-doc:hover{border-color:var(--brand);transform:translateY(-1px);}
  .agr-doc:focus-visible{outline:2px solid var(--brand);outline-offset:2px;}
  .agr-doc.active{border-color:var(--brand);background:var(--brand-tint);}
  .agr-doc-n{font-family:'IBM Plex Mono',monospace;font-size:11px;font-weight:600;
    color:var(--brand);background:var(--surface);border:1px solid var(--border);
    border-radius:6px;min-width:24px;height:24px;display:flex;align-items:center;
    justify-content:center;flex:none;}
  .agr-doc-name{font-size:13px;font-weight:600;line-height:1.35;}
  .agr-doc-meta{font-size:11px;color:var(--ink-faint);margin-top:2px;}
  .agr-doc.seen .agr-doc-meta{color:var(--brand);}

  .agr-viewer{flex:1;min-width:0;display:flex;flex-direction:column;background:var(--bg);}
  .agr-viewer-inner{flex:1;display:flex;align-items:center;justify-content:center;
    text-align:center;padding:32px;}
  .agr-viewer-inner .vi-icon{font-size:34px;margin-bottom:12px;}
  .agr-viewer-inner h4{font-family:'Manrope',sans-serif;font-size:16px;margin:0 0 8px;}
  .agr-viewer-inner p{margin:0 auto 18px;max-width:400px;font-size:13.5px;
    color:var(--ink-muted);line-height:1.6;}

  .agr-foot{border-top:1px solid var(--border);padding:18px 24px;background:var(--surface);}
  .agr-ack{display:flex;gap:11px;align-items:flex-start;font-size:13.5px;line-height:1.55;
    cursor:pointer;margin-bottom:14px;}
  .agr-ack input{margin-top:2px;width:19px;height:19px;flex:none;accent-color:var(--brand);}
  .agr-actions{display:flex;justify-content:flex-end;gap:10px;flex-wrap:wrap;}
  .agr-note{font-size:12.5px;margin:0 0 12px;}
  .agr-note.err{color:var(--danger);}

  /* Mobile: a full-screen agreement viewer, not a shrunken desktop modal. */
  @media (max-width:820px){
    .agr-overlay{padding:0;}
    .agr-modal{width:100%;height:100%;max-height:none;border-radius:0;}
    .agr-body{flex-direction:column;}
    .agr-rail{width:100%;border-right:none;border-bottom:1px solid var(--border);
      max-height:none;overflow-y:visible;background:var(--surface);}
    .agr-viewer{display:none;}          /* tapping a doc opens it directly */
    .agr-doc{padding:16px;}             /* large tap targets */
    .agr-doc-name{font-size:15px;}
    .agr-head{padding:16px;}
    .agr-foot{padding:16px;position:sticky;bottom:0;}
    .agr-actions .btn{width:100%;}
    .agr-close{width:44px;height:44px;}
  }
  @media (prefers-reduced-motion:reduce){
    .agr-doc{transition:none;}
    .agr-doc:hover{transform:none;}
  }

  /* ---------- Final review: concise details + inline agreement links ---------- */
  .agr-details{display:grid;grid-template-columns:auto 1fr;gap:9px 20px;margin:18px 0 20px;
    padding:16px 18px;border:1px solid var(--border);border-radius:var(--radius);background:var(--bg);}
  .agr-details dt{font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;
    color:var(--ink-faint);font-family:'IBM Plex Mono',monospace;align-self:center;}
  .agr-details dd{margin:0;font-size:14px;font-weight:600;}
  .agr-link{color:var(--brand);text-decoration:underline;text-underline-offset:2px;font-weight:600;}
  .agr-link:hover{color:var(--brand-dark);}
  .agr-link:focus-visible{outline:2px solid var(--brand);outline-offset:2px;border-radius:3px;}
  .agr-link-off{color:var(--ink-muted);text-decoration:line-through;}
  .agr-docs-label{font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;
    color:var(--ink-faint);font-family:'IBM Plex Mono',monospace;margin:16px 0 6px;}
  .agr-docs-list{margin:0 0 12px 18px;font-size:14px;}
  .agr-docs-list li{margin-bottom:4px;}

  /* Single-document viewer */
  .agr-head h2{margin:0;}
  .agr-doc-body{flex:1;min-height:0;display:flex;flex-direction:column;background:var(--bg);padding:14px;}
  .agr-doc-frame{flex:1;width:100%;border:1px solid var(--border);border-radius:var(--radius-sm);
    background:var(--surface);min-height:60vh;}
  .agr-doc-fallback{margin:10px 0 0;text-align:center;}
  @media (max-width:820px){
    .agr-details{grid-template-columns:1fr;gap:2px 0;}
    .agr-details dd{margin-bottom:10px;}
    .agr-doc-body{padding:0;}
    .agr-doc-frame{min-height:0;border:none;border-radius:0;}
  }

  /* ---------- Multi-file document sets ---------- */
  .docset-file{display:flex;align-items:center;gap:10px;padding:8px 10px;margin-top:6px;
    border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--surface);}
  .docset-n{font-family:'IBM Plex Mono',monospace;font-size:11px;font-weight:600;
    color:var(--brand);background:var(--brand-tint);border-radius:5px;
    min-width:22px;height:22px;display:flex;align-items:center;justify-content:center;flex:none;}
  .docset-name{flex:1;min-width:0;font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  .docset-size{font-size:11.5px;color:var(--ink-faint);flex:none;}
  .docset-remove{background:none;border:none;cursor:pointer;font-size:17px;line-height:1;
    color:var(--ink-muted);padding:2px 6px;border-radius:5px;flex:none;}
  .docset-remove:hover{background:var(--danger-tint);color:var(--danger);}
  .docset-remove:focus-visible{outline:2px solid var(--brand);outline-offset:1px;}

  /* Clickable filename in a document set. The remove control stays separate. */
  .docset-link{color:var(--brand);text-decoration:underline;text-underline-offset:2px;cursor:pointer;}
  .docset-link:hover{color:var(--brand-dark);}
  .docset-link:focus-visible{outline:2px solid var(--brand);outline-offset:2px;border-radius:3px;}


  /* Completed-enrollment polish (Phase A) */
  .agr-quiet{color:var(--ink-faint);font-size:12.5px;margin-top:10px;}
  .agr-final{margin-top:20px;padding-top:18px;border-top:1px solid var(--border);
    justify-content:flex-start;}
  @media (max-width:820px){ .agr-final .btn{width:100%;} }

  /* ---------- Program availability options (B1) ---------- */
  .prog-wrap{margin-top:18px;}
  .prog-head{font-size:12px;letter-spacing:.05em;text-transform:uppercase;
    color:var(--ink-faint);font-family:'IBM Plex Mono',monospace;margin-bottom:10px;}
  .prog-list{display:flex;flex-direction:column;gap:10px;}
  .prog-option{display:block;width:100%;text-align:left;cursor:pointer;font:inherit;
    background:var(--surface);border:1.5px solid var(--border);border-radius:var(--radius);
    padding:14px 16px;transition:border-color .12s,background .12s;}
  .prog-option:hover{border-color:var(--brand);}
  .prog-option:focus-visible{outline:2px solid var(--brand);outline-offset:2px;}
  .prog-option.selected{border-color:var(--brand);background:var(--brand-tint);}
  .prog-main{display:flex;align-items:baseline;justify-content:space-between;gap:12px;}
  .prog-name{font-weight:700;font-size:15px;}
  .prog-savings{font-weight:700;font-size:15px;color:var(--brand);white-space:nowrap;}
  .prog-savings-none{color:var(--ink-faint);font-weight:600;font-size:13px;}
  .prog-blurb{display:block;margin-top:5px;font-size:12.5px;color:var(--ink-muted);line-height:1.5;}
  .prog-none{border:1px solid var(--border);border-radius:var(--radius);
    background:var(--bg);padding:16px;}
  .prog-none p{margin:6px 0 0;}
  @media (max-width:820px){
    .prog-main{flex-direction:column;gap:2px;}
    .prog-option{padding:16px;}
  }

  /* ---------- Reusable admin modal (B1) ---------- */
  .cee-modal-overlay{position:fixed;inset:0;z-index:1500;display:none;
    background:rgba(18,39,32,.5);backdrop-filter:blur(2px);
    align-items:center;justify-content:center;padding:24px;}
  .cee-modal-overlay.open{display:flex;}
  .cee-modal{background:var(--surface);border-radius:var(--radius);
    width:min(460px,100%);max-height:88vh;display:flex;flex-direction:column;
    overflow:hidden;box-shadow:0 20px 56px -14px rgba(18,39,32,.38);}
  .cee-modal-head{display:flex;align-items:center;justify-content:space-between;
    gap:12px;padding:18px 20px;border-bottom:1px solid var(--border);}
  .cee-modal-head h2{font-family:'Manrope',sans-serif;font-size:17px;margin:0;font-weight:800;}
  .cee-modal-close{background:none;border:1px solid var(--border-strong);
    border-radius:var(--radius-sm);width:36px;height:36px;font-size:18px;line-height:1;
    cursor:pointer;color:var(--ink-muted);flex:none;}
  .cee-modal-close:hover{background:var(--bg);color:var(--ink);}
  .cee-modal-close:focus-visible{outline:2px solid var(--brand);outline-offset:2px;}
  .cee-modal-body{padding:18px 20px;overflow-y:auto;}
  .cee-modal-foot{border-top:1px solid var(--border);padding:16px 20px;background:var(--surface);}
  .cee-modal-actions{display:flex;justify-content:flex-end;gap:10px;}
  @media (max-width:820px){
    .cee-modal-overlay{padding:0;align-items:flex-end;}
    .cee-modal{width:100%;max-height:92vh;border-radius:var(--radius) var(--radius) 0 0;}
    .cee-modal-close{width:44px;height:44px;}
    .cee-modal-actions{flex-direction:column-reverse;}
    .cee-modal-actions .btn{width:100%;}
  }

/* ═══════════════════════════════════════════════════════════════════
   B2 — component polish. Layered ON TOP of the existing rules so every
   class keeps working; these refine rather than replace.
   ═══════════════════════════════════════════════════════════════════ */

/* ---------- Typography ---------- */
body{font-feature-settings:'cv02','cv03','cv04','ss01';letter-spacing:-0.006em;line-height:1.55;}
h1{font-size:clamp(24px,2.4vw,30px);line-height:1.2;letter-spacing:-0.022em;font-weight:800;margin:0 0 6px;}
h2{font-size:clamp(19px,1.7vw,22px);line-height:1.28;letter-spacing:-0.018em;font-weight:800;margin:0 0 6px;}
h3{font-size:16px;letter-spacing:-0.012em;font-weight:700;}
.lead{color:var(--ink-muted);font-size:15px;line-height:1.6;max-width:62ch;margin:0 0 var(--s5);}
.sub{color:var(--ink-muted);font-size:13.5px;}
.helper{color:var(--ink-muted);font-size:12.5px;line-height:1.55;}
.card-eyebrow{font-family:'IBM Plex Mono',monospace;font-size:10.5px;letter-spacing:.09em;
  text-transform:uppercase;color:var(--ink-faint);margin:0 0 8px;}

/* ---------- Surfaces ---------- */
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);
  padding:var(--s5);box-shadow:var(--shadow-xs);}
.wrap-narrow{max-width:660px;margin:0 auto;padding:0 var(--s4);}

/* ---------- Buttons: one obvious primary, quiet everything else ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font:600 14.5px/1 'Inter',system-ui,sans-serif;letter-spacing:-0.008em;
  border-radius:var(--radius-sm);border:1px solid transparent;cursor:pointer;
  padding:0 18px;height:42px;white-space:nowrap;
  transition:background var(--t-quick) var(--ease), border-color var(--t-quick) var(--ease),
             box-shadow var(--t-quick) var(--ease), transform var(--t-quick) var(--ease),
             color var(--t-quick) var(--ease);}
.btn:active:not(:disabled){transform:translateY(1px);}
.btn:focus-visible{outline:none;box-shadow:0 0 0 3px var(--brand-ring);}
.btn:disabled{opacity:.45;cursor:not-allowed;}
.btn-primary{background:var(--brand);color:#fff;box-shadow:var(--shadow-xs);}
.btn-primary:hover:not(:disabled){background:var(--brand-dark);box-shadow:var(--shadow);}
.btn-ghost{background:var(--surface);color:var(--ink);border-color:var(--border-strong);}
.btn-ghost:hover:not(:disabled){background:var(--surface-sunk);border-color:var(--ink-faint);}
.btn-lg{height:48px;padding:0 24px;font-size:15px;}
.btn-sm{height:34px;padding:0 12px;font-size:13px;}
.btn-full{width:100%;}

/* ---------- Form controls ---------- */
.field{margin-bottom:var(--s4);}
.field label{display:block;font-size:13px;font-weight:600;color:var(--ink);
  margin-bottom:6px;letter-spacing:-0.004em;}
input[type=text],input[type=email],input[type=password],input[type=tel],
input[type=number],select,textarea{
  width:100%;height:44px;padding:0 13px;font:400 14.5px/1 'Inter',system-ui,sans-serif;
  color:var(--ink);background:var(--surface);border:1px solid var(--border-strong);
  border-radius:var(--radius-sm);
  transition:border-color var(--t-quick) var(--ease), box-shadow var(--t-quick) var(--ease),
             background var(--t-quick) var(--ease);}
textarea{height:auto;padding:11px 13px;line-height:1.55;}
input::placeholder{color:var(--ink-faint);}
input:hover:not(:disabled),select:hover:not(:disabled){border-color:var(--ink-faint);}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--brand);
  box-shadow:0 0 0 3px var(--brand-ring);}
input:disabled,select:disabled{background:var(--surface-sunk);color:var(--ink-faint);cursor:not-allowed;}
select{appearance:none;cursor:pointer;padding-right:34px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%235A6B84' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 13px center;}
input.err,select.err,input[aria-invalid=true]{border-color:var(--danger);
  box-shadow:0 0 0 3px var(--danger-ring);}
.mono-field{font-family:'IBM Plex Mono',monospace;letter-spacing:.01em;}

/* A field the OCR filled: brief highlight, never a lock. */
@keyframes ocrFill{0%{background:var(--brand-tint);}100%{background:var(--surface);}}
.ocr-filled{animation:ocrFill 1400ms var(--ease-out) 1;}

/* ---------- Address grid ---------- */
.row2{display:grid;grid-template-columns:1fr 1fr;gap:var(--s4);}
.row3{display:grid;grid-template-columns:2fr 1fr 1fr;gap:var(--s4);}

/* ---------- Status pills ---------- */
.status-pill{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 10px;
  border-radius:var(--radius-pill);font-size:12px;font-weight:600;letter-spacing:-0.004em;
  background:var(--surface-sunk);color:var(--ink-muted);border:1px solid var(--border);}
.status-pill::before{content:'';width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.75;}
.status-verified{background:var(--brand-tint);color:var(--brand-dark);border-color:transparent;}
.status-danger{background:var(--danger-tint);color:var(--danger);border-color:transparent;}

/* ---------- Counters ---------- */
.stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:var(--s3);
  margin-bottom:var(--s6);}
.stat-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
  padding:16px 18px;transition:border-color var(--t-base) var(--ease),
  box-shadow var(--t-base) var(--ease), transform var(--t-base) var(--ease);}
.stat-card:hover{border-color:var(--border-strong);box-shadow:var(--shadow-xs);transform:translateY(-1px);}
.sc-num{font-family:'Manrope',sans-serif;font-size:28px;font-weight:800;line-height:1;
  letter-spacing:-0.03em;color:var(--ink);}
.sc-label{margin-top:6px;font-size:12.5px;color:var(--ink-muted);font-weight:500;}
.stat-card.stat-verified .sc-num{color:var(--brand);}

/* ---------- Tables ---------- */
.table-wrap{background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius-lg);overflow:hidden;}
.table,.data-table{width:100%;border-collapse:collapse;}
.table th,.data-table th{text-align:left;font-size:11px;letter-spacing:.07em;text-transform:uppercase;
  color:var(--ink-faint);font-weight:600;padding:12px 16px;background:var(--surface-sunk);
  border-bottom:1px solid var(--border);white-space:nowrap;}
.table td,.data-table td{padding:14px 16px;border-bottom:1px solid var(--border);
  font-size:14px;vertical-align:middle;}
.table tbody tr,.data-table tbody tr{transition:background var(--t-quick) var(--ease);}
.table tbody tr:hover,.data-table tbody tr:hover{background:var(--surface-sunk);}
.table tbody tr:last-child td,.data-table tbody tr:last-child td{border-bottom:none;}

/* ---------- Program cards ---------- */
.prog-option{border-radius:var(--radius);border-width:1.5px;
  transition:border-color var(--t-base) var(--ease), background var(--t-base) var(--ease),
             box-shadow var(--t-base) var(--ease), transform var(--t-quick) var(--ease);}
.prog-option:hover{transform:translateY(-1px);box-shadow:var(--shadow-xs);}
.prog-option.selected{box-shadow:0 0 0 3px var(--brand-ring);}
.prog-option.selected .prog-name::after{content:'✓';margin-left:8px;color:var(--brand);
  font-weight:800;display:inline-block;animation:checkPop var(--t-base) var(--ease-out) 1;}
@keyframes checkPop{from{opacity:0;transform:scale(.6);}to{opacity:1;transform:scale(1);}}
.prog-savings{font-family:'Manrope',sans-serif;letter-spacing:-0.02em;}

/* ---------- Entrance motion: continuation, not spectacle ---------- */
@keyframes ceeIn{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:none;}}
.cee-anim-in{animation:ceeIn var(--t-slow) var(--ease-out) both;}
.wizard-step.active,.view.active{animation:ceeIn var(--t-base) var(--ease-out) both;}

/* ---------- Polished loading ---------- */
.cee-loading{display:inline-flex;align-items:center;gap:9px;color:var(--ink-muted);font-size:13.5px;}
.cee-spinner{width:15px;height:15px;border-radius:50%;flex:none;
  border:2px solid var(--border-strong);border-top-color:var(--brand);
  animation:ceeSpin 640ms linear infinite;}
@keyframes ceeSpin{to{transform:rotate(360deg);}}
.cee-skel{background:linear-gradient(90deg,var(--surface-sunk) 25%,#EAEFF6 37%,var(--surface-sunk) 63%);
  background-size:400% 100%;animation:ceeShimmer 1.3s ease-in-out infinite;border-radius:var(--radius-sm);}
@keyframes ceeShimmer{0%{background-position:100% 50%;}100%{background-position:0 50%;}}

/* ---------- Success ---------- */
@keyframes ceeCheck{0%{transform:scale(.5);opacity:0;}60%{transform:scale(1.08);opacity:1;}
  100%{transform:scale(1);opacity:1;}}
.complete-check{animation:ceeCheck 520ms var(--ease-out) 1 both;}

/* ---------- Modal motion ---------- */
.cee-modal,.agr-modal{animation:ceeModalIn var(--t-slow) var(--ease-out) both;}
@keyframes ceeModalIn{from{opacity:0;transform:translateY(8px) scale(.985);}
  to{opacity:1;transform:none;}}

/* ---------- Progress rail ---------- */
.step-labels{display:flex;gap:var(--s4);flex-wrap:wrap;}
.step-label{font-size:12.5px;color:var(--ink-faint);font-weight:500;
  transition:color var(--t-base) var(--ease);}
.step-label.done{color:var(--ink-muted);}
.step-label.now{color:var(--brand);font-weight:700;}

/* ---------- Upload dropzone ---------- */
.dropzone{border:1.5px dashed var(--border-strong);border-radius:var(--radius);
  background:var(--surface-sunk);padding:var(--s5);text-align:center;
  transition:border-color var(--t-base) var(--ease), background var(--t-base) var(--ease);}
.dropzone:hover,.dropzone.drag{border-color:var(--brand);background:var(--brand-tint);}
.dz-title{font-weight:650;font-size:14.5px;color:var(--ink);}
.dz-sub{font-size:12.5px;color:var(--ink-muted);margin-top:4px;}

/* ═══════════ RESPONSIVE ═══════════ */
@media (max-width:1200px){ .wrap-narrow{max-width:620px;} }

@media (max-width:820px){
  h1{font-size:23px;} h2{font-size:19px;}
  .card{padding:var(--s4);border-radius:var(--radius);}
  .wrap-narrow{padding:0 var(--s4);}
  .row2,.row3{grid-template-columns:1fr;gap:var(--s3);}
  /* Address stays readable: street full width, then city / state / zip. */
  .row3.address-grid{grid-template-columns:1.4fr .8fr .9fr;gap:var(--s2);}
  .stat-grid{grid-template-columns:repeat(2,1fr);gap:var(--s2);}
  .sc-num{font-size:24px;}
  .btn{height:46px;}          /* >=44px touch target */
  .btn-sm{height:40px;}
  .wizard-actions{flex-direction:column-reverse;gap:var(--s2);}
  .wizard-actions .btn{width:100%;}
  input,select,textarea{height:46px;font-size:16px;}  /* 16px stops iOS zoom */

  /* Tables become cards. No horizontal scrolling. */
  .table-wrap{border:none;background:transparent;overflow:visible;}
  .table thead,.data-table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);}
  .table tbody tr,.data-table tbody tr{display:block;background:var(--surface);
    border:1px solid var(--border);border-radius:var(--radius);margin-bottom:var(--s3);
    padding:var(--s3);}
  .table td,.data-table td{display:flex;justify-content:space-between;align-items:center;
    gap:var(--s4);border:none;padding:6px 0;font-size:14px;}
  .table td::before,.data-table td::before{content:attr(data-label);font-size:12px;
    color:var(--ink-faint);font-weight:600;flex:none;}
  .table td:last-child,.data-table td:last-child{padding-top:var(--s3);
    border-top:1px solid var(--border);margin-top:6px;justify-content:stretch;}
  .table td:last-child .btn,.data-table td:last-child .btn{width:100%;}
}

@media (max-width:430px){
  .wrap-narrow{padding:0 var(--s3);}
  .card{padding:var(--s4) var(--s3);}
  .stat-grid{grid-template-columns:repeat(2,1fr);}
  .row3.address-grid{grid-template-columns:1fr;}
  h1{font-size:21px;}
}

/* Nothing should ever scroll sideways. */
html,body{max-width:100%;overflow-x:hidden;}
img,svg,table{max-width:100%;}
.cust-name,.pc-name,.docset-name,.prog-name{overflow-wrap:anywhere;}

/* ═══════════ PASS 1 — structural components ═══════════ */

/* Stepper: nodes + connectors, branch-aware. Replaces the SVG arc. */
.stepper{display:flex;align-items:center;gap:0;margin:0 0 var(--s6);padding:0 2px;}
.stp-item{display:flex;align-items:center;gap:10px;flex:none;}
.stp-node{width:28px;height:28px;border-radius:50%;flex:none;display:grid;place-items:center;
  font:700 12.5px/1 'Inter',system-ui,sans-serif;border:1.5px solid var(--border-strong);
  background:var(--surface);color:var(--ink-faint);
  transition:background var(--t-base) var(--ease),border-color var(--t-base) var(--ease),
             color var(--t-base) var(--ease),transform var(--t-base) var(--ease);}
.stp-node svg{width:15px;height:15px;}
.stp-label{font-size:13px;font-weight:550;color:var(--ink-faint);white-space:nowrap;
  transition:color var(--t-base) var(--ease);}
.stp-item.done .stp-node{background:var(--brand);border-color:var(--brand);color:#fff;}
.stp-item.done .stp-label{color:var(--ink-muted);}
.stp-item.now .stp-node{border-color:var(--brand);color:var(--brand);
  box-shadow:0 0 0 4px var(--brand-ring);transform:scale(1.04);}
.stp-item.now .stp-label{color:var(--ink);font-weight:700;}
.stp-line{flex:1 1 auto;min-width:18px;height:1.5px;background:var(--border);margin:0 12px;
  position:relative;overflow:hidden;}
.stp-line::after{content:'';position:absolute;inset:0;background:var(--brand);
  transform:scaleX(0);transform-origin:left;transition:transform var(--t-slow) var(--ease-out);}
.stp-line.filled::after{transform:scaleX(1);}

/* Quiet service context replacing the "Capacity confirmed" page. */
.svc-context{display:flex;flex-wrap:wrap;gap:var(--s5);padding:12px 0 0;margin-bottom:var(--s4);
  border-top:1px solid var(--border);}
.svc-item{display:flex;flex-direction:column;gap:2px;}
.svc-k{font-family:'IBM Plex Mono',monospace;font-size:10.5px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-faint);}
.svc-v{font-size:13.5px;font-weight:600;color:var(--ink);}

/* Sectioned form groups so Customer & Bill is not one endless form. */
.form-section{margin-top:var(--s6);padding-top:var(--s5);border-top:1px solid var(--border);}
.fs-title{font-size:15px;font-weight:700;margin:0 0 4px;letter-spacing:-0.012em;}
.fs-sub{font-size:12.5px;color:var(--ink-muted);margin:0 0 var(--s4);}
.ctx-line{display:flex;justify-content:space-between;align-items:baseline;gap:var(--s4);
  padding:10px 12px;background:var(--surface-sunk);border-radius:var(--radius-sm);
  margin-bottom:var(--s4);}
.ctx-k{font-size:12.5px;color:var(--ink-muted);}
.ctx-v{font-size:13.5px;font-weight:600;color:var(--ink);overflow-wrap:anywhere;}

@media (max-width:820px){
  /* Stepper stays comprehensible: numbers remain, labels collapse to the
     current step only, so four nodes still fit a 375px screen. */
  .stepper{margin-bottom:var(--s5);}
  .stp-label{display:none;}
  .stp-item.now .stp-label{display:inline;font-size:12.5px;}
  .stp-line{margin:0 8px;min-width:10px;}
  .svc-context{gap:var(--s4);}
  .form-section{margin-top:var(--s5);}
}

/* ═══════════ PASS 2 — CRM grid, summary, completion ═══════════ */

/* ---- Compact premium CRM table ---- */
.table-wrap{border-radius:var(--radius-lg);}
.data-table th,.table th{font-size:10.5px;letter-spacing:.09em;padding:10px 14px;
  color:var(--ink-faint);font-weight:600;background:transparent;
  border-bottom:1px solid var(--border-strong);}
.crm-row td{padding:11px 14px;border-bottom:1px solid var(--border);vertical-align:middle;}
.crm-row:hover{background:var(--surface-sunk);}
.crm-row:last-child td{border-bottom:none;}
.cell-cust{min-width:200px;}
.cust-name{display:block;font-weight:650;font-size:14px;color:var(--ink);
  letter-spacing:-0.008em;line-height:1.35;overflow-wrap:anywhere;}
.cust-sub{display:block;font-size:12px;color:var(--ink-faint);line-height:1.4;
  overflow-wrap:anywhere;}
.cell-code .mono,.cell-code{font-family:'IBM Plex Mono',monospace;font-size:12.5px;
  color:var(--ink-muted);white-space:nowrap;}
.cell-util{font-size:13px;color:var(--ink-muted);}
.cell-date{font-size:12.5px;color:var(--ink-faint);white-space:nowrap;}
.crm-empty{text-align:center;color:var(--ink-faint);padding:34px 14px;font-size:13.5px;}

/* Status badge doubling as the resume control. */
.status-action{border:1px solid transparent;cursor:pointer;font:inherit;
  font-size:12px;font-weight:600;height:26px;padding:0 6px 0 10px;gap:4px;
  transition:background var(--t-quick) var(--ease),box-shadow var(--t-quick) var(--ease),
             transform var(--t-quick) var(--ease);}
.status-action .sp-go{width:13px;height:13px;opacity:.45;
  transition:transform var(--t-quick) var(--ease),opacity var(--t-quick) var(--ease);}
.status-action:hover{box-shadow:var(--shadow-xs);}
.status-action:hover .sp-go{transform:translateX(2px);opacity:.9;}
.status-action:active{transform:translateY(1px);}
.status-action:focus-visible{outline:none;box-shadow:0 0 0 3px var(--brand-ring);}

/* ---- One premium review summary ---- */
.summary{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s5);
  padding:var(--s5) 0;margin-bottom:var(--s4);
  border-top:1px solid var(--border);border-bottom:1px solid var(--border);}
.sum-group{min-width:0;}
.sum-title{font-family:'IBM Plex Mono',monospace;font-size:10.5px;letter-spacing:.09em;
  text-transform:uppercase;color:var(--ink-faint);font-weight:600;margin:0 0 8px;}
.sum-lead{font-size:15px;font-weight:700;letter-spacing:-0.014em;color:var(--ink);
  margin:0 0 10px;line-height:1.3;overflow-wrap:anywhere;}
.sum-dl{margin:0;display:flex;flex-direction:column;gap:6px;}
.sum-dl>div{display:flex;flex-direction:column;gap:1px;min-width:0;}
.sum-dl dt{font-size:11.5px;color:var(--ink-faint);}
.sum-dl dd{margin:0;font-size:13px;color:var(--ink);overflow-wrap:anywhere;line-height:1.45;}

/* ---- Calm completion ---- */
.done-wrap{text-align:center;padding:var(--s6) 0 var(--s5);}
.done-mark{width:52px;height:52px;border-radius:50%;margin:0 auto var(--s4);
  display:grid;place-items:center;background:var(--brand-tint);color:var(--brand);}
.done-mark svg{width:26px;height:26px;}
.done-title{font-size:22px;font-weight:800;letter-spacing:-0.02em;margin:0 0 6px;}
.done-sub{color:var(--ink-muted);font-size:14px;margin:0;}

@media (max-width:820px){
  .summary{grid-template-columns:1fr;gap:var(--s4);padding:var(--s4) 0;}
  .sum-group + .sum-group{padding-top:var(--s4);border-top:1px solid var(--border);}
  /* CRM rows become cards: customer leads, status is the obvious tap target. */
  .crm-row td{padding:5px 0;}
  .crm-row td.cell-cust{padding-top:0;}
  .crm-row td.cell-cust::before{display:none;}
  .cust-name{font-size:15px;}
  .status-action{height:34px;padding:0 10px 0 14px;font-size:13px;}
  .cell-status{padding-top:10px !important;}
}
  .summary-done{grid-template-columns:1fr;max-width:340px;margin:var(--s5) auto var(--s5);
    text-align:left;border-top:1px solid var(--border);border-bottom:1px solid var(--border);}
  .summary-done .sum-dl>div{flex-direction:row;justify-content:space-between;
    align-items:baseline;gap:var(--s4);}
  .done-wrap .btn{min-width:200px;}

/* ═══════════════════════════════════════════════════════════════════
   CUSTOMER & BILL — workbench composition.
   Full-bleed page shell, main work column + context rail. Sections are
   separated by SPACING and a numbered head, not by nested bordered cards.
   ═══════════════════════════════════════════════════════════════════ */
.wb{max-width:1180px;margin:0 auto;padding:0 var(--s6) var(--s8);}
.wb-head{padding:var(--s6) 0 var(--s5);border-bottom:1px solid var(--border);
  margin-bottom:var(--s6);}
.wb-eyebrow{font-family:'IBM Plex Mono',monospace;font-size:10.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-faint);margin:0 0 10px;}
.wb-title{font-size:clamp(28px,3vw,38px);line-height:1.08;letter-spacing:-0.03em;
  font-weight:800;margin:0 0 10px;}
.wb-sub{font-size:15.5px;color:var(--ink-muted);max-width:56ch;margin:0;line-height:1.55;}

.wb-grid{display:grid;grid-template-columns:minmax(0,1fr) 288px;gap:var(--s8);
  align-items:start;}
.wb-main{min-width:0;}

/* Numbered sections: hierarchy from type + space, no card chrome. */
.blk{padding:0 0 var(--s7);margin-bottom:var(--s7);border-bottom:1px solid var(--border);}
.blk:last-of-type{border-bottom:none;margin-bottom:var(--s5);}
.blk-head{display:flex;gap:14px;align-items:flex-start;margin-bottom:var(--s5);}
.blk-num{flex:none;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;
  background:var(--ink);color:#fff;font:700 12px/1 'Inter',system-ui,sans-serif;margin-top:2px;}
.blk-title{font-size:19px;font-weight:750;letter-spacing:-0.018em;margin:0 0 3px;line-height:1.25;}
.blk-sub{font-size:13.5px;color:var(--ink-muted);margin:0;line-height:1.5;}
.grp{font-family:'IBM Plex Mono',monospace;font-size:10.5px;letter-spacing:.09em;
  text-transform:uppercase;color:var(--ink-faint);font-weight:600;
  margin:var(--s5) 0 var(--s3);padding-bottom:7px;border-bottom:1px solid var(--border);}
.blk .grp:first-of-type{margin-top:0;}

/* Fields: label-above, generous, no bordered wrapper. */
.fld{display:block;margin-bottom:var(--s4);}
.fld-l{display:block;font-size:12.5px;font-weight:600;color:var(--ink);margin-bottom:6px;}
.fld-l em{font-style:normal;font-weight:400;color:var(--ink-faint);}
.fld-h{display:block;font-size:12px;color:var(--ink-faint);margin-top:5px;}
.fld-err{font-size:13px;color:var(--danger);margin:0 0 var(--s3);font-weight:500;}
.fgrid{display:grid;gap:var(--s4);}
.fgrid-2{grid-template-columns:1fr 1fr;}
.fgrid-addr{grid-template-columns:.9fr 1.3fr .7fr .8fr;}
.chk{display:flex;align-items:center;gap:10px;margin:var(--s4) 0 0;cursor:pointer;font-size:13.5px;}
.chk input{width:17px;height:17px;accent-color:var(--brand);flex:none;}

/* Upload as a centrepiece, not a control inside a form. */
.drop-xl{display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:8px;text-align:center;min-height:190px;padding:var(--s6);cursor:pointer;
  border:1.5px dashed var(--border-strong);border-radius:var(--radius-lg);
  background:var(--surface-sunk);color:var(--ink-muted);
  transition:border-color var(--t-base) var(--ease),background var(--t-base) var(--ease),
             transform var(--t-quick) var(--ease);}
.drop-xl:hover,.drop-xl.drag{border-color:var(--brand);background:var(--brand-tint);}
.drop-xl:active{transform:scale(.995);}
.drop-ico{width:34px;height:34px;color:var(--ink-faint);margin-bottom:2px;}
.drop-xl:hover .drop-ico{color:var(--brand);}
.drop-title{font-size:15.5px;font-weight:650;color:var(--ink);}
.drop-sub{font-size:12.5px;color:var(--ink-faint);}

/* Validation summary, quiet until it matters. */
.req{border-left:2px solid var(--gold);background:var(--gold-tint);
  padding:12px 14px;border-radius:0 var(--radius-sm) var(--radius-sm) 0;
  font-size:13px;color:var(--warn);margin-bottom:var(--s4);}
.req ul{margin:6px 0 0;padding-left:18px;}

.wb-foot{padding-top:var(--s5);border-top:1px solid var(--border);}
.wb-actions{display:flex;justify-content:space-between;gap:var(--s3);align-items:center;}
.wb-actions .btn-lg{min-width:180px;}

/* Context rail: metadata only. Sticky so it stays with a long form. */
.wb-rail{position:sticky;top:var(--s5);}
.rail-card{background:var(--surface-sunk);border-radius:var(--radius-lg);padding:var(--s5);}
.rail-h{font-family:'IBM Plex Mono',monospace;font-size:10.5px;letter-spacing:.09em;
  text-transform:uppercase;color:var(--ink-faint);font-weight:600;margin:0 0 var(--s4);}
.rail-card .svc-context{flex-direction:column;gap:var(--s4);border-top:none;
  padding:0;margin:0 0 var(--s4);}
.rail-line{display:flex;flex-direction:column;gap:2px;padding-top:var(--s4);
  border-top:1px solid var(--border);}
.rail-k{font-family:'IBM Plex Mono',monospace;font-size:10.5px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-faint);}
.rail-v{font-size:13px;font-weight:600;color:var(--ink);overflow-wrap:anywhere;}

@media (max-width:1024px){
  .wb-grid{grid-template-columns:1fr;gap:var(--s6);}
  /* Rail moves ABOVE the work column and flattens into a metadata strip. */
  .wb-rail{position:static;order:-1;}
  .rail-card{display:flex;flex-wrap:wrap;gap:var(--s5);align-items:baseline;padding:var(--s4);}
  .rail-h{width:100%;margin-bottom:0;}
  .rail-card .svc-context{flex-direction:row;flex-wrap:wrap;margin:0;}
  .rail-line{flex-direction:column;border-top:none;padding-top:0;}
}
@media (max-width:820px){
  .wb{padding:0 var(--s4) var(--s7);}
  .wb-head{padding-top:var(--s5);margin-bottom:var(--s5);}
  .wb-title{font-size:26px;}
  .blk{padding-bottom:var(--s6);margin-bottom:var(--s6);}
  .fgrid-2{grid-template-columns:1fr;}
  .fgrid-addr{grid-template-columns:1fr 1fr;}
  .drop-xl{min-height:150px;padding:var(--s5);}
  .wb-actions{flex-direction:column-reverse;}
  .wb-actions .btn{width:100%;}
}
@media (max-width:430px){
  .wb{padding:0 var(--s3) var(--s6);}
  .wb-title{font-size:23px;}
  .fgrid-addr{grid-template-columns:1fr;}
  .blk-head{gap:10px;}
}

/* ═══════════════════════════════════════════════════════════════════
   CUSTOMER & BILL — rendered scale. The previous pass was structurally
   right but physically miniature: 13px labels, 44px controls and 19px
   headings inside a 1180px shell read as a tiny form in a large page.
   These values are set to the rendered targets, not to tokens.
   ═══════════════════════════════════════════════════════════════════ */
.wb{max-width:1200px;padding:0 var(--s6) 96px;}
.wb-head{padding:40px 0 28px;margin-bottom:48px;}
.wb-title{font-size:clamp(30px,2.8vw,38px);margin-bottom:12px;}
.wb-sub{font-size:16px;line-height:1.6;}
.wb-grid{grid-template-columns:minmax(0,1fr) 308px;gap:40px;}

/* Section rhythm: 64px between majors, headings with real presence. */
.blk{padding:0 0 56px;margin-bottom:56px;}
.blk-title{font-size:22px;font-weight:750;letter-spacing:-0.02em;margin:0 0 6px;}
.blk-sub{font-size:15px;margin:0 0 24px;}
.grp{font-size:11px;margin:32px 0 14px;}
.blk .grp:first-of-type{margin-top:0;}

/* Controls at real size. */
.wb .fld{margin-bottom:22px;}
.wb .fld-l{font-size:13px;margin-bottom:9px;}
.wb input[type=text],.wb input[type=email],.wb input[type=password],
.wb input[type=tel],.wb select{height:48px;font-size:15.5px;padding:0 15px;}
.wb select{padding-right:38px;background-position:right 15px center;}
.wb .fgrid{gap:20px;}
.wb .chk{margin-top:24px;font-size:14.5px;}
.wb .chk input{width:19px;height:19px;}
.fld-h{font-size:12.5px;}

/* PROGRAM — the visual anchor. Substantial side-by-side panels. */
.prog-wrap{margin-top:0;}
.prog-head{font-size:14px;font-family:'Inter',system-ui,sans-serif;letter-spacing:0;
  text-transform:none;color:var(--ink-muted);margin-bottom:16px;}
.prog-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(330px,1fr));gap:18px;}
.pg{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:6px;
  min-height:138px;padding:22px 24px;text-align:left;cursor:pointer;font:inherit;
  background:var(--surface);border:2px solid var(--border-strong);
  border-radius:var(--radius-lg);
  transition:border-color var(--t-base) var(--ease),background var(--t-base) var(--ease),
             box-shadow var(--t-base) var(--ease),transform var(--t-quick) var(--ease);}
.pg:hover{border-color:var(--ink-faint);transform:translateY(-2px);box-shadow:var(--shadow);}
.pg:focus-visible{outline:none;box-shadow:0 0 0 4px var(--brand-ring);}
.pg.selected{border-color:var(--brand);background:var(--brand-tint);
  box-shadow:0 0 0 1px var(--brand);}
.pg-name{font-size:17px;font-weight:750;letter-spacing:-0.015em;color:var(--ink);}
.pg-save{font-family:'Manrope',sans-serif;font-size:32px;font-weight:800;line-height:1;
  letter-spacing:-0.03em;color:var(--brand);}
.pg-pct{font-size:15px;font-weight:700;margin-left:3px;letter-spacing:-0.01em;}
.pg-save-none{font-size:15px;font-weight:600;color:var(--ink-faint);font-family:inherit;}
.pg-note{font-size:13px;color:var(--ink-muted);line-height:1.45;margin-top:2px;}
.pg-check{position:absolute;top:18px;right:18px;width:24px;height:24px;border-radius:50%;
  display:grid;place-items:center;background:var(--brand);color:#fff;
  opacity:0;transform:scale(.6);
  transition:opacity var(--t-base) var(--ease),transform var(--t-base) var(--ease-out);}
.pg-check svg{width:14px;height:14px;}
.pg.selected .pg-check{opacity:1;transform:scale(1);}

/* UPLOAD — hero, full column width. */
.drop-xl{min-height:210px;gap:10px;border-width:2px;}
.drop-ico{width:40px;height:40px;}
.drop-title{font-size:17px;font-weight:700;}
.drop-sub{font-size:13.5px;}

/* Action row with a substantial primary. */
.wb-foot{padding-top:32px;}
.wb-actions .btn{height:50px;font-size:15.5px;}
.wb-actions .btn-lg{min-width:170px;padding:0 28px;}
.wb-actions .btn-ghost{min-width:120px;}

/* Rail with enough substance to earn the column. */
.rail-card{padding:26px 24px;}
.rail-h{font-size:11px;margin-bottom:20px;}
.rail-card .svc-context{gap:18px;margin-bottom:18px;}
.svc-v{font-size:14.5px;}
.rail-line{padding-top:16px;margin-top:16px;gap:4px;}
.rail-v{font-size:14.5px;}
.rail-empty{color:var(--ink-faint);font-weight:500;}
.rail-prog .rail-v{color:var(--brand);font-weight:700;}

@media (max-width:1100px){
  .wb-grid{grid-template-columns:1fr;gap:32px;}
  .wb-rail{position:static;order:-1;}
  .rail-card{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
    gap:20px;align-items:start;}
  .rail-h{grid-column:1/-1;margin-bottom:0;}
  .rail-card .svc-context{display:contents;}
  .rail-line{border-top:none;padding-top:0;margin-top:0;}
}
@media (max-width:820px){
  .wb{padding:0 20px 64px;}
  .wb-head{padding-top:28px;margin-bottom:32px;}
  .wb-title{font-size:27px;}
  .blk{padding-bottom:40px;margin-bottom:40px;}
  .blk-title{font-size:20px;}
  .prog-grid{grid-template-columns:1fr;}
  .pg{min-height:0;padding:18px 20px;}
  .pg-save{font-size:28px;}
  .drop-xl{min-height:170px;}
  .wb input,.wb select{height:50px;font-size:16px;}
}

/* ═══════════════════════════════════════════════════════════════════
   CUSTOMER & BILL — explicit desktop grid.
   The screen was a single vertical chain of full-width controls inside a
   620px shell. It is now an application layout that uses the width:
     ROW 1  program panels (2-up)
     ROW 2  upload  |  customer + account
     ROW 3  service address (street full width, then city/state/zip)
     ROW 4  customer access (phone | password | confirm)
     ROW 5  Back .................................. Continue
   ═══════════════════════════════════════════════════════════════════ */
.wb{max-width:1200px;padding:0 32px 72px;}
.wb-head{padding:32px 0 24px;margin-bottom:32px;}

/* The rail is gone: its content is now a compact strip under the header, so
   the full width goes to the work itself. */
.wb-grid{display:block;}
.wb-rail{display:none;}
.wb-strip{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));
  gap:20px 28px;padding:16px 20px;margin-bottom:32px;
  background:var(--surface-sunk);border-radius:var(--radius);}
.wb-strip .svc-item,.wb-strip .rail-line{display:flex;flex-direction:column;gap:3px;
  border:none;padding:0;margin:0;min-width:0;}
.wb-strip .svc-k,.wb-strip .rail-k{font-family:'IBM Plex Mono',monospace;font-size:10px;
  letter-spacing:.08em;text-transform:uppercase;color:var(--ink-faint);}
.wb-strip .svc-v,.wb-strip .rail-v{font-size:13.5px;font-weight:650;color:var(--ink);
  overflow-wrap:anywhere;line-height:1.35;}
.wb-strip .svc-context{display:contents;}

/* Sections: tighter rhythm, no 100px voids. */
.blk{padding:0 0 32px;margin-bottom:32px;}
.blk:last-of-type{padding-bottom:0;margin-bottom:24px;}
.blk-title{font-size:20px;margin-bottom:4px;}
.blk-sub{font-size:14px;margin:0 0 18px;}
.grp{margin:0 0 12px;font-size:10.5px;}

/* ROW 2 — upload beside the extracted data. */
.row-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:32px;
  align-items:start;}
/* ROW 3 — street full width, then city / state / zip. */
.grid-addr{display:grid;grid-template-columns:minmax(0,2fr) minmax(120px,1fr) 110px;gap:16px;}
.grid-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;}
.grid-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;}
/* ROW 4 — phone beside the credentials. */
.row-access{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1fr);gap:16px;}

.wb .fld{margin-bottom:16px;}
.wb .fld-l{font-size:12.5px;margin-bottom:7px;}
.wb input[type=text],.wb input[type=email],.wb input[type=password],
.wb input[type=tel],.wb select{height:46px;font-size:15px;}

/* Program: two panels across the full width. */
.prog-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;}
.prog-grid:has(.pg:only-child){grid-template-columns:minmax(0,520px);}
.pg{min-height:126px;padding:20px 22px;}
.pg-save{font-size:28px;}

/* Upload sized to its half-column, not the page. */
.drop-xl{min-height:100%;height:100%;box-sizing:border-box;}
.blk-upload{display:flex;flex-direction:column;}

.wb-foot{padding-top:24px;margin-top:8px;}
.req{margin-bottom:16px;}

@media (max-width:1024px){
  .row-split{grid-template-columns:1fr;gap:24px;}
  .row-access{grid-template-columns:1fr 1fr;}
  .drop-xl{min-height:180px;height:auto;}
}
@media (max-width:768px){
  .wb{padding:0 18px 56px;}
  .prog-grid{grid-template-columns:1fr;}
  .grid-addr,.grid-2,.grid-3,.row-access{grid-template-columns:1fr;}
  .wb-strip{grid-template-columns:repeat(2,1fr);}
  .blk{padding-bottom:26px;margin-bottom:26px;}
}

/* ═══════════════════════════════════════════════════════════════════
   CUSTOMER & BILL — built to the approved mockup.
   Section order, grid ratios, sizes and breakpoint come from the
   template. Dalton's own tokens supply the colour so the screen stays
   consistent with the rest of the app.
   ═══════════════════════════════════════════════════════════════════ */
.wb{max-width:1120px;margin:0 auto;padding:28px 28px 56px;}
.wb .wb-title{font-size:36px;line-height:1.1;margin:0 0 8px;letter-spacing:-.03em;font-weight:800;}
.wb .wb-sub{font-size:16px;color:var(--ink-muted);max-width:720px;margin:0 0 30px;line-height:1.45;}

.sec{padding:26px 0;border-top:1px solid var(--border);}
.sec:first-of-type{border-top:0;padding-top:0;}
.sec-head{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-bottom:16px;}
.sec-head h2{font-size:21px;margin:0 0 4px;letter-spacing:-.015em;font-weight:750;}
.sec-head p{margin:0;color:var(--ink-muted);font-size:14px;}

/* Utility chip — live utility, logo optional. */
.util-chip{display:flex;align-items:center;gap:10px;padding:8px 12px;flex:none;
  border:1px solid var(--border);border-radius:12px;background:var(--surface);
  box-shadow:var(--shadow-xs);}
.util-chip[hidden]{display:none;}
.util-logo{width:34px;height:34px;border-radius:9px;background:var(--navy);color:#fff;
  display:grid;place-items:center;font-weight:800;font-size:12px;letter-spacing:.02em;flex:none;}
.util-txt strong{display:block;font-size:13px;line-height:1.2;}
.util-txt small{display:block;color:var(--ink-muted);font-size:11px;margin-top:2px;}

/* Program cards */
.prog-wrap{margin:0;}
.prog-head{display:none;}          /* the section head already says it */
.prog-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
.pg{position:relative;appearance:none;width:100%;text-align:left;min-height:88px;
  display:block;padding:14px 16px;cursor:pointer;font:inherit;
  border:1px solid var(--border);border-radius:14px;background:var(--surface);
  transition:border-color .16s ease,transform .16s ease,box-shadow .16s ease;}
.pg:hover{border-color:var(--border-strong);transform:translateY(-1px);}
.pg:focus-visible{outline:none;box-shadow:0 0 0 3px var(--brand-ring);}
.pg.selected{border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-tint);}
.pg-name{display:block;font-weight:800;font-size:15px;}
.pg-save{display:block;font-size:22px;font-weight:800;color:var(--brand);margin-top:5px;
  font-family:inherit;letter-spacing:-.01em;}
.pg-pct{font-size:22px;margin-left:0;}
.pg-save-none{font-size:15px;color:var(--ink-faint);font-weight:700;}
.pg-note{display:block;font-size:12px;color:var(--ink-muted);margin-top:2px;}
.pg-check{position:absolute;right:13px;top:13px;width:20px;height:20px;border-radius:50%;
  border:1px solid var(--border-strong);display:grid;place-items:center;color:#fff;
  background:transparent;opacity:1;transform:none;transition:background .16s ease;}
.pg-check svg{width:12px;height:12px;opacity:0;transition:opacity .16s ease;}
.pg.selected .pg-check{background:var(--brand);border-color:var(--brand);}
.pg.selected .pg-check svg{opacity:1;}

/* Grids straight from the template */
.access{display:grid;grid-template-columns:1fr 1fr 1fr;gap:16px;}
.fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 16px;}
.address{display:grid;grid-template-columns:2fr 1fr 110px;gap:16px;margin-top:16px;}
.address .street{grid-column:1/-1;}
.fd{display:flex;flex-direction:column;gap:7px;min-width:0;}
.fd.full{grid-column:1/-1;}
.lbl{font-size:12px;font-weight:700;color:var(--ink-muted);}
.lbl em{font-style:normal;font-weight:400;color:var(--ink-faint);}
.wb input[type=text],.wb input[type=email],.wb input[type=password],
.wb input[type=tel],.wb select{height:46px;border-radius:9px;padding:0 12px;font-size:15px;}
.wb .fld-h{font-size:12px;color:var(--ink-faint);}
.same{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--ink-muted);margin-top:14px;}
.same input{width:16px;height:16px;accent-color:var(--brand);}

/* Upload */
.upload{border:1.5px dashed var(--border-strong);border-radius:14px;background:var(--surface-sunk);
  min-height:150px;max-width:620px;display:grid;place-items:center;text-align:center;
  padding:24px;cursor:pointer;transition:border-color .16s ease,background .16s ease;}
.upload:hover,.upload.drag{border-color:var(--brand);background:var(--brand-tint);}
.up-ico{width:28px;height:28px;color:var(--ink-faint);}
.upload strong{display:block;font-size:16px;margin-top:6px;color:var(--ink);}
.upload small{display:block;color:var(--ink-muted);margin-top:6px;line-height:1.5;font-size:12.5px;}

/* Hints and actions */
.wb .hint{font-size:12px;color:var(--warn);margin-top:10px;}
#bill-submit-error.hint,#contact-submit-error.hint,#program-error.hint{color:var(--danger);}
.wb .req{margin-top:16px;}
.actions{display:flex;justify-content:space-between;align-items:center;
  padding-top:26px;border-top:1px solid var(--border);margin-top:8px;}
.actions .btn{height:48px;padding:0 22px;border-radius:9px;font-weight:700;}
.actions .btn-primary{min-width:150px;}

@media(max-width:900px){
  .prog-grid,.access{grid-template-columns:1fr;}
  .fields{grid-template-columns:1fr;}
  .address{grid-template-columns:1fr 120px;}
  .address .street{grid-column:1/-1;}
  .wb{padding:20px;}
  .wb .wb-title{font-size:28px;}
  .sec-head{flex-direction:column;align-items:flex-start;gap:12px;}
  .upload{max-width:none;}
  .wb input,.wb select{font-size:16px;}
}

/* ═══════════════════════════════════════════════════════════════════
   AGREEMENTS / REVIEW & FINISH — built to the approved mockup.
   The legal block inside .agreement-wrap is rendered by the protected
   component and is styled only by its own existing rules.
   ═══════════════════════════════════════════════════════════════════ */
.agr-page{width:min(1120px, calc(100% - 40px));margin:0 auto;padding:30px 0 70px;}
.agr-page .page-head{display:flex;justify-content:space-between;gap:24px;
  align-items:end;margin-bottom:22px;}
.agr-page .eyebrow{text-transform:uppercase;letter-spacing:.16em;font-size:11px;
  font-weight:800;color:var(--ink-faint);margin-bottom:8px;}
.agr-page h1{margin:0;font-size:38px;line-height:1.08;letter-spacing:-.035em;font-weight:800;}
.agr-page .subtitle{margin:10px 0 0;color:var(--ink-muted);font-size:16px;}
.complete-pill{display:inline-flex;align-items:center;gap:8px;flex:none;
  border:1px solid #cae9d7;background:var(--brand-tint);color:#177845;
  border-radius:999px;padding:8px 14px;font-size:13px;font-weight:700;}
.complete-pill[hidden]{display:none;}

.agr-card{background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius-lg);box-shadow:var(--shadow);overflow:hidden;}
.agr-card .summary{padding:30px 32px 28px;display:block;border:none;margin:0;}
.summary-top{display:flex;justify-content:space-between;align-items:center;
  gap:20px;margin-bottom:26px;}
.summary-title{font-size:20px;font-weight:800;letter-spacing:-.02em;}
.enr{font-size:12px;color:var(--ink-muted);font-weight:700;
  font-family:'IBM Plex Mono',monospace;}
.summary-grid{display:grid;grid-template-columns:1.05fr 1.2fr 1fr;gap:28px;}
.group{min-width:0;}
.group-label{color:var(--ink-faint);font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;font-weight:800;padding-bottom:12px;
  border-bottom:1px solid var(--border);margin-bottom:14px;}
.group .primary{font-weight:800;font-size:17px;margin-bottom:9px;
  letter-spacing:-.015em;overflow-wrap:anywhere;}
.value-row{display:grid;gap:3px;margin-top:12px;}
.value-row .k{color:var(--ink-faint);font-size:12px;font-weight:700;}
.value-row .v{color:var(--ink);font-size:14px;font-weight:650;line-height:1.4;
  overflow-wrap:anywhere;}
.savings{display:inline-flex;align-items:baseline;gap:7px;margin-top:2px;}
.savings strong{font-size:30px;font-weight:800;color:var(--brand);letter-spacing:-.03em;}
.savings span{font-size:13px;color:var(--ink-muted);font-weight:650;}
.proof{margin-top:15px;background:var(--surface-sunk);border:1px solid var(--border);
  border-radius:12px;padding:12px 13px;font-size:14px;}
.proof strong{font-weight:700;color:var(--ink);}
.agr-card .divider{height:1px;background:var(--border);}
.agreement-wrap{padding:30px 32px 32px;}
.agreement-heading{display:flex;justify-content:space-between;align-items:flex-end;
  gap:18px;margin-bottom:20px;}
.agreement-heading h2{margin:0;font-size:22px;letter-spacing:-.025em;font-weight:800;}
.agreement-heading p{margin:6px 0 0;color:var(--ink-muted);font-size:14px;}
.final-label{color:var(--ink-faint);text-transform:uppercase;letter-spacing:.15em;
  font-size:10px;font-weight:800;flex:none;}
.agr-foot{display:flex;justify-content:flex-start;padding-top:22px;}

@media (max-width:900px){
  .agr-page{padding:18px 0 56px;}
  .agr-page .page-head{align-items:start;flex-direction:column;}
  .agr-page h1{font-size:29px;}
  .summary-grid{grid-template-columns:1fr;gap:22px;}
  .agr-card .summary{padding:22px 20px 20px;}
  .agreement-wrap{padding:24px 20px;}
  .savings strong{font-size:26px;}
}

/* Program committed at Perch: readable, but no longer a control. */
.pg.committed{cursor:default;opacity:1;}
.pg.committed:hover{transform:none;border-color:var(--border);box-shadow:none;}
.pg.committed.selected:hover{border-color:var(--brand);}
.pg.committed:not(.selected){opacity:.55;}

/* LMI self-attestation — mirrors the official Perch form's structure. */
.sa-threshold{display:flex;flex-direction:column;gap:4px;padding:16px 18px;margin:8px 0 18px;
  background:var(--surface-sunk);border-radius:var(--radius);}
.sa-cap{font-family:'IBM Plex Mono',monospace;font-size:10.5px;letter-spacing:.09em;
  text-transform:uppercase;color:var(--ink-faint);}
.sa-amt{font-size:30px;font-weight:800;letter-spacing:-.03em;color:var(--ink);line-height:1.05;}
.sa-for{font-size:13px;color:var(--ink-muted);}
.sa-choices{display:grid;gap:10px;margin-bottom:18px;}
.sa-opt{text-align:left;padding:14px 16px;font:inherit;font-size:14px;cursor:pointer;
  background:var(--surface);border:1.5px solid var(--border-strong);border-radius:10px;
  transition:border-color var(--t-quick) var(--ease),background var(--t-quick) var(--ease);}
.sa-opt:hover{border-color:var(--ink-faint);}
.sa-opt.selected{border-color:var(--brand);background:var(--brand-tint);}
.sa-opt:focus-visible{outline:none;box-shadow:0 0 0 3px var(--brand-ring);}
@media (max-width:768px){ .sa-amt{font-size:26px;} }

/* ═══════════════════════════════════════════════════════════════════
   UBS SIGN IN — ported from ubs_signin_mockup_v5_cool_pattern.html.
   Scoped under #screen-login so nothing else in the app is affected.
   ═══════════════════════════════════════════════════════════════════ */
#screen-login.active{
  --ubs-bg:#f5f8f6; --ubs-text:#15372b; --ubs-muted:#7d8d85;
  --ubs-line:#dfe8e3; --ubs-accent:#1f7a55; --ubs-accent-dark:#165d41;
  --ubs-shadow:0 24px 70px rgba(23,71,51,.10);
  min-height:100vh; display:grid; place-items:center; padding:24px;
  position:relative; overflow:hidden; background:#f6f9f7; color:var(--ubs-text);
  
}
/* Layered orbital/grid haze — CSS only, no image assets. */
#screen-login::before{
  content:""; position:fixed; inset:-14%; pointer-events:none;
  background:
    repeating-radial-gradient(circle at 22% 24%, rgba(31,122,85,.055) 0 1px, transparent 1px 34px),
    repeating-radial-gradient(circle at 82% 72%, rgba(31,122,85,.045) 0 1px, transparent 1px 42px),
    linear-gradient(115deg, transparent 0 46%, rgba(31,122,85,.030) 46.5% 47.5%, transparent 48% 100%),
    linear-gradient(25deg, transparent 0 46%, rgba(31,122,85,.024) 46.5% 47.5%, transparent 48% 100%),
    radial-gradient(circle at 18% 18%, rgba(31,122,85,.11) 0 2px, transparent 2.5px),
    radial-gradient(circle at 72% 34%, rgba(31,122,85,.08) 0 1.6px, transparent 2px);
  background-size:100% 100%,100% 100%,88px 88px,88px 88px,38px 38px,54px 54px;
  opacity:.72; transform:rotate(-2deg) scale(1.03);
  -webkit-mask-image:linear-gradient(to bottom right, rgba(0,0,0,.88), rgba(0,0,0,.34));
  mask-image:linear-gradient(to bottom right, rgba(0,0,0,.88), rgba(0,0,0,.34));
}
#screen-login::after{
  content:""; position:fixed; inset:0; pointer-events:none;
  background:
    radial-gradient(circle at 14% 16%, rgba(95,190,143,.19), transparent 25%),
    radial-gradient(circle at 88% 22%, rgba(95,190,143,.10), transparent 24%),
    radial-gradient(circle at 78% 86%, rgba(95,190,143,.13), transparent 30%);
  filter:blur(26px); opacity:.88;
}
.ubs-shell{
  width:min(1080px,100%); min-height:640px; display:grid; grid-template-columns:1fr 1fr;
  background:rgba(255,255,255,.74); border:1px solid rgba(255,255,255,.95);
  border-radius:30px; overflow:hidden; box-shadow:var(--ubs-shadow);
  -webkit-backdrop-filter:blur(18px); backdrop-filter:blur(18px);
  position:relative; z-index:1;
}
.ubs-brand-side{
  position:relative; padding:42px; display:flex; flex-direction:column;
  justify-content:center; color:#fff; overflow:hidden;
  background:
    radial-gradient(circle at 20% 20%, rgba(255,255,255,.06), transparent 24%),
    linear-gradient(160deg, rgba(38,137,94,.98), rgba(23,94,66,.98));
}
.ubs-brand-side::before{
  content:""; position:absolute; inset:-10%;
  background:
    repeating-radial-gradient(circle at 28% 30%, rgba(255,255,255,.11) 0 1px, transparent 1px 28px),
    linear-gradient(135deg, transparent 0 48%, rgba(255,255,255,.055) 49% 51%, transparent 52% 100%),
    linear-gradient(45deg, transparent 0 48%, rgba(255,255,255,.035) 49% 51%, transparent 52% 100%);
  background-size:100% 100%,76px 76px,76px 76px; opacity:.42;
  transform:rotate(-5deg) scale(1.04);
}
.ubs-brand-side::after{
  content:""; position:absolute; width:520px; height:520px; border-radius:50%;
  right:-270px; top:-210px; border:1px solid rgba(255,255,255,.13);
  box-shadow:-88px 210px 0 -26px rgba(255,255,255,.025),
             -138px 296px 0 4px rgba(255,255,255,.018),
             -210px 390px 0 38px rgba(255,255,255,.012);
}
.ubs-brand{position:relative;z-index:2;display:flex;align-items:center;gap:13px;}
.ubs-mark{
  width:46px;height:46px;display:grid;place-items:center;border-radius:14px;
  background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.20);
  font-weight:800;letter-spacing:-.04em;font-size:14px;
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
}
.ubs-brand-name{font-size:18px;font-weight:750;letter-spacing:-.025em;}
.ubs-form-side{display:grid;place-items:center;padding:48px;
  background:rgba(255,255,255,.92);position:relative;}
.ubs-form-wrap{width:min(390px,100%);position:relative;z-index:2;}
.ubs-mobile-brand{display:none;align-items:center;gap:12px;margin-bottom:34px;}
.ubs-mobile-mark{
  width:42px;height:42px;display:grid;place-items:center;border-radius:13px;
  background:var(--ubs-accent);color:#fff;font-size:13px;font-weight:800;
}
.ubs-form-wrap h2{margin:0 0 28px;font-size:34px;letter-spacing:-.045em;font-weight:740;}
.ubs-field{margin-bottom:16px;}
.ubs-field label{display:block;margin:0 0 8px;font-size:13px;font-weight:700;color:#315145;}
#screen-login input{
  width:100%;height:54px;border:1px solid var(--ubs-line);border-radius:14px;
  padding:0 15px;font-size:15px;color:var(--ubs-text);background:#fff;outline:none;
  transition:.18s ease;
}
#screen-login input::placeholder{color:#a7b1ac;}
#screen-login input:focus{
  border-color:rgba(31,122,85,.48);box-shadow:0 0 0 4px rgba(31,122,85,.08);
}
.ubs-password{position:relative;}
.ubs-password input{padding-right:64px;}
.ubs-toggle{
  position:absolute;right:14px;top:50%;transform:translateY(-50%);border:0;
  background:transparent;color:var(--ubs-accent);font-weight:700;font-size:12px;
  cursor:pointer;padding:4px;
}
.ubs-submit{
  width:100%;height:54px;margin-top:6px;border:0;border-radius:14px;
  background:var(--ubs-accent);color:#fff;font-size:15px;font-weight:800;
  cursor:pointer;box-shadow:0 12px 24px rgba(31,122,85,.18);transition:.18s ease;
}
.ubs-submit:hover:not(:disabled){background:var(--ubs-accent-dark);transform:translateY(-1px);}
.ubs-submit:disabled{opacity:.7;cursor:default;}
.ubs-error{margin:14px 0 0;text-align:center;font-size:13px;color:#b3261e;font-weight:600;}
.ubs-footer{margin-top:20px;text-align:center;font-size:12px;color:var(--ubs-muted);}

@media (max-width:820px){
  #screen-login{padding:0;background:#f7faf8;overflow:auto;}
  #screen-login::before{
    inset:-6%;
    background:
      repeating-radial-gradient(circle at 24% 18%, rgba(31,122,85,.05) 0 1px, transparent 1px 30px),
      linear-gradient(120deg, transparent 0 47%, rgba(31,122,85,.028) 48% 52%, transparent 53% 100%),
      radial-gradient(circle at 16% 12%, rgba(31,122,85,.10) 0 1.6px, transparent 2.1px);
    background-size:100% 100%,78px 78px,38px 38px; opacity:.68;
  }
  #screen-login::after{
    background:
      radial-gradient(circle at 12% 16%, rgba(101,190,145,.14), transparent 28%),
      radial-gradient(circle at 92% 84%, rgba(101,190,145,.10), transparent 30%);
  }
  .ubs-shell{display:block;width:100%;min-height:100vh;border:0;border-radius:0;
    box-shadow:none;background:rgba(255,255,255,.84);}
  .ubs-brand-side{display:none;}
  .ubs-form-side{min-height:100vh;padding:28px 22px;align-items:center;
    background:rgba(255,255,255,.78);
    -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);}
  .ubs-form-wrap{width:100%;max-width:420px;}
  .ubs-mobile-brand{display:flex;}
  .ubs-form-wrap h2{font-size:30px;margin-bottom:26px;}
  #screen-login input,.ubs-submit{height:56px;}
}
@media (max-width:430px){
  .ubs-form-side{padding:24px 18px;}
  .ubs-form-wrap h2{font-size:28px;}
}

/* Copy customer link — small control inside the resume banner. */
.btn.btn-sm{height:32px;padding:0 12px;font-size:12.5px;border-radius:8px;
  min-width:0;white-space:nowrap;}
#copy-customer-link{margin-left:auto;}
#copy-customer-link:disabled{opacity:.75;cursor:default;}
/* Manual copy fallback when the clipboard API is unavailable. */
.manual-copy{width:100%;margin-top:10px;display:flex;flex-direction:column;gap:6px;}
.manual-copy label{font-size:12px;color:var(--ink-muted);font-weight:600;}
.manual-copy input{width:100%;height:38px;padding:0 10px;font-size:12.5px;
  font-family:'IBM Plex Mono',monospace;border:1px solid var(--border-strong);
  border-radius:8px;background:var(--surface);}

/* Copy customer link slot — sits above the wizard in the live flow. */
.customer-link-slot{display:flex;justify-content:flex-end;margin-bottom:12px;}