/* Brother USB public Home — compact layout v1 (2026-10-11)
   Final presentation layer only. It intentionally does not alter payments,
   authentication, chat, API calls or the dynamic Home document. */

.brother-home{
  --home-shell:1280px;
  --home-gap:clamp(16px,2vw,28px);
  --home-radius:16px;
}

/* The old announcement row repeated the first four navigation links. */
.brother-home .brother-top{display:none!important}
.brother-home .brother-wrap{
  width:min(var(--home-shell),calc(100% - 36px))!important;
  max-width:var(--home-shell)!important;
}

/* One compact, predictable header. */
.brother-home .brother-nav{
  top:0!important;
  z-index:100!important;
  min-height:68px!important;
  border-bottom:1px solid rgba(160,192,214,.48)!important;
  box-shadow:0 8px 24px rgba(2,24,45,.10)!important;
}
.brother-home .brother-nav-row{
  display:grid!important;
  grid-template-columns:minmax(176px,214px) minmax(0,1fr)!important;
  align-items:center!important;
  gap:16px!important;
  min-height:68px!important;
  padding:7px 0!important;
}
.brother-home .brother-brand{gap:9px!important;min-width:0!important}
.brother-home .brother-logo{width:44px!important;height:44px!important;flex:0 0 44px!important}
.brother-home .brother-brand small{font-size:.62rem!important;letter-spacing:.13em!important}
.brother-home .brother-brand strong{font-size:1.02rem!important;white-space:nowrap!important}
.brother-home .brother-menu-toggle{display:none}
.brother-home .brother-menu{
  display:flex!important;
  align-items:center!important;
  justify-content:flex-end!important;
  min-width:0!important;
  gap:8px!important;
  flex-wrap:nowrap!important;
}
.brother-home .brother-menu-links,
.brother-home .brother-menu-actions{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  min-width:0;
  gap:5px;
  flex-wrap:nowrap;
}
.brother-home .brother-menu-actions{gap:7px;padding-left:7px;border-left:1px solid #dbe6ee}
.brother-home .brother-menu .brother-link{
  min-height:38px!important;
  padding:0 8px!important;
  gap:5px!important;
  border-radius:9px!important;
  font-size:.78rem!important;
  white-space:nowrap!important;
}
.brother-home .brother-menu .brother-link i{font-size:.86rem!important}
.brother-home .brother-menu .brother-btn{
  width:auto!important;
  min-height:40px!important;
  padding:0 12px!important;
  border-radius:10px!important;
  font-size:.76rem!important;
  white-space:nowrap!important;
  box-shadow:0 6px 15px rgba(15,42,72,.11)!important;
}
.brother-home .brother-menu .brother-reseller-top{padding:0 12px!important;gap:7px!important}
.brother-home .brother-menu .brother-reseller-top>i{width:23px!important;height:23px!important;border-radius:7px!important}
.brother-home .brother-reseller-top .brother-reseller-notice{
  top:-7px!important;
  right:-5px!important;
  width:18px!important;
  height:18px!important;
  min-height:18px!important;
  padding:0!important;
  justify-content:center!important;
  overflow:hidden!important;
  border-radius:50%!important;
  font-size:0!important;
}
.brother-home .brother-reseller-top .brother-reseller-notice i{margin:0!important;font-size:.58rem!important}

/* The current public renderer always uses .home-sections-public/.hs-*. */
.brother-home .home-sections-public .hs-wrap{
  width:min(1180px,calc(100% - 40px))!important;
  padding-top:clamp(42px,4.4vw,56px)!important;
  padding-bottom:clamp(42px,4.4vw,56px)!important;
}
.brother-home .home-sections-public .hs-section h1{
  font-size:clamp(3.2rem,5.35vw,4.75rem)!important;
  line-height:.98!important;
  letter-spacing:-.048em!important;
}
.brother-home .home-sections-public .hs-section h2{
  font-size:clamp(2rem,3.5vw,3.15rem)!important;
  line-height:1.04!important;
}
.brother-home .home-sections-public .hs-section> .hs-wrap>p{
  max-width:760px!important;
  margin-top:.75rem!important;
  font-size:1rem!important;
  line-height:1.55!important;
}
.brother-home .hs-hero-grid{
  grid-template-columns:minmax(0,1.08fr) minmax(380px,.92fr)!important;
  gap:clamp(28px,4vw,52px)!important;
}
.brother-home .hs-hero h1[data-edit-target="title"]{
  display:grid!important;
  grid-template-columns:auto minmax(0,1fr)!important;
  align-items:center!important;
  column-gap:14px!important;
  max-width:none!important;
  text-wrap:balance!important;
}
.brother-home .hs-title-mark{font-size:clamp(38px,4.2vw,54px)!important}
.brother-home .hs-hero .hs-lead{
  max-width:640px!important;
  margin:.7rem 0!important;
  font-size:clamp(1.08rem,1.8vw,1.38rem)!important;
  line-height:1.45!important;
}
.brother-home .hs-hero-media{
  width:100%!important;
  height:min(410px,32vw)!important;
  border-radius:22px!important;
}
.brother-home .hs-hero .hs-buttons{gap:10px!important;margin-top:1.35rem!important}
.brother-home .hs-hero .hs-buttons a{
  min-height:48px!important;
  padding:0 18px!important;
  border-radius:12px!important;
  font-size:.86rem!important;
}

/* More information per viewport, without removing any content. */
.brother-home .hs-mini-grid,
.brother-home .hs-card-grid{gap:12px!important;margin-top:1.35rem!important}
.brother-home .hs-mini-grid article,
.brother-home .hs-card-grid article{
  min-height:112px!important;
  gap:.48rem!important;
  padding:1.1rem!important;
  border-radius:16px!important;
}
.brother-home .hs-mini-grid i,
.brother-home .hs-card-grid i{font-size:1.65rem!important}
.brother-home .hs-buttons{gap:10px!important;margin-top:1.4rem!important}
.brother-home .hs-buttons a{min-height:46px!important;padding:.72rem 1.15rem!important;border-radius:11px!important}
.brother-home .hs-check-grid{gap:1.4rem!important}
.brother-home .hs-check-grid>i{font-size:3.35rem!important}
.brother-home #services .hs-product-showcase{
  min-height:410px!important;
  margin:1.55rem 0 1.3rem!important;
  border-radius:22px!important;
}
.brother-home #services .hs-showcase-stage{inset:22px 54px 40px!important}

