/* binly.org additions to the lavender Home (loaded after styles.css and refinements.css).
   1) the current green header, restyled only to sit on the lavender page  2) mobile menu button
   3) big-catalogs banner  4) per-language typography. Footer: /assets/footer-lav.css (site-wide). */

/* ---------- header: same markup, same green logo and green CTA as every other binly.org page ---------- */
.site-header{
  --green:#0b8f63;--green-hover:#096d4c;--ink:#291d38;--muted:#5f5369;--line:#e6dded;
  --t:200ms cubic-bezier(.2,.8,.2,1);
  --display:'Plus Jakarta Sans',-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --body:Manrope,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  position:sticky;top:0;z-index:100;font-family:var(--body);
  background:rgba(253,252,251,.88);
  backdrop-filter:saturate(180%) blur(14px);-webkit-backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid var(--line);
  transition:box-shadow var(--t),background var(--t);
}
.site-header.scrolled{box-shadow:0 6px 24px rgba(63,41,89,.09);background:rgba(253,252,251,.96)}
.site-header .header-inner{
  width:min(1200px,calc(100% - 96px));margin:0 auto;height:68px;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
}
.site-header .logo-mark{display:flex;align-items:center;gap:10px;flex-shrink:0}
.site-header .bn-logo{width:34px;height:34px;stroke:none;fill:none;transition:transform var(--t)}
.site-header .logo-mark:hover .bn-logo{transform:translateY(-1px) rotate(-3deg)}
.site-header .logo-name{font-family:var(--display);font-size:20px;font-weight:800;color:var(--ink);letter-spacing:-.02em}
.site-header .header-nav{display:flex;align-items:center;gap:6px;flex:1;justify-content:center}
.site-header .nav-link{position:relative;font-size:15px;font-weight:500;color:var(--muted);padding:8px 12px;transition:color var(--t);white-space:nowrap}
.site-header .nav-link::after{content:'';position:absolute;left:12px;right:12px;bottom:2px;height:2px;border-radius:2px;background:var(--green);transform:scaleX(0);transform-origin:0 50%;transition:transform var(--t)}
.site-header .nav-link:hover{color:var(--green)}
.site-header .nav-link:hover::after{transform:scaleX(1)}
.site-header .header-actions{display:flex;align-items:center;gap:10px;flex-shrink:0}
.site-header .btn{display:inline-flex;align-items:center;justify-content:center;padding:14px 26px;border-radius:12px;font-family:var(--body);font-size:16px;font-weight:600;letter-spacing:-.01em;cursor:pointer;border:1px solid transparent;white-space:nowrap;transition:background var(--t),transform var(--t),box-shadow var(--t)}
.site-header .btn-primary{background:var(--green);color:#fff;box-shadow:0 4px 14px rgba(11,143,99,.18)}
.site-header .btn-primary:hover{background:var(--green-hover);transform:translateY(-2px);box-shadow:0 8px 24px rgba(11,143,99,.28)}
.site-header .btn-sm{padding:10px 18px;font-size:15px;border-radius:10px}
.site-header .lang-btn{border-color:var(--line);background:rgba(255,255,255,.72)}
.site-header .lang-menu{border-color:var(--line);box-shadow:0 18px 48px rgba(63,41,89,.16),0 2px 8px rgba(63,41,89,.06)}
.site-header .lang-menu a:hover,.site-header .lang-menu a:focus-visible{background:#f1e9f8;color:#4b2d6b}

/* mobile menu: appears exactly when the in-page nav is hidden (lang-switcher.css hides it at 1040px, and at 1240px for the longer languages) */
.menu-button{display:none;flex-direction:column;gap:5px;justify-content:center;align-items:center;width:38px;height:38px;padding:0;border-radius:10px;border:1px solid #e3d6ee;background:#f2eaf8;flex-shrink:0}
.menu-button span{display:block;width:16px;height:2px;border-radius:2px;background:#6d4a8c;transition:transform .2s}
.menu-button[aria-expanded=true] span:first-child{transform:translateY(3.5px) rotate(45deg)}
.menu-button[aria-expanded=true] span:last-child{transform:translateY(-3.5px) rotate(-45deg)}
.menu-button:hover{background:#eadff4}
@media (max-width:1040px){.site-header .header-nav{display:none}.menu-button{display:inline-flex}}
@media (max-width:1240px){
  html:lang(de) .site-header .header-nav,html:lang(es) .site-header .header-nav,html:lang(fr) .site-header .header-nav,html:lang(pt) .site-header .header-nav,html:lang(it) .site-header .header-nav{display:none}
  html:lang(de) .menu-button,html:lang(es) .menu-button,html:lang(fr) .menu-button,html:lang(pt) .menu-button,html:lang(it) .menu-button{display:inline-flex}
}
.site-header .header-nav.is-open,html:lang(de) .site-header .header-nav.is-open,html:lang(es) .site-header .header-nav.is-open,html:lang(fr) .site-header .header-nav.is-open,html:lang(pt) .site-header .header-nav.is-open,html:lang(it) .site-header .header-nav.is-open{
  display:flex;position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:stretch;justify-content:flex-start;gap:0;
  padding:8px max(24px,calc((100% - 1200px) / 2)) 22px;background:#fdfcfb;
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  border-bottom:1px solid var(--line);box-shadow:0 20px 32px rgba(63,41,89,.12);
  max-height:calc(100vh - 68px);max-height:calc(100dvh - 68px);overflow:auto;
}
.site-header .header-nav.is-open .nav-link{padding:14px 4px;font-size:17px;border-bottom:1px solid #f0e9f5}
.site-header .header-nav.is-open .nav-link::after{display:none}

@media (max-width:1150px){.site-header .header-inner{width:calc(100% - 64px)}}
@media (max-width:640px){
  .site-header .header-inner{width:calc(100% - 32px);gap:8px}
  .site-header .bn-logo{width:30px;height:30px}
  .site-header .logo-mark{gap:7px}
  .site-header .logo-name{font-size:18px}
  .site-header .header-actions{gap:6px}
  .site-header .btn-sm{padding:9px 11px;font-size:13px;border-radius:9px}
  .site-header .lang-btn{width:34px;height:34px}
  .menu-button{width:36px;height:36px}
}
@media (max-width:360px){
  .site-header .header-inner{width:calc(100% - 24px)}
  .site-header .btn-sm{padding:9px 9px;font-size:12px}
  .site-header .logo-name{font-size:17px}
}

/* ---------- big catalogs banner ---------- */
.bigcat-banner{margin-top:65px}
.bigcat-banner + .migration-banner{margin-top:22px}
.bigcat-visual{flex-direction:column;align-items:stretch;gap:9px;min-width:178px}
.bigcat-visual i{display:block;position:relative;height:11px;border-radius:7px;background:#e4d8ee;overflow:hidden}
.bigcat-visual i::after{content:'';position:absolute;inset:0 auto 0 0;width:var(--w);border-radius:7px;background:linear-gradient(90deg,#b79bd0,#9a76c5)}
.migration-banner > div:nth-child(2){min-width:0;flex:1}

/* ---------- guides + faq ---------- */
.more-guides{margin-top:34px;padding-top:26px;border-top:1px solid #e9e0f0}
.more-guides-title{font-family:'Manrope',sans-serif;font-size:12px;font-weight:650;letter-spacing:1.5px;text-transform:uppercase;color:#7d5a99}
.more-guides-links{display:flex;flex-wrap:wrap;gap:10px 22px;margin-top:14px}
.more-guides-links a{font-size:15px;line-height:1.5;color:#6d5878;text-decoration:underline;text-decoration-color:#d9c7e8;text-underline-offset:4px;transition:color .2s,text-decoration-color .2s}
.more-guides-links a:hover{color:#6a43a0;text-decoration-color:#9a76c5}
.more-guides-note{margin-top:14px;font-size:14px;color:#7a6785}
html[lang="ja"] .more-guides-title{letter-spacing:.04em;text-transform:none}
.guide-links > a > div{min-width:0}
.faq{scroll-margin-top:100px}

/* ---------- per-language typography ---------- */
h1,h2,h3{overflow-wrap:break-word}
html:not([lang="en"]) h1,html:not([lang="en"]) h2,html:not([lang="en"]) h3{hyphens:auto;-webkit-hyphens:auto}
html:not([lang="en"]) .hero h1{font-size:clamp(38px,4.2vw,62px);letter-spacing:-2.4px}
html:not([lang="en"]) .eyebrow{overflow-wrap:anywhere}
html[lang="ja"]{font-family:'DM Sans','Hiragino Sans','Hiragino Kaku Gothic ProN','Yu Gothic UI','Yu Gothic','Meiryo',sans-serif}
html[lang="ja"] h1,html[lang="ja"] h2,html[lang="ja"] h3,html[lang="ja"] .brand,html[lang="ja"] .plan-price,html[lang="ja"] .play-caption,html[lang="ja"] .logo-name{font-family:'Manrope','Hiragino Sans','Hiragino Kaku Gothic ProN','Yu Gothic UI','Yu Gothic','Meiryo',sans-serif}
html[lang="ja"] body{word-break:auto-phrase;line-break:strict;overflow-wrap:break-word}
html[lang="ja"] h1,html[lang="ja"] h2,html[lang="ja"] h3,html[lang="ja"] summary{letter-spacing:0;word-break:auto-phrase;hyphens:manual}
html[lang="ja"] .hero h1{font-size:clamp(36px,4vw,58px);line-height:1.22}
html[lang="ja"] .eyebrow,html[lang="ja"] .guide-links small,html[lang="ja"] .tiny-label,html[lang="ja"] .popular{letter-spacing:.04em;text-transform:none}
html[lang="ja"] .section-top h2,html[lang="ja"] .center-heading h2,html[lang="ja"] .learn-section h2,html[lang="ja"] .closing h2{letter-spacing:0;line-height:1.3}
html[lang="ja"] .feature-card h3,html[lang="ja"] .migration-banner h3,html[lang="ja"] .faq h3{letter-spacing:0}
@media (max-width:640px){
  html:not([lang="en"]) .hero h1{font-size:clamp(34px,9.4vw,50px);letter-spacing:-1.6px}
  html[lang="ja"] .hero h1{font-size:clamp(32px,9vw,44px);letter-spacing:0}
}

/* narrow phones: never let a long word or a wide row create horizontal scroll */
.hero-copy,.section-top > *,.center-heading,.feature-card,.price-card,.faq details,.guide-links > a{min-width:0}
.price-card li,.feature-card p,.faq summary,.faq details > p,.guide-links > a > div{overflow-wrap:break-word}