/* ============================================================
   UNION TITLE SERVICES - CLOSING COST CALCULATOR - STYLES
   Everything is scoped under #utsc so nothing collides with
   existing site CSS. Brand tokens are declared ON #utsc, so
   the component carries its own theme.
   Assumes the page loads Cormorant Garamond (500/600) and
   Hanken Grotesk (400-700); falls back gracefully if not.

   Adds (vs. Fable's original):
   - .page-hero + .calc-zone wrapper styles
   - Customize-panel inline-expandable styles
   - Endorsement sub-section divider in result cards
   - Commercial sub-mode segmented control already covered by .utsc-seg
   - Select element styling (.utsc-select)
   - @media print: clean one-page estimate
   ============================================================ */

/* ---------- page hero (navy band above the wizard card)
   Scoped under .calcpage so it does not collide with the
   existing site-wide .page-hero used by other interior pages. */
/* Banner height cut ~50% (Mike 2026-06-14): smaller top padding + smaller h1.
   The big bottom padding stays because the wizard card tucks up into it via
   .calc-zone .wrap margin-top:-92px. */
.calcpage-hero{
  background: linear-gradient(180deg,#13203A 0%, #1B2A4A 100%);
  color:#F7F3E9;
  padding:40px 22px 104px;
  text-align:center;
  position:relative;
}
.calcpage-hero::before{
  content:""; position:absolute; inset:0;
  background: radial-gradient(circle at 50% 30%, rgba(193,154,77,.18), transparent 60%);
  pointer-events:none;
}
.calcpage-hero .wrap{position:relative; max-width:760px; margin:0 auto;}
.calcpage-hero .eyebrow{
  font-size:11px; font-weight:600; letter-spacing:.24em;
  text-transform:uppercase; color:#D9BC7D; margin-bottom:14px;
}
.calcpage-hero h1{
  font-family:'Cormorant Garamond',Georgia,serif;
  font-weight:600; font-size:36px; line-height:1.1;
  color:#FFFFFF; letter-spacing:-.01em; margin:0 0 12px;
}
.calcpage-hero .lede{
  font-size:16.5px; line-height:1.65; color:#C3CADB; max-width:520px;
  margin:0 auto;
}
.calc-zone{
  background:#FAF7F1;
  padding:0 22px 80px;
  position:relative;
}
.calc-zone .wrap{
  max-width:680px; margin:-92px auto 0; position:relative; z-index:1;
}
@media(min-width:760px){
  .calcpage-hero{padding:46px 22px 110px;}
  .calcpage-hero h1{font-size:44px;}
}

/* ---------- scoped container + tokens ---------- */
#utsc{
  /* brand tokens */
  --navy:#1B2A4A; --navy-deep:#13203A; --navy-lift:#2A4470;
  --cream:#FAF7F1; --cream-text:#F7F3E9; --white:#FFFFFF;
  --ink:#1D2433; --mute:#5B6473; --line:#E7E0D2;
  --gold:#C19A4D; --gold-soft:#D9BC7D;
  --radius:3px; --ease:cubic-bezier(.22,.61,.36,1);

  color-scheme:light only;            /* dark-mode lock */
  font-family:'Hanken Grotesk',-apple-system,BlinkMacSystemFont,sans-serif;
  font-size:16px; line-height:1.65; color:var(--ink);
  width:100%; max-width:680px; margin:0 auto;
  -webkit-font-smoothing:antialiased;
}
#utsc *{margin:0;padding:0;box-sizing:border-box}
#utsc a{text-decoration:none;color:inherit}
#utsc .utsc-serif{font-family:'Cormorant Garamond',Georgia,serif;font-weight:600;letter-spacing:-.01em}
#utsc .utsc-dim{color:var(--mute);font-weight:400}
#utsc a:focus-visible,#utsc button:focus-visible,#utsc input:focus-visible,#utsc select:focus-visible{outline:2px solid var(--gold);outline-offset:2px}