/* Three balanced reseller cards on wide screens; 2/1 columns below. */
.brother-home #resellers .hs-reseller-grid{
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:14px!important;
  margin-top:1.5rem!important;
}
.brother-home #resellers .hs-partner{
  grid-template-columns:68px minmax(0,1fr)!important;
  align-items:start!important;
  gap:12px!important;
  min-height:100%!important;
  padding:1.05rem!important;
  border-radius:18px!important;
}
.brother-home #resellers .hs-partner-logo{width:68px!important;height:68px!important;border-radius:14px!important}
.brother-home #resellers .hs-partner strong{font-size:.98rem!important}
.brother-home #resellers .hs-partner p{margin:.25rem 0 .55rem!important;font-size:.82rem!important;line-height:1.4!important}
.brother-home #resellers .hs-partner-action{padding:.42rem .55rem!important;font-size:.66rem!important}
.brother-home #resellers .hs-buttons{margin-top:1.8rem!important}

/* Floating utilities remain available without taking over the Home. */
.brother-home .brother-custom-float{
  width:min(600px,calc(100vw - 36px))!important;
  filter:drop-shadow(0 24px 46px rgba(0,23,55,.26))!important;
}
.brother-home .brother-custom-float-card{
  height:min(560px,calc(100dvh - 36px))!important;
  max-height:78dvh!important;
  border-radius:20px!important;
}
.brother-home .brother-floating-chat{min-height:50px!important;padding:0 17px!important;border-radius:15px!important}

