/* Fonely login portrait v4 — dedicated card, no text overlap */
@media(min-width:1021px){
  .fe-brand-side{
    position:relative!important;
    isolation:isolate!important;
    overflow:hidden!important;
    padding-right:42px!important
  }

  /* disable previous pseudo-image treatment */
  .fe-brand-side:before{
    content:""!important;
    position:absolute!important;
    z-index:0!important;
    width:320px!important;
    height:320px!important;
    right:-150px!important;
    top:-170px!important;
    border-radius:50%!important;
    background:rgba(218,145,115,.09)!important;
    opacity:1!important;
    filter:none!important;
    -webkit-mask-image:none!important;
    mask-image:none!important;
    pointer-events:none!important
  }
  .fe-brand-side:after{
    content:""!important;
    position:absolute!important;
    z-index:0!important;
    width:220px!important;
    height:220px!important;
    left:-120px!important;
    bottom:-120px!important;
    border-radius:50%!important;
    border:1px solid rgba(255,255,255,.07)!important;
    background:transparent!important;
    pointer-events:none!important
  }

  .fe-brand-top{
    position:relative!important;
    z-index:4!important;
    width:100%!important
  }

  .fe-hero{
    position:relative!important;
    z-index:3!important;
    width:56%!important;
    max-width:525px!important;
    margin-top:62px!important
  }

  .fe-hero h1{
    max-width:510px!important;
    font-size:clamp(44px,3.8vw,57px)!important;
    line-height:.96!important
  }

  .fe-hero>p{
    max-width:490px!important
  }

  .fe-benefits{
    width:100%!important;
    max-width:500px!important;
    margin-top:28px!important
  }

  .fe-benefits>div{
    padding:11px 0!important
  }

  .fe-suite{
    width:100%!important;
    max-width:500px!important;
    margin-top:16px!important
  }

  .fe-brand-note{
    position:relative!important;
    z-index:3!important;
    width:56%!important;
    max-width:500px!important
  }

  /* portrait is now a deliberate premium card */
  .fe-photo-stage{
    position:absolute!important;
    z-index:2!important;
    top:132px!important;
    right:34px!important;
    bottom:34px!important;
    width:35%!important;
    min-width:245px!important;
    overflow:hidden!important;
    border:1px solid rgba(255,255,255,.10)!important;
    border-radius:26px!important;
    background:#25262b!important;
    box-shadow:
      0 30px 60px rgba(13,7,5,.30),
      inset 0 1px 0 rgba(255,255,255,.05)!important
  }

  .fe-photo-stage:before{
    content:""!important;
    position:absolute!important;
    z-index:2!important;
    inset:0!important;
    background:
      linear-gradient(180deg,transparent 52%,rgba(22,15,12,.08) 68%,rgba(22,15,12,.74) 100%),
      linear-gradient(90deg,rgba(37,27,23,.22),transparent 32%)!important;
    pointer-events:none!important
  }

  .fe-photo-stage img{
    display:block!important;
    width:100%!important;
    height:100%!important;
    object-fit:cover!important;
    object-position:center top!important;
    filter:saturate(.92) contrast(1.01)!important
  }

  .fe-photo-caption{
    position:absolute!important;
    z-index:3!important;
    left:18px!important;
    right:18px!important;
    bottom:17px!important;
    padding:13px 14px!important;
    border:1px solid rgba(255,255,255,.12)!important;
    border-radius:14px!important;
    background:rgba(34,24,20,.58)!important;
    backdrop-filter:blur(12px)!important;
    -webkit-backdrop-filter:blur(12px)!important;
    box-shadow:0 10px 28px rgba(12,6,4,.18)!important
  }

  .fe-photo-caption small{
    display:block!important;
    margin-bottom:4px!important;
    color:#e6ad95!important;
    font-size:6px!important;
    font-weight:900!important;
    letter-spacing:.16em!important
  }

  .fe-photo-caption b{
    display:block!important;
    color:#fff8f4!important;
    font-size:10px!important;
    line-height:1.35!important
  }
}

@media(min-width:1021px) and (max-width:1280px){
  .fe-brand-side{padding-right:30px!important}
  .fe-hero{width:59%!important}
  .fe-photo-stage{
    right:24px!important;
    width:32%!important;
    min-width:220px!important
  }
  .fe-suite{display:none!important}
  .fe-hero h1{font-size:clamp(41px,3.7vw,52px)!important}
}

@media(max-width:1020px){
  .fe-photo-stage{display:none!important}
}