/* ---------- card shell ---------- */
#utsc .utsc-card{
  background:var(--white); border:1px solid var(--line); border-radius:8px;
  box-shadow:0 36px 70px -42px rgba(19,32,58,.5); overflow:hidden;
}

/* ---------- progress ---------- */
#utsc .utsc-progress{display:flex;border-bottom:1px solid var(--line);background:var(--cream)}
#utsc .utsc-pstep{
  flex:1;text-align:center;padding:14px 6px;font-size:10.5px;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:#9AA0AE;position:relative;
}
#utsc .utsc-pstep.on{color:var(--navy)}
#utsc .utsc-pstep.on::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--gold)}

/* ---------- panels & headings ---------- */
#utsc .utsc-panel{padding:34px 24px 30px}
#utsc .utsc-reshead{padding:26px 24px 4px}
#utsc .utsc-q{font-family:'Cormorant Garamond',Georgia,serif;font-weight:600;font-size:27px;color:var(--navy);line-height:1.2;margin-bottom:6px}
#utsc .utsc-qsub{font-size:14.5px;color:var(--mute);margin-bottom:24px}
#utsc .utsc-reshead .utsc-qsub{margin-bottom:18px}

/* ---------- step 1 choice buttons ---------- */
#utsc .utsc-choice{
  width:100%;text-align:left;display:flex;align-items:center;gap:16px;
  border:1px solid var(--line);border-radius:6px;background:var(--white);
  padding:18px;margin-bottom:12px;cursor:pointer;font-family:inherit;
  transition:all .2s var(--ease);
}
#utsc .utsc-choice:hover{border-color:var(--navy);transform:translateY(-1px)}
#utsc .utsc-choice svg{width:30px;height:30px;stroke:var(--gold);stroke-width:1.4;fill:none;flex-shrink:0}
#utsc .utsc-choice b{display:block;font-family:'Cormorant Garamond',Georgia,serif;font-weight:600;font-size:21px;color:var(--navy);line-height:1.25}
#utsc .utsc-choice span{font-size:13.5px;color:var(--mute)}
#utsc .utsc-choice em{margin-left:auto;font-style:normal;color:var(--gold);font-size:20px}

/* ---------- step 2 form ---------- */
#utsc .utsc-field{margin-bottom:22px}
#utsc .utsc-field label{display:block;font-size:13px;font-weight:600;letter-spacing:.04em;color:var(--navy);margin-bottom:8px}
#utsc .utsc-field label.utsc-check{font-weight:500;letter-spacing:0;text-transform:none;margin-bottom:10px}
#utsc .utsc-hint{font-size:12.5px;color:var(--mute);margin-top:7px;line-height:1.5}
#utsc .utsc-money{position:relative}
#utsc .utsc-money i{position:absolute;left:16px;top:50%;transform:translateY(-50%);font-style:normal;color:var(--mute);font-size:17px}
#utsc .utsc-money input{
  width:100%;min-height:56px;padding:0 16px 0 34px;font-size:19px;font-weight:600;
  color:var(--navy);border:1px solid var(--line);border-radius:6px;background:var(--cream);
  font-family:inherit;font-variant-numeric:tabular-nums;
}
#utsc .utsc-money input::placeholder{color:#B6BAC4;font-weight:400}

#utsc .utsc-select{
  width:100%;min-height:50px;padding:0 16px;font-size:15px;font-weight:500;
  color:var(--navy);border:1px solid var(--line);border-radius:6px;background:var(--cream);
  font-family:inherit;
  appearance:none;-webkit-appearance:none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' stroke='%231B2A4A' stroke-width='1.6' fill='none'/></svg>");
  background-repeat:no-repeat; background-position: right 14px center;
  padding-right:36px;
}

#utsc .utsc-seg{display:flex;gap:8px;flex-wrap:wrap}
#utsc .utsc-seg button{
  flex:1;min-height:50px;border:1px solid var(--line);border-radius:6px;background:var(--white);
  font-family:inherit;font-size:14px;font-weight:600;color:var(--mute);cursor:pointer;
  transition:all .2s var(--ease);padding:6px 10px;
}
#utsc .utsc-seg button.on{background:var(--navy);border-color:var(--navy);color:var(--cream-text)}

