/*! HyperDC UI - Studio page styles (generated by tools/build_css.py; do not edit): site shell + Studio blocks.
    Loaded instead of hdc-client.css, hdc-portal.css, hdc-pages.css and hdc-compat.css on Studio pages (PF1). */

/* ===== hdc-client.css @public ===== */
.hdc-site-main { min-height: 50vh; }
/* Sticky footer for the site and cart layouts (body > header + main + footer): the body is at least one screen tall and
   main takes the free height, so a short page ends with the footer at the bottom edge, not page background under it.
   Every direct body child here has zero block margins and no auto inline margins; overlays/drawers/dialogs are fixed or
   in the top layer and are not affected. The client and auth layouts already fill the screen (.hdc-app/.hdc-auth). */
body.hdc:has(> .hdc-site-main) { display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; }
body.hdc:has(> .hdc-site-main) > .hdc-site-main { flex: 1 0 auto; }
.hdc-site-content { padding-block: clamp(1.5rem, 1rem + 2vw, 3rem) clamp(3rem, 2rem + 3vw, 5rem); }
.hdc-site-content.has-aside { display: grid; gap: 2rem; align-items: start; }
@media (min-width: 992px) { .hdc-site-content.has-aside { grid-template-columns: 280px minmax(0, 1fr); } }
@media (max-width: 991.98px) { .hdc-site-content.has-aside > .hdc-site-aside { order: 1; } }
.hdc-site-primary { min-width: 0; }
.hdc-locale__menu { width: min(360px, calc(100vw - 32px)); max-height: 70vh; overflow-y: auto; }
.hdc-locale__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px; }
.hdc-i--mark { --hdc-i: 30px; color: var(--hdc-primary); }
.hdc-i--mark-sm { --hdc-i: 22px; color: var(--hdc-primary); }
.hdc-i--mark-lg { --hdc-i: 37px; color: var(--hdc-primary); }
.hdc-i--ink { color: var(--hdc-heading); }
.hdc-i--success { color: var(--hdc-success); }
.hdc-i--ai { color: var(--hdc-ai); }
.hdc-admin-return { position: fixed; inset-inline-start: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); z-index: 60; }
.hdc-flip-y { transform: rotate(180deg); }
.hdc-alert__body { min-width: 0; }
.hdc-alert__list { margin: .35rem 0 0; padding-inline-start: 1.1rem; }
.hdc-alert__title { display: block; margin-bottom: .2rem; }
.hdc-kv-inline { display: flex; flex-wrap: wrap; gap: .4rem 1.25rem; color: var(--hdc-text-2); font-size: var(--hdc-fs-sm); }
.hdc-kv-inline b { color: var(--hdc-heading); font-weight: 600; }
.hdc-drawer__locale { padding: 1rem .5rem 0; }


/* ===== hdc-portal.css @public ===== */
/* MD1: centred on both axes like every modal (hdc-core.css); a fixed height keeps the search field still while the
   results change. Full screen on phones (hdc-core.css). */
dialog.hdc-cmd { --hdc-dlg-w: 660px; height: min(560px, calc(100vh - 48px)); height: min(560px, calc(100dvh - 48px)); padding: 0; overflow: hidden; }
dialog.hdc-cmd[open] { display: flex; flex-direction: column; }
.hdc-cmd__bar, .hdc-cmd__foot { flex: 0 0 auto; }
.hdc-cmd__close { display: inline-grid; flex: 0 0 auto; place-items: center; min-width: 32px; height: 32px; padding: 0; border: 0; border-radius: var(--hdc-r-sm); background: none; color: var(--hdc-text-3); cursor: pointer; }
.hdc-cmd__close:hover { color: var(--hdc-heading); }
.hdc-cmd__close:focus-visible { outline: none; box-shadow: var(--hdc-focus-ring); }
.hdc-cmd__close > .hdc-i { display: none; }
@media (hover: none), (max-width: 600px) {
  .hdc-cmd__close > .hdc-kbd { display: none; }
  .hdc-cmd__close > .hdc-i { display: block; }
}
.hdc-cmd__bar { display: flex; align-items: center; gap: .75rem; padding: .9rem 1.1rem; border-bottom: 1px solid var(--hdc-border); color: var(--hdc-text-3); }
.hdc-cmd__bar .hdc-i { --hdc-i: 20px; }
.hdc-cmd__input { flex: 1 1 auto; min-width: 0; height: 36px; border: 0; background: transparent; color: var(--hdc-heading); font: 500 var(--hdc-fs-lg)/1 var(--hdc-font-sans); }
.hdc-cmd__input:focus { outline: none; }
.hdc-cmd__input::-webkit-search-cancel-button { display: none; }
.hdc-cmd.is-loading .hdc-cmd__bar::after { content: ""; width: 16px; height: 16px; border: 2px solid var(--hdc-border-strong); border-top-color: var(--hdc-primary); border-radius: 50%; animation: hdc-spin .7s linear infinite; }
.hdc-cmd__body { flex: 1 1 auto; overflow-y: auto; padding: .4rem; overscroll-behavior: contain; }
.hdc-cmd__list { display: grid; gap: 1px; margin: 0; padding: 0; list-style: none; }
.hdc-cmd__group { padding: .7rem .7rem .3rem; color: var(--hdc-text-3); font: 600 var(--hdc-fs-2xs)/1 var(--hdc-font-mono); letter-spacing: var(--hdc-tracking-label); text-transform: uppercase; }
.hdc-cmd__item { display: flex; align-items: center; gap: .75rem; padding: .55rem .7rem; border-radius: var(--hdc-r-md); color: var(--hdc-text); cursor: pointer; }
.hdc-cmd__item.is-active { background: var(--hdc-primary-soft); color: var(--hdc-heading); }
.hdc-cmd__item .hdc-icon-tile { --hdc-tile: 32px; }
.hdc-cmd__text { display: grid; flex: 1 1 auto; min-width: 0; font-size: var(--hdc-fs-sm); font-weight: 550; }
.hdc-cmd__title, .hdc-cmd__sub { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hdc-cmd__sub { color: var(--hdc-text-3); font-size: var(--hdc-fs-xs); font-weight: 400; }
.hdc-cmd__foot { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; padding: .6rem 1.1rem; border-top: 1px solid var(--hdc-border); background: var(--hdc-surface-sunken); color: var(--hdc-text-3); font-size: var(--hdc-fs-xs); }
.hdc-cmd__live { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.hdc-cmd__empty { padding: 1.5rem .75rem; color: var(--hdc-text-3); font-size: var(--hdc-fs-sm); text-align: center; }
/* PK1: HyperDC Docs guides — title (two lines at most) + "Section · excerpt" (two lines at most), matches marked like
   the docs search; the "Search all guides for …" row in the accent colour. Icons stay bare (no fill, frame or ring). */
.hdc-cmd mark { padding: 0; background: none; color: var(--hdc-primary); font-weight: 650; }
.hdc-cmd__item--guide { align-items: flex-start; }
.hdc-cmd__item--guide > .hdc-icon-tile { margin-block-start: 1px; }
.hdc-cmd__item--guide .hdc-cmd__title, .hdc-cmd__snip { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; white-space: normal; overflow-wrap: anywhere; }
.hdc-cmd__item--guide .hdc-cmd__title { line-height: 1.4; }
.hdc-cmd__snip { margin-block-start: .1rem; line-height: 1.5; }
.hdc-cmd__section { color: var(--hdc-text-2); font-weight: 600; }
.hdc-cmd__section::after { content: "·"; content: "·" / ""; margin-inline: .4em; color: var(--hdc-text-3); font-weight: 400; }
.hdc-cmd__item--more { color: var(--hdc-primary); }
.hdc-cmd__item--more .hdc-cmd__title { font-weight: 600; }
.hdc-cmd__go { flex: 0 0 auto; color: var(--hdc-text-3); }
.hdc-cmd__item--more.is-active .hdc-cmd__go { color: var(--hdc-primary); }
.hdc-shortcuts dd { display: flex; gap: .3rem; justify-content: flex-end; }
.hdc-topbar__kbd { position: absolute; inset-inline-end: .6rem; pointer-events: none; }
@media (max-width: 1023.98px) { .hdc-topbar__kbd { display: none; } }
.hdc-slot { margin-block: 0 1.5rem; }
.hdc-slot--after { margin-block: 1.5rem 0; }
.hdc-slot > .hdc-section { padding-block: 0; }

.hdc-banner {
  display: flex; flex-wrap: wrap; align-items: center; gap: .85rem 1.25rem;
  margin-bottom: 1.25rem; padding: 1rem 1.25rem;
  border: 1px solid var(--hdc-border); border-radius: var(--hdc-r-lg); background: var(--hdc-surface);
}
.hdc-banner--soft { background: radial-gradient(120% 140% at 100% 0%, var(--hdc-primary-soft) 0%, transparent 60%), var(--hdc-surface); }
.hdc-banner--night, .hdc-banner--brand { border-color: transparent; }
.hdc-banner--night { background: linear-gradient(180deg, var(--hdc-night-800), var(--hdc-night-900)); --hdc-heading: #f4f7fb; --hdc-text: #c9d3e0; --hdc-text-2: #a5b3c6; color: var(--hdc-text); }
.hdc-banner--brand { background: var(--hdc-brand-glow), var(--hdc-brand-gradient); --hdc-heading: #fff; --hdc-text: rgba(255, 255, 255, .9); --hdc-text-2: rgba(255, 255, 255, .78); color: var(--hdc-text); }
.hdc-banner__img { width: 56px; height: 56px; object-fit: contain; }
.hdc-banner__body { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .75rem; flex: 1 1 280px; min-width: 0; }
.hdc-banner__title { color: var(--hdc-heading); }
.hdc-banner__text { color: var(--hdc-text-2); font-size: var(--hdc-fs-sm); }
.hdc-banner__timer { color: var(--hdc-heading); font: 600 var(--hdc-fs-sm)/1 var(--hdc-font-mono); font-variant-numeric: tabular-nums; }
.hdc-banner__close { display: inline-grid; place-items: center; width: 30px; height: 30px; border: 0; border-radius: var(--hdc-r-sm); background: transparent; color: var(--hdc-text-2); cursor: pointer; }
.hdc-banner-toast {
  position: fixed; inset-inline-end: 16px; bottom: calc(76px + env(safe-area-inset-bottom, 0px)); z-index: 1065;
  display: grid; gap: .5rem; width: min(380px, calc(100vw - 32px)); padding: 1.1rem 1.2rem;
  border: 1px solid var(--hdc-border); border-radius: var(--hdc-r-xl); background: var(--hdc-surface-raised); box-shadow: var(--hdc-shadow-lg);
  animation: hdc-slide-up var(--hdc-dur-3) var(--hdc-ease);
}
dialog.hdc-popup { --hdc-dlg-w: 520px; padding: 0; overflow: auto; }
dialog.hdc-popup > * { flex: 0 0 auto; }
.hdc-popup__img { display: block; width: 100%; max-height: 220px; object-fit: cover; }
.hdc-popup__body { display: grid; gap: .85rem; padding: 1.75rem; }
.hdc-popup__body h2 { margin: 0; font-size: var(--hdc-fs-h3); }
.hdc-popup__body p { margin: 0; color: var(--hdc-text-2); }
.hdc-popup__close { position: absolute; top: .6rem; inset-inline-end: .6rem; z-index: 1; display: inline-grid; place-items: center; width: 34px; height: 34px; border: 0; border-radius: 50%; background: color-mix(in srgb, var(--hdc-surface) 80%, transparent); color: var(--hdc-heading); cursor: pointer; }
.hdc-copy--lg { padding: .45rem .8rem; font-size: var(--hdc-fs-base); }

/* Banner variants: hero (bigger promo card) and the order form summary placement */
.hdc-banner--hero { padding: clamp(1.25rem, 1rem + 1.5vw, 2rem); }
.hdc-banner--hero .hdc-banner__title { font-size: var(--hdc-fs-xl); letter-spacing: -.015em; }
.hdc-banner--at-summary { flex-direction: column; align-items: stretch; gap: .65rem; margin: 0 0 1rem; padding: .9rem 1rem; }
.hdc-banner--at-summary .hdc-banner__body { flex: 0 1 auto; }
.hdc-banner--at-summary .hdc-banner__close { position: absolute; top: .35rem; inset-inline-end: .35rem; }
.hdc-banner--at-summary { position: relative; padding-inline-end: 2.5rem; }

/* Full-bleed placements (includes/hdc-place.tpl): "after hero" (moved by js/hdc.js) and "before footer" */
.hdc-place { padding-block: clamp(1rem, .75rem + 1vw, 1.75rem); }
.hdc-place__banners > .hdc-banner:last-child { margin-bottom: 0; }
.hdc-place .hdc-slot { margin-block: 0; }
.hdc-place__banners + .hdc-slot { margin-top: 1.25rem; }
.hdc-place:not(:has(.hdc-slot, .hdc-banner:not([hidden]))) { display: none; } /* every banner dismissed, no slot */
.hdc-place__banners:not(:has(.hdc-banner:not([hidden]))) { display: none; }
.hdc-js [data-hdc-place="after-hero"]:not(.is-placed) {
  visibility: hidden; max-height: 0; overflow: hidden; padding-block: 0;
  animation: hdc-place-fallback 0s linear 3s forwards; /* shown in place if js/hdc.js never runs */
}
@keyframes hdc-place-fallback { to { visibility: visible; max-height: none; overflow: visible; padding-block: 1rem; } }

/* ==========================================================================
   6. Layout variants from Studio ($hdc.layoutConfig, header.tpl — docs/handoff/T6.md)
   ========================================================================== */
@media (min-width: 1100px) {
  .hdc-header--centered .hdc-nav { display: flex; justify-content: center; }
  .hdc-header--minimal .hdc-nav { display: none; }
  .hdc-header--minimal .hdc-burger { display: inline-grid; }
}
.hdc-header--transparent:not(.is-scrolled) { background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; }
.hdc-footer--minimal .hdc-footer__main, .hdc-footer--minimal .hdc-footer__cta { display: none; }
.hdc-footer--compact .hdc-footer__main > :not(.hdc-footer__brand) { display: none; }
.hdc-footer--compact .hdc-footer__main { grid-template-columns: 1fr; }

/* headerSticky = false (html.hdc-header-static): site header and client top bar scroll away */
.hdc-header--static, .hdc-header-static .hdc-topbar { position: relative; }
.hdc-header-static { scroll-padding-top: 16px; }
@media (min-width: 1200px) { .hdc-header-static .hdc-app__aside { top: 1.5rem; } }

/* topbar = true: $hdc.menus.topbar above the site header (includes/hdc-sitebar.tpl) */
.hdc-sitebar { position: relative; z-index: 55; border-bottom: 1px solid var(--hdc-border); background: var(--hdc-bg-soft); font-size: var(--hdc-fs-xs); }
.hdc-sitebar__inner { display: flex; justify-content: flex-end; }
.hdc-sitebar__list { display: flex; align-items: center; gap: 0 1.1rem; min-width: 0; margin: 0; padding: 0 2px; list-style: none; overflow-x: auto; scrollbar-width: none; }
.hdc-sitebar__list::-webkit-scrollbar { display: none; }
.hdc-sitebar__link { display: inline-flex; align-items: center; gap: .35rem; min-height: 34px; color: var(--hdc-text-2) !important; font-weight: 550; white-space: nowrap; }
.hdc-sitebar__link:hover { color: var(--hdc-heading) !important; }
.hdc-sitebar__link .hdc-i { --hdc-i: 15px; color: var(--hdc-text-3); }
.hdc-sitebar__link .hdc-badge { font-size: var(--hdc-fs-2xs); }
@media (max-width: 767.98px) { .hdc-sitebar__inner { justify-content: flex-start; } }

/* container = "wide" (html.hdc-wide): site chrome and WHMCS page content; builder blocks keep their own width */
.hdc-wide :is(.hdc-header, .hdc-footer, .hdc-announce, .hdc-sitebar, .hdc-place) .hdc-container,
.hdc-wide .hdc-site-content { --hdc-container: var(--hdc-container-wide); }
/* WD1: never narrower than the Design width (--hdc-app-max, 1920px by default) */
.hdc-wide .hdc-app__content, .hdc-wide .hdc-verify__inner { max-width: max(1680px, var(--hdc-app-max)); }

/* sidebar = "end": footer.tpl renders WHMCS sidebars after the content, shown on the inline-end side */
@media (min-width: 992px) { .hdc-site-content.has-aside.hdc-aside-end { grid-template-columns: minmax(0, 1fr) 280px; } }
@media (min-width: 1200px) { .hdc-app__content.has-aside.hdc-aside-end { grid-template-columns: minmax(0, 1fr) var(--hdc-aside-w, 256px); } }

/* clientNav = "top": horizontal navigation under the client top bar (includes/hdc-client-topnav.tpl). The side
   navigation stays the phone/tablet drawer. */
.hdc-topbar__brand, .hdc-topnav { display: none; }
@media (min-width: 1100px) {
  .hdc-app--topnav { grid-template-columns: minmax(0, 1fr); }
  .hdc-app--topnav .hdc-app__side { display: none; }
  .hdc-topbar--topnav .hdc-topbar__brand { display: inline-flex; flex: 0 0 auto; margin-inline-end: .75rem; }
  .hdc-topbar--topnav .hdc-topbar__brand img { height: 27px; width: auto; }
  .hdc-topnav {
    position: relative; z-index: 44; display: block;
    padding-inline: clamp(1rem, 2vw, 2rem);
    border-bottom: 1px solid var(--hdc-border); background: var(--hdc-surface);
  }
  .hdc-topnav__list { display: flex; flex-wrap: wrap; align-items: center; gap: .15rem; max-width: var(--hdc-app-max); margin: 0 auto; padding: .4rem 0; list-style: none; }
  .hdc-wide .hdc-topnav__list { max-width: max(1680px, var(--hdc-app-max)); }
  .hdc-topnav__link {
    display: inline-flex; align-items: center; gap: .45rem; height: 38px; padding: 0 .75rem;
    border: 0; border-radius: var(--hdc-r-sm); background: transparent;
    color: var(--hdc-text) !important; font: 550 var(--hdc-fs-sm)/1 var(--hdc-font-sans); white-space: nowrap; cursor: pointer;
    transition: background-color var(--hdc-dur-1), color var(--hdc-dur-1);
  }
  .hdc-topnav__link .hdc-i, .hdc-topnav__fa { --hdc-i: 17px; color: var(--hdc-text-3); }
  .hdc-topnav__link:hover, .hdc-topnav__item.is-open > .hdc-topnav__link { background: var(--hdc-bg-soft); color: var(--hdc-heading) !important; }
  .hdc-topnav__link.is-active { background: var(--hdc-primary-soft); color: var(--hdc-primary-text) !important; }
  .hdc-topnav__link.is-active .hdc-i { color: var(--hdc-primary); }
  .hdc-topnav__link .hdc-topnav__chev { --hdc-i: 14px; transition: transform var(--hdc-dur-2) var(--hdc-ease); }
  .hdc-topnav__item.is-open .hdc-topnav__chev { transform: rotate(180deg); }
  .hdc-topnav__menu { top: calc(100% + 4px); }
}

/* Login style "centered" (Client Area Studio): no brand panel, the card sits in the middle */
.hdc-auth--centered { grid-template-columns: minmax(0, 1fr); background: var(--hdc-bg-soft); }
.hdc-auth--centered .hdc-auth__main { background: transparent; }
@media (min-width: 1024px) {
  .hdc-auth--centered { grid-template-columns: minmax(0, 1fr); }
  .hdc-auth--centered .hdc-auth__mobile-logo { visibility: visible; }
}
@media (min-width: 560px) {
  .hdc-auth--centered .hdc-auth__content > .hdc-auth-card {
    padding: clamp(1.5rem, 1rem + 1.5vw, 2.25rem);
    border: 1px solid var(--hdc-border); border-radius: var(--hdc-r-xl);
    background: var(--hdc-surface); box-shadow: var(--hdc-shadow-md);
  }
}


/* ===== part: availability.css ===== */
/* PD1 — package-driven availability (docs/handoff/pd1.md). The locations and os-grid blocks reuse their own rules
   (blocks-commerce.css, oscatalog.css); this part only adds the "Offered on" card line, the editor-preview notes and the
   empty-state box of os-grid. Tokens only (light/dark), logical properties only (RTL). */

/* block: locations — "Offered on: …" line of a card in mode "plans" */
.hdc-b-locations .hdc-b-loc__plans { color: var(--hdc-text-2); line-height: 1.45; }
.hdc-b-locations .hdc-b-loc__plans-label { color: var(--hdc-text-3); font-weight: 600; }

/* blocks: locations, os-grid — editor-preview notes (never rendered for visitors) */
:is(.hdc-b-locations, .hdc-b-os-grid) .hdc-b-avail-note {
  margin: 1rem 0 0;
  padding: .6rem .9rem;
  border: 1px dashed var(--hdc-border-strong);
  border-radius: var(--hdc-r-md);
  color: var(--hdc-text-2);
  font-size: var(--hdc-fs-xs);
  line-height: 1.5;
  overflow-wrap: anywhere;
}
.hdc-b-locations .hdc-b-empty .hdc-b-avail-note { margin: 0; text-align: start; }

/* block: os-grid — editor-preview hint of source "plans" (the same box as the B1 blocks' empty state) */
.hdc-b-os-grid .hdc-b-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .75rem;
  max-width: 560px;
  margin-inline: auto;
  padding: 2rem 1.5rem;
  border: 1px dashed var(--hdc-border-strong);
  border-radius: var(--hdc-r-lg);
  background: var(--hdc-surface);
  color: var(--hdc-text-2);
  text-align: center;
}
.hdc-b-os-grid .hdc-b-empty p { margin: 0; }
.hdc-b-os-grid .hdc-b-empty > .hdc-i { color: var(--hdc-text-3); }


/* ===== part: blocks-apps.css ===== */
/* ==========================================================================
   AP1 (1.5.1) — solution and app pages: block app-catalog (cards of solution pages with search and category chips)
   and the icon cover of the game-hero block on app pages (setting "glyph"). Tokens and logical properties only (dark
   mode, RTL). Bundled into hdc-pages.css by tools/build_css.py.
   ========================================================================== */

/* block: app-catalog */
.hdc-b-app-catalog [hidden] { display: none !important; }
.hdc-b-ac--blue { --ac-a: var(--hdc-blue-500); }
.hdc-b-ac--cyan { --ac-a: var(--hdc-cyan-500); }
.hdc-b-ac--green { --ac-a: var(--hdc-green-600); }
.hdc-b-ac--amber { --ac-a: var(--hdc-amber-600); }
.hdc-b-ac--red { --ac-a: var(--hdc-red-600); }
.hdc-b-ac--violet { --ac-a: var(--hdc-violet-600); }
.hdc-b-ac--slate { --ac-a: var(--hdc-gray-600); }
.hdc-b-ac__head { margin-bottom: clamp(1.25rem, 1rem + 1vw, 1.75rem); }
.hdc-b-ac__title { margin: 0 0 .35rem; }

/* search + chips + status */
.hdc-b-ac__tools { display: grid; gap: .85rem; margin-bottom: 1.25rem; }
.hdc-b-ac__tools.is-center { justify-items: center; text-align: center; }
.hdc-b-ac__search { position: relative; width: 100%; max-width: 560px; }
.hdc-b-ac__search-icon { position: absolute; inset-inline-start: 1rem; top: 50%; translate: 0 -50%; color: var(--hdc-text-3); pointer-events: none; }
.hdc-b-ac__input { width: 100%; min-height: 48px; padding-inline: 2.75rem 1rem; border-radius: var(--hdc-r-pill); background: var(--hdc-surface-raised); box-shadow: var(--hdc-shadow-sm); }
.hdc-b-ac__input::-webkit-search-cancel-button { cursor: pointer; }
.hdc-b-ac__chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.hdc-b-ac__tools.is-center .hdc-b-ac__chips { justify-content: center; }
.hdc-b-ac__chip {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  min-height: 38px;
  padding: 0 .9rem;
  border: 1px solid var(--hdc-border-strong);
  border-radius: var(--hdc-r-pill);
  background: var(--hdc-surface);
  color: var(--hdc-text);
  font: 500 var(--hdc-fs-sm)/1 var(--hdc-font-sans);
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--hdc-dur-1), border-color var(--hdc-dur-1), color var(--hdc-dur-1);
}
.hdc-b-ac__chip:hover { border-color: var(--hdc-primary); color: var(--hdc-heading); }
.hdc-b-ac__chip:focus-visible { outline: none; box-shadow: var(--hdc-focus-ring); }
.hdc-b-ac__chip[aria-pressed="true"] { border-color: var(--hdc-primary-fill); background: var(--hdc-primary-fill); color: var(--hdc-on-primary); }
.hdc-b-ac__n { min-width: 1.5em; padding: .15rem .4rem; border-radius: var(--hdc-r-pill); background: var(--hdc-bg-muted); color: var(--hdc-text-2); font: 600 var(--hdc-fs-2xs)/1.2 var(--hdc-font-mono); text-align: center; }
.hdc-b-ac__n:empty { display: none; }
.hdc-b-ac__chip[aria-pressed="true"] .hdc-b-ac__n { background: rgba(255, 255, 255, .22); color: var(--hdc-on-primary); }
@media (max-width: 767.98px) {
  /* one swipeable row of chips (the row scrolls, never the page) */
  .hdc-b-ac__chips { flex-wrap: nowrap; justify-content: flex-start !important; width: calc(100% + var(--hdc-gutter) * 2); margin-inline: calc(var(--hdc-gutter) * -1); padding: .15rem var(--hdc-gutter) .45rem; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; }
  .hdc-b-ac__chips::-webkit-scrollbar { display: none; }
  .hdc-b-ac__chip { scroll-snap-align: start; }
}
.hdc-b-ac__status { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem 1rem; min-height: 1.4em; }
.hdc-b-ac__tools.is-center .hdc-b-ac__status { justify-content: center; }
.hdc-b-ac__count { margin: 0; color: var(--hdc-text-3); font-size: var(--hdc-fs-sm); }
.hdc-b-ac__cat-link { display: inline-flex; align-items: center; gap: .3rem; color: var(--hdc-primary-text); font-size: var(--hdc-fs-sm); font-weight: 600; text-decoration: none; }
.hdc-b-ac__cat-link:hover { text-decoration: underline; }

/* cards */
.hdc-b-ac__grid {
  --ac-cols: 3;
  display: grid;
  gap: 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, max(240px, (100% - (var(--ac-cols) - 1) * 1rem) / var(--ac-cols))), 1fr));
}
.hdc-b-ac__grid[data-cols="2"] { --ac-cols: 2; }
.hdc-b-ac__grid[data-cols="4"] { --ac-cols: 4; }
.hdc-b-ac__card {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: .9rem;
  min-width: 0;
  padding: 1.1rem 1.15rem 1rem;
  border: 1px solid var(--hdc-border);
  border-radius: var(--hdc-r-lg);
  background: var(--hdc-surface);
  box-shadow: var(--hdc-shadow-xs);
  transition: transform var(--hdc-dur-2) var(--hdc-ease), box-shadow var(--hdc-dur-2), border-color var(--hdc-dur-2);
}
.hdc-b-ac__card::before {
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline: 1.15rem;
  height: 2px;
  border-radius: 0 0 2px 2px;
  background: var(--ac-a);
  opacity: 0;
  transition: opacity var(--hdc-dur-2);
}
.hdc-b-ac__card.is-link:hover { transform: translateY(-2px); border-color: var(--hdc-border-strong); box-shadow: var(--hdc-shadow-md); }
.hdc-b-ac__card.is-link:hover::before { opacity: 1; }
.hdc-b-ac__card:focus-within { border-color: var(--hdc-primary); box-shadow: var(--hdc-focus-ring); }
.hdc-b-ac__tile {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 44px;
  height: 44px;
  color: var(--ac-a); /* bare icon in the app's tone, never boxed (owner rule 1.5.2) */
  transition: transform var(--hdc-dur-2) var(--hdc-ease);
}
:root[data-theme="dark"] .hdc-b-ac__tile { color: color-mix(in srgb, var(--ac-a) 62%, #fff); }
.hdc-b-ac__tile .hdc-i { --hdc-i: 30px; }
.hdc-b-ac__card.is-link:hover .hdc-b-ac__tile { transform: translateY(-1px); }
.hdc-b-ac__body { display: flex; flex: 1 1 auto; flex-direction: column; gap: .35rem; min-width: 0; min-height: 100%; }
.hdc-b-ac__name { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem .5rem; margin: 0; font-size: var(--hdc-fs-md, 1.0625rem); letter-spacing: -.01em; line-height: 1.3; }
.hdc-b-ac__link { color: var(--hdc-heading); text-decoration: none; }
.hdc-b-ac__link::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
.hdc-b-ac__link:focus-visible { outline: none; }
.hdc-b-ac__badge { height: 19px; padding: 0 .45rem; font-size: .6875rem; }
.hdc-b-ac__tagline { margin: 0; color: var(--hdc-text-2); font-size: var(--hdc-fs-sm); line-height: 1.5; }
.hdc-b-ac__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem; margin-top: auto; padding-top: .45rem; }
.hdc-b-ac__tag { padding: .2rem .5rem; border-radius: var(--hdc-r-pill); background: var(--hdc-bg-muted); color: var(--hdc-text-2); font-size: var(--hdc-fs-2xs); font-weight: 600; }
.hdc-b-ac__more { display: inline-flex; align-items: center; gap: .3rem; margin-inline-start: auto; color: var(--hdc-primary-text); font-size: var(--hdc-fs-sm); font-weight: 600; }
.hdc-b-ac__more .hdc-i { transition: transform var(--hdc-dur-2) var(--hdc-ease); }
.hdc-b-ac__card.is-link:hover .hdc-b-ac__more .hdc-i { transform: translateX(3px); }
[dir="rtl"] .hdc-b-ac__card.is-link:hover .hdc-b-ac__more .hdc-i { transform: scaleX(-1) translateX(3px); }
.hdc-b-ac__price { margin-inline-start: auto; color: var(--hdc-text-2); font-size: var(--hdc-fs-xs); white-space: nowrap; }
.hdc-b-ac__price strong { color: var(--hdc-heading); font-size: var(--hdc-fs-sm); }
.hdc-b-ac__price-unit { color: var(--hdc-text-3); }

/* empty state + note */
.hdc-b-ac__empty { display: grid; justify-items: center; gap: .75rem; padding: 2.5rem 1rem; border: 1px dashed var(--hdc-border-strong); border-radius: var(--hdc-r-lg); color: var(--hdc-text-2); text-align: center; }
.hdc-b-ac__empty p { max-width: 46ch; margin: 0; }
.hdc-b-ac__note { display: flex; align-items: flex-start; gap: .45rem; max-width: 80ch; margin: 1.25rem 0 0; color: var(--hdc-text-3); font-size: var(--hdc-fs-xs); line-height: 1.55; }
.hdc-b-ac__note .hdc-i { flex: none; margin-top: .1rem; }

@media (prefers-reduced-motion: reduce) {
  .hdc-b-ac__card, .hdc-b-ac__card::before, .hdc-b-ac__more .hdc-i { transition: none; }
  .hdc-b-ac__card.is-link:hover { transform: none; }
  .hdc-b-ac__card.is-link:hover .hdc-b-ac__more .hdc-i { transform: none; }
}

/* block: game-hero on app pages — an icon of the theme sprite as the cover glyph (stroke icons are drawn thinner at
   this size so they read like the genre glyphs) */
.hdc-b-gh__glyph--icon { width: 52%; bottom: -26%; stroke-width: 1.25; opacity: .22; }


/* ===== part: blocks-claims.css ===== */
/* ==========================================================================
   F1 — Facts & claims (docs/FACTS.md §4). Bundled into hdc-pages.css by tools/build_css.py.
   Tokens only (dark mode and night/brand sections follow automatically), logical properties only (RTL).
   ========================================================================== */

/* ==========================================================================
   block: claims — strip (badges) · grid (cards) · list (compact)
   ========================================================================== */
.hdc-b-claims .hdc-b-claims__list {
  display: grid;
  gap: .75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.hdc-b-claims .hdc-b-claims__item {
  display: flex;
  align-items: flex-start;
  gap: .75rem;
  min-width: 0;
  color: var(--hdc-text);
}
.hdc-b-claims .hdc-b-claims__icon {
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  color: var(--hdc-primary);
}
.hdc-b-claims .hdc-b-claims__body {
  display: flex;
  flex-direction: column;
  gap: .3rem;
  min-width: 0;
}
.hdc-b-claims .hdc-b-claims__title {
  margin: 0;
  color: var(--hdc-heading);
  font-size: var(--hdc-fs-base);
  font-weight: 600;
  line-height: 1.35;
  overflow-wrap: anywhere;
}
.hdc-b-claims .hdc-b-claims__text {
  color: var(--hdc-text-2);
  font-size: var(--hdc-fs-sm);
  line-height: 1.55;
}

/* strip: one wrapping line of badges (under a hero or a price table) */
.hdc-b-claims .hdc-b-claims__list--strip {
  display: flex;
  flex-wrap: wrap;
  gap: .625rem .75rem;
}
.hdc-b-claims .hdc-b-claims__list--strip.hdc-b-claims__list--center { justify-content: center; }
.hdc-b-claims .hdc-b-claims__list--strip .hdc-b-claims__item {
  align-items: center;
  gap: .5rem;
  padding-block: .45rem;
  padding-inline: .7rem .9rem;
  border: 1px solid var(--hdc-border);
  border-radius: var(--hdc-r-pill);
  background: var(--hdc-surface);
}
.hdc-b-claims .hdc-b-claims__list--strip .hdc-b-claims__icon { color: var(--hdc-success); }
.hdc-b-claims .hdc-b-claims__list--strip .hdc-b-claims__title { font-size: var(--hdc-fs-sm); font-weight: 600; }

/* grid: cards with an icon tile — 1 column, 2 from 640 px, the chosen count (2–4) from 960 px */
.hdc-b-claims .hdc-b-claims__list--grid {
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(.875rem, .6rem + 1vw, 1.25rem);
}
@media (min-width: 640px) {
  .hdc-b-claims .hdc-b-claims__list--grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 960px) {
  .hdc-b-claims .hdc-b-claims__list--grid[data-cols="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .hdc-b-claims .hdc-b-claims__list--grid[data-cols="4"] { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.hdc-b-claims .hdc-b-claims__list--grid .hdc-b-claims__item {
  gap: .875rem;
  padding: 1.25rem;
  border: 1px solid var(--hdc-border);
  border-radius: var(--hdc-r-lg);
  background: var(--hdc-surface);
}
/* icon slot: the bare icon, never boxed (owner rule 1.5.2) */
.hdc-b-claims .hdc-b-claims__list--grid .hdc-b-claims__icon {
  width: 40px;
  height: 40px;
  background: none;
  box-shadow: none;
}
.hdc-b-claims .hdc-b-claims__list--grid .hdc-b-claims__icon .hdc-i { --hdc-i: 28px; }
.hdc-b-claims .hdc-b-claims__list--grid.hdc-b-claims__list--center .hdc-b-claims__item {
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.hdc-b-claims .hdc-b-claims__list--grid.hdc-b-claims__list--center .hdc-b-claims__body { align-items: center; }

/* list: compact, e.g. beside a configurator or in a narrow column */
.hdc-b-claims .hdc-b-claims__list--list { gap: .6rem; }
.hdc-b-claims .hdc-b-claims__list--list .hdc-b-claims__icon { margin-block-start: .1rem; color: var(--hdc-success); }
.hdc-b-claims .hdc-b-claims__list--list.hdc-b-claims__list--center { justify-items: center; }

/* night / brand sections: badges and cards sit on translucent surfaces */
.hdc-b-claims.hdc-night .hdc-b-claims__list--strip .hdc-b-claims__icon,
.hdc-b-claims.hdc-night .hdc-b-claims__list--list .hdc-b-claims__icon { color: var(--hdc-led); }
.hdc-b-claims.hdc-brand .hdc-b-claims__icon { color: var(--hdc-heading); }

@media (max-width: 479px) {
  .hdc-b-claims .hdc-b-claims__list--strip { gap: .5rem; }
  .hdc-b-claims .hdc-b-claims__list--strip .hdc-b-claims__item { padding-inline: .6rem .75rem; }
  .hdc-b-claims .hdc-b-claims__list--grid .hdc-b-claims__item { padding: 1rem; }
}


/* ===== part: blocks-commerce.css ===== */
/*
 * Builder blocks — commerce, domains, infra, forms (owner: B1).
 * Only what hdc-core.css / hdc-site.css lack. Every rule is scoped to the block root .hdc-b-<type>
 * (the <section> the BlockRenderer wraps around each view). Tokens only; logical properties for RTL.
 */

/* block: shared (B1 blocks) */
:is(.hdc-b-hero, .hdc-b-pricing, .hdc-b-plan-rows, .hdc-b-pricing-compare, .hdc-b-product-groups, .hdc-b-plan-configurator,
    .hdc-b-addons-grid, .hdc-b-competitor-compare, .hdc-b-tld-strip, .hdc-b-tld-table, .hdc-b-tld-cards, .hdc-b-locations,
    .hdc-b-plan-advisor) .hdc-b-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .75rem;
  max-width: 560px;
  margin-inline: auto;
  padding: 2rem 1.5rem;
  border: 1px dashed var(--hdc-border-strong);
  border-radius: var(--hdc-r-lg);
  background: var(--hdc-surface);
  color: var(--hdc-text-2);
  text-align: center;
}
:is(.hdc-b-hero, .hdc-b-pricing, .hdc-b-plan-rows, .hdc-b-pricing-compare, .hdc-b-product-groups, .hdc-b-plan-configurator,
    .hdc-b-addons-grid, .hdc-b-competitor-compare, .hdc-b-tld-strip, .hdc-b-tld-table, .hdc-b-tld-cards, .hdc-b-locations,
    .hdc-b-plan-advisor) .hdc-b-empty p { margin: 0; }
:is(.hdc-b-hero, .hdc-b-pricing, .hdc-b-plan-rows, .hdc-b-pricing-compare, .hdc-b-product-groups, .hdc-b-plan-configurator,
    .hdc-b-addons-grid, .hdc-b-competitor-compare, .hdc-b-tld-strip, .hdc-b-tld-table, .hdc-b-tld-cards, .hdc-b-locations,
    .hdc-b-plan-advisor) .hdc-b-empty > .hdc-i { color: var(--hdc-text-3); }
.hdc-b-hero .hdc-b-note {
  margin: 1rem 0 0;
  padding: .75rem 1rem;
  border: 1px dashed var(--hdc-border-strong);
  border-radius: var(--hdc-r-md);
  color: var(--hdc-text-2);
  font-size: var(--hdc-fs-sm);
}
/* Segmented control used as ARIA tabs (pricing / plan-rows) */
:is(.hdc-b-pricing, .hdc-b-plan-rows) .hdc-b-tabs .hdc-segmented__btn[aria-selected="true"] {
  background: var(--hdc-surface);
  color: var(--hdc-heading);
  box-shadow: var(--hdc-shadow-sm);
}
:is(.hdc-b-pricing, .hdc-b-plan-rows) .hdc-segmented__btn:focus-visible { outline: none; box-shadow: var(--hdc-focus-ring); }
:is(.hdc-b-pricing, .hdc-b-plan-rows) .hdc-tabpanel:focus-visible { outline: none; box-shadow: var(--hdc-focus-ring); border-radius: var(--hdc-r-lg); }
/* Spotlight extension chips rendered as buttons (hero domain layout, domain-search) */
:is(.hdc-b-hero, .hdc-b-domain-search) button.hdc-tld {
  font-family: inherit;
  cursor: pointer;
}
:is(.hdc-b-hero, .hdc-b-domain-search) button.hdc-tld:focus-visible { outline: none; box-shadow: var(--hdc-focus-ring); }

/* block: hero */
.hdc-section.hdc-b-hero { padding-block: 0; }
.hdc-b-hero.hdc-section--tight > .hdc-hero { padding-block: calc(var(--hdc-section-y) * .6); }
.hdc-b-hero.hdc-section--flush-top > .hdc-hero { padding-top: 0; }
.hdc-b-hero.hdc-section--flush-bottom > .hdc-hero { padding-bottom: 0; }
.hdc-b-hero.hdc-section--none > .hdc-hero { padding-block: 0; }
@media (min-width: 1024px) {
  .hdc-b-hero .hdc-b-hero__grid--single { grid-template-columns: minmax(0, 1fr); }
}
/* H1: breadcrumb above the headline of pages with a parent page (Home › parents › page) */
.hdc-b-hero .hdc-b-hero__crumbs .hdc-breadcrumb { margin: 0 0 1rem; }
.hdc-b-hero .hdc-hero--center .hdc-b-hero__crumbs .hdc-breadcrumb { justify-content: center; }
.hdc-b-hero .hdc-b-hero__grid--single .hdc-hero__copy { max-width: 780px; }
/* Same display title whether the editor picked H1 or H2 (hdc-site.css styles .hdc-hero h1 only) */
.hdc-b-hero .hdc-b-hero__title {
  margin-bottom: 1.25rem;
  font-size: var(--hdc-fs-display);
  font-weight: 780;
  line-height: 1.04;
  letter-spacing: var(--hdc-tracking-display);
}
.hdc-b-hero .hdc-b-hero__title em {
  font-style: normal;
  background: linear-gradient(100deg, var(--hdc-primary) 10%, var(--hdc-accent) 90%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
/* Centred layouts: points wrap as a centred row instead of a two-column grid with drifting icons */
.hdc-b-hero .hdc-hero--center .hdc-hero__points { display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem 1.5rem; }
.hdc-b-hero .hdc-hero--center .hdc-hero__points li { text-align: start; }
.hdc-b-hero .hdc-hero--center .hdc-hero__copy { max-width: 860px; }
.hdc-b-hero .hdc-hero--center .hdc-hero__visual { width: 100%; max-width: 980px; margin-inline: auto; }
.hdc-b-hero .hdc-hero__visual > img { display: block; width: 100%; height: auto; box-shadow: var(--hdc-shadow-lg); }
.hdc-b-hero .hdc-hero--center .hdc-hero__price { justify-content: center; }
/* WD1: the visual column grows with the adaptive width; the console / image / mockup keeps a product size at the
   inline end (aligned with the header edge) instead of stretching */
@media (min-width: 1024px) {
  .hdc-b-hero .hdc-hero:not(.hdc-hero--center) .hdc-hero__grid > .hdc-hero__visual { justify-self: end; width: 100%; max-width: 680px; }
}
/* console: locations are status rows (not choices), plans are real buttons handled by hdc.js [data-hdc-console] */
.hdc-b-hero .hdc-console__locs { margin: 0; padding: 0; list-style: none; }
.hdc-b-hero .hdc-console__loc { min-width: 0; pointer-events: none; cursor: default; }
.hdc-b-hero .hdc-console__loc .hdc-truncate { flex: 1 1 auto; }
.hdc-b-hero .hdc-console__plan {
  width: 100%;
  font: inherit;
  color: inherit;
  text-align: start;
  cursor: pointer;
  transition: border-color var(--hdc-dur-1), background-color var(--hdc-dur-1);
}
.hdc-b-hero .hdc-console__plan:hover { border-color: color-mix(in srgb, var(--hdc-primary) 65%, transparent); }
.hdc-b-hero .hdc-console__plan:focus-visible { outline: none; box-shadow: var(--hdc-focus-ring); }
.hdc-b-hero .hdc-b-hero__plan-name { display: block; font-family: var(--hdc-font-sans); font-size: var(--hdc-fs-sm); font-weight: 650; }
.hdc-b-hero .hdc-b-hero__plan-specs { display: block; margin-top: .1rem; opacity: .85; }
.hdc-b-hero .hdc-console__price { white-space: nowrap; }
@media (max-width: 420px) {
  .hdc-b-hero .hdc-console__locs { grid-template-columns: minmax(0, 1fr); }
  .hdc-b-hero .hdc-console__deploy { flex-wrap: wrap; }
}
/* H2: product lines (source "lines") — the line's logo before the plan name (decorative: the name says the OS), the line
   name above it only when the plan name does not say it. The console is dark in both themes: logos keep their colours. */
.hdc-b-hero .hdc-b-hero__plan-name--line { display: flex; align-items: center; gap: .5rem; min-width: 0; }
.hdc-b-hero .hdc-b-hero__plan-name--line > span { min-width: 0; overflow-wrap: anywhere; }
.hdc-b-hero .hdc-b-hero__os { flex: 0 0 auto; width: 18px; height: 18px; object-fit: contain; }
.hdc-b-hero .hdc-b-hero__line-label {
  display: block;
  margin-bottom: .15rem;
  opacity: .7;
  font: 600 var(--hdc-fs-2xs)/1.2 var(--hdc-font-mono);
  letter-spacing: .02em;
}
.hdc-b-hero .hdc-b-hero__console--lines .hdc-b-hero__plan-specs { padding-inline-start: calc(18px + .5rem); }
/* H2: estimated latency per location (setting latency "estimated", hdc-blocks.js): nearest first, rows beyond the limit
   stay hidden; the value replaces the status text of online locations */
.hdc-b-hero .hdc-console__loc[hidden] { display: none; }
.hdc-b-hero [data-hdc-hero-loc] { position: relative; }
.hdc-b-hero [data-hdc-hero-loc].is-nearest { border-color: color-mix(in srgb, var(--hdc-success) 55%, transparent); }
.hdc-b-hero .hdc-b-hero__lat { font-variant-numeric: tabular-nums; }
.hdc-b-hero .hdc-b-hero__lat-note { margin: .55rem 0 0; opacity: .7; font: 500 var(--hdc-fs-2xs)/1.4 var(--hdc-font-mono); }
.hdc-b-hero .hdc-b-hero__lat-note[hidden] { display: none; }
/* H2: location pick (setting pickLocation, hdc-blocks.js): the location rows are real buttons */
.hdc-b-hero .hdc-console__loc.hdc-b-hero__loc-pick {
  width: 100%;
  font: inherit;
  text-align: start;
  pointer-events: auto;
  cursor: pointer;
}
.hdc-b-hero .hdc-console__loc.hdc-b-hero__loc-pick:focus-visible { outline: none; box-shadow: var(--hdc-focus-ring); }
.hdc-b-hero .hdc-console__loc.hdc-b-hero__loc-pick:disabled { cursor: not-allowed; opacity: .5; }
.hdc-b-hero .hdc-console__loc.hdc-b-hero__loc-pick[hidden] { display: none; }
.hdc-b-hero :is(.hdc-console__loc, .hdc-console__plan).is-unavailable { opacity: .45; }
.hdc-b-hero .hdc-b-hero__nearest {
  position: absolute;
  inset-block-start: -.6rem;
  inset-inline-end: .5rem;
  height: auto;
  padding: .12rem .45rem;
  font-size: var(--hdc-fs-2xs);
  line-height: 1.3;
  white-space: nowrap;
}
/* HC1: operating-system step (setting pickOs, hdc-blocks.js) — family chips with the catalogue logos (a radio group) and
   a version select, one compact row that wraps; the console is dark in both themes (colours from currentColor + tokens) */
.hdc-b-hero .hdc-b-hero__osstep[hidden],
.hdc-b-hero .hdc-b-hero__osfam[hidden] { display: none; }
.hdc-b-hero .hdc-b-hero__osstep-row { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem; }
.hdc-b-hero .hdc-b-hero__osfams { display: flex; flex-wrap: wrap; gap: .4rem; flex: 1 1 15rem; min-width: 0; }
.hdc-b-hero .hdc-b-hero__osfam {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  min-height: 2.25rem;
  padding: .3rem .6rem;
  border: 1px solid color-mix(in srgb, currentColor 16%, transparent);
  border-radius: var(--hdc-r-sm);
  background: color-mix(in srgb, currentColor 4%, transparent);
  color: inherit;
  font: 600 var(--hdc-fs-xs)/1.2 var(--hdc-font-sans);
  white-space: nowrap;
  cursor: pointer;
  transition: border-color var(--hdc-dur-1), background-color var(--hdc-dur-1);
}
.hdc-b-hero .hdc-b-hero__osfam:hover { border-color: color-mix(in srgb, var(--hdc-primary) 65%, transparent); }
.hdc-b-hero .hdc-b-hero__osfam.is-active {
  border-color: var(--hdc-primary);
  background: color-mix(in srgb, var(--hdc-primary) 16%, transparent);
  box-shadow: 0 0 0 1px var(--hdc-primary) inset;
}
.hdc-b-hero .hdc-b-hero__osfam img { flex: 0 0 auto; width: 18px; height: 18px; object-fit: contain; }
.hdc-b-hero .hdc-b-hero__osver {
  flex: 1 1 9rem;
  min-width: 0;
  max-width: 100%;
  min-height: 2.25rem;
  padding-block: .3rem;
  padding-inline: .6rem;
  border: 1px solid color-mix(in srgb, currentColor 22%, transparent);
  border-radius: var(--hdc-r-sm);
  background-color: #102236; /* opaque: Edge/Chrome draw the option list on the select's colour, white when it is translucent */
  color: #e6edf6;
  font: 500 var(--hdc-fs-xs)/1.3 var(--hdc-font-mono);
  color-scheme: dark; /* the console is dark in both themes: native option list to match */
  cursor: pointer;
}
/* 1.5.2: the open list uses the console's colours in light and dark theme (1.5.1 showed light grey text on white) */
.hdc-b-hero .hdc-b-hero__osver :is(option, optgroup) { background-color: #0c1a2e; color: #e6edf6; }
.hdc-b-hero .hdc-b-hero__osver option:checked { background-color: #1b4d7a; color: #ffffff; }
.hdc-b-hero .hdc-b-hero__osver option:disabled { color: #7d8ea6; }
.hdc-b-hero :is(.hdc-b-hero__osfam, .hdc-b-hero__osver):focus-visible { outline: none; box-shadow: var(--hdc-focus-ring); }
/* 1.5.2: "More systems" — a plan with more than 6 families shows 5 chips + this select (it also carries .hdc-b-hero__osver,
   so the opaque colours and option rules above apply); active when the picked family is one of its entries */
.hdc-b-hero .hdc-b-hero__osmore { flex: 0 1 11rem; }
.hdc-b-hero .hdc-b-hero__osmore[hidden] { display: none; }
.hdc-b-hero .hdc-b-hero__osmore.is-active { border-color: var(--hdc-primary); box-shadow: 0 0 0 1px var(--hdc-primary) inset; }
.hdc-b-hero .hdc-b-hero__osmore.is-active:focus-visible { box-shadow: 0 0 0 1px var(--hdc-primary) inset, var(--hdc-focus-ring); }
.hdc-b-hero .hdc-b-hero__panel { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem .75rem; }
.hdc-b-hero .hdc-b-hero__panel .hdc-console__label { margin: 0; flex: 0 0 auto; }
@media (max-width: 420px) {
  .hdc-b-hero .hdc-b-hero__osver { flex-basis: 100%; }
}
/* full background image */
.hdc-b-hero .hdc-b-hero__inner--media-bg { display: grid; align-items: center; min-height: clamp(420px, 62vh, 660px); }
.hdc-b-hero .hdc-b-hero__bg { position: absolute; inset: 0; z-index: -3; }
.hdc-b-hero .hdc-b-hero__bg img { width: 100%; height: 100%; object-fit: cover; }
.hdc-b-hero .hdc-b-hero__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, var(--hdc-bg) 0%, color-mix(in srgb, var(--hdc-bg) 80%, transparent) 50%, color-mix(in srgb, var(--hdc-bg) 35%, transparent) 100%);
}
[dir="rtl"] .hdc-b-hero .hdc-b-hero__bg::after {
  background: linear-gradient(270deg, var(--hdc-bg) 0%, color-mix(in srgb, var(--hdc-bg) 80%, transparent) 50%, color-mix(in srgb, var(--hdc-bg) 35%, transparent) 100%);
}
.hdc-b-hero .hdc-b-hero__domain { margin: .5rem auto 1.25rem; }
@media (max-width: 480px) {
  .hdc-b-hero .hdc-b-hero__actions .hdc-btn { flex: 1 1 100%; white-space: normal; text-align: center; }
}

/* block: page-header */
.hdc-section.hdc-b-page-header { padding-block: 0; }
.hdc-b-page-header.hdc-section--tight > .hdc-page-header { padding-block: calc(var(--hdc-section-y) * .4); }
.hdc-b-page-header.hdc-section--flush-top > .hdc-page-header { padding-top: 0; }
.hdc-b-page-header.hdc-section--flush-bottom > .hdc-page-header { padding-bottom: 0; }
.hdc-b-page-header .hdc-b-page-header__grid { display: grid; gap: 2rem; align-items: center; }
@media (min-width: 960px) {
  .hdc-b-page-header .hdc-b-page-header__grid.has-media { grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); }
}
.hdc-b-page-header .hdc-b-page-header__copy { max-width: 780px; }
.hdc-b-page-header .hdc-b-page-header__inner--center .hdc-b-page-header__copy { margin-inline: auto; text-align: center; }
.hdc-b-page-header .hdc-b-page-header__inner--center .hdc-breadcrumb,
.hdc-b-page-header .hdc-b-page-header__inner--center .hdc-cluster { justify-content: center; }
.hdc-b-page-header .hdc-b-page-header__inner--center .hdc-lead { margin-inline: auto; }
.hdc-b-page-header .hdc-b-page-header__icon { display: grid; margin-bottom: 1rem; }
.hdc-b-page-header .hdc-b-page-header__inner--center .hdc-b-page-header__icon { margin-inline: auto; }
.hdc-b-page-header h1 em {
  font-style: normal;
  background: linear-gradient(100deg, var(--hdc-primary) 10%, var(--hdc-accent) 90%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hdc-b-page-header .hdc-b-page-header__actions { margin-top: 1.5rem; }
.hdc-b-page-header .hdc-b-page-header__media img { display: block; width: 100%; height: auto; border-radius: var(--hdc-r-xl); }

/* block: hero-slider */
.hdc-b-hero-slider .hdc-b-slider { position: relative; display: flex; flex-direction: column; gap: 1rem; }
.hdc-b-hero-slider .hdc-b-slider__controls { display: flex; align-items: center; justify-content: flex-end; gap: .4rem; }
.hdc-b-hero-slider .hdc-b-slider__controls[hidden] { display: none; }
.hdc-b-hero-slider .hdc-b-slider__track { display: grid; gap: 1.25rem; }
.hdc-b-hero-slider .hdc-b-slide {
  display: grid;
  gap: clamp(1.5rem, 1rem + 2vw, 3rem);
  align-items: center;
  min-width: 0;
  padding: clamp(1.5rem, 1rem + 3vw, 3.5rem);
  border-radius: var(--hdc-r-2xl);
}
.hdc-b-hero-slider .hdc-b-slide--default { padding-inline: 0; }
.hdc-b-hero-slider .hdc-b-slide--soft { border: 1px solid var(--hdc-border); background: var(--hdc-bg-soft); }
@media (min-width: 960px) {
  .hdc-b-hero-slider .hdc-b-slide.has-media { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); }
}
.hdc-b-hero-slider .hdc-b-slide__title { font-size: var(--hdc-fs-h1); line-height: var(--hdc-lh-tight); letter-spacing: var(--hdc-tracking-display); }
.hdc-b-hero-slider .hdc-b-slide__title em {
  font-style: normal;
  background: linear-gradient(100deg, var(--hdc-primary) 10%, var(--hdc-accent) 90%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hdc-b-hero-slider .hdc-brand .hdc-b-slide__title em { background: none; color: var(--hdc-heading); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; }
.hdc-b-hero-slider .hdc-b-slide__text { max-width: 56ch; margin-bottom: 1.5rem; color: var(--hdc-text-2); font-size: clamp(1.0625rem, 1rem + .4vw, 1.1875rem); }
.hdc-b-hero-slider .hdc-b-slide__media img { display: block; width: 100%; height: auto; border-radius: var(--hdc-r-xl); }
/* JS mode: slides share one grid cell, so the track keeps the tallest slide's height (no layout jump) */
.hdc-b-hero-slider .hdc-b-slider.is-ready .hdc-b-slider__track { gap: 0; touch-action: pan-y; }
.hdc-b-hero-slider .hdc-b-slider.is-ready .hdc-b-slide {
  grid-area: 1 / 1;
  transition: opacity var(--hdc-dur-3) var(--hdc-ease), visibility 0s linear var(--hdc-dur-3);
}
.hdc-b-hero-slider .hdc-b-slider.is-ready .hdc-b-slide:not(.is-active) { visibility: hidden; opacity: 0; }
.hdc-b-hero-slider .hdc-b-slider.is-ready .hdc-b-slide.is-active { transition-delay: 0s; }
.hdc-b-hero-slider .hdc-b-slider__btn {
  display: inline-grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid var(--hdc-border-strong);
  border-radius: 50%;
  background: var(--hdc-surface);
  color: var(--hdc-heading);
  cursor: pointer;
  transition: background-color var(--hdc-dur-1), border-color var(--hdc-dur-1);
}
.hdc-b-hero-slider .hdc-b-slider__btn:hover { border-color: var(--hdc-primary); background: var(--hdc-surface-hover); }
.hdc-b-hero-slider .hdc-b-slider__btn:focus-visible,
.hdc-b-hero-slider .hdc-b-slider__dot:focus-visible { outline: none; box-shadow: var(--hdc-focus-ring); }
.hdc-b-hero-slider .hdc-b-slider__pause { display: block; width: 11px; height: 12px; border-inline: 3.5px solid currentColor; }
.hdc-b-hero-slider .hdc-b-slider__play { display: none; }
.hdc-b-hero-slider .hdc-b-slider.is-paused .hdc-b-slider__pause { display: none; }
.hdc-b-hero-slider .hdc-b-slider.is-paused .hdc-b-slider__play { display: block; }
.hdc-b-hero-slider .hdc-b-slider__dots { display: flex; gap: 2px; padding-inline: .15rem; }
.hdc-b-hero-slider .hdc-b-slider__dot {
  position: relative;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
}
.hdc-b-hero-slider .hdc-b-slider__dot::before {
  content: "";
  position: absolute;
  inset: 8px;
  border-radius: var(--hdc-r-pill);
  background: var(--hdc-border-strong);
  transition: inset var(--hdc-dur-2) var(--hdc-ease), background-color var(--hdc-dur-2);
}
.hdc-b-hero-slider .hdc-b-slider__dot:hover::before { background: var(--hdc-text-3); }
.hdc-b-hero-slider .hdc-b-slider__dot[aria-current="true"]::before { inset: 8px 3px; background: var(--hdc-primary); }

/* block: pricing */
.hdc-b-pricing .hdc-b-pricing__toolbar { flex-direction: column; }
:is(.hdc-b-pricing, .hdc-b-plan-rows) .hdc-b-toolbar--start { align-items: flex-start; }
/* Non-featured badges ride the top edge like the featured ribbon, so long plan names never wrap around them */
.hdc-b-pricing .hdc-b-plan__ribbon { box-shadow: var(--hdc-shadow-sm); }
.hdc-b-pricing .hdc-b-plan__ribbon--success { background: var(--hdc-green-600); }
.hdc-b-pricing .hdc-b-plan__ribbon--warning { background: var(--hdc-amber-500); color: var(--hdc-gray-900); }
.hdc-b-pricing .hdc-b-plan__ribbon--danger { background: var(--hdc-red-600); }
.hdc-b-pricing .hdc-b-plan__ribbon--ai { background: var(--hdc-violet-600); }
.hdc-b-pricing .hdc-b-plan__ribbon--ink { background: var(--hdc-heading); color: var(--hdc-bg); }
/* features follow the order button; stock / perk notes sit at the bottom of every card */
.hdc-b-pricing .hdc-plan__features { margin-top: 0; }
.hdc-b-pricing .hdc-pricing__grid {
  --hdc-b-gap: clamp(1rem, .7rem + 1vw, 1.5rem);
  --hdc-b-cols: 4;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, max(var(--hdc-plan-min, 240px), (100% - (var(--hdc-b-cols) - 1) * var(--hdc-b-gap)) / var(--hdc-b-cols))), 1fr));
}
.hdc-b-pricing .hdc-pricing__grid[data-cols="3"] { --hdc-b-cols: 3; }
.hdc-b-pricing .hdc-pricing__grid[data-cols="2"] { --hdc-b-cols: 2; }
.hdc-b-pricing .hdc-pricing__grid[data-cols="1"] { --hdc-b-cols: 1; max-width: 420px; margin-inline: auto; }
/* WD1: on wide containers a four-column grid shows 5 or 6 plans in one row instead of a short second row, and long
   showcases (9+ lines) take 5 or 6 per row, so cards keep about the base card size. The container queries measure the
   block itself, so a narrower Studio width never over-packs a row. */
.hdc-b-pricing .hdc-b-pricing__wrap { container-type: inline-size; }
@container (min-width: 1440px) {
  .hdc-b-pricing .hdc-pricing__grid[data-cols="4"]:is(:has(> .hdc-plan:nth-child(5):last-child), :has(> .hdc-plan:nth-child(9))) { --hdc-b-cols: 5; }
}
@container (min-width: 1700px) {
  .hdc-b-pricing .hdc-pricing__grid[data-cols="4"]:is(:has(> .hdc-plan:nth-child(6):last-child), :has(> .hdc-plan:nth-child(9))) { --hdc-b-cols: 6; }
}
.hdc-b-pricing .hdc-plan__desc:empty { visibility: hidden; }
.hdc-b-pricing .hdc-plan__was { min-height: 24px; } /* = Save badge height, so prices line up with or without it */
.hdc-b-pricing .hdc-b-plan__html { min-height: 0; font-size: var(--hdc-fs-sm); }
.hdc-b-pricing .hdc-b-plan__html ul,
.hdc-b-pricing .hdc-b-plan__html ol { margin: 0; padding-inline-start: 1.1em; }
.hdc-b-pricing .hdc-b-plan__html li + li { margin-top: .25em; }
.hdc-b-pricing .hdc-b-plan__html > :last-child { margin-bottom: 0; }
.hdc-b-pricing .hdc-b-plan__label { color: var(--hdc-heading); font-size: clamp(1.6rem, 1.35rem + .9vw, 2rem); font-weight: 750; letter-spacing: -.02em; }
.hdc-b-pricing .hdc-b-plan__suffix { align-self: baseline; margin: 0; margin-inline-start: .2rem; font-size: 1rem; }
.hdc-b-pricing .hdc-b-plan__na { display: none; margin: .2rem 0 0; color: var(--hdc-warning-text); font-size: var(--hdc-fs-xs); }
.hdc-b-pricing .hdc-plan.is-unavailable .hdc-b-plan__na { display: block; }
.hdc-b-pricing .hdc-plan.is-unavailable .hdc-plan__amount { opacity: .7; }
.hdc-b-pricing .hdc-b-plan__setup[hidden] { display: none; }
.hdc-b-pricing .hdc-b-plan__notes { display: flex; flex-wrap: wrap; gap: .35rem 1rem; margin-top: auto; padding-top: .9rem; }
.hdc-b-pricing .hdc-b-plan__notes .hdc-plan__stock { margin-top: 0; }
.hdc-b-pricing .hdc-b-plan__perk .hdc-i { --hdc-i: 1.05em; color: var(--hdc-success); }
.hdc-b-pricing .hdc-plan.is-sold-out:hover { transform: none; box-shadow: var(--hdc-shadow-xs); }
.hdc-b-pricing .hdc-b-pricing__compare { display: inline-flex; align-items: center; gap: .3rem; font-weight: 600; }
/* compact cards */
.hdc-b-pricing .hdc-b-plan--compact { padding: clamp(1.1rem, 1rem + .5vw, 1.4rem); }
.hdc-b-pricing .hdc-b-plan--compact .hdc-plan__price { margin-bottom: 1rem; padding-bottom: 1rem; }
.hdc-b-pricing .hdc-b-plan--compact .hdc-plan__value { font-size: clamp(1.6rem, 1rem + 1.2vw, 2.4rem); font-size: clamp(1.1rem, 18cqi, 2.4rem); } /* LR2: sized to the card */
.hdc-b-pricing .hdc-b-plan--compact .hdc-plan__specs { gap: .4rem; margin-bottom: 1rem; }
.hdc-b-pricing .hdc-b-plan--compact .hdc-plan__cta { margin-top: auto; margin-bottom: 0; }
/* horizontal rows */
.hdc-b-pricing .hdc-b-pricing__rows { display: grid; gap: .85rem; }
.hdc-b-pricing .hdc-b-plan--horizontal { display: grid; gap: .75rem 1.5rem; padding: 1.25rem 1.5rem; border-radius: var(--hdc-r-lg); }
.hdc-b-pricing .hdc-b-plan--horizontal:hover,
.hdc-b-pricing .hdc-b-plan--horizontal.hdc-plan--featured,
.hdc-b-pricing .hdc-b-plan--horizontal.hdc-plan--featured:hover { transform: none; }
.hdc-b-pricing .hdc-b-plan--horizontal .hdc-plan__ribbon { inset-inline-start: 1.5rem; transform: none; }
.hdc-b-pricing .hdc-b-plan--horizontal .hdc-plan__head,
.hdc-b-pricing .hdc-b-plan--horizontal .hdc-plan__desc,
.hdc-b-pricing .hdc-b-plan--horizontal .hdc-plan__specs,
.hdc-b-pricing .hdc-b-plan--horizontal .hdc-plan__cta { margin: 0; }
.hdc-b-pricing .hdc-b-plan--horizontal .hdc-plan__desc { min-height: 0; }
.hdc-b-pricing .hdc-b-plan--horizontal .hdc-plan__price { margin: 0; padding: 0; border: 0; }
.hdc-b-pricing .hdc-b-plan--horizontal .hdc-plan__specs { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.hdc-b-pricing .hdc-b-plan--horizontal .hdc-b-plan__notes { margin-top: 0; }
@media (min-width: 900px) {
  .hdc-b-pricing .hdc-b-plan--horizontal {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.6fr) minmax(150px, auto) minmax(150px, auto);
    grid-template-areas: "head specs price cta" "desc specs price cta" "notes specs price cta";
    align-items: center;
  }
  .hdc-b-pricing .hdc-b-plan--horizontal .hdc-plan__head { grid-area: head; }
  .hdc-b-pricing .hdc-b-plan--horizontal .hdc-plan__desc { grid-area: desc; }
  .hdc-b-pricing .hdc-b-plan--horizontal .hdc-plan__specs { grid-area: specs; }
  .hdc-b-pricing .hdc-b-plan--horizontal .hdc-plan__price { grid-area: price; text-align: end; }
  .hdc-b-pricing .hdc-b-plan--horizontal .hdc-plan__price .hdc-plan__was,
  .hdc-b-pricing .hdc-b-plan--horizontal .hdc-plan__price .hdc-plan__amount { justify-content: flex-end; }
  .hdc-b-pricing .hdc-b-plan--horizontal .hdc-plan__cta { grid-area: cta; width: auto; }
  .hdc-b-pricing .hdc-b-plan--horizontal .hdc-b-plan__notes { grid-area: notes; }
  .hdc-b-pricing .hdc-b-plan--horizontal .hdc-plan__value { font-size: clamp(1.8rem, 1.5rem + 1vw, 2.3rem); }
}
/* H2: showcase (source "showcase") — one plan per product line. Rows are centred, so a short last row (or a filtered
   category) sits in the middle instead of hanging on the start side. */
.hdc-b-pricing .hdc-b-pricing__wrap--showcase .hdc-pricing__grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--hdc-b-gap);
}
.hdc-b-pricing .hdc-b-pricing__wrap--showcase .hdc-pricing__grid > .hdc-plan {
  flex: 0 1 calc((100% - (var(--hdc-b-cols) - 1) * var(--hdc-b-gap)) / var(--hdc-b-cols));
  min-width: min(100%, var(--hdc-plan-min, 240px));
}
@media (max-width: 1099px) {
  .hdc-b-pricing .hdc-b-pricing__wrap--showcase .hdc-pricing__grid > .hdc-plan { flex-basis: calc((100% - var(--hdc-b-gap)) / 2); }
}
/* LR2: 1024x768 and 1366 at 125-150 % have room for three 260px+ cards; two made a 17-line showcase 9 rows long */
@media (min-width: 900px) and (max-width: 1099px) {
  .hdc-b-pricing .hdc-b-pricing__wrap--showcase .hdc-pricing__grid > .hdc-plan { flex-basis: calc((100% - 2 * var(--hdc-b-gap)) / 3); }
}
/* phones: one swipeable row (the next card peeks in) instead of a stack of every line; cards stay in DOM order, so
   keyboard focus and screen readers go through them as before and focusing a card scrolls it into view */
@media (max-width: 599px) {
  .hdc-b-pricing .hdc-b-pricing__wrap--showcase .hdc-pricing__grid {
    flex-wrap: nowrap;
    justify-content: flex-start;
    margin-inline: calc(var(--hdc-gutter) * -1);
    padding: 1rem var(--hdc-gutter) 1.25rem;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--hdc-gutter);
    scrollbar-width: thin;
  }
  .hdc-b-pricing .hdc-b-pricing__wrap--showcase .hdc-pricing__grid > .hdc-plan {
    flex: 0 0 min(84%, 340px);
    min-width: 0;
    scroll-snap-align: start;
  }
  .hdc-b-pricing .hdc-b-pricing__wrap--showcase .hdc-pricing__grid > .hdc-plan:hover { transform: none; }
}
.hdc-b-pricing .hdc-pricing__grid > .hdc-plan[hidden] { display: none; }
/* the line name keeps its own case: product names such as "Linux" must not become "LİNUX" in Turkish */
.hdc-b-pricing .hdc-b-plan__line {
  display: flex;
  align-items: center;
  gap: .45rem;
  min-width: 0;
  margin: 0 0 .55rem;
  color: var(--hdc-primary-text);
  font: 600 var(--hdc-fs-xs)/1.3 var(--hdc-font-mono);
  letter-spacing: .01em;
}
.hdc-b-pricing .hdc-b-plan__line .hdc-i { --hdc-i: 1.1rem; flex: 0 0 auto; }
.hdc-b-pricing .hdc-b-plan__line-logo { flex: 0 0 auto; width: 18px; height: 18px; object-fit: contain; }
.hdc-b-pricing .hdc-b-plan__all {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: .3rem;
  margin-top: .85rem;
  font-size: var(--hdc-fs-sm);
  font-weight: 600;
}
.hdc-b-pricing .hdc-b-plan__all .hdc-i { transition: transform var(--hdc-dur-1) var(--hdc-ease); }
.hdc-b-pricing .hdc-b-plan__all:hover .hdc-i { transform: translateX(2px); }
[dir="rtl"] .hdc-b-pricing .hdc-b-plan__all:hover .hdc-i { transform: translateX(-2px) scaleX(-1); }
/* category chips (setting lineFilter, hdc-blocks.js): hidden until the script runs; the count is decorative */
.hdc-b-pricing .hdc-b-pricing__filter[hidden] { display: none; }
.hdc-b-pricing .hdc-b-pricing__filter { justify-content: center; }
.hdc-b-pricing .hdc-b-pricing__count {
  min-width: 1.6em;
  padding: .2rem .4rem;
  border-radius: var(--hdc-r-pill);
  background: var(--hdc-bg-muted);
  color: var(--hdc-text-3);
  font: 600 var(--hdc-fs-2xs)/1 var(--hdc-font-mono);
  text-align: center;
}
.hdc-b-pricing .hdc-b-pricing__filter .hdc-segmented__btn[aria-pressed="true"] .hdc-b-pricing__count { background: var(--hdc-primary-soft); color: var(--hdc-primary-text); }
.hdc-b-pricing .hdc-b-note {
  margin: 1.25rem 0 0;
  padding: .75rem 1rem;
  border: 1px dashed var(--hdc-border-strong);
  border-radius: var(--hdc-r-md);
  color: var(--hdc-text-2);
  font-size: var(--hdc-fs-sm);
}

/* block: plan-rows */
.hdc-b-plan-rows .hdc-b-plan-rows__toolbar { flex-direction: column; }
.hdc-b-plan-rows .hdc-plan-row { position: relative; }
@media (min-width: 900px) {
  .hdc-b-plan-rows .hdc-plan-row {
    grid-template-columns: minmax(180px, 1.4fr) repeat(var(--hdc-b-spec-cols, 4), minmax(84px, 1fr)) minmax(200px, auto);
  }
}
.hdc-b-plan-rows .hdc-plan-row__name { display: flex; flex-direction: column; align-items: flex-start; gap: .3rem; min-width: 0; }
.hdc-b-plan-rows .hdc-b-plan-row__title { margin: 0; font-size: var(--hdc-fs-base); letter-spacing: -.01em; }
.hdc-b-plan-rows .hdc-plan-row.is-featured { border-color: var(--hdc-primary); box-shadow: inset 0 0 0 1px var(--hdc-primary); }
.hdc-b-plan-rows .hdc-plan-row.is-sold-out:hover { border-color: var(--hdc-border); box-shadow: none; }
.hdc-b-plan-rows .hdc-plan-row__cell { min-width: 0; overflow-wrap: anywhere; }
.hdc-b-plan-rows .hdc-plan__stock { margin-top: 0; }
.hdc-b-plan-rows .hdc-b-plan-row__pricebox { display: flex; flex-direction: column; align-items: flex-end; gap: .1rem; text-align: end; }
.hdc-b-plan-rows .hdc-b-plan-row__was { display: inline-flex; align-items: center; gap: .35rem; color: var(--hdc-text-3); font-size: var(--hdc-fs-xs); }
.hdc-b-plan-rows .hdc-b-plan-row__was s:empty { display: none; }
.hdc-b-plan-rows .hdc-b-plan-row__note { color: var(--hdc-text-3); font-size: var(--hdc-fs-2xs); }
.hdc-b-plan-rows .hdc-b-plan-row__note:empty,
.hdc-b-plan-rows .hdc-b-plan-row__note[hidden] { display: none; }
.hdc-b-plan-rows .hdc-plan-row.is-unavailable .hdc-plan-row__price { opacity: .7; }
@media (max-width: 899.98px) {
  .hdc-b-plan-rows .hdc-b-plan-row__pricebox { align-items: flex-start; text-align: start; }
}

/* block: pricing-compare */
/* The scroll box must be the containing block, or .hdc-sr-only spans (position:absolute) in cells escape its
   overflow clip and widen the page on phones. */
.hdc-b-pricing-compare .hdc-compare { position: relative; }
.hdc-b-pricing-compare .hdc-compare:focus-visible { outline: none; box-shadow: var(--hdc-focus-ring); }
.hdc-b-pricing-compare .hdc-compare__plan .hdc-badge { height: 22px; }
.hdc-b-pricing-compare .hdc-compare__plan .hdc-btn { margin-top: .35rem; }
.hdc-b-pricing-compare .hdc-b-compare__per { color: var(--hdc-text-3); font-size: var(--hdc-fs-xs); font-weight: 500; }
.hdc-b-pricing-compare .hdc-b-compare__hint { display: block; margin-top: .15rem; color: var(--hdc-text-3); font-size: var(--hdc-fs-xs); font-weight: 400; }
.hdc-b-pricing-compare tbody th[scope="row"] { font-weight: 500; }
@media (min-width: 960px) {
  /* the page (not the box) scrolls, so the plan header can stick under the site header */
  .hdc-b-pricing-compare .hdc-compare.is-sticky { overflow: visible; }
  .hdc-b-pricing-compare .hdc-compare.is-sticky thead th { top: calc(var(--hdc-header-h) + var(--hdc-topbar-h)); }
  .hdc-b-pricing-compare .hdc-compare.is-sticky thead th:first-child { border-start-start-radius: var(--hdc-r-xl); }
  .hdc-b-pricing-compare .hdc-compare.is-sticky thead th:last-child { border-start-end-radius: var(--hdc-r-xl); }
  .hdc-b-pricing-compare .hdc-compare.is-sticky tbody tr:last-child > :first-child { border-end-start-radius: var(--hdc-r-xl); }
  .hdc-b-pricing-compare .hdc-compare.is-sticky tbody tr:last-child > :last-child { border-end-end-radius: var(--hdc-r-xl); }
}

/* block: product-groups */
.hdc-b-product-groups .hdc-b-groups {
  --hdc-b-gap: clamp(.85rem, .6rem + .8vw, 1.25rem);
  --hdc-b-cols: 4;
  display: grid;
  gap: var(--hdc-b-gap);
  margin: 0;
  padding: 0;
  list-style: none;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, max(220px, (100% - (var(--hdc-b-cols) - 1) * var(--hdc-b-gap)) / var(--hdc-b-cols))), 1fr));
}
.hdc-b-product-groups .hdc-b-groups[data-cols="3"] { --hdc-b-cols: 3; }
.hdc-b-product-groups .hdc-b-groups[data-cols="2"] { --hdc-b-cols: 2; }
/* WD1 (adaptive width): five or six group cards fill one row on wide containers instead of 4 + 1 / 4 + 2.
   (T - 100%) * 1000 is a step: below T the ¼ track wins (four per row, as before), above it the ⅕ / ⅙ track. */
@media (min-width: 960px) {
  .hdc-b-product-groups .hdc-b-groups--cards:not([data-cols="3"]):not([data-cols="2"]):has(> :nth-child(5):last-child) {
    grid-template-columns: repeat(auto-fill, minmax(max((100% - 4 * var(--hdc-b-gap)) / 5, min((100% - 3 * var(--hdc-b-gap)) / 4, (1400px - 100%) * 1000)), 1fr));
  }
  .hdc-b-product-groups .hdc-b-groups--cards:not([data-cols="3"]):not([data-cols="2"]):has(> :nth-child(6):last-child) {
    grid-template-columns: repeat(auto-fill, minmax(max((100% - 5 * var(--hdc-b-gap)) / 6, min((100% - 3 * var(--hdc-b-gap)) / 4, (1650px - 100%) * 1000)), 1fr));
  }
}
.hdc-b-product-groups .hdc-b-group {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: .6rem;
  padding: 1.35rem;
  border: 1px solid var(--hdc-border);
  border-radius: var(--hdc-r-lg);
  background: var(--hdc-surface);
  transition: transform var(--hdc-dur-2) var(--hdc-ease), box-shadow var(--hdc-dur-2), border-color var(--hdc-dur-2);
}
.hdc-b-product-groups .hdc-b-group:hover { transform: translateY(-3px); border-color: var(--hdc-border-strong); box-shadow: var(--hdc-shadow-md); }
.hdc-b-product-groups .hdc-b-group:focus-within { border-color: var(--hdc-primary); box-shadow: var(--hdc-focus-ring); }
.hdc-b-product-groups .hdc-b-group__body { min-width: 0; }
.hdc-b-product-groups .hdc-b-group__title { margin: .35rem 0 0; font-size: var(--hdc-fs-lg); }
.hdc-b-product-groups .hdc-b-group__link { color: var(--hdc-heading); }
.hdc-b-product-groups .hdc-b-group__link:hover { color: var(--hdc-heading); }
.hdc-b-product-groups .hdc-b-group__link:focus-visible { box-shadow: none; }
.hdc-b-product-groups .hdc-b-group__link::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
.hdc-b-product-groups .hdc-b-group__title .hdc-badge { vertical-align: middle; }
.hdc-b-product-groups .hdc-b-group__text { margin: .4rem 0 0; color: var(--hdc-text-2); font-size: var(--hdc-fs-sm); }
.hdc-b-product-groups .hdc-b-group__count { display: block; margin-top: .35rem; color: var(--hdc-text-3); font: 500 var(--hdc-fs-xs)/1.4 var(--hdc-font-mono); }
.hdc-b-product-groups .hdc-b-group__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: .25rem .75rem;
  margin-top: auto;
  padding-top: .7rem;
  border-top: 1px dashed var(--hdc-border-strong);
  color: var(--hdc-text-3);
  font-size: var(--hdc-fs-xs);
}
.hdc-b-product-groups .hdc-b-group__from b { color: var(--hdc-heading); font-size: var(--hdc-fs-lg); font-weight: 750; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.hdc-b-product-groups .hdc-b-group__cta { display: inline-flex; align-items: center; gap: .25rem; color: var(--hdc-primary-text); font-size: var(--hdc-fs-sm); font-weight: 600; }
/* W2: optional Order button (setting showOrder): sits above the card's stretched link, next to the CTA */
.hdc-b-product-groups .hdc-b-group__foot--order { align-items: center; }
.hdc-b-product-groups .hdc-b-group__foot--order .hdc-b-group__cta { margin-inline-start: auto; }
.hdc-b-product-groups .hdc-b-group__order { position: relative; z-index: 2; }
.hdc-b-product-groups .hdc-b-groups--list { grid-template-columns: minmax(0, 1fr); gap: .6rem; }
.hdc-b-product-groups .hdc-b-groups--list .hdc-b-group { flex-direction: row; align-items: center; gap: 1rem; padding: 1rem 1.25rem; }
.hdc-b-product-groups .hdc-b-groups--list .hdc-b-group__body { flex: 1 1 auto; }
.hdc-b-product-groups .hdc-b-groups--list .hdc-b-group__title { margin: 0; font-size: var(--hdc-fs-base); }
.hdc-b-product-groups .hdc-b-groups--list .hdc-b-group__text { margin-top: .15rem; }
.hdc-b-product-groups .hdc-b-groups--list .hdc-b-group__foot { flex-direction: column; align-items: flex-end; margin: 0; padding: 0; border: 0; text-align: end; }
@media (max-width: 560px) {
  .hdc-b-product-groups .hdc-b-groups--list .hdc-b-group { flex-wrap: wrap; }
  .hdc-b-product-groups .hdc-b-groups--list .hdc-b-group__foot { flex: 1 1 100%; flex-direction: row; align-items: baseline; text-align: start; }
}
.hdc-b-product-groups .hdc-b-groups--compact { grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); gap: .6rem; }
.hdc-b-product-groups .hdc-b-groups--compact .hdc-b-group {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: .1rem .75rem;
  padding: .85rem 1rem;
}
.hdc-b-product-groups .hdc-b-groups--compact .hdc-icon-tile { grid-row: 1 / span 2; }
.hdc-b-product-groups .hdc-b-groups--compact .hdc-b-group__title { margin: 0; font-size: var(--hdc-fs-sm); line-height: 1.3; }
.hdc-b-product-groups .hdc-b-groups--compact .hdc-b-group__foot { grid-column: 2; justify-content: flex-start; margin: 0; padding: 0; border: 0; }
.hdc-b-product-groups .hdc-b-groups--compact .hdc-b-group__from b { font-size: var(--hdc-fs-sm); }

/* block: plan-configurator */
.hdc-b-plan-configurator .hdc-b-cfg__grid { display: grid; gap: 1.5rem; align-items: start; }
@media (min-width: 960px) {
  .hdc-b-plan-configurator .hdc-b-cfg__grid { grid-template-columns: minmax(0, 1fr) 340px; }
  .hdc-b-plan-configurator .hdc-b-cfg__summary { position: sticky; top: calc(var(--hdc-header-h) + var(--hdc-topbar-h) + 1.5rem); }
}
.hdc-b-plan-configurator .hdc-b-cfg__options { display: grid; gap: 1rem; min-width: 0; }
.hdc-b-plan-configurator .hdc-b-cfg__group {
  min-width: 0;
  margin: 0;
  padding: 1.1rem 1.25rem;
  border: 1px solid var(--hdc-border);
  border-radius: var(--hdc-r-lg);
  background: var(--hdc-surface);
}
.hdc-b-plan-configurator fieldset.hdc-b-cfg__group > legend { float: left; width: 100%; margin: 0 0 .75rem; padding: 0; }
[dir="rtl"] .hdc-b-plan-configurator fieldset.hdc-b-cfg__group > legend { float: right; }
.hdc-b-plan-configurator fieldset.hdc-b-cfg__group > legend + * { clear: both; }
.hdc-b-plan-configurator .hdc-b-cfg__group .hdc-help { margin: .5rem 0 0; }
.hdc-b-plan-configurator .hdc-b-cfg__cycles {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  width: fit-content;
  max-width: 100%;
  padding: 4px;
  border: 1px solid var(--hdc-border);
  border-radius: var(--hdc-r-lg);
  background: var(--hdc-bg-soft);
}
.hdc-b-plan-configurator .hdc-b-cfg__cycle { position: relative; }
.hdc-b-plan-configurator .hdc-b-cfg__cycle input,
.hdc-b-plan-configurator .hdc-b-cfg__choice input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
.hdc-b-plan-configurator .hdc-b-cfg__cycle span {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  padding: 0 .95rem;
  border-radius: var(--hdc-r-md);
  color: var(--hdc-text-2);
  font: 600 var(--hdc-fs-sm)/1 var(--hdc-font-sans);
}
.hdc-b-plan-configurator .hdc-b-cfg__cycle input:checked + span { background: var(--hdc-surface); color: var(--hdc-heading); box-shadow: var(--hdc-shadow-sm); }
.hdc-b-plan-configurator .hdc-b-cfg__cycle input:focus-visible + span { box-shadow: var(--hdc-focus-ring); }
.hdc-b-plan-configurator .hdc-b-cfg__choices { display: grid; gap: .5rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 170px), 1fr)); }
.hdc-b-plan-configurator .hdc-b-cfg__choice {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: .2rem;
  padding: .7rem .85rem;
  border: 1px solid var(--hdc-border-strong);
  border-radius: var(--hdc-r-md);
  background: var(--hdc-surface);
  cursor: pointer;
  transition: border-color var(--hdc-dur-1), background-color var(--hdc-dur-1);
}
.hdc-b-plan-configurator .hdc-b-cfg__choice:hover { border-color: var(--hdc-primary); }
.hdc-b-plan-configurator .hdc-b-cfg__choice:has(input:checked) { border-color: var(--hdc-primary); background: var(--hdc-primary-soft); box-shadow: inset 0 0 0 1px var(--hdc-primary); }
.hdc-b-plan-configurator .hdc-b-cfg__choice:has(input:focus-visible) { box-shadow: var(--hdc-focus-ring); }
.hdc-b-plan-configurator .hdc-b-cfg__choice-label { color: var(--hdc-heading); font-size: var(--hdc-fs-sm); font-weight: 600; }
.hdc-b-plan-configurator .hdc-b-cfg__choice input:checked ~ .hdc-b-cfg__choice-label { color: var(--hdc-primary-text); }
.hdc-b-plan-configurator .hdc-b-cfg__delta { color: var(--hdc-text-3); font: 500 var(--hdc-fs-xs)/1.3 var(--hdc-font-mono); }
.hdc-b-plan-configurator .hdc-b-cfg__delta:empty { display: none; }
.hdc-b-plan-configurator .hdc-b-cfg__group--switch { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 1rem; }
.hdc-b-plan-configurator .hdc-b-cfg__group--switch .hdc-switch span { color: var(--hdc-heading); font-weight: 600; }
.hdc-b-plan-configurator .hdc-b-cfg__group--switch .hdc-help { flex: 1 1 100%; }
.hdc-b-plan-configurator .hdc-b-cfg__qty-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: .5rem; }
.hdc-b-plan-configurator .hdc-b-cfg__qty-value { color: var(--hdc-heading); font: 700 var(--hdc-fs-lg)/1 var(--hdc-font-mono); white-space: nowrap; }.hdc-b-plan-configurator .hdc-b-cfg__number { max-width: 160px; }
.hdc-b-plan-configurator .hdc-b-cfg__range {
  --hdc-b-fill: 0%;
  display: block;
  width: 100%;
  height: 28px;
  margin: 0;
  background: transparent;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}
.hdc-b-plan-configurator .hdc-b-cfg__range:focus-visible { outline: none; }
.hdc-b-plan-configurator .hdc-b-cfg__range::-webkit-slider-runnable-track {
  height: 6px;
  border-radius: var(--hdc-r-pill);
  background: linear-gradient(to right, var(--hdc-primary) var(--hdc-b-fill), var(--hdc-bg-muted) var(--hdc-b-fill));
}
[dir="rtl"] .hdc-b-plan-configurator .hdc-b-cfg__range::-webkit-slider-runnable-track {
  background: linear-gradient(to left, var(--hdc-primary) var(--hdc-b-fill), var(--hdc-bg-muted) var(--hdc-b-fill));
}
.hdc-b-plan-configurator .hdc-b-cfg__range::-webkit-slider-thumb {
  width: 22px;
  height: 22px;
  margin-top: -8px;
  border: 2px solid var(--hdc-primary);
  border-radius: 50%;
  background: var(--hdc-surface);
  box-shadow: var(--hdc-shadow-sm);
  -webkit-appearance: none;
  appearance: none;
}
.hdc-b-plan-configurator .hdc-b-cfg__range:focus-visible::-webkit-slider-thumb { box-shadow: var(--hdc-focus-ring); }
.hdc-b-plan-configurator .hdc-b-cfg__range::-moz-range-track { height: 6px; border-radius: var(--hdc-r-pill); background: var(--hdc-bg-muted); }
.hdc-b-plan-configurator .hdc-b-cfg__range::-moz-range-progress { height: 6px; border-radius: var(--hdc-r-pill); background: var(--hdc-primary); }
.hdc-b-plan-configurator .hdc-b-cfg__range::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border: 2px solid var(--hdc-primary);
  border-radius: 50%;
  background: var(--hdc-surface);
}
.hdc-b-plan-configurator .hdc-b-cfg__range:focus-visible::-moz-range-thumb { box-shadow: var(--hdc-focus-ring); }
.hdc-b-plan-configurator .hdc-b-cfg__scale { display: flex; justify-content: space-between; margin-top: .3rem; color: var(--hdc-text-3); font: 500 var(--hdc-fs-2xs)/1 var(--hdc-font-mono); }
.hdc-b-plan-configurator .hdc-b-cfg__group > .hdc-b-cfg__delta { display: block; margin-top: .4rem; }
.hdc-b-plan-configurator .hdc-b-cfg__group--switch > .hdc-b-cfg__delta { margin-top: 0; }
.hdc-b-plan-configurator .hdc-b-cfg__sum-title { margin: 0 0 .2rem; font-size: var(--hdc-fs-lg); }
.hdc-b-plan-configurator .hdc-b-cfg__product { margin: 0 0 1rem; color: var(--hdc-text-2); font-size: var(--hdc-fs-sm); }
.hdc-b-plan-configurator .hdc-b-cfg__lines {
  display: grid;
  gap: .5rem;
  margin: 0 0 1.25rem;
  padding: 0 0 1rem;
  border-bottom: 1px dashed var(--hdc-border-strong);
  font-size: var(--hdc-fs-sm);
}
.hdc-b-plan-configurator .hdc-b-cfg__lines > div { display: flex; justify-content: space-between; gap: 1rem; }
.hdc-b-plan-configurator .hdc-b-cfg__lines dt { color: var(--hdc-text-2); }
.hdc-b-plan-configurator .hdc-b-cfg__lines dd { min-width: 0; margin: 0; color: var(--hdc-heading); font-weight: 600; text-align: end; overflow-wrap: break-word; } /* LR2: prices break only at spaces */
.hdc-b-plan-configurator .hdc-b-cfg__total { display: grid; gap: .2rem; margin-bottom: 1.25rem; }
.hdc-b-plan-configurator .hdc-b-cfg__total-label { color: var(--hdc-text-3); font-size: var(--hdc-fs-xs); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.hdc-b-plan-configurator .hdc-b-cfg__total-value { color: var(--hdc-heading); font-size: clamp(1.9rem, 1.6rem + 1vw, 2.4rem); font-weight: 780; letter-spacing: -.03em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.hdc-b-plan-configurator .hdc-b-cfg__permonth,
.hdc-b-plan-configurator .hdc-b-cfg__setup { color: var(--hdc-text-3); font-size: var(--hdc-fs-xs); }
.hdc-b-plan-configurator .hdc-b-cfg__permonth:empty { display: none; }
.hdc-b-plan-configurator .hdc-b-cfg__note { margin: .85rem 0 0; color: var(--hdc-text-3); font-size: var(--hdc-fs-xs); }

/* block: addons-grid */
.hdc-b-addons-grid .hdc-b-addons {
  --hdc-b-gap: clamp(.85rem, .6rem + .8vw, 1.25rem);
  --hdc-b-cols: 3;
  display: grid;
  gap: var(--hdc-b-gap);
  margin: 0;
  padding: 0;
  list-style: none;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, max(240px, (100% - (var(--hdc-b-cols) - 1) * var(--hdc-b-gap)) / var(--hdc-b-cols))), 1fr));
}
.hdc-b-addons-grid .hdc-b-addons[data-cols="2"] { --hdc-b-cols: 2; }
.hdc-b-addons-grid .hdc-b-addons[data-cols="4"] { --hdc-b-cols: 4; }
.hdc-b-addons-grid .hdc-b-addon {
  display: flex;
  flex-direction: column;
  gap: .6rem;
  padding: 1.25rem;
  border: 1px solid var(--hdc-border);
  border-radius: var(--hdc-r-lg);
  background: var(--hdc-surface);
}
.hdc-b-addons-grid .hdc-b-addon__name { margin: .2rem 0 0; font-size: var(--hdc-fs-base); }
.hdc-b-addons-grid .hdc-b-addon__text {
  display: -webkit-box;
  margin: 0;
  overflow: hidden;
  color: var(--hdc-text-2);
  font-size: var(--hdc-fs-sm);
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}
.hdc-b-addons-grid .hdc-b-addon__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  margin-top: auto;
  padding-top: .75rem;
  border-top: 1px dashed var(--hdc-border-strong);
}
.hdc-b-addons-grid .hdc-b-addon__price { color: var(--hdc-text-3); font-size: var(--hdc-fs-xs); }
.hdc-b-addons-grid .hdc-b-addon__price b { color: var(--hdc-heading); font-size: var(--hdc-fs-lg); font-weight: 750; font-variant-numeric: tabular-nums; }

/* block: os-grid */
.hdc-b-os-grid .hdc-os-grid { margin: 0; padding: 0; list-style: none; grid-template-columns: repeat(auto-fill, minmax(min(100%, 190px), 1fr)); }
.hdc-b-os-grid .hdc-b-os--grouped { display: grid; gap: 1.75rem; }
.hdc-b-os-grid .hdc-b-os__title {
  margin: 0 0 .75rem;
  color: var(--hdc-text-3);
  font: 600 var(--hdc-fs-xs)/1.2 var(--hdc-font-mono);
  letter-spacing: var(--hdc-tracking-label);
  text-transform: uppercase;
}
.hdc-b-os-grid .hdc-os { height: 100%; }
.hdc-b-os-grid a.hdc-os { color: var(--hdc-heading); }
.hdc-b-os-grid a.hdc-os:hover { border-color: var(--hdc-primary); color: var(--hdc-heading); }
.hdc-b-os-grid .hdc-os .hdc-i { stroke: currentColor; }
/* H1: theme logos (img/os, brand colours in both themes — O1 checked every file on dark surfaces) in a fixed slot */
.hdc-b-os-grid .hdc-os img.hdc-b-os__logo { width: 40px; height: 28px; object-fit: contain; object-position: center; }
/* H1: two tiles per row on phones (like the demo's .hdc-os-grid) instead of one long column */
@media (max-width: 560px) {
  .hdc-b-os-grid .hdc-os-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 148px), 1fr)); gap: .6rem; }
  .hdc-b-os-grid .hdc-os { gap: .6rem; padding: .75rem; overflow-wrap: anywhere; }
  .hdc-b-os-grid .hdc-os img.hdc-b-os__logo { width: 30px; }
}

/* block: competitor-compare */
.hdc-b-competitor-compare .hdc-compare { position: relative; } /* contain .hdc-sr-only spans, see pricing-compare */
.hdc-b-competitor-compare .hdc-b-vs table { min-width: 560px; }
.hdc-b-competitor-compare .hdc-compare:focus-visible { outline: none; box-shadow: var(--hdc-focus-ring); }
.hdc-b-competitor-compare tbody th[scope="row"] { font-weight: 500; }
.hdc-b-competitor-compare .hdc-b-vs__source { display: flex; align-items: flex-start; gap: .4rem; margin: 1rem 0 0; color: var(--hdc-text-3); font-size: var(--hdc-fs-xs); }
.hdc-b-competitor-compare .hdc-b-vs__source .hdc-i { margin-top: .1rem; }
.hdc-b-competitor-compare .hdc-b-vs__actions { justify-content: center; margin-top: 1.5rem; }

/* block: promo-banner */
.hdc-b-promo-banner .hdc-b-promo--soft {
  border: 1px solid var(--hdc-border);
  background: radial-gradient(70% 90% at 90% 0%, var(--hdc-primary-soft) 0%, transparent 70%), var(--hdc-bg-soft);
}
.hdc-b-promo-banner .hdc-b-promo--night {
  background: radial-gradient(60% 80% at 85% 0%, color-mix(in srgb, var(--hdc-primary) 28%, transparent) 0%, transparent 65%), var(--hdc-bg);
}
.hdc-b-promo-banner .hdc-b-promo--soft::before { opacity: .35; }
.hdc-b-promo-banner .hdc-b-promo__badge { margin-bottom: 1rem; }
.hdc-b-promo-banner .hdc-b-promo__code { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; margin-top: 1.25rem; }
.hdc-b-promo-banner .hdc-b-promo__code-label { color: var(--hdc-text-2); font-size: var(--hdc-fs-sm); font-weight: 600; }
.hdc-b-promo-banner .hdc-b-promo__code-btn {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  min-height: 42px;
  padding: 0 .9rem;
  border: 1.5px dashed var(--hdc-border-strong);
  border-radius: var(--hdc-r-sm);
  background: var(--hdc-surface);
  color: var(--hdc-heading);
  font: 600 var(--hdc-fs-sm)/1 var(--hdc-font-sans);
  cursor: pointer;
}
.hdc-b-promo-banner .hdc-b-promo__code-btn:hover { border-color: currentColor; }
.hdc-b-promo-banner .hdc-b-promo__code-btn:focus-visible { outline: none; box-shadow: var(--hdc-focus-ring); }
.hdc-b-promo-banner .hdc-b-promo__code-btn code { padding: 0; background: none; color: inherit; font: 700 var(--hdc-fs-base)/1 var(--hdc-font-mono); letter-spacing: .06em; }
.hdc-b-promo-banner .hdc-b-promo__copy-txt { color: var(--hdc-text-2); font-size: var(--hdc-fs-xs); }
.hdc-b-promo-banner .hdc-b-promo__aside { display: grid; gap: 1.25rem; justify-items: start; }
@media (min-width: 900px) {
  .hdc-b-promo-banner .hdc-cta:not(.hdc-cta--center) .hdc-b-promo__aside { justify-items: end; }
}
.hdc-b-promo-banner .hdc-cta--center .hdc-b-promo__aside { justify-items: center; }
.hdc-b-promo-banner .hdc-cta--center .hdc-b-promo__code { justify-content: center; }
.hdc-b-promo-banner .hdc-b-promo__timer { display: grid; gap: .5rem; }
.hdc-b-promo-banner .hdc-b-promo__ends { margin: 0; color: var(--hdc-text-2); font-size: var(--hdc-fs-sm); font-weight: 600; }
@media (max-width: 420px) {
  .hdc-b-promo-banner .hdc-countdown { width: 100%; }
  .hdc-b-promo-banner .hdc-countdown__unit { flex: 1 1 0; min-width: 0; }
}

/* block: domain-search */
.hdc-b-domain-search .hdc-b-domain--start { margin-inline: 0; }
.hdc-b-domain-search .hdc-b-domain--start .hdc-domain-search__tabs,
.hdc-b-domain-search .hdc-b-domain--start .hdc-tld-strip { justify-content: flex-start; }
.hdc-b-domain-search .hdc-b-domain--start .hdc-domain-search__hint { text-align: start; }
.hdc-b-domain-search .hdc-b-domain__all a { display: inline-flex; align-items: center; gap: .3rem; font-weight: 600; }

/* block: tld-strip */
/* Tinted flush sections (domain search + TLD strip…) keep their children's margins inside: no white seam between them. */
.hdc-section--soft.hdc-section--flush-top, .hdc-section--soft.hdc-section--flush-bottom { display: flow-root; }
.hdc-b-tld-strip .hdc-b-tlds { margin-bottom: 0; padding: 0; list-style: none; }
.hdc-b-tld-strip .hdc-section-head + .hdc-b-tlds { margin-top: 0; }
.hdc-b-tld-strip .hdc-b-tlds--start { justify-content: flex-start; }
.hdc-b-tld-strip span.hdc-tld:hover { border-color: var(--hdc-border); transform: none; }
.hdc-b-tld-strip .hdc-b-tlds__badge { align-self: center; height: 20px; padding: 0 .45rem; font-size: var(--hdc-fs-2xs); }

/* block: tld-table */
.hdc-b-tld-table .hdc-table-wrap { position: relative; } /* contain .hdc-sr-only spans, see pricing-compare */
.hdc-b-tld-table .hdc-b-tldt__search { position: relative; flex: 1 1 260px; max-width: 360px; }
.hdc-b-tld-table .hdc-b-tldt__search .hdc-input { max-width: none; padding-inline-start: 2.4rem; }
.hdc-b-tld-table .hdc-b-tldt__search-icon {
  position: absolute;
  top: 50%;
  inset-inline-start: .85rem;
  display: inline-flex;
  color: var(--hdc-text-3);
  transform: translateY(-50%);
  pointer-events: none;
}
.hdc-b-tld-table .hdc-b-tldt__filter { flex: 0 1 220px; }
.hdc-b-tld-table .hdc-b-tldt__count { margin: 0; margin-inline-start: auto; color: var(--hdc-text-3); font-size: var(--hdc-fs-sm); }
.hdc-b-tld-table .hdc-b-tldt__count:empty { display: none; }
.hdc-b-tld-table .hdc-b-tldt__tld { color: var(--hdc-heading); font-size: var(--hdc-fs-base); font-weight: 650; white-space: nowrap; }
.hdc-b-tld-table .hdc-b-tldt__tld .hdc-badge { margin-inline-start: .35rem; vertical-align: middle; }
.hdc-b-tld-table .hdc-b-tldt__was { margin-inline-end: .35rem; color: var(--hdc-text-3); font-size: var(--hdc-fs-xs); }
.hdc-b-tld-table .hdc-b-tldt__none { padding: 2rem 1rem; color: var(--hdc-text-3); text-align: center; }
.hdc-b-tld-table .hdc-b-tldt__more { display: flex; justify-content: center; margin-top: 1.25rem; }
@media (max-width: 560px) {
  .hdc-b-tld-table .hdc-b-tldt__search,
  .hdc-b-tld-table .hdc-b-tldt__filter { flex: 1 1 100%; max-width: none; }
  .hdc-b-tld-table .hdc-b-tldt__count { margin-inline-start: 0; }
}

/* block: tld-cards */
.hdc-b-tld-cards .hdc-b-tldc { margin: 0; padding: 0; list-style: none; }
.hdc-b-tld-cards .hdc-tld-card__ext { margin: 0; }
.hdc-b-tld-cards .hdc-b-tldc__card--link { transition: transform var(--hdc-dur-2) var(--hdc-ease), border-color var(--hdc-dur-2), box-shadow var(--hdc-dur-2); }
.hdc-b-tld-cards .hdc-b-tldc__card--link:hover { transform: translateY(-2px); border-color: var(--hdc-primary); box-shadow: var(--hdc-shadow-md); }
.hdc-b-tld-cards .hdc-b-tldc__card--link:focus-within { border-color: var(--hdc-primary); box-shadow: var(--hdc-focus-ring); }
.hdc-b-tld-cards .hdc-b-tldc__was { color: var(--hdc-text-3); font-size: var(--hdc-fs-xs); font-weight: 500; }
.hdc-b-tld-cards .hdc-b-tldc__cta { display: inline-flex; align-items: center; gap: .3rem; margin-top: .6rem; font-size: var(--hdc-fs-sm); font-weight: 600; }
.hdc-b-tld-cards .hdc-b-tldc__cta:focus-visible { box-shadow: none; }
.hdc-b-tld-cards .hdc-b-tldc__cta::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; }

/* block: locations */
.hdc-b-locations .hdc-loc-cards { margin: 0; padding: 0; list-style: none; }
.hdc-b-locations .hdc-b-map--labels-hover .hdc-map__label { opacity: 0; transition: opacity var(--hdc-dur-2); }
.hdc-b-locations .hdc-b-map--labels-hover .hdc-map__pin:hover .hdc-map__label { opacity: 1; }
.hdc-b-locations .hdc-b-loc { align-items: start; }
.hdc-b-locations .hdc-b-loc__body { display: grid; gap: .2rem; min-width: 0; }
.hdc-b-locations .hdc-b-loc .hdc-loc-card__meta { display: flex; flex-wrap: wrap; align-items: center; gap: .1rem .4rem; }
.hdc-b-locations .hdc-b-loc__products a { color: var(--hdc-text-2); }
.hdc-b-locations .hdc-b-loc__products a:hover { color: var(--hdc-link-hover); }
.hdc-b-locations .hdc-b-loc__lg { display: inline-flex; align-items: center; gap: .25rem; font-size: var(--hdc-fs-xs); font-weight: 600; }
.hdc-b-locations .hdc-b-loc .hdc-copy { align-self: center; }
.hdc-b-locations .hdc-copy:focus-visible { outline: none; box-shadow: var(--hdc-focus-ring); }

/* block: plan-advisor */
.hdc-b-plan-advisor .hdc-b-adv { display: grid; gap: 1.5rem; max-width: 980px; margin-inline: auto; }
.hdc-b-plan-advisor .hdc-b-adv__quiz[hidden] { display: none; }
.hdc-b-plan-advisor .hdc-b-adv__count { margin: 0; color: var(--hdc-text-3); font: 600 var(--hdc-fs-2xs)/1.2 var(--hdc-font-mono); letter-spacing: var(--hdc-tracking-label); text-transform: uppercase; }
.hdc-b-plan-advisor .hdc-advisor__q { margin: .45rem 0 1rem; }
.hdc-b-plan-advisor .hdc-advisor__q:focus { outline: none; }
.hdc-b-plan-advisor .hdc-advisor__opt:focus-visible { outline: none; box-shadow: var(--hdc-focus-ring); }
.hdc-b-plan-advisor .hdc-b-adv__radio { flex: 0 0 auto; width: 18px; height: 18px; border: 1.5px solid var(--hdc-border-input); border-radius: 50%; }
.hdc-b-plan-advisor .hdc-advisor__opt[aria-pressed="true"] .hdc-b-adv__radio { border-color: var(--hdc-primary); background: var(--hdc-primary); box-shadow: inset 0 0 0 3px var(--hdc-surface); }
.hdc-b-plan-advisor .hdc-b-adv__nav { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .75rem; }
.hdc-b-plan-advisor .hdc-b-adv__nav [data-hdc-advisor-next] { margin-inline-start: auto; }
.hdc-b-plan-advisor .hdc-b-adv__results { display: grid; gap: 1rem; }
.hdc-b-plan-advisor .hdc-b-adv__title { margin: 0; font-size: var(--hdc-fs-h4); }
.hdc-b-plan-advisor .hdc-b-adv__title:focus { outline: none; }
.hdc-b-plan-advisor .hdc-b-adv__fallback { margin: 0; color: var(--hdc-text-2); }
.hdc-b-plan-advisor .hdc-b-adv__cards { display: grid; gap: 1rem; margin: 0; padding: 0; list-style: none; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }
.hdc-b-plan-advisor .hdc-b-adv__card {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  padding: 1.25rem;
  border: 1px solid var(--hdc-border);
  border-radius: var(--hdc-r-lg);
  background: var(--hdc-surface);
}
.hdc-b-plan-advisor .hdc-b-adv__card.is-featured { border-color: var(--hdc-primary); box-shadow: inset 0 0 0 1px var(--hdc-primary); }
.hdc-b-plan-advisor .hdc-b-adv__card.is-in { animation: hdc-pop var(--hdc-dur-3) var(--hdc-ease); }
.hdc-b-plan-advisor .hdc-b-adv__name { margin: 0; font-size: var(--hdc-fs-lg); }
.hdc-b-plan-advisor .hdc-b-adv__specs { margin: 0; color: var(--hdc-text-2); font-size: var(--hdc-fs-sm); }
.hdc-b-plan-advisor .hdc-b-adv__price { margin: auto 0 .25rem; color: var(--hdc-text-3); font-size: var(--hdc-fs-sm); }
.hdc-b-plan-advisor .hdc-b-adv__price b { color: var(--hdc-heading); font-size: var(--hdc-fs-xl); font-weight: 750; font-variant-numeric: tabular-nums; }
.hdc-b-plan-advisor .hdc-b-adv__card .hdc-btn { align-self: flex-start; }
.hdc-b-plan-advisor .hdc-b-adv__restart { justify-self: center; }

/* block: contact-form */
@media (min-width: 960px) {
  .hdc-b-contact-form .hdc-contact.hdc-b-contact--stacked { grid-template-columns: minmax(0, 1fr); max-width: 760px; margin-inline: auto; }
}
.hdc-b-contact-form .hdc-b-contact__intro h2 { margin-bottom: .35em; }
.hdc-b-contact-form .hdc-contact__channels { margin: 1.5rem 0 0; padding: 0; list-style: none; }
.hdc-b-contact-form .hdc-contact__channel { position: relative; align-items: center; }
.hdc-b-contact-form .hdc-b-contact__channel--link { transition: border-color var(--hdc-dur-2), box-shadow var(--hdc-dur-2); }
.hdc-b-contact-form .hdc-b-contact__channel--link:hover { border-color: var(--hdc-primary); }
.hdc-b-contact-form .hdc-b-contact__channel--link:focus-within { border-color: var(--hdc-primary); box-shadow: var(--hdc-focus-ring); }
.hdc-b-contact-form .hdc-b-contact__channel--link a { color: var(--hdc-heading); }
.hdc-b-contact-form .hdc-b-contact__channel--link a:focus-visible { box-shadow: none; }
.hdc-b-contact-form .hdc-b-contact__channel--link a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.hdc-b-contact-form .hdc-b-contact__row { display: grid; gap: 0 1rem; }
@media (min-width: 600px) {
  .hdc-b-contact-form .hdc-b-contact__row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.hdc-b-contact-form .hdc-b-contact__hp {
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}
.hdc-b-contact-form .hdc-b-contact__captcha { margin: .25rem 0 1rem; }
.hdc-b-contact-form .hdc-b-contact__note { margin: 0 0 1rem; }


/* ===== part: blocks-content.css ===== */
/*
 * HyperDC builder — content blocks (B2).
 * Only what hdc-core.css / hdc-site.css do not already provide. Every rule hangs off the renderer's
 * section wrapper class .hdc-b-<type>; colours come from tokens (dark mode, .hdc-night, .hdc-brand);
 * logical properties only (RTL). Bundled into hdc-pages.css by tools/build_css.py.
 */

/* ==========================================================================
   block: shared (all B2 content blocks)
   ========================================================================== */

/* A view that rendered nothing (e.g. testimonials without entries, for visitors) leaves no padded gap. */
.hdc-b-features:not(:has(*)), .hdc-b-feature-split:not(:has(*)), .hdc-b-feature-tabs:not(:has(*)),
.hdc-b-bento:not(:has(*)), .hdc-b-stats:not(:has(*)), .hdc-b-steps:not(:has(*)), .hdc-b-logos:not(:has(*)),
.hdc-b-testimonials:not(:has(*)), .hdc-b-reviews-summary:not(:has(*)), .hdc-b-faq:not(:has(*)),
.hdc-b-rich-text:not(:has(*)), .hdc-b-legal:not(:has(*)), .hdc-b-media:not(:has(*)), .hdc-b-gallery:not(:has(*)),
.hdc-b-team:not(:has(*)), .hdc-b-timeline:not(:has(*)), .hdc-b-cta:not(:has(*)), .hdc-b-announcement-list:not(:has(*)),
.hdc-b-kb-articles:not(:has(*)), .hdc-b-blog-list:not(:has(*)), .hdc-b-hardware-specs:not(:has(*)), .hdc-b-html:not(:has(*)) {
  display: none;
}

/* Highlighted words in titles (<em> from "inline" fields). primary-text stays readable in every scope. */
.hdc-b-features h2 em, .hdc-b-feature-split h2 em, .hdc-b-feature-tabs h2 em, .hdc-b-feature-tabs h3 em,
.hdc-b-bento h2 em, .hdc-b-stats h2 em, .hdc-b-steps h2 em, .hdc-b-logos h2 em, .hdc-b-testimonials h2 em,
.hdc-b-reviews-summary h2 em, .hdc-b-faq h2 em, .hdc-b-rich-text .hdc-b-rich-text__inner > h2 em,
.hdc-b-legal .hdc-b-legal__title em, .hdc-b-media h2 em, .hdc-b-gallery h2 em, .hdc-b-team h2 em,
.hdc-b-timeline h2 em, .hdc-b-cta h2 em, .hdc-b-announcement-list h2 em, .hdc-b-kb-articles h2 em,
.hdc-b-blog-list h2 em, .hdc-b-hardware-specs h2 em {
  font-style: normal;
  color: var(--hdc-primary-text);
}

/* Button rows under a grid */
.hdc-b-features .hdc-b-features__actions, .hdc-b-bento .hdc-b-bento__actions, .hdc-b-steps .hdc-b-steps__actions,
.hdc-b-announcement-list .hdc-b-announcement-list__actions, .hdc-b-kb-articles .hdc-b-kb-articles__actions,
.hdc-b-blog-list .hdc-b-blog-list__actions {
  margin-top: clamp(1.75rem, 1.4rem + 1.2vw, 2.5rem);
}
.hdc-b-features .hdc-b-features__actions--center, .hdc-b-bento .hdc-b-bento__actions--center,
.hdc-b-steps .hdc-b-steps__actions--center, .hdc-b-announcement-list .hdc-b-announcement-list__actions--center,
.hdc-b-kb-articles .hdc-b-kb-articles__actions--center, .hdc-b-blog-list .hdc-b-blog-list__actions--center {
  justify-content: center;
}

/* Check marks drawn with a mask so they follow the success token in every theme; bare, no disc (owner rule 1.5.2) */
.hdc-b-feature-tabs .hdc-b-feature-tabs__prose ul > li::after {
  content: "";
  position: absolute;
  inset-inline-start: 1px;
  top: calc(.15rem + 1px);
  width: 18px;
  height: 18px;
  background: var(--hdc-success);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12.5 4 4 8-9'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12.5 4 4 8-9'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* ==========================================================================
   block: features
   ========================================================================== */
.hdc-b-features .hdc-features { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) {
  .hdc-b-features .hdc-features { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 960px) {
  .hdc-b-features .hdc-features[data-cols="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1100px) {
  .hdc-b-features .hdc-features[data-cols="4"] { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
/* WD1 (adaptive width): a three-column grid of 4, 8, 12 or 16 items gets a fourth column as soon as every card would
   still be at least 380px wide, so wide screens show 4 + 4 instead of stretched 3 + 3 + 2. The track minimum is
   max(¼ width, min(⅓ width, 380px)): at the base width it equals ⅓ (three columns, as before). Pure CSS, so it
   follows whatever width Studio sets. */
@media (min-width: 960px) {
  .hdc-b-features .hdc-features[data-cols="3"]:is(:has(> :nth-child(4):last-child), :has(> :nth-child(8):last-child), :has(> :nth-child(12):last-child), :has(> :nth-child(16):last-child)) {
    grid-template-columns: repeat(auto-fit, minmax(max((100% - 4.5rem) / 4, min((100% - 3rem) / 3, 380px)), 1fr));
  }
  /* five items: 3 + 2 at the base width, one row of five once the grid is 1500px wide. (1500px - 100%) * 1000 is a
     step: huge below 1500px (the ⅓ track wins), negative above it (the ⅕ track wins). */
  .hdc-b-features .hdc-features[data-cols="3"]:has(> :nth-child(5):last-child) {
    grid-template-columns: repeat(auto-fit, minmax(max((100% - 6rem) / 5, min((100% - 3rem) / 3, (1500px - 100%) * 1000)), 1fr));
  }
}
/* reading measure inside wide cards */
.hdc-b-features .hdc-b-features__body > p { max-width: 62ch; }
.hdc-b-features .hdc-b-features__body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  align-items: flex-start;
  gap: .5rem;
  min-width: 0;
}
.hdc-b-features .hdc-b-features__body > * { max-width: 100%; }
.hdc-b-features .hdc-features--center .hdc-b-features__body { align-items: center; }
.hdc-b-features .hdc-features--plain .hdc-feature { padding-block: .25rem; }

/* ==========================================================================
   block: feature-split
   ========================================================================== */
.hdc-b-feature-split .hdc-b-feature-split--solo { grid-template-columns: minmax(0, 1fr); max-width: 780px; }
.hdc-b-feature-split .hdc-b-feature-split__body { color: var(--hdc-text-2); max-width: 62ch; }
.hdc-b-feature-split .hdc-b-feature-split__actions { margin-top: 1.75rem; }
.hdc-b-feature-split .hdc-checklist + .hdc-b-feature-split__actions { margin-top: 0; }
.hdc-b-feature-split .hdc-b-feature-split__media--shadow img { box-shadow: var(--hdc-shadow-lg); }
.hdc-b-feature-split .hdc-b-feature-split__panel {
  display: grid;
  align-content: center;
  padding: clamp(1.5rem, 1rem + 2vw, 2.75rem);
}
.hdc-b-feature-split .hdc-b-feature-split__panel .hdc-checklist {
  gap: 1rem;
  margin: 0;
  color: var(--hdc-heading);
  font-size: var(--hdc-fs-md);
  font-weight: 500;
}

/* ==========================================================================
   block: feature-tabs
   ========================================================================== */
.hdc-b-feature-tabs .hdc-b-feature-tabs__nav--start { justify-content: flex-start; }
.hdc-b-feature-tabs .hdc-tabs { max-width: 100%; }
.hdc-b-feature-tabs .hdc-tab { display: inline-flex; align-items: center; gap: .45rem; }
.hdc-b-feature-tabs .hdc-b-feature-tabs__pills {
  flex-wrap: nowrap;
  max-width: 100%;
  overflow-x: auto;
  scrollbar-width: none;
}
.hdc-b-feature-tabs .hdc-b-feature-tabs__pills::-webkit-scrollbar { display: none; }
.hdc-b-feature-tabs .hdc-b-feature-tabs__pills .hdc-segmented__btn { flex: 0 0 auto; white-space: nowrap; }
.hdc-b-feature-tabs .hdc-b-feature-tabs__pills .hdc-segmented__btn[aria-selected="true"] {
  background: var(--hdc-surface);
  color: var(--hdc-heading);
  box-shadow: var(--hdc-shadow-sm);
}
.hdc-b-feature-tabs .hdc-b-feature-tabs__panel {
  padding: clamp(1.25rem, .9rem + 1.6vw, 2.5rem);
  border: 1px solid var(--hdc-border);
  border-radius: var(--hdc-r-2xl);
  background: var(--hdc-surface);
  box-shadow: var(--hdc-shadow-sm);
}
.hdc-b-feature-tabs .hdc-b-feature-tabs__panel:focus-visible { outline: none; box-shadow: var(--hdc-focus-ring); }
@media (min-width: 960px) {
  .hdc-b-feature-tabs .hdc-b-feature-tabs__panel--solo { grid-template-columns: minmax(0, 1fr); }
  .hdc-b-feature-tabs .hdc-b-feature-tabs__panel--reverse .hdc-b-feature-tabs__media { order: -1; }
}
.hdc-b-feature-tabs .hdc-b-feature-tabs__text h3 { margin-bottom: .75rem; font-size: var(--hdc-fs-h3); }
.hdc-b-feature-tabs .hdc-b-feature-tabs__prose { color: var(--hdc-text-2); max-width: 62ch; font-size: var(--hdc-fs-base); }
.hdc-b-feature-tabs .hdc-b-feature-tabs__prose ul { display: grid; gap: .6rem; padding: 0; list-style: none; }
.hdc-b-feature-tabs .hdc-b-feature-tabs__prose ul > li {
  position: relative;
  margin: 0;
  padding-inline-start: 1.85rem;
  color: var(--hdc-text);
}
.hdc-b-feature-tabs .hdc-b-feature-tabs__actions { margin-top: 1.5rem; }
.hdc-b-feature-tabs .hdc-b-feature-tabs__media img { display: block; width: 100%; border-radius: var(--hdc-r-xl); }

/* ==========================================================================
   block: bento
   ========================================================================== */
@media (min-width: 640px) and (max-width: 899.98px) {
  .hdc-b-bento .hdc-b-bento__card--third, .hdc-b-bento .hdc-b-bento__card--half { grid-column: span 3; }
}
.hdc-b-bento .hdc-bento__card { display: flex; flex-direction: column; align-items: flex-start; gap: .75rem; }
.hdc-b-bento .hdc-bento__card > * { max-width: 100%; }
.hdc-b-bento .hdc-bento__card h3 { margin: .25rem 0 0; }
.hdc-b-bento .hdc-bento__card p { margin: 0; }
.hdc-b-bento .hdc-bento__card .hdc-eyebrow { margin-bottom: 0; }
.hdc-b-bento .hdc-b-bento__card--night {
  border-color: transparent;
  background:
    radial-gradient(120% 80% at 100% 0%, var(--hdc-primary-soft-2) 0%, transparent 60%),
    linear-gradient(180deg, var(--hdc-night-800) 0%, var(--hdc-night-900) 100%);
}
.hdc-b-bento .hdc-b-bento__card--brand { border-color: transparent; background: var(--hdc-brand-glow), var(--hdc-brand-gradient); }
.hdc-b-bento .hdc-b-bento__card--brand .hdc-icon-tile { color: var(--hdc-heading); }
.hdc-b-bento .hdc-b-bento__card--soft {
  background:
    radial-gradient(80% 80% at 100% 0%, var(--hdc-primary-soft) 0%, transparent 70%),
    var(--hdc-bg-soft);
}
.hdc-b-bento .hdc-b-bento__link {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  margin-top: auto;
  padding-top: .25rem;
  font-size: var(--hdc-fs-sm);
  font-weight: 600;
}
.hdc-b-bento .hdc-b-bento__link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.hdc-b-bento .hdc-bento__card:has(.hdc-b-bento__link) {
  transition: border-color var(--hdc-dur-2), box-shadow var(--hdc-dur-2), transform var(--hdc-dur-2) var(--hdc-ease);
}
.hdc-b-bento .hdc-bento__card:has(.hdc-b-bento__link):hover { transform: translateY(-2px); box-shadow: var(--hdc-shadow-md); }
.hdc-b-bento .hdc-bento__card:has(.hdc-b-bento__link:focus-visible) { box-shadow: var(--hdc-focus-ring); }
.hdc-b-bento .hdc-b-bento__media { width: 100%; margin-top: auto; padding-top: .5rem; }
.hdc-b-bento .hdc-b-bento__media img { display: block; width: 100%; border-radius: var(--hdc-r-lg); }

/* ==========================================================================
   block: stats
   ========================================================================== */
.hdc-b-stats .hdc-b-stats__grid--center .hdc-stat { text-align: center; }
.hdc-b-stats .hdc-b-stats__prefix { margin-inline: 0 .1em; }
.hdc-b-stats .hdc-b-stats__note { display: block; margin-top: .35rem; color: var(--hdc-text-3); font-size: var(--hdc-fs-xs); }
.hdc-b-stats .hdc-b-stats__grid--cards { gap: 1rem; }
.hdc-b-stats .hdc-b-stats__grid--cards .hdc-stat {
  padding: 1.5rem;
  border: 1px solid var(--hdc-border);
  border-radius: var(--hdc-r-lg);
  background: var(--hdc-surface);
}

/* ==========================================================================
   block: steps
   ========================================================================== */
.hdc-b-steps .hdc-b-steps__list { margin: 0; padding: 0; list-style: none; }
/* LR2: four step cards never split 3 + 1 (tablets, 1024px, 1366 at 150 %): two by two, all four in a row from 992px */
@media (min-width: 540px) { .hdc-b-steps .hdc-steps:not(.d2-steps):has(> :nth-child(4):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 992px) { .hdc-b-steps .hdc-steps:not(.d2-steps):has(> :nth-child(4):last-child) { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.hdc-b-steps .hdc-step h3 { margin-bottom: .4rem; }

/* ==========================================================================
   block: logos
   ========================================================================== */
.hdc-b-logos .hdc-b-logos__list { margin: 0; padding: 0; list-style: none; }
.hdc-b-logos .hdc-b-logos__item { display: flex; align-items: center; }
.hdc-b-logos .hdc-b-logos__link { display: inline-flex; border-radius: var(--hdc-r-xs); }
.hdc-b-logos .hdc-b-logos__list img { max-width: 168px; object-fit: contain; }
.hdc-b-logos .hdc-b-logos__list--sm img { height: 22px; }
.hdc-b-logos .hdc-b-logos__list--md img { height: 30px; }
.hdc-b-logos .hdc-b-logos__list--lg img { height: 44px; }
.hdc-b-logos .hdc-b-logos__list--color img { opacity: 1; filter: none; }
:root[data-theme="dark"] .hdc-b-logos .hdc-b-logos__list--color img { filter: none; }
.hdc-b-logos.hdc-night .hdc-b-logos__list:not(.hdc-b-logos__list--color) img,
.hdc-b-logos.hdc-brand .hdc-b-logos__list:not(.hdc-b-logos__list--color) img { filter: grayscale(1) invert(1) brightness(1.4); }

/* ==========================================================================
   block: testimonials
   ========================================================================== */
.hdc-b-testimonials .hdc-testimonial { margin-inline: 0; margin-top: 0; }
/* One to three quotes: CSS columns would leave empty columns, so use a centred grid instead. */
.hdc-b-testimonials .hdc-testimonials:not(:has(> :nth-child(4))) {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 380px));
  justify-content: center;
  align-items: start;
  gap: 1.25rem;
  columns: auto;
}
.hdc-b-testimonials .hdc-testimonials:not(:has(> :nth-child(4))) .hdc-testimonial { margin-bottom: 0; }
.hdc-b-testimonials .hdc-testimonial blockquote p { margin: 0; }
.hdc-b-testimonials .hdc-b-testimonials__star-off { color: var(--hdc-border-strong); }
.hdc-b-testimonials .hdc-testimonial__meta a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.hdc-b-testimonials .hdc-b-testimonials__scroller {
  display: flex;
  gap: 1.25rem;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  padding: .25rem .25rem 1rem;
  scrollbar-width: thin;
}
.hdc-b-testimonials .hdc-b-testimonials__scroller:focus-visible { outline: none; box-shadow: var(--hdc-focus-ring); border-radius: var(--hdc-r-lg); }
.hdc-b-testimonials .hdc-b-testimonials__scroller .hdc-testimonial { flex: 0 0 min(85%, 380px); margin: 0; scroll-snap-align: start; }

/* ==========================================================================
   block: reviews-summary
   ========================================================================== */
.hdc-b-reviews-summary .hdc-b-reviews-summary__list {
  display: grid;
  gap: 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr));
}
.hdc-b-reviews-summary .hdc-b-reviews-summary__item {
  display: grid;
  justify-items: center;
  align-content: start;
  gap: .55rem;
  padding: 1.5rem 1.25rem;
  border: 1px solid var(--hdc-border);
  border-radius: var(--hdc-r-xl);
  background: var(--hdc-surface);
  text-align: center;
}
.hdc-b-reviews-summary .hdc-b-reviews-summary__logo { height: 28px; width: auto; max-width: 160px; object-fit: contain; }
.hdc-b-reviews-summary .hdc-b-reviews-summary__platform { color: var(--hdc-heading); font-weight: 650; }
.hdc-b-reviews-summary .hdc-b-reviews-summary__score { color: var(--hdc-text-3); font-size: var(--hdc-fs-sm); font-variant-numeric: tabular-nums; }
.hdc-b-reviews-summary .hdc-b-reviews-summary__score strong {
  color: var(--hdc-heading);
  font-size: 2.25rem;
  font-weight: 780;
  letter-spacing: -.03em;
  line-height: 1;
}
.hdc-b-reviews-summary .hdc-b-reviews-summary__stars { position: relative; display: inline-flex; color: var(--hdc-border-strong); }
.hdc-b-reviews-summary .hdc-b-reviews-summary__stars-base,
.hdc-b-reviews-summary .hdc-b-reviews-summary__stars-fill { display: inline-flex; gap: 2px; }
.hdc-b-reviews-summary .hdc-b-reviews-summary__stars .hdc-i { --hdc-i: 18px; }
.hdc-b-reviews-summary .hdc-b-reviews-summary__stars-fill {
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  width: min(100%, var(--hdc-b-fill, 0%));
  overflow: hidden;
  color: var(--hdc-warning);
  white-space: nowrap;
}
.hdc-b-reviews-summary .hdc-b-reviews-summary__count { color: var(--hdc-text-2); font-size: var(--hdc-fs-sm); }
.hdc-b-reviews-summary .hdc-b-reviews-summary__link { display: inline-flex; align-items: center; gap: .3rem; font-size: var(--hdc-fs-sm); font-weight: 600; }
.hdc-b-reviews-summary .hdc-b-reviews-summary__list--pills { display: flex; flex-wrap: wrap; justify-content: center; }
.hdc-b-reviews-summary .hdc-b-reviews-summary__list--pills .hdc-b-reviews-summary__item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: .35rem .75rem;
  padding: .6rem 1.1rem;
  border-radius: var(--hdc-r-pill);
}
.hdc-b-reviews-summary .hdc-b-reviews-summary__list--pills .hdc-b-reviews-summary__score strong { font-size: var(--hdc-fs-lg); }
.hdc-b-reviews-summary .hdc-b-reviews-summary__list--pills .hdc-b-reviews-summary__logo { height: 20px; }
.hdc-b-reviews-summary .hdc-b-reviews-summary__list--pills .hdc-b-reviews-summary__stars .hdc-i { --hdc-i: 15px; }

/* ==========================================================================
   block: faq
   ========================================================================== */
.hdc-b-faq .hdc-b-faq--solo { grid-template-columns: minmax(0, 1fr); }
.hdc-b-faq .hdc-b-faq__stacked { max-width: 860px; margin-inline: auto; }
.hdc-b-faq .hdc-b-faq__help { margin-top: 1.5rem; text-align: start; }
.hdc-b-faq .hdc-b-faq__help-body { display: flex; align-items: center; gap: .9rem; }
.hdc-b-faq .hdc-b-faq__help-title { display: block; color: var(--hdc-heading); font-weight: 650; }
.hdc-b-faq a.hdc-b-faq__help-title::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.hdc-b-faq a.hdc-b-faq__help-title:hover { color: var(--hdc-primary-text); }
.hdc-b-faq .hdc-b-faq__help:has(a.hdc-b-faq__help-title:focus-visible) { box-shadow: var(--hdc-focus-ring); }
.hdc-b-faq .hdc-b-faq__help-text { display: block; color: var(--hdc-text-3); font-size: var(--hdc-fs-sm); }
.hdc-b-faq .hdc-b-faq__answer > * { margin: 0; }
.hdc-b-faq .hdc-b-faq__answer > * + * { margin-top: .75em; }
.hdc-b-faq .hdc-b-faq__answer ul, .hdc-b-faq .hdc-b-faq__answer ol { padding-inline-start: 1.25em; }
.hdc-b-faq .hdc-b-faq__answer a { text-decoration: underline; text-underline-offset: 2px; }

/* ==========================================================================
   block: rich-text
   ========================================================================== */
.hdc-b-rich-text .hdc-b-rich-text__inner { max-width: 72ch; }
.hdc-b-rich-text .hdc-b-rich-text__inner--center { margin-inline: auto; }
.hdc-b-rich-text .hdc-b-rich-text__inner--full,
.hdc-b-rich-text .hdc-b-rich-text__inner--full .hdc-prose { max-width: none; }
.hdc-b-rich-text .hdc-b-rich-text__inner--large .hdc-prose { font-size: clamp(1.0625rem, 1rem + .35vw, 1.25rem); }
.hdc-b-rich-text .hdc-prose { overflow-wrap: break-word; }
.hdc-b-rich-text .hdc-prose > :first-child { margin-top: 0; }
.hdc-b-rich-text .hdc-prose table { display: block; max-width: 100%; overflow-x: auto; }

/* ==========================================================================
   block: legal
   ========================================================================== */
.hdc-b-legal .hdc-b-legal__head {
  margin-bottom: clamp(1.5rem, 1rem + 2vw, 2.5rem);
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--hdc-border);
}
.hdc-b-legal .hdc-b-legal__title { margin-bottom: .5rem; }
.hdc-b-legal .hdc-legal__updated { margin: 0; }
.hdc-b-legal .hdc-b-legal--solo { grid-template-columns: minmax(0, 1fr); }
.hdc-b-legal .hdc-b-legal__aside { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.5rem; align-content: start; min-width: 0; }
.hdc-b-legal .hdc-b-legal__aside-title {
  margin: 0 0 .6rem;
  color: var(--hdc-text-3);
  font: 600 var(--hdc-fs-2xs)/1.3 var(--hdc-font-mono);
  letter-spacing: var(--hdc-tracking-label);
  text-transform: uppercase;
}
.hdc-b-legal .hdc-b-legal__related ul { display: grid; gap: .15rem; margin: 0; padding: 0; list-style: none; }
.hdc-b-legal .hdc-b-legal__num { color: var(--hdc-text-3); font-variant-numeric: tabular-nums; }
.hdc-b-legal .hdc-b-legal__body { min-width: 0; }
.hdc-b-legal .hdc-b-legal__intro { margin-bottom: 2rem; }
.hdc-b-legal .hdc-b-legal__section + .hdc-b-legal__section {
  margin-top: 2.25rem;
  padding-top: 2.25rem;
  border-top: 1px solid var(--hdc-border);
}
.hdc-b-legal .hdc-b-legal__heading { margin-bottom: .75rem; font-size: var(--hdc-fs-h3); }
.hdc-b-legal .hdc-prose { max-width: 75ch; overflow-wrap: break-word; }
.hdc-b-legal .hdc-prose table { display: block; max-width: 100%; overflow-x: auto; }
@media (min-width: 1024px) {
  .hdc-b-legal .hdc-b-legal__aside {
    max-height: calc(100vh - var(--hdc-header-h) - 3rem);
    overflow-y: auto;
    overscroll-behavior: contain;
  }
}
/* Below desktop the contents become a compact, horizontally scrollable chip strip. */
@media (max-width: 1023.98px) {
  /* explicit shrinkable track: an implicit "auto" column would grow to the nowrap strip's width */
  .hdc-b-legal .hdc-legal { grid-template-columns: minmax(0, 1fr); }
  .hdc-b-legal .hdc-b-legal__toc ol { display: flex; gap: .5rem; overflow-x: auto; padding-bottom: .4rem; scrollbar-width: thin; }
  .hdc-b-legal .hdc-b-legal__toc li { flex: 0 0 auto; }
  .hdc-b-legal .hdc-b-legal__toc a {
    padding: .4rem .8rem;
    border: 1px solid var(--hdc-border);
    border-radius: var(--hdc-r-pill);
    background: var(--hdc-surface);
    white-space: nowrap;
  }
  .hdc-b-legal .hdc-b-legal__related ul { display: flex; flex-wrap: wrap; gap: .25rem 1.25rem; }
  .hdc-b-legal .hdc-b-legal__related a { padding-inline: 0; border-inline-start: 0; }
}
@media print {
  .hdc-b-legal .hdc-b-legal__aside { display: none; }
  .hdc-b-legal .hdc-legal { display: block; }
}

/* ==========================================================================
   block: media
   ========================================================================== */
.hdc-b-media .hdc-b-media__figure { margin: 0; }
.hdc-b-media .hdc-b-media__frame { position: relative; overflow: hidden; border-radius: var(--hdc-r-xl); }
.hdc-b-media .hdc-b-media__frame img,
.hdc-b-media .hdc-b-media__frame video { display: block; width: 100%; height: auto; }
.hdc-b-media .hdc-b-media__frame video { background: var(--hdc-night-900); }
.hdc-b-media .hdc-b-media__frame--r16x9 { aspect-ratio: 16 / 9; }
.hdc-b-media .hdc-b-media__frame--r4x3 { aspect-ratio: 4 / 3; }
.hdc-b-media .hdc-b-media__frame--r1x1 { aspect-ratio: 1 / 1; }
.hdc-b-media .hdc-b-media__frame--r21x9 { aspect-ratio: 21 / 9; }
.hdc-b-media [class*="hdc-b-media__frame--r"] img { height: 100%; object-fit: cover; }
.hdc-b-media [class*="hdc-b-media__frame--r"] video { height: 100%; object-fit: contain; }
.hdc-b-media .hdc-b-media__figure--shadow .hdc-b-media__frame { border: 1px solid var(--hdc-border); box-shadow: var(--hdc-shadow-lg); }
.hdc-b-media .hdc-b-media__figure--framed {
  padding: clamp(.75rem, .4rem + 1.6vw, 1.75rem);
  border: 1px solid var(--hdc-border);
  border-radius: var(--hdc-r-2xl);
  background:
    radial-gradient(80% 80% at 100% 0%, var(--hdc-primary-soft) 0%, transparent 70%),
    var(--hdc-bg-soft);
}
.hdc-b-media .hdc-b-media__figure--none .hdc-b-media__frame { border-radius: 0; }
.hdc-b-media .hdc-b-media__caption { margin-top: .85rem; color: var(--hdc-text-3); font-size: var(--hdc-fs-sm); text-align: center; }

/* ==========================================================================
   block: gallery
   ========================================================================== */
.hdc-b-gallery .hdc-b-gallery__list { margin: 0; padding: 0; list-style: none; }
.hdc-b-gallery .hdc-b-gallery__list--grid { display: grid; gap: clamp(.75rem, .5rem + 1vw, 1.25rem); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 480px) {
  .hdc-b-gallery .hdc-b-gallery__list--grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 960px) {
  .hdc-b-gallery .hdc-b-gallery__list--grid[data-cols="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .hdc-b-gallery .hdc-b-gallery__list--grid[data-cols="4"] { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.hdc-b-gallery .hdc-b-gallery__figure { margin: 0; }
.hdc-b-gallery .hdc-b-gallery__img { display: block; width: 100%; height: auto; border-radius: var(--hdc-r-lg); background: var(--hdc-bg-muted); }
.hdc-b-gallery .hdc-b-gallery__list--r16x9 .hdc-b-gallery__img { aspect-ratio: 16 / 9; object-fit: cover; }
.hdc-b-gallery .hdc-b-gallery__list--r4x3 .hdc-b-gallery__img { aspect-ratio: 4 / 3; object-fit: cover; }
.hdc-b-gallery .hdc-b-gallery__list--r1x1 .hdc-b-gallery__img { aspect-ratio: 1 / 1; object-fit: cover; }
.hdc-b-gallery .hdc-b-gallery__link { display: block; border-radius: var(--hdc-r-lg); }
.hdc-b-gallery .hdc-b-gallery__link .hdc-b-gallery__img { transition: opacity var(--hdc-dur-2) var(--hdc-ease); }
.hdc-b-gallery .hdc-b-gallery__link:hover .hdc-b-gallery__img { opacity: .88; }
.hdc-b-gallery .hdc-b-gallery__caption { margin-top: .55rem; color: var(--hdc-text-2); font-size: var(--hdc-fs-sm); }
.hdc-b-gallery .hdc-b-gallery__track {
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  padding: .25rem .25rem .85rem;
  scrollbar-width: thin;
}
.hdc-b-gallery .hdc-b-gallery__track:focus-visible { outline: none; box-shadow: var(--hdc-focus-ring); border-radius: var(--hdc-r-lg); }
.hdc-b-gallery .hdc-b-gallery__list--row { display: flex; gap: 1rem; }
.hdc-b-gallery .hdc-b-gallery__list--row .hdc-b-gallery__item { flex: 0 0 min(82%, 440px); scroll-snap-align: start; }

/* ==========================================================================
   block: team
   ========================================================================== */
.hdc-b-team .hdc-b-team__grid {
  display: grid;
  gap: clamp(1rem, .7rem + 1vw, 1.5rem);
  margin: 0;
  padding: 0;
  list-style: none;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr));
}
@media (min-width: 960px) {
  .hdc-b-team .hdc-b-team__grid[data-cols="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .hdc-b-team .hdc-b-team__grid[data-cols="4"] { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.hdc-b-team .hdc-b-team__card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .3rem;
  padding: 1.5rem 1.25rem;
  border: 1px solid var(--hdc-border);
  border-radius: var(--hdc-r-xl);
  background: var(--hdc-surface);
  text-align: center;
}
.hdc-b-team .hdc-b-team__photo { width: 96px; height: 96px; margin-bottom: .75rem; object-fit: cover; background: var(--hdc-bg-muted); }
.hdc-b-team .hdc-b-team__photo--rounded { border-radius: var(--hdc-r-xl); }
.hdc-b-team .hdc-b-team__photo--circle { border-radius: 50%; }
.hdc-b-team .hdc-b-team__initial {
  display: inline-grid;
  place-items: center;
  background: var(--hdc-primary-soft);
  color: var(--hdc-primary-text);
  font-size: 2rem;
  font-weight: 700;
}
.hdc-b-team .hdc-b-team__name { margin: 0; font-size: var(--hdc-fs-lg); }
.hdc-b-team .hdc-b-team__role { margin: 0; color: var(--hdc-primary-text); font-size: var(--hdc-fs-sm); font-weight: 600; }
.hdc-b-team .hdc-b-team__bio { margin: .35rem 0 0; color: var(--hdc-text-2); font-size: var(--hdc-fs-sm); }
.hdc-b-team .hdc-b-team__link { display: inline-flex; align-items: center; gap: .3rem; margin-top: auto; padding-top: .75rem; font-size: var(--hdc-fs-sm); font-weight: 600; }

/* ==========================================================================
   block: timeline
   ========================================================================== */
.hdc-b-timeline .hdc-b-timeline__list { position: relative; display: grid; gap: 1.25rem; margin: 0; padding: 0; list-style: none; }
.hdc-b-timeline .hdc-b-timeline__list::before {
  content: "";
  position: absolute;
  inset-block: .75rem;
  inset-inline-start: 15px;
  width: 2px;
  border-radius: 2px;
  background: linear-gradient(180deg, var(--hdc-primary) 0%, var(--hdc-border-strong) 100%);
}
.hdc-b-timeline .hdc-b-timeline__item { position: relative; display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 1rem; align-items: start; }
.hdc-b-timeline .hdc-b-timeline__marker {
  position: relative;
  z-index: 1;
  display: inline-grid;
  place-items: center;
  width: 32px;
  height: 32px;
  margin-top: .85rem;
  border-radius: 50%;
  background: var(--hdc-surface);
  box-shadow: inset 0 0 0 2px var(--hdc-primary);
  color: var(--hdc-primary);
}
.hdc-b-timeline .hdc-b-timeline__marker:not(.hdc-b-timeline__marker--icon)::after {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--hdc-primary);
}
.hdc-b-timeline .hdc-b-timeline__marker .hdc-i { --hdc-i: 16px; }
/* an icon marker is the bare icon (owner rule 1.5.2: no ring or disc). Its backdrop is the section's own background,
   only to cut the timeline line behind the icon — it never shows as a shape. */
.hdc-b-timeline .hdc-b-timeline__marker--icon { background: var(--hdc-bg); box-shadow: none; }
.hdc-b-timeline.hdc-section--soft .hdc-b-timeline__marker--icon { background: var(--hdc-bg-soft); }
.hdc-b-timeline.hdc-section--muted .hdc-b-timeline__marker--icon { background: var(--hdc-bg-muted); }
.hdc-b-timeline .hdc-b-timeline__marker--icon .hdc-i { --hdc-i: 24px; }
.hdc-b-timeline .hdc-b-timeline__card { padding: 1.1rem 1.25rem; border: 1px solid var(--hdc-border); border-radius: var(--hdc-r-lg); background: var(--hdc-surface); }
.hdc-b-timeline .hdc-b-timeline__date {
  margin: 0 0 .25rem;
  color: var(--hdc-primary-text);
  font: 600 var(--hdc-fs-xs)/1.4 var(--hdc-font-mono);
  letter-spacing: .04em;
  text-transform: uppercase;
}
.hdc-b-timeline .hdc-b-timeline__title { margin: 0; font-size: var(--hdc-fs-lg); }
.hdc-b-timeline .hdc-b-timeline__text { margin: .4rem 0 0; color: var(--hdc-text-2); font-size: var(--hdc-fs-sm); }
@media (min-width: 960px) {
  .hdc-b-timeline .hdc-b-timeline__list--alternate::before { inset-inline-start: calc(50% - 1px); }
  .hdc-b-timeline .hdc-b-timeline__list--alternate .hdc-b-timeline__item { grid-template-columns: minmax(0, 1fr) 32px minmax(0, 1fr); }
  .hdc-b-timeline .hdc-b-timeline__list--alternate .hdc-b-timeline__marker { grid-column: 2; grid-row: 1; }
  .hdc-b-timeline .hdc-b-timeline__list--alternate .hdc-b-timeline__item:nth-child(odd) .hdc-b-timeline__card { grid-column: 1; grid-row: 1; text-align: end; }
  .hdc-b-timeline .hdc-b-timeline__list--alternate .hdc-b-timeline__item:nth-child(even) .hdc-b-timeline__card { grid-column: 3; grid-row: 1; }
}

/* ==========================================================================
   block: cta
   ========================================================================== */
.hdc-b-cta .hdc-b-cta__band--soft {
  border: 1px solid var(--hdc-border);
  background:
    radial-gradient(70% 120% at 100% 0%, var(--hdc-primary-soft-2) 0%, transparent 60%),
    var(--hdc-bg-soft);
}
.hdc-b-cta .hdc-b-cta__band--soft::before {
  background-image:
    linear-gradient(var(--hdc-grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--hdc-grid-line) 1px, transparent 1px);
}
.hdc-b-cta .hdc-b-cta__band--night {
  border: 1px solid var(--hdc-border);
  background:
    radial-gradient(60% 90% at 90% 0%, var(--hdc-primary-soft-2) 0%, transparent 65%),
    var(--hdc-bg);
}
.hdc-b-cta .hdc-b-cta__actions { display: grid; gap: .75rem; justify-items: start; }
.hdc-b-cta .hdc-cta--center .hdc-b-cta__actions { justify-items: center; }
.hdc-b-cta .hdc-cta--center .hdc-cluster { justify-content: center; }
@media (min-width: 900px) {
  .hdc-b-cta .hdc-cta:not(.hdc-cta--center) .hdc-b-cta__actions { justify-items: end; }
}
.hdc-b-cta .hdc-b-cta__note { margin: 0; color: var(--hdc-text-3); font-size: var(--hdc-fs-sm); }

/* ==========================================================================
   block: announcement-list
   ========================================================================== */
.hdc-b-announcement-list .hdc-b-announcement-list__card { position: relative; }
.hdc-b-announcement-list .hdc-b-announcement-list__link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.hdc-b-announcement-list .hdc-b-announcement-list__card:has(.hdc-b-announcement-list__link:focus-visible) { box-shadow: var(--hdc-focus-ring); }
.hdc-b-announcement-list .hdc-post-card__meta { display: inline-flex; align-items: center; gap: .35rem; margin: 0; }
.hdc-b-announcement-list .hdc-b-announcement-list__more {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  margin-top: auto;
  padding-top: .5rem;
  color: var(--hdc-link);
  font-size: var(--hdc-fs-sm);
  font-weight: 600;
}
.hdc-b-announcement-list .hdc-b-announcement-list__list { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--hdc-border); }
.hdc-b-announcement-list .hdc-b-announcement-list__row { display: grid; gap: .35rem; padding: 1.25rem 0; border-bottom: 1px solid var(--hdc-border); }
.hdc-b-announcement-list .hdc-b-announcement-list__title { margin: 0; font-size: var(--hdc-fs-lg); }
.hdc-b-announcement-list .hdc-b-announcement-list__title a { color: var(--hdc-heading); }
.hdc-b-announcement-list .hdc-b-announcement-list__title a:hover { color: var(--hdc-primary-text); }
.hdc-b-announcement-list .hdc-b-announcement-list__excerpt { margin: 0; color: var(--hdc-text-2); font-size: var(--hdc-fs-sm); }
@media (min-width: 768px) {
  .hdc-b-announcement-list .hdc-b-announcement-list__row { grid-template-columns: 11rem minmax(0, 1fr); column-gap: 2rem; }
  .hdc-b-announcement-list .hdc-b-announcement-list__row > .hdc-post-card__meta { grid-column: 1; grid-row: 1 / span 2; align-self: start; padding-top: .3rem; }
  .hdc-b-announcement-list .hdc-b-announcement-list__title,
  .hdc-b-announcement-list .hdc-b-announcement-list__excerpt { grid-column: 2; }
}

/* ==========================================================================
   block: kb-articles
   ========================================================================== */
.hdc-b-kb-articles .hdc-b-kb-articles__list { display: grid; gap: .75rem; margin: 0; padding: 0; list-style: none; }
@media (min-width: 768px) {
  .hdc-b-kb-articles .hdc-b-kb-articles__list--grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.hdc-b-kb-articles .hdc-b-kb-articles__link {
  display: flex;
  align-items: center;
  gap: 1rem;
  height: 100%;
  padding: 1rem 1.15rem;
  border: 1px solid var(--hdc-border);
  border-radius: var(--hdc-r-lg);
  background: var(--hdc-surface);
  color: var(--hdc-text);
  transition: border-color var(--hdc-dur-2), box-shadow var(--hdc-dur-2);
}
.hdc-b-kb-articles .hdc-b-kb-articles__link:hover { border-color: var(--hdc-primary); box-shadow: var(--hdc-shadow-sm); color: var(--hdc-text); }
.hdc-b-kb-articles .hdc-b-kb-articles__text { display: grid; gap: .2rem; flex: 1 1 auto; min-width: 0; }
.hdc-b-kb-articles .hdc-b-kb-articles__title { color: var(--hdc-heading); font-weight: 600; line-height: 1.35; }
.hdc-b-kb-articles .hdc-b-kb-articles__excerpt {
  display: -webkit-box;
  overflow: hidden;
  color: var(--hdc-text-3);
  font-size: var(--hdc-fs-sm);
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
}
.hdc-b-kb-articles .hdc-b-kb-articles__chev { color: var(--hdc-text-3); transition: color var(--hdc-dur-1); }
.hdc-b-kb-articles .hdc-b-kb-articles__link:hover .hdc-b-kb-articles__chev { color: var(--hdc-primary); }

/* ==========================================================================
   block: blog-list
   ========================================================================== */
.hdc-b-blog-list .hdc-b-blog-list__post { position: relative; }
.hdc-b-blog-list .hdc-b-blog-list__link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.hdc-b-blog-list .hdc-b-blog-list__post:has(.hdc-b-blog-list__link:focus-visible) { box-shadow: var(--hdc-focus-ring); }
.hdc-b-blog-list .hdc-post-card__meta { margin: 0; }
.hdc-b-blog-list .hdc-post-card__media img { display: block; }
.hdc-b-blog-list .hdc-b-blog-list__no-cover {
  display: grid;
  place-items: center;
  background:
    radial-gradient(80% 90% at 100% 0%, var(--hdc-primary-soft-2) 0%, transparent 70%),
    var(--hdc-bg-soft);
  color: var(--hdc-primary);
}
@media (min-width: 960px) {
  .hdc-b-blog-list .hdc-b-blog-list__posts--featured { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .hdc-b-blog-list .hdc-b-blog-list__post--featured { grid-column: span 2; grid-row: span 2; }
  .hdc-b-blog-list .hdc-b-blog-list__post--featured h3 { font-size: var(--hdc-fs-h3); }
}
.hdc-b-blog-list .hdc-b-blog-list__posts--list { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) {
  .hdc-b-blog-list .hdc-b-blog-list__posts--list .hdc-post-card { flex-direction: row; }
  .hdc-b-blog-list .hdc-b-blog-list__posts--list .hdc-post-card__media { flex: 0 0 min(36%, 300px); align-self: stretch; aspect-ratio: auto; min-height: 150px; }
}

/* ==========================================================================
   block: hardware-specs
   ========================================================================== */
.hdc-b-hardware-specs .hdc-b-hardware-specs__wrap { display: grid; gap: clamp(1.5rem, 1rem + 2vw, 3rem); align-items: center; }
@media (min-width: 960px) {
  .hdc-b-hardware-specs .hdc-b-hardware-specs__wrap--media { grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); }
}
.hdc-b-hardware-specs .hdc-b-hardware-specs__grid {
  display: grid;
  gap: 1rem;
  margin: 0;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr));
}
@media (min-width: 960px) {
  .hdc-b-hardware-specs .hdc-b-hardware-specs__grid[data-cols="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hdc-b-hardware-specs .hdc-b-hardware-specs__grid[data-cols="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .hdc-b-hardware-specs .hdc-b-hardware-specs__grid[data-cols="4"] { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .hdc-b-hardware-specs .hdc-b-hardware-specs__wrap--media .hdc-b-hardware-specs__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.hdc-b-hardware-specs .hdc-b-hardware-specs__item {
  display: grid;
  align-content: start;
  gap: .35rem;
  padding: 1.15rem 1.25rem;
  border: 1px solid var(--hdc-border);
  border-radius: var(--hdc-r-lg);
  background: var(--hdc-surface);
}
.hdc-b-hardware-specs dd { margin: 0; }
.hdc-b-hardware-specs .hdc-b-hardware-specs__label {
  display: flex;
  align-items: center;
  gap: .6rem;
  color: var(--hdc-text-3);
  font: 600 var(--hdc-fs-xs)/1.3 var(--hdc-font-mono);
  letter-spacing: .06em;
  text-transform: uppercase;
}
.hdc-b-hardware-specs .hdc-b-hardware-specs__value { margin-top: .35rem; color: var(--hdc-heading); font-size: var(--hdc-fs-base); font-weight: 600; overflow-wrap: anywhere; }
.hdc-b-hardware-specs .hdc-b-hardware-specs__note { color: var(--hdc-text-3); font-size: var(--hdc-fs-xs); }
.hdc-b-hardware-specs .hdc-b-hardware-specs__table th { width: 34%; color: var(--hdc-heading); font-weight: 600; }
.hdc-b-hardware-specs .hdc-b-hardware-specs__table tbody tr:last-child th { border-bottom: 0; }
.hdc-b-hardware-specs .hdc-b-hardware-specs__table th .hdc-i { margin-inline-end: .5rem; color: var(--hdc-primary); }
.hdc-b-hardware-specs .hdc-b-hardware-specs__table td .hdc-spec { color: var(--hdc-heading); }
.hdc-b-hardware-specs .hdc-b-hardware-specs__table td .hdc-b-hardware-specs__note { display: block; margin-top: .2rem; }
.hdc-b-hardware-specs .hdc-b-hardware-specs__media img { display: block; width: 100%; border-radius: var(--hdc-r-xl); }
.hdc-b-hardware-specs .hdc-b-hardware-specs__footnote { margin: 1.25rem 0 0; color: var(--hdc-text-3); font-size: var(--hdc-fs-xs); }

/* ==========================================================================
   block: html
   ========================================================================== */
.hdc-b-html .hdc-b-html__raw { width: 100%; }

/* ==========================================================================
   block: spacer — the block's own height replaces the section padding
   ========================================================================== */
.hdc-b-spacer.hdc-section { padding-block: 0; }
.hdc-b-spacer .hdc-b-spacer__space--xs { --hdc-spacer: 16px; }
.hdc-b-spacer .hdc-b-spacer__space--sm { --hdc-spacer: 32px; }
.hdc-b-spacer .hdc-b-spacer__space--md { --hdc-spacer: 56px; }
.hdc-b-spacer .hdc-b-spacer__space--lg { --hdc-spacer: 88px; }
.hdc-b-spacer .hdc-b-spacer__space--xl { --hdc-spacer: 128px; }
@media (max-width: 639.98px) {
  .hdc-b-spacer .hdc-b-spacer__space--lg { --hdc-spacer: 56px; }
  .hdc-b-spacer .hdc-b-spacer__space--xl { --hdc-spacer: 80px; }
  .hdc-b-spacer .hdc-b-spacer__space--hide-phone { display: none; }
}

/* ==========================================================================
   block: divider — the block's own `space` replaces the section padding
   ========================================================================== */
.hdc-b-divider.hdc-section { padding-block: 0; }
.hdc-b-divider .hdc-b-divider__wrap--none { padding-block: 0; }
.hdc-b-divider .hdc-b-divider__wrap--sm { padding-block: 1rem; }
.hdc-b-divider .hdc-b-divider__wrap--md { padding-block: 2rem; }
.hdc-b-divider .hdc-b-divider__wrap--lg { padding-block: 3.5rem; }
.hdc-b-divider .hdc-b-divider__line { margin: 0; border: 0; }
.hdc-b-divider .hdc-b-divider__line--solid { border-top: 1px solid var(--hdc-border-strong); }
.hdc-b-divider .hdc-b-divider__line--dashed { border-top: 1px dashed var(--hdc-border-strong); }
.hdc-b-divider .hdc-b-divider__line--fade { height: 1px; background: linear-gradient(90deg, transparent, var(--hdc-border-strong), transparent); }
.hdc-b-divider .hdc-b-divider__line--accent {
  width: 64px;
  height: 3px;
  margin-inline: auto;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--hdc-primary), var(--hdc-accent));
}
.hdc-b-divider .hdc-b-divider__line--labeled {
  display: flex;
  align-items: center;
  gap: 1rem;
  width: auto;
  height: auto;
  border: 0;
  background: none;
}
.hdc-b-divider .hdc-b-divider__line--labeled::before,
.hdc-b-divider .hdc-b-divider__line--labeled::after { content: ""; flex: 1 1 0; height: 1px; background: var(--hdc-border-strong); }
.hdc-b-divider .hdc-b-divider__line--labeled.hdc-b-divider__line--dashed::before,
.hdc-b-divider .hdc-b-divider__line--labeled.hdc-b-divider__line--dashed::after { height: 0; border-top: 1px dashed var(--hdc-border-strong); background: none; }
.hdc-b-divider .hdc-b-divider__line--labeled.hdc-b-divider__line--fade::before { background: linear-gradient(90deg, transparent, var(--hdc-border-strong)); }
.hdc-b-divider .hdc-b-divider__line--labeled.hdc-b-divider__line--fade::after { background: linear-gradient(90deg, var(--hdc-border-strong), transparent); }
[dir="rtl"] .hdc-b-divider .hdc-b-divider__line--labeled.hdc-b-divider__line--fade::before { background: linear-gradient(270deg, transparent, var(--hdc-border-strong)); }
[dir="rtl"] .hdc-b-divider .hdc-b-divider__line--labeled.hdc-b-divider__line--fade::after { background: linear-gradient(270deg, var(--hdc-border-strong), transparent); }
.hdc-b-divider .hdc-b-divider__line--labeled.hdc-b-divider__line--accent { justify-content: center; }
.hdc-b-divider .hdc-b-divider__line--labeled.hdc-b-divider__line--accent::before,
.hdc-b-divider .hdc-b-divider__line--labeled.hdc-b-divider__line--accent::after { flex: 0 0 40px; height: 2px; border-radius: 2px; background: var(--hdc-primary); }
.hdc-b-divider .hdc-b-divider__label {
  color: var(--hdc-text-3);
  font: 600 var(--hdc-fs-xs)/1.2 var(--hdc-font-mono);
  letter-spacing: var(--hdc-tracking-label);
  text-transform: uppercase;
  white-space: nowrap;
}


/* ===== part: blocks-games.css ===== */
/* ==========================================================================
   W5 — game-server pages: blocks game-catalog, game-hero, compare-table; the phone card views of the comparison
   tables (pricing-compare, competitor-compare); the empty state of the pricing block (title + contact); the shared
   term tooltip. Tokens and logical properties only (dark mode, RTL). Bundled into hdc-pages.css by tools/build_css.py.
   G2 (2026-10-06): image cards for every game, package price + order, light/dark everywhere (no forced night scope).
   G3E (2026-10-09): one rich card for every game (popular row + A–Z grid + results), fact glyphs as CSS masks, genre links.
   ========================================================================== */

/* Cover tones (decorative gradients from the palette tokens) */
.hdc-b-gc--blue, .hdc-b-gh--blue { --gc-a: var(--hdc-blue-500); --gc-b: var(--hdc-blue-950); }
.hdc-b-gc--cyan, .hdc-b-gh--cyan { --gc-a: var(--hdc-cyan-500); --gc-b: var(--hdc-blue-900); }
.hdc-b-gc--green, .hdc-b-gh--green { --gc-a: var(--hdc-green-600); --gc-b: var(--hdc-night-800); }
.hdc-b-gc--amber, .hdc-b-gh--amber { --gc-a: var(--hdc-amber-600); --gc-b: var(--hdc-night-850); }
.hdc-b-gc--red, .hdc-b-gh--red { --gc-a: var(--hdc-red-600); --gc-b: var(--hdc-night-850); }
.hdc-b-gc--violet, .hdc-b-gh--violet { --gc-a: var(--hdc-violet-600); --gc-b: var(--hdc-night-850); }
.hdc-b-gc--slate, .hdc-b-gh--slate { --gc-a: var(--hdc-gray-600); --gc-b: var(--hdc-night-900); }

/* block: game-catalog — G2 (2026-10-06): every game is a card with its cover; the band, cards, chips and lists use the
   theme tokens only, so light and dark mode follow the site (the hero band no longer forces the "night" scope). */
.hdc-b-game-catalog [hidden] { display: none !important; }
.hdc-section.hdc-b-game-catalog:has(> .hdc-b-gc--hero) { padding-top: 0; }
.hdc-b-gc__top { position: relative; isolation: isolate; }
.hdc-b-gc--hero .hdc-b-gc__top {
  overflow: hidden;
  padding-block: clamp(3rem, 2rem + 4.5vw, 6rem) clamp(1.25rem, .9rem + 1.4vw, 2rem);
  border-bottom: 1px solid var(--hdc-border);
  background:
    radial-gradient(60% 70% at 85% 0%, color-mix(in srgb, var(--hdc-primary) 14%, transparent) 0%, transparent 62%),
    radial-gradient(45% 60% at 5% 100%, color-mix(in srgb, var(--hdc-accent) 10%, transparent) 0%, transparent 60%),
    linear-gradient(180deg, var(--hdc-bg-soft) 0%, var(--hdc-bg) 100%);
}
:root[data-theme="dark"] .hdc-b-gc--hero .hdc-b-gc__top {
  background:
    radial-gradient(60% 70% at 85% 0%, color-mix(in srgb, var(--hdc-primary) 28%, transparent) 0%, transparent 62%),
    radial-gradient(45% 60% at 5% 100%, color-mix(in srgb, var(--hdc-accent) 14%, transparent) 0%, transparent 60%),
    var(--hdc-bg);
}
.hdc-b-gc--hero .hdc-b-gc__top::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image:
    linear-gradient(var(--hdc-grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--hdc-grid-line) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(90% 85% at 50% 0%, #000 0%, transparent 78%);
  mask-image: radial-gradient(90% 85% at 50% 0%, #000 0%, transparent 78%);
  pointer-events: none;
}
.hdc-b-gc__glow {
  position: absolute;
  z-index: -1;
  inset-block-start: -18%;
  inset-inline-end: -12%;
  width: min(60vw, 760px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--hdc-accent) 18%, transparent), transparent);
  filter: blur(8px);
  pointer-events: none;
}
/* cover collage on the end side of the heading (wide screens only: hidden images with loading="lazy" are never fetched
   on phones). G3E (owner report 2026-10-09): it lives inside the page container — same max width and gutters as the
   heading column, a little inside the content edge so the tilted corners stay in it — so it never reaches the window
   edge or gets cut at any width; it fades towards the heading with a mask instead of a band-wide veil. */
.hdc-b-gc__inner { position: relative; }
.hdc-b-gc__art { display: none; }
@media (min-width: 1280px) {
  .hdc-b-gc--hero .hdc-b-gc__head, .hdc-b-gc--hero .hdc-b-gc__chips { max-width: 660px; }
  .hdc-b-gc__art {
    position: absolute;
    z-index: -1;
    inset-block-start: 50%;
    inset-inline-end: calc(var(--hdc-gutter) + 24px);
    display: grid;
    width: min(540px, calc(100% - var(--hdc-gutter) * 2 - 720px));
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-content: center;
    gap: 14px;
    transform: translateY(-50%) rotate(-7deg);
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 38%);
    mask-image: linear-gradient(90deg, transparent 0%, #000 38%);
    pointer-events: none;
  }
  [dir="rtl"] .hdc-b-gc__art {
    transform: translateY(-50%) rotate(7deg);
    -webkit-mask-image: linear-gradient(270deg, transparent 0%, #000 38%);
    mask-image: linear-gradient(270deg, transparent 0%, #000 38%);
  }
  .hdc-b-gc__art img { display: block; width: 100%; height: auto; aspect-ratio: 2 / 1; object-fit: cover; border-radius: 12px; box-shadow: var(--hdc-shadow-md); }
  .hdc-b-gc__art img:nth-child(3n + 2) { transform: translateY(22px); }
}
.hdc-b-gc__head { position: relative; display: flex; flex-direction: column; gap: .35rem; max-width: 760px; margin-bottom: clamp(1.5rem, 1rem + 1.5vw, 2.25rem); }
.hdc-b-gc__head.is-center { align-items: center; margin-inline: auto; text-align: center; }
.hdc-b-gc__head.is-center .hdc-lead { margin-inline: auto; }
.hdc-b-gc__title { margin: 0 0 .35rem; font-size: var(--hdc-fs-h2); }
.hdc-b-gc--hero .hdc-b-gc__title { font-size: var(--hdc-fs-display); font-weight: 780; line-height: 1.05; letter-spacing: var(--hdc-tracking-display); }
.hdc-b-gc__title em {
  font-style: normal;
  background: linear-gradient(100deg, var(--hdc-primary) 10%, var(--hdc-accent) 90%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hdc-b-gc__lead { max-width: 62ch; }
.hdc-b-gc__points { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; margin: 1rem 0 0; padding: 0; list-style: none; color: var(--hdc-text-2); font-size: var(--hdc-fs-sm); }
.hdc-b-gc__head.is-center .hdc-b-gc__points { justify-content: center; }
.hdc-b-gc__points li { display: inline-flex; align-items: center; gap: .45rem; }
.hdc-b-gc__points .hdc-i { color: var(--hdc-primary); }

/* search + chips */
.hdc-b-gc__tools { position: relative; display: grid; gap: .9rem; margin-bottom: .75rem; }
.hdc-b-gc__search { position: relative; max-width: 640px; }
.hdc-b-gc__head.is-center ~ .hdc-b-gc__tools .hdc-b-gc__search { margin-inline: auto; }
.hdc-b-gc__search-icon { position: absolute; inset-inline-start: 1.1rem; top: 50%; translate: 0 -50%; color: var(--hdc-text-3); pointer-events: none; }
.hdc-b-gc__input { width: 100%; padding-inline: 3rem 3.25rem; border-radius: var(--hdc-r-pill); background: var(--hdc-surface-raised); box-shadow: var(--hdc-shadow-sm); }
.hdc-b-gc__input::-webkit-search-cancel-button { cursor: pointer; }
.hdc-b-gc__kbd { position: absolute; inset-inline-end: 1rem; top: 50%; translate: 0 -50%; pointer-events: none; }
.hdc-b-gc__input:focus ~ .hdc-b-gc__kbd, .hdc-b-gc__input:not(:placeholder-shown) ~ .hdc-b-gc__kbd { visibility: hidden; }
.hdc-b-gc__chips { display: flex; flex-wrap: wrap; gap: .5rem; max-width: 900px; }
.hdc-b-gc__head.is-center ~ .hdc-b-gc__tools .hdc-b-gc__chips { justify-content: center; margin-inline: auto; }
.hdc-b-gc__chip {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  min-height: 38px;
  padding: 0 .85rem;
  border: 1px solid var(--hdc-border-strong);
  border-radius: var(--hdc-r-pill);
  background: var(--hdc-surface);
  color: var(--hdc-text);
  font: 500 var(--hdc-fs-sm)/1 var(--hdc-font-sans);
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--hdc-dur-1), border-color var(--hdc-dur-1), color var(--hdc-dur-1);
}
.hdc-b-gc__chip .hdc-i { --hdc-i: 16px; color: var(--hdc-text-3); }
.hdc-b-gc__chip:hover { border-color: var(--hdc-primary); color: var(--hdc-heading); }
.hdc-b-gc__chip:focus-visible { outline: none; box-shadow: var(--hdc-focus-ring); }
.hdc-b-gc__chip[aria-pressed="true"] { border-color: var(--hdc-primary-fill); background: var(--hdc-primary-fill); color: var(--hdc-on-primary); }
.hdc-b-gc__chip[aria-pressed="true"] .hdc-i { color: currentColor; }
.hdc-b-gc__n { min-width: 1.5em; padding: .15rem .4rem; border-radius: var(--hdc-r-pill); background: var(--hdc-bg-muted); color: var(--hdc-text-2); font: 600 var(--hdc-fs-2xs)/1.2 var(--hdc-font-mono); text-align: center; }
.hdc-b-gc__n:empty { display: none; }
.hdc-b-gc__chip[aria-pressed="true"] .hdc-b-gc__n { background: rgba(255, 255, 255, .22); color: var(--hdc-on-primary); }
@media (max-width: 767.98px) {
  /* one swipeable row of chips instead of a tall wall (the row scrolls, never the page) */
  .hdc-b-gc__chips { flex-wrap: nowrap; justify-content: flex-start !important; margin-inline: calc(var(--hdc-gutter) * -1); padding: .15rem var(--hdc-gutter) .45rem; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; }
  .hdc-b-gc__chips::-webkit-scrollbar { display: none; }
  .hdc-b-gc__chip { scroll-snap-align: start; }
}
.hdc-b-gc__count { position: relative; min-height: 1.2em; margin: 0; color: var(--hdc-text-3); font-size: var(--hdc-fs-sm); }
.hdc-b-gc__head.is-center ~ .hdc-b-gc__count { text-align: center; }

/* featured cards */
.hdc-b-gc__featured { padding-top: clamp(1.5rem, 1rem + 1.4vw, 2.25rem); }
.hdc-b-gc--section .hdc-b-gc__featured { padding-top: .5rem; }
.hdc-b-gc__subtitle { margin: 0 0 1rem; font-size: var(--hdc-fs-h4); letter-spacing: var(--hdc-tracking-heading); }
.hdc-b-gc__cards {
  --gc-cols: 4;
  display: grid;
  gap: var(--gc-gap, 1rem);
  margin: 0;
  padding: 0;
  list-style: none;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, max(220px, (100% - (var(--gc-cols) - 1) * 1rem) / var(--gc-cols))), 1fr));
}
.hdc-b-gc__cards[data-cols="3"] { --gc-cols: 3; }
/* WD1 (adaptive width): wide containers show more games per row at about the base card size (~290px). */
@media (min-width: 960px) {
  /* every game / results (pages of 24) and popular games (12): straight from four to six columns, so full rows stay
     full (never five). (T - 100%) * 1000 is a step: huge below T (the ¼ track wins), negative above it (⅙ / ⅕). */
  .hdc-b-gc__all .hdc-b-gc__cards:not([data-cols="3"]),
  .hdc-b-gc__featured .hdc-b-gc__cards:not([data-cols="3"]):is(:has(> :nth-child(6):last-child), :has(> :nth-child(12):last-child), :has(> :nth-child(18):last-child)) {
    grid-template-columns: repeat(auto-fill, minmax(max((100% - 5rem) / 6, min((100% - 3rem) / 4, (1720px - 100%) * 1000)), 1fr));
  }
  .hdc-b-gc__featured .hdc-b-gc__cards:not([data-cols="3"]):is(:has(> :nth-child(5):last-child), :has(> :nth-child(10):last-child), :has(> :nth-child(15):last-child)) {
    grid-template-columns: repeat(auto-fill, minmax(max((100% - 4rem) / 5, min((100% - 3rem) / 4, (1450px - 100%) * 1000)), 1fr));
  }
}
.hdc-b-gc__card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--hdc-border);
  border-radius: var(--hdc-r-lg);
  background: var(--hdc-surface);
  box-shadow: var(--hdc-shadow-xs);
  transition: transform var(--hdc-dur-2) var(--hdc-ease), box-shadow var(--hdc-dur-2), border-color var(--hdc-dur-2);
}
.hdc-b-gc__card.is-link:hover { transform: translateY(-3px); border-color: var(--hdc-border-strong); box-shadow: var(--hdc-shadow-md); }
.hdc-b-gc__card:focus-within { border-color: var(--hdc-primary); box-shadow: var(--hdc-focus-ring); }
.hdc-b-gc__cover {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 2 / 1;
  overflow: hidden;
  background:
    radial-gradient(120% 90% at 100% 0%, color-mix(in srgb, #fff 18%, transparent) 0%, transparent 55%),
    linear-gradient(135deg, var(--gc-a) 0%, var(--gc-b) 100%);
  color: #fff;
}
.hdc-b-gc__cover::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255, 255, 255, .14) 1px, transparent 1.2px);
  background-size: 14px 14px;
  -webkit-mask-image: linear-gradient(115deg, transparent 30%, #000 100%);
  mask-image: linear-gradient(115deg, transparent 30%, #000 100%);
  pointer-events: none;
}
.hdc-b-gc__cover:has(> img)::after { display: none; }
.hdc-b-gc__cover img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform var(--hdc-dur-3) var(--hdc-ease); }
.hdc-b-gc__card.is-link:hover .hdc-b-gc__cover img { transform: scale(1.04); }
.hdc-b-gc__mark { position: relative; z-index: 1; font: 800 clamp(1.9rem, 1.5rem + 1.2vw, 2.6rem)/1 var(--hdc-font-sans); letter-spacing: -.04em; text-shadow: 0 6px 24px rgba(0, 0, 0, .35); }
.hdc-b-gc__glyph { position: absolute; inset-inline-end: -10%; bottom: -24%; width: 62%; height: auto; aspect-ratio: 1; opacity: .2; fill: none; stroke: currentColor; transform: rotate(-12deg); }
.hdc-b-gc__badge { position: absolute; z-index: 2; inset-block-start: .65rem; inset-inline-start: .65rem; }
.hdc-b-gc__body { display: flex; flex: 1 1 auto; flex-direction: column; gap: .55rem; padding: 1rem 1.1rem 1.05rem; }
.hdc-b-gc__name { margin: 0; font-size: var(--hdc-fs-lg); letter-spacing: -.01em; }
.hdc-b-gc__link { color: var(--hdc-heading); text-decoration: none; }
.hdc-b-gc__link::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
.hdc-b-gc__link:focus-visible { outline: none; }
.hdc-b-gc__tagline { margin: 0; color: var(--hdc-text-2); font-size: var(--hdc-fs-sm); line-height: 1.5; }
/* quick facts: players · RAM · mods (labels for screen readers), or install size · suggested disk (visible labels).
   G3E: the glyphs are CSS masks — one rule instead of an <svg> per fact (a grid can hold 300 cards). */
.hdc-b-gc__facts { display: flex; flex-wrap: wrap; gap: .35rem .9rem; margin: .1rem 0 0; }
.hdc-b-gc__facts > div {
  --gc-fact: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='8' r='3.5'/%3E%3Cpath d='M2.5 20a6.5 6.5 0 0 1 13 0M16 4.6a3.5 3.5 0 0 1 0 6.8M18.5 14.2a6.5 6.5 0 0 1 3 5.8'/%3E%3C/svg%3E");
  display: inline-flex; align-items: center; gap: .35rem; min-width: 0;
}
.hdc-b-gc__facts > div::before { content: ""; flex: none; width: 15px; height: 15px; background: var(--hdc-primary); -webkit-mask: var(--gc-fact) center / contain no-repeat; mask: var(--gc-fact) center / contain no-repeat; }
.hdc-b-gc__facts > .is-ram { --gc-fact: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2.5' y='7' width='19' height='9' rx='1.5'/%3E%3Cpath d='M6.5 10v3M10 10v3M14 10v3M17.5 10v3M5 16v2.5M9 16v2.5M15 16v2.5M19 16v2.5'/%3E%3C/svg%3E"); }
.hdc-b-gc__facts > .is-mods { --gc-fact: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m12 3 9 4.5-9 4.5-9-4.5L12 3Z'/%3E%3Cpath d='m3 12 9 4.5 9-4.5M3 16.5 12 21l9-4.5'/%3E%3C/svg%3E"); }
.hdc-b-gc__facts > .is-size { --gc-fact: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.5v12M7 10.5l5 5 5-5M4 20.5h16'/%3E%3C/svg%3E"); }
.hdc-b-gc__facts > .is-disk { --gc-fact: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='7' width='18' height='10' rx='2'/%3E%3Cpath d='M6.5 12h6M16.5 12h.01M6 7V5.5M10 7V5.5M14 7V5.5M18 7V5.5'/%3E%3C/svg%3E"); }
.hdc-b-gc__facts dt { color: var(--hdc-text-3); font-size: var(--hdc-fs-2xs); font-weight: 600; }
.hdc-b-gc__facts dd { margin: 0; color: var(--hdc-text-2); font: 500 var(--hdc-fs-xs)/1.35 var(--hdc-font-mono); }
.hdc-b-gc__facts.is-sizes dd { color: var(--hdc-heading); font-weight: 600; }
.hdc-b-gc__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem; margin-top: auto; padding-top: .35rem; }
.hdc-b-gc__tags { display: inline-flex; flex-wrap: wrap; gap: .3rem; }
.hdc-b-gc__tags span { padding: .2rem .5rem; border-radius: var(--hdc-r-pill); background: var(--hdc-bg-muted); color: var(--hdc-text-2); font-size: var(--hdc-fs-2xs); font-weight: 600; }
.hdc-b-gc__more { display: inline-flex; align-items: center; gap: .3rem; color: var(--hdc-primary-text); font-size: var(--hdc-fs-sm); font-weight: 600; }
.hdc-b-gc__more::after, .hdc-b-gc__genre-link::after {
  content: "";
  flex: none;
  width: 14px;
  height: 14px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h16M14 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h16M14 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
}
[dir="rtl"] .hdc-b-gc__more::after, [dir="rtl"] .hdc-b-gc__genre-link::after { transform: scaleX(-1); }

/* package: "from" price + order (the order link sits above the card's stretched link) */
.hdc-b-gc__buy { display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: .45rem .6rem; margin-inline-start: auto; }
.hdc-b-gc__price { display: inline-flex; align-items: baseline; gap: .3rem; color: var(--hdc-text-3); font-size: var(--hdc-fs-xs); white-space: nowrap; }
.hdc-b-gc__price strong { color: var(--hdc-heading); font-size: var(--hdc-fs-md); font-weight: 750; letter-spacing: -.01em; }
.hdc-b-gc__order { position: relative; z-index: 2; }
.hdc-b-gc__order.is-faux, .hdc-b-gc__order.is-link {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 .7rem;
  border-radius: var(--hdc-r-pill);
  background: var(--hdc-primary-fill);
  color: var(--hdc-on-primary);
  font-size: var(--hdc-fs-xs);
  font-weight: 650;
  text-decoration: none;
  white-space: nowrap;
}
.hdc-b-gc__order.is-link:hover { background: var(--hdc-primary-fill-hover); color: var(--hdc-on-primary); }
.hdc-b-gc__order.is-link:focus-visible { outline: none; box-shadow: var(--hdc-focus-ring); }

/* every game, A–Z (view "cards", G3E): the same rich card as the popular games, in the same grid. The old image tiles
   (G2) are retired: one card design for the default view, every chip and every search. */
.hdc-b-gc__all { padding-top: clamp(2rem, 1.4rem + 2vw, 3rem); }
.hdc-b-gc--section .hdc-b-gc__all { padding-top: clamp(1.5rem, 1rem + 1.5vw, 2.5rem); }
.hdc-b-gc__all .hdc-b-gc__cards { align-items: stretch; }
/* the active chip's genre page ("See all survival servers") */
.hdc-b-gc__genre-links { margin: 0; }
.hdc-b-gc__genre-link { display: inline-flex; align-items: center; gap: .35rem; color: var(--hdc-primary-text); font-size: var(--hdc-fs-sm); font-weight: 600; text-decoration: none; }
.hdc-b-gc__genre-link:hover { text-decoration: underline; text-underline-offset: 3px; }
.hdc-b-gc__genre-link:focus-visible { border-radius: var(--hdc-r-xs, 4px); outline: none; box-shadow: var(--hdc-focus-ring); }

/* phones: the popular games become one swipeable row (the row scrolls, never the page); the list of every game stays
   a vertical grid — two columns from 560 px, below that each card turns compact (cover beside the text) so a page of
   results stays short */
@media (max-width: 639.98px) {
  .hdc-b-gc__featured .hdc-b-gc__cards { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 84%; gap: .75rem; margin-inline: calc(var(--hdc-gutter) * -1); padding: 0 var(--hdc-gutter) .5rem; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--hdc-gutter); scrollbar-width: none; }
  .hdc-b-gc__featured .hdc-b-gc__cards::-webkit-scrollbar { display: none; }
  .hdc-b-gc__featured .hdc-b-gc__card { scroll-snap-align: start; }
  .hdc-b-gc__all .hdc-b-gc__cards { gap: .75rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hdc-b-gc__card.is-link:hover { transform: none; }
  .hdc-b-gc__body { gap: .45rem; padding: .85rem .9rem .9rem; }
  .hdc-b-gc__name { font-size: var(--hdc-fs-md); }
  .hdc-b-gc__tagline { display: -webkit-box; overflow: hidden; font-size: var(--hdc-fs-xs); -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
}
@media (max-width: 559.98px) {
  .hdc-b-gc__all .hdc-b-gc__cards { grid-template-columns: minmax(0, 1fr); gap: .6rem; }
  .hdc-b-gc__all .hdc-b-gc__card { display: grid; grid-template-columns: 128px minmax(0, 1fr); align-items: start; border-radius: var(--hdc-r-md); }
  /* the whole key art as a thumbnail (2:1, never cropped to the card height) */
  .hdc-b-gc__all .hdc-b-gc__cover { align-self: start; margin-block: .65rem; margin-inline-start: .65rem; border-radius: var(--hdc-r-sm); }
  .hdc-b-gc__all .hdc-b-gc__mark { font-size: 1.4rem; }
  .hdc-b-gc__all .hdc-b-gc__body { gap: .3rem; padding: .6rem .75rem .65rem; }
  .hdc-b-gc__all .hdc-b-gc__name { font-size: var(--hdc-fs-sm); }
  .hdc-b-gc__all .hdc-b-gc__facts { gap: .2rem .7rem; }
  .hdc-b-gc__all .hdc-b-gc__foot { padding-top: .15rem; }
  .hdc-b-gc__all .hdc-b-gc__more { font-size: var(--hdc-fs-xs); }
}

/* compact list (view "list"): thumbnail, name, category, install size / suggested disk */
.hdc-b-gc__list { display: grid; gap: .5rem; margin: 0; padding: 0; list-style: none; grid-template-columns: repeat(auto-fill, minmax(min(100%, 290px), 1fr)); }
.hdc-b-gc__row {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: .75rem;
  min-height: 58px;
  padding: .55rem .8rem;
  border: 1px solid var(--hdc-border);
  border-radius: var(--hdc-r-md);
  background: var(--hdc-surface);
  transition: border-color var(--hdc-dur-1), box-shadow var(--hdc-dur-1);
}
.hdc-b-gc__row.is-link:hover { border-color: var(--hdc-primary); box-shadow: var(--hdc-shadow-sm); }
.hdc-b-gc__row:focus-within { border-color: var(--hdc-primary); box-shadow: var(--hdc-focus-ring); }
.hdc-b-gc__row-icon { display: grid; place-items: center; width: 36px; height: 36px; color: var(--hdc-primary-text); } /* bare icon (owner rule 1.5.2) */
.hdc-b-gc__row-icon .hdc-i { --hdc-i: 24px; }
/* a cover thumbnail (an image, not an icon): rounded corners only */
.hdc-b-gc__row-icon.has-image { width: 72px; height: 36px; overflow: hidden; border-radius: var(--hdc-r-sm); }
.hdc-b-gc__row-icon.has-image img { width: 100%; height: 100%; object-fit: cover; }
.hdc-b-gc__row-main { display: flex; flex-direction: column; gap: .1rem; min-width: 0; }
.hdc-b-gc__row-name { color: var(--hdc-heading); font-size: var(--hdc-fs-sm); font-weight: 600; line-height: 1.3; overflow-wrap: anywhere; text-decoration: none; }
a.hdc-b-gc__row-name::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
a.hdc-b-gc__row-name:focus-visible { outline: none; }
.hdc-b-gc__row-cat { color: var(--hdc-text-3); font-size: var(--hdc-fs-xs); }
.hdc-b-gc__row-price { color: var(--hdc-text-2); font-weight: 600; }
.hdc-b-gc__row-spec { display: flex; flex-direction: column; align-items: flex-end; gap: .15rem; color: var(--hdc-text-3); font: 500 var(--hdc-fs-2xs)/1.2 var(--hdc-font-mono); white-space: nowrap; }
.hdc-b-gc__row-spec .is-disk { color: var(--hdc-text-2); }
/* size / disk glyphs: CSS masks (one rule instead of two <svg> per row; the list can hold 300 games) */
.hdc-b-gc__sz {
  --gc-sz-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.5v12M7 10.5l5 5 5-5M4 20.5h16'/%3E%3C/svg%3E");
  display: inline-flex; align-items: center; gap: .3rem;
}
.hdc-b-gc__sz.is-disk { --gc-sz-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='7' width='18' height='10' rx='2'/%3E%3Cpath d='M6.5 12h6M16.5 12h.01M6 7V5.5M10 7V5.5M14 7V5.5M18 7V5.5'/%3E%3C/svg%3E"); }
.hdc-b-gc__sz::before { content: ""; flex: none; width: 12px; height: 12px; background: currentColor; -webkit-mask: var(--gc-sz-icon) center / contain no-repeat; mask: var(--gc-sz-icon) center / contain no-repeat; }
.hdc-b-gc__list-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .35rem 1.25rem; margin-bottom: 1rem; }
.hdc-b-gc__list-head .hdc-b-gc__subtitle { margin-bottom: 0; }
.hdc-b-gc__legend { display: flex; flex-wrap: wrap; gap: .35rem 1rem; margin: 0; color: var(--hdc-text-3); font-size: var(--hdc-fs-xs); }
.hdc-b-gc__legend .is-disk { color: var(--hdc-text-2); }
.hdc-b-gc__more-wrap { margin-top: 1.25rem; text-align: center; }
.hdc-b-gc__more-wrap .hdc-btn .hdc-i { --hdc-i: 16px; }
.hdc-b-gc__note { display: flex; align-items: flex-start; gap: .45rem; max-width: 820px; margin: 1.25rem 0 0; color: var(--hdc-text-3); font-size: var(--hdc-fs-xs); line-height: 1.55; }
.hdc-b-gc__note .hdc-i { flex: none; margin-top: .1rem; }
.hdc-b-gc__empty { display: grid; justify-items: center; gap: .75rem; margin-top: 1.25rem; padding: 2rem 1rem; border: 1px dashed var(--hdc-border-strong); border-radius: var(--hdc-r-lg); color: var(--hdc-text-2); text-align: center; }
.hdc-b-gc__empty p { margin: 0; }
.hdc-b-gc__empty .hdc-i--lg { color: var(--hdc-text-3); }
.hdc-b-gc__admin { display: flex; align-items: flex-start; gap: .45rem; margin-top: 1rem; }
.hdc-b-gc__admin .hdc-i { flex: none; margin-top: .15rem; }

/* "Browse by genre" (G3E): plain links to the genre pages */
.hdc-b-gc__genres { padding-top: clamp(2rem, 1.4rem + 2vw, 3rem); }
/* five per row at most (WD1: nine genres stay 5 + 4 on wide screens instead of 7 + 2) */
.hdc-b-gc__genre-list { display: grid; gap: .65rem; margin: 0; padding: 0; list-style: none; grid-template-columns: repeat(auto-fill, minmax(min(100%, max(230px, (100% - 2.6rem) / 5)), 1fr)); }
.hdc-b-gc__genre {
  position: relative;
  display: flex;
  align-items: center;
  gap: .75rem;
  height: 100%;
  padding: .75rem .9rem;
  border: 1px solid var(--hdc-border);
  border-radius: var(--hdc-r-md);
  background: var(--hdc-surface);
  color: var(--hdc-text);
  text-decoration: none;
  transition: border-color var(--hdc-dur-1), box-shadow var(--hdc-dur-1), background-color var(--hdc-dur-1);
}
.hdc-b-gc__genre:hover { border-color: var(--hdc-primary); box-shadow: var(--hdc-shadow-sm); color: var(--hdc-text); }
.hdc-b-gc__genre:focus-visible { outline: none; border-color: var(--hdc-primary); box-shadow: var(--hdc-focus-ring); }
.hdc-b-gc__genre-glyph { flex: none; width: 40px; height: 40px; padding: 5px; color: var(--hdc-primary-text); fill: none; stroke: currentColor; } /* bare glyph, no disc */
.hdc-b-gc__genre-text { display: flex; flex-direction: column; gap: .1rem; min-width: 0; }
.hdc-b-gc__genre-name { color: var(--hdc-heading); font-size: var(--hdc-fs-sm); font-weight: 650; line-height: 1.3; }
.hdc-b-gc__genre-sub { color: var(--hdc-text-3); font-size: var(--hdc-fs-xs); line-height: 1.4; }

@media (prefers-reduced-motion: reduce) {
  .hdc-b-gc__card, .hdc-b-gc__card.is-link:hover, .hdc-b-gc__cover img, .hdc-b-gc__genre { transition: none; transform: none !important; }
}

/* block: game-hero */
.hdc-section.hdc-b-game-hero { padding-block: 0; }
.hdc-b-game-hero.hdc-section--tight > .hdc-hero { padding-block: calc(var(--hdc-section-y) * .6); }
.hdc-b-gh__grid { display: grid; gap: clamp(2.25rem, 1.6rem + 3vw, 4rem); align-items: center; }
@media (min-width: 1024px) {
  .hdc-b-gh__grid { grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); }
}
.hdc-b-gh__copy { min-width: 0; }
.hdc-b-gh__badge { gap: .55rem; }
.hdc-b-gh__badge-icon { display: inline-grid; place-items: center; width: 26px; height: 26px; color: var(--hdc-primary-text); } /* bare (owner rule 1.5.2) */
.hdc-b-gh__badge-icon .hdc-i { --hdc-i: 20px; }
.hdc-b-gh__title { margin: 0 0 1.15rem; font-size: var(--hdc-fs-display); font-weight: 780; line-height: 1.05; letter-spacing: var(--hdc-tracking-display); overflow-wrap: break-word; }
.hdc-b-gh__title em {
  font-style: normal;
  background: linear-gradient(100deg, var(--hdc-primary) 10%, var(--hdc-accent) 90%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hdc-b-gh__points { margin-bottom: 1.75rem; }
.hdc-b-gh__actions { gap: .75rem; }
.hdc-b-gh__side { display: grid; gap: .75rem; min-width: 0; }
/* G2: the card follows the site's light or dark mode (it was always "night") */
.hdc-b-gh__card {
  overflow: hidden;
  border: 1px solid var(--hdc-border);
  border-radius: var(--hdc-r-xl);
  background: var(--hdc-surface);
  box-shadow: var(--hdc-shadow-lg);
}
.hdc-b-gh__cover {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 16 / 7;
  overflow: hidden;
  background:
    radial-gradient(120% 100% at 100% 0%, rgba(255, 255, 255, .18) 0%, transparent 55%),
    linear-gradient(135deg, var(--gc-a) 0%, var(--gc-b) 100%);
  color: #fff;
}
.hdc-b-gh__cover::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255, 255, 255, .15) 1px, transparent 1.2px);
  background-size: 16px 16px;
  -webkit-mask-image: linear-gradient(110deg, transparent 25%, #000 100%);
  mask-image: linear-gradient(110deg, transparent 25%, #000 100%);
}
.hdc-b-gh__cover img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* G2: artwork keeps a soft veil at the bottom for the status pill (in both modes) */
.hdc-b-gh__cover:has(> img)::after { background: linear-gradient(180deg, transparent 52%, rgba(4, 10, 20, .55) 100%); -webkit-mask-image: none; mask-image: none; }
.hdc-b-gh__mark { position: relative; z-index: 1; font: 800 clamp(2.6rem, 2rem + 2vw, 3.6rem)/1 var(--hdc-font-sans); letter-spacing: -.045em; text-shadow: 0 8px 30px rgba(0, 0, 0, .35); }
.hdc-b-gh__glyph { position: absolute; inset-inline-end: -6%; bottom: -30%; width: 46%; aspect-ratio: 1; height: auto; opacity: .2; fill: none; stroke: currentColor; transform: rotate(-12deg); }
.hdc-b-gh__status {
  position: absolute;
  z-index: 2;
  inset-block-end: .75rem;
  inset-inline-start: .75rem;
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .3rem .7rem;
  border-radius: var(--hdc-r-pill);
  background: rgba(4, 10, 20, .55);
  color: #fff;
  font: 600 var(--hdc-fs-2xs)/1.2 var(--hdc-font-mono);
  letter-spacing: var(--hdc-tracking-label);
  text-transform: uppercase;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.hdc-b-gh__facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0; padding: .35rem 1.25rem .5rem; }
.hdc-b-gh__facts > div { display: grid; gap: .2rem; min-width: 0; padding: .8rem 0; border-bottom: 1px solid var(--hdc-border); }
.hdc-b-gh__facts > div:nth-child(odd) { padding-inline-end: 1rem; }
.hdc-b-gh__facts > div:nth-last-child(-n + 2):nth-child(odd), .hdc-b-gh__facts > div:last-child { border-bottom: 0; }
.hdc-b-gh__facts dt { display: flex; align-items: center; gap: .4rem; color: var(--hdc-text-3); font: 600 var(--hdc-fs-2xs)/1.2 var(--hdc-font-mono); letter-spacing: var(--hdc-tracking-label); text-transform: uppercase; }
.hdc-b-gh__facts dt .hdc-i { --hdc-i: 14px; color: var(--hdc-primary); }
.hdc-b-gh__facts dd { margin: 0; color: var(--hdc-heading); font-size: var(--hdc-fs-sm); font-weight: 600; line-height: 1.4; overflow-wrap: anywhere; }
.hdc-b-gh__chips-wrap { padding: .9rem 1.25rem 1.2rem; border-top: 1px solid var(--hdc-border); }
.hdc-b-gh__chips-label { margin: 0 0 .55rem; color: var(--hdc-text-3); font: 600 var(--hdc-fs-2xs)/1.2 var(--hdc-font-mono); letter-spacing: var(--hdc-tracking-label); text-transform: uppercase; }
.hdc-b-gh__chips { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0; padding: 0; list-style: none; }
.hdc-b-gh__chips li { padding: .3rem .65rem; border: 1px solid var(--hdc-border-strong); border-radius: var(--hdc-r-pill); background: var(--hdc-surface); color: var(--hdc-text); font-size: var(--hdc-fs-xs); font-weight: 500; }
.hdc-b-gh__note { display: flex; align-items: flex-start; gap: .4rem; margin: 0; color: var(--hdc-text-3); font-size: var(--hdc-fs-xs); line-height: 1.5; }
.hdc-b-gh__note .hdc-i { flex: none; margin-top: .1rem; }
@media (max-width: 479.98px) {
  .hdc-b-gh__facts { grid-template-columns: minmax(0, 1fr); }
  .hdc-b-gh__facts > div:nth-child(odd) { padding-inline-end: 0; }
  .hdc-b-gh__facts > div:nth-last-child(-n + 2):nth-child(odd) { border-bottom: 1px solid var(--hdc-border); }
  .hdc-b-gh__facts > div:last-child { border-bottom: 0; }
}

/* term tooltip (compare-table, game-hero): the explanation lives in .hdc-term__tip (aria-describedby); js/hdc-blocks.js
   shows it in one fixed bubble (.hdc-termtip) so scrolling tables never clip it */
.hdc-term { display: inline-flex; align-items: center; gap: .3rem; }
.hdc-term__btn {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 22px;
  height: 22px;
  margin: -2px 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--hdc-text-3);
  cursor: help;
}
.hdc-term__btn:hover, .hdc-term__btn[aria-expanded="true"] { background: var(--hdc-primary-soft); color: var(--hdc-primary-text); }
.hdc-term__btn:focus-visible { outline: none; box-shadow: var(--hdc-focus-ring); color: var(--hdc-primary-text); }
.hdc-term__btn .hdc-i { --hdc-i: 14px; }
.hdc-term__tip { display: none; }
/* without JavaScript: a plain bubble next to the term on hover/focus */
html:not(.hdc-js) .hdc-term { position: relative; }
html:not(.hdc-js) .hdc-term__btn:hover + .hdc-term__tip,
html:not(.hdc-js) .hdc-term__btn:focus + .hdc-term__tip {
  position: absolute;
  z-index: 30;
  inset-block-start: calc(100% + 6px);
  inset-inline-start: 0;
  display: block;
  width: max-content;
  max-width: min(280px, calc(100vw - 2rem));
  padding: .5rem .7rem;
  border-radius: var(--hdc-r-sm);
  background: var(--hdc-gray-900);
  color: #fff;
  font-size: var(--hdc-fs-xs);
  font-weight: 500;
  line-height: 1.45;
  text-align: start;
  white-space: normal;
}
.hdc-termtip {
  position: fixed;
  z-index: 1080;
  max-width: min(300px, calc(100vw - 24px));
  padding: .55rem .75rem;
  border-radius: var(--hdc-r-sm);
  background: var(--hdc-gray-900);
  color: #fff;
  font: 500 var(--hdc-fs-xs)/1.5 var(--hdc-font-sans);
  text-align: start;
  box-shadow: var(--hdc-shadow-md);
  pointer-events: none;
  animation: hdc-fade var(--hdc-dur-2) var(--hdc-ease);
}
:root[data-theme="dark"] .hdc-termtip { background: var(--hdc-gray-100); color: var(--hdc-gray-900); }
@media (prefers-reduced-motion: reduce) { .hdc-termtip { animation: none; } }

/* block: compare-table */
.hdc-ctable { position: relative; }
.hdc-ctable__box { position: relative; } /* contain .hdc-sr-only spans inside the scroll box (see pricing-compare) */
.hdc-ctable__box:focus-visible { outline: none; box-shadow: var(--hdc-focus-ring); }
.hdc-ctable[data-cols="1"] table, .hdc-ctable[data-cols="2"] table { min-width: 480px; }
.hdc-ctable[data-cols="3"] table { min-width: 600px; }
.hdc-ctable[data-cols="5"] table, .hdc-ctable[data-cols="6"] table { min-width: 860px; }
.hdc-ctable tbody th[scope="row"] { font-weight: 500; }
.hdc-ctable thead th { vertical-align: bottom; }
.hdc-ctable .hdc-compare__plan .hdc-badge { height: 22px; }
.hdc-ctable__sub { color: var(--hdc-text-3); font-size: var(--hdc-fs-xs); font-weight: 500; line-height: 1.35; }
.hdc-ctable td.is-val { color: var(--hdc-heading); font-weight: 500; }
.hdc-ctable .hdc-compare__group th {
  position: static;
  padding-top: 1.35rem;
  background: var(--hdc-bg-soft);
  color: var(--hdc-heading);
  font-family: var(--hdc-font-mono);
  font-size: var(--hdc-fs-2xs);
  font-weight: 600;
  letter-spacing: var(--hdc-tracking-label);
  text-align: start;
  text-transform: uppercase;
}
.hdc-ctable th.is-hl { box-shadow: inset 0 3px 0 var(--hdc-primary); }
.hdc-ctable th.is-pick, .hdc-ctable td.is-pick { background: color-mix(in srgb, var(--hdc-accent) 12%, var(--hdc-surface)); }
.hdc-ctable th.is-pick { box-shadow: inset 0 3px 0 var(--hdc-accent); }
@media (min-width: 960px) {
  .hdc-ctable.is-sticky .hdc-ctable__box { overflow: visible; }
  .hdc-ctable.is-sticky thead th { top: calc(var(--hdc-header-h) + var(--hdc-topbar-h)); }
  .hdc-ctable.is-sticky thead th:first-child { border-start-start-radius: var(--hdc-r-xl); }
  .hdc-ctable.is-sticky thead th:last-child { border-start-end-radius: var(--hdc-r-xl); }
  .hdc-ctable.is-sticky tbody:last-child tr:last-child > :first-child { border-end-start-radius: var(--hdc-r-xl); }
  .hdc-ctable.is-sticky tbody:last-child tr:last-child > :last-child { border-end-end-radius: var(--hdc-r-xl); }
}
.hdc-ctable__note { display: flex; align-items: flex-start; gap: .45rem; max-width: 880px; margin: 1rem auto 0; color: var(--hdc-text-3); font-size: var(--hdc-fs-xs); line-height: 1.55; }
.hdc-ctable__note .hdc-i { flex: none; margin-top: .1rem; }
.hdc-ctable__actions { margin-top: 1.5rem; }
.hdc-ctable__actions.is-center { justify-content: center; }

/* size finder */
.hdc-ctable__advisor {
  display: grid;
  gap: .9rem;
  margin-bottom: 1.25rem;
  padding: 1.1rem 1.25rem;
  border: 1px solid var(--hdc-border);
  border-radius: var(--hdc-r-lg);
  background: radial-gradient(80% 120% at 100% 0%, var(--hdc-primary-soft) 0%, transparent 60%), var(--hdc-surface);
}
.hdc-ctable__advisor-title { display: flex; align-items: center; gap: .5rem; margin: 0; color: var(--hdc-heading); font-weight: 650; }
.hdc-ctable__advisor-title .hdc-i { color: var(--hdc-primary); }
.hdc-ctable__advisor-controls { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 1rem 2rem; }
.hdc-ctable__range { display: grid; gap: .4rem; flex: 1 1 260px; min-width: 0; }
.hdc-ctable__range label, .hdc-ctable__mods-label { color: var(--hdc-text-2); font-size: var(--hdc-fs-sm); font-weight: 500; }
.hdc-ctable__range-row { display: flex; align-items: center; gap: .9rem; }
.hdc-ctable__range input[type="range"] { flex: 1 1 auto; min-width: 0; accent-color: var(--hdc-primary); }
.hdc-ctable__range input[type="range"]:focus-visible { outline: none; box-shadow: var(--hdc-focus-ring); border-radius: var(--hdc-r-pill); }
.hdc-ctable__range-out { min-width: 3.4rem; padding: .3rem .55rem; border-radius: var(--hdc-r-pill); background: var(--hdc-primary-soft); color: var(--hdc-primary-text); font: 700 var(--hdc-fs-sm)/1.2 var(--hdc-font-mono); text-align: center; }
.hdc-ctable__mods { display: grid; gap: .4rem; }
.hdc-ctable__advisor-result { margin: 0; color: var(--hdc-text); font-size: var(--hdc-fs-sm); }
.hdc-ctable__advisor-result strong { color: var(--hdc-heading); }

/* phone views */
.hdc-ctable__cards { display: none; }
@media (max-width: 639.98px) {
  .hdc-ctable--cards .hdc-ctable__box { display: none; }
  .hdc-ctable--cards .hdc-ctable__cards { display: grid; gap: .75rem; margin: 0; padding: 0; list-style: none; }
  .hdc-ctable--rows table, .hdc-ctable--rows thead, .hdc-ctable--rows tbody, .hdc-ctable--rows tr, .hdc-ctable--rows th, .hdc-ctable--rows td { display: block; }
  .hdc-ctable--rows .hdc-ctable__box { overflow: visible; border: 0; background: transparent; }
  .hdc-ctable--rows table { min-width: 0 !important; }
  .hdc-ctable--rows thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .hdc-ctable--rows tbody tr:not(.hdc-compare__group) { margin-bottom: .6rem; border: 1px solid var(--hdc-border); border-radius: var(--hdc-r-lg); background: var(--hdc-surface); }
  .hdc-ctable--rows tbody th[scope="row"] { position: static; padding: .85rem 1rem .4rem; border: 0; background: transparent; color: var(--hdc-heading); font-weight: 650; }
  .hdc-ctable--rows .hdc-compare__group th { margin: 1rem 0 .5rem; padding: 0; border: 0; background: transparent; }
  .hdc-ctable--rows td { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .5rem 1rem; border-bottom: 0; border-top: 1px dashed var(--hdc-border); text-align: end; }
  .hdc-ctable--rows td::before { content: attr(data-label); color: var(--hdc-text-2); font-weight: 500; text-align: start; }
  .hdc-ctable--rows td.is-hl { background: color-mix(in srgb, var(--hdc-primary) 6%, var(--hdc-surface)); }
  .hdc-ctable--rows tr > td:last-child { border-end-start-radius: var(--hdc-r-lg); border-end-end-radius: var(--hdc-r-lg); }
}
.hdc-ctable__card { padding: 1rem 1.1rem 1.1rem; border: 1px solid var(--hdc-border); border-radius: var(--hdc-r-lg); background: var(--hdc-surface); }
.hdc-ctable__card.is-hl { border-color: var(--hdc-primary); box-shadow: inset 0 0 0 1px var(--hdc-primary); }
.hdc-ctable__card.is-pick { border-color: var(--hdc-accent); box-shadow: inset 0 0 0 1px var(--hdc-accent), var(--hdc-shadow-md); }
.hdc-ctable__card-head { display: grid; justify-items: start; gap: .3rem; padding-bottom: .65rem; }
.hdc-ctable__card-title { margin: 0; font-size: var(--hdc-fs-lg); }
.hdc-ctable__card-head .hdc-ctable__sub { margin: 0; }
.hdc-ctable__card-rows { margin: 0; }
.hdc-ctable__card-rows > div { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .55rem 0; border-top: 1px dashed var(--hdc-border); }
.hdc-ctable__card-rows > div.is-group-start { margin-top: .4rem; border-top-style: solid; }
.hdc-ctable__card-rows dt { display: inline-flex; align-items: center; gap: .3rem; color: var(--hdc-text-2); font-size: var(--hdc-fs-sm); }
.hdc-ctable__card-rows dd { margin: 0; color: var(--hdc-heading); font-size: var(--hdc-fs-sm); font-weight: 600; text-align: end; }
.hdc-ctable__card-rows dd.is-yes .hdc-i { color: var(--hdc-success); }
.hdc-ctable__card-rows dd.is-no .hdc-i { color: var(--hdc-text-disabled); }

/* pricing-compare: one card per plan on phones (same pricing contract as the table header) */
.hdc-b-compare__cards { display: none; }
@media (max-width: 639.98px) {
  .hdc-b-pricing-compare .hdc-b-compare { display: none; }
  .hdc-b-pricing-compare .hdc-b-compare__cards { display: grid; gap: .75rem; margin: 0; padding: 0; list-style: none; }
}
.hdc-b-compare__card { padding: 1rem 1.1rem 1.1rem; border: 1px solid var(--hdc-border); border-radius: var(--hdc-r-lg); background: var(--hdc-surface); }
.hdc-b-compare__card.is-hl { border-color: var(--hdc-primary); box-shadow: inset 0 0 0 1px var(--hdc-primary); }
.hdc-b-compare__card .hdc-compare__plan { justify-items: start; gap: .4rem; padding-bottom: .75rem; }
.hdc-b-compare__card .hdc-compare__plan .hdc-btn { justify-self: stretch; }
.hdc-b-compare__rows { margin: 0; }
.hdc-b-compare__rows > div { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .5rem 0; border-top: 1px dashed var(--hdc-border); font-size: var(--hdc-fs-sm); }
.hdc-b-compare__rows dt { color: var(--hdc-text-2); }
.hdc-b-compare__rows dd { margin: 0; color: var(--hdc-heading); font-weight: 600; text-align: end; }
.hdc-b-compare__rows dd.is-yes .hdc-i { color: var(--hdc-success); }
.hdc-b-compare__rows dd.is-no .hdc-i { color: var(--hdc-text-disabled); }

/* competitor-compare: one card per row on phones (column names from data-label) */
@media (max-width: 639.98px) {
  .hdc-b-competitor-compare .hdc-b-vs { overflow: visible; border: 0; background: transparent; }
  .hdc-b-competitor-compare .hdc-b-vs table,
  .hdc-b-competitor-compare .hdc-b-vs thead,
  .hdc-b-competitor-compare .hdc-b-vs tbody,
  .hdc-b-competitor-compare .hdc-b-vs tr,
  .hdc-b-competitor-compare .hdc-b-vs th,
  .hdc-b-competitor-compare .hdc-b-vs td { display: block; min-width: 0; }
  .hdc-b-competitor-compare .hdc-b-vs thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .hdc-b-competitor-compare .hdc-b-vs tbody tr:not(.hdc-compare__group) { margin-bottom: .6rem; border: 1px solid var(--hdc-border); border-radius: var(--hdc-r-lg); background: var(--hdc-surface); }
  .hdc-b-competitor-compare .hdc-b-vs tbody th[scope="row"] { position: static; padding: .85rem 1rem .4rem; border: 0; background: transparent; color: var(--hdc-heading); font-weight: 650; }
  .hdc-b-competitor-compare .hdc-b-vs .hdc-compare__group td { margin: 1rem 0 .5rem; padding: 0; border: 0; background: transparent !important; }
  .hdc-b-competitor-compare .hdc-b-vs td:not([colspan]) { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .5rem 1rem; border-bottom: 0; border-top: 1px dashed var(--hdc-border); text-align: end; }
  .hdc-b-competitor-compare .hdc-b-vs td:not([colspan])::before { content: attr(data-label); color: var(--hdc-text-2); font-weight: 500; text-align: start; }
  .hdc-b-competitor-compare .hdc-b-vs td.is-us { background: color-mix(in srgb, var(--hdc-primary) 7%, var(--hdc-surface)); }
  .hdc-b-competitor-compare .hdc-b-vs tr > td:last-child { border-end-start-radius: var(--hdc-r-lg); border-end-end-radius: var(--hdc-r-lg); }
}

/* block: pricing — empty state "title + contact" (emptyMode custom) */
.hdc-b-pricing__soon {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 1.25rem 1.5rem;
  max-width: 980px;
  margin-inline: auto;
  padding: clamp(1.4rem, 1rem + 2vw, 2.25rem);
  border: 1px solid var(--hdc-border);
  border-radius: var(--hdc-r-xl);
  background:
    radial-gradient(70% 120% at 100% 0%, var(--hdc-primary-soft) 0%, transparent 65%),
    var(--hdc-surface);
  box-shadow: var(--hdc-shadow-sm);
}
.hdc-b-pricing__soon-body { min-width: 0; }
.hdc-b-pricing__soon-title { margin: .2rem 0 .4rem; font-size: clamp(1.35rem, 1.1rem + 1vw, 1.85rem); }
.hdc-b-pricing__soon-body p { margin: 0; max-width: 64ch; color: var(--hdc-text-2); }
.hdc-b-pricing__soon-actions { grid-column: 2; gap: .75rem; }
@media (max-width: 639.98px) {
  .hdc-b-pricing__soon { grid-template-columns: minmax(0, 1fr); }
  .hdc-b-pricing__soon-actions { grid-column: 1; }
}

/* RTL pages: specs such as "4–6 GB" or "25565 TCP" keep their own direction (first strong character decides) */
/* (centred cells and shrink-wrapped spans only: on full-width blocks plaintext would also flip the text alignment) */
.hdc-ctable td, .hdc-b-gc__row-spec > span { unicode-bidi: plaintext; }


/* ===== part: blocks-policy.css ===== */
/* ==========================================================================
   L1 — Policies (docs/handoff/L1.md §5). Bundled into hdc-pages.css by tools/build_css.py.
   Tokens only (dark mode and night/brand sections follow automatically), logical properties only (RTL).
   ========================================================================== */

/* ==========================================================================
   Policy text lists — {{policy:…}} embeds inside legal documents and the policy-coverage block
   ========================================================================== */
.hdc-policy-list { margin: 0; }
.hdc-policy-list__label { color: var(--hdc-text); }
.hdc-policy-list__terms { color: var(--hdc-text-2); }
.hdc-policy-list__note {
  display: block;
  margin-block-start: .2rem;
  color: var(--hdc-text-2);
  font-size: var(--hdc-fs-sm);
}
.hdc-policy-addenda { display: grid; gap: .35rem 0; margin: 0; }
.hdc-policy-addenda dt { color: var(--hdc-heading); font-weight: 600; }
.hdc-policy-addenda dd { margin: 0 0 .75rem; }
.hdc-policy-addenda dd > * + * { margin-block-start: .6em; }

/* ==========================================================================
   block: policy-coverage
   ========================================================================== */
.hdc-b-policy-coverage .hdc-b-policy-coverage__parts {
  display: grid;
  gap: clamp(1.25rem, .9rem + 1.2vw, 2rem);
  max-width: 75ch;
}
.hdc-b-policy-coverage .hdc-b-policy-coverage__heading {
  margin: 0 0 .6rem;
  font-size: var(--hdc-fs-h4, 1.15rem);
}
.hdc-b-policy-coverage .hdc-b-policy-coverage__more {
  margin: 1.25rem 0 0;
  font-size: var(--hdc-fs-sm);
}
.hdc-b-policy-coverage .hdc-b-policy-coverage__more a { text-decoration: underline; text-underline-offset: 3px; }

/* ==========================================================================
   block: policy-meta — version line under the page header
   ========================================================================== */
.hdc-b-policy-meta .hdc-b-policy-meta__box {
  display: grid;
  gap: .75rem;
  padding-block: .25rem;
  border-block-end: 1px solid var(--hdc-border);
  padding-block-end: 1rem;
}
.hdc-b-policy-meta .hdc-b-policy-meta__notice { margin: 0; }
.hdc-b-policy-meta .hdc-b-policy-meta__notice-text { display: block; margin-block-start: .15rem; font-weight: 400; }
.hdc-b-policy-meta .hdc-b-policy-meta__facts {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem 1.75rem;
  margin: 0;
}
.hdc-b-policy-meta .hdc-b-policy-meta__fact { display: flex; flex-wrap: wrap; align-items: baseline; gap: .4rem; min-width: 0; }
.hdc-b-policy-meta .hdc-b-policy-meta__fact dt {
  color: var(--hdc-text-3);
  font-size: var(--hdc-fs-sm);
}
.hdc-b-policy-meta .hdc-b-policy-meta__fact dd {
  margin: 0;
  color: var(--hdc-heading);
  font-size: var(--hdc-fs-sm);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.hdc-b-policy-meta .hdc-b-policy-meta__summary { margin: 0; color: var(--hdc-text-2); font-size: var(--hdc-fs-sm); }
.hdc-b-policy-meta .hdc-b-policy-meta__summary-label { color: var(--hdc-text-3); }
.hdc-b-policy-meta .hdc-b-policy-meta__history { font-size: var(--hdc-fs-sm); }
.hdc-b-policy-meta .hdc-b-policy-meta__history summary {
  width: fit-content;
  color: var(--hdc-primary);
  font-weight: 600;
  cursor: pointer;
}
.hdc-b-policy-meta .hdc-b-policy-meta__history summary:focus-visible { outline: 2px solid var(--hdc-primary); outline-offset: 3px; border-radius: 4px; }
.hdc-b-policy-meta .hdc-b-policy-meta__versions {
  display: grid;
  gap: .5rem;
  margin: .75rem 0 0;
  padding: 0;
  list-style: none;
}
.hdc-b-policy-meta .hdc-b-policy-meta__versions li { color: var(--hdc-text-2); }
.hdc-b-policy-meta .hdc-b-policy-meta__versions strong { color: var(--hdc-heading); }
.hdc-b-policy-meta .hdc-b-policy-meta__vsummary { display: block; }
/* the version line belongs to the document below it: no full section gap in between */
.hdc-b-policy-meta + .hdc-b-legal { padding-block-start: calc(var(--hdc-section-y) * .4); }

/* ==========================================================================
   block: policy-links — links (inline | list) and the additional terms that apply here
   ========================================================================== */
.hdc-b-policy-links .hdc-b-policy-links__box { display: grid; gap: 1rem; }
.hdc-b-policy-links .hdc-b-policy-links__title { margin: 0; font-size: var(--hdc-fs-h4, 1.15rem); }
.hdc-b-policy-links .hdc-b-policy-links__lead { margin: 0; color: var(--hdc-text-2); }
.hdc-b-policy-links .hdc-b-policy-links__list { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; margin: 0; padding: 0; list-style: none; }
.hdc-b-policy-links .hdc-b-policy-links__list--list { display: grid; gap: .5rem; }
.hdc-b-policy-links .hdc-b-policy-links__list a {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-weight: 600;
}
.hdc-b-policy-links .hdc-b-policy-links__list a[aria-current="page"] { color: var(--hdc-heading); text-decoration: none; }
.hdc-b-policy-links .hdc-b-policy-links__addenda { display: grid; gap: .75rem; }
.hdc-b-policy-links .hdc-b-policy-links__addendum {
  padding: 1rem 1.25rem;
  border: 1px solid var(--hdc-border);
  border-radius: var(--hdc-r-lg);
  background: var(--hdc-surface);
}
.hdc-b-policy-links .hdc-b-policy-links__addendum h3 { margin: 0 0 .4rem; font-size: var(--hdc-fs-base); }
.hdc-b-policy-links .hdc-b-policy-links__of { margin: .6rem 0 0; color: var(--hdc-text-3); font-size: var(--hdc-fs-sm); }

/* ==========================================================================
   Accepted policies of an order (order-complete page, service page — WHMCS hook output)
   ========================================================================== */
.hdc-policy-accepted .hdc-policy-accepted__list { display: grid; gap: .5rem; margin: 0; padding: 0; list-style: none; }
.hdc-policy-accepted .hdc-policy-accepted__item { color: var(--hdc-text); }
.hdc-policy-accepted .hdc-policy-accepted__item a { font-weight: 600; }
.hdc-policy-accepted .hdc-policy-accepted__meta { color: var(--hdc-text-3); font-size: var(--hdc-fs-sm); }
.hdc-policy-accepted .hdc-policy-accepted__when { margin: .75rem 0 0; color: var(--hdc-text-3); font-size: var(--hdc-fs-sm); }

@media (max-width: 479px) {
  .hdc-b-policy-meta .hdc-b-policy-meta__facts { gap: .3rem 1rem; }
  .hdc-b-policy-links .hdc-b-policy-links__addendum { padding: .875rem 1rem; }
}


/* ===== part: consent.css ===== */
/* ==========================================================================
   AN1 — cookie consent banner, preferences dialog, "Cookie settings" links and the cookie-table block
   (includes/hdc-consent.tpl, js/hdc-consent.js, blocks/cookie-table). Tokens only: light and dark mode follow the
   theme; logical properties only (RTL). "Accept all" and "Reject all" always share one style and size.
   ========================================================================== */

/* page: consent */
.hdc-consent[hidden], .hdc-consent__banner[hidden], [data-hdc-consent-open][hidden], [data-hdc-consent-show][hidden] { display: none !important; }

.hdc-consent__banner {
  position: fixed;
  inset-inline: 0;
  inset-block-end: 0;
  z-index: 1080;
  padding: 0 0 max(.75rem, env(safe-area-inset-bottom));
  pointer-events: none;
}
.hdc-consent__inner {
  pointer-events: auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 1rem 1.5rem;
  margin-inline: auto;
  width: min(1120px, calc(100% - 1.5rem));
  padding: 1.15rem 1.35rem;
  border: 1px solid var(--hdc-border);
  border-radius: var(--hdc-r-xl);
  background: var(--hdc-surface-raised);
  color: var(--hdc-text);
  box-shadow: var(--hdc-shadow-lg);
}
.hdc-consent__title {
  margin: 0 0 .3rem;
  font-size: var(--hdc-fs-md);
  line-height: var(--hdc-lh-heading);
  color: var(--hdc-heading);
}
.hdc-consent__text {
  margin: 0;
  font-size: var(--hdc-fs-sm);
  line-height: var(--hdc-lh-body);
  color: var(--hdc-text-2);
}
.hdc-consent__text a, .hdc-consent__policy { color: var(--hdc-link); text-decoration: underline; text-underline-offset: 2px; }
.hdc-consent__policy { display: inline-block; margin-block-start: .35rem; font-size: var(--hdc-fs-sm); }
.hdc-consent__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: .5rem;
}
/* equal prominence: the two choice buttons are the same component, the same size and the same colour */
.hdc-consent__choice { min-width: 9.5rem; }
.hdc-consent__more { min-width: 0; }

@media (max-width: 760px) {
  .hdc-consent__inner { grid-template-columns: minmax(0, 1fr); padding: 1rem; }
  .hdc-consent__actions { justify-content: stretch; }
  .hdc-consent__choice { flex: 1 1 8rem; min-width: 0; }
  .hdc-consent__more { flex: 1 1 100%; }
}

/* preferences dialog (native <dialog class="hdc-dialog">: the page behind is inert, Escape closes). Header and the
   choice buttons stay in view; only the categories scroll. */
.hdc-consent-dialog { padding: 0; }
dialog.hdc-consent-dialog[open] { display: flex; flex-direction: column; overflow: hidden; }
.hdc-consent-dialog .hdc-dialog__header, .hdc-consent-dialog .hdc-dialog__footer { flex: 0 0 auto; }
.hdc-consent-dialog .hdc-dialog__body { flex: 1 1 auto; min-height: 0; overflow: auto; overscroll-behavior: contain; }
.hdc-consent-dialog__close {
  display: inline-grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border: 0;
  border-radius: var(--hdc-r-sm);
  background: transparent;
  color: var(--hdc-text-2);
  cursor: pointer;
}
.hdc-consent-dialog__close:hover { background: var(--hdc-bg-muted); color: var(--hdc-heading); }
.hdc-consent-dialog__close:focus-visible { outline: none; box-shadow: var(--hdc-focus-ring); }
.hdc-consent-dialog__lead { margin: 0 0 1rem; color: var(--hdc-text-2); font-size: var(--hdc-fs-sm); }
.hdc-consent__note {
  margin: 0 0 1rem;
  padding: .7rem .9rem;
  border-radius: var(--hdc-r-md);
  background: var(--hdc-info-soft);
  color: var(--hdc-info-text);
  font-size: var(--hdc-fs-sm);
}
.hdc-consent__cats { list-style: none; margin: 0; padding: 0; display: grid; gap: .75rem; }
.hdc-consent__cat {
  padding: .9rem 1rem;
  border: 1px solid var(--hdc-border);
  border-radius: var(--hdc-r-lg);
  background: var(--hdc-surface);
}
.hdc-consent__cat-head { display: flex; align-items: center; justify-content: space-between; gap: .75rem; }
.hdc-consent__cat-name { font-weight: 650; color: var(--hdc-heading); }
.hdc-consent__always { font-size: var(--hdc-fs-xs); color: var(--hdc-success-text); font-weight: 600; white-space: nowrap; }
.hdc-consent__cat-desc { margin: .45rem 0 0; font-size: var(--hdc-fs-sm); color: var(--hdc-text-2); }
.hdc-consent__cat details { margin-block-start: .6rem; }
.hdc-consent__cat summary {
  cursor: pointer;
  font-size: var(--hdc-fs-sm);
  font-weight: 600;
  color: var(--hdc-link);
  width: fit-content;
  border-radius: var(--hdc-r-xs);
}
.hdc-consent__cat summary:focus-visible { outline: none; box-shadow: var(--hdc-focus-ring); }
.hdc-consent__cookies { margin-block-start: .5rem; font-size: var(--hdc-fs-xs); }
.hdc-consent__cookies th, .hdc-consent__cookies td { padding: .4rem .55rem; vertical-align: top; }
.hdc-consent__cookies code { font-size: inherit; white-space: nowrap; }
.hdc-consent__empty { margin: .5rem 0 0; font-size: var(--hdc-fs-xs); color: var(--hdc-text-3); }
.hdc-consent__id { margin: 1rem 0 0; font-size: var(--hdc-fs-xs); color: var(--hdc-text-3); }
.hdc-consent__id code { font-family: var(--hdc-font-mono); }
.hdc-consent-dialog__footer { flex-wrap: wrap; }
@media (max-width: 560px) {
  .hdc-consent-dialog__footer .hdc-btn { flex: 1 1 100%; }
}

/* "Cookie settings" in footers: a button that looks like the links next to it */
.hdc-consent-link {
  display: inline;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-decoration: inherit;
  cursor: pointer;
}
.hdc-consent-link:hover { text-decoration: underline; }
.hdc-consent-link:focus-visible { outline: none; box-shadow: var(--hdc-focus-ring); border-radius: var(--hdc-r-xs); }
.hdc-footer__legal .hdc-consent-link { color: var(--hdc-text-3); }
.hdc-footer__legal .hdc-consent-link:hover { color: var(--hdc-heading); text-decoration: none; }
.hdc-app__footer .hdc-consent-link, .hdc-auth__foot .hdc-consent-link { color: var(--hdc-text-2); }

@media (prefers-reduced-motion: no-preference) {
  .hdc-consent__banner:not([hidden]) .hdc-consent__inner { animation: hdc-consent-in var(--hdc-dur-3) var(--hdc-ease); }
}
@keyframes hdc-consent-in { from { transform: translateY(12px); opacity: 0; } to { transform: none; opacity: 1; } }

@media print { .hdc-consent, .hdc-consent__banner, .hdc-consent-dialog, .hdc-consent-link { display: none !important; } }

/* block: cookie-table */
.hdc-b-cookie-table .hdc-cookie-table__group { margin-block-start: 1.75rem; }
.hdc-b-cookie-table .hdc-cookie-table__group h3 { margin: 0 0 .35rem; font-size: var(--hdc-fs-lg); }
.hdc-b-cookie-table .hdc-cookie-table__group > p { margin: 0 0 .75rem; color: var(--hdc-text-2); }
.hdc-b-cookie-table td:first-child code { white-space: nowrap; }
.hdc-b-cookie-table .hdc-cookie-table__note { margin-block-start: 1.25rem; font-size: var(--hdc-fs-sm); color: var(--hdc-text-2); }
.hdc-b-cookie-table .hdc-cookie-table__updated { margin-block-start: .5rem; font-size: var(--hdc-fs-xs); color: var(--hdc-text-3); }


/* ===== part: d2-sections.css ===== */
/* ==========================================================================
   DX1 — Design 2.0 section layer (docs/DESIGN-2.md). Everything here is opt-in: it styles the classes that the new
   block settings print (style/layout values, _bg backdrops, visuals). Blocks left on their defaults keep their look.
   Tokens and logical properties only; light, dark (data-theme), night and brand scopes; reduced motion respected.
   ========================================================================== */

/* ---- 1. Tones, gradient icon tiles, tags ---- */
.d2-tone--primary { --d2-tone: #0071bc; --d2-tone-2: #22c3ee; --d2-tone-text: #005c9a; }
.d2-tone--accent  { --d2-tone: #0891b2; --d2-tone-2: #2dd4bf; --d2-tone-text: #0e7490; }
.d2-tone--ai      { --d2-tone: #6941f0; --d2-tone-2: #a48bff; --d2-tone-text: #5b34d6; }
.d2-tone--success { --d2-tone: #079455; --d2-tone-2: #32d583; --d2-tone-text: #067647; }
.d2-tone--warning { --d2-tone: #dc6803; --d2-tone-2: #fdb022; --d2-tone-text: #b54708; }
.d2-tone--ink     { --d2-tone: #1d2533; --d2-tone-2: #4b5a6e; --d2-tone-text: #344255; }
:root[data-theme="dark"] .d2-tone--primary, .hdc-night .d2-tone--primary { --d2-tone: #1b77b9; --d2-tone-2: #4fd1f7; --d2-tone-text: #7cc2f3; }
:root[data-theme="dark"] .d2-tone--accent, .hdc-night .d2-tone--accent { --d2-tone: #0e7490; --d2-tone-2: #5eead4; --d2-tone-text: #67e8f9; }
:root[data-theme="dark"] .d2-tone--ai, .hdc-night .d2-tone--ai { --d2-tone: #6941f0; --d2-tone-2: #b9a6ff; --d2-tone-text: #c4b5fd; }
:root[data-theme="dark"] .d2-tone--success, .hdc-night .d2-tone--success { --d2-tone: #067647; --d2-tone-2: #4ade80; --d2-tone-text: #6ce9a6; }
:root[data-theme="dark"] .d2-tone--warning, .hdc-night .d2-tone--warning { --d2-tone: #b54708; --d2-tone-2: #fdb022; --d2-tone-text: #fec84b; }
:root[data-theme="dark"] .d2-tone--ink, .hdc-night .d2-tone--ink { --d2-tone: #344255; --d2-tone-2: #66768b; --d2-tone-text: #c3cedb; }

/* Icon slot: the bare icon in its tone colour (owner rule 1.5.2: no tile, gradient, ring or fill behind icons). The
   slot keeps its size so layouts stay aligned. */
.d2-icon {
  --d2-size: 48px;
  position: relative;
  display: inline-grid;
  place-items: center;
  flex: none;
  width: var(--d2-size);
  height: var(--d2-size);
  background: none;
  color: var(--d2-tone-text, var(--hdc-primary-text));
  box-shadow: none;
}
.d2-icon .hdc-i { --hdc-i: calc(var(--d2-size) * .66); stroke-width: 1.9; }
.d2-icon--sm { --d2-size: 38px; }
.d2-icon--xl { --d2-size: 64px; }
.hdc-brand .d2-icon { color: var(--hdc-heading); }
/* always-dark surfaces (night sections and cards, the stats band): the light companion tone keeps the bare icon legible
   even when the tone class sits on the dark element itself */
.hdc-night .d2-icon, .d2-stats--band .d2-icon { color: color-mix(in srgb, var(--d2-tone-2, #22c3ee) 80%, #fff); }
.d2-feature__tag {
  position: absolute;
  top: 1rem;
  inset-inline-end: 1rem;
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 .55rem;
  border-radius: var(--hdc-r-pill);
  background: color-mix(in srgb, var(--d2-tone, var(--hdc-primary)) 12%, transparent);
  color: var(--d2-tone-text, var(--hdc-primary-text));
  font: 600 var(--hdc-fs-2xs)/1 var(--hdc-font-mono);
  letter-spacing: .04em;
  text-transform: uppercase;
}

/* ---- 2. Section backdrops (common setting _bg → .hdc-bg--*) ---- */
.hdc-bg {
  --d2-glow-1: rgba(0, 113, 188, .14);
  --d2-glow-2: rgba(34, 195, 238, .13);
  --d2-glow-3: rgba(124, 92, 255, .11);
  --d2-pattern: rgba(0, 113, 188, .16);
  isolation: isolate;
}
:root[data-theme="dark"] .hdc-bg, .hdc-bg.hdc-night, .hdc-night .hdc-bg {
  --d2-glow-1: rgba(43, 149, 224, .22);
  --d2-glow-2: rgba(34, 195, 238, .15);
  --d2-glow-3: rgba(124, 92, 255, .18);
  --d2-pattern: rgba(120, 170, 230, .2);
}
.hdc-bg.hdc-brand { --d2-glow-1: rgba(255, 255, 255, .14); --d2-glow-2: rgba(34, 195, 238, .3); --d2-glow-3: rgba(124, 92, 255, .32); --d2-pattern: rgba(255, 255, 255, .18); }
.hdc-bg::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.hdc-bg > .hdc-container { position: relative; }
.hdc-bg--aurora::before {
  background:
    radial-gradient(42% 60% at 6% 0%, var(--d2-glow-1), transparent 72%),
    radial-gradient(36% 52% at 94% 4%, var(--d2-glow-2), transparent 72%),
    radial-gradient(48% 46% at 62% 104%, var(--d2-glow-3), transparent 74%);
}
.hdc-bg--mesh::before {
  background:
    radial-gradient(at 6% 10%, var(--d2-glow-1) 0, transparent 46%),
    radial-gradient(at 94% 6%, var(--d2-glow-3) 0, transparent 42%),
    radial-gradient(at 78% 92%, var(--d2-glow-2) 0, transparent 46%),
    radial-gradient(at 18% 88%, var(--d2-glow-3) 0, transparent 40%),
    radial-gradient(at 50% 50%, color-mix(in srgb, var(--d2-glow-2) 50%, transparent) 0, transparent 60%);
}
.hdc-bg--grid::before {
  background-image: linear-gradient(var(--hdc-grid-line) 1px, transparent 1px), linear-gradient(90deg, var(--hdc-grid-line) 1px, transparent 1px);
  background-size: 48px 48px;
  background-position: center top;
  -webkit-mask-image: radial-gradient(85% 75% at 50% 0%, #000 0%, transparent 78%);
  mask-image: radial-gradient(85% 75% at 50% 0%, #000 0%, transparent 78%);
}
.hdc-bg--dots::before {
  background-image: radial-gradient(var(--d2-pattern) 1.1px, transparent 1.5px);
  background-size: 22px 22px;
  -webkit-mask-image: radial-gradient(75% 70% at 50% 40%, #000 10%, transparent 80%);
  mask-image: radial-gradient(75% 70% at 50% 40%, #000 10%, transparent 80%);
}
.hdc-bg--glow::before {
  background: radial-gradient(48% 62% at 50% -6%, var(--d2-glow-1), transparent 72%), radial-gradient(30% 40% at 50% 0%, var(--d2-glow-2), transparent 70%);
}
.hdc-bg--circuit::before {
  background: var(--d2-pattern);
  opacity: .55;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240' fill='none' stroke='%23000' stroke-width='1.2'%3E%3Cpath d='M0 40h60l20 20h60l20-20h80M0 120h30l20-20h50l20 20h120M40 240v-60l20-20v-40M140 0v50l20 20v60l-20 20v90M200 240v-50l-20-20h-40'/%3E%3Ccircle cx='80' cy='60' r='3' fill='%23000'/%3E%3Ccircle cx='160' cy='40' r='3' fill='%23000'/%3E%3Ccircle cx='50' cy='100' r='3' fill='%23000'/%3E%3Ccircle cx='60' cy='160' r='3' fill='%23000'/%3E%3Ccircle cx='160' cy='70' r='3' fill='%23000'/%3E%3Ccircle cx='140' cy='170' r='3' fill='%23000'/%3E%3C/svg%3E"), radial-gradient(80% 80% at 50% 40%, #000 10%, transparent 80%);
  -webkit-mask-composite: source-in;
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240' fill='none' stroke='%23000' stroke-width='1.2'%3E%3Cpath d='M0 40h60l20 20h60l20-20h80M0 120h30l20-20h50l20 20h120M40 240v-60l20-20v-40M140 0v50l20 20v60l-20 20v90M200 240v-50l-20-20h-40'/%3E%3Ccircle cx='80' cy='60' r='3' fill='%23000'/%3E%3Ccircle cx='160' cy='40' r='3' fill='%23000'/%3E%3Ccircle cx='50' cy='100' r='3' fill='%23000'/%3E%3Ccircle cx='60' cy='160' r='3' fill='%23000'/%3E%3Ccircle cx='160' cy='70' r='3' fill='%23000'/%3E%3Ccircle cx='140' cy='170' r='3' fill='%23000'/%3E%3C/svg%3E"), radial-gradient(80% 80% at 50% 40%, #000 10%, transparent 80%);
  mask-composite: intersect;
  -webkit-mask-size: 240px 240px, 100% 100%;
  mask-size: 240px 240px, 100% 100%;
}
.hdc-bg--beams::before {
  background:
    linear-gradient(115deg, transparent 0 38%, color-mix(in srgb, var(--d2-glow-2) 90%, transparent) 46%, transparent 54%),
    linear-gradient(115deg, transparent 0 58%, color-mix(in srgb, var(--d2-glow-3) 80%, transparent) 64%, transparent 70%),
    radial-gradient(40% 60% at 90% 0%, var(--d2-glow-1), transparent 72%);
}
@media (forced-colors: active) { .hdc-bg::before { display: none; } }

/* ---- 3. Features: elevated / glass / minimal / numbered / checks ---- */
.d2-features { counter-reset: d2f; }
.d2-features .d2-feature { position: relative; counter-increment: d2f; }
.d2-features--elevated .d2-feature,
.d2-features--glass .d2-feature {
  gap: .9rem;
  padding: clamp(1.4rem, 1.1rem + .9vw, 1.9rem);
  border: 1px solid var(--hdc-border);
  border-radius: var(--hdc-r-xl);
  background:
    radial-gradient(120% 70% at 0% 0%, color-mix(in srgb, var(--d2-tone) 7%, transparent), transparent 60%),
    var(--hdc-surface);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .6) inset, 0 1px 2px rgba(16, 24, 40, .04), 0 14px 34px -18px rgba(15, 33, 58, .2);
  transition: transform var(--hdc-dur-3) var(--hdc-ease), box-shadow var(--hdc-dur-3) var(--hdc-ease), border-color var(--hdc-dur-2);
}
.d2-features--elevated .d2-feature::before,
.d2-features--glass .d2-feature::before {
  content: "";
  position: absolute;
  inset: -1px;
  padding: 1px;
  border-radius: inherit;
  background: linear-gradient(140deg, var(--d2-tone), transparent 38%, transparent 62%, var(--d2-tone-2));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  transition: opacity var(--hdc-dur-3);
  pointer-events: none;
}
.d2-features--elevated .d2-feature:hover,
.d2-features--glass .d2-feature:hover { transform: translateY(-4px); border-color: transparent; box-shadow: 0 1px 0 rgba(255, 255, 255, .6) inset, 0 24px 48px -20px color-mix(in srgb, var(--d2-tone) 45%, rgba(15, 33, 58, .4)); }
.d2-features--elevated .d2-feature:hover::before,
.d2-features--glass .d2-feature:hover::before { opacity: 1; }
:root[data-theme="dark"] .d2-features--elevated .d2-feature { box-shadow: 0 1px 0 rgba(255, 255, 255, .04) inset, 0 18px 40px -20px rgba(0, 0, 0, .7); }
.d2-features--elevated .d2-feature h3, .d2-features--glass .d2-feature h3 { margin-top: .35rem; font-size: var(--hdc-fs-lg); }
.d2-features--elevated .hdc-feature__link, .d2-features--glass .hdc-feature__link { color: var(--d2-tone-text); }
.d2-features--glass .d2-feature {
  border-color: color-mix(in srgb, var(--hdc-border) 80%, transparent);
  background: color-mix(in srgb, var(--hdc-surface) 72%, transparent);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.hdc-night .d2-features--glass .d2-feature, .hdc-brand .d2-features--glass .d2-feature { background: rgba(255, 255, 255, .045); border-color: rgba(148, 170, 200, .16); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06); }
.d2-features--minimal .d2-feature { gap: 1rem; }
.d2-features--minimal .d2-icon { --d2-size: 56px; }
.d2-features--minimal .d2-feature h3 { font-size: var(--hdc-fs-xl); }
.d2-features--numbered .d2-feature::after {
  content: counter(d2f, decimal-leading-zero);
  position: absolute;
  top: clamp(1.4rem, 1.1rem + .9vw, 1.9rem);
  inset-inline-end: clamp(1.4rem, 1.1rem + .9vw, 1.9rem);
  color: color-mix(in srgb, var(--d2-tone) 55%, var(--hdc-text-3));
  font: 700 var(--hdc-fs-sm)/1 var(--hdc-font-mono);
  letter-spacing: .04em;
}
.d2-features--numbered .d2-feature:has(.d2-feature__tag)::after { display: none; }
.d2-features--minimal.d2-features--numbered .d2-feature::after { top: .2rem; inset-inline-end: 0; }
/* inline layout with the d2 tiles */
.d2-features.hdc-features--inline .d2-icon { --d2-size: 42px; }
/* checks: one soft panel of check pills */
.hdc-features--checks {
  display: grid;
  gap: .65rem 1rem;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr));
  padding: clamp(1.1rem, .8rem + 1vw, 1.75rem);
  border: 1px solid var(--hdc-border);
  border-radius: var(--hdc-r-2xl);
  background:
    radial-gradient(60% 120% at 100% 0%, color-mix(in srgb, var(--hdc-primary) 7%, transparent), transparent 60%),
    var(--hdc-surface);
  box-shadow: var(--hdc-shadow-sm);
}
.hdc-features--checks .hdc-feature { flex-direction: row; align-items: center; gap: .75rem; padding: .7rem .85rem; border-radius: var(--hdc-r-md); background: var(--hdc-bg-soft); }
.hdc-features--checks .hdc-feature h3 { margin: 0; font-size: var(--hdc-fs-sm); font-weight: 650; letter-spacing: 0; }
.hdc-features--checks .hdc-feature p { font-size: var(--hdc-fs-xs); }
.d2-check__icon { display: inline-grid; place-items: center; flex: none; width: 30px; height: 30px; color: var(--d2-tone-text); } /* bare (owner rule 1.5.2) */
.d2-check__icon .hdc-i { --hdc-i: 22px; stroke-width: 2.2; }
.hdc-night .hdc-features--checks { background: rgba(255, 255, 255, .03); }
.hdc-night .hdc-features--checks .hdc-feature { background: rgba(255, 255, 255, .04); }

/* ---- 4. Bento: elevated cards, accents, aurora/mesh cards, visuals ---- */
.d2-bento--elevated .hdc-bento__card,
.hdc-bento .d2-bento__card {
  display: flex;
  flex-direction: column;
  gap: .65rem;
  box-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 16px 40px -22px rgba(15, 33, 58, .25);
  transition: transform var(--hdc-dur-3) var(--hdc-ease), box-shadow var(--hdc-dur-3) var(--hdc-ease);
}
.d2-bento--elevated .hdc-bento__card:hover { transform: translateY(-3px); box-shadow: 0 26px 52px -24px color-mix(in srgb, var(--d2-tone, var(--hdc-primary)) 45%, rgba(15, 33, 58, .45)); }
.hdc-bento .d2-bento__card > .d2-icon { margin-bottom: .35rem; }
.hdc-bento .d2-bento__card h3 { margin: 0; }
.hdc-bento .d2-bento__card p { margin: 0; }
.hdc-bento .d2-bento__card .hdc-b-bento__link { margin-top: .25rem; }
.hdc-bento .d2-bento__card--aurora {
  border-color: rgba(148, 170, 200, .16);
  background:
    radial-gradient(70% 60% at 100% 0%, rgba(43, 149, 224, .32), transparent 65%),
    radial-gradient(60% 60% at 0% 100%, rgba(124, 92, 255, .22), transparent 65%),
    linear-gradient(160deg, var(--hdc-night-800), var(--hdc-night-900));
}
.hdc-bento .d2-bento__card--mesh {
  background:
    radial-gradient(at 0% 0%, color-mix(in srgb, var(--hdc-primary) 14%, transparent) 0, transparent 55%),
    radial-gradient(at 100% 100%, color-mix(in srgb, var(--hdc-violet-500) 12%, transparent) 0, transparent 50%),
    var(--hdc-surface);
}
.hdc-bento .d2-bento__card.has-visual { padding-bottom: 0; overflow: hidden; }
@media (min-width: 900px) {
  /* wide and full cards: copy on the start side, the visual beside it */
  .hdc-bento > .d2-bento__card.has-visual.hdc-bento--4,
  .hdc-bento > .d2-bento__card.has-visual.hdc-b-bento__card--full {
    display: grid;
    grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
    grid-auto-rows: min-content;
    column-gap: 1.75rem;
    align-content: start;
  }
  .hdc-bento > .d2-bento__card.has-visual.hdc-bento--4 > :not(.d2-bento__visual),
  .hdc-bento > .d2-bento__card.has-visual.hdc-b-bento__card--full > :not(.d2-bento__visual) { grid-column: 1; }
  .hdc-bento > .d2-bento__card.has-visual.hdc-bento--4 > .d2-icon,
  .hdc-bento > .d2-bento__card.has-visual.hdc-b-bento__card--full > .d2-icon { justify-self: start; }
  .hdc-bento > .d2-bento__card.has-visual.hdc-bento--4 > .d2-bento__visual,
  .hdc-bento > .d2-bento__card.has-visual.hdc-b-bento__card--full > .d2-bento__visual { grid-column: 2; grid-row: 1 / span 8; align-self: end; margin-top: 0; }
}
.d2-bento__visual { position: relative; margin-top: auto; padding-top: 1.25rem; margin-inline: -.25rem; }
.d2-bento__visual .d2-vis { max-width: 100%; }
.d2-bento__visual .d2-win, .d2-bento__visual .d2-mig, .d2-bento__visual .d2-sec, .d2-bento__visual .d2-lic { border-end-start-radius: 0; border-end-end-radius: 0; border-bottom: 0; }
.d2-bento__visual .d2-vis--rack, .d2-bento__visual .d2-vis--network { padding-bottom: 1rem; }
.d2-bento__visual .d2-vis { font-size: 12px; }
@media (min-width: 900px) { .hdc-bento > .d2-bento__card.has-visual.hdc-bento--2 .d2-vis { font-size: 11px; } }

/* ---- 5. Feature split with a visual ---- */
.d2-split { align-items: center; }
.d2-split .hdc-split-feature__media.d2-stage { padding-block: 1.5rem; }
.d2-stage--framed { padding: clamp(1.5rem, 1rem + 2vw, 2.5rem) !important; border: 1px solid var(--hdc-border); border-radius: var(--hdc-r-2xl); background: radial-gradient(80% 80% at 100% 0%, var(--hdc-primary-soft) 0%, transparent 70%), var(--hdc-bg-soft); }
.d2-stage--framed::before { display: none; }
.d2-media--glow { position: relative; }
.d2-media--glow::before { content: ""; position: absolute; inset: 8% 6%; z-index: -1; border-radius: 40%; background: radial-gradient(closest-side, color-mix(in srgb, var(--hdc-primary) 24%, transparent), transparent); filter: blur(24px); }
.d2-split .hdc-checklist { margin: 1.25rem 0 1.75rem; }

/* ---- 6. Feature tabs: cards style ---- */
.d2-tabs { display: grid; gap: 1.5rem; grid-template-columns: minmax(0, 1fr); }
.d2-tabs > * { min-width: 0; }
.hdc-b-feature-tabs .d2-tabs__nav { min-width: 0; max-width: 100%; }
@media (min-width: 960px) {
  .d2-tabs { grid-template-columns: minmax(250px, .36fr) minmax(0, 1fr); align-items: start; gap: 2rem; }
  .d2-tabs__nav { position: sticky; top: calc(var(--hdc-header-h) + 1.5rem); }
}
.hdc-b-feature-tabs .d2-tabs__nav { justify-content: stretch; margin: 0; }
.d2-tabs__list { display: flex; flex-direction: column; gap: .6rem; width: 100%; }
.d2-tabs__tab {
  position: relative;
  display: flex;
  align-items: center;
  gap: .85rem;
  width: 100%;
  padding: .9rem 1rem;
  border: 1px solid var(--hdc-border);
  border-radius: var(--hdc-r-lg);
  background: var(--hdc-surface);
  color: var(--hdc-text);
  font: inherit;
  text-align: start;
  cursor: pointer;
  transition: border-color var(--hdc-dur-2), box-shadow var(--hdc-dur-2), background-color var(--hdc-dur-2);
}
.d2-tabs__tab:hover { border-color: var(--hdc-border-strong); }
.d2-tabs__tab:focus-visible { outline: none; box-shadow: var(--hdc-focus-ring); }
.d2-tabs__tab[aria-selected="true"] {
  border-color: color-mix(in srgb, var(--d2-tone) 55%, transparent);
  background: radial-gradient(120% 120% at 0% 0%, color-mix(in srgb, var(--d2-tone) 10%, transparent), transparent 70%), var(--hdc-surface);
  box-shadow: 0 16px 36px -22px color-mix(in srgb, var(--d2-tone) 60%, transparent);
}
.d2-tabs__tab[aria-selected="true"]::before { content: ""; position: absolute; inset-block: 14px; inset-inline-start: -1px; width: 3px; border-radius: 3px; background: linear-gradient(var(--d2-tone), var(--d2-tone-2)); }
.d2-tabs__tab:not([aria-selected="true"]) .d2-icon { color: var(--hdc-text-3); }
.d2-tabs__text { display: grid; gap: .1rem; min-width: 0; }
.d2-tabs__label { color: var(--hdc-heading); font-weight: 650; }
.d2-tabs__sum { color: var(--hdc-text-3); font-size: var(--hdc-fs-sm); line-height: 1.45; }
.hdc-b-feature-tabs .d2-tabs__panels .hdc-feature-tabs__panel { margin: 0; }
.hdc-b-feature-tabs .d2-tabs__panel { overflow: hidden; }
@media (min-width: 960px) { .hdc-b-feature-tabs .d2-tabs__panel { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); } }
.d2-tabs__visual .d2-vis { max-width: 520px; }
@media (max-width: 959.98px) {
  .d2-tabs__list { flex-direction: row; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: .25rem; scrollbar-width: thin; }
  .d2-tabs__tab { flex: 0 0 min(78%, 280px); scroll-snap-align: start; }
}
/* panels with a visual inside the classic pills/underline styles */
.hdc-b-feature-tabs .d2-tabs__panel .d2-vis { max-width: 520px; }

/* ---- 7. Steps: timeline and large numbers ---- */
.d2-step { position: relative; }
.d2-step__icon { position: absolute; top: 1.5rem; inset-inline-end: 1.5rem; }
.d2-steps--timeline { --d2-node: 46px; gap: 1.25rem; }
.d2-steps--timeline .hdc-step { padding: 0; border: 0; background: none; }
.d2-steps--timeline .hdc-step::before {
  position: relative;
  z-index: 1;
  width: var(--d2-node);
  height: var(--d2-node);
  margin-bottom: 1.1rem;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--d2-tone, var(--hdc-primary)), var(--d2-tone-2, var(--hdc-accent)));
  color: #fff;
  box-shadow: 0 0 0 6px var(--hdc-bg), 0 12px 26px -12px var(--d2-tone, var(--hdc-primary));
}
.hdc-section--soft .d2-steps--timeline .hdc-step::before { box-shadow: 0 0 0 6px var(--hdc-bg-soft), 0 12px 26px -12px var(--d2-tone, var(--hdc-primary)); }
.hdc-night .d2-steps--timeline .hdc-step::before { box-shadow: 0 0 0 6px var(--hdc-bg), 0 12px 26px -12px var(--d2-tone, var(--hdc-primary)); }
.d2-steps--timeline .d2-step__icon { position: static; display: none; }
.d2-steps--timeline .hdc-step h3 { margin-bottom: .4rem; }
.d2-steps--timeline .hdc-step::after {
  content: "";
  position: absolute;
  top: calc(var(--d2-node) / 2 - 1px);
  inset-inline-start: calc(var(--d2-node) + 10px);
  inset-inline-end: -10px;
  height: 2px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--d2-tone, var(--hdc-primary)) 55%, transparent), var(--hdc-border));
}
[dir="rtl"] .d2-steps--timeline .hdc-step::after { background: linear-gradient(-90deg, color-mix(in srgb, var(--d2-tone, var(--hdc-primary)) 55%, transparent), var(--hdc-border)); }
.d2-steps--timeline .hdc-step:last-child::after { display: none; }
@media (min-width: 900px) {
  .d2-steps--timeline[data-count] { grid-template-columns: repeat(var(--d2-cols, 4), minmax(0, 1fr)); }
  .d2-steps--timeline[data-count="2"] { --d2-cols: 2; }
  .d2-steps--timeline[data-count="3"] { --d2-cols: 3; }
  .d2-steps--timeline[data-count="4"] { --d2-cols: 4; }
  .d2-steps--timeline[data-count="5"] { --d2-cols: 5; }
  .d2-steps--timeline[data-count="6"] { --d2-cols: 3; }
  .d2-steps--timeline[data-count="7"], .d2-steps--timeline[data-count="8"] { --d2-cols: 4; }
  .d2-steps--timeline[data-count="6"] .hdc-step:nth-child(3n)::after,
  .d2-steps--timeline[data-count="7"] .hdc-step:nth-child(4n)::after,
  .d2-steps--timeline[data-count="8"] .hdc-step:nth-child(4n)::after { display: none; }
}
@media (max-width: 899.98px) {
  .d2-steps--timeline { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .d2-steps--timeline .hdc-step { display: grid; grid-template-columns: var(--d2-node) minmax(0, 1fr); column-gap: 1rem; padding-bottom: 1.5rem; }
  .d2-steps--timeline .hdc-step::before { grid-row: 1 / span 3; margin: 0; }
  .d2-steps--timeline .hdc-step::after { top: var(--d2-node); bottom: 0; inset-inline-start: calc(var(--d2-node) / 2 - 1px); inset-inline-end: auto; width: 2px; height: auto; background: linear-gradient(color-mix(in srgb, var(--d2-tone, var(--hdc-primary)) 55%, transparent), var(--hdc-border)); }
  .d2-steps--timeline .hdc-step h3 { margin-top: .6rem; }
}
.d2-steps--numbered { gap: 1.5rem 2rem; }
.d2-steps--numbered .hdc-step { padding: 0 0 0; border: 0; background: none; }
.d2-steps--numbered .hdc-step::before {
  display: block;
  width: auto;
  height: auto;
  margin-bottom: .75rem;
  border-radius: 0;
  background: linear-gradient(135deg, var(--d2-tone, var(--hdc-primary)), var(--d2-tone-2, var(--hdc-accent)));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font: 800 clamp(2.75rem, 2rem + 2vw, 3.75rem)/1 var(--hdc-font-sans);
  letter-spacing: -.04em;
}
.d2-steps--numbered .d2-step__icon { top: .4rem; inset-inline-end: 0; }

/* ---- 8. Stats: band and tiles ---- */
.d2-stats--band {
  position: relative;
  overflow: hidden;
  gap: 0;
  padding: clamp(1.5rem, 1rem + 2vw, 2.75rem);
  border-radius: var(--hdc-r-2xl);
  background:
    radial-gradient(60% 90% at 0% 0%, rgba(43, 149, 224, .32), transparent 60%),
    radial-gradient(50% 80% at 100% 100%, rgba(124, 92, 255, .24), transparent 60%),
    linear-gradient(160deg, var(--hdc-night-800), var(--hdc-night-950));
  box-shadow: 0 30px 70px -36px rgba(6, 37, 65, .7);
  --hdc-heading: #f4f7fb;
  --hdc-text-2: #a5b3c6;
  --hdc-text-3: #8597ae;
  --hdc-border: rgba(148, 170, 200, .16);
  --hdc-primary-text: #7cc2f3;
}
.d2-stats--band .hdc-stat { position: relative; display: grid; justify-items: start; gap: .2rem; padding: .75rem clamp(1rem, .6rem + 1vw, 1.75rem); }
.hdc-b-stats__grid--center.d2-stats--band .hdc-stat { justify-items: center; }
.d2-stats--band .hdc-stat__value {
  background: linear-gradient(120deg, #ffffff 30%, #9fd7fb 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.d2-stats--band .d2-stat__icon { margin-bottom: .6rem; }
.d2-stats--tiles { gap: 1rem; }
.d2-stats--tiles .hdc-stat {
  display: grid;
  justify-items: start;
  gap: .25rem;
  padding: 1.5rem;
  border: 1px solid var(--hdc-border);
  border-inline-start-width: 1px;
  border-radius: var(--hdc-r-xl);
  background: radial-gradient(120% 80% at 0% 0%, color-mix(in srgb, var(--d2-tone, var(--hdc-primary)) 8%, transparent), transparent 60%), var(--hdc-surface);
  box-shadow: var(--hdc-shadow-sm);
}
.d2-stats--tiles .hdc-stat:first-child { border-inline-start: 1px solid var(--hdc-border); }
.d2-stats--tiles .d2-stat__icon { margin-bottom: .6rem; }
@media (max-width: 640px) { .d2-stats--tiles .hdc-stat { border-top: 1px solid var(--hdc-border); } }

/* ---- 9. FAQ cards and help card ---- */
.d2-faq .d2-faq__list { gap: .65rem; }
.d2-faq .d2-faq__list details {
  border-radius: var(--hdc-r-lg);
  background: var(--hdc-surface);
  box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
  transition: box-shadow var(--hdc-dur-2), border-color var(--hdc-dur-2);
}
.d2-faq .d2-faq__list details:hover { border-color: var(--hdc-border-strong); }
.d2-faq .d2-faq__list details[open] {
  border-color: color-mix(in srgb, var(--hdc-primary) 40%, var(--hdc-border));
  background: radial-gradient(120% 100% at 0% 0%, color-mix(in srgb, var(--hdc-primary) 5%, transparent), transparent 60%), var(--hdc-surface);
  box-shadow: 0 18px 40px -26px rgba(0, 113, 188, .45);
}
.d2-faq .d2-faq__list summary { padding-block: 1.05rem; font-weight: 650; }
.d2-help {
  position: relative;
  overflow: hidden;
  border: 0 !important;
  background:
    radial-gradient(80% 90% at 100% 0%, rgba(34, 195, 238, .28), transparent 60%),
    linear-gradient(150deg, #0a5d9e, #0b3f70) !important;
  color: rgba(255, 255, 255, .88);
  box-shadow: 0 24px 50px -28px rgba(0, 113, 188, .8);
  --hdc-heading: #ffffff;
  --hdc-text-3: rgba(255, 255, 255, .75);
  --hdc-primary-text: #ffffff;
}
.d2-help .d2-icon { color: #fff; }
.d2-help__actions { position: relative; z-index: 1; padding: 0 1.25rem 1.25rem; }
.hdc-b-faq__help .d2-help__actions { padding-top: 0; }
.d2-help .hdc-btn { --hdc-on-primary: #0a3b62; background: #fff; color: #0a3b62; border-color: transparent; }
.d2-help .hdc-btn--secondary, .d2-help .hdc-btn--ghost { background: rgba(255, 255, 255, .12); color: #fff; border-color: rgba(255, 255, 255, .3); }

/* ---- 10. CTA: aurora, mesh, visual, points ---- */
.d2-cta--aurora {
  background:
    radial-gradient(50% 80% at 0% 0%, rgba(43, 149, 224, .38), transparent 62%),
    radial-gradient(45% 70% at 100% 100%, rgba(124, 92, 255, .32), transparent 62%),
    radial-gradient(30% 40% at 80% 0%, rgba(34, 195, 238, .25), transparent 70%),
    linear-gradient(160deg, var(--hdc-night-800), var(--hdc-night-950)) !important;
  box-shadow: 0 40px 80px -40px rgba(6, 37, 65, .75);
}
.d2-cta--mesh {
  background:
    radial-gradient(at 0% 0%, rgba(255, 255, 255, .16) 0, transparent 46%),
    radial-gradient(at 100% 10%, rgba(124, 92, 255, .45) 0, transparent 50%),
    radial-gradient(at 80% 100%, rgba(34, 195, 238, .45) 0, transparent 50%),
    var(--hdc-brand-gradient) !important;
  box-shadow: 0 40px 80px -40px rgba(0, 113, 188, .65);
}
.d2-cta--visual .d2-cta__grid { grid-template-columns: minmax(0, 1fr); gap: 2rem; }
@media (min-width: 960px) { .d2-cta--visual .d2-cta__grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); } }
.hdc-b-cta .hdc-cta.d2-cta--visual .d2-cta__actions { justify-items: start; margin-top: 1.75rem; }
.d2-cta__points { margin: 1.25rem 0 0; }
.d2-cta__visual { position: relative; }
.d2-cta__visual .d2-vis { max-width: 500px; }
@media (max-width: 959.98px) { .d2-cta__visual { margin-bottom: -1rem; } }

/* ---- 11. Page header: large + visual + points ---- */
.d2-ph--large { padding-block: clamp(3rem, 2rem + 4vw, 6rem) clamp(2.5rem, 1.75rem + 3vw, 4.5rem); }
.d2-ph--large h1 { font-size: var(--hdc-fs-display); font-weight: 780; line-height: 1.05; letter-spacing: var(--hdc-tracking-display); }
.d2-ph--large .hdc-lead { font-size: clamp(1.0625rem, 1rem + .45vw, 1.25rem); }
.d2-ph__points { margin-top: 1.5rem; }
.d2-ph--visual .hdc-b-page-header__grid.has-media { gap: clamp(2rem, 1.5rem + 3vw, 4rem); }
@media (min-width: 960px) { .hdc-b-page-header .d2-ph--visual .hdc-b-page-header__grid.has-media { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); } }
.d2-ph__visual { position: relative; }
.d2-ph__visual::before { content: ""; position: absolute; inset: 4% 2%; z-index: 0; border-radius: 40%; background: radial-gradient(closest-side, color-mix(in srgb, var(--hdc-primary) 20%, transparent), transparent); filter: blur(20px); pointer-events: none; }
.d2-ph__visual .d2-vis { z-index: 1; }
.hdc-b-page-header.hdc-bg .hdc-page-header { border-bottom-color: transparent; }

/* ---- 12. Claims: elevated cards and night band ---- */
.d2-claims--elevated .hdc-b-claims__item {
  border-radius: var(--hdc-r-xl);
  background: radial-gradient(120% 90% at 0% 0%, color-mix(in srgb, var(--d2-tone) 8%, transparent), transparent 60%), var(--hdc-surface);
  box-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 14px 32px -20px rgba(15, 33, 58, .22);
}
.d2-claims .hdc-b-claims__icon.d2-icon { background: none; box-shadow: none; color: var(--d2-tone-text, var(--hdc-primary-text)); }
.hdc-brand .d2-claims .hdc-b-claims__icon.d2-icon { color: var(--hdc-heading); }
.hdc-b-claims .d2-claims--elevated.hdc-b-claims__list--strip { gap: .75rem; }
.hdc-b-claims .d2-claims--elevated.hdc-b-claims__list--strip .hdc-b-claims__item {
  padding-block: .4rem;
  padding-inline: .6rem 1.1rem;
  background: var(--hdc-surface);
  box-shadow: 0 1px 2px rgba(16, 24, 40, .05), 0 10px 26px -16px rgba(15, 33, 58, .3);
}
.hdc-b-claims .d2-claims--elevated.hdc-b-claims__list--strip .hdc-b-claims__icon.d2-icon { --d2-size: 30px; }
.hdc-b-claims .d2-claims--elevated.hdc-b-claims__list--strip .hdc-b-claims__icon .hdc-i { --hdc-i: 22px; }
.hdc-b-claims .d2-claims--elevated.hdc-b-claims__list--grid .hdc-b-claims__icon.d2-icon { --d2-size: 42px; width: var(--d2-size); height: var(--d2-size); }
.hdc-b-claims .d2-claims--band .hdc-b-claims__icon.d2-icon { --d2-size: 34px; color: var(--hdc-led); }
.hdc-b-claims .d2-claims--band.hdc-b-claims__list--strip { justify-content: center; }
.d2-claims--band {
  gap: .25rem !important;
  padding: .6rem;
  border-radius: var(--hdc-r-2xl);
  background:
    radial-gradient(50% 120% at 0% 0%, rgba(43, 149, 224, .3), transparent 60%),
    linear-gradient(160deg, var(--hdc-night-800), var(--hdc-night-950));
  box-shadow: 0 26px 60px -34px rgba(6, 37, 65, .75);
}
.d2-claims--band .hdc-b-claims__item { border-color: transparent; background: transparent; box-shadow: none; }

/* ---- 13. Hero with a visual ---- */
.d2-hero__visual { padding-block: 1rem; }
.d2-hero__visual .d2-vis { max-width: 560px; }
.hdc-hero--center .d2-hero__visual { max-width: 760px; margin: 2.5rem auto 0; }
@media (min-width: 1024px) { .d2-hero__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }

/* ---- 14. Product groups: elevated ---- */
.d2-groups .d2-group {
  position: relative;
  border-radius: var(--hdc-r-xl);
  background: radial-gradient(120% 80% at 0% 0%, color-mix(in srgb, var(--d2-tone) 7%, transparent), transparent 60%), var(--hdc-surface);
  box-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 14px 34px -20px rgba(15, 33, 58, .22);
  transition: transform var(--hdc-dur-3) var(--hdc-ease), box-shadow var(--hdc-dur-3) var(--hdc-ease), border-color var(--hdc-dur-2);
}
.d2-groups .d2-group:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--d2-tone) 45%, var(--hdc-border)); box-shadow: 0 24px 46px -22px color-mix(in srgb, var(--d2-tone) 45%, rgba(15, 33, 58, .45)); }
.d2-groups .hdc-b-group__cta { color: var(--d2-tone-text); }

/* ---- 15. Visual block (showcase with callouts) ---- */
.d2-showcase { position: relative; display: grid; gap: 1.5rem; }
.d2-showcase__stage { position: relative; }
.d2-showcase__stage::before { content: ""; position: absolute; inset: 0 8%; z-index: 0; border-radius: 40%; background: radial-gradient(closest-side, color-mix(in srgb, var(--hdc-primary) 18%, transparent), transparent); filter: blur(24px); pointer-events: none; }
.d2-showcase__stage .d2-vis { z-index: 1; max-width: 620px; }
.d2-showcase__callouts { display: grid; gap: .85rem; margin: 0; padding: 0; list-style: none; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); }
.d2-callout { display: flex; align-items: flex-start; gap: .85rem; padding: 1rem 1.1rem; border: 1px solid var(--hdc-border); border-radius: var(--hdc-r-lg); background: color-mix(in srgb, var(--hdc-surface) 90%, transparent); box-shadow: var(--hdc-shadow-sm); }
.d2-callout b { display: block; color: var(--hdc-heading); font-weight: 650; }
.d2-callout span > span { display: block; color: var(--hdc-text-2); font-size: var(--hdc-fs-sm); }
@media (min-width: 1100px) {
  .d2-showcase.has-callouts:not(.d2-showcase--split) { grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr) minmax(0, 1fr); align-items: center; }
  .d2-showcase.has-callouts:not(.d2-showcase--split) .d2-showcase__stage { grid-column: 2; grid-row: 1; }
  .d2-showcase.has-callouts:not(.d2-showcase--split) .d2-showcase__callouts { display: contents; }
  .d2-showcase.has-callouts:not(.d2-showcase--split) .d2-callout:nth-child(odd) { grid-column: 1; }
  .d2-showcase.has-callouts:not(.d2-showcase--split) .d2-callout:nth-child(even) { grid-column: 3; }
  .d2-showcase.has-callouts:not(.d2-showcase--split) .d2-callout:nth-child(1), .d2-showcase.has-callouts:not(.d2-showcase--split) .d2-callout:nth-child(2) { grid-row: 1; align-self: start; margin-top: 2rem; }
  .d2-showcase.has-callouts:not(.d2-showcase--split) .d2-callout:nth-child(3), .d2-showcase.has-callouts:not(.d2-showcase--split) .d2-callout:nth-child(4) { grid-row: 1; align-self: end; margin-bottom: 2rem; }
}
@media (min-width: 960px) {
  .d2-showcase--split { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); align-items: center; gap: 2.5rem; }
  .d2-showcase--split .d2-showcase__callouts { grid-template-columns: minmax(0, 1fr); }
}
.d2-showcase__actions { margin-top: 2rem; }
.d2-showcase__actions--center { justify-content: center; }

/* ---- 16. Tech stack ---- */
.d2-tech { position: relative; }
.d2-tech__list { display: flex; flex-wrap: wrap; justify-content: center; gap: .65rem; margin: 0; padding: 0; list-style: none; }
.d2-tech--start .d2-tech__list { justify-content: flex-start; }
.d2-tech__item {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  height: 46px;
  padding: 0 1rem 0 .8rem;
  border: 1px solid var(--hdc-border);
  border-radius: var(--hdc-r-pill);
  background: var(--hdc-surface);
  color: var(--hdc-text-2);
  font-weight: 650;
  font-size: var(--hdc-fs-sm);
  white-space: nowrap;
  box-shadow: var(--hdc-shadow-xs);
  transition: color var(--hdc-dur-2), border-color var(--hdc-dur-2), transform var(--hdc-dur-2) var(--hdc-ease);
}
.d2-tech__logo { width: 22px; height: 22px; flex: none; color: var(--hdc-text-2); transition: color var(--hdc-dur-2); }
.d2-tech__icon { display: inline-grid; place-items: center; width: 22px; height: 22px; color: var(--hdc-primary-text); } /* bare (owner rule 1.5.2) */
.d2-tech__icon .hdc-i { --hdc-i: 20px; }
.d2-tech__item:hover { color: var(--hdc-heading); border-color: var(--hdc-border-strong); transform: translateY(-1px); }
.d2-tech__item:hover .d2-tech__logo, .d2-tech--brand .d2-tech__logo { color: var(--d2-brand, var(--hdc-primary)); }
:root[data-theme="dark"] .d2-tech__item:hover .d2-tech__logo, :root[data-theme="dark"] .d2-tech--brand .d2-tech__logo,
.hdc-night .d2-tech__item:hover .d2-tech__logo, .hdc-night .d2-tech--brand .d2-tech__logo { color: color-mix(in srgb, var(--d2-brand, var(--hdc-primary)) 65%, #ffffff); }
.d2-tech--grid .d2-tech__list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 180px), 1fr)); }
.d2-tech--grid .d2-tech__item { justify-content: flex-start; height: 58px; border-radius: var(--hdc-r-lg); }
.d2-tech--marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.d2-tech__track { display: flex; gap: .65rem; width: max-content; animation: d2-marquee 42s linear infinite; }
.d2-tech--marquee .d2-tech__list { flex-wrap: nowrap; }
.d2-tech--marquee:hover .d2-tech__track, .d2-tech--marquee:focus-within .d2-tech__track { animation-play-state: paused; }
[dir="rtl"] .d2-tech__track { animation-direction: reverse; }
@keyframes d2-marquee { to { transform: translateX(calc(-50% - .325rem)); } }
.d2-tech__caption { margin: 1.25rem 0 0; color: var(--hdc-text-3); font-size: var(--hdc-fs-sm); text-align: center; }
@media (prefers-reduced-motion: reduce) {
  .d2-tech__track { animation: none; flex-wrap: wrap; width: auto; justify-content: center; }
  .d2-tech__track .d2-tech__list[aria-hidden="true"] { display: none; }
  .d2-tech--marquee { -webkit-mask-image: none; mask-image: none; }
  .d2-features--elevated .d2-feature, .d2-features--glass .d2-feature, .d2-groups .d2-group, .d2-bento--elevated .hdc-bento__card { transition: none; }
}

/* ---- 17. Section rhythm helpers used by the kit (_class) ---- */
.hdc-section.d2-tight-top { padding-top: calc(var(--hdc-section-y) * .45); }
/* d2-center-rows (kit pricing blocks): plan cards centred, so a last row of 1–2 plans does not hang on the left */
@media (min-width: 720px) {
  .d2-center-rows .hdc-pricing__grid { --d2-g: clamp(1rem, .7rem + 1vw, 1.5rem); display: flex; flex-wrap: wrap; justify-content: center; gap: var(--d2-g); }
  .d2-center-rows .hdc-pricing__grid > * { flex: 0 1 calc((100% - var(--d2-g)) / 2); min-width: 0; }
}
@media (min-width: 1100px) {
  /* WD1: --hdc-b-cols (4; 5–6 on wide containers, blocks-commerce.css) instead of a fixed four */
  .d2-center-rows .hdc-pricing__grid > * { flex-basis: calc((100% - (var(--hdc-b-cols, 4) - 1) * var(--d2-g)) / var(--hdc-b-cols, 4)); }
  .d2-center-rows .hdc-pricing__grid[data-cols="3"] > * { flex-basis: calc((100% - 2 * var(--d2-g)) / 3); }
  .d2-center-rows .hdc-pricing__grid[data-cols="2"] > * { flex-basis: calc((100% - var(--d2-g)) / 2); }
}
/* a single plan (licence pages): the card takes the whole 420px column instead of a 1/2 or 1/4 share of it */
@media (min-width: 720px) {
  .d2-center-rows .hdc-pricing__grid[data-cols="1"] > * { flex: 1 1 100%; }
}


/* ===== part: d2-tech.css ===== */
/* DX1 tech-stack brand colours — generated by tools/content/visuals/build_tech_sprite.py; do not edit. */
.d2-tech__item--cpanel { --d2-brand: #ff6c2c; }
.d2-tech__item--wordpress { --d2-brand: #21759B; }
.d2-tech__item--redis { --d2-brand: #FF4438; }
.d2-tech__item--php { --d2-brand: #777BB4; }
.d2-tech__item--nodejs { --d2-brand: #5FA04E; }
.d2-tech__item--python { --d2-brand: #3776AB; }
.d2-tech__item--ubuntu { --d2-brand: #E95420; }
.d2-tech__item--debian { --d2-brand: #A81D33; }
.d2-tech__item--almalinux { --d2-brand: #000000; }
.d2-tech__item--rocky { --d2-brand: #10B981; }
.d2-tech__item--centos { --d2-brand: #262577; }
.d2-tech__item--fedora { --d2-brand: #51A2DA; }
.d2-tech__item--freebsd { --d2-brand: #AB2B28; }
.d2-tech__item--proxmox { --d2-brand: #E57000; }
.d2-tech__item--windows { --d2-brand: #1062FE; }


/* ===== part: d2-visuals.css ===== */
/* ==========================================================================
   DX1 — Design 2.0 visual library (docs/DESIGN-2.md §6; markup: blocks/visual/library.tpl).
   HTML/CSS/SVG mockups of HyperDC features, coloured by tokens: light, dark (data-theme) and night bands follow
   automatically. Decorative (role="img" + label on .d2-vis). Logical properties only (RTL); motion stops with
   prefers-reduced-motion. Mock-local tokens: --d2m-*.
   ========================================================================== */

/* ---- 1. Mock tokens ---- */
.d2-vis {
  --d2m-bg: #ffffff;
  --d2m-bar: #f3f6fa;
  --d2m-row: #f6f8fb;
  --d2m-row-2: #eef2f7;
  --d2m-line: rgba(15, 33, 58, .09);
  --d2m-line-2: rgba(15, 33, 58, .14);
  --d2m-text: #1d2533;
  --d2m-head: #0f1729;
  --d2m-dim: #5f6e82;
  --d2m-faint: #93a2b5;
  --d2m-primary: #0071bc;
  --d2m-primary-2: #22c3ee;
  --d2m-ok: #079455;
  --d2m-ok-soft: rgba(18, 183, 106, .12);
  --d2m-ai: #6941f0;
  --d2m-ai-soft: rgba(124, 92, 255, .12);
  --d2m-bad: #d92d20;
  --d2m-shadow: 0 32px 64px -30px rgba(15, 33, 58, .38), 0 2px 8px rgba(15, 33, 58, .06);
  --d2m-pop: 0 18px 40px -16px rgba(15, 33, 58, .32), 0 1px 3px rgba(15, 33, 58, .08);
  position: relative;
  width: 100%;
  max-width: 580px;
  margin-inline: auto;
  color: var(--d2m-text);
  font-size: 13px;
  line-height: 1.45;
  text-align: start;
  -webkit-user-select: none;
  user-select: none;
}
:root[data-theme="dark"] .d2-vis,
.hdc-night .d2-vis {
  --d2m-bg: #0d1b30;
  --d2m-bar: #0a1628;
  --d2m-row: rgba(255, 255, 255, .035);
  --d2m-row-2: rgba(255, 255, 255, .06);
  --d2m-line: rgba(148, 170, 200, .13);
  --d2m-line-2: rgba(148, 170, 200, .22);
  --d2m-text: #d4dce7;
  --d2m-head: #f2f6fb;
  --d2m-dim: #8fa1b8;
  --d2m-faint: #66768b;
  --d2m-primary: #2b95e0;
  --d2m-ok: #32d583;
  --d2m-ok-soft: rgba(50, 213, 131, .14);
  --d2m-ai: #a48bff;
  --d2m-ai-soft: rgba(164, 139, 255, .16);
  --d2m-bad: #f97066;
  --d2m-shadow: 0 34px 70px -30px rgba(0, 0, 0, .75), 0 0 0 1px rgba(255, 255, 255, .02) inset;
  --d2m-pop: 0 20px 44px -16px rgba(0, 0, 0, .7);
}
.d2-vis .hdc-i { --hdc-i: 15px; flex: none; display: inline-block; width: var(--hdc-i); height: var(--hdc-i); border-radius: 0; }
/* Media containers style every img/svg inside them (width: 100%); the mockup's own logos keep their size. */
.d2-vis img { display: block; flex: none; max-width: none; border-radius: 0; }
.d2-vis .d2-os-tile img, .d2-vis .d2-vm img, .d2-vis .d2-logo img { width: 22px; height: 22px; }
.d2-vis .d2-ca__row .d2-logo img, .d2-vis .d2-mac__dock img { width: 18px; height: 18px; }
.d2-vis .d2-desk__bar img { width: 16px; height: 16px; }
.d2-vis .d2-spark { border-radius: 0; }
.d2-vis b { color: var(--d2m-head); font-weight: 650; }
.d2-vis small { color: var(--d2m-dim); font-size: 11.5px; }
.d2-vis p { margin: 0; }

/* ---- 2. Window frame ---- */
.d2-win {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--d2m-line);
  border-radius: 16px;
  background: var(--d2m-bg);
  box-shadow: var(--d2m-shadow);
}
.d2-win__bar {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 38px;
  padding: 0 14px;
  border-bottom: 1px solid var(--d2m-line);
  background: var(--d2m-bar);
}
.d2-win__dots { display: inline-flex; gap: 6px; flex: none; }
.d2-win__dots i { width: 10px; height: 10px; border-radius: 50%; background: #f97066; }
.d2-win__dots i:nth-child(2) { background: #fdb022; }
.d2-win__dots i:nth-child(3) { background: #32d583; }
.d2-win__title {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  padding-inline-end: 46px;
  color: var(--d2m-dim);
  font: 500 11.5px/1.3 var(--hdc-font-mono);
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.d2-win__title .hdc-i { --hdc-i: 13px; margin-inline-end: 6px; vertical-align: -2px; }
.d2-win__url {
  display: inline-flex;
  flex: 1;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 0;
  margin-inline: 10px 46px;
  padding: 5px 12px;
  border-radius: 8px;
  background: var(--d2m-row-2);
  color: var(--d2m-dim);
  font: 500 11.5px/1.2 var(--hdc-font-mono);
  direction: ltr;
}
.d2-win__url .hdc-i { --hdc-i: 12px; color: var(--d2m-ok); }
.d2-win__url--secure { color: var(--d2m-text); }
.d2-win--dark {
  --d2m-bg: #0b1626;
  --d2m-bar: #08111f;
  --d2m-line: rgba(148, 170, 200, .12);
  --d2m-text: #c9d3e0;
  --d2m-head: #f2f6fb;
  --d2m-dim: #7f90a8;
  --d2m-row: rgba(255, 255, 255, .03);
  --d2m-row-2: rgba(255, 255, 255, .06);
  color: var(--d2m-text);
}

/* ---- 3. Shared UI atoms ---- */
.d2-label { display: block; margin: 2px 0 7px; color: var(--d2m-faint); font: 600 10.5px/1 var(--hdc-font-mono); letter-spacing: .08em; text-transform: uppercase; }
.d2-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 24px;
  padding: 0 10px;
  border: 1px solid var(--d2m-line);
  border-radius: 999px;
  background: var(--d2m-row);
  color: var(--d2m-dim);
  font-size: 11.5px;
  font-style: normal;
  font-weight: 600;
  white-space: nowrap;
}
.d2-pill .hdc-i { --hdc-i: 13px; }
.d2-pill--ok { border-color: transparent; background: var(--d2m-ok-soft); color: var(--d2m-ok); }
.d2-pill--ai { border-color: transparent; background: var(--d2m-ai-soft); color: var(--d2m-ai); }
.d2-pill--live { border-color: transparent; background: rgba(240, 68, 56, .14); color: #f97066; }
.d2-led { width: 7px; height: 7px; border-radius: 50%; background: var(--d2m-ok); box-shadow: 0 0 0 3px color-mix(in srgb, var(--d2m-ok) 22%, transparent); flex: none; }
.d2-led--live { background: #f04438; box-shadow: 0 0 0 3px rgba(240, 68, 56, .22); animation: d2-pulse 1.6s ease-in-out infinite; }
.d2-ok-text { color: var(--d2m-ok); font-style: normal; font-weight: 600; }
.d2-ui-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 30px;
  padding: 0 12px;
  border: 1px solid var(--d2m-line-2);
  border-radius: 8px;
  background: var(--d2m-bg);
  color: var(--d2m-text);
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}
.d2-ui-btn .hdc-i { --hdc-i: 14px; color: var(--d2m-dim); }
.d2-ui-btn--primary { border-color: transparent; background: linear-gradient(135deg, #0a7cc7, #0071bc); color: #fff; box-shadow: 0 6px 16px -8px rgba(0, 113, 188, .7); }
.d2-ui-btn--primary .hdc-i { color: #fff; }
.d2-ui-btn--lg { height: 36px; padding: 0 18px; font-size: 13px; }
/* logo / icon slots in the mockups are bare (owner rule 1.5.2: no tile, frame, ring or fill behind icons) */
.d2-logo { display: inline-grid; place-items: center; width: 34px; height: 34px; flex: none; color: var(--d2m-dim); }
.d2-logo .hdc-i { --hdc-i: 22px; }
.d2-logo img { width: 26px; height: 26px; }
.d2-avatar { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; color: #fff; font-size: 12px; font-weight: 700; flex: none; background: linear-gradient(135deg, var(--d2-tone, #0071bc), var(--d2-tone-2, #22c3ee)); }
.d2-avatar .hdc-i { --hdc-i: 14px; }
.d2-dot { width: 8px; height: 8px; margin-inline-start: auto; border-radius: 50%; background: var(--d2m-primary); flex: none; }
.d2-chips { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 12px; }
.d2-chip { display: inline-flex; align-items: center; gap: 7px; padding: 6px 10px; border: 1px solid var(--d2m-line-2); border-radius: 9px; background: var(--d2m-bg); font-weight: 600; font-size: 12px; }
.d2-chip b { display: inline-grid; place-items: center; min-width: 22px; height: 16px; border-radius: 4px; background: var(--d2m-row-2); color: var(--d2m-dim); font: 700 9.5px/1 var(--hdc-font-mono); }
.d2-chip.is-on { border-color: var(--d2m-primary); box-shadow: 0 0 0 1px var(--d2m-primary) inset; background: color-mix(in srgb, var(--d2m-primary) 8%, var(--d2m-bg)); }
.d2-switch { position: relative; width: 30px; height: 18px; margin-inline-start: auto; border-radius: 999px; background: var(--d2m-row-2); flex: none; }
.d2-switch::after { content: ""; position: absolute; top: 2px; inset-inline-start: 2px; width: 14px; height: 14px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .25); }
.d2-switch.is-on { background: linear-gradient(135deg, #0a7cc7, #22c3ee); }
.d2-switch.is-on::after { inset-inline-start: 14px; }
.d2-tick { display: inline-grid; place-items: center; width: 16px; height: 16px; margin-inline-end: 8px; color: var(--d2m-ok); font-size: 14px; font-weight: 800; }
.d2-check-row { display: flex; align-items: center; gap: 8px; color: var(--d2m-text); font-weight: 600; font-size: 12.5px; }
.d2-check-row .hdc-i { --hdc-i: 16px; color: var(--d2m-ok); }

/* meters and fills */
.d2-meters { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 16px; }
.d2-meters--row { margin-top: 14px; }
.d2-meter { display: grid; gap: 6px; }
.d2-meter span { color: var(--d2m-dim); font: 600 10.5px/1 var(--hdc-font-mono); letter-spacing: .06em; text-transform: uppercase; }
.d2-meter i { position: relative; display: block; height: 7px; overflow: hidden; border-radius: 999px; background: var(--d2m-row-2); }
.d2-meter i::after { content: ""; position: absolute; inset-block: 0; inset-inline-start: 0; width: var(--v, 40%); border-radius: inherit; background: linear-gradient(90deg, #0071bc, #22c3ee); }
.d2-fill-20 { --v: 20%; } .d2-fill-30 { --v: 30%; } .d2-fill-40 { --v: 40%; } .d2-fill-50 { --v: 50%; } .d2-fill-60 { --v: 60%; } .d2-fill-70 { --v: 70%; }
.d2-spark { display: block; width: 100%; height: 48px; margin-top: 12px; }
.d2-spark--sm { height: 30px; margin: 0; }
.d2-spark__area { fill: color-mix(in srgb, var(--d2m-primary) 14%, transparent); stroke: none; }
.d2-spark__line { fill: none; stroke: var(--d2m-primary); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.d2-tags { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 14px; }
.d2-tag-card { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border: 1px solid var(--d2m-line); border-radius: 12px; background: var(--d2m-bg); box-shadow: var(--d2m-pop); color: var(--d2m-head); font-size: 12.5px; font-weight: 650; }
.d2-tag-card .hdc-i { --hdc-i: 16px; color: var(--d2m-primary); }
.d2-tag-card b { display: inline-grid; place-items: center; min-width: 24px; height: 18px; border-radius: 5px; background: var(--d2m-row-2); color: var(--d2m-dim); font: 700 10px/1 var(--hdc-font-mono); }
.d2-tag-card .d2-pill { height: 20px; padding: 0 8px; font-size: 10.5px; }

/* ---- 4. Visuals ---- */
/* terminal */
.d2-term { padding: 16px 18px 18px; color: #c9d3e0; font: 500 12.5px/1.75 var(--hdc-font-mono); direction: ltr; text-align: left; }
.d2-term p { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.d2-term__p { color: #7f90a8; }
.d2-term__u { color: #6ce9a6; }
.d2-term__path { color: #7cc2f3; }
.d2-term__dim { color: #7f90a8; }
.d2-term__ok { color: #32d583; }
.d2-term__cursor { display: inline-block; width: 8px; height: 15px; vertical-align: -3px; background: #c9d3e0; animation: d2-blink 1.1s steps(1) infinite; }

/* server panel */
.d2-panel { display: grid; gap: 14px; padding: 16px; }
.d2-panel__head { display: flex; align-items: center; gap: 12px; }
.d2-panel__id { display: grid; min-width: 0; margin-inline-end: auto; }
.d2-panel__id b, .d2-panel__id small { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.d2-panel__id small { font-family: var(--hdc-font-mono); }
.d2-panel__actions { display: flex; flex-wrap: wrap; gap: 8px; }

/* deploy */
.d2-deploy { padding: 14px 16px 16px; }
.d2-os-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-bottom: 12px; }
.d2-os-tile { display: grid; justify-items: center; gap: 6px; padding: 10px 6px 8px; border: 1px solid var(--d2m-line-2); border-radius: 10px; background: var(--d2m-bg); }
.d2-os-tile small { font-weight: 600; font-size: 11px; }
.d2-os-tile.is-on { border-color: var(--d2m-primary); box-shadow: 0 0 0 1px var(--d2m-primary) inset; background: color-mix(in srgb, var(--d2m-primary) 7%, var(--d2m-bg)); }
.d2-plan-row { display: flex; align-items: center; gap: 10px; margin-bottom: 7px; padding: 9px 12px; border: 1px solid var(--d2m-line-2); border-radius: 10px; font: 600 12px/1.3 var(--hdc-font-mono); }
.d2-plan-row.is-on { border-color: var(--d2m-primary); background: color-mix(in srgb, var(--d2m-primary) 7%, var(--d2m-bg)); }
.d2-rb { width: 14px; height: 14px; border: 1.5px solid var(--d2m-line-2); border-radius: 50%; flex: none; }
.d2-plan-row.is-on .d2-rb { border-color: var(--d2m-primary); background: var(--d2m-primary); box-shadow: inset 0 0 0 3px var(--d2m-bg); }
.d2-deploy__foot { display: flex; justify-content: flex-end; margin-top: 12px; }

/* nested virtualization */
.d2-nest { position: relative; border-radius: 18px; }
.d2-nest--host { padding: 18px; border: 1.5px dashed var(--d2m-line-2); background: color-mix(in srgb, var(--d2m-row) 70%, transparent); }
.d2-nest--vds { margin-top: 12px; padding: 16px; border: 1.5px solid color-mix(in srgb, var(--d2m-ai) 55%, transparent); background: var(--d2m-bg); box-shadow: 0 0 0 6px color-mix(in srgb, var(--d2m-ai) 8%, transparent), var(--d2m-shadow); }
.d2-nest__label { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; color: var(--d2m-head); font-weight: 650; font-size: 13px; }
.d2-nest__label .hdc-i { --hdc-i: 16px; color: var(--d2m-dim); }
.d2-nest__label .d2-pill { margin-inline-start: auto; }
.d2-nest__vms { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 14px; }
.d2-vm { display: grid; justify-items: center; gap: 7px; padding: 14px 8px 12px; border: 1px solid var(--d2m-line-2); border-radius: 12px; background: var(--d2m-row); }
.d2-vm b { font-size: 12px; }
.d2-vm .d2-led { animation: d2-pulse 2.4s ease-in-out infinite; }
.d2-vm:nth-child(2) .d2-led { animation-delay: -.8s; }
.d2-vm:nth-child(3) .d2-led { animation-delay: -1.6s; }

/* Windows remote desktop */
.d2-win__bar--rdp { justify-content: space-between; background: linear-gradient(90deg, #0a3b62, #0071bc); border-bottom-color: transparent; }
.d2-win__bar--rdp .d2-win__title { flex: 1; padding: 0; color: #e7f1fb; text-align: start; }
.d2-win__bar--rdp .hdc-i { color: #e7f1fb; }
.d2-win__ctrl { display: inline-flex; gap: 12px; }
.d2-win__ctrl i { width: 10px; height: 10px; border: 1.5px solid rgba(231, 241, 251, .75); border-radius: 2px; }
.d2-win__ctrl i:first-child { height: 0; border-width: 1.5px 0 0; margin-top: 5px; border-radius: 0; }
.d2-desk { position: relative; padding: 18px 18px 50px; background: radial-gradient(120% 90% at 85% 0%, rgba(43, 149, 224, .35), transparent 60%), linear-gradient(160deg, #0a2c4d, #071a30); }
.d2-desk__app { padding: 14px; border: 1px solid rgba(148, 170, 200, .2); border-radius: 12px; background: var(--d2m-bg); box-shadow: 0 24px 40px -20px rgba(0, 0, 0, .55); }
.d2-desk__title { margin-bottom: 10px; color: var(--d2m-head); font-weight: 700; font-size: 13px; }
.d2-desk__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.d2-desk__tile { display: flex; align-items: center; gap: 8px; padding: 9px 10px; border-radius: 9px; background: var(--d2m-row-2); color: var(--d2m-text); font-weight: 600; font-size: 12px; }
.d2-desk__tile .hdc-i { color: var(--d2m-primary); }
.d2-desk__bar { position: absolute; inset-inline: 0; bottom: 0; display: flex; align-items: center; gap: 10px; height: 34px; padding: 0 14px; background: rgba(4, 12, 24, .72); }
.d2-desk__bar img { filter: brightness(0) invert(1); opacity: .9; }
.d2-desk__bar i { width: 18px; height: 18px; border-radius: 5px; background: rgba(255, 255, 255, .14); }
.d2-desk__clock { width: 34px; height: 8px; margin-inline-start: auto; border-radius: 4px; background: rgba(255, 255, 255, .22); }

/* macOS + Xcode */
.d2-win--mac .d2-win__bar { background: linear-gradient(180deg, var(--d2m-bar), var(--d2m-row-2)); }
.d2-mac { display: grid; grid-template-columns: 54px minmax(0, 1fr); min-height: 200px; }
.d2-mac__side { display: grid; align-content: start; gap: 9px; padding: 14px 12px; border-inline-end: 1px solid var(--d2m-line); background: var(--d2m-row); }
.d2-mac__side i { height: 8px; border-radius: 4px; background: var(--d2m-row-2); }
.d2-mac__side i:first-child { background: color-mix(in srgb, var(--d2m-primary) 45%, transparent); }
.d2-mac__log { display: grid; align-content: start; gap: 9px; padding: 16px 18px; font: 500 12.5px/1.4 var(--hdc-font-mono); direction: ltr; text-align: left; }
.d2-mac__log p { display: flex; align-items: center; }
.d2-mac__done { margin-top: 6px !important; }
.d2-mac__done .d2-pill { font-family: var(--hdc-font-sans); }
.d2-mac__dock { display: flex; justify-content: center; gap: 8px; padding: 9px; border-top: 1px solid var(--d2m-line); background: var(--d2m-row); }
.d2-mac__dock img { width: 26px; height: 26px; }
.d2-mac__dock i { width: 26px; height: 26px; border-radius: 8px; background: linear-gradient(135deg, var(--d2m-row-2), color-mix(in srgb, var(--d2m-primary) 25%, var(--d2m-row-2))); }

/* rack (always hardware-dark) */
.d2-svg { display: block; width: 100%; height: auto; }
.d2-rack__frame { fill: #0b1626; stroke: rgba(148, 170, 200, .25); stroke-width: 1.5; }
.d2-rack__rail { stroke: rgba(148, 170, 200, .25); stroke-width: 3; stroke-dasharray: 2 10; }
.d2-rack__u { fill: #132640; stroke: rgba(148, 170, 200, .22); }
.d2-rack__unit--hl .d2-rack__u { fill: #16304f; stroke: rgba(43, 149, 224, .65); }
.d2-rack__bays rect { fill: #0d1b30; stroke: rgba(148, 170, 200, .25); }
.d2-rack__vent path { stroke: rgba(148, 170, 200, .28); stroke-width: 3; stroke-linecap: round; }
.d2-rack__led { fill: rgba(148, 170, 200, .3); }
.d2-rack__led--on { fill: #32d583; filter: drop-shadow(0 0 4px rgba(50, 213, 131, .8)); }
.d2-rack__led--blue { fill: #4aa8ec; filter: drop-shadow(0 0 4px rgba(74, 168, 236, .8)); }
.d2-rack__led--pulse { animation: d2-pulse 1.8s ease-in-out infinite; }
.d2-vis--rack .d2-svg { filter: drop-shadow(0 30px 40px rgba(6, 20, 40, .35)); }

/* hosting panel */
.d2-hp { padding: 16px; }
.d2-hp__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.d2-hp__tile { display: grid; justify-items: start; gap: 9px; padding: 12px; border: 1px solid var(--d2m-line); border-radius: 12px; background: var(--d2m-row); color: var(--d2m-head); font-weight: 650; font-size: 12.5px; }

/* WordPress */
.d2-wp { display: grid; gap: 10px; padding: 16px; }
.d2-wp__head { display: flex; align-items: center; gap: 12px; margin-bottom: 4px; }
.d2-wp__head > span:last-child { display: grid; }
.d2-toggle-row { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--d2m-line); border-radius: 10px; background: var(--d2m-row); font-weight: 600; font-size: 12.5px; }
.d2-toggle-row > span { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.d2-toggle-row .hdc-i { color: var(--d2m-primary); }

/* speed waterfall */
.d2-speed { display: grid; gap: 9px; padding: 16px; }
.d2-speed__head { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 4px; }
.d2-wf { display: grid; grid-template-columns: 44px minmax(0, 1fr); align-items: center; gap: 10px; }
.d2-wf span { color: var(--d2m-dim); font: 600 10.5px/1 var(--hdc-font-mono); }
.d2-wf__bar { position: relative; display: block; height: 10px; border-radius: 999px; background: var(--d2m-row-2); }
.d2-wf__bar::after { content: ""; position: absolute; inset-block: 0; border-radius: inherit; background: linear-gradient(90deg, #0071bc, #22c3ee); }
.d2-wf--a::after { inset-inline-start: 0; width: 22%; }
.d2-wf--b::after { inset-inline-start: 18%; width: 16%; background: linear-gradient(90deg, #6941f0, #a48bff); }
.d2-wf--c::after { inset-inline-start: 20%; width: 24%; background: linear-gradient(90deg, #dc8a04, #fdb022); }
.d2-wf--d::after { inset-inline-start: 26%; width: 30%; background: linear-gradient(90deg, #079455, #32d583); }
.d2-wf--e::after { inset-inline-start: 24%; width: 12%; background: linear-gradient(90deg, #06a5d6, #2dd4bf); }

/* mail */
.d2-mail { padding: 8px 10px 12px; }
.d2-mail__row { display: flex; align-items: center; gap: 11px; padding: 10px 8px; border-bottom: 1px solid var(--d2m-line); }
.d2-mail__row > span:nth-child(2) { display: grid; min-width: 0; }
.d2-mail__row small { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.d2-mail__row.is-new b { color: var(--d2m-primary); }
.d2-mail__foot { display: flex; flex-wrap: wrap; gap: 7px; padding: 12px 8px 2px; }

/* reseller */
.d2-res { padding: 14px 16px 16px; }
.d2-res__brand { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; padding-bottom: 12px; border-bottom: 1px solid var(--d2m-line); }
.d2-res__brand b { margin-inline-end: auto; }
.d2-res__logo { width: 30px; height: 30px; border-radius: 9px; background: conic-gradient(from 210deg, #0071bc, #22c3ee, #7c5cff, #0071bc); }
.d2-res__row { display: flex; align-items: center; gap: 11px; padding: 9px 0; }
.d2-res__row b { margin-inline-end: auto; font-family: var(--hdc-font-mono); font-size: 12.5px; }

/* radio */
.d2-radio { padding: 16px 18px 18px; }
.d2-radio__top { display: flex; flex-wrap: wrap; gap: 7px; }
.d2-eq { display: flex; align-items: flex-end; gap: 5px; height: 74px; margin: 16px 0 12px; }
.d2-eq i { flex: 1; height: 30%; border-radius: 3px 3px 1px 1px; background: linear-gradient(180deg, #22c3ee, #0071bc); animation: d2-eq 1.2s ease-in-out infinite alternate; }
.d2-eq i:nth-child(3n) { animation-duration: .9s; height: 55%; }
.d2-eq i:nth-child(3n+1) { animation-duration: 1.4s; height: 80%; }
.d2-eq i:nth-child(4n) { animation-delay: -.4s; background: linear-gradient(180deg, #a48bff, #6941f0); }
.d2-eq i:nth-child(5n) { animation-delay: -.7s; }
.d2-radio__meta { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 14px; color: var(--d2m-dim); font-weight: 600; font-size: 12px; }
.d2-radio__meta > span { display: inline-flex; align-items: center; gap: 7px; }

/* domain search */
.d2-dom { display: grid; gap: 8px; padding: 14px 16px 16px; }
.d2-dom__search { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; padding: 6px 6px 6px 14px; border: 1.5px solid var(--d2m-primary); border-radius: 12px; background: var(--d2m-bg); box-shadow: 0 0 0 4px color-mix(in srgb, var(--d2m-primary) 12%, transparent); font-weight: 650; font-size: 14px; }
.d2-dom__search > span:nth-child(2) { margin-inline-end: auto; color: var(--d2m-head); }
.d2-dom__search > .hdc-i { color: var(--d2m-dim); }
.d2-dom__row { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--d2m-line); border-radius: 10px; background: var(--d2m-row); }
.d2-dom__row b { margin-inline-end: auto; font-size: 13.5px; }
.d2-dom__row em { color: var(--d2m-primary); font-style: normal; }
.d2-dom__row.is-off { opacity: .75; }
.d2-dom__row.is-off em { color: var(--d2m-dim); }

/* DNS */
.d2-dns { padding: 8px 12px 12px; font: 500 12px/1.3 var(--hdc-font-mono); direction: ltr; text-align: left; }
.d2-dns__row { display: grid; grid-template-columns: 74px 54px minmax(0, 1fr); align-items: center; gap: 10px; padding: 9px 6px; border-bottom: 1px solid var(--d2m-line); }
.d2-dns__row span:last-child { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.d2-dns__row--head { color: var(--d2m-faint); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; }
.d2-rr { justify-self: start; padding: 3px 7px; border-radius: 6px; background: color-mix(in srgb, var(--d2-tone, #0071bc) 14%, transparent); color: var(--d2-tone-text, var(--d2-tone, #0071bc)); font-weight: 700; font-size: 11px; }

/* SSL */
.d2-ssl { padding: 18px; background: radial-gradient(70% 90% at 100% 0%, color-mix(in srgb, var(--d2m-ok) 10%, transparent), transparent 70%); }
.d2-ssl__pop { max-width: 360px; margin-inline: auto; padding: 14px; border: 1px solid var(--d2m-line); border-radius: 14px; background: var(--d2m-bg); box-shadow: var(--d2m-pop); }
.d2-ssl__head { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.d2-ssl__head > span:last-child { display: grid; }
.d2-ssl__row { display: flex; justify-content: space-between; gap: 12px; padding: 8px 2px; border-top: 1px solid var(--d2m-line); color: var(--d2m-dim); font-size: 12px; }
.d2-ssl__row b { display: inline-flex; align-items: center; gap: 4px; }
.d2-ssl__row .hdc-i { color: var(--d2m-ok); }

/* backups */
.d2-bk { position: relative; display: grid; gap: 10px; padding: 16px; }
.d2-bk::before { content: ""; position: absolute; top: 34px; bottom: 34px; inset-inline-start: 34px; width: 2px; background: linear-gradient(var(--d2m-line-2), transparent); }
.d2-bk__row { position: relative; display: flex; align-items: center; gap: 12px; padding: 10px 12px 10px 8px; border: 1px solid var(--d2m-line); border-radius: 12px; background: var(--d2m-bg); }
.d2-bk__row > span:nth-child(2) { display: grid; margin-inline-end: auto; }
.d2-bk__row small { display: inline-flex; align-items: center; gap: 5px; }
.d2-bk__row small .hdc-i { --hdc-i: 13px; color: var(--d2m-ok); }
.d2-bk__node { display: inline-grid; place-items: center; width: 36px; height: 36px; color: var(--d2-tone-text, var(--d2m-primary)); flex: none; } /* bare icon */
.d2-bk__node .hdc-i { --hdc-i: 24px; }

/* migration */
.d2-mig { padding: 20px; border: 1px solid var(--d2m-line); border-radius: 18px; background: var(--d2m-bg); box-shadow: var(--d2m-shadow); }
.d2-mig__ends { display: grid; grid-template-columns: minmax(0, 1fr) minmax(48px, 1fr) minmax(0, 1fr); align-items: center; gap: 10px; }
.d2-mig__box { display: grid; justify-items: center; gap: 8px; padding: 16px 10px; border: 1px solid var(--d2m-line-2); border-radius: 14px; background: var(--d2m-row); text-align: center; font-size: 12.5px; }
.d2-mig__box--to { border-color: color-mix(in srgb, var(--d2m-primary) 55%, transparent); background: color-mix(in srgb, var(--d2m-primary) 7%, var(--d2m-bg)); }
.d2-mig__flow { position: relative; height: 4px; border-radius: 4px; background: repeating-linear-gradient(90deg, var(--d2m-line-2) 0 8px, transparent 8px 14px); }
.d2-mig__flow i { position: absolute; top: -3px; width: 10px; height: 10px; border-radius: 50%; background: var(--d2m-primary); box-shadow: 0 0 10px var(--d2m-primary); animation: d2-flow 2.4s linear infinite; }
.d2-mig__flow i:nth-child(2) { animation-delay: -.8s; }
.d2-mig__flow i:nth-child(3) { animation-delay: -1.6s; }
.d2-mig__list { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-top: 16px; padding-top: 14px; border-top: 1px dashed var(--d2m-line-2); }

/* support chat */
.d2-chat { display: grid; gap: 12px; padding: 16px; }
.d2-msg { display: flex; align-items: flex-end; gap: 10px; max-width: 88%; }
.d2-msg--team { flex-direction: row-reverse; margin-inline-start: auto; }
.d2-bubble { display: grid; gap: 3px; padding: 10px 12px; border: 1px solid var(--d2m-line); border-radius: 14px 14px 14px 4px; background: var(--d2m-row); font-size: 12.5px; }
.d2-msg--team .d2-bubble { border-color: transparent; border-radius: 14px 14px 4px 14px; background: color-mix(in srgb, var(--d2m-primary) 12%, var(--d2m-bg)); }
.d2-bubble b { font-size: 11.5px; }
.d2-chat__foot { display: flex; justify-content: flex-end; }

/* security */
.d2-sec { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 18px 14px; padding: 22px; border: 1px solid var(--d2m-line); border-radius: 18px; background: radial-gradient(70% 80% at 50% 0%, color-mix(in srgb, var(--d2m-primary) 8%, transparent), transparent 70%), var(--d2m-bg); box-shadow: var(--d2m-shadow); }
.d2-sec__col { display: grid; gap: 4px; min-width: 0; }
.d2-sec__lane { position: relative; display: grid; grid-template-columns: repeat(4, 14px); justify-content: center; align-content: center; gap: 8px; min-height: 92px; padding: 12px; border: 1px solid var(--d2m-line); border-radius: 14px; background: var(--d2m-row); }
.d2-sec__lane i { width: 14px; height: 14px; border-radius: 4px; background: color-mix(in srgb, var(--d2m-primary) 65%, transparent); animation: d2-packet 2.2s ease-in-out infinite; }
.d2-sec__lane i.is-bad { background: var(--d2m-bad); box-shadow: 0 0 8px color-mix(in srgb, var(--d2m-bad) 55%, transparent); animation-delay: -1.1s; }
.d2-sec__lane i:nth-child(odd) { animation-delay: -.5s; }
.d2-sec__lane--out { border-color: color-mix(in srgb, var(--d2m-ok) 35%, transparent); background: color-mix(in srgb, var(--d2m-ok) 7%, var(--d2m-bg)); }
.d2-sec__lane--out i { background: var(--d2m-ok); }
.d2-sec__shield { position: relative; display: grid; justify-items: center; gap: 8px; padding-top: 18px; text-align: center; font-size: 12.5px; }
.d2-sec__server { grid-column: 1 / -1; display: flex; align-items: center; justify-content: center; gap: 10px; padding: 12px; border: 1px solid var(--d2m-line-2); border-radius: 12px; background: var(--d2m-row); }

/* network map */
.d2-vis--network .d2-svg {
  border: 1px solid var(--d2m-line);
  border-radius: 20px;
  background:
    radial-gradient(80% 90% at 50% 0%, color-mix(in srgb, var(--d2m-primary) 10%, transparent), transparent 70%),
    radial-gradient(circle, var(--d2m-line-2) 1.2px, transparent 1.6px) 0 0 / 12px 12px,
    var(--d2m-bg);
  box-shadow: var(--d2m-shadow);
}
.d2-net__arc { fill: none; stroke: color-mix(in srgb, var(--d2m-primary) 55%, transparent); stroke-width: 1.6; stroke-dasharray: 4 6; }
.d2-net__halo { fill: color-mix(in srgb, var(--d2m-primary) 18%, transparent); animation: d2-halo 2.8s ease-out infinite; transform-box: fill-box; transform-origin: center; }
.d2-net__core { fill: var(--d2m-primary); stroke: var(--d2m-bg); stroke-width: 2; }
.d2-net__pin--far .d2-net__core { fill: color-mix(in srgb, var(--d2m-primary) 60%, var(--d2m-faint)); }
.d2-net__you circle { fill: #22c3ee; stroke: var(--d2m-bg); stroke-width: 3; }
.d2-net__ping { fill: none; stroke: #22c3ee; stroke-width: 2; stroke-dasharray: 5 6; animation: d2-dash 1.4s linear infinite; }
.d2-net__chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: -26px; position: relative; }

/* client area */
.d2-ca { display: grid; grid-template-columns: 52px minmax(0, 1fr); }
.d2-ca__nav { display: grid; align-content: start; gap: 12px; padding: 16px 13px; border-inline-end: 1px solid var(--d2m-line); background: var(--d2m-row); }
.d2-ca__nav i { height: 24px; border-radius: 8px; background: var(--d2m-row-2); }
.d2-ca__nav i.is-on { background: linear-gradient(135deg, #0071bc, #22c3ee); }
.d2-ca__main { display: grid; gap: 9px; padding: 14px; }
.d2-ca__cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; margin-bottom: 4px; }
.d2-ca__card { display: grid; gap: 8px; padding: 11px; border: 1px solid var(--d2m-line); border-radius: 12px; background: var(--d2m-row); font-size: 12px; }
.d2-ca__row { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--d2m-line); border-radius: 10px; }
.d2-ca__row b { margin-inline-end: auto; font-size: 12.5px; }
.d2-ca__row .d2-logo { width: 28px; height: 28px; }
.d2-ca__row .d2-logo img { width: 22px; height: 22px; }

/* licence card */
.d2-lic { position: relative; max-width: 440px; margin-inline: auto; padding: 18px; border-radius: 18px; background: var(--d2m-bg); box-shadow: var(--d2m-shadow); }
.d2-lic::before { content: ""; position: absolute; inset: 0; padding: 1.5px; border-radius: inherit; background: linear-gradient(135deg, #6941f0, #22c3ee, #0071bc); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; }
.d2-lic__head { display: flex; align-items: center; gap: 12px; }
.d2-lic__head > span:nth-child(2) { display: grid; margin-inline-end: auto; }
.d2-lic__head small { font-family: var(--hdc-font-mono); }
.d2-lic__rows { display: grid; gap: 2px; margin-top: 14px; }
.d2-lic__row { display: flex; justify-content: space-between; gap: 12px; padding: 9px 2px; border-top: 1px solid var(--d2m-line); color: var(--d2m-dim); font-size: 12.5px; }
.d2-lic__row b { display: inline-flex; align-items: center; gap: 6px; font-family: var(--hdc-font-mono); font-size: 12px; }
.d2-lic__row .hdc-i { color: var(--d2m-ok); }

/* ---- 5. Stage with floating labels (feature-split, hero, cta) ---- */
.d2-stage { position: relative; padding: 30px 0; }
.d2-stage::before {
  content: "";
  position: absolute;
  inset: 6% 4%;
  z-index: 0;
  border-radius: 40%;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--hdc-primary) 22%, transparent), transparent), radial-gradient(60% 50% at 80% 80%, color-mix(in srgb, var(--hdc-violet-500) 18%, transparent), transparent);
  filter: blur(18px);
  pointer-events: none;
}
.d2-stage > .d2-vis { z-index: 1; }
.d2-float {
  position: absolute;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: 240px;
  padding: 9px 13px;
  border: 1px solid var(--hdc-border);
  border-radius: 14px;
  background: color-mix(in srgb, var(--hdc-surface-raised) 92%, transparent);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: var(--hdc-heading);
  font-size: var(--hdc-fs-sm);
  font-weight: 650;
  line-height: 1.3;
  box-shadow: var(--hdc-shadow-md);
  animation: hdc-float 6s ease-in-out infinite;
}
.d2-float .d2-icon { --d2-size: 30px; }
.d2-float .d2-icon .hdc-i { --hdc-i: 22px; }
/* chips sit in the stage's top and bottom padding, so they never cover the mockup's content */
.d2-float--1 { top: 0; inset-inline-start: -4%; }
.d2-float--2 { bottom: 0; inset-inline-end: -5%; animation-delay: -2s; }
.d2-float--3 { bottom: 0; inset-inline-start: 6%; animation-delay: -4s; }
@media (max-width: 1199.98px) {
  .d2-float--1 { inset-inline-start: 0; }
  .d2-float--2 { inset-inline-end: 0; }
}
@media (max-width: 719.98px) {
  .d2-stage { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; padding: 8px 0 0; }
  .d2-stage > .d2-vis { order: -1; margin-bottom: 8px; }
  .d2-float { position: static; animation: none; box-shadow: var(--hdc-shadow-xs); }
}

/* ---- 6. Responsive and motion ---- */
@media (max-width: 479.98px) {
  .d2-vis { font-size: 12px; }
  .d2-hp__grid, .d2-ca__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .d2-os-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .d2-nest__vms { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  .d2-vm { padding: 10px 4px; }
  .d2-sec { grid-template-columns: minmax(0, 1fr); }
  .d2-sec__shield { grid-row: auto; }
  .d2-ca { grid-template-columns: 40px minmax(0, 1fr); }
  .d2-dns__row { grid-template-columns: 58px 40px minmax(0, 1fr); gap: 6px; }
  .d2-mac { grid-template-columns: 40px minmax(0, 1fr); }
  .d2-win__title, .d2-win__url { padding-inline-end: 0; margin-inline-end: 0; }
  .d2-panel__actions .d2-ui-btn { padding: 0 9px; }
  .d2-term { font-size: 11px; padding: 12px 12px 14px; }
}
@keyframes d2-blink { 50% { opacity: 0; } }
@keyframes d2-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }
@keyframes d2-eq { from { transform: scaleY(.35); } to { transform: scaleY(1); } }
@keyframes d2-flow { from { inset-inline-start: 0; opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } to { inset-inline-start: calc(100% - 10px); opacity: 0; } }
@keyframes d2-packet { 0%, 100% { transform: translateX(0); opacity: .75; } 50% { transform: translateX(4px); opacity: 1; } }
@keyframes d2-halo { from { transform: scale(.6); opacity: .9; } to { transform: scale(1.6); opacity: 0; } }
@keyframes d2-dash { to { stroke-dashoffset: -22; } }
.d2-eq i { transform-origin: bottom; }
@media (prefers-reduced-motion: reduce) {
  .d2-vis *, .d2-vis *::before, .d2-vis *::after, .d2-float { animation: none !important; }
}
@media (forced-colors: active) {
  .d2-stage::before { display: none; }
}


/* ===== part: docs.css ===== */
/* page: docs — HyperDC Docs (KB1): /guides home, sections, articles, search, topics; client-area guides; docs-guides block.
   Tokens only (light/dark), logical properties (RTL). Code blocks are always dark (night tokens), like core <pre>. */

/* ---------- shell ---------- */
.hdc-docs { --hdc-docs-side: 248px; --hdc-docs-toc: 224px; --hdc-docs-measure: 46rem; /* article column: ~72ch of 17px prose */ --hdc-docs-sticky: calc(var(--hdc-header-h) + var(--hdc-topbar-h) + 1.25rem); padding-block-end: clamp(2rem, 5vw, 4rem); }
.hdc-docs a:not(.hdc-btn) { text-underline-offset: 3px; }
.hdc-docs h1, .hdc-docs h2, .hdc-docs h3 { color: var(--hdc-heading); }
.hdc-docs-narrow { max-width: 820px; padding-block-start: clamp(2rem, 5vw, 3.5rem); }
.hdc-docs-body { display: grid; gap: clamp(2rem, 4vw, 3.25rem); padding-block-start: clamp(1.5rem, 3vw, 2.5rem); }
.hdc-docs-block { display: grid; gap: 1rem; align-content: start; min-width: 0; }
.hdc-docs-block__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .5rem 1rem; }
.hdc-docs-block__head h2, .hdc-docs-block > h2, .hdc-docs-related > h2 { display: inline-flex; align-items: center; gap: .5rem; margin: 0; font-size: var(--hdc-fs-h3); }
.hdc-docs-block__head h2 .hdc-i { color: var(--hdc-primary); }
.hdc-docs-block__note, .hdc-docs-hint { margin: 0; color: var(--hdc-text-3); font-size: var(--hdc-fs-sm); }
.hdc-docs-block__link, .hdc-docs-feed { display: inline-flex; align-items: center; gap: .35rem; font-size: var(--hdc-fs-sm); font-weight: 600; }
/* single-column grids: a long code line or the search box must never widen the track (min-content) past the screen */
.hdc-docs-body, .hdc-docs-block, .hdc-docs-hero__inner, .hdc-docs-cols, .hdc-docs-cards, .hdc-docs-layout, .hdc-docs-layout__main, .hdc-docs-layout__side,
.hdc-docs-head__text, .hdc-docs-article, .hdc-docs-article__head, .hdc-docs-article__grid, .hdc-docs-article__main, .hdc-docs-steps, .hdc-docs-step__body,
.hdc-docs-faq, .hdc-docs-faq__list, .hdc-docs-pn, .hdc-docs-related, .hdc-docs-empty, .hdc-docs-promo { grid-template-columns: minmax(0, 1fr); }

/* ---------- hero ---------- */
.hdc-docs-hero {
  position: relative;
  padding-block: clamp(2.5rem, 7vw, 4.75rem) clamp(2rem, 5vw, 3.25rem);
  background:
    radial-gradient(60rem 22rem at 50% -6rem, var(--hdc-primary-soft), transparent 70%),
    linear-gradient(180deg, var(--hdc-bg-soft), var(--hdc-bg));
  border-block-end: 1px solid var(--hdc-border);
}
.hdc-docs-hero__inner { display: grid; justify-items: center; gap: 1rem; text-align: center; max-width: 900px; }
.hdc-docs-hero__eyebrow { display: inline-flex; align-items: center; gap: .4rem; margin: 0; }
.hdc-docs-hero__title { margin: 0; font-size: clamp(2rem, 1.2rem + 3.2vw, 3.25rem); letter-spacing: var(--hdc-tracking-display); line-height: var(--hdc-lh-tight); }
.hdc-docs-hero__lead { margin: 0; max-width: 62ch; color: var(--hdc-text-2); font-size: var(--hdc-fs-lg); }
.hdc-docs-hero .hdc-docs-search { width: min(100%, 720px); margin-block-start: .5rem; text-align: start; }
.hdc-docs-hero__chips { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .5rem .75rem; }
.hdc-docs-hero__chips-label { color: var(--hdc-text-3); font-size: var(--hdc-fs-sm); }

/* ---------- search box + instant results ---------- */
.hdc-docs-search {
  position: relative;
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .3rem .3rem .3rem .9rem;
  border: 1px solid var(--hdc-border-input);
  border-radius: var(--hdc-r-lg);
  background: var(--hdc-surface);
  box-shadow: var(--hdc-shadow-sm);
  transition: border-color var(--hdc-dur-2) var(--hdc-ease), box-shadow var(--hdc-dur-2) var(--hdc-ease);
}
.hdc-docs-search:focus-within { border-color: var(--hdc-primary); box-shadow: var(--hdc-focus-ring); }
.hdc-docs-search--lg { padding: .4rem .4rem .4rem 1.1rem; border-radius: var(--hdc-r-xl); box-shadow: var(--hdc-shadow-md); }
.hdc-docs-search__icon { display: inline-flex; color: var(--hdc-text-3); }
.hdc-docs-search__input {
  flex: 1 1 auto;
  width: 100%; /* percentage width: no min-content contribution, the box can shrink to 320px */
  min-width: 0;
  height: 2.5rem;
  border: 0;
  background: transparent;
  color: var(--hdc-text);
  font: inherit;
  font-size: var(--hdc-fs-md);
  outline: none;
}
.hdc-docs-search--lg .hdc-docs-search__input { height: 3rem; font-size: var(--hdc-fs-lg); }
.hdc-docs-search__input::-webkit-search-cancel-button { cursor: pointer; }
.hdc-docs-search__kbd { flex: none; }
.hdc-docs-search--md .hdc-docs-search__kbd { display: none; } /* narrow side box: the "/" shortcut still works */
.hdc-docs-search:focus-within .hdc-docs-search__kbd { display: none; }
.hdc-docs-search__btn { flex: none; }
.hdc-docs-search__btn-icon { display: none; }
/* narrow side box: an arrow button (its name stays "Search"), the text gets the room */
.hdc-docs-search--md .hdc-docs-search__btn { min-height: 2.25rem; min-width: 2.25rem; padding-inline: .55rem; font-size: var(--hdc-fs-sm); }
.hdc-docs-search--md .hdc-docs-search__btn-icon { display: inline-block; }
.hdc-docs-search--md .hdc-docs-search__btn-text { display: none; }
.hdc-docs-search__panel {
  position: absolute;
  inset-inline: 0;
  top: calc(100% + .4rem);
  z-index: 40;
  max-height: min(70vh, 520px);
  overflow-y: auto;
  padding: .4rem;
  border: 1px solid var(--hdc-border);
  border-radius: var(--hdc-r-lg);
  background: var(--hdc-surface-raised);
  box-shadow: var(--hdc-shadow-lg);
  text-align: start;
}
.hdc-docs-search__group { padding: .5rem .6rem .25rem; color: var(--hdc-text-3); font-size: var(--hdc-fs-xs); font-weight: 600; letter-spacing: var(--hdc-tracking-label); text-transform: uppercase; }
.hdc-docs-search__opt {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: .15rem .65rem;
  align-items: start;
  padding: .55rem .6rem;
  border-radius: var(--hdc-r-md);
  color: var(--hdc-text);
  text-decoration: none;
  cursor: pointer;
}
.hdc-docs-search__opt:hover, .hdc-docs-search__opt.is-active { background: var(--hdc-primary-soft); }
.hdc-docs-search__opt .hdc-i { margin-block-start: .2rem; color: var(--hdc-primary); }
.hdc-docs-search__opt-title { color: var(--hdc-heading); font-weight: 600; }
.hdc-docs-search__opt-meta { grid-column: 2; color: var(--hdc-text-3); font-size: var(--hdc-fs-sm); }
.hdc-docs-search__opt-snippet { grid-column: 2; color: var(--hdc-text-2); font-size: var(--hdc-fs-sm); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.hdc-docs-search__opt--all { grid-template-columns: auto 1fr; color: var(--hdc-primary-text); font-weight: 600; }
.hdc-docs-search__empty { margin: 0; padding: .75rem .6rem; color: var(--hdc-text-2); font-size: var(--hdc-fs-sm); }
.hdc-docs mark, .hdc-docs-search mark { padding: 0 .1em; border-radius: var(--hdc-r-xs); background: var(--hdc-warning-soft); color: inherit; }

/* ---------- chips, levels, badges ---------- */
.hdc-docs-chips { display: flex; flex-wrap: wrap; gap: .45rem; margin: 0; padding: 0; list-style: none; }
.hdc-docs-chip {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  min-height: 2rem;
  padding: .25rem .75rem;
  border: 1px solid var(--hdc-border);
  border-radius: var(--hdc-r-pill);
  background: var(--hdc-surface);
  color: var(--hdc-text);
  font-size: var(--hdc-fs-sm);
  text-decoration: none;
  transition: border-color var(--hdc-dur-1), background var(--hdc-dur-1), color var(--hdc-dur-1);
}
.hdc-docs-chip:hover { border-color: var(--hdc-primary); color: var(--hdc-primary-text); }
.hdc-docs-chip.is-current { border-color: var(--hdc-primary); background: var(--hdc-primary-soft); color: var(--hdc-primary-text); font-weight: 600; }
.hdc-docs-chip__count { padding: 0 .4rem; border-radius: var(--hdc-r-pill); background: var(--hdc-bg-muted); color: var(--hdc-text-2); font-size: var(--hdc-fs-xs); font-variant-numeric: tabular-nums; }
.hdc-docs-chips--sm .hdc-docs-chip { min-height: 1.75rem; padding: .15rem .6rem; font-size: var(--hdc-fs-xs); }
.hdc-docs-chips--cloud { gap: .6rem; }
.hdc-docs-level { display: inline-flex; align-items: center; padding: .1rem .55rem; border-radius: var(--hdc-r-pill); font-size: var(--hdc-fs-xs); font-weight: 600; }
.hdc-docs-level--beginner { background: var(--hdc-success-soft); color: var(--hdc-success-text); }
.hdc-docs-level--intermediate { background: var(--hdc-warning-soft); color: var(--hdc-warning-text); }
.hdc-docs-level--advanced { background: var(--hdc-danger-soft); color: var(--hdc-danger-text); }
.hdc-docs-access { display: inline-flex; align-items: center; gap: .3rem; padding: .1rem .55rem; border-radius: var(--hdc-r-pill); background: var(--hdc-warning-soft); color: var(--hdc-warning-text); font-size: var(--hdc-fs-xs); font-weight: 600; }

/* ---------- sections grid (home) ---------- */
.hdc-docs-sections { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 1rem; margin: 0; padding: 0; list-style: none; }
@media (min-width: 1680px) { .hdc-docs-sections { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.25rem; } } /* wide screens (WD1): even rows of 4 */
.hdc-docs-section { display: flex; flex-direction: column; gap: .85rem; padding: 1.25rem; }
.hdc-docs-section__head { display: flex; align-items: center; gap: .85rem; }
.hdc-docs-section__title { margin: 0; font-size: var(--hdc-fs-lg); }
.hdc-docs-section__title a { color: inherit; text-decoration: none; }
.hdc-docs-section__title a:hover { color: var(--hdc-primary-text); }
.hdc-docs-section__count { margin: 0; color: var(--hdc-text-3); font-size: var(--hdc-fs-sm); }
.hdc-docs-section__desc { margin: 0; color: var(--hdc-text-2); font-size: var(--hdc-fs-sm); }
.hdc-docs-section__list { display: grid; gap: .1rem; margin: 0; padding: 0; list-style: none; }
.hdc-docs-section__list a { display: flex; align-items: flex-start; gap: .5rem; padding: .3rem 0; color: var(--hdc-text); font-size: var(--hdc-fs-sm); text-decoration: none; }
.hdc-docs-section__list a .hdc-i { flex: none; margin-block-start: .2rem; color: var(--hdc-text-3); }
.hdc-docs-section__list a:hover { color: var(--hdc-primary-text); }
.hdc-docs-section__more { display: inline-flex; align-items: center; gap: .35rem; margin-block-start: auto; font-size: var(--hdc-fs-sm); font-weight: 600; }
.hdc-docs-cols { display: grid; gap: clamp(1.5rem, 3vw, 2.5rem); }
@media (min-width: 960px) { .hdc-docs-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.hdc-docs-products { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); gap: .6rem; margin: 0; padding: 0; list-style: none; }
.hdc-docs-product { display: flex; align-items: center; gap: .6rem; padding: .8rem 1rem; border: 1px solid var(--hdc-border); border-radius: var(--hdc-r-md); background: var(--hdc-surface); color: var(--hdc-text); text-decoration: none; }
.hdc-docs-product:hover { border-color: var(--hdc-primary); }
.hdc-docs-product__name { flex: 1 1 auto; font-weight: 600; color: var(--hdc-heading); }
.hdc-docs-product__count { color: var(--hdc-text-3); font-size: var(--hdc-fs-xs); white-space: nowrap; }

/* ---------- article cards ---------- */
.hdc-docs-cards { display: grid; gap: .75rem; margin: 0; padding: 0; list-style: none; }
.hdc-docs-cards--grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: 1rem; }
.hdc-docs-card { min-width: 0; }
.hdc-docs-card__link {
  display: flex;
  flex-direction: column;
  gap: .45rem;
  height: 100%;
  padding: 1rem 1.1rem;
  border: 1px solid var(--hdc-border);
  border-radius: var(--hdc-r-lg);
  background: var(--hdc-surface);
  color: var(--hdc-text);
  text-decoration: none;
  transition: border-color var(--hdc-dur-2) var(--hdc-ease), box-shadow var(--hdc-dur-2) var(--hdc-ease), transform var(--hdc-dur-2) var(--hdc-ease);
}
.hdc-docs-card__link:hover { border-color: var(--hdc-primary); box-shadow: var(--hdc-shadow-md); }
.hdc-docs-card__link:focus-visible { outline: none; box-shadow: var(--hdc-focus-ring); }
.hdc-docs-card__meta { display: inline-flex; align-items: center; gap: .35rem; color: var(--hdc-text-3); font-size: var(--hdc-fs-xs); font-weight: 600; letter-spacing: .01em; }
.hdc-docs-card__title { color: var(--hdc-heading); font-size: var(--hdc-fs-md); font-weight: 650; line-height: var(--hdc-lh-heading); }
.hdc-docs-card__link:hover .hdc-docs-card__title { color: var(--hdc-primary-text); }
.hdc-docs-card__summary, .hdc-docs-card__snippet { color: var(--hdc-text-2); font-size: var(--hdc-fs-sm); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.hdc-docs-card__foot { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .85rem; margin-block-start: auto; padding-block-start: .3rem; color: var(--hdc-text-3); font-size: var(--hdc-fs-xs); }
.hdc-docs-card__fact { display: inline-flex; align-items: center; gap: .3rem; }
.hdc-docs-cards--list .hdc-docs-card__link { padding: .85rem 1rem; }
.hdc-docs-cards--results .hdc-docs-card__link { padding: 1.1rem 1.25rem; }
.hdc-docs-cards--results .hdc-docs-card__title { font-size: var(--hdc-fs-lg); }

/* ---------- two/three-column layout ---------- */
.hdc-docs-layout { display: grid; gap: clamp(1.25rem, 3vw, 2.5rem); padding-block-start: clamp(1rem, 2.5vw, 2rem); }
.hdc-docs-layout__main { display: grid; gap: 1.5rem; align-content: start; min-width: 0; }
.hdc-docs-layout__side { display: grid; gap: 1rem; align-content: start; min-width: 0; }
@media (min-width: 1024px) {
  .hdc-docs-layout { grid-template-columns: var(--hdc-docs-side) minmax(0, 1fr); }
  .hdc-docs-layout__side { position: sticky; top: var(--hdc-docs-sticky); max-height: calc(100vh - var(--hdc-docs-sticky) - 1rem); overflow-y: auto; padding-inline-end: .25rem; scrollbar-width: thin; }
}
.hdc-docs-nav__box { border: 1px solid var(--hdc-border); border-radius: var(--hdc-r-lg); background: var(--hdc-surface); }
.hdc-docs-nav__summary { display: flex; align-items: center; gap: .5rem; padding: .75rem 1rem; font-weight: 600; color: var(--hdc-heading); cursor: pointer; list-style: none; }
.hdc-docs-nav__summary::-webkit-details-marker { display: none; }
.hdc-docs-nav__list { display: grid; gap: .1rem; margin: 0; padding: .35rem; list-style: none; }
@media (min-width: 1024px) {
  .hdc-docs-nav__box { border: 0; background: none; }
  .hdc-docs-nav__summary { display: none; }
  .hdc-docs-nav__list { padding: 0; }
}
.hdc-docs-nav__link { display: flex; align-items: center; gap: .55rem; padding: .5rem .65rem; border-radius: var(--hdc-r-md); color: var(--hdc-text-2); font-size: var(--hdc-fs-sm); text-decoration: none; }
.hdc-docs-nav__link span:first-of-type { flex: 1 1 auto; }
.hdc-docs-nav__link:hover { background: var(--hdc-surface-hover); color: var(--hdc-heading); }
.hdc-docs-nav__link.is-current { background: var(--hdc-primary-soft); color: var(--hdc-primary-text); font-weight: 600; }
.hdc-docs-nav__count { color: var(--hdc-text-3); font-size: var(--hdc-fs-xs); font-variant-numeric: tabular-nums; }

/* ---------- breadcrumbs, page head ---------- */
.hdc-docs-crumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem .4rem; margin: 0; padding: 0; list-style: none; font-size: var(--hdc-fs-sm); }
.hdc-docs-crumbs li { display: inline-flex; align-items: center; gap: .4rem; min-width: 0; color: var(--hdc-text-3); }
.hdc-docs-crumbs a { color: var(--hdc-text-2); text-decoration: none; }
.hdc-docs-crumbs a:hover { color: var(--hdc-primary-text); text-decoration: underline; }
.hdc-docs-crumbs [aria-current] { color: var(--hdc-text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 36ch; }
.hdc-docs-head { display: flex; align-items: flex-start; gap: 1rem; }
.hdc-docs-head__icon { flex: none; }
.hdc-docs-head__text { display: grid; gap: .4rem; min-width: 0; }
.hdc-docs-head__text .hdc-eyebrow { margin: 0; }
.hdc-docs-head__title { margin: 0; font-size: clamp(1.75rem, 1.2rem + 2vw, 2.4rem); line-height: var(--hdc-lh-tight); letter-spacing: var(--hdc-tracking-heading); }
.hdc-docs-head__lead { margin: 0; max-width: 70ch; color: var(--hdc-text-2); font-size: var(--hdc-fs-md); }
.hdc-docs-head__meta { margin: 0; color: var(--hdc-text-3); font-size: var(--hdc-fs-sm); }
.hdc-docs-filterbar { overflow-x: auto; padding-block-end: .15rem; }

/* ---------- article ---------- */
.hdc-docs-article { display: grid; gap: 1.25rem; min-width: 0; }
.hdc-docs-article__head { display: grid; gap: .75rem; padding-block-end: 1.25rem; border-block-end: 1px solid var(--hdc-border); }
.hdc-docs-article__eyebrow { margin: 0; }
.hdc-docs-article__eyebrow a { color: inherit; text-decoration: none; }
.hdc-docs-article__eyebrow a:hover { text-decoration: underline; }
.hdc-docs-article__title { margin: 0; font-size: clamp(1.9rem, 1.2rem + 2.6vw, 2.75rem); line-height: var(--hdc-lh-tight); letter-spacing: var(--hdc-tracking-heading); }
.hdc-docs-article__lead { margin: 0; max-width: 70ch; color: var(--hdc-text-2); font-size: var(--hdc-fs-lg); }
.hdc-docs-facts { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1.1rem; margin: 0; padding: 0; list-style: none; color: var(--hdc-text-2); font-size: var(--hdc-fs-sm); }
.hdc-docs-facts li { display: inline-flex; align-items: center; gap: .35rem; }
.hdc-docs-facts .hdc-i { color: var(--hdc-text-3); }
.hdc-docs-tested { display: flex; align-items: flex-start; gap: .45rem; margin: 0; color: var(--hdc-text-2); font-size: var(--hdc-fs-sm); }
.hdc-docs-tested .hdc-i { flex: none; margin-block-start: .2rem; color: var(--hdc-success); }
.hdc-docs-actions { display: flex; flex-wrap: wrap; gap: .5rem; }
.hdc-docs-preview, .hdc-docs-untranslated { display: flex; align-items: center; gap: .5rem; margin: 0; }
.hdc-docs-article__grid { display: grid; grid-template-columns: minmax(0, var(--hdc-docs-measure)); gap: 2rem; min-width: 0; } /* readable line length below 1280px too */
.hdc-docs-article__main { display: grid; gap: 2rem; align-content: start; min-width: 0; }
.hdc-docs-article__aside { display: none; }
@media (min-width: 1280px) {
  .hdc-docs-article__grid { grid-template-columns: minmax(0, var(--hdc-docs-measure)) var(--hdc-docs-toc); gap: 2.5rem; }
  /* sidebar | article | TOC stay together: on wide screens (WD1 container up to 1840px) the article page is as wide as
     its three columns and centred, instead of stretching the line length or the gap before the TOC */
  .hdc-docs-layout--article { max-width: calc(var(--hdc-docs-side) + var(--hdc-docs-measure) + var(--hdc-docs-toc) + 5rem + var(--hdc-gutter) * 2); }
  .hdc-docs-article__aside { display: grid; gap: 1.25rem; align-content: start; position: sticky; top: var(--hdc-docs-sticky); max-height: calc(100vh - var(--hdc-docs-sticky) - 1rem); overflow-y: auto; scrollbar-width: thin; }
  .hdc-docs-toc--inline { display: none; }
}

/* table of contents */
.hdc-docs-toc__title { margin: 0 0 .5rem; color: var(--hdc-text-3); font-size: var(--hdc-fs-xs); font-weight: 700; letter-spacing: var(--hdc-tracking-label); text-transform: uppercase; }
.hdc-docs-toc__list { display: grid; gap: .1rem; margin: 0; padding: 0; list-style: none; border-inline-start: 2px solid var(--hdc-border); }
.hdc-docs-toc__item a { display: block; margin-inline-start: -2px; padding: .3rem .75rem; border-inline-start: 2px solid transparent; color: var(--hdc-text-2); font-size: var(--hdc-fs-sm); line-height: 1.35; text-decoration: none; }
.hdc-docs-toc__item--3 a { padding-inline-start: 1.5rem; font-size: var(--hdc-fs-xs); }
.hdc-docs-toc__item a:hover { color: var(--hdc-heading); }
.hdc-docs-toc__item a.is-active { border-inline-start-color: var(--hdc-primary); color: var(--hdc-primary-text); font-weight: 600; }
.hdc-docs-toc--inline { border: 1px solid var(--hdc-border); border-radius: var(--hdc-r-lg); background: var(--hdc-bg-soft); }
.hdc-docs-toc--inline > summary { display: flex; align-items: center; gap: .5rem; padding: .75rem 1rem; color: var(--hdc-heading); font-weight: 600; cursor: pointer; }
.hdc-docs-toc--inline .hdc-docs-toc__list { margin: 0 1rem 1rem; }
.hdc-docs-box { padding: 1rem; border: 1px solid var(--hdc-border); border-radius: var(--hdc-r-lg); background: var(--hdc-surface); }
.hdc-docs-box__title { margin: 0 0 .5rem; color: var(--hdc-text-3); font-size: var(--hdc-fs-xs); font-weight: 700; letter-spacing: var(--hdc-tracking-label); text-transform: uppercase; }
.hdc-docs-box__list { display: grid; gap: .2rem; margin: 0; padding: 0; list-style: none; }
.hdc-docs-box__list a { display: flex; align-items: center; gap: .45rem; padding: .3rem 0; font-size: var(--hdc-fs-sm); text-decoration: none; }
.hdc-docs-box__list a:hover span { text-decoration: underline; }

/* ---------- article body (renderer output) ---------- */
.hdc-docs-prose { max-width: none; font-size: var(--hdc-fs-md); }
.hdc-docs-prose > :first-child { margin-top: 0; }
.hdc-docs-prose :is(h2, h3, h4) { position: relative; scroll-margin-top: var(--hdc-docs-sticky); }
.hdc-docs-prose h2 { padding-block-start: .5rem; }
.hdc-docs-anchor { display: inline-flex; margin-inline-start: .4rem; color: var(--hdc-text-3); opacity: 0; vertical-align: middle; text-decoration: none !important; transition: opacity var(--hdc-dur-1); }
.hdc-docs-prose :is(h2, h3, h4):hover .hdc-docs-anchor, .hdc-docs-anchor:focus-visible { opacity: 1; }
.hdc-docs-prose :not(pre) > code { padding: .1em .38em; border: 1px solid var(--hdc-border); border-radius: var(--hdc-r-xs); background: var(--hdc-bg-soft); font-size: .88em; word-break: break-word; }
.hdc-docs-prose a.hdc-docs-ext::after { content: "\2197"; margin-inline-start: .15em; font-size: .8em; text-decoration: none; display: inline-block; }
.hdc-docs-prose img { max-width: 100%; height: auto; }
.hdc-docs-figure { margin-inline: 0; }
.hdc-docs-figure figcaption { margin-block-start: .5rem; color: var(--hdc-text-3); font-size: var(--hdc-fs-sm); text-align: center; }
/* KB3 screenshots (img/docs/…): framed like a window, the image links to the full-size file */
.hdc-docs-figure--screen { margin-block: 1.5rem; }
.hdc-docs-figure__zoom { display: block; overflow: hidden; border: 1px solid var(--hdc-border); border-radius: var(--hdc-r-lg); background: var(--hdc-surface); box-shadow: var(--hdc-shadow-sm); cursor: zoom-in; text-decoration: none !important; transition: border-color var(--hdc-dur-1), box-shadow var(--hdc-dur-1); }
.hdc-docs-figure__zoom:hover { border-color: var(--hdc-border-strong); box-shadow: var(--hdc-shadow-md); }
.hdc-docs-figure__zoom:focus-visible { outline: 2px solid var(--hdc-primary); outline-offset: 3px; }
.hdc-docs-figure__zoom img { display: block; width: 100%; max-width: 100%; height: auto; }
.hdc-docs-figure--screen figcaption { text-align: start; text-wrap: pretty; }
:root[data-theme="dark"] .hdc-docs-figure__zoom { border-color: var(--hdc-border-strong); }
@media print { .hdc-docs-figure--screen { break-inside: avoid; } .hdc-docs-figure__zoom { box-shadow: none; } }
.hdc-docs-missing-link { color: var(--hdc-text-2); }
.hdc-docs-tasks { padding-inline-start: .25rem !important; list-style: none; }
.hdc-docs-tasks input { margin-inline-end: .4rem; accent-color: var(--hdc-primary); }
.hdc-docs-prereq { padding: 1.1rem 1.25rem; border: 1px solid var(--hdc-border); border-radius: var(--hdc-r-lg); background: var(--hdc-bg-soft); }
.hdc-docs-prereq > h2 { margin-top: 0; padding-block-start: 0; font-size: var(--hdc-fs-lg); }
.hdc-docs-prereq > * + * { margin-top: .75em; }

/* code blocks — always dark */
.hdc-docs-code {
  /* code palette: the block is dark in both colour modes, so these few tones are fixed (AA on night-900) */
  --hdc-code-fg: #dbe5f1;
  --hdc-code-str: #a5d6a7;
  --hdc-code-kw: #c4a7ff;
  --hdc-code-opt: #f5b97a;
  --hdc-code-tag: #f28b8b;
  margin-inline: 0;
  overflow: hidden;
  border: 1px solid var(--hdc-night-700);
  border-radius: var(--hdc-r-md);
  background: var(--hdc-night-900);
}
.hdc-docs-code__bar { display: flex; align-items: center; gap: .75rem; min-height: 2.4rem; padding: .25rem .4rem .25rem .9rem; border-block-end: 1px solid var(--hdc-night-700); background: var(--hdc-night-850); color: var(--hdc-gray-400); font-size: var(--hdc-fs-xs); }
.hdc-docs-code__lang { font-weight: 700; letter-spacing: var(--hdc-tracking-label); text-transform: uppercase; }
.hdc-docs-code__title { flex: 1 1 auto; min-width: 0; overflow: hidden; color: var(--hdc-gray-300); font-family: var(--hdc-font-mono); text-overflow: ellipsis; white-space: nowrap; }
.hdc-docs-code__copy { display: inline-flex; align-items: center; gap: .35rem; margin-inline-start: auto; padding: .3rem .6rem; border: 1px solid var(--hdc-night-600); border-radius: var(--hdc-r-sm); background: transparent; color: var(--hdc-gray-300); font: inherit; font-size: var(--hdc-fs-xs); cursor: pointer; }
.hdc-docs-code__copy:hover { border-color: var(--hdc-gray-400); color: var(--hdc-gray-0); }
.hdc-docs-code__copy:focus-visible { outline: 2px solid var(--hdc-cyan-400); outline-offset: 2px; }
.hdc-docs-code__copy.is-done { border-color: var(--hdc-green-500); color: var(--hdc-green-500); }
.hdc-docs-code__pre { margin: 0 !important; border-radius: 0 !important; background: transparent !important; font-size: .875rem; line-height: 1.6; tab-size: 4; }
.hdc-docs-code__pre:focus-visible { outline: 2px solid var(--hdc-cyan-400); outline-offset: -2px; }
.hdc-docs-code code { color: var(--hdc-code-fg); white-space: pre; }
.hdc-docs-code .tok-c { color: var(--hdc-gray-400); font-style: italic; }
.hdc-docs-code .tok-s { color: var(--hdc-code-str); }
.hdc-docs-code .tok-n { color: var(--hdc-amber-500); }
.hdc-docs-code .tok-k { color: var(--hdc-code-kw); }
.hdc-docs-code .tok-v { color: var(--hdc-cyan-400); }
.hdc-docs-code .tok-f { color: var(--hdc-blue-300); }
.hdc-docs-code .tok-o { color: var(--hdc-code-opt); }
.hdc-docs-code .tok-p { color: var(--hdc-blue-200); }
.hdc-docs-code .tok-t { color: var(--hdc-code-tag); }
.hdc-docs-code .tok-m { color: var(--hdc-gray-300); }
.hdc-docs-code .tok-ins { color: var(--hdc-code-str); }
.hdc-docs-code .tok-del { color: var(--hdc-code-tag); }
.hdc-docs-code .tok-prompt { color: var(--hdc-gray-500); user-select: none; -webkit-user-select: none; }
.hdc-docs-code .tok-out { color: var(--hdc-gray-400); }

/* callouts */
.hdc-docs-callout { --hdc-co: var(--hdc-info); --hdc-co-bg: var(--hdc-info-soft); --hdc-co-fg: var(--hdc-info-text); margin-inline: 0; padding: .9rem 1.1rem; border: 1px solid var(--hdc-border); border-inline-start: 4px solid var(--hdc-co); border-radius: var(--hdc-r-md); background: var(--hdc-co-bg); }
.hdc-docs-callout--tip, .hdc-docs-callout--success { --hdc-co: var(--hdc-success); --hdc-co-bg: var(--hdc-success-soft); --hdc-co-fg: var(--hdc-success-text); }
.hdc-docs-callout--warning { --hdc-co: var(--hdc-warning); --hdc-co-bg: var(--hdc-warning-soft); --hdc-co-fg: var(--hdc-warning-text); }
.hdc-docs-callout--danger { --hdc-co: var(--hdc-danger); --hdc-co-bg: var(--hdc-danger-soft); --hdc-co-fg: var(--hdc-danger-text); }
.hdc-docs-callout__title { display: flex; align-items: center; gap: .45rem; margin: 0 0 .35rem; color: var(--hdc-co-fg); font-weight: 700; }
.hdc-docs-callout__body > :first-child { margin-top: 0; }
.hdc-docs-callout__body > * + * { margin-top: .75em; }
.hdc-docs-callout__body :last-child { margin-bottom: 0; }

/* tabs: stacked panels without JavaScript, a tab list with it (js/hdc-docs.js adds .is-enhanced) */
.hdc-docs-tabs { border: 1px solid var(--hdc-border); border-radius: var(--hdc-r-lg); background: var(--hdc-surface); overflow: hidden; }
.hdc-docs-tabs__panel { padding: 1rem 1.1rem; }
.hdc-docs-tabs__panel + .hdc-docs-tabs__panel { border-block-start: 1px solid var(--hdc-border); }
.hdc-docs-tabs__panel > * + * { margin-top: .9em; }
.hdc-docs-tabs__label { margin: 0; color: var(--hdc-heading); font-weight: 700; }
.hdc-docs-tabs__list { display: flex; gap: .25rem; overflow-x: auto; padding: .4rem .4rem 0; border-block-end: 1px solid var(--hdc-border); background: var(--hdc-bg-soft); scrollbar-width: thin; }
.hdc-docs-tabs__tab { flex: none; padding: .55rem .9rem; border: 0; border-block-end: 2px solid transparent; background: none; color: var(--hdc-text-2); font: inherit; font-size: var(--hdc-fs-sm); font-weight: 600; cursor: pointer; }
.hdc-docs-tabs__tab:hover { color: var(--hdc-heading); }
.hdc-docs-tabs__tab[aria-selected="true"] { border-block-end-color: var(--hdc-primary); color: var(--hdc-primary-text); }
.hdc-docs-tabs__tab:focus-visible { outline: none; box-shadow: var(--hdc-focus-ring); border-radius: var(--hdc-r-sm); }
.hdc-docs-tabs.is-enhanced .hdc-docs-tabs__label { display: none; }
.hdc-docs-tabs.is-enhanced .hdc-docs-tabs__panel + .hdc-docs-tabs__panel { border-block-start: 0; }
.hdc-docs-tabs.is-enhanced .hdc-docs-tabs__panel[hidden] { display: none; }

/* steps */
.hdc-docs-steps { position: relative; display: grid; gap: 1.5rem; padding: 0 !important; list-style: none; counter-reset: none; }
.hdc-docs-step { position: relative; display: grid; grid-template-columns: 2.25rem minmax(0, 1fr); gap: 1rem; }
.hdc-docs-step + .hdc-docs-step { margin-top: 0 !important; }
.hdc-docs-step::before { content: ""; position: absolute; inset-block: 2.6rem -1.5rem; inset-inline-start: 1.06rem; width: 2px; background: var(--hdc-border); }
.hdc-docs-step:last-child::before { display: none; }
.hdc-docs-step__num { position: relative; z-index: 1; display: inline-grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: 50%; background: var(--hdc-primary); color: var(--hdc-on-primary); font-weight: 700; font-variant-numeric: tabular-nums; }
.hdc-docs-step__body { display: grid; gap: .75rem; min-width: 0; }
.hdc-docs-step__body > * { margin: 0 !important; }
.hdc-docs-step__title { padding-block-start: .3rem; font-size: var(--hdc-fs-lg) !important; }

/* details, tables */
.hdc-docs-details { border: 1px solid var(--hdc-border); border-radius: var(--hdc-r-md); background: var(--hdc-surface); }
.hdc-docs-details > summary { padding: .75rem 1rem; color: var(--hdc-heading); font-weight: 600; cursor: pointer; }
.hdc-docs-details__body { padding: 0 1rem 1rem; }
.hdc-docs-details__body > * + * { margin-top: .75em; }
.hdc-docs-table { max-width: 100%; overflow-x: auto; border: 1px solid var(--hdc-border); border-radius: var(--hdc-r-md); }
.hdc-docs-table:focus-visible { outline: none; box-shadow: var(--hdc-focus-ring); }
.hdc-docs-table table { min-width: 100%; margin: 0; border: 0; }
.hdc-docs-table th, .hdc-docs-table td { border-width: 0 0 1px; }
.hdc-docs-table tr:last-child td { border-bottom: 0; }
.hdc-docs-table .is-center { text-align: center; }
.hdc-docs-table .is-end { text-align: end; }

/* ---------- FAQ, feedback, tags, previous / next, related ---------- */
.hdc-docs-faq { display: grid; gap: .75rem; }
.hdc-docs-faq > h2 { margin: 0; font-size: var(--hdc-fs-h3); scroll-margin-top: var(--hdc-docs-sticky); }
.hdc-docs-faq__list { display: grid; gap: .5rem; }
.hdc-docs-faq__item { border: 1px solid var(--hdc-border); border-radius: var(--hdc-r-md); background: var(--hdc-surface); }
.hdc-docs-faq__item > summary { position: relative; padding: .9rem 2.75rem .9rem 1.1rem; color: var(--hdc-heading); font-weight: 600; cursor: pointer; list-style: none; }
.hdc-docs-faq__item > summary::-webkit-details-marker { display: none; }
.hdc-docs-faq__item > summary::after { content: "+"; position: absolute; inset-inline-end: 1.1rem; top: 50%; transform: translateY(-50%); color: var(--hdc-primary); font-size: 1.25rem; line-height: 1; }
.hdc-docs-faq__item[open] > summary::after { content: "\2212"; }
.hdc-docs-faq__item > .hdc-prose { padding: 0 1.1rem 1rem; max-width: none; font-size: var(--hdc-fs-base); }
.hdc-docs-sources { display: grid; gap: .5rem; }
.hdc-docs-sources__title { margin: 0; color: var(--hdc-text-3); font-size: var(--hdc-fs-xs); font-weight: 700; letter-spacing: var(--hdc-tracking-label); text-transform: uppercase; }
.hdc-docs-sources__list { display: grid; gap: .3rem; margin: 0; padding: 0; list-style: none; }
.hdc-docs-sources__list a { display: inline-flex; align-items: baseline; gap: .4rem; min-width: 0; color: var(--hdc-text-2); font-size: var(--hdc-fs-sm); overflow-wrap: anywhere; }
.hdc-docs-sources__list a:hover { color: var(--hdc-primary-text); }
.hdc-docs-sources__list .hdc-i { flex: none; align-self: center; }
.hdc-docs-feedback { display: grid; gap: .9rem; padding: 1.1rem 1.25rem; border: 1px solid var(--hdc-border); border-radius: var(--hdc-r-lg); background: var(--hdc-bg-soft); }
.hdc-docs-feedback__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem; }
.hdc-docs-feedback__q { margin: 0; color: var(--hdc-heading); font-weight: 600; }
.hdc-docs-feedback__more { display: grid; gap: .5rem; }
.hdc-docs-feedback__thanks { display: flex; align-items: center; gap: .5rem; margin: 0; color: var(--hdc-success-text); font-weight: 600; }
.hdc-docs-feedback__error { margin: 0; color: var(--hdc-danger-text); }
.hdc-docs-feedback button[aria-pressed="true"] { border-color: var(--hdc-primary); background: var(--hdc-primary-soft); color: var(--hdc-primary-text); }
.hdc-docs-pn { display: grid; gap: .75rem; }
@media (min-width: 640px) { .hdc-docs-pn { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.hdc-docs-pn__link { display: grid; gap: .25rem; padding: .9rem 1.1rem; border: 1px solid var(--hdc-border); border-radius: var(--hdc-r-md); background: var(--hdc-surface); text-decoration: none; }
.hdc-docs-pn__link:hover { border-color: var(--hdc-primary); }
.hdc-docs-pn__link--next { text-align: end; justify-items: end; }
@media (min-width: 640px) { .hdc-docs-pn__link--next:only-child { grid-column: 2; } }
.hdc-docs-pn__dir { display: inline-flex; align-items: center; gap: .35rem; color: var(--hdc-text-3); font-size: var(--hdc-fs-xs); font-weight: 600; }
.hdc-docs-pn__title { color: var(--hdc-heading); font-weight: 600; }
.hdc-docs-related { display: grid; gap: 1rem; padding-block-start: clamp(2rem, 4vw, 3rem); }

/* ---------- search page, empty states, pager ---------- */
.hdc-docs-filters { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .75rem 1rem; }
.hdc-docs-filters__field { flex: 1 1 160px; margin: 0; }
.hdc-docs-filters__actions { display: flex; flex-wrap: wrap; gap: .5rem; }
.hdc-docs-dym { display: flex; align-items: center; gap: .45rem; margin: 0; color: var(--hdc-text-2); }
.hdc-docs-empty { display: grid; justify-items: center; gap: .75rem; padding: clamp(1.75rem, 5vw, 3rem) 1.25rem; text-align: center; }
.hdc-docs-empty h1, .hdc-docs-empty h2 { margin: 0; font-size: var(--hdc-fs-h3); }
.hdc-docs-empty p { margin: 0; max-width: 56ch; color: var(--hdc-text-2); }
.hdc-docs-404 h1 { font-size: clamp(1.75rem, 1.2rem + 2vw, 2.4rem); }
.hdc-docs-404 .hdc-docs-search { width: min(100%, 640px); text-align: start; }
.hdc-docs-404__links { justify-content: center; margin-block-start: 1.5rem; }
.hdc-docs-pager { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .5rem; }
.hdc-docs-pager__list { display: flex; gap: .25rem; margin: 0; padding: 0; list-style: none; }
.hdc-docs-pager__item { display: inline-grid; place-items: center; min-width: 2.25rem; height: 2.25rem; padding-inline: .5rem; border-radius: var(--hdc-r-md); color: var(--hdc-text-2); text-decoration: none; font-variant-numeric: tabular-nums; }
.hdc-docs-pager__item:hover { background: var(--hdc-surface-hover); }
.hdc-docs-pager__item.is-current { background: var(--hdc-primary); color: var(--hdc-on-primary); font-weight: 700; }

/* ---------- client area + help centre ---------- */
.hdc-docs-promo { display: grid; gap: .75rem; margin-block-start: 1.5rem; padding: 1.1rem 1.25rem; }
.hdc-docs-promo__head { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1rem; }
.hdc-docs-promo__head > div { flex: 1 1 220px; }
.hdc-docs-promo--client .hdc-docs-promo__head { justify-content: space-between; padding: 0; border: 0; background: none; }
.hdc-docs-promo__title { display: inline-flex; align-items: center; gap: .5rem; margin: 0; font-size: var(--hdc-fs-lg); }
.hdc-docs-promo__text { margin: .2rem 0 0; color: var(--hdc-text-2); font-size: var(--hdc-fs-sm); }
.hdc-docs-promo__list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: .4rem 1rem; margin: 0; padding: 0; list-style: none; }
.hdc-docs-promo__list a { display: flex; align-items: center; gap: .5rem; padding: .45rem .25rem; color: var(--hdc-text); font-size: var(--hdc-fs-sm); text-decoration: none; }
.hdc-docs-promo__list a span:first-of-type { flex: 1 1 auto; }
.hdc-docs-promo__list a:hover span:first-of-type { color: var(--hdc-primary-text); text-decoration: underline; }
.hdc-docs-promo__list .hdc-i { color: var(--hdc-primary); }
.hdc-docs-promo__min { color: var(--hdc-text-3); font-size: var(--hdc-fs-xs); white-space: nowrap; }

/* ---------- docs-guides block (builder pages) ---------- */
.hdc-b-docs-guides__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); gap: 1rem; margin: 0; padding: 0; list-style: none; }
.hdc-b-docs-guides__card { position: relative; display: flex; flex-direction: column; gap: .5rem; padding: 1.25rem; }
.hdc-b-docs-guides__meta { color: var(--hdc-text-3); font-size: var(--hdc-fs-xs); font-weight: 600; letter-spacing: var(--hdc-tracking-label); text-transform: uppercase; }
.hdc-b-docs-guides__title { color: var(--hdc-heading); font-size: var(--hdc-fs-md); font-weight: 650; line-height: var(--hdc-lh-heading); text-decoration: none; }
.hdc-b-docs-guides__card:hover .hdc-b-docs-guides__title { color: var(--hdc-primary-text); }
.hdc-b-docs-guides__summary { margin: 0; color: var(--hdc-text-2); font-size: var(--hdc-fs-sm); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.hdc-b-docs-guides__foot { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .75rem; margin-block-start: auto; color: var(--hdc-text-3); font-size: var(--hdc-fs-xs); }
.hdc-b-docs-guides__more { justify-content: center; margin-block-start: 1.5rem; }

/* ---------- small screens, motion, print ---------- */
@media (max-width: 559.98px) {
  .hdc-docs-search__kbd { display: none; }
  .hdc-docs-search--lg .hdc-docs-search__input { height: 2.6rem; font-size: var(--hdc-fs-md); }
  .hdc-docs-search .hdc-docs-search__btn { padding-inline: .8rem; }
  .hdc-docs-head { flex-direction: column; gap: .6rem; }
  .hdc-docs-code__pre { font-size: .8125rem; }
  .hdc-docs-step { grid-template-columns: 1.85rem minmax(0, 1fr); gap: .75rem; }
  .hdc-docs-step__num { width: 1.85rem; height: 1.85rem; font-size: var(--hdc-fs-sm); }
  .hdc-docs-step::before { inset-inline-start: .86rem; inset-block-start: 2.2rem; }
}
@media (prefers-reduced-motion: reduce) {
  .hdc-docs-card__link, .hdc-docs-search, .hdc-docs-chip { transition: none; }
}
@media print {
  .hdc-docs-layout__side, .hdc-docs-article__aside, .hdc-docs-actions, .hdc-docs-toc, .hdc-docs-feedback, .hdc-docs-anchor, .hdc-docs-code__copy { display: none !important; }
  .hdc-docs-layout, .hdc-docs-article__grid { display: block; }
  .hdc-docs-code { border-color: #999; background: #fff; }
  .hdc-docs-code code, .hdc-docs-code .tok-c, .hdc-docs-code [class^="tok-"] { color: #000 !important; white-space: pre-wrap; }
  .hdc-docs-tabs__panel[hidden] { display: block !important; }
  .hdc-docs-tabs__label { display: block !important; }
}


/* ===== part: engage.css ===== */
/*
  SV1 Surveys & Feedback (docs/handoff/sv1.md): the survey form (block "survey", the survey page, the survey modal of
  js/hdc-engage.js), the "Feedback" button + its modal, and the "Rate this service" card of the service page.
  Tokens only (light/dark), logical properties (RTL). Modals and toasts are the shared .hdc-dialog / HDC.toast (MD1).
  Icons are bare (no tiles).
*/

/* ---------------------------------------------------------------- survey form */
.hdc-survey-wrap { position: relative; }
.hdc-survey-wrap--card { padding: clamp(1.25rem, 3vw, 2rem); }
.hdc-survey { display: flex; flex-direction: column; gap: 1.25rem; margin: 0; }
.hdc-survey__hp { position: absolute; inset-inline-start: -10000px; inline-size: 1px; block-size: 1px; overflow: hidden; }
.hdc-survey__draft { margin: 0 0 1rem; }
.hdc-survey__head { display: flex; flex-direction: column; gap: .4rem; }
.hdc-survey__title { margin: 0; font-size: var(--hdc-fs-xl); line-height: 1.25; color: var(--hdc-heading); }
.hdc-survey__intro { margin: 0; color: var(--hdc-text-2); }
.hdc-survey__list { display: flex; flex-direction: column; gap: 1.25rem; margin: 0; padding: 0; list-style: none; }
.hdc-survey__q { display: flex; flex-direction: column; gap: .5rem; min-width: 0; }
.hdc-survey__q[hidden] { display: none; }
.hdc-survey__set { min-width: 0; margin: 0; padding: 0; border: 0; display: flex; flex-direction: column; gap: .55rem; }
.hdc-survey__label { padding: 0; color: var(--hdc-heading); font-size: var(--hdc-fs-base); font-weight: 600; line-height: 1.4; }
.hdc-survey__req { margin-inline-start: .2rem; color: var(--hdc-danger); }
.hdc-survey__help { margin: 0; }
.hdc-survey__err:not([hidden]) { margin: 0; }
.hdc-survey__q.is-invalid .hdc-input { border-color: var(--hdc-danger); }
.hdc-survey__note { margin: 0; color: var(--hdc-text-3); font-size: var(--hdc-fs-xs); }
.hdc-survey__note a { color: inherit; text-decoration: underline; }
.hdc-survey__status:not([hidden]) { margin: 0; }
.hdc-survey__foot { display: flex; flex-wrap: wrap; justify-content: flex-start; gap: .5rem; }
.hdc-survey__count { color: var(--hdc-text-3); font-size: var(--hdc-fs-xs); text-align: end; }

/* stars: radios hidden but focusable; JS sets [data-value] (and :has() covers no-JS browsers) */
.hdc-survey__stars { display: flex; flex-wrap: wrap; gap: .15rem; }
.hdc-survey__star { position: relative; display: inline-flex; padding: .2rem; border-radius: var(--hdc-r-sm); color: var(--hdc-text-3); cursor: pointer; line-height: 0; }
.hdc-survey__star-icon { width: 32px; height: 32px; }
.hdc-survey__star:focus-within { box-shadow: var(--hdc-focus-ring); }
.hdc-survey__star:hover { color: var(--hdc-warning); }
.hdc-survey__stars[data-value="1"] .hdc-survey__star:nth-child(-n+1),
.hdc-survey__stars[data-value="2"] .hdc-survey__star:nth-child(-n+2),
.hdc-survey__stars[data-value="3"] .hdc-survey__star:nth-child(-n+3),
.hdc-survey__stars[data-value="4"] .hdc-survey__star:nth-child(-n+4),
.hdc-survey__stars[data-value="5"] .hdc-survey__star:nth-child(-n+5),
.hdc-survey__star:has(input:checked) { color: var(--hdc-warning); }
.hdc-survey__stars--sm .hdc-survey__star-icon { width: 22px; height: 22px; }

/* number pills (rating 1–5, NPS 0–10, yes/no) */
.hdc-survey__pills { display: grid; grid-template-columns: repeat(5, minmax(0, 3.25rem)); gap: .4rem; }
.hdc-survey__pills--nps { grid-template-columns: repeat(11, minmax(0, 1fr)); max-width: 40rem; }
.hdc-survey__pills--wide { grid-template-columns: repeat(2, minmax(0, 8rem)); }
.hdc-survey__pill { position: relative; display: block; cursor: pointer; }
.hdc-survey__pill span {
  display: flex; align-items: center; justify-content: center; min-height: 44px; padding: .4rem .5rem;
  border: 1px solid var(--hdc-border-input); border-radius: var(--hdc-r-sm); background: var(--hdc-surface);
  color: var(--hdc-heading); font-weight: 600; font-variant-numeric: tabular-nums;
  transition: background-color var(--hdc-dur-1) var(--hdc-ease), border-color var(--hdc-dur-1) var(--hdc-ease), color var(--hdc-dur-1) var(--hdc-ease);
}
.hdc-survey__pill:hover span { border-color: var(--hdc-primary); }
.hdc-survey__pill input:checked + span { border-color: var(--hdc-primary); background: var(--hdc-primary); color: var(--hdc-on-primary); }
.hdc-survey__pill input:focus-visible + span { box-shadow: var(--hdc-focus-ring); }
.hdc-survey__ends { display: flex; justify-content: space-between; gap: 1rem; margin: 0; color: var(--hdc-text-3); font-size: var(--hdc-fs-xs); }
.hdc-survey__pills--nps + .hdc-survey__ends { max-width: 40rem; }
.hdc-survey__stars + .hdc-survey__ends { max-width: 13.5rem; }
.hdc-survey__pills:not(.hdc-survey__pills--nps):not(.hdc-survey__pills--wide) + .hdc-survey__ends { max-width: 17.85rem; }
.hdc-survey__set > legend { padding: 0; }
@media (max-width: 520px) {
  .hdc-survey__pills--nps { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}

.hdc-survey__choices { display: flex; flex-direction: column; gap: .55rem; }
.hdc-survey__choice { align-items: center; }

.hdc-survey__done { display: flex; flex-direction: column; align-items: center; gap: .75rem; padding: 1.5rem 0; text-align: center; }
.hdc-survey__done p { margin: 0; max-width: 32rem; color: var(--hdc-heading); font-size: var(--hdc-fs-md); font-weight: 600; }
.hdc-survey__done-icon { width: 40px; height: 40px; color: var(--hdc-success); }
.hdc-survey__closed { display: flex; flex-direction: column; align-items: flex-start; gap: .75rem; }
.hdc-survey__closed p { margin: 0; color: var(--hdc-text-2); }
.hdc-survey-done h1 { margin-top: 0; }
.hdc-survey-page .hdc-b-survey { padding-block: clamp(2rem, 5vw, 4rem); }

/* survey modal (js/hdc-engage.js): the shared centred .hdc-dialog; the form scrolls inside the body */
.hdc-engage-dialog .hdc-dialog__body .hdc-survey__head { display: none; }
.hdc-engage-dialog .hdc-survey__intro--dialog { margin: 0 0 1rem; color: var(--hdc-text-2); }
.hdc-engage-dialog .hdc-dialog__footer .hdc-survey__status { flex: 1 1 100%; }
dialog.hdc-engage-dialog > form.hdc-survey { gap: 0; }
.hdc-engage-dialog .hdc-dialog__body .hdc-survey__note { margin-top: 1.25rem; }

/* ---------------------------------------------------------------- feedback button */
.hdc-engage-fab {
  position: fixed; inset-inline-start: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); z-index: 40;
  display: inline-flex; align-items: center; gap: .45rem; min-height: 44px; padding: .55rem 1rem;
  border: 1px solid var(--hdc-border-strong); border-radius: 999px; background: var(--hdc-surface-raised);
  color: var(--hdc-heading); font: 600 var(--hdc-fs-sm)/1 var(--hdc-font-sans); box-shadow: var(--hdc-shadow-md);
  cursor: pointer;
}
.hdc-engage-fab:hover { border-color: var(--hdc-primary); color: var(--hdc-primary); }
.hdc-engage-fab:focus-visible { outline: none; box-shadow: var(--hdc-focus-ring), var(--hdc-shadow-md); }
.hdc-engage-fab .hdc-i { width: 18px; height: 18px; }
/* the client area has no "back to top" button but a navigation column at the start: the button goes to the end */
.hdc-layout-client .hdc-engage-fab { inset-inline-start: auto; inset-inline-end: 16px; }
.hdc-engage-fb .hdc-survey__set { margin-bottom: 1rem; }
/* room below the last footer line, so the fixed button never covers it (js/hdc-engage.js sets the class) */
.hdc-has-engage-fab .hdc-footer, .hdc-has-engage-fab .hdc-app__footer { padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px)); }
@media (max-width: 767.98px) {
  .hdc-layout-client .hdc-engage-fab { bottom: calc(76px + env(safe-area-inset-bottom, 0px)); }
  .hdc-engage-fab { padding-inline: .8rem; }
}
@media print { .hdc-engage-fab { display: none; } }
.hdc-engage-fb .hdc-field:last-child { margin-bottom: 0; }

/* ---------------------------------------------------------------- "Rate this service" card */
html:not(.hdc-js) .hdc-svc-rate { display: none; }
.hdc-svc-rate { padding: 0; overflow: hidden; }
.hdc-svc-rate__box > summary { list-style: none; }
.hdc-svc-rate__box > summary::-webkit-details-marker { display: none; }
.hdc-svc-rate__summary {
  display: flex; align-items: center; gap: .6rem; min-height: 52px; padding: .85rem 1.25rem; cursor: pointer;
  color: var(--hdc-heading); font-weight: 600;
}
.hdc-svc-rate__summary:focus-visible { outline: none; box-shadow: inset var(--hdc-focus-ring); }
.hdc-svc-rate__title { flex: 1 1 auto; min-width: 0; }
.hdc-svc-rate__current { display: inline-flex; align-items: center; gap: .1rem; color: var(--hdc-warning); }
.hdc-svc-rate__current .hdc-i { width: 16px; height: 16px; }
.hdc-svc-rate__current .is-off { color: var(--hdc-text-3); }
.hdc-svc-rate__chev { width: 16px; height: 16px; color: var(--hdc-text-3); transition: transform var(--hdc-dur-2) var(--hdc-ease); }
.hdc-svc-rate__box[open] .hdc-svc-rate__chev { transform: rotate(180deg); }
.hdc-svc-rate__form { display: flex; flex-direction: column; gap: .85rem; margin: 0; padding: 0 1.25rem 1.25rem; }
.hdc-svc-rate__form .hdc-help { margin: 0; }
.hdc-svc-rate__aspects > summary { cursor: pointer; color: var(--hdc-primary); font-size: var(--hdc-fs-sm); font-weight: 600; }
.hdc-svc-rate__aspects[open] > summary { margin-bottom: .5rem; }
.hdc-svc-rate__aspect { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .25rem .75rem; margin: 0; padding: .25rem 0; border: 0; min-width: 0; }
.hdc-svc-rate__aspect legend { float: inline-start; padding: 0; color: var(--hdc-text); font-size: var(--hdc-fs-sm); }
.hdc-svc-rate__form .hdc-field { margin-bottom: 0; }
.hdc-svc-rate__foot { display: flex; align-items: center; gap: .75rem; }
@media (prefers-reduced-motion: reduce) { .hdc-svc-rate__chev { transition: none; } }


/* ===== part: engine.css ===== */
/* page: engine — U1 page transitions (owner: U1; docs/handoff/U1.md).
   The addon prints the cross-document opt-in "@view-transition { navigation: auto }" only when Studio → SEO → Page URLs →
   Performance → View Transitions is on. The names below only matter while a transition runs: the header and the logo
   stay in place while the page content cross-fades. Visitors who prefer reduced motion get no animation. */
@media (prefers-reduced-motion: no-preference) {
  #header { view-transition-name: hdc-header; }
  .hdc-header .hdc-logo { view-transition-name: hdc-logo; }
  ::view-transition-old(root),
  ::view-transition-new(root) { animation-duration: 180ms; }
  ::view-transition-group(hdc-header),
  ::view-transition-group(hdc-logo) { animation-duration: 220ms; }
}
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) { animation: none !important; }
}


/* ===== part: header.css ===== */
/* ==========================================================================
   H1 — site header: priority+ navigation, compact utilities, no-JS fallback
   (includes/hdc-site-header.tpl, includes/hdc-drawer.tpl, js/hdc.js initPriorityNav). Loads after hdc-site.css and
   hdc-portal.css (bundled into hdc-pages.css by tools/build_css.py). Tokens and logical properties only (dark, RTL).

   js/hdc.js sets data-hdc-fit on .hdc-header after measuring the row:
     0  everything at full size
     1  language/currency button icon-only, nav links slightly tighter
     2  also the login button icon-only (its text stays for screen readers)
   Top items that still do not fit get [hidden] and appear in "More" (<details data-hdc-nav-more>).
   Before the first measurement (and without JavaScript) the media queries below give a sensible default.
   ========================================================================== */

/* The row never shrinks the logo or the utilities: the nav takes what is left and never paints over them. */
.hdc-header__inner > .hdc-logo,
.hdc-header__actions { flex: none; }
.hdc-nav { min-width: 0; }
.hdc-nav__list { flex: 0 1 auto; min-width: 0; }
@media (min-width: 1100px) {
  .hdc-nav { display: flex; align-items: center; gap: .15rem; }
}
.hdc-nav__item[hidden],
.hdc-nav__more[hidden],
.hdc-nav-more__entry[hidden] { display: none !important; }

/* JS on, not measured yet: clip instead of overlapping, keep "More" out of the way (a few milliseconds). */
.hdc-js .hdc-header:not([data-hdc-fit]) .hdc-nav__list { overflow-x: clip; }
.hdc-js .hdc-header:not([data-hdc-fit]) .hdc-nav__more { display: none; }

/* ---- "More" ---------------------------------------------------------------------------------------------- */
.hdc-nav__more { position: relative; flex: none; }
.hdc-nav__more > summary { list-style: none; }
.hdc-nav__more > summary::-webkit-details-marker { display: none; }
.hdc-nav__more > summary::marker { content: ""; }
.hdc-nav__more[open] > .hdc-nav__more-toggle { background: var(--hdc-bg-muted); color: var(--hdc-heading) !important; }
.hdc-nav__more[open] > .hdc-nav__more-toggle .hdc-chev { transform: rotate(180deg); }
.hdc-nav-more {
  position: absolute;
  top: calc(100% + 8px);
  inset-inline-end: 0;
  z-index: 70;
  width: min(320px, calc(100vw - 2rem));
  max-height: calc(100vh - var(--hdc-header-h) - 2rem);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: .4rem;
  border: 1px solid var(--hdc-border);
  border-radius: var(--hdc-r-md);
  background: var(--hdc-surface-raised);
  box-shadow: var(--hdc-shadow-lg);
  animation: hdc-pop var(--hdc-dur-2) var(--hdc-ease);
}
.hdc-nav-more__list { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.hdc-nav-more__group > summary { list-style: none; }
.hdc-nav-more__group > summary::-webkit-details-marker { display: none; }
.hdc-nav-more__group > summary::marker { content: ""; }
.hdc-nav-more__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  padding: .6rem .7rem;
  border-radius: var(--hdc-r-sm);
  color: var(--hdc-heading);
  font: 600 var(--hdc-fs-sm)/1.3 var(--hdc-font-sans);
  cursor: pointer;
}
.hdc-nav-more__summary:hover, .hdc-nav-more__summary:focus-visible { background: var(--hdc-bg-soft); }
.hdc-nav-more__summary .hdc-chev { --hdc-i: 14px; opacity: .6; transition: transform var(--hdc-dur-2) var(--hdc-ease); }
.hdc-nav-more__group[open] > .hdc-nav-more__summary .hdc-chev { transform: rotate(180deg); }
.hdc-nav-more__links { display: grid; gap: 2px; padding-block: 0 .35rem; padding-inline-start: .35rem; }
.hdc-nav-more__links .hdc-dropdown__label { padding-block-start: .45rem; }
.hdc-nav-more__plain { font-weight: 600; color: var(--hdc-heading) !important; }

/* Mega aside heading (a <p>, not a heading: the header has no place in the page outline). */
.hdc-mega__aside .hdc-mega__aside-title { margin: 0; color: var(--hdc-heading); font-size: var(--hdc-fs-lg); font-weight: 700; line-height: 1.3; }

/* ---- Compact utilities ------------------------------------------------------------------------------------- */
.hdc-header__login-icon { display: none; }
.hdc-header[data-hdc-fit="1"] .hdc-header__locale-text,
.hdc-header[data-hdc-fit="2"] .hdc-header__locale-text,
.hdc-header[data-hdc-fit="3"] .hdc-header__locale-text { display: none; }
.hdc-header[data-hdc-fit="1"] .hdc-header__locale,
.hdc-header[data-hdc-fit="2"] .hdc-header__locale,
.hdc-header[data-hdc-fit="3"] .hdc-header__locale { width: 40px; padding: 0; justify-content: center; }
.hdc-header[data-hdc-fit="1"] .hdc-nav__link,
.hdc-header[data-hdc-fit="2"] .hdc-nav__link { padding-inline: .65rem; }
.hdc-header[data-hdc-fit="1"] .hdc-header__actions,
.hdc-header[data-hdc-fit="2"] .hdc-header__actions,
.hdc-header[data-hdc-fit="3"] .hdc-header__actions { gap: .25rem; }
/* NV1 (eight top menus): level 3 tightens the row before anything moves into "More" — links, label/chevron gap, the
   gaps around the nav and a slightly smaller label (all eight fit from 1280 px in English and 1366 px in Turkish). */
.hdc-header[data-hdc-fit="3"] .hdc-header__inner { column-gap: 1rem; }
.hdc-header[data-hdc-fit="3"] .hdc-nav,
.hdc-header[data-hdc-fit="3"] .hdc-nav__list { gap: 0; }
.hdc-header[data-hdc-fit="3"] .hdc-nav__link { padding-inline: .4rem; column-gap: .15rem; font-size: .875rem; }
.hdc-header[data-hdc-fit="2"] .hdc-header__login,
.hdc-header[data-hdc-fit="3"] .hdc-header__login { --hdc-btn-px: 0; width: var(--hdc-btn-h); }
.hdc-header[data-hdc-fit="2"] .hdc-header__login .hdc-header__login-icon,
.hdc-header[data-hdc-fit="3"] .hdc-header__login .hdc-header__login-icon { display: inline-block; }
.hdc-header[data-hdc-fit="2"] .hdc-header__login .hdc-header__cta-text,
.hdc-header[data-hdc-fit="3"] .hdc-header__login .hdc-header__cta-text {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
/* Defaults before the first measurement and without JavaScript. */
@media (min-width: 1100px) and (max-width: 1359.98px) {
  .hdc-header:not([data-hdc-fit]) .hdc-header__locale-text { display: none; }
  .hdc-header:not([data-hdc-fit]) .hdc-header__locale { width: 40px; padding: 0; justify-content: center; }
}

/* ---- Burger / drawer: JS and no-JS twins ------------------------------------------------------------------- */
html:not(.hdc-js) .hdc-js-only,
.hdc-js .hdc-nojs-only { display: none !important; }
.hdc-drawer__group {
  padding: .8rem .5rem .3rem;
  color: var(--hdc-text-3);
  font-size: var(--hdc-fs-2xs);
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
}
/* PF1: mega panels, "More" and the drawer's groups arrive in <noscript data-hdc-lazy>. Without JavaScript it is a
   transparent wrapper. With JavaScript its content is one text node (the markup as text) until js/hdc.js builds the
   elements, so it is never shown (a group opened before that, by find-in-page or a script, waits for the build). */
noscript[data-hdc-lazy] { display: contents; }
.hdc-js noscript[data-hdc-lazy] { display: none; }
/* PF1: the closed drawer is not rendered at all (no layout for hundreds of hidden links); js/hdc.js mounts it
   (.is-mounted) one frame before it slides in and unmounts it after the slide-out. Without JavaScript: :target. */
.hdc-drawer:not(.is-mounted):not(:target) { display: none; }
/* Without JavaScript the burger is a link to #hdcDrawer: the drawer opens with :target and closes with a link to "#". */
html:not(.hdc-js) .hdc-drawer:target { visibility: visible; pointer-events: auto; }
html:not(.hdc-js) .hdc-drawer:target .hdc-drawer__backdrop { opacity: 1; }
html:not(.hdc-js) .hdc-drawer:target .hdc-drawer__panel { transform: none; }

/* ---- No JavaScript on desktop: the row wraps (never overlaps); menus open on focus/hover; "More" lists all. ---- */
@media (min-width: 1100px) {
  html:not(.hdc-js) .hdc-header__inner { height: auto; min-height: var(--hdc-header-h); padding-block: .4rem; }
  html:not(.hdc-js) .hdc-nav { flex-wrap: wrap; }
  html:not(.hdc-js) .hdc-nav__list { flex-wrap: wrap; row-gap: .15rem; }
  html:not(.hdc-js) .hdc-nav__item:hover > .hdc-mega,
  html:not(.hdc-js) .hdc-nav__item:focus-within > .hdc-mega,
  html:not(.hdc-js) .hdc-dropdown:hover > .hdc-dropdown__menu,
  html:not(.hdc-js) .hdc-dropdown:focus-within > .hdc-dropdown__menu {
    visibility: visible;
    opacity: 1;
    transform: none;
    pointer-events: auto;
    transition-delay: 0s;
  }
}


/* ===== part: help.css @public ===== */
.hdc-hc-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.25rem;
  margin-top: clamp(1.5rem, 1rem + 2vw, 2.5rem);
  padding: 1.25rem 1.5rem;
  border: 1px solid var(--hdc-border);
  border-radius: var(--hdc-r-xl);
  background:
    radial-gradient(100% 140% at 0% 0%, var(--hdc-primary-soft) 0%, transparent 65%),
    var(--hdc-surface);
}
.hdc-hc-cta__text { flex: 1 1 260px; min-width: 0; }
.hdc-hc-cta__title { margin: 0 0 .2rem; font-size: var(--hdc-fs-lg); }
.hdc-hc-cta__text p { margin: 0; color: var(--hdc-text-2); font-size: var(--hdc-fs-sm); }
.hdc-hc-cta__actions { display: flex; flex-wrap: wrap; gap: .5rem; }
@container (max-width: 520px) { .hdc-hc-cta__actions, .hdc-hc-cta__actions .hdc-btn { width: 100%; } }


/* ===== part: megamenu.css ===== */
/* ==========================================================================
   H3 — mega menus: panels (includes/hdc-mega.tpl), tiles (hdc-mega-tile.tpl), featured illustrations
   (hdc-mega-art.tpl, generated by tools/menu_art.py), the priority+ "More" panel and the mobile drawer
   (hdc-drawer.tpl). Bundled after hdc-site.css and parts/header.css (tools/build_css.py, file-name order), so these
   rules replace the 1.x mega panel. Tokens and logical properties only: dark mode, RTL and the Studio palette follow.

   Panels are display:none while closed (nothing to lay out, logos load on first open) and fade/slide in on open and
   fade out on close (transition-behavior: allow-discrete where supported); prefers-reduced-motion turns motion off.
   js/hdc.js sets --hdc-mega-x (offset of the panel from the start of the header container) so a panel opens under its
   trigger and never leaves the container; without JavaScript it starts at the container's start.
   ========================================================================== */

/* ---- Colours (tones) ------------------------------------------------------------------------------------ */
.hdc-mega,
.hdc-drawer {
  --hdc-tone: var(--hdc-primary);
  --hdc-tone-soft: var(--hdc-primary-soft);
  --hdc-tone-ring: var(--hdc-primary-soft-2);
  --hdc-tone-text: var(--hdc-primary-text);
  --hdc-on-tone: #fff;
}
.hdc-tone--blue   { --hdc-tone: var(--hdc-primary); --hdc-tone-soft: var(--hdc-primary-soft); --hdc-tone-ring: var(--hdc-primary-soft-2); --hdc-tone-text: var(--hdc-primary-text); }
.hdc-tone--cyan   { --hdc-tone: #0b86ab; --hdc-tone-soft: #e8f7fc; --hdc-tone-ring: #c8ecf7; --hdc-tone-text: #08708f; }
.hdc-tone--violet { --hdc-tone: var(--hdc-violet-600); --hdc-tone-soft: var(--hdc-violet-50); --hdc-tone-ring: #e4ddff; --hdc-tone-text: #5631d6; }
.hdc-tone--green  { --hdc-tone: var(--hdc-green-600); --hdc-tone-soft: var(--hdc-green-50); --hdc-tone-ring: #ccf3dd; --hdc-tone-text: var(--hdc-green-700); }
.hdc-tone--amber  { --hdc-tone: #c27406; --hdc-tone-soft: #fff7e6; --hdc-tone-ring: #fde7b5; --hdc-tone-text: var(--hdc-amber-700); }
.hdc-tone--rose   { --hdc-tone: #d23c5c; --hdc-tone-soft: #fff1f4; --hdc-tone-ring: #ffd5de; --hdc-tone-text: #b3233f; }
.hdc-tone--slate  { --hdc-tone: var(--hdc-gray-600); --hdc-tone-soft: var(--hdc-gray-100); --hdc-tone-ring: var(--hdc-gray-200); --hdc-tone-text: var(--hdc-gray-700); }
:root[data-theme="dark"] .hdc-mega,
:root[data-theme="dark"] .hdc-drawer { --hdc-on-tone: var(--hdc-night-900); }
:root[data-theme="dark"] .hdc-tone--blue   { --hdc-tone: #4aa8ec; --hdc-tone-soft: rgba(43, 149, 224, .14); --hdc-tone-ring: rgba(43, 149, 224, .28); --hdc-tone-text: #7cc2f3; }
:root[data-theme="dark"] .hdc-tone--cyan   { --hdc-tone: #3cc8ee; --hdc-tone-soft: rgba(34, 195, 238, .12); --hdc-tone-ring: rgba(34, 195, 238, .26); --hdc-tone-text: #84def6; }
:root[data-theme="dark"] .hdc-tone--violet { --hdc-tone: #a993ff; --hdc-tone-soft: rgba(124, 92, 255, .15); --hdc-tone-ring: rgba(124, 92, 255, .3); --hdc-tone-text: #c7b9ff; }
:root[data-theme="dark"] .hdc-tone--green  { --hdc-tone: #3ad68a; --hdc-tone-soft: rgba(18, 183, 106, .13); --hdc-tone-ring: rgba(18, 183, 106, .28); --hdc-tone-text: #6ce9a6; }
:root[data-theme="dark"] .hdc-tone--amber  { --hdc-tone: #fdb022; --hdc-tone-soft: rgba(245, 165, 36, .13); --hdc-tone-ring: rgba(245, 165, 36, .28); --hdc-tone-text: #fec84b; }
:root[data-theme="dark"] .hdc-tone--rose   { --hdc-tone: #fb7a8f; --hdc-tone-soft: rgba(244, 63, 94, .14); --hdc-tone-ring: rgba(244, 63, 94, .3); --hdc-tone-text: #fda4b4; }
:root[data-theme="dark"] .hdc-tone--slate  { --hdc-tone: #a5b3c6; --hdc-tone-soft: rgba(148, 170, 200, .12); --hdc-tone-ring: rgba(148, 170, 200, .24); --hdc-tone-text: #c9d3e0; }

/* ---- Panel ---------------------------------------------------------------------------------------------- */
.hdc-mega {
  display: none;
  padding-top: 10px;
  opacity: 0;
  transform: translateY(-4px);
  visibility: visible;
  /* Only the panel takes the pointer: the page beside a narrow panel stays clickable (and a click there closes it). */
  pointer-events: none;
  transition: opacity 150ms var(--hdc-ease), transform 150ms var(--hdc-ease), display 150ms allow-discrete;
}
.hdc-nav__item.is-open > .hdc-mega { pointer-events: none; }
.hdc-mega__panel { pointer-events: auto; }
.hdc-nav__item.is-open > .hdc-mega { display: block; opacity: 1; transform: none; }
@starting-style {
  .hdc-nav__item.is-open > .hdc-mega { opacity: 0; transform: translateY(6px); }
}
.hdc-mega__frame { display: flex; }
.hdc-mega__panel {
  position: relative;
  display: flex;
  align-items: stretch;
  width: max-content;
  max-width: 100%;
  max-height: calc(100vh - var(--hdc-header-h) - var(--hdc-topbar-h) - 28px);
  margin-inline-start: var(--hdc-mega-x, 0px);
  overflow: auto;
  overscroll-behavior: contain;
  border: 1px solid var(--hdc-border);
  border-radius: 20px;
  background: var(--hdc-surface-raised);
  box-shadow: 0 32px 64px -28px rgba(15, 33, 58, .3), 0 8px 24px -12px rgba(15, 33, 58, .14);
}
:root[data-theme="dark"] .hdc-mega__panel { box-shadow: 0 32px 72px -24px rgba(0, 0, 0, .75), 0 0 0 1px rgba(148, 170, 200, .06); }
.hdc-mega__body { display: flex; flex: 1 1 auto; flex-direction: column; min-width: 0; }
.hdc-mega__groups {
  display: grid;
  grid-template-columns: repeat(var(--hdc-mega-cols, 2), minmax(13rem, 20rem));
  gap: 1.25rem .75rem;
  align-content: start;
  padding: 1.35rem 1rem 1.1rem;
}
.hdc-mega__group { min-width: 0; }
.hdc-mega__group-title {
  display: flex;
  align-items: center;
  gap: .6rem;
  margin: 0 0 .45rem;
  padding-inline: .75rem;
  color: var(--hdc-text-3);
  font: 600 var(--hdc-fs-2xs)/1.3 var(--hdc-font-mono);
  letter-spacing: var(--hdc-tracking-label);
  text-transform: uppercase;
}
.hdc-mega__group-title::after { content: ""; flex: 1 1 auto; height: 1px; background: var(--hdc-border); }
.hdc-mega__list { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }

/* ---- Links ---------------------------------------------------------------------------------------------- */
.hdc-mega__link,
.hdc-drawer__link {
  display: flex;
  align-items: flex-start;
  gap: .8rem;
  padding: .6rem .75rem;
  border-radius: 12px;
  color: var(--hdc-text) !important;
  text-decoration: none !important;
  transition: background-color var(--hdc-dur-1) var(--hdc-ease), box-shadow var(--hdc-dur-1) var(--hdc-ease);
}
.hdc-mega__link:hover,
.hdc-drawer__link:hover { background: var(--hdc-bg-soft); }
.hdc-mega__link:focus-visible,
.hdc-drawer__link:focus-visible,
.hdc-mega__more:focus-visible,
.hdc-mega__strip-links a:focus-visible,
.hdc-drawer__feature:focus-visible,
.hdc-drawer__strip a:focus-visible { outline: none; background: var(--hdc-bg-soft); box-shadow: var(--hdc-focus-ring); }
/* Icon slot of a menu entry: the bare icon or logo in the group's tone — never boxed (owner rule, 1.5.2: no tile, frame,
   ring or fill behind icons, menus included). Hover lifts the icon instead of filling a tile. */
.hdc-mega__tile {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 32px;
  height: 32px;
  border-radius: 0;
  background: none;
  color: var(--hdc-tone);
  box-shadow: none;
  transition: color var(--hdc-dur-2) var(--hdc-ease), transform var(--hdc-dur-2) var(--hdc-ease);
}
.hdc-mega__tile .hdc-i { --hdc-i: 24px; }
.hdc-mega__link:hover .hdc-mega__tile,
.hdc-mega__link:focus-visible .hdc-mega__tile { transform: translateY(-1px); }
.hdc-mega__tile--logo img { display: block; width: 26px; height: 26px; object-fit: contain; }
/* dark theme: a dark logo (e.g. black brand marks) keeps a faint light edge instead of a white box */
:root[data-theme="dark"] .hdc-mega__tile--logo img { filter: drop-shadow(0 0 1px rgba(255, 255, 255, .45)); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .hdc-mega__tile--logo img { filter: drop-shadow(0 0 1px rgba(255, 255, 255, .45)); } }
.hdc-mega__text { display: grid; gap: 2px; min-width: 0; padding-top: 1px; }
.hdc-mega__title {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .2rem .45rem;
  color: var(--hdc-heading);
  font-size: .9375rem;
  font-weight: 600;
  line-height: 1.3;
}
.hdc-mega__desc { color: var(--hdc-text-3); font-size: .8125rem; line-height: 1.45; }
.hdc-mega__badge { height: 19px; padding: 0 .45rem; font-size: .6875rem; letter-spacing: .01em; }

/* Compact rows: long lists (game titles, locations). */
.hdc-mega__link--compact,
.hdc-drawer__link--compact { align-items: center; gap: .65rem; padding: .38rem .75rem; }
.hdc-mega__link--compact .hdc-mega__tile,
.hdc-drawer__link--compact .hdc-mega__tile { width: 24px; height: 24px; }
.hdc-mega__link--compact .hdc-mega__tile .hdc-i,
.hdc-drawer__link--compact .hdc-mega__tile .hdc-i { --hdc-i: 18px; }
.hdc-mega__link--compact .hdc-mega__tile--logo img,
.hdc-drawer__link--compact .hdc-mega__tile--logo img { width: 20px; height: 20px; }
.hdc-mega__link--compact .hdc-mega__text,
.hdc-drawer__link--compact .hdc-mega__text { gap: 0; padding-top: 0; }
.hdc-mega__link--compact .hdc-mega__title,
.hdc-drawer__link--compact .hdc-mega__title { font-size: .875rem; font-weight: 550; }
.hdc-mega__link--compact .hdc-mega__desc,
.hdc-drawer__link--compact .hdc-mega__desc { overflow: hidden; font-size: .75rem; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; }
.hdc-mega__entry--compact + .hdc-mega__entry:not(.hdc-mega__entry--compact):not(.hdc-mega__entry--more) { margin-top: .35rem; }
.hdc-mega__entry:not(.hdc-mega__entry--compact):not(.hdc-mega__entry--more) + .hdc-mega__entry--compact { margin-top: .2rem; }

/* "See all →" at the end of a group. */
.hdc-mega__more {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  margin: .3rem .5rem 0;
  padding: .35rem .3rem;
  border-radius: 8px;
  color: var(--hdc-tone-text) !important;
  font-size: .875rem;
  font-weight: 600;
  text-decoration: none !important;
}
.hdc-mega__more .hdc-i { --hdc-i: 15px; transition: transform var(--hdc-dur-2) var(--hdc-ease); }
.hdc-mega__more:hover { color: var(--hdc-heading) !important; }
.hdc-mega__more:hover .hdc-i { transform: translateX(3px); }
[dir="rtl"] .hdc-mega__more:hover .hdc-i { transform: scaleX(-1) translateX(3px); }

/* ---- Bottom strip --------------------------------------------------------------------------------------- */
.hdc-mega__strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .4rem 1.5rem;
  margin-top: auto;
  padding: .8rem 1.75rem;
  border-top: 1px solid var(--hdc-border);
  background: color-mix(in srgb, var(--hdc-bg-soft) 70%, transparent);
}
.hdc-mega__strip-text { margin: 0; color: var(--hdc-text-2); font-size: var(--hdc-fs-sm); }
.hdc-mega__strip-links { display: flex; flex-wrap: wrap; gap: .25rem 1.4rem; margin: 0; padding: 0; list-style: none; }
.hdc-mega__strip-links a {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .3rem .15rem;
  border-radius: 6px;
  color: var(--hdc-text-2) !important;
  font-size: var(--hdc-fs-sm);
  font-weight: 550;
  text-decoration: none !important;
  transition: color var(--hdc-dur-1) var(--hdc-ease);
}
.hdc-mega__strip-links a:hover { color: var(--hdc-heading) !important; }
.hdc-mega__strip-links .hdc-i { --hdc-i: 16px; color: var(--hdc-tone); }
/* A panel with one group (e.g. Security while MarketConnect is off): the strip links become a short list under it. */
.hdc-mega__body:has(> .hdc-mega__groups > .hdc-mega__group:only-child) .hdc-mega__strip {
  flex-direction: column;
  align-items: flex-start;
  gap: .3rem;
  margin: .15rem 1.75rem 0;
  padding: .8rem 0 1.25rem;
  background: none;
}
.hdc-mega__body:has(> .hdc-mega__groups > .hdc-mega__group:only-child) .hdc-mega__strip-links { flex-direction: column; gap: .1rem; }

/* ---- Featured card -------------------------------------------------------------------------------------- */
.hdc-mega__feature {
  display: flex;
  flex: 0 0 18.5rem;
  flex-direction: column;
  width: 18.5rem;
  margin: .6rem;
  margin-inline-start: 0;
  overflow: hidden;
  border-radius: 15px;
  background: linear-gradient(180deg, var(--hdc-tone-soft) 0%, color-mix(in srgb, var(--hdc-tone-soft) 30%, var(--hdc-surface-raised)) 100%);
  box-shadow: inset 0 0 0 1px var(--hdc-tone-ring);
}
/* The visual grows with the card (a tall panel gets a taller visual, the text block stays compact at the bottom). */
.hdc-mega__art {
  position: relative;
  display: grid;
  flex: 1 1 9.25rem;
  place-items: center;
  min-height: 9.25rem;
  overflow: hidden;
  border-bottom: 1px solid var(--hdc-tone-ring);
  background-color: color-mix(in srgb, var(--hdc-tone-soft) 60%, var(--hdc-surface-raised));
  background-image:
    radial-gradient(70% 60% at 50% 45%, color-mix(in srgb, var(--hdc-tone) 9%, transparent) 0%, transparent 70%),
    radial-gradient(circle at 1px 1px, color-mix(in srgb, var(--hdc-tone) 24%, transparent) 1px, transparent 1.5px);
  background-size: 100% 100%, 14px 14px;
}
.hdc-mega__art > svg { display: block; width: 100%; height: auto; max-height: 13rem; }
.hdc-mega__art > img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; }
.hdc-mega__feature-body { display: flex; flex: 0 0 auto; flex-direction: column; gap: .45rem; padding: 1rem 1.15rem 1.1rem; }
.hdc-mega__feature:not(:has(.hdc-mega__art)) .hdc-mega__feature-body { flex: 1 1 auto; }
.hdc-mega__feature-badge {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 .6rem;
  border-radius: var(--hdc-r-pill);
  background: var(--hdc-surface-raised);
  box-shadow: inset 0 0 0 1px var(--hdc-tone-ring);
  color: var(--hdc-tone-text);
  font-size: var(--hdc-fs-2xs);
  font-weight: 650;
  letter-spacing: .02em;
}
.hdc-mega__feature-title { margin: 0; color: var(--hdc-heading); font-size: 1.0625rem; font-weight: 700; line-height: 1.3; letter-spacing: -.01em; }
.hdc-mega__feature-text { margin: 0; color: var(--hdc-text-2); font-size: .8125rem; line-height: 1.5; }
.hdc-mega__price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 .2rem; margin: .2rem 0 .1rem; }
.hdc-mega__price-label { flex-basis: 100%; color: var(--hdc-text-3); font-size: .75rem; font-weight: 500; }
.hdc-mega__price-value { color: var(--hdc-heading); font-size: 1.75rem; font-weight: 750; line-height: 1.15; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.hdc-mega__price-unit { color: var(--hdc-text-3); font-size: .8125rem; font-weight: 500; }
.hdc-mega__cta { margin-top: .35rem; }

/* ---- Illustrations (hdc-mega-art.tpl): flat scenes painted with tokens ---------------------------------- */
.hdc-mega-art {
  --mx-card: var(--hdc-surface-raised);
  --mx-card2: var(--hdc-bg-soft);
  --mx-line: var(--hdc-border-strong);
  --mx-ink: var(--hdc-text-3);
  --mx-faint: var(--hdc-border-strong);
  --mx-track: var(--hdc-bg-muted);
  --mx-shadow: rgba(15, 33, 58, .07);
  --mx-bad: var(--hdc-danger);
}
:root[data-theme="dark"] .hdc-mega-art {
  --mx-card: var(--hdc-night-800);
  --mx-card2: var(--hdc-night-850);
  --mx-line: rgba(148, 170, 200, .24);
  --mx-faint: rgba(148, 170, 200, .22);
  --mx-track: rgba(148, 170, 200, .12);
  --mx-shadow: rgba(0, 0, 0, .3);
}
.hdc-mega-art .mx-panel { fill: var(--mx-card); stroke: var(--mx-line); stroke-width: 1; }
.hdc-mega-art .mx-panel2 { fill: var(--mx-card2); stroke: var(--mx-line); stroke-width: 1; }
.hdc-mega-art .mx-shadow { fill: var(--mx-shadow); }
.hdc-mega-art .mx-shadow--far { opacity: .55; }
.hdc-mega-art .mx-line { fill: none; stroke: var(--mx-line); stroke-width: 1; }
.hdc-mega-art .mx-faint { fill: var(--mx-faint); }
.hdc-mega-art .mx-ink { fill: var(--mx-ink); opacity: .6; }
.hdc-mega-art .mx-ink-line { fill: none; stroke: var(--mx-ink); stroke-width: 2; stroke-linecap: round; opacity: .75; }
.hdc-mega-art .mx-track { fill: var(--mx-track); }
.hdc-mega-art .mx-tone { fill: var(--hdc-tone); }
.hdc-mega-art .mx-tone-soft { fill: var(--hdc-tone-soft); }
.hdc-mega-art .mx-tone-soft2 { fill: var(--hdc-tone-ring); }
.hdc-mega-art .mx-tone-line { fill: none; stroke: var(--hdc-tone); stroke-width: 1.6; }
.hdc-mega-art .mx-round { stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.hdc-mega-art .mx-thin { stroke-width: 1.3; }
.hdc-mega-art .mx-soft-op { opacity: .55; }
.hdc-mega-art .mx-on-tone { fill: var(--hdc-on-tone); opacity: .92; }
.hdc-mega-art .mx-led { fill: var(--hdc-led); }
.hdc-mega-art .mx-halo { fill: var(--hdc-led); opacity: .22; }
.hdc-mega-art .mx-host { fill: color-mix(in srgb, var(--hdc-tone-soft) 75%, transparent); stroke: var(--hdc-tone); stroke-width: 1.2; stroke-dasharray: 5 4; stroke-opacity: .6; }
.hdc-mega-art .mx-nested { fill: var(--hdc-tone-soft); stroke: var(--hdc-tone); stroke-width: 1.2; }
.hdc-mega-art .mx-check { fill: none; stroke: var(--hdc-on-tone); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.hdc-mega-art .mx-check--tone { stroke: var(--hdc-tone); stroke-width: 2; }
.hdc-mega-art .mx-check--lg { stroke-width: 4.5; }
.hdc-mega-art .mx-chip { fill: var(--mx-card); stroke: var(--mx-line); stroke-width: 1; }
.hdc-mega-art .mx-chip--on { fill: var(--hdc-tone-soft); stroke: var(--hdc-tone); }
.hdc-mega-art .mx-chip--dim { opacity: .65; }
.hdc-mega-art .mx-text { fill: var(--hdc-text-2); font: 600 12px/1 var(--hdc-font-mono); }
.hdc-mega-art .mx-text--lg { font-size: 13.5px; font-weight: 700; }
.hdc-mega-art .mx-text--tone,
.hdc-mega-art .mx-text--on { fill: var(--hdc-tone-text); }
.hdc-mega-art .mx-text--dim { opacity: .65; }
.hdc-mega-art .mx-shield { fill: var(--mx-card); stroke: var(--hdc-tone); stroke-width: 2; }
.hdc-mega-art .mx-glow { opacity: .6; }
.hdc-mega-art .mx-bad { fill: var(--mx-bad); }
.hdc-mega-art .mx-fade0 { opacity: .3; }
.hdc-mega-art .mx-fade1 { opacity: .5; }
.hdc-mega-art .mx-fade2 { opacity: .7; }
.hdc-mega-art .mx-fade3 { opacity: .85; }
.hdc-mega-art .mx-globe { fill: var(--hdc-tone-soft); stroke: var(--hdc-tone-ring); stroke-width: 1.5; }
.hdc-mega-art .mx-dash { stroke-dasharray: 4 5; opacity: .75; }
.hdc-mega-art .mx-blink { animation: hdc-mx-blink 1.2s steps(1, end) infinite; }
.hdc-mega-art .mx-pulse { transform-box: fill-box; transform-origin: center; animation: hdc-mx-pulse 2.6s var(--hdc-ease) infinite; }
@keyframes hdc-mx-blink { 50% { opacity: 0; } }
@keyframes hdc-mx-pulse { 0%, 100% { transform: scale(.82); } 50% { transform: scale(1.12); } }

/* ---- Priority+ "More" (parts/header.css): logos, badges, "See all" ----------------------------------------- */
.hdc-nav-more .hdc-dropdown__item { gap: .55rem; }
.hdc-nav-more__logo { flex: none; width: 18px; height: 18px; object-fit: contain; }
.hdc-nav-more .hdc-mega__badge { margin-inline-start: auto; }
.hdc-nav-more__all { color: var(--hdc-primary-text) !important; font-weight: 600; }
.hdc-nav-more__all .hdc-i { --hdc-i: 15px; }

/* ---- Mobile drawer (hdc-drawer.tpl) ---------------------------------------------------------------------- */
.hdc-drawer__body { padding: .25rem .85rem 1.5rem; }
.hdc-drawer .hdc-drawer__acc { border-bottom: 1px solid var(--hdc-border); }
.hdc-drawer .hdc-drawer__acc > summary { padding: 1rem .4rem; font-size: 1rem; border-radius: 10px; }
.hdc-drawer .hdc-drawer__acc > summary:focus-visible { outline: none; box-shadow: var(--hdc-focus-ring); }
.hdc-drawer__acc-label { display: inline-flex; align-items: center; gap: .65rem; }
.hdc-drawer__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--hdc-tone); box-shadow: 0 0 0 3px var(--hdc-tone-soft); }
.hdc-drawer .hdc-drawer__acc[open] > summary { color: var(--hdc-tone-text); }
.hdc-drawer__acc-body { padding: 0 0 1rem; }
.hdc-drawer__acc[open] > .hdc-drawer__acc-body { animation: hdc-drawer-acc 200ms var(--hdc-ease); }
@keyframes hdc-drawer-acc { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.hdc-drawer .hdc-drawer__group {
  display: flex;
  align-items: center;
  gap: .6rem;
  margin: .6rem 0 .3rem;
  padding: 0 .5rem;
  color: var(--hdc-text-3);
  font: 600 var(--hdc-fs-2xs)/1.3 var(--hdc-font-mono);
  letter-spacing: var(--hdc-tracking-label);
  text-transform: uppercase;
}
.hdc-drawer .hdc-drawer__group::after { content: ""; flex: 1 1 auto; height: 1px; background: var(--hdc-border); }
.hdc-drawer .hdc-drawer__links { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.hdc-drawer .hdc-drawer__links a.hdc-drawer__link { padding: .55rem .5rem; color: var(--hdc-text) !important; }
.hdc-drawer .hdc-drawer__links a.hdc-drawer__link--compact { padding: .35rem .5rem; }
.hdc-drawer__link .hdc-mega__tile { width: 36px; height: 36px; border-radius: 10px; }
.hdc-drawer__link .hdc-mega__tile .hdc-i { --hdc-i: 18px; }
.hdc-drawer .hdc-drawer__links--plain a { display: block; padding: .6rem .5rem; color: var(--hdc-text) !important; }
.hdc-drawer__entry--more { padding-inline-start: .1rem; }
.hdc-drawer__feature {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  margin: .85rem .25rem .25rem;
  padding: .8rem .9rem;
  border-radius: 14px;
  background: var(--hdc-tone-soft);
  box-shadow: inset 0 0 0 1px var(--hdc-tone-ring);
  color: var(--hdc-text) !important;
  text-decoration: none !important;
}
.hdc-drawer__feature-text { display: grid; gap: 2px; min-width: 0; }
.hdc-drawer__feature-text strong { color: var(--hdc-heading); font-size: .9375rem; line-height: 1.3; }
.hdc-drawer__feature-text span { color: var(--hdc-text-2); font-size: .8125rem; }
.hdc-drawer__feature-text b { color: var(--hdc-heading); font-weight: 700; }
.hdc-drawer__feature-cta { display: inline-flex; flex: none; align-items: center; gap: .3rem; color: var(--hdc-tone-text); font-size: .8125rem; font-weight: 650; }
.hdc-drawer__feature-cta .hdc-i { --hdc-i: 15px; }
.hdc-drawer__strip { display: flex; flex-wrap: wrap; gap: .2rem 1rem; margin: .6rem .25rem 0; padding: 0; list-style: none; }
.hdc-drawer__strip a { display: inline-flex; align-items: center; gap: .4rem; padding: .35rem .2rem; border-radius: 6px; color: var(--hdc-text-2) !important; font-size: .8125rem; font-weight: 550; }
.hdc-drawer__strip .hdc-i { --hdc-i: 15px; color: var(--hdc-tone); }

/* ---- Motion --------------------------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .hdc-mega { transform: none !important; transition: none !important; }
  .hdc-mega-art .mx-blink,
  .hdc-mega-art .mx-pulse,
  .hdc-drawer__acc[open] > .hdc-drawer__acc-body { animation: none !important; }
}

/* ---- No JavaScript: the 1.x hover / focus-within rules of parts/header.css open the panel (display) ---------- */
@media (min-width: 1100px) {
  html:not(.hdc-js) .hdc-nav__item:hover > .hdc-mega,
  html:not(.hdc-js) .hdc-nav__item:focus-within > .hdc-mega { display: block; opacity: 1; transform: none; }
}


/* ===== part: oscatalog.css ===== */
/* block: os-grid — catalogue source (OS1, docs/handoff/OS1.md): OS families with version chips, control panels with
   "runs on". Static tiles keep the os-grid rules of blocks-commerce.css. Legacy / end-of-life versions are dashed chips
   (their status is also in text for screen readers and in the tooltip). */
.hdc-b-os-grid .hdc-b-os__cat { grid-template-columns: repeat(auto-fill, minmax(min(100%, 248px), 1fr)); }
.hdc-b-os-grid .hdc-b-os__cat--panels { grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); }
.hdc-b-os-grid .hdc-b-os__fam,
.hdc-b-os-grid .hdc-b-os__panel { align-items: flex-start; font-weight: 500; }
.hdc-b-os-grid .hdc-b-os__fam > .hdc-b-os__logo,
.hdc-b-os-grid .hdc-b-os__panel > .hdc-b-os__logo,
.hdc-b-os-grid .hdc-b-os__fam > .hdc-i,
.hdc-b-os-grid .hdc-b-os__panel > .hdc-i { margin-top: .1rem; }
.hdc-b-os-grid .hdc-b-os__body { display: grid; gap: .45rem; min-width: 0; }
.hdc-b-os-grid .hdc-b-os__name {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .35rem .5rem;
  color: var(--hdc-heading);
  font-weight: 650;
  line-height: var(--hdc-lh-tight);
  overflow-wrap: anywhere;
}
.hdc-b-os-grid .hdc-b-os__vers { display: flex; flex-wrap: wrap; gap: .3rem; }
.hdc-b-os-grid .hdc-b-os__v {
  display: inline-flex;
  align-items: center;
  padding: .12rem .45rem;
  border: 1px solid var(--hdc-border);
  border-radius: var(--hdc-r-xs);
  background: var(--hdc-surface);
  color: var(--hdc-text);
  font: 500 var(--hdc-fs-2xs)/1.4 var(--hdc-font-mono);
  white-space: nowrap;
}
.hdc-b-os-grid .hdc-b-os__v--current { border-color: var(--hdc-primary); background: var(--hdc-primary-soft); color: var(--hdc-primary-text); font-weight: 650; }
.hdc-b-os-grid .hdc-b-os__v--legacy,
.hdc-b-os-grid .hdc-b-os__v--eol { border-style: dashed; border-color: var(--hdc-border-strong); background: transparent; color: var(--hdc-text-3); }
.hdc-b-os-grid .hdc-b-os__runs { color: var(--hdc-text-2); font-size: var(--hdc-fs-xs); line-height: 1.5; }
.hdc-b-os-grid .hdc-b-os__runs-label { color: var(--hdc-text-3); font-weight: 600; }
.hdc-b-os-grid .hdc-b-os__run { white-space: nowrap; }
.hdc-b-os-grid .hdc-b-os__note { display: block; color: var(--hdc-text-3); font: 500 var(--hdc-fs-2xs)/1.45 var(--hdc-font-sans); }
.hdc-b-os-grid .hdc-b-os__legend,
.hdc-b-os-grid .hdc-b-os__foot { margin: .25rem 0 0; color: var(--hdc-text-3); font-size: var(--hdc-fs-xs); line-height: 1.5; }
.hdc-b-os-grid .hdc-b-os__legend .hdc-b-os__v { margin-inline-end: .35rem; vertical-align: 1px; }
.hdc-b-os-grid .hdc-b-os--catalog { gap: 2rem; }
@media (max-width: 560px) {
  .hdc-b-os-grid .hdc-b-os__cat,
  .hdc-b-os-grid .hdc-b-os__cat--panels { grid-template-columns: 1fr; }
  .hdc-b-os-grid .hdc-b-os__run { white-space: normal; }
}


/* ===== hdc-compat.css @public ===== */
/* .w-hidden stays non-important: WHMCS JS reveals such elements with jQuery .show() (inline display). */
.w-hidden { display: none; }
.hidden, .d-none { display: none !important; }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.disabled, [disabled] { cursor: not-allowed; }
a.disabled, .btn.disabled { opacity: .55; pointer-events: none; }
.has-error .hdc-input, .has-error .form-control, .form-control.is-invalid, .hdc-input.is-invalid { border-color: var(--hdc-danger) !important; }
.field-error-msg, .invalid-feedback { display: none; margin-top: .3rem; color: var(--hdc-danger-text); font-size: var(--hdc-fs-xs); }
.has-error .field-error-msg, .is-invalid ~ .invalid-feedback { display: block; }
.text-danger { color: var(--hdc-danger-text) !important; }
.text-success { color: var(--hdc-success-text) !important; }
.text-warning { color: var(--hdc-warning-text) !important; }
.text-info { color: var(--hdc-info-text) !important; }
.text-muted { color: var(--hdc-text-3) !important; }

/* Full-page overlay used by WHMCS during payment redirects */
#fullpage-overlay { position: fixed; inset: 0; z-index: 2000; display: grid; place-items: center; background: var(--hdc-overlay); color: #fff; backdrop-filter: blur(3px); }
#fullpage-overlay.w-hidden { display: none; }
#fullpage-overlay .outer-wrapper { display: grid; place-items: center; gap: 1rem; text-align: center; }
#fullpage-overlay .msg { font-weight: 600; }

/* ---------- Modals (Bootstrap-shaped markup driven by hdc-compat.js) ----------
   MD1: centred on both axes like the theme's <dialog> modals (.modal-dialog fills the viewport box and centres the
   content); at most the viewport minus a 1 rem margin, header and footer fixed while the body scrolls (also when a
   <form> wraps them). Phones (<= 600 px): full screen, .modal-sm stays a card. Scroll lock without layout shift:
   html.hdc-scroll-lock (HDC.lockScroll in js/hdc.js). */
.modal { position: fixed; inset: 0; z-index: 1055; display: none; overflow-x: hidden; overflow-y: auto; outline: 0; padding: 1rem; overscroll-behavior: contain; }
.modal-dialog { position: relative; display: flex; align-items: center; justify-content: center; width: min(560px, 100%); min-height: 100%; margin: 0 auto; pointer-events: none; transform: translateY(10px) scale(.96); opacity: 0; transition: transform var(--hdc-dur-2) var(--hdc-ease), opacity var(--hdc-dur-2) var(--hdc-ease); }
.modal.show .modal-dialog { transform: none; opacity: 1; }
.modal-lg .modal-dialog, .modal-dialog.modal-lg { width: min(860px, 100%); }
.modal-xl .modal-dialog, .modal-dialog.modal-xl { width: min(1140px, 100%); }
.modal-sm .modal-dialog, .modal-dialog.modal-sm { width: min(420px, 100%); }
.modal-dialog-centered { min-height: 100%; }
.modal-content { position: relative; display: flex; flex-direction: column; width: 100%; max-height: calc(100vh - 2rem); max-height: calc(100dvh - 2rem); pointer-events: auto; border: 1px solid var(--hdc-border); border-radius: var(--hdc-r-xl); background: var(--hdc-surface-raised); color: var(--hdc-text); box-shadow: var(--hdc-shadow-lg); overflow: hidden; }
.modal-content > form { display: flex; flex: 1 1 auto; flex-direction: column; min-height: 0; margin: 0; }
.modal-header { display: flex; flex: 0 0 auto; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.1rem 1.4rem; border-bottom: 1px solid var(--hdc-border); }
.modal-title { margin: 0; color: var(--hdc-heading); font-size: var(--hdc-fs-lg); font-weight: 650; }
.modal-header .close, .modal .close { display: inline-grid; place-items: center; width: 32px; height: 32px; border: 0; border-radius: var(--hdc-r-sm); background: transparent; color: var(--hdc-text-3); font-size: 1.4rem; line-height: 1; cursor: pointer; }
.modal-header .close:hover { color: var(--hdc-heading); }
.modal-header .close:focus-visible { outline: none; box-shadow: var(--hdc-focus-ring); }
.modal-body { position: relative; flex: 1 1 auto; min-height: 0; padding: 1.4rem; overflow: auto; overscroll-behavior: contain; }
.modal-footer { display: flex; flex: 0 0 auto; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: .5rem; padding: 1rem 1.4rem; border-top: 1px solid var(--hdc-border); background: var(--hdc-surface-sunken); }
@media (max-width: 600px) {
  .modal { padding: 0; }
  .modal-dialog:not(.modal-sm) { width: 100%; }
  .modal:not(.modal-sm) .modal-dialog:not(.modal-sm) .modal-content { min-height: 100vh; min-height: 100dvh; max-height: 100vh; max-height: 100dvh; border: 0; border-radius: 0; }
  .modal:not(.modal-sm) .modal-dialog:not(.modal-sm) .modal-header { padding-top: calc(1rem + env(safe-area-inset-top, 0px)); }
  .modal:not(.modal-sm) .modal-dialog:not(.modal-sm) .modal-footer { padding-bottom: calc(1rem + env(safe-area-inset-bottom, 0px)); }
  .modal-sm .modal-dialog, .modal-dialog.modal-sm { width: calc(100% - 24px); }
  .modal-sm .modal-content, .modal-dialog.modal-sm .modal-content { max-height: calc(100vh - 24px); max-height: calc(100dvh - 24px); }
}
@media (prefers-reduced-motion: reduce) {
  .modal-dialog, .modal-backdrop { transition: none; }
}
html.hdc-scroll-lock body.modal-open { overflow: visible; }
body.modal-open { overflow: hidden; }
.modal-footer .loader { margin-inline-end: auto; display: inline-flex; align-items: center; gap: .5rem; color: var(--hdc-text-3); font-size: var(--hdc-fs-sm); }
.modal-backdrop { position: fixed; inset: 0; z-index: 1050; background: var(--hdc-overlay); backdrop-filter: blur(3px); opacity: 0; transition: opacity var(--hdc-dur-2) var(--hdc-ease); }
.modal-backdrop.show { opacity: 1; }

/* ---------- Tooltip & popover bubbles ---------- */
.hdc-tooltip-bubble { position: absolute; z-index: 1070; max-width: 280px; padding: .45rem .65rem; border-radius: var(--hdc-r-sm); background: var(--hdc-gray-900); color: #fff; font-size: var(--hdc-fs-xs); font-weight: 500; line-height: 1.4; box-shadow: var(--hdc-shadow-md); pointer-events: none; animation: hdc-fade var(--hdc-dur-2) var(--hdc-ease); }
.hdc-popover__body { color: var(--hdc-text-2); }
.hdc-popover__body img { max-width: 100%; height: auto; }

/* ---------- Usage dials (knob shim) ---------- */
.hdc-knob { position: relative; display: inline-block; aspect-ratio: 1; max-width: 100%; }
.hdc-knob svg { display: block; width: 100%; height: 100%; }
.hdc-knob circle { fill: none; stroke-linecap: round; }
.hdc-knob__track { stroke: var(--hdc-bg-muted); }
.hdc-knob__value { stroke: var(--hdc-primary); transition: stroke-dasharray .8s var(--hdc-ease); }
.hdc-knob--warning .hdc-knob__value { stroke: var(--hdc-warning); }
.hdc-knob--danger .hdc-knob__value { stroke: var(--hdc-danger); }
.hdc-knob__label { position: absolute; inset: 0; display: grid; place-items: center; color: var(--hdc-heading); font: 700 var(--hdc-fs-sm)/1 var(--hdc-font-mono); }

/* ---------- Phone input (intlTelInput shim) ---------- */
.hdc-phone { display: flex; align-items: stretch; width: 100%; }
.hdc-phone__cc { flex: 0 0 auto; width: auto; min-width: 104px; min-height: 44px; padding: .5rem 2rem .5rem .7rem; border: 1px solid var(--hdc-border-input); border-inline-end: 0; border-radius: var(--hdc-r-sm) 0 0 var(--hdc-r-sm); background: var(--hdc-bg-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2366768b' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right .55rem center/14px; color: var(--hdc-heading); font: 600 var(--hdc-fs-sm)/1.2 var(--hdc-font-mono); appearance: none; cursor: pointer; }
[dir="rtl"] .hdc-phone__cc { border-radius: 0 var(--hdc-r-sm) var(--hdc-r-sm) 0; border-inline-end: 1px solid var(--hdc-border-input); border-inline-start: 0; background-position: left .55rem center; }
.hdc-phone__cc:focus { outline: none; border-color: var(--hdc-primary); box-shadow: var(--hdc-focus-ring); position: relative; z-index: 1; }
.hdc-phone > input { flex: 1 1 auto; min-width: 0; border-start-start-radius: 0 !important; border-end-start-radius: 0 !important; }