@import url('/mobile-v3.css');
/* Wending Work responsive polish — shared across public and console pages. */
html{scroll-padding-top:84px}
body{min-height:100vh}

/* Official WendingAI logo: render the source image exactly as provided. */
.logo{width:42px;height:42px;flex:0 0 42px;overflow:hidden;background:transparent!important;border:0!important;box-shadow:none!important;padding:0!important;border-radius:0!important}
.logo img{display:block!important;width:100%!important;height:100%!important;max-width:none!important;object-fit:contain!important;object-position:center!important;border-radius:0!important;background:transparent!important;transform:none!important;filter:none!important;opacity:1!important}
.wending-login-cta{white-space:nowrap}

.nav-wrap{background:rgba(255,255,255,.92);border-bottom-color:rgba(219,232,228,.9)}
.nav{height:72px}
.nav nav{gap:24px}
.nav nav a{position:relative}
.nav nav a[aria-current="page"]{color:var(--brand-dark)}
.nav nav a[aria-current="page"]::after{content:"";position:absolute;left:0;right:0;bottom:-11px;height:2px;border-radius:999px;background:var(--brand)}

.redeem-hero{padding:76px 0 80px}
.redeem-layout{gap:56px}
.redeem-copy h1{max-width:720px}
.redeem-copy>p{max-width:620px}
.redeem-card{border-radius:24px;box-shadow:0 28px 72px rgba(0,0,0,.20)}
.redeem-quick-links a{min-height:40px}

.compat-section{padding:84px 0}
.compat-layout{align-items:center}
.compat-tools span{min-height:46px;display:flex;align-items:center;justify-content:center;text-align:center}
.community-strip{margin-bottom:64px}

.mobile-bar{display:none!important}
body{padding-bottom:0!important}
.section{padding-block:88px}
.footer-inner{min-height:112px}

@media(max-width:980px){
  .shell{width:min(100% - 40px,1180px)}
  .nav{gap:14px}
  .nav nav{display:none}
  .nav>.button,.nav>button{flex:0 0 auto}
  .redeem-layout{grid-template-columns:1fr;gap:34px}
  .redeem-copy{text-align:left;max-width:760px}
  .redeem-copy>p{margin-inline:0}
  .redeem-trust,.redeem-quick-links{justify-content:flex-start}
  .redeem-card{max-width:720px;width:100%}
  .compat-layout{grid-template-columns:1fr!important;gap:34px!important}
  .compat-copy{max-width:760px}
  .compat-tools{grid-template-columns:repeat(3,minmax(0,1fr))!important}
  .community-inner{gap:24px}
}