#utsc .utsc-check{display:flex;align-items:flex-start;gap:13px;font-size:14.5px;color:var(--ink);cursor:pointer}
#utsc .utsc-check input{width:20px;height:20px;margin-top:2px;accent-color:var(--navy);flex-shrink:0}
#utsc .utsc-check span{padding-left:2px}

/* read-only numeric input (prior-policy age) */
#utsc .utsc-num{
  width:120px;min-height:46px;padding:0 12px;font-size:16px;font-weight:600;
  color:var(--navy);border:1px solid var(--line);border-radius:6px;background:var(--cream);
  font-family:inherit;font-variant-numeric:tabular-nums;
}
#utsc .utsc-prior-age-note{margin-top:8px}

#utsc .utsc-navrow{display:flex;gap:10px;margin-top:28px}
#utsc .utsc-navrow .utsc-btn{flex:1}
#utsc .utsc-back{
  background:none;border:none;font-family:inherit;font-size:13px;font-weight:600;
  letter-spacing:.06em;text-transform:uppercase;color:var(--mute);cursor:pointer;
  padding:10px 0;margin-bottom:6px;
}
#utsc .utsc-back:hover{color:var(--navy)}
#utsc .utsc-err{display:none;font-size:13px;color:#A33B2E;margin-top:8px;font-weight:600}
#utsc .utsc-err.show{display:block}

/* ---------- buttons ---------- */
#utsc .utsc-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:52px;padding:0 28px;border-radius:var(--radius);
  font-size:14px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  transition:all .25s var(--ease);cursor:pointer;border:1px solid transparent;font-family:inherit;
  text-align:center;
}
#utsc .utsc-btn-gold{background:var(--gold);color:var(--navy-deep)}
#utsc .utsc-btn-gold:hover{background:var(--gold-soft)}
#utsc .utsc-btn-navy{background:var(--navy);color:var(--cream-text)}
#utsc .utsc-btn-navy:hover{background:#24395F}
#utsc .utsc-btn-line{border-color:var(--line);background:var(--white);color:var(--navy)}
#utsc .utsc-btn-line:hover{border-color:var(--navy)}

/* ---------- results ---------- */
#utsc .utsc-rescard{margin:0 24px 18px;border:1px solid var(--line);border-radius:6px;overflow:hidden}
#utsc .utsc-rescard.hi{border-color:var(--gold);box-shadow:0 14px 30px -22px rgba(193,154,77,.6)}
#utsc .utsc-restop{display:flex;justify-content:space-between;align-items:baseline;gap:12px;background:var(--navy);color:var(--cream-text);padding:15px 18px}
#utsc .utsc-rescard.alt .utsc-restop{background:var(--cream);color:var(--navy);border-bottom:1px solid var(--line)}
#utsc .utsc-restop b{font-size:13px;letter-spacing:.16em;text-transform:uppercase;font-weight:700}
/* 2026-06-13 (Mike): total $ amount used to be Cormorant serif, which
   read awkwardly against the sans label. Match the label font (Hanken
   inherited from body) and bump the size so the total stands out from
   the smaller line items below the header. */
#utsc .utsc-restop .tot{font-family:inherit;font-weight:700;font-size:18.5px;letter-spacing:.01em;font-variant-numeric:tabular-nums}
#utsc .utsc-resbody{padding:4px 18px 14px;background:var(--white)}
#utsc .utsc-rline{display:flex;justify-content:space-between;gap:12px;align-items:baseline;padding:11px 0;border-bottom:1px solid var(--line);font-size:14.5px}
#utsc .utsc-rline:last-child{border-bottom:none}
#utsc .utsc-rline span:last-child{font-weight:600;color:var(--navy);font-variant-numeric:tabular-nums;white-space:nowrap}
#utsc .utsc-rline .sub{display:block;font-size:12px;color:var(--mute);font-weight:400;margin-top:2px}
#utsc .utsc-endo-sub{
  margin-top:8px;padding-top:14px;border-top:1px solid var(--line);
  font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);
}
#utsc .utsc-resnote{margin:0 24px 20px;font-size:12.5px;color:var(--mute);line-height:1.6}
#utsc .utsc-resctas{padding:0 24px 28px;display:flex;flex-direction:column;gap:10px}

