.co-customer-shell { margin: 0; background: #f6f5f2; color: #241e18; font-family: ui-sans-serif, system-ui, -apple-system, sans-serif; font-size: 15px; line-height: 1.5; }
.co-customer-shell *, .co-customer-shell *::before, .co-customer-shell *::after { box-sizing: border-box; }
.co-customer-shell [hidden] { display: none !important; }
.co-customer-band { background: #241e18; border-bottom: 2px solid #e9a025; color: white; }
.co-customer-band-inner { max-width: 1100px; margin: 0 auto; padding: 15px 24px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.co-customer-language { min-height: 44px; display: inline-flex; align-items: center; color: #f6be4f; border: 0; padding: 0; background: transparent; font: inherit; font-weight: 650; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.co-customer-table { background: #fff1db; color: #974912; border-bottom: 1px solid #ebcfaa; padding: 10px 16px; text-align: center; font-size: 14px; }
.co-signing-page { width: 100%; max-width: 1100px; padding: 30px 24px 48px; margin: 0 auto; }
.co-signing-heading { margin-bottom: 22px; }
.co-customer-eyebrow { color: #8d4b18; font-size: 11px; font-weight: 750; letter-spacing: .14em; text-transform: uppercase; margin: 0 0 6px; }
.co-signing-heading h1 { font-size: 29px; letter-spacing: -.025em; line-height: 1.2; margin: 0; font-weight: 750; }
.co-signing-heading > p:last-child { margin: 7px 0 0; color: #70675e; font-size: 14px; }
.co-signing-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(330px, 1fr); align-items: start; gap: 20px; }
.co-signing-details { display: grid; gap: 18px; min-width: 0; }
.co-signing-card { min-width: 0; overflow: hidden; background: #fff; border: 1px solid #e5dfd6; border-radius: 15px; box-shadow: 0 2px 3px rgba(35, 27, 19, .04), 0 12px 28px -24px rgba(35, 27, 19, .28); }
.co-signing-card h2 { font-size: 18px; font-weight: 700; line-height: 1.3; margin: 0; letter-spacing: -.012em; }
.co-signing-money { padding: 21px 23px 17px; border-top: 4px solid #b55c19; }
.co-signing-money h2 { font-size: 22px; margin-bottom: 15px; }
.co-signing-money dl { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 0; }
.co-signing-money dl > div { border-top: 1px solid #e9e3db; padding-top: 12px; min-width: 0; }
.co-signing-money dt { font-size: 13px; line-height: 1.4; }
.co-signing-money dd { margin: 5px 0 0; font-size: 24px; line-height: 1.15; font-weight: 750; font-variant-numeric: tabular-nums; white-space: nowrap; }
.co-signing-money small { display: block; margin-top: 4px; color: #7d7164; font-size: 12px; line-height: 1.35; }
.co-signing-payment-note { color: #716358; font-size: 12px; line-height: 1.5; padding-top: 13px; margin: 13px 0 0; border-top: 1px solid #eee8df; }
.co-signing-lines > h2 { padding: 17px 22px; border-bottom: 1px solid #e8e1d7; }
.co-signing-line { padding: 15px 22px; display: flex; justify-content: space-between; gap: 16px; border-bottom: 1px solid #e8e1d7; }
.co-signing-line > div { min-width: 0; }
.co-signing-line strong { font-size: 14px; font-weight: 650; overflow-wrap: anywhere; }
.co-signing-line small { display: block; font-size: 12px; color: #7d7164; margin-top: 4px; }
.co-signing-line b { font-size: 15px; flex: none; font-weight: 700; font-variant-numeric: tabular-nums; }
.co-signing-net { background: #fbf8f3; }
.co-signing-reason { margin: 0; padding: 16px 22px; font-size: 14px; line-height: 1.55; border-bottom: 1px solid #e8e1d7; overflow-wrap: anywhere; }
.co-signing-paper-fold summary { color: #a14c16; padding: 15px 22px; font-weight: 650; cursor: pointer; min-height: 48px; }
.co-signing-frozen-paper { padding: 18px; border-top: 1px solid #e8e1d7; overflow-wrap: anywhere; }
/* The office's own references on the paper: the customer reads names, not form and job numbers. The PDF keeps them. */
.co-signing-frozen-paper .kf-co-version, .co-signing-frozen-paper .kf-co-job { display: none; }
.co-signing-signature { padding: 21px 22px; }
.co-signing-signature > h2 { margin-bottom: 20px; }
.co-signing-form { display: grid; gap: 10px; }
.co-signing-signature label { font-size: 13px; font-weight: 600; }
.co-customer-input { width: 100%; background: #fff; border: 1px solid #d7cec2; border-radius: 10px; color: #241e18; min-height: 48px; padding: 11px 13px; font: inherit; font-size: 16px; }
.co-customer-input:focus { outline: 3px solid #f5ddbb; outline-offset: 1px; border-color: #b55c19; }
.co-signing-code { margin-bottom: 20px; }
.co-signing-code label { display: block; line-height: 1.5; }
.co-customer-code { max-width: 245px; margin-top: 8px; font-size: 24px; letter-spacing: .3em; text-align: center; font-variant-numeric: tabular-nums; }
.co-customer-link-button { border: 0; background: transparent; color: #9c4612; padding: 10px 0; min-height: 44px; font: inherit; font-size: 13px; font-weight: 650; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.co-signing-code-sent { color: #3f7b46; font-size: 12px; margin: 0; }
.co-signing-code-hint { color: #5c6660; font-size: 12px; line-height: 1.5; margin: 2px 0 8px; }
.co-signing-pad-label { margin: 8px 0 8px; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 6px; }
.co-signing-signature .kf-sigwrap { position: relative; }
.co-signing-signature .kf-sig { display: block; width: 100%; height: 150px; touch-action: none; background: #fffdfa; border: 1px dashed #d7cec2; border-radius: 10px; cursor: crosshair; }
.co-signing-signature .kf-sigguide { position: absolute; left: 16px; right: 16px; bottom: 17px; pointer-events: none; color: #8c7f71; font-size: 11px; }
.co-signing-signature .kf-sigguide-line { border-top: 1px solid #ddd3c6; margin-bottom: 7px; }
.co-signing-signature .kf-clear, .co-signing-signature .kf-adopt { background: transparent; border: none; padding: 5px 0; min-height: 40px; color: #974912; font: inherit; font-size: 12px; font-weight: 650; cursor: pointer; }
.co-signing-signature .kf-clear { display: block; margin-left: auto; }
.co-signing-signature .kf-clear[data-armed="true"] { color: #ae3328; }
.co-signing-signature .kf-adopt:disabled { color: #aaa096; cursor: default; }
.co-signing-tick { display: flex; align-items: flex-start; gap: 11px; min-height: 44px; margin: 0; cursor: pointer; padding: 7px 0; font-weight: 400 !important; font-size: 13px !important; line-height: 1.5; }
.co-signing-tick input { flex: none; width: 21px; height: 21px; margin: 0; accent-color: #b55c19; }
.co-signing-consent { margin-top: 5px; }
.co-signing-consent summary { color: #9c4612; font-size: 13px; font-weight: 650; min-height: 44px; display: list-item; padding: 10px 0; cursor: pointer; }
.co-signing-consent [data-consent-disclosure] { max-height: 240px; overflow-y: auto; border: 1px solid #e5dfd6; border-radius: 8px; padding: 14px; background: #fbf8f3; font-size: 13px; line-height: 1.55; }
.co-signing-consent p { margin: 0 0 12px; }
.co-signing-consent p:last-child { margin-bottom: 0; }
.co-customer-sign-button { width: 100%; border: 1px solid #a24d13; border-radius: 10px; min-height: 49px; padding: 11px 14px; background: #ad5518; color: #fff; font: inherit; font-size: 15px; font-weight: 650; cursor: pointer; }
.co-customer-sign-button:hover { background: #91430f; }
.co-customer-sign-button:disabled { background: #d8b494; border-color: #d8b494; cursor: default; }
.co-signing-hint { font-size: 11px; color: #827567; margin: 0; line-height: 1.5; }
.co-signing-effect { font-size: 12px; color: #7d7164; line-height: 1.5; margin: 2px 0 0; text-align: center; }
.co-signing-decline { margin-top: 17px; padding-top: 13px; border-top: 1px solid #e8e1d7; }
.co-signing-decline summary { color: #9c4612; font-size: 12px; min-height: 44px; padding: 10px 0; cursor: pointer; }
.co-signing-decline label { display: block; margin-bottom: 10px; line-height: 1.5; font-weight: 400; }
.co-signing-alert { padding: 14px 17px; margin-bottom: 18px; border: 1px solid #edb6a6; border-radius: 10px; background: #fff0e9; color: #913a24; font-size: 14px; }
.co-customer-foot { padding: 0 16px 35px; color: #8c8074; font-size: 12px; text-align: center; }
@media (max-width: 800px) {
  .co-signing-grid { grid-template-columns: minmax(0, 1fr); }
}
/* The three money figures need about 150px each to keep a whole figure on one
   line. Where the card is narrower (a phone, and the iPad held upright, 801 to
   1000px, with the signature column beside it) they stack as rows instead. */
@media (max-width: 575px), (min-width: 801px) and (max-width: 1000px) {
  .co-signing-money dl { display: block; }
  .co-signing-money dl > div { display: flex; justify-content: space-between; align-items: center; gap: 14px; padding: 10px 0; }
  .co-signing-money dd { flex: none; margin: 0; font-size: 22px; }
}
@media (max-width: 479px) {
  .co-customer-band-inner { padding: 8px 16px; }
  .co-signing-page { padding: 22px 16px 32px; }
  .co-customer-eyebrow { font-size: 10px; }
  .co-signing-heading { margin-bottom: 19px; }
  .co-signing-heading h1 { font-size: 23px; }
  .co-signing-heading > p:last-child { font-size: 13px; }
  .co-signing-money { padding: 17px 16px 13px; }
  .co-signing-money h2 { font-size: 20px; margin-bottom: 9px; }
  .co-signing-money dt { font-size: 13px; }
  .co-signing-money small { font-size: 11px; }
  .co-signing-payment-note { margin-top: 0; padding-top: 10px; }
  .co-signing-lines > h2, .co-signing-line, .co-signing-reason { padding-left: 16px; padding-right: 16px; }
  .co-signing-card { border-radius: 13px; }
  .co-signing-frozen-paper { padding: 12px; }
}
/* The frozen change-order face, shared by previews. */
  .kf-co { max-width: 42rem; margin: 0 auto; color: #3f3831; font-size: 0.9375rem; line-height: 1.65; }
  .kf-co h1 { font-size: 1.5rem; line-height: 1.25; font-weight: 700; color: #1f1a14; margin: 0 0 0.25rem; }
  .kf-co .kf-co-sub { color: #6b6259; margin: 0 0 1rem; padding-bottom: 0.75rem; border-bottom: 2px solid #b45309; }
  .kf-co h2 { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: #6b6259;
              margin: 1.75rem 0 0.5rem; padding-bottom: 0.4rem; border-bottom: 1px solid #f0ece5; }
  .kf-co p { margin: 0 0 0.75rem; }
  .kf-co table { width: 100%; border-collapse: collapse; margin: 0.5rem 0 1rem; }
  .kf-co table.kf-parties th { text-align: left; font-weight: 600; color: #6b6259; padding: 0.25rem 1rem 0.25rem 0; vertical-align: top; white-space: nowrap; }
  .kf-co table.kf-parties td { padding: 0.25rem 0; color: #1f1a14; overflow-wrap: anywhere; }
  .kf-co table.kf-items th, .kf-co table.kf-items td { border-bottom: 1px solid #f0ece5; padding: 0.5rem 0.5rem 0.5rem 0; vertical-align: top; text-align: left; }
  .kf-co table.kf-items thead th { font-size: 0.75rem; font-weight: 600; color: #6b6259; }
  .kf-co table.kf-items .r { text-align: right; white-space: nowrap; padding-right: 0; padding-left: 0.5rem; }
  .kf-co table.kf-items tfoot th { border-bottom: 0; text-align: right; padding-top: 0.625rem; color: #1f1a14; }
  .kf-co table.kf-items tfoot .kf-total-label { float: left; }
  .kf-co table.kf-items tfoot .kf-total { font-size: 1.125rem; }
  .kf-co table.kf-items tfoot .kf-total-figure { font-weight: 700; }
  .kf-co .kf-line-note, .kf-co .kf-line-discount { margin-top: 0.125rem; font-size: 0.8125rem; color: #6b6259; }
  .kf-co .kf-co-clause { color: #1f1a14; }
  .kf-co .kf-co-version { font-size: 0.75rem; color: #8a8076; }
  @media (max-width: 479px) {
    /* The wide item tables drop their second column to fit a phone. The totals table
       (kf-co-money: before, added, taken off, this change) has only a label and an
       amount, so its second column IS the amount and always stays. */
    .kf-co table.kf-items:not(.kf-co-money) thead th:nth-child(2), .kf-co table.kf-items:not(.kf-co-money) tbody td:nth-child(2) { display: none; }
  }