.genealogy-viewport{max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
.genealogy-scroll-note{display:none}
.mobile-genealogy-launch{display:none}
.genealogy-full-page{margin:0;width:100%;height:100vh;min-width:0;overflow:hidden!important;background:#f2f7fb;color:#071a3d}
.genealogy-full-toolbar{position:relative;z-index:20;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:18px;width:100%;min-width:0;box-sizing:border-box;padding:14px 18px;border-bottom:1px solid #cadbe9;background:rgba(255,255,255,.94);box-shadow:0 8px 24px rgba(7,36,91,.08);backdrop-filter:blur(12px)}
.genealogy-full-toolbar>div strong,.genealogy-full-toolbar>div small{display:block}.genealogy-full-toolbar>div small{margin-top:2px;color:#687790;font-size:12px}.genealogy-full-toolbar button{padding:10px 15px;border:1px solid #ccdbe8;border-radius:11px;background:#fff;color:#0a437f;font:inherit;font-weight:850;cursor:pointer}
.genealogy-full-canvas{display:block;width:100vw!important;max-width:100vw!important;min-width:0!important;height:calc(100vh - 72px);min-height:0;box-sizing:border-box;padding:35px 35px 90px;overflow:auto!important;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;touch-action:pan-x pan-y;scrollbar-color:#0a66b7 #dce8f3;scrollbar-width:thin}
.genealogy-full-canvas::-webkit-scrollbar{width:10px;height:10px}.genealogy-full-canvas::-webkit-scrollbar-track{background:#dce8f3}.genealogy-full-canvas::-webkit-scrollbar-thumb{border:2px solid #dce8f3;border-radius:99px;background:linear-gradient(135deg,#0a43a3,#008b73)}
.genealogy-full-canvas .family-tree{width:max-content;min-width:calc(100vw - 70px);max-width:none;padding:10px 25px 40px}
.genealogy-full-canvas .family-level{width:max-content;min-width:100%}.genealogy-full-canvas .family-level>li{flex:0 0 auto}

@media (max-width:820px){
  html,body{max-width:100%;overflow-x:hidden}
  .app-main{margin-left:0!important;padding-bottom:82px!important;min-width:0}
  .page-wrap,.app-footer,.page-wrap:has(.helpdesk-shell),.page-wrap:has(.lists-hero){width:calc(100% - 20px)!important;max-width:none!important}
  .mobile-brand{display:block!important;padding:13px 10px!important}

  .sidebar{display:block!important;position:fixed!important;inset:auto 8px 8px!important;width:calc(100% - 16px)!important;height:66px!important;min-height:0!important;padding:5px!important;border-radius:18px!important;overflow:hidden!important;z-index:100!important}
  .sidebar>.brand,.sidebar>.sidebar-badge,.sidebar>.sidebar-plan,.sidebar>.sidebar-user,.sidebar .side-nav-label{display:none!important}
  .sidebar .side-nav{display:flex!important;grid-template-columns:none!important;flex-flow:row nowrap!important;align-items:center!important;gap:3px!important;width:100%!important;height:56px!important;margin:0!important;padding:0!important;overflow-x:auto!important;overflow-y:hidden!important;scrollbar-width:none!important;-webkit-overflow-scrolling:touch!important}
  .sidebar .side-nav::-webkit-scrollbar{display:none!important}
  .sidebar .side-nav a{display:flex!important;min-width:52px!important;width:52px!important;height:54px!important;flex:0 0 52px!important;align-items:center!important;justify-content:center!important;gap:0!important;margin:0!important;padding:7px 4px!important;border-radius:13px!important;transform:none!important}
  .sidebar .side-nav a span,.sidebar .side-nav a i{display:none!important}
  .sidebar .side-nav a b{width:auto!important;margin:0!important;font-size:19px!important;line-height:1!important}

  .learning-panel{display:block!important;margin:0 0 16px!important;padding:15px!important;border-radius:17px!important}
  .learning-panel>div:first-child{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:11px}
  .learning-panel h3{margin:0!important;font-size:18px!important;white-space:nowrap}
  .learning-label{font-size:8px!important}
  .learning-steps{display:flex!important;grid-template-columns:none!important;gap:8px!important;overflow-x:auto!important;scroll-snap-type:x proximity;padding-bottom:2px;scrollbar-width:none}
  .learning-steps::-webkit-scrollbar{display:none}
  .learning-steps>div{min-width:210px!important;flex:0 0 210px!important;padding:10px!important;scroll-snap-align:start}
  .learning-steps b{width:26px!important;height:26px!important}
  .learning-steps strong{font-size:14px}.learning-steps small{font-size:11px!important;line-height:1.35}

  .pricing-heading{margin-top:5px!important}.pricing-heading h1{font-size:40px!important;line-height:1.02!important}.pricing-heading .lead{font-size:16px!important;line-height:1.5!important}
  .pricing-membership-grid{grid-template-columns:1fr!important}.pricing-membership-grid .pricing{padding:22px 18px!important}
  .topbar .nav{height:62px}.navlinks a[href="/login"]{display:inline-flex!important}

  .genealogy-card{overflow:hidden!important;padding-left:14px!important;padding-right:14px!important}
  .genealogy-card .genealogy-viewport{display:none!important}
  .mobile-genealogy-launch{display:flex!important;width:100%;min-height:52px;align-items:center;justify-content:center;margin-top:4px}
  .genealogy-full-toolbar{padding:10px 12px;gap:12px}.genealogy-full-toolbar .brand{font-size:18px}.genealogy-full-toolbar>div strong{font-size:13px}.genealogy-full-toolbar>div small{font-size:10px}.genealogy-full-toolbar button{padding:8px 10px;font-size:12px}
  .genealogy-full-canvas{padding:28px 22px 100px}.genealogy-full-canvas .family-tree{min-width:760px;padding-left:18px;padding-right:18px}
}
@media (min-width:651px) and (max-width:820px){
  .genealogy-card .genealogy-viewport{display:block!important}
  .mobile-genealogy-launch{display:none!important}
}
@media (max-width:430px){
  .page-wrap,.app-footer,.page-wrap:has(.helpdesk-shell),.page-wrap:has(.lists-hero){width:calc(100% - 16px)!important}
  .mobile-brand{padding-left:8px!important}
  .sidebar{inset:auto 5px 5px!important;width:calc(100% - 10px)!important}
  .sidebar .side-nav a{min-width:49px!important;width:49px!important;flex-basis:49px!important}
  .learning-steps>div{min-width:190px!important;flex-basis:190px!important}
  .pricing-heading h1{font-size:36px!important}
}