/* ---------- customize panel ---------- */
#utsc .utsc-customize{margin:0 24px 22px}
#utsc .utsc-customize-toggle{
  width:100%;text-align:left;background:var(--cream);border:1px solid var(--line);
  border-radius:6px;padding:13px 18px;cursor:pointer;font-family:inherit;
  font-size:13.5px;font-weight:600;color:var(--navy);
  display:flex;justify-content:space-between;align-items:center;
}
#utsc .utsc-customize-toggle::after{content:"+";color:var(--gold);font-size:18px}
#utsc .utsc-customize-toggle[aria-expanded="true"]::after{content:"\2013"}
#utsc .utsc-customize-panel{
  margin-top:10px;border:1px solid var(--line);border-radius:6px;
  background:var(--white);padding:18px;
}
#utsc .utsc-cust-section{
  font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--gold);margin:18px 0 10px;
}
#utsc .utsc-cust-grid{
  display:grid;grid-template-columns:1fr;gap:12px;
}
@media(min-width:560px){
  #utsc .utsc-cust-grid{grid-template-columns:1fr 1fr;}
  #utsc .utsc-cust-pages{grid-template-columns:1fr 1fr;}
}
#utsc .utsc-cust-grid label{
  display:flex;flex-direction:column;gap:6px;font-size:12px;font-weight:600;
  color:var(--navy);letter-spacing:.04em;
}
#utsc .utsc-cust-grid input[type="number"]{
  width:100%;min-height:42px;padding:0 12px;font-size:14.5px;font-weight:600;
  color:var(--navy);border:1px solid var(--line);border-radius:5px;background:var(--cream);
  font-family:inherit;font-variant-numeric:tabular-nums;
}
#utsc .utsc-cust-derived{
  display:block;margin-top:6px;font-size:12px;font-weight:500;color:var(--mute);
  letter-spacing:.02em;text-transform:none;font-variant-numeric:tabular-nums;
}
#utsc .utsc-cust-note{
  font-size:12px;color:var(--mute);line-height:1.55;margin-top:10px;
}
#utsc .utsc-cust-grid label.utsc-check{
  flex-direction:row;align-items:flex-start;gap:10px;font-weight:500;letter-spacing:0;
  text-transform:none;font-size:13.5px;
}
#utsc .utsc-endo-grid{
  display:grid;grid-template-columns:1fr;gap:10px;
}
@media(min-width:560px){
  #utsc .utsc-endo-grid{grid-template-columns:1fr 1fr;}
}
#utsc .utsc-endo-grid label{font-weight:500;letter-spacing:0;text-transform:none;margin-bottom:0}

/* ---------- "where these numbers come from" accordion ---------- */
#utsc details.utsc-how{margin:0 24px 26px;border:1px solid var(--line);border-radius:6px;background:var(--cream)}
#utsc details.utsc-how summary{padding:14px 18px;font-size:13.5px;font-weight:600;color:var(--navy);cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center}
#utsc details.utsc-how summary::-webkit-details-marker{display:none}
#utsc details.utsc-how summary::after{content:"+";color:var(--gold);font-size:18px}
#utsc details.utsc-how[open] summary::after{content:"\2013"}
#utsc details.utsc-how div{padding:0 18px 16px;font-size:13.5px;color:var(--mute)}
#utsc details.utsc-how p{margin-bottom:10px}

/* ---------- reassurance footer ---------- */
#utsc .utsc-reassure{text-align:center;max-width:520px;margin:46px auto 0;padding:0 22px}
#utsc .utsc-reassure .utsc-serif{font-size:23px;color:var(--navy);line-height:1.3;display:block;margin-bottom:8px}
#utsc .utsc-reassure p{font-size:14.5px;color:var(--mute)}
#utsc .utsc-reassure a{color:var(--navy);font-weight:600;border-bottom:1px solid var(--gold)}

