:root{
  --ink:#222244;
  --paper:white;
  --accent-red:#C1402F;   
  --accent-gold:#B8860B;
  --cream:#FBF3DF;         
  --line:#E7DDC0;
  --checkgreen:#146A2E;
}

body {margin:auto; margin-top: 0px; margin-bottom: 10px; font-size:19px;font-family:"Roboto Slab",serif; color:var(--ink);line-height:1.5; margin-left: 0px;text-underline-position: under; background-color:var(--paper)}

H1{text-align: center; margin-bottom:20px;font-size:42px;font-weight: normal;line-height:normal;}
H2{font-size:30px;font-weight:normal;line-height:normal;margin-top: 10px; padding: 15px 5px 2px 340px; text-underline-position: auto; background-clip:content-box; max-width: calc(60vw - 250px)}

.wizard-ad {font-weight:bold;line-height:normal;margin: 15px 5px 2px 15px; padding: 15px;text-underline-position: auto; max-width: calc(60vw - 250px); border: 4px solid darkblue;background-color:lightyellow}

.product-name {text-align: center; margin-bottom:20px;font-size:42px;font-weight: normal;line-height:normal;margin-top:20px;}  
/* because product names shouldn't be H1, so subhead becomes H1 on product pages */

.whatsnew{font-size:30px;font-weight:normal;line-height:normal}

.tiny{font-size:13px;font-family:Verdana,sans-serif;line-height:normal;display:inline-block;}

.textcent {text-align: center;}
.textleft {text-align: left;}
.textindent {margin-left: 40px;}

