/* ============================================
   Booking Hub — server-rendered pages (secure.bookmatrix.com): destination tiles, property cards, place / country /
   hotels / about / legal pages, footer, breadcrumb. Loaded after hub.css (same tokens: --ink, --card, --r-l, --sh-1 …).
   MARKUP: views/bookmatrix/pug/april2025/BookingHub/_hubParts.pug (+hubTile, +hubCard, +hubCrumbs, +hubFooter) and the _hub*.pug pages.
   Mobile first (390px), then 768 and 1280. No blue: neutral greys + near-black. Images always carry width/height (no layout shift).
   ============================================ */

/* ── breadcrumb ── */
.hub-crumbs ol { list-style: none; margin: 0 0 14px; padding: 0; display: flex; flex-wrap: wrap; gap: 2px 0; font-size: 14px; }
.hub-crumbs li { display: inline-flex; align-items: center; min-height: 32px; }
.hub-crumbs li + li::before { content: '/'; margin: 0 8px; color: var(--disabled); }
.hub-crumbs a, .hub-crumbs span { color: var(--muted); text-decoration: none; }
.hub .hub-crumbs a { color: var(--muted); }
.hub-crumbs a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.hub-crumbs [aria-current] { color: var(--ink2); font-weight: 600; }
.hub-hero .hub-crumbs a, .hub .hub-hero .hub-crumbs a { color: rgba(255, 255, 255, .7); }
.hub-hero .hub-crumbs a:hover { color: #fff; }
.hub-hero .hub-crumbs [aria-current] { color: #fff; }
.hub-hero .hub-crumbs li + li::before { color: rgba(255, 255, 255, .35); }

/* ── destination tiles (real links; the image is a plain <img>, so no script is needed) ── */
.hub .hub-tile { position: relative; display: block; border-radius: var(--r-l); overflow: hidden; aspect-ratio: 4 / 5; background: #e8e8ed; color: #fff; text-decoration: none; box-shadow: var(--sh-1); transition: transform .35s var(--ease), box-shadow .35s var(--ease); }
.hub-tile:hover { transform: scale(1.015); box-shadow: var(--sh-2); }
.hub-tile::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, 0) 45%, rgba(0, 0, 0, .66) 100%); }
.hub-tile-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.hub-tile-txt { position: absolute; left: 10px; right: 10px; bottom: 10px; z-index: 1; padding: 10px 12px; border-radius: var(--r); background: rgba(22, 22, 23, .38); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); border: .5px solid rgba(255, 255, 255, .28); }
.hub-tile-txt b { display: block; font-size: 17px; font-weight: 700; line-height: 1.2; letter-spacing: -.02em; }
.hub-tile-txt span { font-size: 13px; color: rgba(255, 255, 255, .92); }
.hub-tile:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
.hub-more { margin: 22px 0 0; }
.hub-sec-head--gap { margin-top: 48px; }
.hub-sec-gap { margin-top: 44px; }
.hub-sec-gap .hub-h2 { margin-bottom: 16px; }