/* ---------- informational range line (Seller lien-search) ---------- */
#utsc .utsc-rline.utsc-rline-info span:last-child{
  color:var(--mute);font-weight:600;font-style:italic;
}

/* ---------- bottom-of-card disclosure ---------- */
#utsc .utsc-disclosure{
  margin:6px 24px 28px;font-size:12.5px;color:var(--mute);line-height:1.6;
  text-align:center;max-width:560px;
}
#utsc .utsc-disclosure em{font-style:italic}
@media(min-width:760px){
  #utsc .utsc-disclosure{margin:6px 44px 32px}
}

/* ---------- email subform (Formspree + invisible reCAPTCHA) ---------- */
#utsc .utsc-email-form{
  margin:0 24px 22px;padding:18px 18px 16px;
  border:1px solid var(--line);border-radius:6px;background:var(--cream);
}
#utsc .utsc-email-intro{
  font-size:13.5px;color:var(--ink);margin-bottom:14px;line-height:1.55;
}
#utsc .utsc-email-row{
  display:grid;grid-template-columns:1fr;gap:12px;
}
@media(min-width:560px){
  #utsc .utsc-email-row{grid-template-columns:1fr 1fr;gap:14px;}
}
#utsc .utsc-email-field{display:flex;flex-direction:column;gap:6px}
#utsc .utsc-email-field label{
  font-size:12px;font-weight:600;letter-spacing:.04em;color:var(--navy);
}
#utsc .utsc-email-field input{
  width:100%;min-height:46px;padding:0 12px;font-size:15px;font-weight:500;
  color:var(--navy);border:1px solid var(--line);border-radius:5px;background:var(--white);
  font-family:inherit;
}
#utsc .utsc-email-actions{
  margin-top:14px;display:grid;grid-template-columns:1fr 1fr;gap:10px;
}
#utsc .utsc-email-form .utsc-btn{min-height:46px;font-size:13px}
#utsc .utsc-email-status{
  margin-top:12px;font-size:13.5px;line-height:1.5;font-weight:600;
  padding:10px 12px;border-radius:5px;background:var(--white);
  border:1px solid var(--line);color:var(--navy);
}
#utsc .utsc-email-status.ok{background:#EAF6EE;border-color:#9ECDB0;color:#1F5C36}
#utsc .utsc-email-status.err{background:#FBEDEA;border-color:#E0B0A6;color:#852918}
#utsc .utsc-email-status.warn{background:#FBF6E5;border-color:#D9C77F;color:#5A4710}
#utsc .utsc-email-fineprint{
  margin-top:12px;font-size:11.5px;line-height:1.5;color:var(--mute);
}
#utsc .utsc-email-fineprint a{
  color:var(--navy);border-bottom:1px solid var(--gold);
}
#utsc .utsc-req{color:#A33B2E;margin-left:2px}
#utsc .hp{position:absolute;left:-9999px}

@media(min-width:760px){
  #utsc .utsc-email-form{margin:0 44px 22px}
}

/* ---------- print letterhead (hidden on screen) ---------- */
#utsc .utsc-print-letterhead{display:none}

/* ---------- desktop ---------- */
@media(min-width:760px){
  #utsc .utsc-panel{padding:42px 44px 38px}
  #utsc .utsc-reshead{padding:32px 44px 6px}
  #utsc .utsc-rescard{margin:0 44px 18px}
  #utsc .utsc-resnote{margin:0 44px 22px}
  #utsc .utsc-resctas{padding:0 44px 34px;flex-direction:row;flex-wrap:wrap}
  #utsc .utsc-resctas .utsc-btn{flex:1 1 calc(50% - 5px)}
  #utsc .utsc-customize{margin:0 44px 22px}
  #utsc details.utsc-how{margin:0 44px 30px}
  #utsc .utsc-navrow{justify-content:flex-end}
  #utsc .utsc-navrow .utsc-btn{flex:0 0 auto;min-width:220px}
}

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