a:link{color:#114466}   /* must be in this order */
a:visited{color:#114466}
a:hover, a:focus{color:var(--accent-red)}

.checkmark {color:var(--checkgreen); font-family:verdana,sans-serif;}  /*because Roboto check mark is faint*/

HR {background-color:var(--line);height:3px;border:none;}
IMG {border: 0px}
S {text-decoration-color:#CC0000; text-decoration-thickness: 3px;}
.textfield{font-size:18px; margin:3px;font-family:"Roboto Slab",serif; max-width:80%} 
/* formats placeholder in edit fields  - does not follow body tag*/

#skiptocontent a{position:absolute;left:45%;top:-40px;}
#skiptocontent a:focus{top:-0px; color:var(--accent-red); background-color:white;}

/* top banner block*/
.banner {height:70px; min-width: 980px; margin-bottom: 2px; margin-left: 20px; margin-right:20px;}

.banner-logo {float:left;margin-top: 10px; width: 301px; height: 59px;}

#topmenu-header{float:left;margin-left: calc(50vw - (201px + 320px + 100px + 20px));display:flex; justify-content: space-between; flex-wrap: nowrap; font-size:14px;font-weight:bold;margin-top:35px;text-decoration: none;line-height: 1.25;width: 840px;}
/* must be id not class because used by dropdown.js */

#mobile-menu-glyph {display:none;}
#mobile-menu-header {display:none;}
#mobile-menu-search {display:none;}
.search-submit {width:16px; height: 18px; cursor: pointer}

.submenu {width: 350px; font-size:14px; font-weight: bold; z-index:100; background-color: var(--cream); line-height:1.6; display:none; padding-top: 10px; padding-bottom: 10px;position: absolute; left:-70px;top: 36px; text-align:left; border-style:solid; border-width: 0 1px 1px 1px; border-radius: 8px; border-color: var(--line); box-shadow: 0 10px 28px rgba(34,34,68,0.16);}
.submenu-header{position:relative; display:inline; cursor:pointer;text-align: center;}
.submenu-subhead {margin-left: 15px; padding-top:7px;}
.submenu-item a {color: var(--ink); padding: 1px 10px 1px 10px; text-decoration: none; margin-left: 30px;}
.submenu-item a:hover,a:focus{color: #EEEEEE; background-color:var(--ink);background-clip: padding-box}
.camera {vertical-align:middle; margin-right:5px; width:18px; height:18px;}

.banner-mailboxes {min-width: 855px; width:100%;}
.banner-subhead {margin-left:10%; margin-right:10%;font-size:20px;font-weight: normal;} 

/* end top banner block*/

.sr-only{position: absolute;  width: 1px; height: 1px;  padding: 0; margin: -1px;  overflow: hidden;  clip: rect(0,0,0,0);  white-space: nowrap;  border: 0;}

.main-content {width: 100%; margin:auto; max-width: 1500px;}

.left-column {float: left; max-width: 380px; width: calc(50vw - 478px); min-height:20px;}
.center-column {float:left; width: 740px; max-width: calc(75vw - 220px); padding-left: 30px; border-left: 2px solid #EFEFC6;}
.winmac {margin-top: 100px;} 

/* Compact icon grid: replaces a tall single-column stack of 5
   large icons with a tidy 2-column arrangement, so the sidebar
   doesn't dominate the page vertically. */
.feature-icon-grid{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px 12px;
  justify-items: center;
  max-width: 230px;
  margin: 14px auto 20px auto;
}
.feature-icon-grid img{
  width: 72px;
  height: 86px;
  display: block;
}
.feature-icon-grid img:nth-child(odd):last-child{
  grid-column: 1 / span 2;
}

/* Hero link row: was plain text links separated by manual spacing;
   now a slim utility nav with subtle dividers, closer in feel to
   the buttons above it. */
.hero-links{
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 4px;
}
.hero-links a{
  color: var(--ink);
  text-decoration: none;
  font-size: 17px;
  font-weight: 600;
  padding: 4px 14px;
  letter-spacing: .01em;
}
.hero-links a:last-child{ border-right: none; }
.hero-links a:hover{ text-decoration: underline; color: var(--accent-red); }

.center-column-intro {float:left;width: 900px; min-width: 400px; max-width: calc(100vw - 600px); padding-left: 30px; margin-left: 30px}

.printouts {display:flex; align-items:center; max-width:500px; margin-left:100px;}
.radiolabel {display: block;margin-top: -30px; margin-left: 50px;}
.topicslist-left {width: 50%; float:left; margin-right:20px;}
.topicslist-right {width: calc(50% - 20px); float:left;}

.callout {margin:auto; width:90%; max-width:700px; margin-top:30px; margin-bottom:0px; padding:22px 28px 24px 24px;background-color: var(--cream); border-radius: 7px; border: 1px solid var(--line); border-left: 5px solid var(--accent-red);box-shadow: 0 4px 16px rgba(34,34,68,0.08);}

.leaderboard {padding-top: 50px; margin:auto; margin-bottom: 5px; width:95%; max-width:728px; max-height:90px;}
.product-selector-box {float:left; width:290px; height: 100%; border: 1px solid blue;border-radius:5px;margin-bottom: 30px; margin-right: 25px; padding: 5px 10px 10px 10px;}

.right-column {float:left; width: 160px; padding-left: 25px;}
.right-column-product {float:left; width: 210px; padding-left: 35px;}
.ratingsbox {margin-top: 250px; padding: 10px; border: 2px solid #B8860B; border-radius: 7px;box-shadow: 0 4px 16px rgba(34,34,68,0.08); background-color: #FFFEFB;}

.submit-button {font-size:16px;font-weight:bold; padding: 5px 15px 5px 15px;background-color:var(--cream); border-radius: 10px;}
.submit-button:hover,.submit-button:focus {color:white;background-color:royalblue;cursor:pointer;}

img[src^="images/linkedin.jpg"] {float:right; margin-right: 5px; height:20px}
img[src^="images/facebook.jpg"] {float:right; margin-right: 10px; height:20px}
img[src^="images/share.gif"] {width: 20px; vertical-align: top; margin-right: 10px; cursor: pointer;}
img[src^="../images/linkedin.jpg"] {float:right; margin-right: 5px; height:20px}
img[src^="../images/facebook.jpg"] {float:right; margin-right: 10px; height:20px}
img[src^="../images/share.gif"] {width: 20px; vertical-align: top; margin-right: 10px; cursor: pointer;}
.st-btns > .st-btn:not([data-network='whatsapp']):not([data-network='twitter']):not([data-network='linkedin']):not([data-network='facebook']):not([data-network='email']):not([data-network='reddit']):not([data-network='copy']){display: none !important;}
  
.footer{font-size:15px;line-height:1.35;display:block;} 
.footer-rule {width: 220px; float: left;}
.footer-block {width: 940px; padding-left: 10px; padding-top: 10px; padding-bottom: 25px; padding-left: 10px; margin:auto; clear: both;}
.footer-split-left {float: left; width: 350px; margin-right: 60px;}
.footer-split-right {float: left; width: 400px; padding-top: 10px; padding-bottom: 10px;}
/* footer also used for partners list style*/

.login-container {position:fixed;top:50%;left:50%;width:320px; height:320px; margin-left:-160px; margin-top:-200px;}
.login-content {font-size:15px; color: #000077; background-color:#F0F8FF; width:300px; height:300px; max-width: 85%; border-radius:5px 5px 0px 0px; border: 1px solid black; padding-left:15px; padding-top:5px; padding-right:20px; line-height:1.3; margin:auto;}

.help-container {position:fixed; right: 10px; bottom: 0px; border-width: 1px 1px 0 1px; border-style:solid; border-color:var(--ink); border-radius: 5px 5px 0 0;}
.help-content {font-size:15px;font-weight:bold; background-color: var(--cream); box-shadow: 0 -4px 16px rgba(34,34,68,0.10);
 width:240px; border-radius:5px 5px 0px 0px; padding-left:15px; padding-top:5px; padding-right:20px; line-height:1.3;}
.help-filter{display:none}
#helpheader-mobile {visibility: hidden}

/*special page formats*/

/*partners page*/
.partners-content {width: 90vw; max-width: 1500px; margin:auto; } /* should be no wider than total width of columns - content style is footer*/
.statehead {min-width: 190px; font-size:18px;font-weight:bold;background-color:#E6E6BE;}
.partner-listing{font-size:18px;} 

/*walkthrough pages*/
.walkthroughblock {width: 1110px; margin:auto;max-width:100%;display:flex; padding-bottom:20px; margin-bottom:50px; justify-content: space-around; align-items: center; flex-wrap:wrap-reverse;}
.walkthroughblock-imageblock {max-width:700px; text-align: center;padding-left:10px;padding-right:20px;}
.walkthroughblock-image {max-width:75%; height:auto;}
.walkthroughblock-caption {width: 30%; min-width:300px; padding-left: 20px; padding-right:20px;padding-bottom:20px;}

/*rates pages*/
.ratecalculator {background: #EEEEEE; padding: 10px 20px 10px 20px;}

/*deliver-page cgi*/
.deliver-header {width: 800px; margin:auto; padding-top: 10px;}

/*order pages*/
.order-product-block {margin-bottom:15px; padding: 15px; background-color: #EEEEEE;}
.order-head{font-weight:bold;margin-bottom:0;line-height:normal;text-underline-position: auto}
.order-item {margin-top: 5px; margin-bottom:15px;}

/*move update page*/
.put-above-for-mobile {width: 35%; margin-right:100px; float:left;} 
.put-under-for-mobile {width: 35%; float:left;}

/*settings for search*/
#ss360-search-result-heading{font-size:24px;} /*found count*/
#ss360-layer h3.content-group-heading {font-size:22px; color:var(--ink); ;background-color:#ffffff; margin: 0; padding: 15px 0 0 0;}
#ss360-layer h3.content-group-heading::after {content: ":";}
#ss360-layer a:focus{ background-color: transparent; }

.video-wrap {
  max-width: 600px;  
  margin: 30px auto 20px auto;
}
.video-container {position: relative; padding-bottom: 50%; padding-top: 35px; width:100%; height: 100%; overflow: hidden;}
.video-container iframe {position: absolute;top:0;left: 0;width: 100%;height: 100%;}


/* ============================================================
   VISUAL REFRESH — layered on top of the existing system above.
   Same typefaces and sizes throughout (Roboto Slab, existing
   H1/H2/body sizing, existing column widths and breakpoints
   are all untouched). These rules only refine color, edges,
   depth and a little breathing room — nothing shrinks.
   ============================================================ */

/* Capterra / Software Advice badges: sizing the <img> itself by
   percentage let some browsers resolve the percentage against the
   SVG's own intrinsic size instead of the container, so the badge
   could render far larger than intended (and inconsistently as the
   viewport changed). Sizing a plain wrapper div instead, and letting
   the image simply fill it, removes that ambiguity everywhere. */
.rating-badge-wrap{
  width: 55%;
  max-width: 150px;
  min-width: 90px;
  margin: 0 auto 10px auto;
}
.rating-badge{
  display: block;
  width: 100%;
  height: auto;
}
.ratingsbox img[alt="5 stars"]{
  max-width: 100%;
  height: auto;
}

/* ============================================================
   Condensed user-guides grid (replaces the old floated list).
   Same body font/size as the rest of the page — cards just
   group the icon + label + description more tightly.
   ============================================================ */

.guide-grid{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 18px;
  margin-top: 10px;
}
.guide-card{
  display: flex;
  align-items: center;
  gap: 16px;
  background-color: #FFFFFF;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 14px 18px;
  box-shadow: 0 3px 12px rgba(34,34,68,0.05);
  text-decoration: none;
  color: var(--ink);
}
.guide-card:hover, .guide-card:focus{
  border-color: var(--accent-red);
  box-shadow: 0 6px 16px rgba(34,34,68,0.10);
  text-decoration: none;
  color: var(--ink);
}
.guide-card img{ flex-shrink: 0; }
.guide-kicker{
  display: block;
  font-family: Verdana, sans-serif;
  font-size: 12.5px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ink);
  margin-bottom: 2px;
}

/* ============================================================
   Feature comparison table (replaces the two feature lists that
   repeated every shared item). Each row is a feature; the Pro
   and Lite columns show a check or a dash. Wrapped in a
   horizontally-scrolling container so it stays usable on narrow
   screens without cramming or truncating feature text.
   ============================================================ */

.compare-table-wrap{
  overflow-x: auto;
  margin-top: 10px;
  -webkit-overflow-scrolling: touch;
  border-radius: 5px;
  box-shadow: 0 4px 16px rgba(34,34,68,0.06);
}
.feature-compare{
  width: 100%;
  min-width: 560px;
  border-collapse: collapse;
  background-color: #FFFFFF;
  border: 2px solid LightSkyBlue;
}
.feature-compare th, .feature-compare td{
  padding: 11px 16px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  font-size: 17px;
  font-weight: normal;
  line-height: 1.35;
}
 .feature-compare thead th.pro-col,
  .feature-compare thead th.lite-col{
    text-align: center;
  }
.feature-compare thead th{
  background-color: rgba(64,47,193,0.05);;
  font-family: Verdana, sans-serif;
  font-size: 13px;
  font-weight: bold;
  letter-spacing: .03em;
  text-transform: uppercase;
  text-align: left;
  padding-top: 14px;
  padding-bottom: 14px;
  border-bottom: 2px solid var(--line);
}
.feature-compare thead th.feature-col{
  background-color: var(--cream);
  text-align: left;
  text-transform: none;
  letter-spacing: normal;
  font-size: 15px;
  position: sticky;
  left: 0;
  z-index: 3;
  box-shadow: 1px 0 0 var(--line);
}
.feature-compare tbody th{
  font-weight: normal;
  text-align: left;
  white-space: normal;
  background-color: var(--cream);
  position: sticky;
  left: 0;
  z-index: 1;
  box-shadow: 1px 0 0 var(--line);
}
.feature-compare td{
  text-align: center;
  font-size: 20px;
  width: 110px;
}
.feature-compare td.yes{font-family: Verdana, sans-serif; color: var(--checkgreen); font-weight: bold; }
.feature-compare .pro-col,
.feature-compare td:nth-child(2){
  background-color: rgba(64,193,47,0.05);
  border-left: 2px solid LightSkyBlue;
  border-right: 2px solid LightSkyBlue;
}

.plan-badge{
  display: inline-block;
  font-family: "Roboto Slab", serif;
  font-size: 12px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #fff;
  background-color: seagreen;
  border-radius: 20px;
  padding: 4px 12px;
  margin-bottom: 10px;
}
.plan-badge-lite{ background-color: royalblue; }
.plan-title{
  display: block;
  font-size: 24px;
  margin-bottom: 14px;
}

.feature-compare thead th .plan-badge{ margin-bottom: 6px; }
    
@media screen and (max-width: 1600px) {
    H2 {padding-left: calc(120px + 6vw)}
}

@media screen and (max-width: 1300px) {
    #topmenu-header{margin-left: 10px; width: 550px}
    .submenu {top:54px}
    .left-column {max-width: calc(50vw - 398px); visibility:hidden; height:0px;}
    .center-column {max-width: 75vw}
    .right-column {display: none}
    .right-column-product {float:none; clear:both;width: 90%;max-width: 900px;margin: auto}
    .ratingsbox {width:90%; margin-top:10px;margin-left:0px}
    H2 {padding-left: calc(4vw - 10px); max-width: 95%}
    .wizard-ad {margin-left: calc(4vw - 10px);max-width: 95%}
}
     
@media screen and (max-width: 900px) {     

    .banner {min-width: 0px; margin-bottom: 10px; margin-left:0px; margin-right:0px;}
    .banner-logo {margin-top: 12px; margin-left:5px; max-width: calc(100vw - 100px); height: 59px;}
    
    #search-block {display:none}
    #mobile-menu-glyph {display:inline; float:left; height: 18px; margin-top: 15px; margin-left: 40px; cursor:pointer;}
    #mobile-menu-header {display:inline; cursor:pointer;font-family: sans-serif;font-size:24px; margin-left:85%;}
    #mobile-menu-search {display:inline;margin-top: 0px; margin-bottom:10px;}
    
    .search-submit {width:16px; height: 18px; cursor: pointer}
    #mobile-search-icon {float:left; margin-top: 3px; margin-left: 15px; padding: 3px; background-color: white}
    
    #topmenu-header {flex-direction:column; position:fixed; top: 0px;left: 0px;  height: auto;  width:99vw; margin-top:0px; margin-left:0px; margin-bottom:10px; background-color:var(--cream);padding-left:10px;padding-bottom:15px;visibility:hidden; text-align: left;border:1px solid var(--ink);border-left:0px;z-index:100;}
    
    .submenu-header {left: 0px; margin-bottom:10px;margin-top:10px;padding-left: 10px; padding-right: 5px;text-align: left}
    
    .submenu {left: 0px;top:40px; max-height: 65vh; width:98vw; margin-left:0px; border-style:solid; border-width: 1px 0px 1px 0px; padding-bottom: 10px;background-color:var(--cream);padding-left:5px;padding-right:5px;overflow: scroll;}
    
    .submenu-subhead {margin-left:0px;line-height: 1.4;padding-top:10px; padding-left:2px;padding-right:5px;}
    .submenu-item {margin-left:0px;padding-left:12px;line-height: 1.2;padding-right:5px;}
    .submenu-item::before {content: "\2219"; color:#224444; font-weight:bolder; font-size:20px}
    .submenu-item a {margin-left:0px;padding-left:12px;line-height: 1.2;padding-right:5px;}
    
    .banner-mailboxes {height:100px; min-width: 0px; width:100%; margin-bottom:10px;}
    .banner-head {width: 95%; margin:auto;}  
    .banner-subhead {margin-left:0%; margin-right:0%;margin-top:5px;} 
    /* end top banner block*/
    
     H2 {padding-left: 10px; max-width: 95%}
    .wizard-ad {margin-left:10px; max-width: 95%}
    .compare-grid{ grid-template-columns: 1fr; }
    .guide-grid{ grid-template-columns: 1fr; }
    
    .compare-scroll-hint{ display: none; }
    .compare-table-wrap{
    overflow-x: visible;
    box-shadow: none;
    }
  .feature-compare{
    width: 100%;
    min-width: 0;
    table-layout: fixed;
  }
  .feature-compare thead th.feature-col{
    width: 44%;
    position: static;
    box-shadow: none;
  }
  .feature-compare thead th.pro-col,
  .feature-compare thead th.lite-col{
    width: 28%;
  }
  .feature-compare tbody th{
    position: static;
    box-shadow: none;
    max-width: none;
  }
  .feature-compare th, .feature-compare td{
    padding: 8px 6px;
    font-size: 13.5px;
    line-height: 1.3;
  }
  .feature-compare thead th{
    font-size: 10.5px;
    padding-top: 10px;
    padding-bottom: 10px;
  }
  .feature-compare td{
    font-size: 17px;
    width: auto;
  }
  .feature-compare .plan-badge{
    font-size: 9.5px;
    padding: 3px 7px;
    letter-spacing: .02em;
  }

}
    
@media screen and (max-width: 600px) {     
    
    H2 {width: 90%;padding-left: 10px; padding-right:10px;max-width: 90%}
    .wizard-ad {width: 90%;margin-left:10px; margin-right:10px;max-width: 90%;}
   .textindent {margin-left: 0px;}
    UL {margin-left: 5px;margin-right: 0px;padding-left: 10px;padding-right: 0px;}
    OL {margin-left: 5px;margin-right: 0px;padding-left: 10px;padding-right: 0px;}
    
    .left-column {display:none}
    .center-column {float:none; width: 90%; max-width: 90%; margin: auto; padding-left: 0px;padding-right: 0px; border: 0px;}
    
    .right-column-product {width: 90%;max-width: 90%;margin: auto;}
    .ratingsbox {width:90%}
    .printouts {display:flex; align-items:center; max-width:500px;margin-left:0px;}
    .leaderboard {display: none}
    .product-selector-box {border-width: 2px;}

    .topicslist-left {width: 100%; float:left}
    .topicslist-right {width: 100%; float:left}
    
    .footer-block {width: 95%; padding-left: 10px; padding-top: 10px; padding-bottom: 10px; padding-left: 10px; margin:auto; clear: both;}
    .footer-split-left {width: 100%; float:none;}
    .footer-split-right {float:none; margin-top:10px; width: 100%}
    
    .help-container {right: 0px; border: 1px solid lightgray}
    #helpheader {visibility: hidden}
    #helpheader-mobile {visibility:visible; right: 10px;}
    
/*move update page*/
    .put-above-for-mobile {width: 100%; float:none}
    .put-under-for-mobile {float:none; margin-top:10px;}

/* partners page*/
    .partners-content {width: 260px; margin:auto;}
    
/*deliver-page cgi*/
    .deliver-header {width: 95%; padding: 4px; border: 0px;}
	
/*order pages*/
    .order-product-block {width: 90%; margin:auto; margin-bottom:15px;}
    .order-item {margin-left: 15px;}

/*scott bottom pic smaller to widen text - for some reason changing width and height doesn't work*/
    #scott {max-width:102px; max-height: 96px;}
}
    
@media screen and (max-width: 480px){
  .feature-compare th, .feature-compare td{
    padding: 7px 5px;
    font-size: 12.5px;
  }
  .feature-compare thead th{ font-size: 10px; }
  .feature-compare td{ font-size: 16px; }
}