/* Industry Technology Hubs: the hubs index (/industries) and each sector hub (/industries/<sector>).
   Pages are written by build-hubs.py. Colours follow styles.css: navy and white only. */

/* ── Shared: The Role of Hubs ── */
.role{padding:48px 0;background:#fff;border-bottom:1px solid var(--border)}
.role__head{max-width:920px;margin:0 auto;text-align:center}
.role__head p{color:var(--text-secondary);font-size:.98rem;line-height:1.65;margin:0 0 10px}
.sec__h{text-align:center;font-size:clamp(1.6rem,2.6vw,2rem);margin:0 0 20px}
.role__points{display:grid;grid-template-columns:repeat(4,1fr);margin-top:20px;border-top:1px solid var(--border)}
.role__pt{padding:20px 20px 0;text-align:left;border-right:1px solid var(--border)}
.role__pt:last-child{border-right:0}
.role__pt i{display:inline-block;font-size:1.05rem;margin-right:8px;vertical-align:-2px}
.role__pt h3{font-size:.98rem;margin:0}
.role__pt p{font-size:.84rem;color:var(--text-secondary);line-height:1.55;margin:8px 0 0}
.role__read{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:36px}
.role__read a{display:block;padding-top:12px;border-top:2px solid var(--navy);text-align:center;font-family:var(--font-body);font-weight:600;font-size:.92rem;line-height:1.4;color:var(--navy)}
.role__read a:hover{text-decoration:underline;text-underline-offset:3px}
@media (max-width:980px){
    .role__points{grid-template-columns:repeat(2,1fr)}
    .role__pt{padding-bottom:24px;border-bottom:1px solid var(--border)}
    .role__pt:nth-child(2){border-right:0}
}
@media (max-width:620px){
    .role__points,.role__read{grid-template-columns:1fr}
    .role__pt{border-right:0}
}

/* ── Hubs index: The Role of Hubs in two halves (60/40, sized so both hold the same height). Left: the text, then Related articles. Right: the
   four points, stacked, stretched so both halves end on the same line. ── */
.role__split{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,2fr);gap:56px;align-items:stretch}
.role--index .sec__h{text-align:left;margin-bottom:16px}
.role__text p{margin:0 0 12px;color:var(--text-secondary);font-size:.95rem;line-height:1.6;text-align:left}
.role__text p a{color:var(--navy);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.role__aside{display:flex;flex-direction:column}
/* The four points: no boxes, four equal bands between hairlines, as tall as the text beside them */
.role__boxes{display:flex;flex-direction:column;flex:1;border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.role__boxes .role__pt{flex:1;display:flex;flex-direction:column;justify-content:center;padding:12px 0;border-right:0;border-bottom:0}
.role__boxes .role__pt + .role__pt{border-top:1px solid var(--border)}
.role__boxes .role__pt p{margin-top:6px}
/* Related articles: the same sizes as Latest Insights on the home page */
.role__rel{margin:20px 0 12px;font-family:var(--font-body);font-size:1.15rem;font-weight:700;color:var(--navy);text-align:left}
.role__text .role__read{display:flex;flex-direction:column;gap:10px;margin:0}
.role__text .role__read a{padding:0;border:0;text-align:left;font-size:.8rem;font-weight:600;line-height:1.3}
@media (max-width:980px){.role__split{grid-template-columns:1fr;gap:32px}}
@media (max-width:768px){.role--index .sec__h,.role__text p,.role__rel,.role__text .role__read a{text-align:left!important}}

/* ── Hubs index: one table, every hub on one line, in alphabetical order ── */
.hubs-hero{min-height:0}
.hubs-hero .hero__inner{max-width:880px}
.hub-dir{padding:48px 0 64px;background:var(--off-white)}
.hub-table{width:100%;table-layout:fixed;border-collapse:collapse;background:#fff;border:1px solid var(--border);color:var(--navy);font-size:.88rem}
.hub-table thead th{position:sticky;top:calc(var(--nav-height) + 49px);z-index:2;background:#fff;padding:12px 16px;border-bottom:2px solid var(--navy);text-align:left;font-size:.76rem;font-weight:600;color:var(--text-secondary);vertical-align:bottom;line-height:1.3}
.hub-table td,.hub-table tbody th{height:76px;padding:10px 16px;border-bottom:1px solid var(--border);vertical-align:middle;text-align:left}
.hub-table tbody tr:last-child>*{border-bottom:0}
.hub-table tbody tr:hover{background:var(--off-white)}
.hub-table tbody th{font-weight:400}
.hub-table tbody th a{display:flex;align-items:center;gap:14px;color:var(--navy)}
.hub-table tbody th a:hover b{text-decoration:underline;text-underline-offset:3px}
.hub-table__seal{display:inline-flex;align-items:center;justify-content:center;flex:0 0 38px;height:38px;border-radius:50%;background:var(--navy);color:#fff;font-size:1rem}
.hub-table tbody th b{display:block;font-family:var(--font-body);font-size:1rem;line-height:1.2}
.hub-table tbody th small{display:block;margin-top:2px;font-size:.76rem;color:var(--text-secondary)}
.hub-table__mates span{display:block;font-size:.8rem;font-weight:600;line-height:1.4}
.hub-table__n b{font-family:var(--font-body);font-size:1.1rem}
.hub-table__n span{display:none}
.hub-table thead th:nth-child(1){width:30%}.hub-table thead th:nth-child(2){width:22%}.hub-table thead th:nth-child(n+3){width:11%}.hub-table thead th:nth-child(6){width:15%}
.hub-table__demo img{display:block;width:104px;height:54px;object-fit:cover;object-position:left top;border:1px solid var(--border);border-radius:6px}
.hub-table__demo a:hover img{border-color:var(--navy)}
/* Phones and small tablets: each hub becomes a block, the figures carry their own labels */
@media (max-width:820px){
  .hub-table,.hub-table tbody{display:block;border:0;background:none}
  .hub-table thead{display:none}
  .hub-table tbody tr{display:grid;grid-template-columns:repeat(3,minmax(0,1fr)) 88px;align-items:end;gap:10px 12px;margin-bottom:12px;padding:16px;background:#fff;border:1px solid var(--border);border-radius:8px}
  .hub-table tbody tr:hover{background:#fff}
  .hub-table td,.hub-table tbody th{display:block;height:auto;padding:0;border:0}
  .hub-table tbody th{grid-column:1/-1}
  .hub-table__mates{grid-column:1/-1}
  .hub-table__mates:empty{display:none}
  .hub-table__n b{display:block;line-height:1}
  .hub-table__n span{display:block;margin-top:3px;font-size:.72rem;color:var(--text-secondary);line-height:1.25}
  .hub-table__demo{width:auto;grid-column:4;grid-row:span 1}
  .hub-table__demo img{width:88px;height:48px}
}
@media (max-width:768px){.hub-dir .container,.role .container{text-align:left!important}.role__head,.sec__h{text-align:center}}

/* ── Sector hub: header ── */
.hh{padding:calc(var(--nav-height) + 56px) 24px 56px;background:var(--navy);color:#fff;text-align:center}
.hh__inner{max-width:760px;margin:0 auto}
.hh__seal{display:inline-flex;align-items:center;justify-content:center;width:56px;height:56px;margin-bottom:18px;border-radius:50%;background:#fff;color:var(--navy);font-size:1.6rem}
.hh__title{margin:0 0 20px;color:#fff;font-size:min(2rem,6.6vw);line-height:1.3}
.hh__def{max-width:620px;margin:0 auto 28px;color:rgba(255,255,255,.8);font-size:1.2rem;line-height:1.65}
.hh__actions{display:flex;flex-direction:column;align-items:center;gap:16px}
.hh__wa{display:inline-flex;align-items:center;gap:8px;color:#fff;font-weight:600;font-size:.95rem;opacity:.85}
.hh__wa:hover{opacity:1;text-decoration:underline;text-underline-offset:3px}

/* ── Sector hub: the band under the header. Two distinct bars: current design partners, then the library. ── */
.band{position:relative;z-index:2;text-align:center}
.band__row--partners{background:var(--light-gray)}
.band__in{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:12px 28px;min-height:60px;padding-top:10px;padding-bottom:28px}
.band__lbl{margin:0;font-family:var(--font-body);font-size:.88rem;font-weight:600;color:var(--text-secondary)}
.mate{display:inline-flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:10px;font-weight:600;font-size:.98rem}
.mate__case{margin-left:8px;padding-left:18px;border-left:1px solid #d9dde6;font-family:var(--font-body);font-size:.92rem;font-weight:500;color:var(--navy);text-decoration:underline;text-decoration-thickness:1px;text-decoration-color:rgba(0,12,57,.3);text-underline-offset:5px;transition:text-decoration-color .2s ease}
.mate__case:hover{text-decoration-color:var(--navy)}
.band__row--lib{position:relative;z-index:1;background:#fff;border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
/* A hub with no design partners yet: the library bar sits on white, clear of the header */
.band--solo{padding-top:28px;background:#fff}
/* Room for the library's point when The Role of Hubs follows the band directly */
.band + .role{padding-top:76px}

/* The library is one shape: it rises out of the bar's top line, runs down through the row between the
   two featured guides, and ends below the bottom line in a point that shows it opens. */
.lib__row{display:grid;grid-template-columns:minmax(0,1fr) 170px minmax(0,1fr)}
.lib__side{display:flex;align-items:center;padding:18px 0}
.lib__side--l{justify-content:flex-end;padding-right:30px;text-align:right}
.lib__side--r{justify-content:flex-start;padding-left:30px;text-align:left}
.lib__side a{font-family:var(--font-body);font-weight:600;font-size:.9rem;line-height:1.35;color:var(--navy)}
.lib__side a:hover .lib__st{text-decoration:underline;text-underline-offset:3px}
.lib__sd{display:block;max-height:0;margin-top:0;overflow:hidden;opacity:0;font-family:var(--font-body);font-weight:400;font-size:.82rem;line-height:1.5;color:var(--text-secondary);transition:max-height .3s ease,opacity .3s ease,margin-top .3s ease}
.band.is-open .lib__sd{max-height:4.5em;margin-top:4px;opacity:1}
.lib__core{position:relative;display:flex;align-items:center;justify-content:center;padding:0;border:0;background:#fff;font:inherit;color:var(--navy);cursor:pointer}
.lib__top,.lib__mid,.lib__bot{position:absolute;left:-14px;width:198px;overflow:visible;pointer-events:none}
.lib__top{bottom:100%;height:20px}
.lib__mid{top:0;height:100%}
.lib__bot{top:100%;height:48px}
.lib__fill{fill:#fff;pointer-events:auto}
.lib__line,.lib__flare{fill:none;stroke:var(--border);stroke-width:1}
.lib__mid .lib__line{vector-effect:non-scaling-stroke}
.lib__line{transition:stroke .3s ease}
.lib__opened,.band.is-open .lib__shut{display:none}
.band.is-open .lib__opened{display:inline}
.lib__core:hover .lib__line{stroke:rgba(0,12,57,.38)}
.lib__core:focus-visible{outline:none}
.lib__core:focus-visible .lib__line{stroke:var(--navy)}
.lib__word{position:relative;display:inline-flex;align-items:center;font-family:var(--font-display);font-weight:600;font-size:1.02rem}
.lib__word i{position:absolute;left:50%;bottom:100%;margin-bottom:3px;transform:translateX(-50%);font-size:1.2rem;line-height:1}
.lib__more{position:absolute;left:0;right:0;top:100%;display:flex;align-items:center;justify-content:center;height:36px}
.lib__n{font-family:var(--font-body);font-weight:500;font-size:.82rem;color:var(--text-secondary)}
.lib__core:hover .lib__n{color:var(--navy);font-weight:600}
.lib__n--m,.lib__m,.band.is-open .lib__n{display:none}
.lib__panel{display:grid;grid-template-rows:0fr;background:#fff;transition:grid-template-rows .3s ease}
.lib__panel.is-open{grid-template-rows:1fr;border-bottom:1px solid var(--border)}
.lib__inner{overflow:hidden}
.lib__list{display:grid;grid-template-columns:1fr 1fr;column-gap:48px;max-width:960px;margin:0 auto;padding:40px 0 18px;list-style:none}
.lib__list li{border-bottom:1px solid var(--border)}
.lib__list li:nth-last-child(-n+2){border-bottom:0}
.lib__list a{display:block;padding:14px 0;color:var(--navy)}
.lib__t{display:block;font-family:var(--font-body);font-weight:600;font-size:.96rem;line-height:1.35}
.lib__d{display:block;margin-top:3px;font-size:.84rem;line-height:1.5;color:var(--text-secondary)}
.lib__list a:hover .lib__t{text-decoration:underline;text-underline-offset:3px}

/* ── Sector hub: live demo system ── */
.sys{padding:72px 0 48px;background:var(--off-white);border-bottom:1px solid var(--border);text-align:center}
.sys__frame{display:block;max-width:820px;margin:0 auto 24px;overflow:hidden;border:1px solid var(--border);border-radius:12px;background:#fff;box-shadow:0 20px 50px rgba(0,12,57,.12)}
.sys__bar{display:flex;align-items:center;gap:6px;padding:10px 14px;background:#1a1f36}
.sys__bar i{width:9px;height:9px;border-radius:50%;background:#ff5f57}
.sys__bar i:nth-child(2){background:#febc2e}
.sys__bar i:nth-child(3){background:#28c840}
.sys__bar span{margin-left:10px;font-size:.75rem;color:rgba(255,255,255,.55)}
.sys__frame img{display:block;width:100%;height:auto}
.sys .btn i{margin-left:8px;font-size:.85em}

/* ── Sector hub: the article keeps its old heading as its first section ── */
.ind-intro h2{margin-top:0}

/* ── Sector hub: the hub bar shows once the header has scrolled away ── */
.hubbar{position:fixed;top:var(--nav-height);left:0;right:0;z-index:999;height:52px;background:var(--navy);transform:translateY(-100%);opacity:0;visibility:hidden;transition:transform .25s ease,opacity .25s ease,visibility .25s}
.hubbar.is-on{transform:none;opacity:1;visibility:visible}
.hubbar .container{display:flex;align-items:center;justify-content:space-between;gap:24px;height:100%}
.hubbar__id{display:flex;align-items:center;gap:10px;color:#fff;font-family:var(--font-display);font-weight:700;font-size:.95rem;white-space:nowrap}
.hubbar__seal{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:50%;background:#fff;color:var(--navy);font-size:.85rem}
.hubbar__rooms{display:flex;gap:2px;overflow-x:auto;scrollbar-width:none}
.hubbar__rooms::-webkit-scrollbar{display:none}
.hubbar__rooms a{padding:6px 10px;border-radius:6px;color:rgba(255,255,255,.72);font-size:.85rem;font-weight:600;white-space:nowrap}
.hubbar__rooms a:hover,.hubbar__rooms a.is-here{color:#fff;background:rgba(255,255,255,.12)}
#library,#live-demo-system,#the-role-of-hubs,#market,#costs,#faq{scroll-margin-top:calc(var(--nav-height) + 52px)}

@media (max-width:768px){
    .hh{padding-top:calc(var(--nav-height) + 48px)}
    .band__in{flex-direction:column;gap:6px;padding-top:14px;padding-bottom:28px}
    .mate{display:grid;grid-template-columns:auto auto;justify-content:center;column-gap:8px;row-gap:10px}
    .mate__case{grid-column:1/-1;justify-self:center;margin-left:0;padding-left:0;border-left:0}
    /* No room for a guide on each side: the shape stands alone and the list holds every guide */
    .lib__row{grid-template-columns:170px;justify-content:center}
    .lib__side,.lib__n--d{display:none}
    .lib__core{min-height:46px}
    .lib__n--m{display:inline}
    .lib__m{display:list-item}
    .lib__list{grid-template-columns:1fr}
    .lib__list li:nth-last-child(2){border-bottom:1px solid var(--border)}
    .hubbar__id{display:none}
}
@media (prefers-reduced-motion:reduce){
    .hubbar,.lib__panel,.lib__line,.lib__sd,.mate__case{transition:none}
}

/* ── Home page: the hubs that have current design partners ── */
.home-hubs__sub{max-width:640px;margin:0 auto;color:var(--text-secondary);font-size:1.0625rem;line-height:1.7}
.home-hubs__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:40px}
.home-hub{display:flex;align-items:flex-start;gap:16px;padding:24px;background:#fff;border:1px solid var(--border);border-radius:8px;color:var(--navy);text-align:left}
.home-hub:hover{border-color:var(--navy)}
.home-hub:focus-visible{outline:3px solid var(--navy);outline-offset:3px}
.home-hub__txt{flex:1;min-width:0}
.home-hub__txt b{display:block;font-family:var(--font-body);font-size:.92rem;line-height:1.3;white-space:nowrap}
.home-hub__txt small{display:block;margin-top:2px;font-size:.8rem;color:var(--text-secondary)}
.home-hub__mates{display:block;margin-top:12px;padding-top:12px;border-top:1px solid var(--border)}
.home-hub__mates span{display:block;font-size:.86rem;font-weight:600;line-height:1.45}
.home-hubs__h{margin:56px 0 0;font-family:var(--font-display);font-size:1.25rem;font-weight:700;color:var(--navy);text-align:center}
.home-hubs__reads{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:20px}
.home-read{display:block;padding:16px 0 0;border-top:2px solid var(--navy);color:var(--navy);text-align:left}
.home-read small{display:block;font-size:.8rem;color:var(--text-secondary)}
.home-read b{display:block;margin-top:4px;font-family:var(--font-body);font-size:1.05rem;line-height:1.4}
.home-read:hover b{text-decoration:underline;text-underline-offset:3px}
.home-read:focus-visible{outline:3px solid var(--navy);outline-offset:3px}
.home-hubs__more{display:flex;flex-wrap:wrap;justify-content:center;gap:16px;margin-top:40px}
@media (max-width:980px){.home-hubs__grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:620px){.home-hubs__grid,.home-hubs__reads{grid-template-columns:1fr}.home-hubs__reads{gap:24px}.home-hubs .section-header{text-align:center}}