@media(max-width:680px){
  html{scroll-padding-top:70px}
  .shell{width:calc(100% - 28px)}
  .nav{height:62px;gap:10px}
  .brand{gap:9px;min-width:0}
  .logo{width:36px;height:36px;flex:0 0 36px}
  .brand-copy{min-width:0}
  .brand-copy b{font-size:14px;white-space:nowrap}
  .brand-copy small{display:none}
  .nav>.button,.nav>button{padding:9px 11px;font-size:11px;border-radius:10px;white-space:nowrap}
  .wending-login-cta{padding:9px 10px!important;font-size:11px!important}

  .redeem-hero{padding:36px 0 48px}
  .redeem-layout{gap:26px}
  .redeem-copy{text-align:left}
  .redeem-kicker{font-size:10px;letter-spacing:.16em}
  .redeem-copy h1{font-size:clamp(34px,10vw,44px);line-height:1.08;margin:12px 0 14px;letter-spacing:-.045em}
  .redeem-copy>p{font-size:15px;line-height:1.68;margin:0}
  .redeem-trust{display:grid;grid-template-columns:1fr;gap:8px;margin-top:20px;font-size:12px}
  .redeem-quick-links{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:20px}
  .redeem-quick-links a{justify-content:center;text-align:center;padding:9px 10px;font-size:11px;min-height:38px}
  .redeem-quick-links a:last-child{grid-column:1/-1}

  .redeem-card{padding:20px 16px;border-radius:18px}
  .redeem-card-head h2{font-size:23px}
  .secure-chip{padding:6px 8px;font-size:10px}
  .redeem-card>p{font-size:13px;line-height:1.6}
  .redeem-card label{margin-top:17px}
  .redeem-input{display:grid;grid-template-columns:1fr;gap:8px}
  .redeem-input input{padding:13px 14px;border-radius:11px;font-size:14px}
  .redeem-input button{min-height:44px;border-radius:11px;padding:0 16px}
  .access-tools{margin-top:5px}
  .verification-shell{max-width:100%;overflow:hidden}
  .recover-access{padding:11px 12px;margin-top:10px}
  .redeem-note{font-size:11px;margin-top:14px;padding-top:13px}

  .proof-grid{grid-template-columns:repeat(2,1fr);padding:18px 0;row-gap:0}
  .proof-grid div{padding:12px 6px;border-bottom:1px solid #e3ece9}
  .proof-grid div:nth-child(2){border-right:0}
  .proof-grid div:nth-child(3),.proof-grid div:nth-child(4){border-bottom:0}
  .proof-grid strong{font-size:19px}
  .proof-grid span{font-size:10px}

  .compat-section{padding:52px 0}
  .compat-copy h2{font-size:30px!important;line-height:1.18}
  .compat-copy p{font-size:14px;line-height:1.7}
  .compat-actions{display:grid!important;grid-template-columns:1fr;gap:9px!important}
  .compat-actions .button{width:100%}
  .compat-tools{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important}
  .compat-tools span{min-height:42px!important;padding:8px!important;font-size:12px!important;border-radius:11px!important}

  .community-strip{margin:0 14px 42px!important;border-radius:20px!important}
  .community-inner{display:grid!important;grid-template-columns:1fr!important;padding:24px 18px!important;gap:18px!important}
  .community-inner h2{font-size:25px!important;margin:8px 0!important}
  .community-inner p{font-size:13px!important;line-height:1.6!important}
  .community-inner>a{width:100%;justify-content:center;min-height:46px}

  .section{padding-block:58px}
  .section-heading h2{font-size:30px}
  .plans{margin-top:30px}
  .plan{border-radius:18px;padding:20px}
  .guide-layout{gap:28px}
  .steps article{padding:17px 14px;gap:13px}
  .steps b{width:38px;height:38px;flex-basis:38px;border-radius:11px}
  .trial-banner{margin-inline:14px;width:auto;padding:28px 20px}
  .trial-banner h2{font-size:25px}

  footer{margin-top:0}
  .footer-inner{padding:28px 0;min-height:auto;gap:20px}
  .footer-links{gap:12px 18px}
  .footer-links a,.footer-links button{font-size:12px}
  .dialog{max-height:calc(100dvh - 24px);overflow:auto;padding:22px 17px;border-radius:18px}
}

@media(max-width:390px){
  .shell{width:calc(100% - 22px)}
  .brand-copy b{font-size:13px}
  .nav>.button,.nav>button{font-size:10px;padding:8px 9px}
  .wending-login-cta{font-size:10px!important;padding:8px 9px!important}
  .redeem-copy h1{font-size:33px}
  .redeem-quick-links{grid-template-columns:1fr}
  .redeem-quick-links a:last-child{grid-column:auto}
  .compat-tools{grid-template-columns:1fr 1fr!important}
}

/* UX v4: keep primary navigation usable on touch devices instead of hiding it. */
@media(max-width:980px){
  html{scroll-padding-top:126px}
  .nav-wrap{position:sticky;top:0;z-index:65;box-shadow:0 1px 0 rgba(17,63,54,.05)}
  .nav{height:auto;min-height:64px;display:flex;flex-wrap:wrap;align-items:center;padding-top:8px;padding-bottom:0}
  .nav>.brand{min-height:46px}
  .nav>.button,.nav>button,.wending-login-cta{min-height:42px;display:inline-flex;align-items:center;justify-content:center}
  .nav nav{order:3;display:flex!important;width:calc(100% + 40px);margin:0 -20px;padding:7px 20px 9px;gap:5px;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;border-top:1px solid rgba(219,232,228,.75);background:rgba(250,253,252,.98)}
  .nav nav::-webkit-scrollbar{display:none}
  .nav nav a{flex:0 0 auto;min-height:38px;display:inline-flex;align-items:center;padding:0 11px;border-radius:10px;font-size:12px;white-space:nowrap;color:#52635f}
  .nav nav a[aria-current="page"]{background:#eaf5f2;color:var(--brand-dark)}
  .nav nav a[aria-current="page"]::after{display:none}
  .nav nav .wending-locale-switcher{flex:0 0 auto;margin-left:3px;align-self:center}
  .nav nav .wending-locale-switcher button{min-height:34px!important;padding:0 9px!important}
  .section-heading.center{max-width:720px;margin-inline:auto}
  .plans{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}

@media(max-width:680px){
  html{scroll-padding-top:118px}
  body{overflow-x:hidden}
  button,a,input,textarea,select{touch-action:manipulation}
  input,textarea,select{font-size:16px!important}
  .shell{width:calc(100% - 24px)}
  .nav{padding-top:6px}
  .nav>.brand{max-width:calc(100% - 112px)}
  .nav>.button,.wending-login-cta{min-height:40px!important;padding:0 11px!important;font-size:11px!important}
  .nav nav{width:calc(100% + 24px);margin-inline:-12px;padding-inline:12px}
  .nav nav a{min-height:40px;font-size:12px;padding-inline:12px}
  .section{padding-block:44px}
  .section-heading{margin-bottom:26px}
  .section-heading h1,.section-heading h2{font-size:clamp(28px,9vw,36px)!important;line-height:1.12!important;letter-spacing:-.035em!important}
  .section-heading p{font-size:14px!important;line-height:1.72!important}
  .plans{grid-template-columns:1fr!important;gap:12px!important;margin-top:24px!important}
  .plan{min-height:0!important;padding:20px 18px!important}
  .button,.btn,.redeem-input button,form button[type="submit"]{min-height:44px}
  .modal{padding:10px!important;align-items:flex-end!important}
  .dialog{width:100%!important;max-width:none!important;max-height:min(88dvh,760px)!important;border-radius:20px 20px 14px 14px!important;padding:22px 16px max(20px,env(safe-area-inset-bottom))!important}
  .footer-inner{align-items:flex-start!important}
  .footer-links{width:100%;display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px!important}
  .footer-links a,.footer-links button{min-height:40px;display:flex;align-items:center;padding:7px 9px;border-radius:9px;background:#f5f8f7;text-align:left}
  .redeem-card{scroll-margin-top:122px}
  #redeemCode{font-size:16px!important;min-height:48px}
}

@media(max-width:390px){
  .nav>.brand{max-width:calc(100% - 98px)}
  .brand-copy b{overflow:hidden;text-overflow:ellipsis}
  .footer-links{grid-template-columns:1fr}
  .redeem-card-head{align-items:flex-start;gap:8px}
}