/* ── property card (server twin of the results card; no prices without dates) ── */
.hub-pc-grid { display: grid; gap: 14px; grid-template-columns: 1fr; }
.hub-pc { display: flex; flex-direction: column; background: var(--card); border-radius: var(--r-l); overflow: hidden; box-shadow: var(--sh-1); transition: box-shadow .3s var(--ease), transform .3s var(--ease); }
.hub-pc:hover { box-shadow: var(--sh-2); transform: translateY(-2px); }
.hub-pc-media { position: relative; display: block; aspect-ratio: 4 / 3; background: #e8e8ed; overflow: hidden; }
.hub-pc-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.hub-pc-type { position: absolute; left: 10px; top: 10px; background: rgba(255, 255, 255, .86); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); color: var(--ink); font-size: 13px; font-weight: 600; padding: 4px 10px; border-radius: var(--r-pill); }
.hub-pc-body { display: flex; flex-direction: column; gap: 8px; padding: 16px 18px 18px; flex: 1; }
.hub-pc-name { margin: 0; font-size: 19px; line-height: 1.25; font-weight: 700; letter-spacing: -.02em; }
.hub-pc-name a { text-decoration: none; }
.hub-pc-name a:hover { text-decoration: underline; text-underline-offset: 3px; }
.hub-pc-meta { margin: 0; display: flex; flex-direction: column; gap: 1px; color: var(--muted); font-size: 14px; }
.hub-pc-stars { color: var(--ink); letter-spacing: 1px; }
.hub-pc-desc { margin: 0; color: var(--ink2); font-size: 15px; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.hub-pc-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.hub-pc-chips li { background: var(--fill); color: var(--ink2); font-size: 13px; font-weight: 500; padding: 4px 10px; border-radius: var(--r-pill); }
.hub .hub-pc-cta { margin-top: auto; align-self: flex-start; display: inline-flex; align-items: center; min-height: 44px; padding: 10px 20px; border-radius: var(--r-pill); background: var(--dark); color: #fff; font-size: 15px; font-weight: 600; text-decoration: none; transition: background .2s ease, transform .2s ease; }
.hub .hub-pc-cta:hover { background: #000; }
.hub-pc-cta:active { transform: scale(.97); }

/* ── popular destinations: tiles are links now ── */
.hub-recent + .hub-sec-head { margin-top: 0; }

/* ── trust section ── */
.hub-trust { margin-top: 48px; }
.hub-trust .hub-h2 { margin-bottom: 16px; }
.hub-trust-grid { display: grid; gap: 12px; }
.hub-trust-item { background: var(--card); border-radius: var(--r-l); padding: 22px; box-shadow: var(--sh-1); }
.hub-trust-item h3 { margin: 0 0 6px; font-size: 19px; font-weight: 700; }
.hub-trust-item p { margin: 0 0 12px; color: var(--muted); }
.hub-trust-item a { font-weight: 600; }
.hub-usp a { color: inherit; text-decoration: none; }
.hub .hub-usp a { color: var(--muted); }
.hub-usp a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }

/* ── place page ── */
.hub-hero--place { padding-bottom: 64px; }
.hub-hero--place .hub-lead { max-width: 760px; font-size: 17px; white-space: normal; }
@media (min-width: 1024px) { .hub-hero--place .hub-h1 { white-space: normal; font-size: clamp(32px, 3vw, 44px); } .hub-hero--place .hub-lead { white-space: normal; font-size: 18px; } }
.hub-facts { margin-top: 36px; padding: 18px 20px; background: var(--fill); border-radius: var(--r); }
.hub-h3 { margin: 0 0 10px; font-size: 17px; font-weight: 700; letter-spacing: -.02em; }
.hub-facts-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 22px; color: var(--ink2); font-size: 16px; }
.hub-facts-list li { position: relative; }
.hub-facts-list li + li::before { content: ''; position: absolute; left: -12px; top: 50%; width: 3px; height: 3px; margin-top: -1px; border-radius: var(--r-pill); background: var(--faint); }
.hub-near { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; grid-template-columns: 1fr; }
.hub .hub-near a { display: flex; flex-direction: column; gap: 2px; padding: 14px 16px; min-height: 56px; border-radius: var(--r); background: var(--card); box-shadow: var(--sh-1); text-decoration: none; transition: box-shadow .3s var(--ease); }
.hub-near a:hover { box-shadow: var(--sh-2); }
.hub-near b { font-size: 17px; font-weight: 600; }
.hub-near span { font-size: 14px; color: var(--muted); }
.hub-faq-wrap .hub-help-q p { max-width: 760px; }

/* ── content pages (/hotels, country, about, terms, privacy) ── */
.hub-doc { padding: 84px 0 56px; }
.hub-wrap--narrow { max-width: 820px; }
.hub-doc-h1 { margin: 6px 0 10px; font-size: 32px; font-weight: 700; letter-spacing: -.035em; line-height: 1.12; }
.hub-doc-lead { margin: 0; font-size: 18px; color: var(--muted); max-width: 720px; }
.hub-h2-link { text-decoration: none; }
.hub-h2-link:hover { text-decoration: underline; text-underline-offset: 4px; }
.hub-h2-count { margin-left: 10px; font-size: 15px; font-weight: 500; color: var(--muted); letter-spacing: 0; }
.hub-prose { margin-top: 28px; }
.hub-prose h2 { margin: 30px 0 8px; font-size: 22px; font-weight: 700; letter-spacing: -.025em; }
.hub-prose p { margin: 0 0 14px; font-size: 17px; line-height: 1.55; color: var(--ink2); }
.hub-prose a:not(.hub-btn) { font-weight: 600; }
.hub .hub-prose a.hub-btn { text-decoration: none; }
.hub-panel-card { margin-top: 28px; padding: 22px; background: var(--card); border-radius: var(--r-l); box-shadow: var(--sh-1); }
.hub-panel-card h2 { margin: 0 0 12px; font-size: 20px; font-weight: 700; }
.hub-dl { margin: 0; display: grid; gap: 12px; }
.hub-dl dt { font-size: 13px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.hub-dl dd { margin: 2px 0 0; font-size: 17px; }
.hub-dl a { font-weight: 600; }

/* ── help: payment section ── */
.hub-help-pay { display: flex; gap: 14px; align-items: flex-start; margin: 22px 0 0; padding: 18px 20px; border-radius: var(--r-l); background: var(--card); box-shadow: var(--sh-1); scroll-margin-top: 84px; }
.hub-help-pay > .bi { width: 44px; height: 44px; flex: none; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--r); background: var(--fill); font-size: 20px; }
.hub-help-pay .hub-help-h2 { margin: 2px 0 8px; font-size: 20px; }
.hub-help-pay p { margin: 0 0 8px; color: var(--ink2); }
.hub-help-pay p:last-child { margin: 0; }
.hub-help-q[id] { scroll-margin-top: 84px; }

/* ── language menu = real links ── */
.hub-menu-list--links li { padding: 0; }
.hub-menu-list--links li > a { display: flex; flex: 1; align-items: center; justify-content: space-between; gap: 16px; min-height: 44px; padding: 10px 12px; border-radius: var(--r); color: inherit; text-decoration: none; outline-offset: -2px; }
.hub-menu-list--links li > a .bi-check2 { visibility: hidden; font-size: 18px; }
.hub-menu-list--links li > a[aria-current='true'] { font-weight: 600; }
.hub-menu-list--links li > a[aria-current='true'] .bi-check2 { visibility: visible; }
.hub .hub-menu-list--links li > a { color: var(--ink); }
.hub-menu-list--links li:hover, .hub-menu-list--links li:focus-within { background: var(--fill2); }

/* ── footer (every hub page) ── */
.hub-foot--full { text-align: left; padding: 44px 0 36px; background: var(--card); margin-top: 24px; }
.hub-foot-top { display: grid; gap: 28px; grid-template-columns: 1fr 1fr; }
.hub-foot-brand { grid-column: 1 / -1; }
.hub-brand-text { font-family: var(--logo-font); font-weight: 800; font-size: 22px; letter-spacing: -.02em; text-decoration: none; }
.hub-brand-text span { color: var(--faint); }
.hub-foot-brand p { margin: 8px 0 0; max-width: 420px; color: var(--muted); font-size: 15px; display: block; }
.hub-foot-brand .hub-foot-direct { color: var(--ink2); font-weight: 600; }
.hub-foot-col h2 { margin: 0 0 8px; font-size: 14px; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; color: var(--muted); }
.hub-foot-col ul { list-style: none; margin: 0; padding: 0; }
.hub-foot-col li a { display: inline-flex; align-items: center; min-height: 36px; font-size: 15px; font-weight: 500; text-decoration: none; color: var(--ink2); }
.hub .hub-foot-col li a { font-weight: 500; }
.hub-foot-col li a:hover, .hub-foot-langs a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.hub-foot-langs { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-top: 26px; padding-top: 18px; border-top: .5px solid var(--line2); }
.hub-foot-langs a { display: inline-flex; align-items: center; min-height: 36px; font-size: 14px; font-weight: 500; text-decoration: none; color: var(--muted); }
.hub .hub-foot-langs a { font-weight: 500; }
.hub-foot-langs a[aria-current='true'] { color: var(--ink); font-weight: 700; }
.hub-foot-fine { margin: 14px 0 0; display: block; font-size: 13px; color: var(--faint); text-align: left; }
.hub-foot--full p { display: block; }

/* ── 768 ── */
@media (min-width: 768px) {
  .hub-pc-grid { grid-template-columns: repeat(2, 1fr); gap: 18px; }
  .hub-trust-grid { grid-template-columns: repeat(3, 1fr); gap: 16px; }
  .hub-near { grid-template-columns: repeat(2, 1fr); }
  .hub-doc { padding-top: 104px; }
  .hub-doc-h1 { font-size: 44px; }
  .hub-foot-top { grid-template-columns: 1.6fr repeat(4, 1fr); gap: 32px; }
  .hub-foot-brand { grid-column: auto; }
  .hub-dl { grid-template-columns: 1fr 1fr; }
}
/* ── 1280 ── */
@media (min-width: 1280px) {
  .hub-pc-grid { grid-template-columns: repeat(4, 1fr); }
  .hub-near { grid-template-columns: repeat(3, 1fr); }
}
@media (prefers-reduced-motion: reduce) { .hub-tile, .hub-pc { transition: none; } .hub-tile:hover, .hub-pc:hover { transform: none; } }
.hub-cat { margin-left: 8px; font-size: 13px; font-weight: 500; color: var(--muted); white-space: nowrap; vertical-align: 2px; }

/* ── 2026-11-14 home: what Bookmatrix.com is + the two other audiences; /partners ── */
@media (min-width: 1024px) { .hub .hub-hero .hub-h1 { white-space: normal; max-width: 900px; } }
.hub-hero .hub-lead { max-width: 760px; }
.hub-stats { list-style: none; margin: 22px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px 26px; color: rgba(255, 255, 255, .72); font-size: 15px; }
.hub-stats li { display: flex; align-items: baseline; gap: 7px; }
.hub-stats b { color: #fff; font-size: 22px; font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.hub-stats-live { align-items: center !important; }
.hub-live-dot { width: 8px; height: 8px; border-radius: 50%; background: #30d158; box-shadow: 0 0 0 4px rgba(48, 209, 88, .22); flex: none; }
@media (prefers-reduced-motion: no-preference) { .hub-live-dot { animation: hubLive 2.4s ease-in-out infinite; } }
@keyframes hubLive { 50% { box-shadow: 0 0 0 7px rgba(48, 209, 88, 0); } }
@media (max-width: 767.98px) { .hub-hero { padding-bottom: 72px; } .hub-stats { gap: 8px 18px; font-size: 14px; } .hub-stats b { font-size: 19px; } }

.hub-what { display: grid; gap: 20px; margin: 8px 0 44px; padding: 24px; background: var(--card); border-radius: var(--r-xl); box-shadow: var(--sh-1); }
.hub-what-txt p { margin: 8px 0 0; color: var(--ink2); font-size: 17px; max-width: 520px; }
.hub-what-link { font-weight: 600; }
.hub-flow { list-style: none; margin: 0; padding: 0; display: grid; gap: 26px; counter-reset: none; }
.hub-flow li { position: relative; display: grid; grid-template-columns: 44px 1fr; column-gap: 14px; align-items: center; padding: 14px 16px; border-radius: var(--r); background: var(--bg); }
.hub-flow li > .bi, .hub-flow li > img { grid-row: span 2; width: 44px; height: 44px; border-radius: var(--r); background: var(--card); display: inline-flex; align-items: center; justify-content: center; font-size: 20px; box-shadow: 0 0 0 .5px var(--line2); }
.hub-flow li > img { padding: 11px 13px; background: #000; object-fit: contain; }
.hub-flow b { font-size: 16px; font-weight: 700; letter-spacing: -.015em; }
.hub-flow span { font-size: 14px; color: var(--muted); line-height: 1.35; }
.hub-flow li.is-us { background: var(--dark); }
.hub-flow li.is-us b { color: #fff; } .hub-flow li.is-us span { color: rgba(255, 255, 255, .7); }
.hub-flow li + li::before { content: '\F128'; font-family: 'bootstrap-icons'; position: absolute; left: 30px; top: -22px; font-size: 16px; color: var(--faint); }
@media (min-width: 900px) {
  .hub-what { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); align-items: center; padding: 32px 36px; gap: 36px; }
  .hub-flow { grid-template-columns: repeat(3, 1fr); gap: 30px; }
  .hub-flow li { grid-template-columns: 1fr; row-gap: 8px; align-content: start; padding: 18px; height: 100%; }
  .hub-flow li > .bi, .hub-flow li > img { grid-row: auto; }
  .hub-flow li + li::before { content: '\F138'; left: -24px; top: 50%; transform: translateY(-50%); }
}

.hub-aud { display: grid; gap: 12px; margin-top: 48px; }
.hub-aud-card { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 26px; border-radius: var(--r-xl); background: var(--card); box-shadow: var(--sh-1); text-decoration: none; color: var(--ink); transition: box-shadow .3s var(--ease), transform .3s var(--ease); }
a.hub-aud-card:hover { box-shadow: var(--sh-2); transform: translateY(-2px); }
.hub-aud-card > .bi { font-size: 22px; width: 46px; height: 46px; border-radius: var(--r); background: var(--fill); display: inline-flex; align-items: center; justify-content: center; margin-bottom: 8px; }
.hub-aud-card h3 { margin: 0; font-size: 22px; font-weight: 700; letter-spacing: -.025em; }
.hub-aud-card p { margin: 0 0 10px; color: var(--muted); max-width: 480px; }
.hub-aud-go { margin-top: auto; display: inline-flex; align-items: center; gap: 8px; font-weight: 600; text-decoration: none; }
.hub .hub-aud-card--dark, .hub a.hub-aud-card--dark { background: var(--dark); color: #fff; }
.hub .hub-aud-card--dark h3 { color: #fff; }
.hub-aud-card--dark p { color: rgba(255, 255, 255, .72); }
.hub-aud-card--dark > .bi { background: rgba(255, 255, 255, .14); }
.hub .hub-aud-card--dark .hub-aud-go { color: #fff; }
@media (min-width: 768px) { .hub-aud { grid-template-columns: 1fr 1fr; gap: 16px; } }

.hub .hub-btn--white, .hub a.hub-btn--white { background: #fff; color: var(--ink); }
.hub .hub-btn--white:hover { background: #f0f0f2; }
.hub-pt-kicker { margin: 0 0 14px; font-size: 14px; font-weight: 600; letter-spacing: .01em; color: rgba(255, 255, 255, .7); }
.hub-pt-cta { margin: 26px 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; }
.hub .hub-pt-signin { color: rgba(255, 255, 255, .85); font-weight: 600; text-underline-offset: 3px; }
.hub-pt-steps { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 12px; }
.hub-pt-steps li { background: var(--card); border-radius: var(--r-l); padding: 22px; box-shadow: var(--sh-1); }
.hub-pt-n { display: inline-flex; width: 32px; height: 32px; border-radius: var(--r-pill); background: var(--dark); color: #fff; align-items: center; justify-content: center; font-weight: 700; font-size: 15px; }
.hub-pt-steps h3 { margin: 12px 0 4px; font-size: 18px; font-weight: 700; }
.hub-pt-steps p { margin: 0; color: var(--muted); font-size: 15px; }
.hub-pt-why { margin-top: 48px; }
.hub-pt-ic { font-size: 20px; display: inline-flex; width: 44px; height: 44px; border-radius: var(--r); background: var(--fill); align-items: center; justify-content: center; margin-bottom: 12px; }
@media (min-width: 768px) { .hub-pt-steps { grid-template-columns: repeat(2, 1fr); gap: 16px; } .hub-trust-grid { grid-template-columns: repeat(3, 1fr); gap: 16px; } }
@media (min-width: 1100px) { .hub-pt-steps { grid-template-columns: repeat(4, 1fr); } }
.hub-hero + .hub-doc { padding-top: 40px; }
@media (min-width: 1024px) { .hub .hub-hero .hub-lead { white-space: normal; } }

/* ── 2026-11-14 hero: in-brand backdrop, readable lead, emphasis where it counts ── */
.hub-hero { background: radial-gradient(120% 90% at 85% 0%, #10261d 0%, rgba(8, 14, 12, 0) 55%), radial-gradient(90% 80% at 100% 100%, #0b1830 0%, rgba(5, 8, 14, 0) 60%), #050607; overflow: hidden; }
.hub-hero-bg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; -webkit-mask-image: linear-gradient(100deg, rgba(0, 0, 0, .05) 0%, rgba(0, 0, 0, .18) 38%, #000 78%); mask-image: linear-gradient(100deg, rgba(0, 0, 0, .05) 0%, rgba(0, 0, 0, .18) 38%, #000 78%); }
.hub-hero--home::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 120px; background: linear-gradient(180deg, rgba(5, 6, 7, 0), rgba(5, 6, 7, .85)); pointer-events: none; }
.hub-hero--home .hub-hero-in { z-index: 1; }
.hub .hub-h1--home { font-size: clamp(34px, 8.6vw, 44px); line-height: 1.06; font-weight: 700; letter-spacing: -.04em; margin-bottom: 16px; max-width: 880px; text-wrap: balance; }
.hub .hub-h1--home em { font-style: normal; color: #4affb0; display: block; }
.hub .hub-lead--home { font-size: 18px; line-height: 1.5; color: rgba(255, 255, 255, .8); max-width: 640px; }
.hub .hub-lead--home strong { display: block; margin-top: 8px; color: #fff; font-weight: 600; }
.hub-hero--home .hub-stats { margin-top: 28px; gap: 10px; }
.hub-hero--home .hub-stats li { flex-direction: column; align-items: flex-start; gap: 0; padding: 12px 18px 12px; min-width: 104px; border-radius: var(--r); background: rgba(255, 255, 255, .07); border: .5px solid rgba(255, 255, 255, .14); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); font-size: 13px; color: rgba(255, 255, 255, .72); }
.hub-hero--home .hub-stats b { font-size: 34px; line-height: 1.05; letter-spacing: -.035em; color: #fff; }
.hub-hero--home .hub-stats .hub-stats-live { flex-direction: row; align-items: center !important; gap: 10px; min-height: 0; align-self: stretch; max-width: 210px; color: rgba(255, 255, 255, .86); font-weight: 500; line-height: 1.3; }
@media (min-width: 768px) {
  .hub .hub-h1--home { font-size: clamp(44px, 4.6vw, 64px); }
  .hub .hub-lead--home { font-size: 20px; }
  .hub-hero--home .hub-stats b { font-size: 40px; }
  .hub-hero--home { padding-bottom: 120px; }
}
@media (max-width: 767.98px) {
  .hub-hero-bg { -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, .5) 0%, rgba(0, 0, 0, .12) 30%, rgba(0, 0, 0, .12) 100%); mask-image: linear-gradient(180deg, rgba(0, 0, 0, .5) 0%, rgba(0, 0, 0, .12) 30%, rgba(0, 0, 0, .12) 100%); }
  .hub-hero--home .hub-stats li { flex: 1 1 0; min-width: 0; padding: 10px 12px; }
  .hub-hero--home .hub-stats .hub-stats-live { flex: 1 1 100%; max-width: none; }
  .hub-hero--home .hub-stats b { font-size: 28px; }
}
/* three audience cards on the home page */
@media (min-width: 1024px) { .hub-aud--3 { grid-template-columns: repeat(3, 1fr); } }
/* /connect */
.hub-cx { display: grid; gap: 12px; align-items: stretch; }
.hub-cx-card { background: var(--card); border-radius: var(--r-xl); padding: 28px; box-shadow: var(--sh-1); }
.hub-cx-card h2 { margin: 14px 0 6px; font-size: 22px; font-weight: 700; letter-spacing: -.025em; }
.hub-cx-card p { margin: 0; color: var(--muted); }
.hub-cx-dir { display: inline-flex; width: 46px; height: 46px; border-radius: var(--r); background: var(--fill); align-items: center; justify-content: center; font-size: 22px; }
.hub .hub-cx-card--dark { background: var(--dark); } .hub .hub-cx-card--dark h2 { color: #fff; }
.hub-cx-card--dark p { color: rgba(255, 255, 255, .72); } .hub-cx-card--dark .hub-cx-dir { background: rgba(255, 255, 255, .14); color: #4affb0; }
.hub-cx-mid { display: flex; align-items: center; justify-content: center; gap: 8px; font-weight: 700; font-size: 13px; letter-spacing: .08em; color: var(--muted); }
.hub-cx-mid .bi { font-size: 20px; color: var(--ink); }
.hub-cx-rule { display: flex; gap: 16px; align-items: flex-start; margin-top: 16px; padding: 22px 26px; border-radius: var(--r-l); background: var(--card); box-shadow: var(--sh-1); }
.hub-cx-rule > .bi { font-size: 24px; margin-top: 2px; }
.hub-cx-rule h2 { margin: 0 0 4px; font-size: 18px; font-weight: 700; } .hub-cx-rule p { margin: 0; color: var(--muted); }
.hub-cx-foot { margin: 22px 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
.hub-cx-foot a:not(.hub-btn) { font-weight: 600; }
@media (min-width: 900px) { .hub-cx { grid-template-columns: 1fr auto 1fr; gap: 18px; } .hub-cx-mid { flex-direction: column; } }
@media (min-width: 1100px) { .hub-pt-steps.hub-pt-steps--3 { grid-template-columns: repeat(3, 1fr); } }

/* ── 2026-11-14 (2): guest-only top bar, "Not a guest?" paths, forms, registry score ── */
.hub .hub-nav-quiet { font-weight: 500; opacity: .78; }
.hub .hub-nav-quiet:hover { opacity: 1; }
.hub-rev { display: flex; gap: 22px; align-items: center; margin-top: 48px; padding: 26px 28px; border-radius: var(--r-xl); background: var(--card); box-shadow: var(--sh-1); }
.hub-rev-score { flex: none; display: flex; align-items: baseline; gap: 4px; padding: 14px 18px; border-radius: var(--r); background: var(--dark); color: #fff; }
.hub-rev-score b { font-size: 34px; font-weight: 700; letter-spacing: -.03em; line-height: 1; }
.hub-rev-score span { font-size: 14px; color: rgba(255, 255, 255, .6); }
.hub-rev p { margin: 6px 0 0; color: var(--muted); max-width: 760px; }
.hub-rev .hub-rev-nc { color: var(--ink); font-weight: 600; }
@media (max-width: 767.98px) { .hub-rev { flex-direction: column; align-items: flex-start; padding: 22px; } }
.hub-for { margin-top: 64px; scroll-margin-top: 76px; }
.hub-for-why { margin: 14px 0 0; padding: 26px 28px; border-radius: var(--r-xl); background: var(--dark); color: #fff; }
.hub .hub-for-why h3, .hub .hub-for-why h2 { margin: 0 0 8px; font-size: 22px; font-weight: 700; letter-spacing: -.025em; color: #4affb0; }
.hub-for-why p { margin: 0; max-width: 900px; font-size: 17px; line-height: 1.5; color: rgba(255, 255, 255, .86); }
.hub-for-why--page { margin-top: 16px; }
.hub-for .hub-aud { margin-top: 12px; }
@media (min-width: 768px) { .hub-aud--4 { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1180px) { .hub-aud--4 { grid-template-columns: repeat(4, 1fr); } .hub-aud--4 .hub-aud-card { padding: 22px; } .hub-aud--4 .hub-aud-card h3 { font-size: 19px; } }
.hub-cx-own { margin-top: 48px; scroll-margin-top: 76px; }
.hub-cx-own > p { margin: 6px 0 0; color: var(--muted); max-width: 760px; }
.hub-cx-own blockquote { margin: 14px 0 0; padding: 18px 22px; border-radius: var(--r-l); background: var(--card); box-shadow: var(--sh-1); border-left: 3px solid var(--ink); font-size: 16px; line-height: 1.5; max-width: 860px; overflow-wrap: anywhere; }
.hub-cx-lead { margin: 6px 0 0; color: var(--muted); max-width: 820px; }
#talk { scroll-margin-top: 76px; }
.hub-start { display: grid; gap: 16px; margin-top: 18px; align-items: start; }
.hub-start .hub-panel-card { margin: 0; }
.hub-start-side { padding: 24px 26px; border-radius: var(--r-l); background: var(--card); box-shadow: var(--sh-1); }
.hub-start-side h2 { margin: 0 0 12px; font-size: 18px; font-weight: 700; }
.hub-start-side ol { margin: 0 0 14px; padding: 0; list-style: none; counter-reset: st; display: grid; gap: 14px; }
.hub-start-side li { counter-increment: st; position: relative; padding-left: 38px; }
.hub-start-side li::before { content: counter(st); position: absolute; left: 0; top: 0; width: 26px; height: 26px; border-radius: var(--r-pill); background: var(--dark); color: #fff; font-size: 13px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.hub-start-side li b { display: block; font-size: 15px; } .hub-start-side li span { font-size: 14px; color: var(--muted); }
.hub-start-side a { font-weight: 600; }
@media (min-width: 960px) { .hub-start { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 20px; } }
.hub-form-grid { display: grid; gap: 14px; }
.hub-field { display: flex; flex-direction: column; gap: 6px; font-size: 14px; font-weight: 600; }
.hub-field input, .hub-field textarea { width: 100%; min-height: 48px; padding: 12px 14px; border: .5px solid var(--line2); border-radius: var(--r-s); background: #fff; font: inherit; font-size: 16px; font-weight: 400; color: var(--ink); }
.hub-field textarea { min-height: 110px; resize: vertical; }
.hub .hub-field input:focus-visible, .hub .hub-field textarea:focus-visible { outline: 2px solid var(--ink); outline-offset: 1px; }
.hub-field.is-bad input, .hub-field.is-bad textarea { border-color: var(--red); box-shadow: 0 0 0 1px var(--red); }
.hub-field-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.hub-form-kind { border: 0; padding: 0; margin: 0 0 16px; display: flex; flex-wrap: wrap; gap: 8px; }
.hub-form-kind legend { font-size: 14px; font-weight: 600; margin-bottom: 8px; padding: 0; }
.hub-form-kind label { position: relative; cursor: pointer; }
.hub-form-kind input { position: absolute; opacity: 0; }
.hub-form-kind span { display: inline-flex; align-items: center; min-height: 44px; padding: 8px 16px; border-radius: var(--r-pill); border: .5px solid var(--line2); background: #fff; font-size: 15px; font-weight: 500; }
.hub-form-kind input:checked + span { background: var(--dark); color: #fff; border-color: var(--dark); }
.hub-form-kind input:focus-visible + span { outline: 2px solid var(--ink); outline-offset: 2px; }
.hub-form-err { margin: 14px 0 0; color: var(--red); font-weight: 600; }
.hub-form .hub-btn { margin-top: 18px; min-width: 160px; }
.hub-form-done { text-align: center; padding: 28px 10px; }
.hub-form-done .bi { font-size: 40px; color: var(--green); }
.hub-form-done h3 { margin: 10px 0 4px; font-size: 22px; } .hub-form-done p { margin: 0; color: var(--muted); }
@media (min-width: 640px) { .hub-form-grid { grid-template-columns: 1fr 1fr; } .hub-field--wide { grid-column: 1 / -1; } }

/* destination-page cards: type line + registry score, CTA to the property's official page */
.hub-pc .hub-kind { margin: 2px 0 0; }
.hub-pc .hub-score { margin: 8px 0 2px; }
.hub-pc .hub-score b { min-width: 38px; padding: 5px 7px; font-size: 15px; }
.hub-pc-cta .bi { margin-left: 6px; }