/* Digital Hub V152
   1. The opening page and the sign-in page are separate views (no scrolling from one to the other)
   2. The opening page fits one screen without scrolling — phones, tablets, laptops, large screens,
      portrait and landscape — by scaling with the viewport and dropping secondary lines on short screens
   3. Hub Manager sidebar: no "Management" heading; one even rhythm, expanded and collapsed */

/* ── 1 · views ── */
:is(html,#v152) .x152-landing[hidden]{display:none!important}
:is(html,#v152) body.x152-landing-on #loginView{display:none!important}
:is(html,#v152) body.x152-landing-on{overflow:hidden}

/* ── 2 · opening page: one screen ── */
:is(html,#v152) .x152-landing{
  --pad:clamp(14px,3.2vw,48px);--gap:clamp(10px,2.2vh,28px);
  position:fixed;inset:0;z-index:30;display:grid!important;grid-template-rows:auto minmax(0,1fr) auto auto;gap:var(--gap);
  min-height:0!important;height:100dvh;box-sizing:border-box;padding:0 var(--pad) clamp(10px,1.6vh,18px)!important;overflow:hidden;
  background:radial-gradient(1100px 520px at 88% -8%,var(--h7-blue-tint),transparent 62%),radial-gradient(700px 420px at -10% 110%,var(--h7-blue-tint),transparent 60%),var(--h7-soft)!important;color:var(--h7-ink)}
.x152-landing>*{width:100%;max-width:1200px;margin:0 auto;box-sizing:border-box;min-width:0}
.x152-top{display:flex;align-items:center;gap:10px;height:clamp(52px,8vh,68px);border-bottom:1px solid var(--h7-line)}
.x152-top .x149-logo{height:clamp(24px,3.6vh,30px);width:auto}
.x152-name{padding-left:12px;border-left:1px solid var(--h7-line);font-size:14px;font-weight:760;color:var(--h7-ink);white-space:nowrap}
.x152-grow{flex:1}
.x152-nav{display:flex;gap:8px}
.x152-nav .btn{height:38px;padding:0 16px;white-space:nowrap}
.x152-main{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(20px,4vw,64px);align-items:center;min-height:0}
.x152-intro{display:grid;gap:clamp(8px,1.6vh,18px);align-content:center;min-width:0}
.x152-intro h1{margin:0;font-size:clamp(26px,min(4.3vw,6.4vh),56px);line-height:1.06;letter-spacing:-.02em;font-weight:800;color:var(--h7-ink);outline:none}
.x152-intro .x149-kicker{justify-self:start}
.x152-lead{margin:0;font-size:clamp(14px,min(1.35vw,2.2vh),18px);line-height:1.55;color:var(--h7-ink-2);max-width:56ch}
.x152-cta{display:flex;gap:10px;flex-wrap:wrap;margin-top:clamp(2px,.8vh,8px)}
.x152-cta .btn{height:clamp(42px,6vh,50px)!important;padding:0 clamp(18px,2vw,28px)!important;font-size:clamp(14.5px,1.9vh,16px)!important;border-radius:14px!important}
.x152-assure{display:flex;align-items:center;gap:8px;margin:0;font-size:13.5px;color:var(--h7-muted)}
.x152-assure svg{width:17px;height:17px;flex:0 0 auto;color:var(--h7-green)}
.x152-side{display:grid;gap:clamp(10px,1.8vh,16px);align-content:center;min-height:0;min-width:0}
.x152-card{border-radius:18px;border:1px solid var(--h7-line);background:var(--h7-panel);box-shadow:var(--h7-shadow);padding:clamp(12px,1.8vh,18px) clamp(14px,1.6vw,20px);min-width:0}
.x152-card h2{margin:0;font-size:14.5px;font-weight:760;color:var(--h7-ink)}
.x152-apps header{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:clamp(6px,1vh,10px)}
.x152-app-list{list-style:none;margin:0;padding:0;display:grid;gap:clamp(4px,.8vh,8px)}
.x152-app-list li{display:grid;grid-template-columns:36px minmax(0,1fr);gap:12px;align-items:center;padding:clamp(5px,.8vh,8px) 6px;border-radius:12px}
.x152-app-list li+li{border-top:1px solid var(--h7-line-soft)}
.x152-app-list .x150-app-ic{width:36px;height:36px;border-radius:10px}
.x152-app-list .x150-app-ic img{width:30px;height:30px}
.x152-app-list .x150-app-ic .a149-tile{width:36px!important;height:36px!important;font-size:13px!important}
.x152-app-list strong{display:block;font-size:14.5px;color:var(--h7-ink)}
.x152-app-list span{display:block;font-size:13px;line-height:1.4;color:var(--h7-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.x152-app-list .x152-more,.x152-app-list .x150-app-none{grid-template-columns:minmax(0,1fr)}
.x152-how ol{list-style:none;margin:clamp(8px,1.2vh,12px) 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;position:relative}
.x152-how li{display:grid;grid-template-columns:28px minmax(0,1fr);column-gap:10px;row-gap:2px;align-items:start}
.x152-how li>b{grid-row:span 2;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;font-size:13px;background:var(--h7-blue);color:#fff}
html[data-theme="dark"] .x152-how li>b{color:#06121f}
.x152-how strong{font-size:13.5px;color:var(--h7-ink);line-height:1.3}
.x152-how span{font-size:12.5px;line-height:1.4;color:var(--h7-muted)}
.x152-trust{list-style:none;margin:0 auto!important;padding:clamp(10px,1.6vh,14px) clamp(12px,1.6vw,18px);display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(8px,1.5vw,20px);
  border-radius:16px;border:1px solid var(--h7-line);background:color-mix(in srgb,var(--h7-panel) 82%,transparent)}
.x152-trust li{display:grid;grid-template-columns:32px minmax(0,1fr);gap:10px;align-items:center;min-width:0}
.x152-trust li>svg{width:32px;height:32px;padding:7px;box-sizing:border-box;border-radius:10px;background:var(--h7-blue-tint);color:var(--h7-blue)}
.x152-trust strong{display:block;font-size:13.5px;color:var(--h7-ink)}
.x152-trust span{display:block;font-size:12.5px;line-height:1.35;color:var(--h7-muted)}
.x152-foot{display:flex;justify-content:space-between;gap:6px 16px;flex-wrap:wrap;font-size:12.5px;color:var(--h7-muted)}

/* tablets (portrait) and phones: one column */
@media (max-width:900px){
  :is(html,#v152) .x152-landing{grid-template-rows:auto auto auto auto auto;align-content:space-between}
  .x152-main{display:contents}
  .x152-intro{align-content:start}
  .x152-side{align-content:start;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .x152-trust{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:640px){
  :is(html,#v152) .x152-landing{--gap:clamp(8px,1.6vh,16px)}
  .x152-name,.x152-nav-signin{display:none}
  .x152-nav .btn{height:36px;padding:0 13px;font-size:13.5px}
  .x152-intro h1{font-size:clamp(24px,min(7.4vw,4.6vh),36px)}
  .x152-lead{font-size:14px}
  .x152-cta .btn{flex:1 1 0;padding:0 12px!important}
  .x152-assure{font-size:12.5px}
  .x152-side{grid-template-columns:minmax(0,1fr)}
  /* apps as compact chips */
  .x152-app-list{display:flex;flex-wrap:wrap;gap:6px}
  .x152-app-list li{display:inline-flex;gap:7px;padding:5px 10px 5px 5px;border:1px solid var(--h7-line)!important;border-radius:999px;background:var(--h7-soft)}
  .x152-app-list .x150-app-ic{width:24px;height:24px;border-radius:7px;background:none}
  .x152-app-list .x150-app-ic img{width:22px;height:22px}
  .x152-app-list .x150-app-ic .a149-tile{width:24px!important;height:24px!important;font-size:9px!important;border-radius:7px}
  .x152-app-list strong{font-size:13px}
  .x152-app-list li div span,.x152-how span{display:none}
  .x152-app-list .x152-more span,.x152-app-list .x150-app-none span{display:none}
  .x152-how ol{gap:6px}
  .x152-how li{grid-template-columns:24px minmax(0,1fr);column-gap:7px;align-items:center}
  .x152-how li>b{width:24px;height:24px;font-size:12px;grid-row:auto}
  .x152-how strong{font-size:12.5px}
  .x152-trust{gap:8px 10px}
  .x152-trust li{grid-template-columns:28px minmax(0,1fr);gap:8px}
  .x152-trust li>svg{width:28px;height:28px;padding:6px}
  .x152-trust span{display:none}
  .x152-trust strong{font-size:12.5px}
  .x152-foot{justify-content:center;text-align:center;font-size:11.5px}
  .x152-foot span+span{display:none}
}
/* short screens: drop secondary lines so everything stays on one screen */
@media (max-height:820px) and (max-width:640px){.x152-lead{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}}
@media (max-height:720px){.x152-trust span,.x152-app-list li div span{display:none}.x152-app-list li{padding-top:4px;padding-bottom:4px}}
@media (max-height:700px) and (max-width:640px){.x152-lead{-webkit-line-clamp:2}.x152-assure{display:none}}
@media (max-height:620px){.x152-how span{display:none}.x152-foot{display:none}:is(html,#v152) .x152-landing{grid-template-rows:auto minmax(0,1fr) auto}}
@media (max-height:620px) and (max-width:900px){:is(html,#v152) .x152-landing{grid-template-rows:auto auto auto auto}}
@media (max-height:600px) and (max-width:640px){.x152-lead{display:none}.x152-how{display:none}}
@media (max-height:540px){.x152-trust{display:none}:is(html,#v152) .x152-landing{grid-template-rows:auto minmax(0,1fr)}}
@media (max-height:540px) and (max-width:900px){:is(html,#v152) .x152-landing{grid-template-rows:auto auto auto}}
/* phones in landscape: two columns again, essentials only */
@media (max-height:500px) and (min-width:560px){
  :is(html,#v152) .x152-landing{grid-template-rows:auto minmax(0,1fr)!important;--gap:10px}
  .x152-main{display:grid!important;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:20px}
  .x152-side{grid-template-columns:minmax(0,1fr)}
  .x152-intro h1{font-size:clamp(20px,6.2vh,30px)}
  .x152-lead,.x152-how,.x152-assure{display:none}
  .x152-cta .btn{height:40px!important}
  .x152-top{height:48px}
  .x152-name,.x152-nav-signin{display:none}
}

.x152-nb{white-space:nowrap}
@media (max-width:360px){.x152-top{gap:6px}.x152-top .x149-logo{height:20px}.x152-nav .btn{padding:0 10px;font-size:12.5px;height:34px}.x152-top .x150-theme button{width:28px;height:28px}}
@media (max-width:640px){
  .x152-card{padding:10px 12px;border-radius:14px}
  .x152-apps header{margin-bottom:6px}
  .x152-app-list li{padding:3px 9px 3px 4px}
  .x152-how ol{margin-top:6px}
  .x152-trust{padding:8px 12px;gap:6px 10px}
  .x152-side{gap:8px}
}
@media (max-width:640px) and (max-height:880px){.x152-lead{-webkit-line-clamp:2;display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden}}
@media (max-width:640px) and (max-height:660px){.x152-lead{display:none!important}}
@media (min-width:641px) and (max-width:900px){.x152-side{grid-template-columns:minmax(0,1fr)!important}.x152-app-list{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:14px}.x152-app-list li+li{border-top:0}}
@media (min-width:641px) and (max-width:900px) and (max-height:780px){
  :is(html,#v152) .x152-landing{grid-template-rows:auto minmax(0,1fr) auto auto;align-content:stretch}
  .x152-main{display:grid!important;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:22px}
  .x152-intro,.x152-side{align-content:center}
  .x152-app-list{grid-template-columns:minmax(0,1fr)!important}
  .x152-app-list li span{white-space:nowrap}
  .x152-lead{-webkit-line-clamp:3;display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden}
}
@media (min-width:641px) and (max-width:900px) and (max-height:640px){.x152-how{display:none}.x152-lead{-webkit-line-clamp:2}}

/* ── 3 · Hub Manager sidebar: no section heading, one even rhythm (expanded and collapsed) ── */
:is(html,#s152#s152#s152#s152#s152#s152#s152#s152#s152#s152) body #appView #hubSidebar .sidebar-section-label{display:none!important}
:is(html,#s152#s152#s152#s152#s152#s152#s152#s152#s152#s152) body #appView #hubSidebar .sidebar-nav{display:flex!important;flex-direction:column!important;gap:6px!important;row-gap:6px!important}
:is(html,#s152#s152#s152#s152#s152#s152#s152#s152#s152#s152) body #appView #hubSidebar .sidebar-nav>.nav-link{margin-top:0!important;margin-bottom:0!important}