/* Assessment modal styles for index.html.
   Lifted from assets/css/agent-care-pages.css — if the .tf* / .csel* rules change there,
   this file must be updated to match; nothing syncs it automatically.

   index.html is the only page that loads agent-care.css alone; every other page loads
   agent-care-pages.css, which is where these rules live. That sheet can't simply be added
   to index.html — it carries body{zoom:1.25} and restyles 43 classes the landing page
   uses (.fo-header, .fo-nav, .fo-btn, ...). So the modal's rules are lifted here instead.
   None of these class names exist in agent-care.css, so there is nothing to conflict. */

.tf-ov{
  --ink:#14202E; --mut:#5B6773; --line:#D8DAD2; --bg:#F4F5F0;
  --acc:#1f4e79; --acc2:#2d6da3; --soft:#e6ebf3; --ring:rgba(31,78,121,.15);
  --pf-ink:#14202E; --pf-ink-2:#25405C; --pf-ink-soft:#3D4A58; --pf-ink-mute:#5B6773;
  --pf-paper:#F4F5F0; --pf-sheet:#FCFCF8; --pf-red:#D9481F;
  --pf-rule:#D8DAD2; --pf-rule-dark:#B9BCB0;
  --pf-mono:'IBM Plex Mono',ui-monospace,'Cascadia Mono',Consolas,monospace;
  --pf-serif:'Newsreader',Georgia,'Times New Roman',serif;
}