/* v5 — larger login composition and portrait shifted right */
@media(min-width:1021px){
  .fe-frame{
    width:min(96vw,1580px)!important;
    max-width:1580px!important;
    min-height:min(92vh,920px)!important;
    grid-template-columns:minmax(0,1.16fr) minmax(500px,.84fr)!important;
    border-radius:30px!important
  }

  .fe-brand-side{
    padding-left:54px!important;
    padding-right:26px!important
  }

  .fe-brand-top{
    padding-top:6px!important
  }

  .fe-brand-top .fe-logo{
    width:205px!important;
    max-width:205px!important
  }

  .fe-hero{
    width:55%!important;
    max-width:540px!important;
    margin-top:66px!important
  }

  .fe-hero h1{
    font-size:clamp(48px,4.15vw,64px)!important
  }

  .fe-photo-stage{
    top:112px!important;
    right:-18px!important;
    bottom:24px!important;
    width:39%!important;
    min-width:300px!important;
    border-radius:28px 0 0 28px!important;
    border-right:0!important;
    background:#29292e!important
  }

  .fe-photo-stage img{
    object-position:54% top!important
  }

  .fe-photo-caption{
    left:22px!important;
    right:26px!important;
    bottom:20px!important
  }

  .fe-auth-side{
    padding:32px 34px!important
  }

  .fe-card{
    width:min(100%,620px)!important;
    max-width:620px!important;
    padding:46px 50px 36px!important;
    border-radius:28px!important
  }

  .fe-auth-brand img{
    width:176px!important;
    max-width:176px!important
  }

  .fe-card-head h2{
    font-size:34px!important
  }

  .fe-login-summary{
    padding:17px 18px!important;
    border-radius:15px!important
  }

  .fe-google{
    min-height:60px!important;
    border-radius:15px!important
  }

  .fe-tabs{
    min-height:62px!important;
    border-radius:15px!important
  }

  .fe-tabs button{
    min-height:50px!important
  }

  .fe-field input{
    min-height:60px!important;
    border-radius:14px!important;
    font-size:13px!important
  }

  .fe-primary{
    min-height:58px!important;
    border-radius:14px!important
  }
}

@media(min-width:1021px) and (max-width:1280px){
  .fe-frame{
    width:97vw!important;
    grid-template-columns:minmax(0,1.08fr) minmax(450px,.92fr)!important
  }
  .fe-brand-side{padding-left:38px!important}
  .fe-photo-stage{
    right:-12px!important;
    width:37%!important;
    min-width:245px!important
  }
  .fe-card{padding:38px 36px 30px!important}
}


/* v6 — transparent Nath portrait integrated directly into brown panel */
@media(min-width:1021px){
  .fe-photo-stage{
    top:112px!important;
    right:-12px!important;
    bottom:0!important;
    width:40%!important;
    min-width:300px!important;
    overflow:visible!important;
    border:0!important;
    border-radius:0!important;
    background:transparent!important;
    box-shadow:none!important;
    pointer-events:none!important
  }
  .fe-photo-stage:before{display:none!important}
  .fe-photo-stage img{
    position:absolute!important;
    right:0!important;
    bottom:0!important;
    width:100%!important;
    height:100%!important;
    object-fit:contain!important;
    object-position:right bottom!important;
    filter:drop-shadow(-16px 20px 28px rgba(18,10,7,.18))!important
  }
  .fe-photo-caption{display:none!important}
}
@media(min-width:1021px) and (max-width:1280px){
  .fe-photo-stage{right:-8px!important;width:37%!important;min-width:250px!important}
}


/* v7 — Nath larger and better balanced */
@media(min-width:1021px){
  .fe-photo-stage{
    top:88px!important;
    right:-28px!important;
    bottom:-10px!important;
    width:47%!important;
    min-width:370px!important
  }

  .fe-photo-stage img{
    width:110%!important;
    height:110%!important;
    right:-6%!important;
    bottom:-3%!important;
    object-fit:contain!important;
    object-position:right bottom!important
  }

  .fe-hero{
    width:51%!important;
    max-width:500px!important
  }
}

@media(min-width:1021px) and (max-width:1280px){
  .fe-photo-stage{
    top:100px!important;
    right:-22px!important;
    width:43%!important;
    min-width:305px!important
  }

  .fe-photo-stage img{
    width:106%!important;
    height:106%!important
  }

  .fe-hero{width:54%!important}
}


