/* Browser-previewed layout and typography refinements. */

:root{
  --wrap:1184px;
  --action:#bd3529;
  --red:#e54836;
  --ink:#f2f1eb;
  --line:#3d3f3d
}
body{
  font-size:16px;
  line-height:1.65;
  text-rendering:optimizeLegibility
}
.wrap{
  width:calc(100% - 80px)
}
.site-header{
  height:80px;
  background:#171817;
  border-bottom-color:#383a37
}
.preview-bar{
  font-size:11px;
  letter-spacing:.1px;
  background:#202020;
  color:#b9bdb4
}
.desktop-nav a{
  font-size:14px;
  font-weight:600;
  color:#b9bdb5
}
.header-actions{
  gap:22px
}
.brand>span{
  letter-spacing:-.7px
}
.button{
  font-weight:700;
  letter-spacing:0;
  gap:14px;
  border-radius:2px;
  justify-content:center;
  min-height:48px
}
.button-primary{
  background:#bd3529;
  color:#fff
}
.button-primary:hover{
  background:#a72d23
}
.text-link{
  font-weight:600;
  letter-spacing:0
}
.hero-content{
  padding-top:78px;
  padding-bottom:72px
}
.hero h1{
  font-size:62px;
  line-height:1.06;
  letter-spacing:-2px;
  max-width:640px;
  font-weight:650
}
.hero-description{
  font-size:18px;
  line-height:1.65;
  max-width:460px;
  color:#c4c7bf
}
.hero-ctas{
  gap:26px;
  margin-top:30px
}
.hero-ctas .button{
  padding-inline:22px
}
.hero-platforms{
  margin-top:32px;
  gap:20px
}
.hero-rank-card{
  border-color:#55594f;
  padding:16px 18px
}
.hero-rank-card strong{
  font-size:14px;
  font-weight:600
}
.hero-rank-card small{
  font-size:11px
}
.section{
  padding-top:78px;
  padding-bottom:78px
}
.section-heading{
  margin-bottom:34px
}
.section-heading h2,.faq-heading h2{
  font-size:36px;
  line-height:1.16;
  letter-spacing:-1px;
  font-weight:600
}
.section-heading>p,.faq-heading>p{
  font-size:16px;
  line-height:1.65
}
.service-search input{
  font-size:16px;
  min-height:48px
}
.filter-tabs button{
  font-size:14px;
  font-weight:600
}
.service-card:not(.card-rank){
  padding:26px 0
}
.service-card:not(.card-rank) .card-title-row h3{
  font-size:21px;
  font-weight:600;
  letter-spacing:-.4px;
  line-height:1.3
}
.service-card:not(.card-rank) .card-content>p{
  font-size:16px;
  line-height:1.6;
  color:#535750;
  margin-top:8px
}
.service-card:not(.card-rank) .card-bottom{
  margin-top:16px;
  gap:18px
}
.card-bottom strong{
  font-size:25px;
  line-height:1.3
}
.card-bottom strong [data-usd-cents]{
  font:inherit;
  color:inherit
}
.service-card .card-arrow{
  min-height:44px;
  min-width:106px;
  padding:10px 14px;
  gap:14px;
  font-weight:600;
  border:1px solid currentColor;
  border-radius:2px
}
.service-cta{
  font-size:13px
}
.card-rank .card-content{
  padding:28px
}
.card-rank .card-art>img{
  top:0;
  right:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center 12%
}
.config-heading h2{
  font-size:36px;
  line-height:1.2;
  letter-spacing:-1px
}
.config-fields,.quote-panel{
  padding:32px
}
.config-fields label,.config-fields>p{
  font-size:14px;
  line-height:1.6
}
:is(.config-fields,.portal-page,dialog) :is(input:not([type=checkbox]),select,textarea){
  font-size:16px;
  line-height:1.5;
  min-height:48px;
  border-radius:2px;
  border-color:#5d6257
}
.config-fields :is(input,select){
  height:48px
}
.quote-panel{
  background:#232620
}
.quote-panel>p,.quote-note{
  font-size:14px;
  line-height:1.6
}
.quote-price{
  font-size:40px;
  letter-spacing:-1px;
  font-weight:650;
  line-height:1.2
}
.quote-row{
  font-size:15px
}
.portal-page{
  padding-top:32px;
  padding-bottom:72px
}
.portal-nav{
  gap:4px 24px;
  margin-bottom:25px;
  padding-bottom:18px;
  border-color:#383c35
}
.portal-nav .text-link{
  font-size:14px;
  min-height:44px
}
.portal-heading{
  margin-bottom:28px
}
.portal-heading h1{
  font-size:34px;
  font-weight:600;
  letter-spacing:-1px;
  line-height:1.2;
  margin-top:8px
}
.portal-heading>p{
  margin-top:10px;
  color:#bcbcb7
}
.admin-navigation{
  gap:0 24px;
  border-color:#404040;
  padding-bottom:0;
  margin-bottom:28px
}
.admin-navigation>a{
  font-size:14px;
  min-height:48px;
  padding:12px 0;
  white-space:nowrap
}
.portal-panel{
  padding:28px;
  margin:24px 0;
  background:#202020;
  border-color:#404040;
  border-radius:3px
}
.portal-panel h2{
  font-size:23px;
  font-weight:600;
  line-height:1.3;
  letter-spacing:-.5px;
  margin-bottom:16px
}
.portal-panel h3{
  font-size:18px;
  font-weight:600;
  line-height:1.4
}
.portal-panel p{
  font-size:16px;
  line-height:1.65;
  color:#bec3b7
}
.portal-muted,.portal-panel small{
  font-size:13px;
  line-height:1.6;
  color:#adb4a4
}
.portal-stats{
  gap:16px;
  margin:24px 0
}
.portal-stats article{
  padding:22px;
  background:#242720;
  border-top:2px solid #777;
  border-radius:2px;
  min-width:0
}
.portal-stats article>span{
  font-size:13px;
  color:#bcbcb7
}
.portal-stats strong{
  font-family:var(--font);
  font-size:28px;
  font-weight:700;
  letter-spacing:-.6px;
  line-height:1.3;
  margin-top:8px;
  font-variant-numeric:tabular-nums
}
.portal-stats strong [data-usd-cents]{
  font:inherit;
  line-height:inherit;
  color:#f2f1eb;
  display:inline;
  overflow-wrap:anywhere
}
.payout-currency-view .portal-stats strong{
  font-size:25px;
  line-height:1.35
}
.portal-summary-row{
  padding:20px 0;
  gap:16px 30px;
  border-color:#3d4237;
  align-items:start
}
.portal-summary-row>span{
  font-size:15px;
  color:#b7bfae
}
.portal-summary-row>strong{
  font-size:18px;
  line-height:1.5;
  font-weight:650;
  letter-spacing:-.15px;
  white-space:normal;
  text-align:right;
  font-variant-numeric:tabular-nums
}
.portal-actions{
  gap:12px;
  align-items:end
}
.portal-actions label{
  margin:0
}
.portal-actions select{
  max-width:100%;
  min-width:170px
}
.portal-secondary{
  border-color:#686f5e;
  background:transparent;
  color:#ecefe5
}
.portal-secondary:hover{
  background:#30362a;
  border-color:#909a81
}
.portal-order-row{
  padding:22px 0;
  min-height:94px;
  gap:20px
}
.portal-order-row p{
  font-size:14px
}
.portal-order-row>div strong{
  font-size:17px
}
.portal-order-row>strong:last-child{
  font-size:17px;
  font-weight:650
}
.portal-status{
  font-size:12px;
  font-weight:600;
  line-height:1.5;
  padding:5px 10px;
  letter-spacing:0;
  border-radius:3px
}
.portal-panel details>summary,details.portal-panel>summary{
  cursor:pointer;
  min-height:44px;
  display:list-item;
  align-content:center;
  font-size:16px;
  line-height:1.6;
  font-weight:600
}
.payout-currency-view details.portal-panel{
  margin:12px 0;
  padding:16px 20px
}
.payout-currency-view details.portal-panel>summary{
  padding:8px 0
}
.payout-currency-view details.portal-panel[open]>summary{
  padding-bottom:16px;
  border-bottom:1px solid #3d4237
}
.payment-stage{
  border-radius:3px;
  padding:24px
}
.payment-stage h4{
  font-size:18px;
  line-height:1.4
}
.payment-stage h5{
  font-size:14px;
  letter-spacing:.05em;
  text-transform:uppercase;
  margin-block:24px 12px
}
.stage-amount{
  font-size:21px;
  line-height:1.4;
  font-variant-numeric:tabular-nums
}
.stage-achievement li{
  font-size:15px;
  line-height:1.65
}
.portal-timeline{
  margin-top:28px;
  padding-top:24px
}
.portal-timeline h3{
  font-size:19px
}
.portal-timeline article strong{
  font-size:15px
}
.portal-timeline article p{
  font-size:15px
}
.portal-message{
  background:#2b3025;
  border-color:#454e3a;
  border-radius:3px
}
.portal-message p{
  font-size:16px;
  line-height:1.65
}
.portal-choice-list{
  border-color:#535d46;
  border-radius:2px
}
.portal-choice-list label{
  min-height:44px
}
.portal-panel label{
  line-height:1.5
}
.portal-panel .consent-label{
  min-height:44px
}
.portal-profile .form-grid{
  gap:18px
}
.admin-user-card{
  padding-block:24px;
  border-color:#3d4237
}
.admin-user-summary strong{
  font-size:17px
}
dialog{
  border:1px solid #555d4a;
  border-radius:4px;
  padding:32px;
  box-shadow:0 24px 70px #0008
}
dialog::backdrop{
  background:#080a08b8
}
.dialog-heading h2{
  font-size:28px;
  line-height:1.2;
  letter-spacing:-.6px
}
dialog p,dialog label{
  font-size:15px;
  line-height:1.6
}
dialog .checkout-total{
  padding-block:20px;
  font-size:17px
}
.checkout-total strong{
  font-size:27px;
  line-height:1.3;
  font-weight:650;
  letter-spacing:-.6px
}
.consent-label{
  min-height:44px;
  align-items:flex-start;
  gap:12px;
  font-size:15px;
  line-height:1.6
}
.optional{
  font-size:13px;
  color:#b2b2ad
}
.consent-label input{
  margin-top:5px;
  flex-shrink:0
}
@media(min-width:1101px){
  .service-grid{
    column-gap:36px
  }
  .service-card:not(.card-rank) .card-content{
    padding-right:4px
  }
  .hero-rank-card{
    margin-top:34px
  }
  
}
@media(max-width:1000px){
  .hero h1{
    font-size:48px;
    max-width:480px
  }
  .hero-description{
    font-size:17px;
    max-width:350px
  }
  .hero-content{
    padding-top:64px
  }
  .section{
    padding-block:60px
  }
  .config-fields,.quote-panel{
    padding:26px
  }
  
}
@media(max-width:700px){
  .wrap{
    width:calc(100% - 40px)
  }
  .site-header{
    height:72px
  }
  .preview-bar{
    font-size:10px;
    line-height:1.5
  }
  .header-actions{
    gap:12px
  }
  .hero-content{
    padding-top:38px;
    padding-bottom:32px
  }
  .hero h1{
    font-size:34px;
    line-height:1.12;
    letter-spacing:-1.05px
  }
  .hero-description{
    font-size:16px;
    line-height:1.65;
    max-width:none;
    margin-top:18px
  }
  .hero-ctas{
    gap:15px;
    margin-top:24px
  }
  .hero-ctas .button{
    padding-inline:16px
  }
  .hero-platforms{
    gap:14px;
    margin-top:25px
  }
  .hero-rank-card{
    margin-top:27px;
    padding:15px
  }
  .hero-rank-card strong{
    font-size:13px
  }
  .section{
    padding-block:46px
  }
  .section-heading{
    margin-bottom:24px
  }
  .section-heading h2,.faq-heading h2,.config-heading h2{
    font-size:28px;
    line-height:1.2;
    letter-spacing:-.65px
  }
  .service-card:not(.card-rank){
    padding-block:24px
  }
  .service-card:not(.card-rank) .card-title-row h3{
    font-size:20px;
    letter-spacing:-.3px
  }
  .service-card:not(.card-rank) .card-content>p{
    font-size:16px;
    line-height:1.6
  }
  .service-card:not(.card-rank) .card-bottom{
    gap:12px;
    margin-top:14px
  }
  .service-card .card-arrow{
    min-width:44px;
    padding:10px;
    gap:8px
  }
  .service-card .service-cta{
    display:none
  }
  .card-bottom strong{
    font-size:22px
  }
  .card-rank .card-content{
    padding:24px
  }
  .card-rank .card-art{
    min-height:300px
  }
  .config-fields,.quote-panel{
    padding:24px 20px
  }
  .quote-price{
    font-size:34px
  }
  .portal-page{
    padding-top:24px;
    padding-bottom:48px
  }
  .portal-nav{
    gap:0 18px;
    padding-bottom:16px;
    margin-bottom:22px
  }
  .portal-nav .text-link{
    font-size:14px
  }
  .portal-heading h1{
    font-size:29px;
    letter-spacing:-.8px
  }
  .portal-heading{
    margin-bottom:24px
  }
  .admin-navigation{
    gap:0 22px;
    flex-wrap:nowrap;
    overflow-x:auto;
    scrollbar-width:thin;
    margin-bottom:24px;
    padding-bottom:5px
  }
  .admin-navigation>a{
    font-size:14px;
    min-width:max-content;
    flex-shrink:0
  }
  .portal-panel{
    padding:22px 18px;
    margin:20px 0
  }
  .portal-panel h2{
    font-size:22px
  }
  .portal-panel p{
    font-size:16px
  }
  .portal-stats{
    gap:12px;
    grid-template-columns:repeat(2,minmax(0,1fr))
  }
  .portal-stats article{
    padding:18px 14px
  }
  .portal-stats strong,.payout-currency-view .portal-stats strong{
    font-size:22px;
    line-height:1.35;
    letter-spacing:-.4px
  }
  .portal-stats article>span{
    font-size:13px
  }
  .portal-actions{
    align-items:stretch
  }
  .portal-actions label{
    width:100%
  }
  .portal-actions select{
    width:100%;
    min-width:0
  }
  .portal-actions .button{
    min-height:46px;
    max-width:100%
  }
  .portal-summary-row{
    gap:10px 16px;
    padding-block:18px
  }
  .portal-summary-row>strong{
    font-size:18px;
    max-width:100%
  }
  .portal-order-row{
    gap:10px 14px;
    padding-block:20px
  }
  .portal-order-row p{
    font-size:13px;
    max-width:none
  }
  .portal-order-row>div strong{
    font-size:16px
  }
  .portal-order-row>strong:last-child{
    font-size:17px
  }
  .portal-status{
    font-size:12px;
    white-space:normal;
    text-align:center
  }
  .payout-currency-view details.portal-panel{
    padding:14px;
    margin:12px 0
  }
  .payout-currency-view details.portal-panel>summary{
    font-size:15px;
    line-height:1.65
  }
  .payment-stage{
    padding:20px 16px
  }
  .payment-stage h4{
    font-size:17px
  }
  .stage-amount{
    font-size:20px
  }
  .portal-summary-row>span{
    font-size:15px
  }
  .portal-timeline article p{
    font-size:15px
  }
  dialog{
    padding:25px 20px;
    max-width:calc(100vw - 28px);
    border-radius:3px
  }
  .dialog-heading h2{
    font-size:25px
  }
  .checkout-total strong{
    font-size:24px
  }
  .portal-panel input,.portal-panel select,dialog input,dialog select,dialog textarea{
    font-size:16px
  }
  .consent-label{
    font-size:15px
  }
  .portal-choice-list{
    max-height:270px
  }
  
}
@media(prefers-reduced-motion:reduce){
  html{
    scroll-behavior:auto
  }
  *,*::before,*::after{
    transition-duration:.01ms!important;
    animation-duration:.01ms!important
  }
  
}
.services-section{
  width:100%;
  padding-inline:max(40px,calc((100% - 1184px)/2))
}
.card-rank .card-art>img{
  width:100%;
  height:100%;
  object-fit:contain;
  object-position:center top
}
.hero-description{
  color:#c6c6c2
}
.portal-stats article{
  background:#242424;
  border-top-color:#777
}
.portal-panel p{
  color:#c1c1bc
}
.portal-muted,.portal-panel small{
  color:#b2b2ad
}
.quote-panel{
  background:#242424
}
.portal-message{
  background:#292929;
  border-color:#484848
}
@media(max-width:700px){
  .services-section{
    width:100%;
    padding-inline:20px
  }
  .hero-content{
    padding-bottom:32px
  }
  
}
.portal-actions label{
  display:grid;
  gap:8px;
  align-content:start;
  font-size:14px
}
.portal-stats strong{
  display:block
}
.payout-currency-view .portal-stats strong{
  font-size:24px
}
.payout-currency-view .portal-stats strong [data-usd-cents]{
  display:block
}
@media(max-width:700px){
  .payout-currency-view .portal-stats{
    grid-template-columns:1fr
  }
  .payout-currency-view .portal-stats strong{
    font-size:24px
  }
  
}
@media(min-width:701px){
  .card-rank{
    align-self:start;
    position:sticky;
    top:110px
  }
  .card-rank .card-art{
    flex:none;
    height:380px;
    min-height:380px
  }
  
}
@media(max-width:700px){
  .card-rank{
    position:static
  }
  .card-rank .card-art{
    height:300px;
    min-height:300px
  }
  
}


/* Public service starting-price highlight. */
.pricing-highlight{max-width:480px;margin-top:22px;padding:14px 18px;border-left:3px solid var(--action,var(--red));background:rgba(0,0,0,.18)}.pricing-highlight-label{display:block;font-size:12px;line-height:1.5;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:#d7a18e}.pricing-highlight-price{display:flex;align-items:baseline;flex-wrap:wrap;gap:8px;margin-top:3px}.pricing-highlight-price strong{font-size:26px;line-height:1.35;font-variant-numeric:tabular-nums;color:#f3f1eb}.pricing-highlight-price>span{font-size:14px;color:#d0ccc3}.pricing-highlight-note{margin-top:6px;font-size:13px;line-height:1.5;color:#c7c2b8}@media(max-width:700px){.pricing-highlight{max-width:none;padding:12px 15px;margin-top:20px}.pricing-highlight-price strong{font-size:24px}}