.tbtn.ghost{background:#fff;border:1.5px solid #1f4e79;color:#1f4e79}
.tbtn.ghost:hover{background:#1f4e790a;opacity:1}
.tbtn.grad{background:linear-gradient(90deg,#e8590c,#f0813d);box-shadow:0 8px 18px rgba(232,89,12,.28)}
.tbtn{display:block;width:100%;margin-top:16px;text-align:center;background:#1f4e79;color:#fff;font:inherit;font-weight:700;font-size:13.5px;padding:11px 0;border-radius:10px;border:0;cursor:pointer;transition:.15s}
.tbtn:hover{opacity:.92}
.tbtn.hot{background:#e8590c}
.tf-ov{position:fixed;inset:0;background:rgba(16,24,40,.55);display:none;align-items:flex-start;justify-content:center;padding:34px 16px;overflow-y:auto;z-index:200}
.tf{background:#fff;border-radius:18px;max-width:680px;width:100%;padding:30px 34px;position:relative;--acc:#1f4e79;--acc2:#2d6da3;--soft:#e6ebf3;--ring:rgba(31,78,121,.15)}
.tfsec{grid-column:1/-1;font-size:11px;font-weight:800;letter-spacing:1.5px;text-transform:uppercase;color:var(--acc);margin-top:10px;display:flex;align-items:center;gap:12px}
.tfsec::after{content:"";flex:1;height:1px;background:var(--line)}
.tf h3{font-size:19px;color:var(--ink);margin-bottom:4px;letter-spacing:-.3px}
.tf .tfsub{font-size:13px;color:var(--mut);margin-bottom:18px}
.tfr input[type=range]{-webkit-appearance:none;appearance:none;border:0;background:linear-gradient(90deg,var(--acc) 4%,var(--soft) 4%);border-radius:999px;height:10px;padding:0;margin:14px 0 4px;cursor:pointer}
.tfr input[type=range]:focus{box-shadow:none;border:0}
.tfr input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:24px;height:24px;border-radius:50%;background:var(--acc);border:4px solid #fff;box-shadow:0 0 0 1.5px var(--acc),0 3px 10px var(--ring);cursor:pointer}
.tfr input[type=range]::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:var(--acc);border:4px solid #fff;box-shadow:0 0 0 1.5px var(--acc),0 3px 10px var(--ring);cursor:pointer}
.tfr .rng-note{font-size:11.5px;color:var(--mut);margin-top:2px}
.ccards{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.ccard{border:1.5px solid var(--line);border-radius:12px;padding:12px 13px;cursor:pointer;background:#fff;transition:.15s}
.ccard:hover{border-color:var(--acc2)}
.ccard.on{border-color:var(--acc);box-shadow:0 0 0 1px var(--acc) inset,0 6px 16px var(--ring)}
.ccard.on::after{content:"✓";position:absolute;top:10px;right:12px;color:var(--acc);font-weight:800;font-size:13px}
.ccard{position:relative}
.ccard b{display:block;font-size:13px;color:var(--ink)}
.ccard.on b,.ccard.on em{color:var(--acc)}
.ccard span{display:block;font-size:11px;color:var(--mut);margin-top:1px}
.ccard em{display:block;font-style:normal;font-size:16px;font-weight:800;color:var(--ink);margin-top:8px;letter-spacing:-.3px}
.ccard em i{font-style:normal;font-size:10.5px;color:var(--mut);font-weight:600;letter-spacing:0}
.csel{position:relative}
.csel-t{width:100%;box-sizing:border-box;font:inherit;font-size:13.5px;color:var(--ink);background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:9px 34px 9px 12px;text-align:left;cursor:pointer;position:relative;transition:.15s}
.csel-t::after{content:"";position:absolute;right:14px;top:50%;width:7px;height:7px;border-right:1.8px solid var(--mut);border-bottom:1.8px solid var(--mut);transform:translateY(-70%) rotate(45deg);transition:.18s}
.csel.open .csel-t{border-color:var(--acc);box-shadow:0 0 0 3px var(--ring);background:#fff}
.csel.open .csel-t::after{transform:translateY(-30%) rotate(225deg)}
.csel-m{position:absolute;top:calc(100% + 6px);left:0;right:0;background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:0 14px 30px rgba(16,24,40,.16);padding:6px;z-index:60;display:none;max-height:215px;overflow:auto}
.csel.open .csel-m{display:block}
.csel-o{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:13.5px;color:var(--ink);padding:9px 12px;border-radius:8px;cursor:pointer}
.csel-o:hover{background:var(--soft)}
.csel-o.sel{background:var(--soft);color:var(--acc);font-weight:700}
.csel-o.sel::after{content:"✓";font-weight:800}
.cal{position:relative}
.cal input{cursor:pointer}
.cal.open .cal-m{display:block}
.cal.open input{border-color:var(--acc);box-shadow:0 0 0 3px var(--ring);background:#fff}
.tf-total{display:flex;align-items:center;gap:18px;border-top:1px solid var(--line);margin-top:22px;padding-top:18px;flex-wrap:wrap}
.tf-total .tt span{font-size:13px;font-weight:700;color:var(--ink)}
.tf-total .tt b{display:block;font-size:21px;color:var(--acc);letter-spacing:-.4px;line-height:1.2}
.tf .tbtn{background:linear-gradient(90deg,var(--acc),var(--acc2));border:0;color:#fff;box-shadow:0 6px 16px var(--ring)}
.tf-total .tt small{display:block;font-size:11.5px;color:var(--mut);margin-top:2px}
.tf-total .tbtn{margin-top:0;flex:1;min-width:200px}
.tf-x{position:absolute;top:16px;right:16px;width:32px;height:32px;border:1px solid var(--line);border-radius:9px;background:#fff;color:var(--mut);font-size:15px;cursor:pointer}
.tgrid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.tfr{display:block}
.tfr.w{grid-column:1/-1}
.tfr label{display:block;font-size:12px;font-weight:700;color:var(--ink);margin-bottom:5px}
.tfr input,.tfr select,.tfr textarea{width:100%;box-sizing:border-box;font:inherit;font-size:13.5px;color:var(--ink);background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:10px 12px;transition:.15s}
.tfr input:focus,.tfr textarea:focus{outline:none;border-color:var(--acc);box-shadow:0 0 0 3px var(--ring);background:#fff}
.tfr textarea{min-height:64px;resize:vertical}
.tf .tbtn{margin-top:18px}
.tf-done{display:none;text-align:center;padding:30px 10px}
.tf-done h4{font-size:17px;color:var(--ink);margin-bottom:6px}
.tf-done p{font-size:13.5px;color:var(--body)}
.pcards .tbtn{
  background:var(--pf-ink);
  color:var(--pf-paper);
  border:1px solid var(--pf-ink);
  border-radius:0;
  box-shadow:none;
  font-family:var(--pf-mono);
  font-weight:600;
  font-size:12px;
  letter-spacing:.1em;
  text-transform:uppercase;
  padding:12px 0;
  transition:background .15s ease,color .15s ease,border-color .15s ease;
}
.pcards .tbtn:hover{background:var(--pf-ink-2);opacity:1}
.pcards .tbtn.ghost{
  background:var(--pf-sheet);
  border:1px solid var(--pf-ink);
  color:var(--pf-ink);
}
.pcards .tbtn.ghost:hover{background:var(--pf-ink);color:var(--pf-paper);opacity:1}
.pcards .tbtn.grad{
  background:var(--pf-ink);
  color:var(--pf-paper);
  border:1px solid var(--pf-ink);
  box-shadow:none;
}
.pcards .tbtn.grad:hover{background:var(--pf-ink-2);opacity:1}
.tf-ov{background:rgba(15,25,38,.6)}
.tf-ov .tf{
  background:var(--pf-sheet);
  border:1px solid var(--pf-ink);
  border-radius:0;
  box-shadow:0 30px 64px -28px rgba(15,25,38,.6);
}
.tf :focus-visible{outline:2px solid var(--pf-red);outline-offset:2px}
.tf-ov .tf h3{
  font-family:var(--pf-serif);
  font-optical-sizing:auto;
  font-weight:600;
  font-size:1.4rem;
  letter-spacing:-.01em;
  color:var(--pf-ink);
}
.tf-ov .tf .tfsub{color:var(--pf-ink-mute)}
.tf .tfsec{
  font-family:var(--pf-mono);
  font-size:11px;
  font-weight:500;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--pf-ink-mute);
}
.tf .tfsec::after{background:var(--pf-rule-dark)}
.tf .tfr label{
  font-family:var(--pf-mono);
  font-size:10.5px;
  font-weight:500;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--pf-ink-mute);
}
.tf .tfr input,
.tf .tfr select,
.tf .tfr textarea{
  background:var(--pf-paper);
  border:1px solid var(--pf-rule-dark);
  border-radius:0;
  color:var(--pf-ink);
}
.tf .tfr input:focus,
.tf .tfr textarea:focus{
  outline:none;
  background:var(--pf-sheet);
  border-color:var(--pf-ink);
  box-shadow:0 0 0 1px var(--pf-ink);
}
.tf .tfr input[type=range]{
  height:8px;
  border-radius:0;
  background:var(--pf-rule);
}
.tf .tfr input[type=range]::-webkit-slider-thumb{
  width:18px;height:18px;
  border-radius:0;
  background:var(--pf-ink);
  border:3px solid var(--pf-sheet);
  box-shadow:0 0 0 1px var(--pf-ink);
}
.tf .tfr input[type=range]::-moz-range-thumb{
  width:14px;height:14px;
  border-radius:0;
  background:var(--pf-ink);
  border:3px solid var(--pf-sheet);
  box-shadow:0 0 0 1px var(--pf-ink);
}
.tf .tfr .rng-note{
  font-family:var(--pf-mono);
  font-size:10.5px;
  letter-spacing:.04em;
  color:var(--pf-ink-mute);
}
.tf .nv{
  background:var(--pf-ink);
  color:var(--pf-sheet);
  border:1px solid var(--pf-ink);
  border-radius:0;
  box-shadow:none;
  font-family:var(--pf-mono);
  font-weight:600;
  font-size:12px;
  letter-spacing:.02em;
  font-variant-numeric:tabular-nums;
}
.tf .ccard{
  background:var(--pf-sheet);
  border:1px solid var(--pf-rule-dark);
  border-radius:0;
  transition:border-color .15s ease;
}
.tf .ccard:hover{border-color:var(--pf-ink)}
.tf .ccard.on{
  border:1.5px solid var(--pf-ink);
  box-shadow:inset 0 0 0 1px var(--pf-ink);
}
.tf .ccard.on::after{color:var(--pf-ink)}
.tf .ccard b{color:var(--pf-ink);font-weight:600}
.tf .ccard.on b,
.tf .ccard.on em{color:var(--pf-ink)}
.tf .ccard span{
  font-family:var(--pf-mono);
  font-size:10px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--pf-ink-mute);
}
.tf .ccard em{
  font-family:var(--pf-mono);
  font-weight:600;
  color:var(--pf-ink);
  font-variant-numeric:tabular-nums;
}
.tf .ccard em i{
  font-family:var(--pf-mono);
  color:var(--pf-ink-mute);
  letter-spacing:.02em;
}
.tf .csel-t{
  background:var(--pf-paper);
  border:1px solid var(--pf-rule-dark);
  border-radius:0;
  color:var(--pf-ink);
}
.tf .csel.open .csel-t{
  background:var(--pf-sheet);
  border-color:var(--pf-ink);
  box-shadow:0 0 0 1px var(--pf-ink);
}
.tf .csel-m{
  background:var(--pf-sheet);
  border:1px solid var(--pf-ink);
  border-radius:0;
  box-shadow:0 18px 36px -22px rgba(15,25,38,.5);
}
.tf .csel-o{border-radius:0;color:var(--pf-ink)}
.tf .csel-o:hover{background:var(--pf-paper)}
.tf .csel-o.sel{background:var(--pf-paper);color:var(--pf-ink);font-weight:600}
.tf .cal.open input{
  background:var(--pf-sheet);
  border-color:var(--pf-ink);
  box-shadow:0 0 0 1px var(--pf-ink);
}
.tf .cal-m{
  background:var(--pf-sheet);
  border:1px solid var(--pf-ink);
  border-radius:0;
  box-shadow:0 18px 36px -22px rgba(15,25,38,.5);
}
.tf .cal-hd b{
  font-family:var(--pf-mono);
  font-weight:600;
  letter-spacing:.02em;
  color:var(--pf-ink);
}
.tf .cal-nav{
  border:1px solid var(--pf-rule-dark);
  border-radius:0;
  background:var(--pf-sheet);
  color:var(--pf-ink-soft);
}
.tf .cal-nav:hover{border-color:var(--pf-ink);color:var(--pf-ink)}
.tf .cal-wd{
  font-family:var(--pf-mono);
  font-weight:500;
  letter-spacing:.1em;
  color:var(--pf-ink-mute);
}
.tf .cal-d{
  font-family:var(--pf-mono);
  border-radius:0;
  color:var(--pf-ink);
  font-variant-numeric:tabular-nums;
}
.tf .cal-d:hover{background:var(--pf-paper)}
.tf .cal-d.today{box-shadow:inset 0 0 0 1.5px var(--pf-ink)}
.tf .cal-d.sel{
  background:var(--pf-ink);
  color:var(--pf-sheet);
  box-shadow:none;
}
.tf .tf-total{border-top:1px solid var(--pf-rule-dark)}
.tf .tf-total .tt span{
  font-family:var(--pf-mono);
  font-size:10.5px;
  font-weight:500;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--pf-ink-mute);
}
.tf .tf-total .tt b{
  font-family:var(--pf-mono);
  font-weight:600;
  font-size:22px;
  letter-spacing:-.01em;
  color:var(--pf-ink);
  font-variant-numeric:tabular-nums;
}
.tf .tf-total .tt small{
  font-family:var(--pf-mono);
  font-size:11px;
  letter-spacing:.02em;
  color:var(--pf-ink-mute);
}
.tf-ov .tf .tbtn{
  background:var(--pf-ink);
  color:var(--pf-paper);
  border:1px solid var(--pf-ink);
  border-radius:0;
  box-shadow:none;
  font-family:var(--pf-mono);
  font-weight:600;
  font-size:12px;
  letter-spacing:.1em;
  text-transform:uppercase;
}
.tf-ov .tf .tbtn:hover{background:var(--pf-ink-2);opacity:1}
.tf .tf-x{
  background:var(--pf-sheet);
  border:1px solid var(--pf-rule-dark);
  border-radius:0;
  color:var(--pf-ink-mute);
}
.tf .tf-x:hover{border-color:var(--pf-ink);color:var(--pf-ink)}
.tf .tf-done h4{
  font-family:var(--pf-serif);
  font-optical-sizing:auto;
  font-weight:600;
  font-size:1.25rem;
  letter-spacing:-.01em;
  color:var(--pf-ink);
}
.tf .tf-done p{color:var(--pf-ink-soft)}
.tf-ov{zoom:.8;align-items:center;padding:20px 16px}
.tf-ov .tf{
  max-width:1100px;padding:26px 36px 22px;
  display:flex;flex-direction:column;
}
#tfOv .tf{min-height:min(92vh,1060px)}
.tf-ov .tf h3{font-size:1.4rem;margin-bottom:12px}
.tf #tfFormWrap{display:flex;flex-direction:column;flex:1}
.tf .tgrid{grid-template-columns:repeat(3,1fr);gap:12px 20px;flex:1;align-content:space-between}
.tf .tfr.span2{grid-column:span 2}
.tf .tfsec{margin-top:6px}
.tf .tfr label{margin-bottom:6px}
.tf .tfr input,.tf .tfr select,.tf .tfr textarea{padding:9px 12px;font-size:13.5px}
.tf .csel-t{padding:9px 32px 9px 12px;font-size:13.5px}
.tf .tfr textarea{min-height:70px;height:70px;resize:vertical}
.tf .tfr input[type=range]{margin:10px 0 3px;display:block;width:100%}
.tf .ccards{gap:14px}
.tf .ccard{padding:12px 15px;display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.tf .ccard b{font-size:13.5px}
.tf .ccard span{margin-top:0}
.tf .ccard em{margin:0 0 0 auto;font-size:15px}
.tf .ccard.on::after{content:none}
.tf .tf-total{margin-top:14px;padding-top:14px}
.tf .tf-total .tt b{font-size:20px}
.tf .tf-total .tbtn{margin-top:0}
.tf-ov.tf-lite .tfr textarea{min-height:150px;height:150px}
.tf-ov.tf-dense{zoom:.71}

@media(max-width:560px){
  .ccards{grid-template-columns:1fr}
}

@media(max-width:560px){
  .tgrid{grid-template-columns:1fr}
}

@media(max-width:1000px){
  .tf .tgrid{grid-template-columns:1fr 1fr}
  .tf-ov{align-items:flex-start}
}

@media(max-width:560px){
  .tf .tgrid{grid-template-columns:1fr}
  .tf .tfr.span2{grid-column:auto}
}

/* --- corrections for this page ------------------------------------------------
   zoom: the source sets .tf-ov{zoom:.8} to cancel body{zoom:1.25} on the pages that
   load agent-care-pages.css. index.html has no body zoom, so .8 there is not a
   counter-zoom — it just shrinks the modal to 80%.

   min-height: the source sets min-height:min(92vh,1060px) so the tier worksheet fills
   one screen without scrolling. The assessment form has six fields and never fills it,
   so it renders as a short form stranded at the top of a 92vh-tall white panel.

   align-items:center is kept — it is what centres the panel in the viewport. */
.tf-ov{zoom:normal;align-items:center}
/* Calendly inline widget: force its generated wrapper + iframe to fill the
   definite-height host (#acCalendly) so the full date picker shows instead of
   collapsing to a ~180px internally-scrolling sliver. */
#acCalendly .calendly-inline-widget,
#acCalendly iframe{height:100%!important;width:100%;min-width:0;border:0}
.tf-ov .tf{min-height:0}
/* Assessment → Calendly step: fit the modal to the viewport as a flex column so the
   header + "Back" button stay pinned/visible at ANY zoom, and only the Calendly area
   flexes (and internally scrolls when space is tight — e.g. short viewport / high zoom).
   A DEFINITE height is required or the flexed iframe (height:100%) collapses; max-height
   keeps it inside the viewport regardless of the content-page zoom stack. Scoped to the
   Calendly step via :has() so step 1 (the details form) is untouched. */
#acOv:has(#acStep2:not([style*="none"])){padding-top:18px;padding-bottom:18px}
#acOv .tf:has(#acStep2:not([style*="none"])){
  display:flex;flex-direction:column;
  max-width:880px!important;
  height:min(1120px,calc(100vh - 44px));
  max-height:100%;
  overflow:hidden;
}
#acOv .tf:has(#acStep2:not([style*="none"])) #acStep2{
  display:flex;flex-direction:column;min-height:0;flex:1 1 auto;
}
#acOv #acStep2>h3,#acOv #acStep2>.tfsub,#acOv #acStep2>.tbtn{flex:0 0 auto}
#acOv #acStep2 #acCalendly{flex:1 1 auto;min-height:0;height:auto!important}