@media(max-width:1120px){
.primary-nav{gap:16px}
.primary-nav a{font-size:.78rem}
.header-inner{gap:18px}
.hero-grid,.admin-body .dashboard-grid{grid-template-columns:repeat(2,1fr)}
.content-grid{grid-template-columns:1fr}
.portal-sidebar{width:245px}
.portal-main{margin-left:245px}
}

@media(max-width:900px){
.site-header{
height:70px;
background:rgba(7,25,47,.94);
backdrop-filter:blur(15px)
}

.nav-toggle{
display:block;
margin-left:auto
}

.btn--header{display:none}

.primary-nav{
position:fixed;
top:69px;
left:0;
right:0;
display:flex;
flex-direction:column;
align-items:center;
gap:0;
padding:13px 20px 25px;
background:rgba(2,8,23,.995);
border-top:1px solid rgba(255,255,255,.08);
transform:translateY(-115%);
opacity:0;
visibility:hidden;
transition:.3s var(--ease);
margin:0
}

.primary-nav.open{
transform:none;
opacity:1;
visibility:visible
}

.primary-nav a{
width:min(100%,360px);
padding:13px 10px;
font-size:.92rem;
text-align:center
}

.primary-nav a:after{
left:50%;
right:50%;
bottom:5px;
transform:translateX(-50%);
width:34px
}

.primary-nav a:hover:after,
.primary-nav a.active:after{
right:auto
}

.nav-toggle.open span:nth-child(1){
transform:translateY(7px) rotate(45deg)
}

.nav-toggle.open span:nth-child(2){
opacity:0
}

.nav-toggle.open span:nth-child(3){
transform:translateY(-7px) rotate(-45deg)
}

.hero{
min-height:auto;
padding-top:130px
}

.hero-grid{
grid-template-columns:1fr
}

.hero-card{
max-width:600px
}

.split{
grid-template-columns:1fr;
gap:45px
}

.feature-visual{
min-height:400px
}

.steps{
grid-template-columns:repeat(2,1fr)
}

.step:nth-child(2):after{
display:none
}

.card-grid,
.vertical-grid{
grid-template-columns:repeat(2,1fr)
}

.form-shell{
grid-template-columns:1fr
}

.form-aside{
padding:40px
}

.cta-band{
padding:52px;
display:block
}

.cta-band .button-row{
margin-top:28px
}

.trust-inner{
align-items:flex-start;
flex-direction:column;
padding:25px 0
}

.trust-items{
flex-wrap:wrap;
justify-content:flex-start
}

.portal-sidebar{
width:270px;
transform:translateX(-105%);
box-shadow:20px 0 60px rgba(0,0,0,.2)
}

.portal-sidebar.open{
transform:none
}

.portal-main{
margin-left:0
}

.sidebar-toggle{
display:grid;
place-items:center
}

.sidebar-scrim{
display:block;
position:fixed;
z-index:850;
inset:0;
background:rgba(4,14,27,.45);
opacity:0;
visibility:hidden;
transition:.25s
}

.sidebar-scrim.open{
opacity:1;
visibility:visible
}

.portal-topbar{
padding:0 20px
}

.portal-content{
padding:25px 20px 45px
}

.portal-footer{
padding:20px
}

.offer-detail-head{
flex-wrap:wrap
}
}

@media(max-width:640px){
.container{
width:min(100% - 28px,1180px)
}

.section{
padding:72px 0
}

.hero{
padding:115px 0 68px
}

.hero-copy h1{
font-size:2.65rem
}

.hero-copy>p{
font-size:1rem
}

.hero-proof{
flex-direction:column;
gap:10px
}

.hero-card{
padding:18px
}

.card-grid,
.vertical-grid,
.steps{
grid-template-columns:1fr
}

.step:not(:last-child):after{
display:none
}

.step{
padding:24px 10px
}

.step:before{
margin-bottom:22px
}

.trust-items{
gap:15px
}

.form-panel,
.form-aside{
padding:32px 23px
}

.form-grid{
grid-template-columns:1fr
}

.field-full{
grid-column:auto
}

.page-hero{
padding:135px 0 65px
}

/*
 * MOBILE PAGE HERO ALIGNMENT
 *
 * Applies to:
 * About Us
 * How It Works
 * Verticals & Offers
 * Publisher Sign Up
 * Contact Us
 *
 * Keeps the complete hero content centered inside the
 * available mobile width without changing desktop layout.
 */

.page-hero .container{
display:flex;
flex-direction:column;
align-items:center;
text-align:center;
}

.page-hero .breadcrumb{
width:100%;
text-align:center;
}

.page-hero .eyebrow{
width:100%;
text-align:center;
}

.page-hero h1{
width:100%;
max-width:720px;
margin-left:auto;
margin-right:auto;
text-align:center;
}

.page-hero > .container > p:not(.eyebrow){
width:100%;
max-width:680px;
margin-left:auto;
margin-right:auto;
text-align:center;
}

.cta-band{
padding:38px 25px;
border-radius:20px
}

.public-offer{
grid-template-columns:1fr;
padding:22px
}

.search-bar{
display:grid
}

.site-flash{
left:14px;
right:14px;
top:80px
}

.dashboard-grid,
.admin-body .dashboard-grid{
grid-template-columns:1fr
}

.portal-topbar{
height:76px
}

.portal-topbar .eyebrow{
display:none
}

.portal-topbar h1{
font-size:1.1rem
}

.topbar-actions .avatar{
display:none
}

.portal-content{
padding:19px 13px 40px
}

.welcome-panel{
padding:26px 21px
}

.welcome-panel h2{
font-size:1.45rem
}

.panel-header{
padding:17px
}

.panel-body{
padding:17px
}

.filter-bar{
padding:13px
}

.filter-bar>*{
width:100%
}

.detail-grid{
grid-template-columns:1fr
}

.detail-item.full{
grid-column:auto
}

.account-banner{
align-items:flex-start;
flex-direction:column
}

.portal-footer{
display:block
}

.portal-footer span{
display:block;
margin:4px
}

.offer-detail-head{
display:block
}

.payout-callout{
text-align:left;
margin-top:16px
}

.notification-item{
grid-template-columns:auto 1fr
}

.notification-item time{
grid-column:2
}

.auth-card{
padding:28px 22px
}

/*
 * QUALITY FRAMEWORK - MOBILE STATUS BUTTON FIX
 */

.feature-visual .visual-status,
.visual-status{
position:relative !important;
top:auto !important;
right:auto !important;
bottom:auto !important;
left:auto !important;

display:flex !important;
align-items:center;
justify-content:center;

width:calc(100% - 32px) !important;
max-width:calc(100% - 32px) !important;
min-width:0 !important;

margin:16px auto 20px !important;

box-sizing:border-box;

transform:none !important;

text-align:center;
white-space:normal;
overflow-wrap:anywhere;
word-break:break-word;
}

.feature-visual .visual-status i,
.visual-status i{
flex:0 0 auto;
}
}

@media(max-width:380px){
.hero-copy h1{
font-size:2.3rem
}

.button-row .btn{
width:100%
}

.logo{
font-size:.84rem
}

.logo-symbol{
width:31px;
height:31px
}

.portal-topbar{
padding:0 12px
}

.portal-topbar h1{
max-width:165px;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis
}

.form-aside{
display:none
}

/*
 * Keep the Quality Framework status button fully
 * inside very narrow mobile screens as well.
 */

.feature-visual .visual-status,
.visual-status{
width:calc(100% - 24px) !important;
max-width:calc(100% - 24px) !important;
margin-left:auto !important;
margin-right:auto !important;
padding-left:14px;
padding-right:14px;
}
}