/* v8 — mobile keeps the same Fonely identity as desktop */
@media(max-width:1020px){
  .fe-frame{
    width:min(94vw,620px)!important;
    min-height:auto!important;
    display:flex!important;
    flex-direction:column!important;
    overflow:hidden!important;
    border-radius:26px!important
  }
  .fe-brand-side{
    display:block!important;
    position:relative!important;
    min-height:285px!important;
    padding:28px 28px 0!important;
    overflow:hidden!important
  }
  .fe-brand-top{
    position:relative!important;
    z-index:4!important;
    display:flex!important
  }
  .fe-brand-top .fe-logo{
    width:165px!important;
    max-width:48%!important
  }
  .fe-brand-top>span{display:none!important}
  .fe-hero{
    position:relative!important;
    z-index:3!important;
    width:58%!important;
    max-width:330px!important;
    margin-top:38px!important
  }
  .fe-hero .fe-eyebrow{font-size:7px!important}
  .fe-hero h1{
    max-width:310px!important;
    font-size:clamp(31px,7vw,42px)!important;
    line-height:.96!important
  }
  .fe-hero>p,
  .fe-benefits,
  .fe-suite,
  .fe-brand-note{display:none!important}
  .fe-photo-stage{
    display:block!important;
    position:absolute!important;
    z-index:2!important;
    top:34px!important;
    right:-30px!important;
    bottom:-8px!important;
    width:52%!important;
    min-width:210px!important;
    overflow:visible!important;
    border:0!important;
    background:transparent!important;
    box-shadow:none!important;
    pointer-events:none!important
  }
  .fe-photo-stage:before,
  .fe-photo-caption{display:none!important}
  .fe-photo-stage img{
    position:absolute!important;
    right:0!important;
    bottom:0!important;
    width:108%!important;
    height:108%!important;
    object-fit:contain!important;
    object-position:right bottom!important;
    filter:drop-shadow(-10px 12px 18px rgba(18,10,7,.15))!important
  }
  .fe-auth-side{
    padding:18px!important;
    background:#f8f4f1!important
  }
  .fe-card{
    width:100%!important;
    max-width:none!important;
    padding:28px 24px 22px!important;
    border-radius:22px!important
  }
}
@media(max-width:560px){
  .fe-frame{width:100%!important;min-height:100dvh!important;border-radius:0!important}
  .fe-brand-side{min-height:250px!important;padding:22px 20px 0!important}
  .fe-brand-top .fe-logo{width:145px!important}
  .fe-hero{width:59%!important;margin-top:34px!important}
  .fe-hero h1{font-size:clamp(29px,9vw,38px)!important}
  .fe-photo-stage{right:-34px!important;top:32px!important;width:55%!important;min-width:190px!important}
  .fe-auth-side{padding:12px!important}
  .fe-card{padding:25px 20px 20px!important;border-radius:20px!important}
}


/* v9 — compact login panels */
@media(min-width:1021px){
  .fe-frame{
    width:min(90vw,1420px)!important;
    max-width:1420px!important;
    min-height:min(86vh,820px)!important;
    grid-template-columns:minmax(0,1.12fr) minmax(460px,.88fr)!important;
    border-radius:28px!important
  }

  .fe-brand-side{
    padding-left:46px!important;
    padding-right:24px!important
  }

  .fe-hero{
    margin-top:54px!important;
    max-width:490px!important
  }

  .fe-hero h1{
    font-size:clamp(44px,3.7vw,58px)!important
  }

  .fe-auth-side{
    padding:24px 26px!important
  }

  .fe-card{
    width:min(100%,560px)!important;
    max-width:560px!important;
    padding:34px 36px 28px!important;
    border-radius:24px!important
  }

  .fe-card-head h2{
    font-size:30px!important
  }

  .fe-login-summary{
    padding:14px 15px!important;
    border-radius:13px!important
  }

  .fe-google{
    min-height:54px!important;
    border-radius:13px!important
  }

  .fe-tabs{
    min-height:56px!important;
    border-radius:13px!important
  }

  .fe-tabs button{
    min-height:46px!important
  }

  .fe-field input{
    min-height:54px!important;
    border-radius:12px!important
  }

  .fe-primary{
    min-height:52px!important;
    border-radius:12px!important
  }
}

@media(min-width:1021px) and (max-width:1280px){
  .fe-frame{
    width:94vw!important;
    max-width:1180px!important;
    min-height:min(88vh,760px)!important;
    grid-template-columns:minmax(0,1.06fr) minmax(420px,.94fr)!important
  }

  .fe-card{
    max-width:520px!important;
    padding:30px 30px 24px!important
  }
}


/* v10 — softer warm beige hero */
.fe-brand-side{
  background:
    radial-gradient(circle at 88% 10%,rgba(240,145,106,.16),transparent 27%),
    linear-gradient(145deg,#efe3d9 0%,#e6d3c5 58%,#dbc0af 100%)!important;
  color:#3a241c!important;
}

.fe-brand-side:before,
.fe-brand-side:after{
  opacity:.28!important;
}

.fe-brand-top>span,
.fe-hero .fe-eyebrow,
.fe-suite-title,
.fe-brand-note{
  color:#875747!important;
}

.fe-hero h1{
  color:#3b271f!important;
}

.fe-hero h1 em,
.fe-hero h1 strong{
  color:#c87152!important;
}

.fe-hero>p{
  color:#684d42!important;
}

.fe-benefit,
.fe-benefits>div,
.fe-suite,
.fe-brand-note{
  border-color:rgba(83,52,42,.14)!important;
}

.fe-benefit b,
.fe-benefits b,
.fe-suite b{
  color:#3c281f!important;
}

.fe-benefit p,
.fe-benefits p,
.fe-suite span{
  color:#74594e!important;
}

.fe-benefit i,
.fe-benefits i{
  background:rgba(111,72,57,.10)!important;
  color:#8a5745!important;
  border-color:rgba(102,66,52,.10)!important;
}

.fe-photo-stage img{
  filter:drop-shadow(-12px 18px 24px rgba(72,45,35,.14))!important;
}

@media(max-width:1020px){
  .fe-brand-side{
    background:
      radial-gradient(circle at 88% 5%,rgba(240,145,106,.16),transparent 32%),
      linear-gradient(155deg,#efe4db 0%,#e2cdbf 100%)!important;
  }
}