/* Overview page and cross links. Light cards, thin borders, round arrows; stacked on phones. */
.lhub{--lhub-ink:#17384b;--lhub-muted:#526d7e;--lhub-line:#d6e1e7;--lhub-blue:#006da8;color:var(--lhub-ink);font-family:'Nunito Sans',sans-serif}
.lhub-intro{max-width:760px;margin:0 0 32px;font-size:20px;line-height:1.5;color:var(--lhub-ink)}
.lhub-main,.lhub-apps{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.lhub-apps{margin-top:24px}
.lhub-card{display:grid;grid-template-columns:minmax(0,42%) minmax(0,1fr);overflow:hidden;border:1px solid var(--lhub-line);border-radius:20px;background:#fff;color:var(--lhub-ink);text-decoration:none;box-shadow:0 6px 22px rgb(23 56 75 / 7%);transition:border-color .18s ease,box-shadow .18s ease}
.lhub-card:hover{border-color:#a9cde4;box-shadow:0 10px 28px rgb(0 109 168 / 14%);color:var(--lhub-ink)}
.lhub-card:focus-visible{outline:3px solid var(--lhub-blue);outline-offset:3px}
.lhub-media{display:block;min-height:100%;background:#eef6fb}
.lhub-media img{display:block;width:100%;height:100%;object-fit:cover}
.lhub-copy{display:flex;flex-direction:column;gap:12px;padding:24px}
.lhub-title{font:700 24px/1.2 'Fira Sans',sans-serif}
.lhub-text{font-size:16px;line-height:1.55;color:var(--lhub-muted)}
.lhub-action{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:auto;padding-top:8px;color:var(--lhub-blue);font-weight:700}
.lhub-arrow{display:inline-flex;flex:none;align-items:center;justify-content:center;width:36px;height:36px;border:1px solid #b8c7d1;border-radius:50%;background:#fff;color:var(--lhub-blue)}
.lhub-arrow svg{fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.lhub-card:hover .lhub-arrow,.lhub-link:hover .lhub-arrow{border-color:var(--lhub-blue);background:var(--lhub-blue);color:#fff}
.lhub-card.is-main{min-height:300px}
.lhub-card.is-app{min-height:190px;grid-template-columns:minmax(0,34%) minmax(0,1fr)}
.lhub-card.is-app .lhub-title{font-size:20px}
.lhub-card.is-app .lhub-media img{object-position:left top}
.lhub-links{box-sizing:border-box;width:100%;padding:32px 16px;font-family:'Nunito Sans',sans-serif}
.lhub-links-inner{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;max-width:1180px;margin:0 auto}
.lhub-link{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 20px;border:1px solid #d6e1e7;border-radius:16px;background:#fff;color:#17384b;font:700 18px/1.3 'Fira Sans',sans-serif;text-decoration:none;transition:border-color .18s ease,box-shadow .18s ease}
.lhub-link:hover{border-color:#a9cde4;box-shadow:0 8px 22px rgb(0 109 168 / 12%);color:#17384b}
.lhub-link:focus-visible{outline:3px solid #006da8;outline-offset:3px}
@media(max-width:900px){.lhub-main,.lhub-apps,.lhub-links-inner{grid-template-columns:minmax(0,1fr)}}
@media(max-width:600px){.lhub-intro{font-size:18px}.lhub-card,.lhub-card.is-app{grid-template-columns:minmax(0,1fr)}.lhub-media{aspect-ratio:16/9;min-height:0}.lhub-card.is-main,.lhub-card.is-app{min-height:0}.lhub-copy{padding:20px}}
@media print{.lhub-links{display:none}.lhub-card{box-shadow:none;break-inside:avoid}}
/* Theme link colours must not recolour the card titles, including visited links. */
.lhub a.lhub-card,.lhub a.lhub-card:visited,.lhub a.lhub-card .lhub-title{color:var(--lhub-ink)}
.lhub a.lhub-card .lhub-action{color:var(--lhub-blue)}
.lhub-links a.lhub-link,.lhub-links a.lhub-link:visited{color:#17384b}
/* Screenshots stay whole; photos fill the card. */
.lhub-media img[src$=".png"]{object-fit:contain;padding:12px;box-sizing:border-box}
.lhub-card.is-app .lhub-media img[src$=".png"]{object-position:center}
/* Introductions: several paragraphs before each pair of cards. */
.lhub-intro,.lhub-section-intro{max-width:820px}
.lhub-intro p,.lhub-section-intro p{margin:0 0 16px}
.lhub-intro p:last-child,.lhub-section-intro p:last-child{margin-bottom:0}
.lhub-section-intro{margin:48px 0 24px;font-size:18px;line-height:1.55}
.lhub-section-intro + .lhub-apps{margin-top:0}
@media(max-width:600px){.lhub-section-intro{margin-top:32px;font-size:17px}}
/* Header in the same form as the idea-bank pages. The page's own banner stays hidden and the page runs full width. */
.lhub-body{box-sizing:border-box;max-width:1180px;margin:0 auto;padding:16px 16px 56px}
body:has(.lhub) .default-hero-section,body:has(.lhub) .default-hero-section .hero-section{display:none!important}
.lnv.lnv-workspace:has(.lhub){padding-top:0!important}
.default-page-section:has(.lhub){padding-top:0!important}
.container:has(>.lhub){max-width:none;padding-top:0!important;padding-left:0;padding-right:0}
.lhub-hero{--lhub-gutter:20px;position:relative;box-sizing:border-box;display:flex;flex-direction:column;justify-content:center;width:calc(100% - var(--lhub-gutter)*2);max-width:1480px;min-height:640px;margin:0 auto 32px;padding:180px clamp(28px,7vw,100px) 64px;overflow:hidden;border-radius:0 0 72px 72px;background-color:#052539;background-position:center 50%;background-repeat:no-repeat;background-size:cover;color:#fff}
.lhub-hero-copy{max-width:850px;text-shadow:0 1px 3px rgb(0 0 0 / 45%)}
.lhub-eyebrow{margin:0 0 12px;color:inherit;font-size:12px;font-weight:800;letter-spacing:.12em;text-transform:uppercase}
.lhub-hero h1{margin:0 0 18px;color:#fff;font:700 clamp(42px,5.4vw,72px)/1.04 'Fira Sans',sans-serif;letter-spacing:-.035em}
.lhub-lead{max-width:660px;margin:0;color:rgb(255 255 255 / 88%);font-size:clamp(17px,2vw,21px);line-height:1.5}
@media(max-width:1100px){.lhub-hero{--lhub-gutter:10px;min-height:580px;padding:146px 24px 42px;border-radius:0 0 40px 40px}.lhub-hero h1{font-size:42px;letter-spacing:-1.4px}}
@media print{.lhub-hero{width:100%;min-height:0;padding:24px;border-radius:0}}
/* Pieces of the real tools fill the small cards; a thin line separates them from the text. */
.lhub-card.is-app .lhub-media{border-right:1px solid var(--lhub-line)}
.lhub-card.is-app .lhub-media img{object-position:center top}
@media(max-width:600px){.lhub-card.is-app .lhub-media{border-right:0;border-bottom:1px solid var(--lhub-line)}}
@media(min-width:601px){.lhub-body{padding-left:24px;padding-right:24px}}