@media(max-width:1180px){
  .brother-home .brother-nav-row{grid-template-columns:minmax(165px,190px) minmax(0,1fr)!important}
  .brother-home .brother-menu-links .brother-link:nth-child(2),
  .brother-home .brother-menu-links .brother-link:nth-child(4){display:none!important}
  .brother-home .hs-hero-grid{grid-template-columns:minmax(0,1fr) minmax(340px,.9fr)!important}
  .brother-home #resellers .hs-reseller-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}

@media(max-width:900px){
  .brother-home .brother-wrap{width:min(100% - 28px,var(--home-shell))!important}
  .brother-home .brother-nav-row{
    grid-template-columns:minmax(0,1fr) auto!important;
    gap:10px!important;
    min-height:64px!important;
    padding:8px 0!important;
  }
  .brother-home .brother-brand{align-self:center!important}
  .brother-home .brother-menu-toggle{
    display:inline-flex!important;
    align-items:center;
    justify-content:center;
    gap:7px;
    min-width:46px;
    min-height:42px;
    padding:0 12px;
    border:1px solid #bfd4e3;
    border-radius:11px;
    background:#f7fbfe;
    color:#173f60;
    font:850 .77rem/1 Inter,Manrope,"Segoe UI",sans-serif;
    cursor:pointer;
  }
  .brother-home .brother-menu-toggle i{font-size:1.15rem}
  .brother-home .brother-menu{
    display:none!important;
    grid-column:1/-1!important;
    width:100%!important;
    padding:10px!important;
    border:1px solid #d6e3ec!important;
    border-radius:14px!important;
    background:rgba(248,252,255,.98)!important;
    box-shadow:0 16px 32px rgba(5,31,55,.13)!important;
  }
  .brother-home .brother-menu.is-open{display:grid!important;gap:10px!important}
  .brother-home .brother-menu-links{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:7px!important}
  .brother-home .brother-menu-actions{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:7px!important;padding:10px 0 0!important;border:0!important;border-top:1px solid #dbe6ee!important}
  .brother-home .brother-menu-links .brother-link:nth-child(2),
  .brother-home .brother-menu-links .brother-link:nth-child(4){display:inline-flex!important}
  .brother-home .brother-menu .brother-link,
  .brother-home .brother-menu .brother-btn{justify-content:center!important;width:100%!important}
  .brother-home .hs-hero-grid{grid-template-columns:1fr!important;gap:28px!important}
  .brother-home .hs-hero-media{height:min(390px,64vw)!important}
  .brother-home .hs-mini-grid,.brother-home .hs-card-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .brother-home .hs-check-grid{grid-template-columns:auto 1fr!important}
  .brother-home .hs-check-form{grid-column:1/-1!important}
}

@media(max-width:620px){
  .brother-home .brother-wrap{width:calc(100% - 22px)!important}
  .brother-home .brother-logo{width:40px!important;height:40px!important;flex-basis:40px!important}
  .brother-home .brother-brand strong{font-size:.94rem!important}
  .brother-home .brother-menu-toggle span{display:none}
  .brother-home .brother-menu-links{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .brother-home .brother-menu-actions{grid-template-columns:1fr!important}
  .brother-home .home-sections-public .hs-wrap{
    width:calc(100% - 28px)!important;
    padding-top:36px!important;
    padding-bottom:36px!important;
  }
  .brother-home .home-sections-public .hs-section h1{font-size:clamp(2.55rem,13vw,3.45rem)!important}
  .brother-home .home-sections-public .hs-section h2{font-size:clamp(1.8rem,8vw,2.35rem)!important}
  .brother-home .hs-hero h1[data-edit-target="title"]{column-gap:9px!important}
  .brother-home .hs-title-mark{font-size:36px!important}
  .brother-home .hs-hero-media{height:270px!important;border-radius:16px!important}
  .brother-home .hs-mini-grid,.brother-home .hs-card-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:9px!important}
  .brother-home .hs-mini-grid article,.brother-home .hs-card-grid article{min-height:102px!important;padding:.9rem!important}
  .brother-home #services .hs-product-showcase{min-height:370px!important;border-radius:18px!important}
  .brother-home #services .hs-showcase-stage{inset:20px 18px 40px!important}
  .brother-home #resellers .hs-reseller-grid{grid-template-columns:1fr!important}
  .brother-home .brother-custom-float{width:calc(100vw - 20px)!important}
  .brother-home .brother-custom-float-card{height:min(590px,74dvh)!important;max-height:74dvh!important;border-radius:17px!important}
  .brother-home .brother-floating-chat{
    left:auto!important;
    right:max(12px,env(safe-area-inset-right))!important;
    bottom:max(12px,env(safe-area-inset-bottom))!important;
    width:54px!important;
    min-width:54px!important;
    height:54px!important;
    min-height:54px!important;
    padding:0!important;
    border-radius:50%!important;
  }
  .brother-home .brother-floating-chat>span:last-child{display:none!important}
}

@media(max-width:390px){
  .brother-home .hs-mini-grid,.brother-home .hs-card-grid{grid-template-columns:1fr!important}
  .brother-home .brother-menu-links{grid-template-columns:1fr!important}
}

@media(prefers-reduced-motion:reduce){
  .brother-home .brother-menu,
  .brother-home .brother-menu-toggle{scroll-behavior:auto!important}
}