/* ============================================================
   PRINT STYLES - clean one-page estimate. Strip site chrome
   (topbar, header, mobile sheet, footer, page hero) and the
   wizard's interactive bits. Show: firm letterhead + Step 3
   result cards + a non-binding disclaimer.
   ============================================================ */
@media print{
  /* Scoped to the calculator page only. Previously these selectors
     were unscoped (body > *, main > *), which fired on every page in
     the site and made print preview go blank everywhere except the
     calculator. The :has(.calc-zone) gate ensures these aggressive
     hides only apply where the calculator's results panel lives. */
  body:has(.calc-zone) > *{display:none !important}
  body:has(.calc-zone) > main{display:block !important}
  body:has(.calc-zone) main > *{display:none !important}
  body:has(.calc-zone) main .calc-zone{display:block !important; padding:0 !important; background:#fff !important}
  body:has(.calc-zone) main .calc-zone .wrap{margin:0 !important; max-width:none !important}

  /* Hide the page hero, progress, Step 1, Step 2, navigation,
     customize panel, accordions, and reassurance block. */
  #utsc .utsc-progress,
  #utsc #utsc-step1,
  #utsc #utsc-step1b,
  #utsc #utsc-step2,
  #utsc .utsc-back,
  #utsc .utsc-customize,
  #utsc details.utsc-how,
  #utsc .utsc-resctas,
  #utsc .utsc-email-form,
  #utsc .utsc-disclosure,
  #utsc .utsc-reassure,
  .crumbs,
  .calcpage-hero{
    display:none !important;
  }

  /* Force browsers to preserve background colors + borders in print.
     Without this, browsers strip background colors by default (the
     "Background graphics" toggle in print dialogs); navy headers and
     gold accents disappear and the result card looks like a black-on-
     white form. The :exact value tells the browser the colors are
     intentional and must render. */
  *{-webkit-print-color-adjust:exact !important; print-color-adjust:exact !important}

  /* Branded print letterhead: tightened 2026-06-13 so a full estimate
     (all endorsements + financing) fits on a single page. Mike: drafts
     with everything on were pushing the closing disclaimer + firm
     contact info onto page 2, where readers tend to miss it. */
  #utsc .utsc-print-letterhead{
    display:block !important;
    text-align:center;
    border-bottom:1px solid #1B2A4A;
    padding:0 0 8px;
    margin:0 0 12px;
    position:relative;
  }
  #utsc .utsc-print-letterhead::after{
    content:"";display:block;margin:6px auto 0;
    width:56px;height:1.5px;background:#C19A4D;
  }
  #utsc .utsc-print-name{
    font-family:'Cormorant Garamond',Georgia,serif;
    font-weight:600;font-size:22px;color:#1B2A4A;letter-spacing:.005em;
    line-height:1.15;
  }
  #utsc .utsc-print-tag{
    font-size:9px;font-weight:600;letter-spacing:.26em;text-transform:uppercase;
    color:#C19A4D;margin-top:4px;
  }
  #utsc .utsc-print-addr{
    font-size:10px;color:#5B6473;margin-top:8px;letter-spacing:.04em;
  }
  #utsc .utsc-print-disc{
    font-size:9px;color:#5B6473;margin-top:8px;line-height:1.45;
    font-style:italic;
  }

  /* Reset the card so it prints cleanly. The Step 3 panel becomes a
     flex column so we can reorder children for print: the letterhead
     (last in the DOM) needs to appear FIRST when printed so the firm
     contact info sits at the top of the page, not after the figures. */
  #utsc, #utsc .utsc-card, #utsc #utsc-step3{
    box-shadow:none !important; border:none !important; max-width:none !important;
    margin:0 !important; padding:0 !important; background:#fff !important;
  }
  #utsc #utsc-step3{display:flex !important;flex-direction:column !important}
  #utsc #utsc-step3 .utsc-print-letterhead{order:-2 !important}
  #utsc #utsc-step3 .utsc-reshead{order:-1 !important}
  #utsc .utsc-reshead{padding:0 0 8px !important; text-align:left;
    border-bottom:1px solid #E7E0D2; margin-bottom:10px}
  #utsc .utsc-q{font-size:16px;color:#1B2A4A;line-height:1.15}
  #utsc .utsc-qsub{font-size:11px;color:#5B6473;letter-spacing:.02em;margin-top:2px}

  /* Result cards: navy header strip, gold accent on the alt (subtotal)
     card variant, faint cream body so the table rows separate cleanly.
     Tightened paddings + margins so the whole estimate compresses. */
  #utsc .utsc-rescard{
    margin:0 0 8px !important; border:1px solid #1B2A4A !important;
    border-radius:3px !important; overflow:hidden !important;
    page-break-inside:avoid; box-shadow:none !important;
  }
  #utsc .utsc-restop{
    background:#1B2A4A !important; color:#fff !important;
    padding:5px 12px !important; font-size:12px;
  }
  #utsc .utsc-rescard.alt{border-color:#C19A4D !important}
  #utsc .utsc-rescard.alt .utsc-restop{
    background:#FAF7F1 !important; color:#1B2A4A !important;
    border-bottom:1px solid #C19A4D !important;
  }
  #utsc .utsc-resbody{background:#fff !important; padding:4px 12px 6px !important;
    font-size:10.5px;}
  #utsc .utsc-resbody > *{margin-top:0 !important;margin-bottom:0 !important}
  /* CRITICAL fix: the screen .utsc-rline has padding:11px 0 which
     was unscoped from print, making every line item ~30px tall. A
     full commercial estimate (8 borrower lines + 4 endorsements + 3
     seller lines + headers) spilled to page 2 because of this alone.
     Tightened to 2.5px in print so a fully-loaded estimate fits on
     one page. */
  #utsc .utsc-rline{
    padding:2.5px 0 !important;font-size:10.5px !important;
    border-bottom:1px solid #EEE6D2 !important;
  }
  #utsc .utsc-rline span:last-child{font-size:10.5px !important}
  #utsc .utsc-rline .sub{font-size:9px !important;margin-top:0 !important}
  #utsc .utsc-endo-sub{
    font-size:9px !important;padding:6px 0 2px !important;
    margin:4px 0 0 !important;letter-spacing:.18em !important;
    color:#C19A4D !important;
  }

  /* Total row gets a gold underline accent so the eye lands on it. */
  #utsc .utsc-total, #utsc .utsc-restotal{
    border-top:1.5px solid #C19A4D !important; font-weight:700;
    color:#1B2A4A !important;padding-top:4px !important;margin-top:4px !important;
    font-size:12px;
  }
  #utsc .utsc-resnote{margin:6px 0 0 !important; font-size:9.5px;color:#5B6473;line-height:1.4}

  @page{margin: 0.4in;}
}

/* ============================================================
   SUBTLE EFFECTS (2026-06-14, Mike-approved set)
   Press-state on the wizard buttons + a staggered "settle in" entrance for
   the result step (the payoff moment). Reduced-motion-safe via the
   #utsc *{animation:none!important} kill-switch above (line 361).
   ============================================================ */
#utsc .utsc-btn{transition:all .2s var(--ease),transform .08s var(--ease)}
#utsc .utsc-btn:active{transform:translateY(1px) scale(.997)}

@keyframes utscSettle{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
#utsc #utsc-step3:not([hidden]) .utsc-reshead{animation:utscSettle .5s var(--ease) both}
#utsc #utsc-step3:not([hidden]) #utsc-rescards{animation:utscSettle .5s .08s var(--ease) both}
#utsc #utsc-step3:not([hidden]) .utsc-customize{animation:utscSettle .5s .16s var(--ease) both}
#utsc #utsc-step3:not([hidden]) .utsc-resctas{animation:utscSettle .5s .24s var(--ease) both}