/* ==========================================================================
   AblePage additions on top of the 2026 design (main.css).
   Tokens mirror scss/abstracts/_variables.scss.
   ========================================================================== */
:root {
  --hc-primary: #2563EB;
  --hc-secondary: #0F172A;
  --hc-base: #383838;
  --hc-text-1: rgba(190, 219, 255, .9);
  --hc-text-2: #516072;
  --hc-text-3: #87949B;
  --hc-fourth: #7399E9;
  --hc-soft: #F4F8FF;
  --hc-line: #E8E8E8;
  --hc-dark-2: #0C1323;
  --hc-lime: #C4E83C;
  --hc-green: #16A34A;
  --hc-orange: linear-gradient(90deg, #FAA83A 0%, #E74C3C 100%);
  --hc-blue: linear-gradient(0deg, #2563EB -3.85%, #0B2AA1 103.21%);
  --hc-radius: 20px;
  --hc-sec: clamp(50px, 6vw, 100px);
}

body { font-size: 18px; line-height: 1.5; }
body.no-scroll { overflow: hidden; }
p { line-height: 1.6; }
a:not([class]) { color: var(--hc-primary); }
a:not([class]):hover { color: #1739B0; }
.button:hover { filter: brightness(.95); }
.button.btn-white:hover { color: var(--hc-primary); }
.button.btn-line:hover { border-color: var(--hc-primary); color: var(--hc-primary); }
.button.btn-blue { background: var(--hc-primary); color: #fff; }
.button.btn-blue:hover { background: #1D4ED8; }
.button.btn-ghost { border: 1px solid rgba(255,255,255,.35); color: #fff; }
.button.btn-ghost:hover { background: rgba(255,255,255,.1); }
.link-arrow { display: inline-flex; align-items: center; gap: 8px; color: var(--hc-primary); font-weight: 500; }
.link-arrow i { font-size: 70%; }
.link-arrow:hover { gap: 12px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* ---------- section rhythm ---------- */
.hc-sec { padding: var(--hc-sec) 0; position: relative; }
.hc-sec.tone-soft { background: var(--hc-soft); }
.hc-sec.tone-dark { background: var(--hc-secondary); color: #fff; }
.hc-sec.tone-white { background: #fff; }
.hc-sec.tone-white + .hc-sec.tone-white,
.hc-sec.tone-soft + .hc-sec.tone-soft { padding-top: 0; }
.hc-sec.tone-dark .heading-area h2, .hc-sec.tone-dark .heading-area h3 { color: #fff; }
.hc-sec.tone-dark .heading-area p { color: var(--hc-text-1); }
.hc-sec.tone-dark .heading-area .badge { color: var(--hc-text-1); background: rgba(37,99,235,.2); }
.heading-area h2, .heading-area h3 { color: var(--hc-secondary); }
.heading-area.is-left { align-items: flex-start; text-align: left; }
.heading-area .heading-links { margin-top: 20px; display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; }
.heading-area.is-left .heading-links { justify-content: flex-start; }
.hc-row-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap; margin-bottom: clamp(18px, 4vw, 40px); }
.hc-row-head .heading-area { margin-bottom: 0; }
.hc-card { background: #fff; border: 1px solid var(--hc-line); border-radius: var(--hc-radius); padding: clamp(20px, 2.5vw, 40px); }
.tone-soft .hc-card { border-color: transparent; }
.hc-prose { color: var(--hc-text-2); font-size: clamp(16px, 1.1vw, 19px); line-height: 1.7; }
.hc-prose > * + * { margin-top: 1em; }
.hc-prose h2, .hc-prose h3, .hc-prose h4 { color: var(--hc-secondary); font-weight: 500; line-height: 1.25; margin-top: 1.6em; }
.hc-prose h2 { font-size: clamp(26px, 2vw, 34px); }
.hc-prose h3 { font-size: clamp(21px, 1.5vw, 26px); }
.hc-prose ul, .hc-prose ol { padding-left: 1.3em; }
.hc-prose ul { list-style: disc; }
.hc-prose ol { list-style: decimal; }
.hc-prose li + li { margin-top: .4em; }
.hc-prose a { color: var(--hc-primary); text-decoration: underline; text-underline-offset: 3px; }
.hc-prose strong { color: var(--hc-secondary); font-weight: 600; }
.hc-prose code { background: var(--hc-soft); padding: 2px 6px; border-radius: 6px; font-size: .9em; }
.hc-prose img { border-radius: 14px; }
.hc-prose table { width: 100%; border-collapse: collapse; }
.hc-prose th, .hc-prose td { text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--hc-line); }
.hc-prose blockquote { border-left: 3px solid var(--hc-primary); padding: 6px 0 6px 20px; color: var(--hc-secondary); }

/* ---------- header ---------- */
#header .promo-strip { background: rgba(5, 18, 74, .55); color: #fff; font-size: 15px; transition: all .3s; }
#header .promo-strip .container { display: flex; align-items: center; justify-content: center; gap: 14px; padding-block: 9px; flex-wrap: wrap; text-align: center; }
#header .promo-strip .badge.b-offer { padding: 4px 10px; font-size: 12px; }
#header .promo-strip__text { color: var(--hc-text-1); }
#header .promo-strip__link { color: #fff; font-weight: 600; font-size: 15px; display: inline-flex; align-items: center; gap: 6px; }
#header .promo-strip__link i { font-size: 9px; }
#header .promo-strip__link:hover { color: var(--hc-lime); }
#header.is-sticky .promo-strip { display: none; }
#header .content--area nav > ul > li > a:hover, #header .content--area nav > ul > li.is-active > a { color: #fff; opacity: 1; text-shadow: 0 0 .5px currentColor; }
#header .content--area nav > ul > li > a { opacity: .9; }
#header.is-sticky .content--area nav > ul > li > a:hover, #header.is-sticky .content--area nav > ul > li.is-active > a { color: var(--hc-primary); }
#header .content--area nav > ul li:hover ul { top: 100% !important; min-width: 300px !important; background: #fff; }
#header .content--area nav > ul li ul li:last-child { border-bottom: 0 !important; }
#header .content--area nav > ul li ul li a { display: block; line-height: 1.35; color: var(--hc-secondary) !important; font-weight: 500; }
#header .content--area nav > ul li ul li a small { display: block; margin-top: 4px; font-size: 13px; font-weight: 400; color: var(--hc-text-2); }
#header .content--area nav > ul li ul li a:hover small { color: rgba(255,255,255,.85); }
#header .content--area nav > ul li ul li a.is-current { background: var(--hc-soft); }
#header .content--area .cta .login:hover { opacity: .8; }
#header.is-sticky .content--area .cta .login { color: var(--hc-secondary); }
#header .content--area .logo img { max-height: 40px; width: auto; }
#header.is-sticky .mobile-menu-toggle { color: var(--hc-secondary); }
.mobile-menu-content nav ul li a small { display: none; }
@media (min-width: 992px) and (max-width: 1468px) {
  #header .mobile-menu-toggle { display: none !important; }
}
@media (max-width: 991px) {
  #header .promo-strip { font-size: 13px; }
  #header .promo-strip .container { gap: 8px; padding-block: 7px; }
}

/* push banners down when the promo strip is showing */
.home-banner .content--area, .inner-banner .content--area { padding-top: clamp(150px, 11vw, 190px) !important; }

/* ---------- footer ---------- */
.footer .footer-main .logo-section section .footer-logo { max-width: 168px; margin-bottom: clamp(24px, 2vw, 33px); }
.footer .footer-main .footer-link ul li a { font-size: 16px; }
.footer .footer-main .footer-link ul li a:hover, .footer .copyright a:hover { color: #fff; }
.footer .footer-contact .content-area .contact-link a:hover { color: var(--hc-lime); }
.footer .payment { max-width: 240px; }
@media (max-width: 600px) {
  #header .promo-strip .badge.b-offer { display: none; }
  #header .promo-strip .container { gap: 4px 10px; }
  .home-banner .content--area, .inner-banner .content--area { padding-top: 165px !important; }
}

/* ---------- desktop scale ----------
   The design is drawn large; on laptop and desktop screens the whole page is
   rendered at 90%, the same as 90% browser zoom. Change --hc-zoom to tune it.
   Screen-height rules are divided by the zoom so they still fill the screen. */
@media (min-width: 1200px) {
  :root { --hc-zoom: .9; }
  html { zoom: var(--hc-zoom); }
  .home-banner .content--area { min-height: calc(100dvh / var(--hc-zoom)); }
  .hc-colegal__toc { max-height: calc(100vh / var(--hc-zoom) - 140px); }
}

/* banners: no grid pattern behind the text, it hurts readability */
.home-banner::before, .inner-banner::before, .inner-banner.kb-article-banner::before, .inner-banner.tab-banner::before { content: none !important; background-image: none !important; }
/* AblePage wordmark (SVG) */
#header .content--area .logo img { width: 190px !important; max-width: 190px !important; height: auto !important; max-height: none !important; }
.footer .footer-main .logo-section section .footer-logo { width: 200px; max-width: 200px; height: auto; }
@media (max-width: 600px) { #header .content--area .logo img { width: 150px !important; } }

/* hello bar: announcement left, quick links right */
#header .promo-strip .container.hc-hello.has-links { justify-content: space-between; text-align: left; }
#header .hc-hello__msg { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 14px; min-width: 0; }
#header .hc-hello__msg:empty { display: none; }
#header .hc-hello__links { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 22px; margin-left: auto; }
#header .hc-hello__links a { color: var(--hc-text-1); font-size: 14px; font-weight: 500; white-space: nowrap; }
#header .hc-hello__links a:hover { color: #fff; }
@media (max-width: 991px) {
  #header .hc-hello__links { display: none; }
  #header .promo-strip .container.hc-hello.has-links { justify-content: center; text-align: center; }
  #header .hc-hello__msg { justify-content: center; }
}
/* the same quick links in the mobile menu */
.mobile-menu .hc-mobile-links { display: flex; flex-direction: column; gap: 4px; margin-top: 20px; padding-top: 16px; border-top: 1px solid rgba(255,255,255,.12); }
.mobile-menu .hc-mobile-links a { display: block; padding: 10px 10px; font-size: 17px; font-weight: 500; color: rgba(255,255,255,.85); }

/* main navigation centred on the page: logo left, links centre, balancing empty column right */
@media (min-width: 992px) {
  #header .content--area { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; column-gap: 24px; }
  #header .content--area > .logo { justify-self: start; }
  #header .content--area > nav { justify-self: center; }
  #header .content--area nav > ul { justify-content: center; width: auto; }
}

/* hello bar: a little more room */
#header .promo-strip { font-size: 15px; }
#header .promo-strip .container { padding-block: 12px; }
#header .hc-hello__links a { font-size: 15px; }
@media (max-width: 991px) { #header .promo-strip .container { padding-block: 10px; } }
@media (min-width: 992px) {
  /* never squeeze the logo column below the logo; the menu shifts right a touch on tight screens */
  #header .content--area { grid-template-columns: minmax(max-content, 1fr) auto minmax(0, 1fr); }
  /* hello bar stays one row: the announcement trims with an ellipsis, the links never wrap */
  #header .promo-strip .container.hc-hello.has-links { flex-wrap: nowrap; }
  #header .hc-hello.has-links .hc-hello__msg { flex: 1 1 auto; flex-wrap: nowrap; min-width: 0; overflow: hidden; }
  #header .hc-hello.has-links .promo-strip__text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
  #header .hc-hello.has-links .promo-strip__link, #header .hc-hello.has-links .badge { flex: none; white-space: nowrap; }
  #header .hc-hello__links { flex: none; flex-wrap: nowrap; }
}
/* ---------- header dropdown (Software Solutions) ---------- */
#header .content--area nav > ul > li.has-submenu { position: relative; }
#header .content--area nav > ul > li.has-submenu > a::after { transition: transform .2s ease; }
#header .content--area nav > ul > li.has-submenu:hover > a::after,
#header .content--area nav > ul > li.has-submenu:focus-within > a::after { transform: translateY(-50%) rotate(180deg); }
#header .content--area nav > ul li ul.hc-dd,
#header .content--area nav > ul li:hover ul.hc-dd {
  display: grid !important; gap: 4px; position: absolute; top: calc(100% + 6px) !important; left: 50% !important;
  width: 380px; min-width: 0 !important; padding: 10px; margin: 0; list-style: none;
  background: #fff !important; border-radius: 16px; border: 1px solid #E6ECF5;
  box-shadow: 0 24px 50px -12px rgba(15, 23, 42, .28), 0 2px 6px rgba(15, 23, 42, .06);
  overflow: visible !important; z-index: 30;
  opacity: 0; visibility: hidden; transform: translate(-50%, 8px); pointer-events: none;
  transition: opacity .18s ease, transform .18s ease, visibility 0s linear .18s;
}
/* invisible bridge so the menu stays open while the pointer travels down */
#header .content--area nav > ul li ul.hc-dd::before { content: ''; position: absolute; left: 0; right: 0; top: -14px; height: 14px; }
#header .content--area nav > ul li.has-submenu:hover > ul.hc-dd,
#header .content--area nav > ul li.has-submenu:focus-within > ul.hc-dd {
  opacity: 1; visibility: visible; transform: translate(-50%, 0); pointer-events: auto;
  transition: opacity .18s ease, transform .18s ease, visibility 0s;
}
#header .content--area nav > ul li ul.hc-dd li { border: 0 !important; }
#header .content--area nav > ul li ul.hc-dd li a.hc-dd__item {
  display: flex !important; align-items: flex-start; gap: 14px; width: 100%; padding: 12px 14px !important;
  border-radius: 12px; background: transparent !important; color: var(--hc-secondary) !important;
  font-size: 15px !important; line-height: 1.35; transition: background-color .12s ease !important;
}
#header .content--area nav > ul li ul.hc-dd li a.hc-dd__item:hover,
#header .content--area nav > ul li ul.hc-dd li a.hc-dd__item:focus-visible { background: var(--hc-soft) !important; color: var(--hc-secondary) !important; }
#header .content--area nav > ul li ul.hc-dd li a.hc-dd__item.is-current { background: #EEF3FF !important; }
.hc-dd__icon { flex: none; width: 42px; height: 42px; border-radius: 11px; background: #fff; border: 1px solid #E6ECF5; display: flex; align-items: center; justify-content: center; transition: border-color .12s ease; }
.hc-dd__icon img { width: 30px; height: 30px; }
.hc-dd__item:hover .hc-dd__icon { border-color: #C7D7FB; }
.hc-dd__text { display: flex; flex-direction: column; gap: 3px; padding-top: 2px; }
.hc-dd__title { font-weight: 600; font-size: 15px; color: var(--hc-secondary); }
#header .content--area nav > ul li ul.hc-dd li a.hc-dd__item small { display: block; margin: 0; font-size: 13px; font-weight: 400; line-height: 1.45; color: var(--hc-text-2) !important; }
#header .content--area nav > ul li ul.hc-dd li a.hc-dd__item:hover small { color: var(--hc-text-2) !important; }
/* mobile menu: plain list */
.mobile-menu-content .hc-dd__icon, .mobile-menu-content .hc-dd small { display: none !important; }
.mobile-menu-content ul.hc-dd { position: static !important; opacity: 1 !important; visibility: visible !important; transform: none !important; pointer-events: auto !important; display: none; width: auto; padding: 0 0 0 15px; border: 0; box-shadow: none; background: rgba(255,255,255,.03) !important; }
.mobile-menu-content li.open > ul.hc-dd { display: block !important; }
.mobile-menu-content ul.hc-dd::before { display: none; }
.mobile-menu-content .hc-dd__item { display: block !important; padding: 12px 10px !important; color: #cfd8dc !important; background: none !important; }
.mobile-menu-content .hc-dd__title { color: #cfd8dc; font-weight: 400; font-size: 14px; }
.hc-dd__icon { width: 44px; height: 44px; border: 0; background: none; border-radius: 0; }
.hc-dd__icon img { width: 44px; height: 44px; }

/* keep top-level labels on one line now there are five items */
#header .content--area nav > ul { gap: clamp(14px, 1.7vw, 34px); }
#header .content--area nav > ul > li > a { white-space: nowrap; }
@media (max-width: 1320px) { #header .content--area nav > ul > li > a { white-space: normal; } }

/* the last menu item sits at the right edge now: open its dropdown leftwards so it stays on screen */
#header .content--area nav > ul > li.has-submenu:last-child > ul.hc-dd { left: auto !important; right: 0; transform: translate(0, 8px); }
#header .content--area nav > ul > li.has-submenu:last-child:hover > ul.hc-dd,
#header .content--area nav > ul > li.has-submenu:last-child:focus-within > ul.hc-dd { transform: translate(0, 0); }
/* ---------- grids with variable columns ---------- */
.plans .plan-wrapper.hc-cols-2 { grid-template-columns: repeat(2, 1fr); max-width: 1100px; margin-inline: auto; }
.plans .plan-wrapper.hc-cols-4 { grid-template-columns: repeat(4, 1fr); }
.features-box .features-box-wrapper.hc-cols-2 { grid-template-columns: repeat(2, 1fr); }
.features-box .features-box-wrapper.hc-cols-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1200px) {
  .plans .plan-wrapper.hc-cols-4, .features-box .features-box-wrapper.hc-cols-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
  .plans .plan-wrapper.hc-cols-2, .plans .plan-wrapper.hc-cols-4,
  .features-box .features-box-wrapper.hc-cols-2, .features-box .features-box-wrapper.hc-cols-4 { grid-template-columns: 1fr; }
}
.plans .plan .title span { color: inherit; font-weight: 400; }
.plans .plan.popular .title span { color: inherit; }
.hc-footnote { text-align: center; color: var(--hc-text-2); margin-top: clamp(20px, 2vw, 32px); display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; align-items: center; }
.tone-dark .hc-footnote { color: var(--hc-text-1); }

/* ---------- feature grid ---------- */
.features-box.hc-sec { padding: var(--hc-sec) 0; }
.features-box.tone-white .features-box-wrapper .item { border: 1px solid var(--hc-line); }
.features-box .features-box-wrapper .item h3.title { color: var(--hc-secondary); font-weight: 500; line-height: 1.3; margin-bottom: 8px; }
.features-box .hc-num { display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 14px; background: rgba(37,99,235,.1); color: var(--hc-primary); font-weight: 600; font-size: 18px; margin-bottom: clamp(18px, 1.5vw, 28px); }

/* ---------- feature split ---------- */
.hosting-features.hc-split { padding: var(--hc-sec) 0; }
.hosting-features.hc-split .item { padding: 0 !important; background: none !important; }
.hosting-features.hc-split.is-image-left .content-area { flex-direction: row-reverse; }
.hosting-features.hc-split .heading-area h2 { text-align: left; }
.hc-split__body { color: var(--hc-text-2); margin-bottom: 20px; }
.hc-split__body p + p { margin-top: 12px; }
.hc-split__body a { color: var(--hc-primary); text-decoration: underline; }
.hc-split__body strong { color: var(--hc-secondary); }
.hosting-features.hc-split .list { margin-bottom: 28px; }
@media (max-width: 1124px) {
  .hosting-features.hc-split.is-image-left .content-area { flex-direction: column; }
}

/* ---------- faq ---------- */
.faq-section.hc-sec { padding: var(--hc-sec) 0; }
.faq-section .faq .item h3 { color: #fff; position: relative; padding-right: 30px; font-weight: 400; line-height: 1.4; transition: all .2s ease-in-out; }
.faq-section .faq .item h3::after { content: '\e902'; top: 50%; margin-top: -5px; right: 0; font-size: 8px; font-family: 'icomoon' !important; position: absolute; color: #fff; transition: transform .2s ease-in-out; }
.faq-section .faq .item.active h3::after { transform: rotate(180deg); }
.faq-section .faq .item .faq-answer { color: var(--hc-text-1); padding-top: 10px; }
.faq-section .faq .item .faq-answer p { display: block !important; margin: 0 0 10px; color: var(--hc-text-1); }
.faq-section .faq .item .faq-answer p:last-child { margin-bottom: 0; }
.faq-section .faq .item .faq-answer a { color: #fff; text-decoration: underline; }
.faq-section .faq .item:hover { border-color: var(--hc-primary); }

/* ---------- cta band ---------- */
.footer-cta-section { position: relative; overflow: hidden; }
.footer-cta-section .heading-area h2 { color: #fff; }
.hc-cta-stats { display: flex; gap: clamp(24px, 4vw, 60px); justify-content: center; flex-wrap: wrap; margin-bottom: clamp(18px, 1.5vw, 32px); }
.hc-cta-stats div { display: flex; flex-direction: column; gap: 6px; align-items: center; }
.hc-cta-stats strong { color: #fff; }
.hc-cta-stats span { color: var(--hc-text-1); }
.footer-cta-section .cta-buttons:empty { display: none; }

/* ---------- testimonials ---------- */
.testimonials.hc-sec { padding: var(--hc-sec) 0; }
.hc-score { display: flex; align-items: center; justify-content: center; gap: 10px; color: var(--hc-text-2); margin: -10px 0 30px; }
.hc-stars { display: inline-flex; gap: 3px; }
.hc-stars img { width: 18px; height: 18px; }
.hc-avatar { display: inline-flex !important; align-items: center; justify-content: center; background: var(--hc-blue); color: #fff; font-weight: 600; font-size: 22px; border-radius: 50%; flex-shrink: 0; }
.hc-quote-title { color: var(--hc-secondary); font-weight: 600; margin-bottom: 8px; }

/* ---------- migration / how it works ---------- */
.integration.hc-migration { padding: var(--hc-sec) 0; }
.integration .integration-feature .heading-area h2 { color: #fff; }
.hc-btn-row { display: flex; gap: 14px; flex-wrap: wrap; margin-top: clamp(24px, 2vw, 36px); }
.hc-btn-row:empty { display: none; }
.hc-panel-meta { color: var(--hc-text-2); margin-top: 18px; }

/* ---------- section intro ---------- */
.hc-intro.hc-sec { padding-bottom: 0; }
.hc-intro.is-compact { padding-top: clamp(36px, 4vw, 60px); }
.hc-intro + .hc-sec { padding-top: 0 !important; }
.hc-intro .heading-area p { max-width: 760px; }

/* ---------- green hosting band + tree counter ---------- */
.hc-green__box { display: grid; grid-template-columns: 1.4fr 1fr; gap: clamp(24px, 4vw, 60px); align-items: center; padding: clamp(28px, 4vw, 64px); border-radius: var(--hc-radius); background: linear-gradient(135deg, #ECFDF3 0%, #F4F8FF 100%); border: 1px solid #D1FADF; }
.hc-green .heading-area, .hc-green__text { display: flex; flex-direction: column; align-items: flex-start; }
.hc-green .badge.b-normal { color: var(--hc-green); background: rgba(22,163,74,.12); margin-bottom: 16px; }
.hc-green h2 { color: var(--hc-secondary); margin-bottom: 18px; }
.hc-green h2 span { font-weight: 600; }
.hc-green__text p { color: var(--hc-text-2); margin: 0; }
.hc-green__tags { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.hc-green__tags li { padding: 8px 14px; border-radius: 110px; background: #fff; color: var(--hc-secondary); border: 1px solid #D1FADF; }
.hc-green__counter { background: var(--hc-secondary); color: #fff; border-radius: var(--hc-radius); padding: clamp(24px, 3vw, 44px); display: flex; flex-direction: column; gap: 10px; position: relative; overflow: hidden; }
.hc-green__counter::after { content: ''; position: absolute; right: -40px; top: -40px; width: 180px; height: 180px; border-radius: 50%; background: radial-gradient(circle, rgba(196,232,60,.25), transparent 70%); }
.hc-green__label { color: var(--hc-lime); text-transform: uppercase; letter-spacing: .08em; font-weight: 600; }
.hc-green__value { font-size: clamp(54px, 5vw, 88px); font-weight: 600; line-height: 1; letter-spacing: -.03em; background: linear-gradient(90deg, #C4E83C, #4ADE80); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.hc-green__note { color: var(--hc-text-1); }
.hc-green__bar { height: 8px; border-radius: 8px; background: rgba(255,255,255,.1); overflow: hidden; margin-top: 8px; }
.hc-green__bar span { display: block; height: 100%; width: 74%; border-radius: 8px; background: linear-gradient(90deg, #C4E83C, #4ADE80); }
@media (max-width: 991px) { .hc-green__box { grid-template-columns: 1fr; } }

/* ---------- pricing ---------- */
.hc-pricing [hidden] { display: none !important; }
.hc-terms { display: flex; width: max-content; max-width: 100%; margin: -8px auto clamp(24px, 3vw, 44px); padding: 6px; gap: 4px; border-radius: 110px; background: var(--hc-soft); border: 1px solid #DCE6FB; flex-wrap: wrap; justify-content: center; }
.hc-term { border: 0; background: transparent; cursor: pointer; padding: 10px 20px; border-radius: 110px; font-size: 16px; color: var(--hc-text-2); font-weight: 500; transition: all .2s; }
.hc-term:hover { color: var(--hc-primary); }
.hc-term.is-active { background: var(--hc-blue); color: #fff; box-shadow: 0 6px 16px rgba(37,99,235,.25); }
.hc-term-note { text-align: center; color: var(--hc-text-2); margin: -20px 0 30px; }

/* hero followed directly by pricing: cards overlap the banner like the design */
.inner-banner:has(+ .hc-pricing) .content--area { min-height: auto; padding-bottom: 250px; }
.inner-banner + .hc-pricing { padding-top: 0; position: relative; z-index: 3; margin-top: -190px; }
.inner-banner + .hc-pricing .heading-area { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); margin: 0; }
.inner-banner + .hc-pricing .hc-terms { margin-top: 0; background: #fff; box-shadow: 0 10px 30px rgba(15,23,42,.12); border-color: transparent; }

/* ---------- inner hero ---------- */
.inner-banner { position: relative; }
.inner-banner .content--area { min-height: auto !important; padding-bottom: clamp(70px, 7vw, 120px); position: relative; z-index: 2; }
.inner-banner.shared-banner .content--area h1 { text-align: center; }
.inner-banner .hc-btn-row { justify-content: center; }
.inner-banner .hc-btn-row .button { min-width: 200px; }
.hc-crumbs { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin-bottom: 18px; color: var(--hc-text-1); }
.hc-crumbs a { color: #fff; font-size: inherit; }
.hc-crumbs a:hover { color: var(--hc-lime); }
.hc-crumbs span[aria-current] { color: var(--hc-text-1); }
.inner-banner.hc-hero-left .content--area { align-items: flex-start; text-align: left; max-width: 1003px; margin-left: 0; }
.inner-banner.hc-hero-left .content--area h1 { text-align: left; }
.inner-banner.hc-hero-left .hc-crumbs, .inner-banner.hc-hero-left .hc-btn-row { justify-content: flex-start; }
.plans .plan-wrapper .plan .title span.hc-renew, .plans .plan-wrapper .plan .title span.hc-renew span { color: inherit; font-weight: 400; }
.plans .plan-wrapper .plan .amount h3 .hc-price, .plans .plan-wrapper .plan .amount h2 .hc-price { color: inherit; }
.plans .plan-wrapper .plan.popular .title span.hc-renew { color: var(--hc-text-1); }
.inner-banner .hc-crumbs a { font-size: inherit; line-height: inherit; }
.integration .integration-steps h3.heading-4 { color: #fff; margin-bottom: clamp(20px, 2vw, 32px); }
.link-arrow.is-light { color: #fff; }
.link-arrow.is-light:hover { color: var(--hc-lime); }
.inner-banner + .hc-pricing { background: transparent; }
/* the section already carries the vertical padding */
.hosting-features.hc-split .item .content-area { padding: 0; }
/* keep the intro's spacing inside its own background so it joins the next section */
.hc-intro.hc-sec { padding-bottom: clamp(24px, 3vw, 44px); }
.hc-intro .heading-area { margin-bottom: 0; }

/* ---------- pricing cards: name tab, blue price panel, centred feature lines ---------- */
.hc-pcards { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(18px, 2vw, 32px); align-items: stretch; }
.hc-pcards.hc-cols-2 { grid-template-columns: repeat(2, 1fr); max-width: 1100px; margin-inline: auto; }
.hc-pcards.hc-cols-4 { grid-template-columns: repeat(4, 1fr); }
.hc-pcard { display: flex; flex-direction: column; padding-top: 46px; position: relative; }
.hc-pcard__tab { position: absolute; top: 0; left: 50%; transform: translateX(-50%); min-width: 52%; height: 50px; padding: 0 28px; display: flex; align-items: center; justify-content: center; background: #fff; border-radius: 10px 10px 0 0; color: var(--hc-primary); font-size: clamp(22px, 1.6vw, 28px); font-weight: 700; letter-spacing: -.01em; white-space: nowrap; box-shadow: 0 -6px 18px rgba(15,23,42,.06); }
.hc-pcard__top { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; padding: clamp(28px, 2.4vw, 40px) clamp(20px, 2vw, 36px) clamp(24px, 2vw, 34px); background: linear-gradient(180deg, #1D5FE6 0%, #1349CF 100%); border-radius: 18px 18px 0 0; color: #fff; }
.hc-pcard.is-popular .hc-pcard__top { background: linear-gradient(180deg, #0B2F95 0%, #082577 100%); }
.hc-pcard__flag { position: absolute; top: 14px; right: 14px; font-size: 12px !important; padding: 5px 11px !important; }
.hc-pcard__from { color: #9CC3FF; font-size: clamp(17px, 1.2vw, 21px); font-weight: 500; margin-bottom: 6px; }
.hc-pcard__price { font-size: clamp(46px, 4vw, 66px); font-weight: 700; line-height: 1.05; letter-spacing: -.02em; }
.hc-pcard__per { margin-top: 8px; font-size: 14px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.hc-pcard__per span { text-transform: none; font-weight: 500; letter-spacing: 0; color: #C7DBFF; }
.hc-pcard__btn { width: 100%; max-width: 300px; margin-top: clamp(22px, 2vw, 32px); font-weight: 700; font-size: clamp(17px, 1.2vw, 20px) !important; border-radius: 10px !important; }
.hc-pcard__pill { margin-top: clamp(20px, 1.8vw, 28px); width: 100%; max-width: 380px; padding: 11px 18px; border-radius: 110px; background: rgba(4, 22, 85, .45); color: #fff; font-size: clamp(14px, 1vw, 17px); font-weight: 500; }
.hc-pcard.is-popular .hc-pcard__pill { background: rgba(37, 99, 235, .35); }
.hc-pcard__pill[hidden] { display: none; }
.hc-pcard__body { flex: 1; background: #fff; border: 1px solid var(--hc-line); border-top: 0; border-radius: 0 0 18px 18px; padding: clamp(22px, 2vw, 32px) clamp(18px, 2vw, 32px); box-shadow: 0 18px 40px rgba(15,23,42,.06); }
.hc-pcard__list { list-style: none; margin: 0; padding: 0; text-align: center; }
.hc-pcard__list li { color: var(--hc-text-2); font-size: clamp(15px, 1vw, 18px); padding: 9px 0; line-height: 1.4; }
.hc-pcard__list li strong { color: var(--hc-secondary); font-weight: 700; }
.hc-pcard__list li.is-off { color: #B4BDC8; }
.hc-pcard__list--extra { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--hc-line); }
.hc-pcard:hover .hc-pcard__body { border-color: #C7D7FB; }
@media (max-width: 1360px) { .hc-pcards.hc-cols-4 { grid-template-columns: repeat(2, 1fr); row-gap: 40px; } }
@media (max-width: 991px) { .hc-pcards, .hc-pcards.hc-cols-2 { grid-template-columns: 1fr; max-width: 520px; margin-inline: auto; row-gap: 40px; } }
@media (max-width: 768px) { .hc-pcards.hc-cols-4 { grid-template-columns: 1fr; max-width: 520px; margin-inline: auto; } }

/* ---------- banners that lead straight into the plans ----------
   The plans already sit in the banner, so its buttons are dropped and the
   heading and text are smaller to pull the cards up. */
.inner-banner:is(:has(+ .hc-pricing), :has(+ .hc-includes + .hc-pricing)) .content--area .hc-btn-row { display: none; }
.inner-banner:is(:has(+ .hc-pricing), :has(+ .hc-includes + .hc-pricing)) .content--area h1.heading-1 { font-size: clamp(32px, 3.2vw, 54px); margin-bottom: 16px; }
.inner-banner:is(:has(+ .hc-pricing), :has(+ .hc-includes + .hc-pricing)) .content--area .sub-heading { font-size: clamp(15px, 1.05vw, 18px); max-width: 680px; }
.inner-banner:is(:has(+ .hc-pricing), :has(+ .hc-includes + .hc-pricing)) .content--area .badge.b-normal { margin-bottom: 12px; }
/* short product H1s: back to a confident size */
.inner-banner:is(:has(+ .hc-pricing), :has(+ .hc-includes + .hc-pricing)) .content--area h1.heading-1 { font-size: clamp(38px, 4.2vw, 72px); line-height: 1.05; margin-bottom: 18px; }
.inner-banner:is(:has(+ .hc-pricing), :has(+ .hc-includes + .hc-pricing)) .content--area .sub-heading { font-size: clamp(16px, 1.25vw, 21px); max-width: 760px; }
.inner-banner.shared-banner:is(:has(+ .hc-pricing), :has(+ .hc-includes + .hc-pricing)) .content--area { max-width: 1400px; }

/* standard plan cards: navy-blue panel; the popular plan is the darker slate
   with the lime tab so it stands apart */
.hc-pcard__top { background: linear-gradient(180deg, #0B2F95 0%, #082577 100%); color: #fff; }
.hc-pcard__from { color: #9CC3FF; }
.hc-pcard__per { color: #fff; }
.hc-pcard__per span { color: #C7DBFF; }
.hc-pcard__pill { background: rgba(37, 99, 235, .35); color: #fff; border: 0; }
.hc-pcard { filter: drop-shadow(0 18px 34px rgba(8, 24, 84, .18)); }
.hc-pcard__tab { box-shadow: none; }
.hc-pcard.is-popular .hc-pcard__top { background: linear-gradient(180deg, #1E293B 0%, #0F172A 100%); }
.hc-pcard.is-popular .hc-pcard__from { color: var(--hc-lime); }
.hc-pcard.is-popular .hc-pcard__per span { color: rgba(226, 232, 240, .75); }
.hc-pcard.is-popular .hc-pcard__pill { background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .12); }

/* homepage H1: two lines at most */
.home-banner .content--area .text-area { width: 56%; }
.home-banner .content--area .text-area .heading-1 { font-size: clamp(32px, 3.5vw, 66px); line-height: 1.05; }
@media (max-width: 1124px) { .home-banner .content--area .text-area { width: 100%; } }
@media (max-width: 600px) { .home-banner .content--area .text-area .heading-1 { font-size: clamp(28px, 8.2vw, 34px); } }
@media (min-width: 601px) and (max-width: 1124px) { .home-banner .content--area .text-area .heading-1 { font-size: clamp(40px, 5.2vw, 56px); } }
@media (max-width: 600px) { .home-banner .content--area .text-area .heading-1 { font-size: clamp(24px, 7.6vw, 34px); } }

/* ---------- product cards (homepage "Hosting plans and prices") ---------- */
.hc-prods__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(18px, 2vw, 30px); max-width: 1320px; margin: 0 auto; }
.hc-prods__grid.hc-cols-2 { grid-template-columns: repeat(2, 1fr); max-width: 900px; }
.hc-prods__grid.hc-cols-4 { grid-template-columns: repeat(4, 1fr); max-width: none; }
.hc-prod { position: relative; display: flex; flex-direction: column; padding: clamp(24px, 2.2vw, 34px); border-radius: 20px; background: #fff; border: 1px solid var(--hc-line); transition: border-color .25s, box-shadow .25s, transform .25s; }
.hc-prod:hover { border-color: #BFD3FB; box-shadow: 0 18px 40px rgba(15, 23, 42, .08); transform: translateY(-3px); }
.hc-prod.is-featured { border: 2px solid var(--hc-primary); box-shadow: 0 18px 44px rgba(37, 99, 235, .14); }
.hc-prod__flag { position: absolute; top: -13px; left: clamp(24px, 2.2vw, 34px); padding: 5px 12px; border-radius: 110px; background: var(--hc-lime); color: #0F172A; font-size: 13px; font-weight: 600; letter-spacing: .02em; }
.hc-prod__head { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.hc-prod__icon img { width: 48px; height: 48px; display: block; }
.hc-prod__title { margin: 0; color: var(--hc-secondary); font-size: clamp(20px, 1.4vw, 24px); font-weight: 600; line-height: 1.25; }
.hc-prod__body { color: var(--hc-text-2); font-size: clamp(15px, 1vw, 17px); line-height: 1.6; margin: 0 0 18px; }
.hc-prod__list { flex: 1; padding-top: 18px; border-top: 1px solid var(--hc-line); margin-bottom: 24px; }
.hc-prod__list li { font-size: clamp(15px, .95vw, 16px); color: var(--hc-base); margin-bottom: 10px; line-height: 1.5; }
.hc-prod__foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; flex-wrap: wrap; padding: 16px 18px; margin: 0 -6px -6px; border-radius: 14px; background: var(--hc-soft); }
.hc-prod.is-featured .hc-prod__foot { background: #EAF1FF; }
.hc-prod__price { display: flex; flex-direction: column; gap: 2px; }
.hc-prod__from { font-size: 13px; color: var(--hc-text-2); }
.hc-prod__amount { font-size: clamp(24px, 1.8vw, 30px); font-weight: 700; color: var(--hc-secondary); letter-spacing: -.01em; line-height: 1.1; }
.hc-prod__amount small { font-size: 15px; font-weight: 500; color: var(--hc-text-2); margin-left: 2px; }
.hc-prod__btn { white-space: nowrap; }
.hc-prod .button.btn-line { background: #fff; border-color: #CBD5E1; color: var(--hc-secondary); }
.hc-prod .button.btn-line:hover { border-color: var(--hc-primary); color: var(--hc-primary); }
@media (max-width: 1200px) { .hc-prods__grid.hc-cols-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 991px) { .hc-prods__grid, .hc-prods__grid.hc-cols-2, .hc-prods__grid.hc-cols-4 { grid-template-columns: 1fr; max-width: 560px; row-gap: 26px; } }
/* popular plan: same white name tab as the others, "Most popular" centred in the panel */
.hc-pcard__flag { position: static; align-self: center; margin: -8px 0 12px; }
.hc-pcard__flag { position: absolute; top: 9px; left: 50%; right: auto; transform: translateX(-50%); margin: 0; white-space: nowrap; }
/* "Most popular" as a diagonal corner ribbon across the top right of the panel */
.hc-pcard__top { overflow: hidden; }
.hc-pcard__flag { position: absolute; top: 26px; right: -44px; left: auto; transform: rotate(45deg); width: 180px; margin: 0; padding: 7px 0 !important; border-radius: 0 !important; text-align: center; justify-content: center; font-size: 11px !important; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; background: var(--hc-lime); color: #0F172A; box-shadow: 0 4px 10px rgba(0, 0, 0, .25); }
@media (max-width: 1360px) { .hc-pcard__flag { top: 22px; right: -48px; font-size: 10px !important; } }
.hc-pcard__flag { top: 26px; right: -62px; width: 220px; }
@media (max-width: 1360px) { .hc-pcard__flag { top: 24px; right: -64px; } }
.hc-pcard__flag { top: 40px; right: -54px; }
@media (max-width: 1360px) { .hc-pcard__flag { top: 36px; right: -58px; } }

/* ---------- hero feature points (short ticks under the H1) ---------- */
.hc-hero-points { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px clamp(20px, 2.5vw, 40px); margin: clamp(18px, 1.8vw, 28px) 0 0; padding: 0; list-style: none; }
.hc-hero-points li { display: inline-flex; align-items: center; gap: 10px; color: #fff; font-weight: 500; line-height: 1.3; }
.hc-hero-points li::before { content: ""; flex: none; width: 26px; height: 26px; border-radius: 50%; background: rgba(255,255,255,.16) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 14px no-repeat; }
.inner-banner.hc-hero-left .hc-hero-points { justify-content: flex-start; }
.hc-hero-points + .sub-heading { margin-top: clamp(14px, 1.4vw, 22px); }
@media (max-width: 600px) { .hc-hero-points { flex-direction: column; align-items: center; } .inner-banner.hc-hero-left .hc-hero-points { align-items: flex-start; } }

/* footer CTA band: section-sized title, not hero-sized */
.footer-cta-section .content-area .heading-area h2.heading-1 { font-size: clamp(30px, 3vw, 52px); line-height: 1.15; letter-spacing: -.01em; }
.footer-cta-section .content-area .heading-area .sub-heading { font-size: clamp(16px, 1.2vw, 21px); max-width: 760px; }
.footer-cta-section .cta-buttons .link-arrow { color: #fff; }
.footer-cta-section .cta-buttons .link-arrow:hover { color: rgba(255,255,255,.8); }

/* pricing card key feature (e.g. free Clientexec license) */
.hc-pcard__key { display: flex; align-items: center; gap: 10px; margin: 0 0 18px; padding: 12px 14px; border-radius: 12px; background: linear-gradient(90deg, rgba(250,168,58,.14), rgba(231,76,60,.10)); border: 1px solid rgba(231,76,60,.25); color: var(--hc-secondary); font-size: 15px; line-height: 1.35; text-align: left; }
.hc-pcard__key > span:first-child { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; background: linear-gradient(90deg, #FAA83A, #E74C3C); color: #fff; font-size: 13px; }
.hc-pcard__key strong { font-weight: 700; }
.hc-pcard__key small { display: block; color: #C2410C; font-size: 13px; font-weight: 600; }

/* homepage hero: "Starting from" price beside the main CTA */
.hc-hprice-row { display: flex; align-items: flex-end; flex-wrap: wrap; gap: 18px clamp(28px, 3vw, 48px); margin-top: clamp(22px, 2vw, 32px); }
.hc-hprice { display: flex; flex-direction: column; gap: 4px; }
.hc-hprice__label { color: rgba(190,219,255,.85); font-size: clamp(15px, 1.1vw, 18px); }
.hc-hprice__amounts { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 12px; }
.hc-hprice__old { color: rgba(190,219,255,.6); font-size: clamp(20px, 1.6vw, 26px); font-weight: 400; text-decoration-thickness: 1.5px; }
.hc-hprice__now { color: #fff; font-size: clamp(36px, 3vw, 50px); font-weight: 700; line-height: 1; letter-spacing: -.02em; }
.hc-hprice__per { color: rgba(190,219,255,.85); font-size: clamp(16px, 1.2vw, 20px); margin-left: -4px; }
.hc-hprice__badge { align-self: center; }
.hc-hprice__note { color: rgba(190,219,255,.7); font-size: 14px; }
.hc-hprice__cta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; padding-bottom: 2px; }
@media (max-width: 600px) { .hc-hprice-row { flex-direction: column; align-items: flex-start; } .hc-hprice__cta, .hc-hprice__cta .button { width: 100%; } }

/* pricing tabs (/pricing): product tabs above full pricing sections */
.hc-ptabs { padding-bottom: 0; }
.hc-ptabs__bar { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; width: max-content; max-width: 100%; margin: 0 auto; padding: 6px; border-radius: 110px; background: var(--hc-soft); border: 1px solid var(--hc-line); }
.hc-ptab { border: 0; background: transparent; cursor: pointer; padding: 12px 24px; border-radius: 110px; font: inherit; font-size: clamp(15px, 1.1vw, 18px); font-weight: 500; color: var(--hc-text-2); transition: all .2s; }
.hc-ptab:hover { color: var(--hc-primary); }
.hc-ptab.is-active { background: var(--hc-blue); color: #fff; box-shadow: 0 6px 16px rgba(37,99,235,.25); }
.hc-ptabs__panel > .hc-pricing { padding-top: clamp(28px, 3vw, 44px); }
.hc-ptabs__panel[hidden] { display: none; }
@media (max-width: 600px) { .hc-ptabs__bar { border-radius: 20px; width: 100%; } .hc-ptab { flex: 1 1 100%; } }

/* every plan's savings pill uses the featured plan's style */
.hc-pcard__pill, .hc-pcard.is-popular .hc-pcard__pill { background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .12); }

/* key feature as a normal spec line with a small logo (e.g. Clientexec on reseller plans) */
.hc-pcard__list li.hc-pcard__keyline { display: flex; align-items: center; justify-content: center; gap: 8px; }
.hc-pcard__keyline img { width: 18px; height: 18px; flex: none; object-fit: contain; }

/* migration checklist: tick for done steps, spinning ring for the one in progress */
.integration .integration-steps ul li .step.is-done, .integration .integration-steps ul li .step.is-pending { display: inline-flex; align-items: center; justify-content: center; }
.integration .integration-steps ul li .step.is-done svg { color: #fff; }
.integration .integration-steps ul li .step.is-done { background: var(--hc-blue, #2563EB); }
.hc-spin { display: block; width: 22px; height: 22px; border-radius: 50%; border: 2.6px solid rgba(255,255,255,.22); border-top-color: #FAA83A; animation: hc-spin 1s linear infinite; }
@keyframes hc-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .hc-spin { animation-duration: 3s; } }
/* ==========================================================================
   20-sections: page-builder sets (product, hub and app pages).
   ========================================================================== */

/* ---------- shared bits ---------- */
.hc-row-head__link { flex-shrink: 0; }
.hc-tags { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; }
.hc-tag { display: inline-flex; align-items: center; padding: 6px 14px; border-radius: 110px; background: rgba(37,99,235,.08); color: var(--hc-primary); font-weight: 500; line-height: 1.3; }
.hc-cols-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 24px; }
.hc-cols-list li { margin: 0 !important; }
.hc-tick { width: 18px; height: 18px; flex-shrink: 0; }
.hc-feature-image img { max-width: 100%; margin: 0 auto; display: block; }
.link-arrow.is-light { color: #fff; }
.link-arrow.is-light:hover { color: var(--hc-lime); }
.heading-area.is-left .badge { align-self: flex-start; }
@media (max-width: 575px) { .hc-cols-list { grid-template-columns: 1fr; } }

/* ---------- includes bar ---------- */
.hc-includes { padding: 22px 0; background: #fff; border-bottom: 1px solid var(--hc-line); }
.hc-includes__row { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 12px 28px; }
.hc-includes__label { color: var(--hc-secondary); font-weight: 600; }
.hc-includes__items { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 26px; }
.hc-includes__items li { display: inline-flex; align-items: center; gap: 8px; color: var(--hc-text-2); }
.hc-includes__items li img { width: 18px; height: 18px; }
/* straight after a blue banner: continue the banner and hold the label as a glass strip */
.inner-banner:has(+ .hc-includes) .content--area { padding-bottom: clamp(30px, 3vw, 44px) !important; }
.inner-banner + .hc-includes { background: #2563EB; border: 0; padding: 0 0 clamp(50px, 5vw, 80px); }
.inner-banner + .hc-includes .hc-includes__row { max-width: max-content; margin: 0 auto; padding: 14px 26px; border-radius: 110px; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.14); }
.inner-banner + .hc-includes .hc-includes__label { color: #fff; }
.inner-banner + .hc-includes .hc-includes__items li { color: var(--hc-text-1); }
/* banner + includes + pricing: pricing cards overlap the blue like the design */
.inner-banner + .hc-includes:has(+ .hc-pricing) { padding-bottom: 250px; }
.inner-banner + .hc-includes + .hc-pricing { background: transparent; padding-top: 0; position: relative; z-index: 3; margin-top: -190px; }
.inner-banner + .hc-includes + .hc-pricing .heading-area { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); margin: 0; }
.inner-banner + .hc-includes + .hc-pricing .hc-terms { margin-top: 0; background: #fff; box-shadow: 0 10px 30px rgba(15,23,42,.12); border-color: transparent; }
@media (max-width: 768px) {
  .inner-banner + .hc-includes .hc-includes__row { border-radius: 20px; padding: 16px 18px; justify-content: flex-start; }
  .inner-banner + .hc-includes .hc-includes__items { justify-content: flex-start; flex-direction: column; gap: 8px; }
  .hc-includes__items { gap: 8px 18px; }
}

/* ---------- logo strip ---------- */
.hc-logos { padding: clamp(24px, 3vw, 44px) 0; background: #fff; }
.hc-logos.is-band { border-top: 1px solid var(--hc-line); border-bottom: 1px solid var(--hc-line); padding: clamp(30px, 3.5vw, 56px) 0; }
.hc-logos__label { text-align: center; color: var(--hc-text-3); margin-bottom: 20px; }
.hc-logos__row { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: clamp(24px, 4vw, 64px); }
.hc-logos__row li { display: flex; align-items: center; }
.hc-logos__row img { height: clamp(26px, 2.4vw, 38px); width: auto; max-width: 160px; object-fit: contain; filter: grayscale(1); opacity: .6; transition: all .2s; }
.hc-logos__row img:hover { filter: none; opacity: 1; }
@media (max-width: 575px) {
  .hc-logos__row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px 18px; justify-items: center; }
  .hc-logos__row img { max-width: 96px; height: 26px; }
}

/* ---------- stats band ---------- */
.hc-sband__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: clamp(16px, 2vw, 32px); }
.hc-sband__item { display: flex; flex-direction: column; align-items: center; text-align: center; background: #fff; border-radius: var(--hc-radius); padding: clamp(28px, 2.5vw, 48px) clamp(20px, 2.5vw, 40px); }
.tone-white .hc-sband__item { border: 1px solid var(--hc-line); }
.hc-sband__item strong { margin-bottom: 12px; }
.hc-sband__item > span { color: var(--hc-text-2); margin-bottom: clamp(18px, 2vw, 28px); }
.hc-sband__bar { width: 100%; height: 8px; border-radius: 10px; background: linear-gradient(90deg, rgba(37,99,235,.1), rgba(11,42,161,.1)); margin-top: auto; overflow: hidden; }
.hc-sband__bar span { display: block; height: 100%; width: 100%; border-radius: 10px; background: linear-gradient(90deg, #2563EB, #0B2AA1); }

/* ---------- tech specs (compare-table look) ---------- */
.hc-specs.is-tight { padding-top: 0; }
.hc-specs .table-area { padding: 0; max-width: 1200px; margin: 0 auto; }
.hc-specs .compare-table table { width: 100% !important; }
.hc-specs .compare-table thead th { padding: clamp(18px, 2vw, 30px) clamp(18px, 2.5vw, 48px); font-size: clamp(16px, 1.3vw, 22px); }
.hc-specs .compare-table tbody td { padding: clamp(14px, 1.4vw, 22px) clamp(18px, 2.5vw, 48px); font-size: clamp(15px, 1.1vw, 19px); vertical-align: middle; }
.hc-specs .compare-table tbody td:first-child { font-weight: 500; width: 38%; }
.hc-specs .compare-table tbody td:nth-child(2) { color: var(--hc-secondary); }
.hc-specs .compare-table .yes { margin-right: 12px; vertical-align: -4px; width: 20px; height: 20px; }
.hc-specs .compare-table .yes::before { top: 0; }
@media (max-width: 1200px) { .hc-specs .compare-table { overflow: hidden; } .hc-specs .compare-table table { width: 100%; } }
@media (max-width: 575px) {
  .hc-specs .compare-table thead { display: none; }
  .hc-specs .compare-table tbody tr, .hc-specs .compare-table tbody td { display: block; width: 100% !important; }
  .hc-specs .compare-table tbody td:first-child { padding-bottom: 2px; border-top: 1px solid #eef1f8; color: var(--hc-text-2); font-size: 14px; }
  .hc-specs .compare-table tbody td:nth-child(2) { border-top: 0; padding-top: 2px; }
  .hc-specs .compare-table tbody td:nth-child(2) .yes { display: none; }
  .hc-specs .compare-table tbody tr:first-child td:first-child { border-top: 0; }
}

/* ---------- steps timeline (steps, steps_list) ---------- */
.hc-tsteps__grid { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(30px, 5vw, 90px); align-items: start; }
.hc-tsteps__intro { position: sticky; top: 130px; }
.hc-tsteps__intro .heading-area { margin-bottom: 0; }
.hc-tsteps__intro .hc-btn-row { margin-top: 24px; }
.hc-timeline { background: #fff; border-radius: var(--hc-radius); padding: clamp(24px, 3.5vw, 56px); border: 1px solid var(--hc-line); counter-reset: none; }
.tone-soft .hc-timeline { border-color: #DCE6FB; }
.hc-timeline li { display: flex; gap: clamp(14px, 2vw, 24px); position: relative; padding-bottom: clamp(22px, 2.2vw, 36px); }
.hc-timeline li:last-child { padding-bottom: 0; }
.hc-timeline li::before { content: ''; position: absolute; left: calc(clamp(52px, 4vw, 68px) / 2 - 1.5px); top: 6px; bottom: 0; width: 3px; background: rgba(37,99,235,.18); }
.hc-timeline li:last-child::before { display: none; }
.hc-timeline__num { display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: clamp(52px, 4vw, 68px); height: clamp(52px, 4vw, 68px); border-radius: 50%; border: 3px solid var(--hc-primary); background: #fff; color: var(--hc-primary); font-weight: 600; position: relative; z-index: 1; }
.hc-timeline section { padding-top: clamp(8px, .9vw, 14px); }
.hc-timeline .title { display: block; color: var(--hc-secondary); font-weight: 500; line-height: 1.3; margin-bottom: 6px; }
.hc-timeline p { color: var(--hc-text-2); margin: 0; }
@media (max-width: 991px) {
  .hc-tsteps__grid { grid-template-columns: 1fr; }
  .hc-tsteps__intro { position: static; }
}

/* ---------- link list / link cards ---------- */
.hc-lcards { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: clamp(16px, 2vw, 24px); }
.hc-lcards.is-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.hc-lcard { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; background: #fff; border: 1px solid var(--hc-line); border-radius: var(--hc-radius); padding: clamp(22px, 2.2vw, 36px); transition: border-color .2s, transform .2s; color: inherit; }
.tone-soft .hc-lcard { border-color: transparent; }
.hc-lcard:hover { border-color: var(--hc-primary); }
.hc-lcard__icon { width: clamp(48px, 3.5vw, 60px); height: auto; margin-bottom: 6px; }
.hc-lcard .title { color: var(--hc-secondary); font-weight: 500; line-height: 1.3; }
.hc-lcard p { color: var(--hc-text-2); margin: 0; }
.hc-lcard .link-arrow { margin-top: auto; padding-top: 6px; }
.hc-lcard:hover .link-arrow { gap: 12px; }
@media (max-width: 1124px) { .hc-lcards.is-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .hc-lcards, .hc-lcards.is-3 { grid-template-columns: 1fr; } }

/* ---------- about the software ---------- */
.hc-about__grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(30px, 5vw, 90px); align-items: start; }
.hc-about__intro { position: sticky; top: 130px; }
.hc-about__intro .heading-area { margin-bottom: 0; }
.hc-about__blocks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(16px, 2vw, 24px); }
.hc-about__blocks .title { color: var(--hc-secondary); font-weight: 500; line-height: 1.3; margin-bottom: 10px; }
.hc-about__blocks p { color: var(--hc-text-2); margin: 0; }
@media (max-width: 1124px) { .hc-about__grid { grid-template-columns: 1fr; } .hc-about__intro { position: static; } }
@media (max-width: 640px) { .hc-about__blocks { grid-template-columns: 1fr; } }

/* ---------- two paths ---------- */
.hc-paths__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(16px, 2vw, 32px); max-width: 1300px; margin: 0 auto; }
.hc-path { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--hc-line); border-radius: var(--hc-radius); padding: clamp(24px, 3vw, 52px); }
.tone-soft .hc-path { border-color: transparent; }
.hc-path__top { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 14px; }
.hc-path__top:empty { display: none; }
.hc-path__top .badge.b-normal { margin: 0; color: var(--hc-primary); background: rgba(37,99,235,.1); }
.hc-path .title { color: var(--hc-secondary); font-weight: 400; line-height: 1.2; margin-bottom: clamp(18px, 2vw, 28px); font-size: clamp(26px, 2.2vw, 38px); }
.hc-path .list { flex: 1; margin-bottom: clamp(24px, 2.5vw, 36px); color: var(--hc-text-2); }
.hc-path .list li + li { margin-top: 8px; }
.hc-path__cta .button { width: 100%; justify-content: center; }
.hc-path.is-featured { background: var(--hc-blue); border-color: transparent; color: #fff; box-shadow: 0 24px 50px rgba(37,99,235,.25); }
.hc-path.is-featured .title { color: #fff; }
.hc-path.is-featured .list { color: var(--hc-text-1); }
.hc-path.is-featured .hc-path__top .badge.b-normal { color: var(--hc-text-1); background: rgba(255,255,255,.12); }
@media (max-width: 768px) { .hc-paths__grid { grid-template-columns: 1fr; } }

/* ---------- blog posts (.blog-cta) ---------- */
.blog-cta.hc-blog { padding: var(--hc-sec) 0; }
.blog-cta.hc-blog.tone-white { background: #fff; }
.blog-cta.hc-blog.tone-soft { background: var(--hc-soft); }
.blog-cta .hc-row-head .heading-area { flex-direction: column; align-items: flex-start; }
.hc-post { display: flex; flex-direction: column; color: inherit; }
.hc-post__image { position: relative; border-radius: var(--hc-radius); overflow: hidden; margin-bottom: clamp(16px, 1.6vw, 26px); aspect-ratio: 16 / 10; background: var(--hc-soft); }
.blog-cta .content-area .item .hc-post__image img { width: 100%; height: 100%; object-fit: cover; margin: 0; transition: transform .4s; }
.hc-post:hover .hc-post__image img { transform: scale(1.03); }
.hc-post__cat { position: absolute; top: 14px; right: 14px; padding: 5px 12px; border-radius: 110px; background: #fff; color: var(--hc-primary); font-weight: 500; }
.hc-post .blog-details { color: var(--hc-text-2); margin-top: 0; }
.hc-post .title { transition: color .2s; font-weight: 500; line-height: 1.3; }
.hc-post:hover .title { color: var(--hc-primary); }
@media (max-width: 991px) {
  .blog-cta .content-area .item.hc-post { text-align: left; margin: 0; max-width: none; }
  .hc-post .blog-details { justify-content: flex-start; margin-top: 0; }
  .blog-cta .content-area { gap: 30px; }
}
@media (min-width: 641px) and (max-width: 991px) { .blog-cta.hc-blog .content-area { grid-template-columns: repeat(2, 1fr); } }

/* ---------- app directory (.popular-software-application) ---------- */
.popular-software-application.hc-apps { padding: var(--hc-sec) 0; }
.hc-apps.tone-white + .hc-sec.tone-white, .hc-sec.tone-white + .hc-apps.tone-white { padding-top: 0; }
.hc-apps .content-area { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.hc-apps .content-area .item { display: flex; flex-direction: column; color: inherit; transition: border-color .2s; }
.hc-apps.tone-soft .content-area .item { border-color: transparent; }
.hc-apps .content-area .item:hover { border-color: var(--hc-primary); }
.hc-apps .content-area .item .total-users { margin-bottom: clamp(18px, 1.8vw, 26px); }
.hc-apps .content-area .item .link { margin-top: auto; }
.hc-apps .content-area .item:hover .link { gap: 12px; }
.hc-apps__initials { font-family: "Google Sans Flex", sans-serif; display: inline-flex; align-items: center; justify-content: center; border-radius: 14px; background: rgba(37,99,235,.1); color: var(--hc-primary); font-weight: 600; font-size: clamp(16px, 1.3vw, 20px); text-transform: none; }
.hc-apps .cta .note { max-width: 860px; }
.hc-apps.is-compact .content-area .item { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 18px; align-items: center; padding: clamp(18px, 2vw, 28px); }
.hc-apps.is-compact .content-area .item .icon-image { grid-row: 1 / 3; margin: 0; width: 48px; }
.hc-apps.is-compact .content-area .item .title { margin-bottom: 2px; }
.hc-apps.is-compact .content-area .item .total-users { margin: 0; color: var(--hc-text-2); font-size: 16px; }
.hc-apps.is-compact .content-area .item .link { display: none; }
@media (max-width: 1124px) { .hc-apps .content-area { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .hc-apps .content-area { grid-template-columns: 1fr; } }

/* ---------- split banners (installer_hero, hub_hero, dashboard_split hero) ---------- */
.inner-banner.hc-xhero .content--area { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); gap: clamp(30px, 5vw, 90px); align-items: center; text-align: left; width: 100%; max-width: none; }
.inner-banner.hc-xhero.is-flipped .content--area > .hc-dash { order: -1; }
.hc-xhero__text { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; }
.inner-banner.hc-xhero .content--area h1 { text-align: left; }
.inner-banner.hc-xhero .hc-crumbs { justify-content: flex-start; }
.inner-banner.hc-xhero .hc-btn-row { justify-content: flex-start; margin-top: clamp(18px, 2vw, 30px); }
.inner-banner.hc-xhero .heading-area { margin-bottom: 0; }
.inner-banner.hc-xhero .heading-area h1 { color: #fff; }
.inner-banner.hc-xhero .heading-area p { color: var(--hc-text-1); }
.inner-banner.hc-xhero .heading-area .badge.b-normal { color: var(--hc-text-1); background: rgba(255,255,255,.1); }
.inner-banner.hc-xhero .sub-heading { max-width: 640px; }
.hc-xhero .badge.b-normal { display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.hc-xhero__tag { display: inline-flex; padding: 3px 10px; border-radius: 110px; background: var(--hc-lime); color: var(--hc-primary); font-weight: 600; font-size: 13px; letter-spacing: .04em; }
.hc-xhero__stats { display: flex; flex-wrap: wrap; gap: 14px clamp(24px, 3vw, 48px); margin-top: clamp(26px, 3vw, 44px); padding-top: clamp(20px, 2vw, 28px); border-top: 1px solid rgba(255,255,255,.16); }
.hc-xhero__stats li { display: flex; flex-direction: column; gap: 4px; }
.hc-xhero__stats strong { color: #fff; font-weight: 600; line-height: 1.1; }
.hc-xhero__stats span { color: var(--hc-text-1); }
.hc-xhero .list li { color: var(--hc-text-1); }
.hc-xhero .hc-cols-list { margin-top: 22px; }
.hc-meta { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 18px; color: var(--hc-text-1); }
.hc-meta span + span::before { content: '•'; margin-right: 18px; opacity: .6; }
/* glass checklist panel */
.hc-glass { padding: clamp(24px, 3vw, 48px); border-radius: var(--hc-radius); background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.16); backdrop-filter: blur(6px); }
.hc-glass__label { display: block; color: var(--hc-lime); text-transform: uppercase; letter-spacing: .08em; font-weight: 600; margin-bottom: 18px; }
.hc-glass .list li { color: #fff; margin-bottom: 12px; }
/* installer card */
.hc-installer { background: #fff; border-radius: var(--hc-radius); padding: clamp(20px, 2.4vw, 36px); box-shadow: 0 30px 60px rgba(5, 18, 74, .35); color: var(--hc-base); display: flex; flex-direction: column; gap: 18px; }
.hc-installer__head { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding-bottom: 14px; border-bottom: 1px solid var(--hc-line); }
.hc-installer__head span:first-child { color: var(--hc-secondary); font-weight: 600; }
.hc-installer__head span + span { color: var(--hc-text-3); }
.hc-installer__app { display: flex; align-items: center; gap: 14px; padding: 14px; border-radius: 14px; background: var(--hc-soft); }
.hc-installer__logo { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 12px; background: var(--hc-blue); color: #fff; font-weight: 600; flex-shrink: 0; }
.hc-installer__name { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.hc-installer__name strong { color: var(--hc-secondary); font-weight: 600; line-height: 1.2; }
.hc-installer__name span { color: var(--hc-text-2); }
.hc-installer__app .button { flex-shrink: 0; }
.hc-installer__progress-head { display: flex; justify-content: space-between; gap: 10px; color: var(--hc-text-2); margin-bottom: 8px; }
.hc-installer__progress-head .is-done { color: var(--hc-green); font-weight: 600; }
.hc-installer__bar { height: 8px; border-radius: 10px; background: rgba(37,99,235,.1); overflow: hidden; }
.hc-installer__bar span { display: block; height: 100%; width: 100%; border-radius: 10px; background: linear-gradient(90deg, #2563EB, #0B2AA1); }
.hc-installer .list li { color: var(--hc-text-2); margin-bottom: 8px; }
.hc-installer__tiles { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.hc-installer__tiles div { border: 1px solid #DCE6FB; border-radius: 14px; padding: 14px 16px; display: flex; flex-direction: column; gap: 6px; }
.hc-installer__tiles span { color: var(--hc-text-2); }
@media (max-width: 1124px) {
  .inner-banner.hc-xhero .content--area { grid-template-columns: 1fr; }
  .inner-banner.hc-xhero.is-flipped .content--area > .hc-dash { order: 0; }
  .hc-installer, .hc-glass, .inner-banner.hc-xhero .hc-dash { max-width: 640px; width: 100%; }
}
@media (max-width: 575px) {
  .hc-installer__app { flex-wrap: wrap; }
  .hc-installer__app .button { width: 100%; justify-content: center; }
  .inner-banner.hc-xhero .hc-btn-row .button { width: 100%; justify-content: center; }
}

/* ---------- dashboard card (dashboard_split, info_columns) ---------- */
.hc-dash { background: var(--hc-secondary); border-radius: var(--hc-radius); padding: clamp(22px, 2.6vw, 40px); color: #fff; display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.hc-dash.is-glass { background: rgba(5, 18, 74, .45); border: 1px solid rgba(255,255,255,.14); }
.hc-dash__head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; padding-bottom: 16px; border-bottom: 1px solid rgba(255,255,255,.1); }
.hc-dash__head > span:first-child { font-weight: 500; }
.hc-dash__head .badge.b-offer { font-size: 13px; padding: 5px 12px; }
.hc-dash__eyebrow { color: var(--hc-lime); text-transform: uppercase; letter-spacing: .08em; font-weight: 600; }
.hc-dash__stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.hc-dash__stats.is-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.hc-dash__stat { border: 1px solid var(--hc-primary); border-radius: 16px; padding: clamp(14px, 1.6vw, 24px); display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.hc-dash__stat strong { color: #5B8DEF; }
.hc-dash__stat span { color: var(--hc-text-1); }
.hc-dash__rows li { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 11px 0; border-top: 1px solid rgba(255,255,255,.08); color: var(--hc-text-1); }
.hc-dash__rows li:first-child { border-top: 0; padding-top: 0; }
.hc-dash__val { padding: 4px 10px; border-radius: 110px; background: rgba(22,163,74,.18); color: #4ADE80; font-weight: 500; white-space: nowrap; }
.hc-dash__val.is-blue { background: rgba(37,99,235,.25); color: #93B4FF; }
.hc-dash__stats + .hc-dash__rows { padding-top: 4px; }
@media (max-width: 1360px) { .hc-dash__stats.is-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 400px) { .hc-dash__rows li { flex-wrap: wrap; } }

/* dashboard split (non-hero): dark rounded panel like the design's integration block */
.hc-dsplit__panel { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(30px, 4vw, 70px); align-items: center; background: #101828; border-radius: clamp(24px, 3vw, 40px); padding: clamp(24px, 5vw, 90px); }
.hc-dsplit__panel.is-flipped > .hc-dash { order: -1; }
.hc-dsplit__panel .hc-dash { background: transparent; border: 1px solid var(--hc-primary); }
.hc-dsplit__panel .hc-dash__stat { background: #121F39; }
.hc-dsplit .heading-area { margin-bottom: 0; }
.hc-dsplit .heading-area h2 { color: #fff; }
.hc-dsplit .heading-area p { color: var(--hc-text-1); }
.hc-dsplit .heading-area .badge { color: var(--hc-text-1); background: rgba(37,99,235,.2); }
.hc-dsplit .list li { color: var(--hc-text-1); }
.hc-dsplit .hc-cols-list { margin-top: 24px; }
@media (max-width: 1124px) { .hc-dsplit__panel { grid-template-columns: 1fr; } .hc-dsplit__panel.is-flipped > .hc-dash { order: 0; } }

/* ---------- points split ---------- */
.hc-points__grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(30px, 5vw, 90px); align-items: center; }
.hc-points__intro .heading-area { margin-bottom: 0; }
.hc-points__items { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(16px, 2vw, 24px); }
.hc-point img { width: clamp(48px, 3.5vw, 60px); margin-bottom: 16px; }
.hc-point .title { color: var(--hc-secondary); font-weight: 500; margin-bottom: 8px; line-height: 1.3; }
.hc-point p { color: var(--hc-text-2); margin: 0; }
.hc-point:hover { border-color: var(--hc-primary); }
@media (max-width: 1124px) { .hc-points__grid { grid-template-columns: 1fr; } }
@media (max-width: 575px) { .hc-points__items { grid-template-columns: 1fr; } }

/* ---------- faq grid ---------- */
.hc-faqgrid__items { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(16px, 2vw, 24px); max-width: 1300px; margin: 0 auto; }
.hc-faqgrid .title { display: flex; gap: 12px; align-items: flex-start; color: var(--hc-secondary); font-weight: 500; line-height: 1.35; margin-bottom: 10px; }
.hc-faqgrid .title img { width: 22px; height: 22px; margin-top: 3px; flex-shrink: 0; }
.hc-faqgrid p { color: var(--hc-text-2); margin: 0; padding-left: 34px; }
@media (max-width: 768px) { .hc-faqgrid__items { grid-template-columns: 1fr; } .hc-faqgrid p { padding-left: 0; } }

/* ---------- dark cta ---------- */
.hc-darkcta__panel { position: relative; overflow: hidden; background: var(--hc-secondary); border-radius: clamp(24px, 3vw, 40px); padding: clamp(40px, 6vw, 100px) clamp(20px, 4vw, 80px); text-align: center; }
.hc-darkcta__panel::before { content: ''; position: absolute; left: 50%; top: -60%; width: 900px; height: 600px; transform: translateX(-50%); background: radial-gradient(closest-side, rgba(37,99,235,.45), transparent); pointer-events: none; }
.hc-darkcta__panel > * { position: relative; }
.hc-darkcta .heading-area { margin-bottom: 0; }
.hc-darkcta .heading-area h2 { color: #fff; }
.hc-darkcta .heading-area p { color: var(--hc-text-1); max-width: 760px; }
.hc-darkcta .heading-area .badge { color: var(--hc-text-1); background: rgba(37,99,235,.2); }
.hc-darkcta .hc-btn-row { justify-content: center; align-items: center; }
@media (max-width: 575px) { .hc-darkcta .hc-btn-row .button { width: 100%; justify-content: center; } }

/* ---------- rows split + rows panel ---------- */
.hc-rsplit__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(30px, 5vw, 90px); align-items: center; }
.hc-rsplit.is-single .hc-rsplit__grid { grid-template-columns: minmax(0, 860px); justify-content: center; }
.hc-rsplit.is-single .heading-area { align-items: center; text-align: center; }
.hc-rsplit.is-single .heading-area .badge { align-self: center; }
.hc-rsplit.is-single .hc-btn-row, .hc-rsplit.is-single .hc-tags { justify-content: center; }
.hc-rsplit .heading-area { margin-bottom: 0; }
.hc-rsplit .hc-tags { margin-top: 22px; }
.hc-rpanel { background: #fff; border: 1px solid var(--hc-line); border-radius: var(--hc-radius); overflow: hidden; min-width: 0; }
.tone-soft .hc-rpanel { border-color: transparent; }
.hc-rpanel__head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; padding: clamp(18px, 2vw, 28px) clamp(20px, 2.4vw, 36px); background: var(--hc-soft); }
.tone-soft .hc-rpanel__head { background: #EAF1FE; }
.hc-rpanel__head span:first-child { color: var(--hc-secondary); font-weight: 600; }
.hc-rpanel__head span + span { color: var(--hc-text-3); }
.hc-rpanel__list li { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: clamp(14px, 1.6vw, 22px) clamp(20px, 2.4vw, 36px); border-top: 1px solid #EEF1F8; }
.hc-rpanel__list li:first-child { border-top: 0; }
.hc-rpanel__list li > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.hc-rpanel__label { color: var(--hc-secondary); font-weight: 500; }
.hc-rpanel__detail { color: var(--hc-text-2); }
.hc-rpanel__value { flex-shrink: 0; padding: 5px 12px; border-radius: 110px; background: rgba(37,99,235,.08); color: var(--hc-primary); font-weight: 600; white-space: nowrap; }
.hc-rpanel__note { display: flex; gap: 12px; align-items: flex-start; margin: 0; padding: clamp(16px, 1.8vw, 24px) clamp(20px, 2.4vw, 36px); background: #FFF8E9; color: #7A5D1E; }
.hc-rpanel__note img { width: 20px; height: 20px; margin-top: 2px; flex-shrink: 0; }
@media (max-width: 991px) { .hc-rsplit__grid { grid-template-columns: 1fr; } }
@media (max-width: 420px) { .hc-rpanel__list li { flex-direction: column; align-items: flex-start; gap: 8px; } }

/* ---------- info columns ---------- */
.hc-infocols__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(30px, 4vw, 70px); align-items: start; }
.hc-infocols__col { display: flex; flex-direction: column; gap: clamp(20px, 2vw, 32px); min-width: 0; }
.hc-infocols__col .heading-area { margin-bottom: 0; }
@media (max-width: 1124px) { .hc-infocols__grid { grid-template-columns: 1fr; } }

/* ---------- support chat ---------- */
.hc-chat__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(30px, 5vw, 90px); align-items: center; }
.hc-chat__window { background: #fff; border: 1px solid var(--hc-line); border-radius: var(--hc-radius); box-shadow: 0 30px 60px rgba(15, 23, 42, .08); overflow: hidden; }
.hc-chat__head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; padding: 18px clamp(18px, 2vw, 28px); background: var(--hc-blue); color: #fff; }
.hc-chat__title { display: inline-flex; align-items: center; gap: 10px; font-weight: 500; }
.hc-chat__title img { width: 28px; height: 28px; padding: 4px; border-radius: 8px; background: #fff; }
.hc-chat__status { display: inline-flex; align-items: center; gap: 8px; color: var(--hc-text-1); }
.hc-chat__status i { width: 8px; height: 8px; border-radius: 50%; background: #4ADE80; box-shadow: 0 0 0 4px rgba(74, 222, 128, .2); }
.hc-chat__body { display: flex; flex-direction: column; gap: 14px; padding: clamp(20px, 2.4vw, 36px) clamp(18px, 2vw, 28px); background: var(--hc-soft); }
.hc-chat__msg { max-width: 82%; padding: 14px 18px; border-radius: 18px; line-height: 1.55; }
.hc-chat__msg.is-customer { align-self: flex-start; background: #fff; color: var(--hc-secondary); border-bottom-left-radius: 6px; }
.hc-chat__msg.is-agent { align-self: flex-end; background: var(--hc-primary); color: #fff; border-bottom-right-radius: 6px; }
.hc-chat__agent { display: flex; align-items: center; gap: 14px; padding: 16px clamp(18px, 2vw, 28px); border-top: 1px solid var(--hc-line); }
.hc-chat__agent .hc-avatar { width: 44px; height: 44px; font-size: 16px; }
.hc-chat__agent strong { display: block; color: var(--hc-secondary); font-weight: 600; }
.hc-chat__agent small { display: block; color: var(--hc-text-2); }
.hc-chat .heading-area { margin-bottom: 0; }
.hc-chat .heading-area a.badge { color: var(--hc-primary); background: rgba(37,99,235,.1); }
.hc-chat .heading-area a.badge:hover { background: rgba(37,99,235,.18); }
.hc-chat__text .list { margin-top: 22px; color: var(--hc-text-2); }
.hc-chat__text .list li + li { margin-top: 8px; }
@media (max-width: 991px) { .hc-chat__grid { grid-template-columns: 1fr; } .hc-chat__window { order: 2; } }
@media (max-width: 575px) { .hc-chat__msg { max-width: 92%; } }

/* ---------- bar chart ---------- */
.progress-section.hc-chart { padding: var(--hc-sec) 0; }
.progress-section.hc-chart.tone-soft { background: var(--hc-soft); }
.hc-chart__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(30px, 5vw, 90px); align-items: center; }
.hc-chart__text .heading-area { margin-bottom: 0; }
.hc-chart__text .list { margin-top: 24px; color: var(--hc-text-2); }
.hc-chart__text .list li + li { margin-top: 10px; }
.hc-chart__text .list li::before { top: 4px; transform: none; }
.hc-chart__text .list strong { color: var(--hc-secondary); font-weight: 600; }
.progress-section.hc-chart .content-area { display: block; }
.progress-section.hc-chart .content-area .graph-left { width: 100%; }
.progress-section.hc-chart .content-area .wide-graph.is-light .graph-bar { background: linear-gradient(90deg, #7399E9, #5B8DEF); }
.hc-chart__stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; border-top: 1px solid var(--hc-line); padding-top: 22px; margin-top: 8px; }
.hc-chart__stats div { display: flex; flex-direction: column; gap: 8px; }
.hc-chart__stats span { color: var(--hc-text-2); }
.hc-chart__tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(16px, 2vw, 24px); margin-top: clamp(16px, 2vw, 24px); }
.hc-chart__tile { background: #fff; border-radius: var(--hc-radius); padding: clamp(20px, 2vw, 32px); display: flex; flex-direction: column; gap: 8px; }
.hc-chart__tile > span { color: var(--hc-primary); font-weight: 600; text-transform: uppercase; letter-spacing: .06em; }
.hc-chart__tile strong { color: var(--hc-secondary); }
.hc-chart__tile p { color: var(--hc-text-2); margin: 0; }
.hc-chart__tile.is-dark { background: var(--hc-secondary); }
.hc-chart__tile.is-dark > span { color: var(--hc-lime); }
.hc-chart__tile.is-dark strong { color: #fff; }
.hc-chart__tile.is-dark p { color: var(--hc-text-1); }
@media (max-width: 1124px) { .hc-chart__grid { grid-template-columns: 1fr; } }
@media (max-width: 480px) { .hc-chart__stats, .hc-chart__tiles { grid-template-columns: 1fr; } }

/* ---------- domain search ---------- */
.hc-dsearch__panel { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(30px, 4vw, 70px); align-items: center; padding: clamp(24px, 4vw, 70px); border-radius: clamp(24px, 3vw, 40px); background: var(--hc-soft); }
.hc-dsearch .heading-area { margin-bottom: 0; }
.hc-dsearch__text .hc-cols-list { margin-top: 24px; color: var(--hc-text-2); }
.hc-dsearch__box { background: var(--hc-blue); border-radius: var(--hc-radius); padding: clamp(22px, 3vw, 48px); color: #fff; display: flex; flex-direction: column; gap: 22px; position: relative; overflow: hidden; }
.hc-dsearch__box::before { content: ''; position: absolute; inset: auto -10% -40% auto; width: 420px; height: 420px; background: url(../images/banner-grid-3.svg) center / cover no-repeat; opacity: .12; pointer-events: none; }
.hc-dsearch__box > * { position: relative; }
.hc-dsearch__form label { display: block; color: #fff; font-weight: 500; margin-bottom: 12px; }
.hc-dsearch__field { display: flex; gap: 8px; padding: 8px; border-radius: 16px; background: #fff; }
.hc-dsearch__field input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; padding: 0 14px; font: inherit; font-size: 18px; color: var(--hc-secondary); }
.hc-dsearch__field input::placeholder { color: var(--hc-text-3); }
.hc-dsearch__field:focus-within { box-shadow: 0 0 0 3px rgba(196, 232, 60, .6); }
.hc-dsearch__field .button { border: 0; cursor: pointer; flex-shrink: 0; }
.hc-dsearch__prices { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
.hc-dsearch__prices li { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 12px 16px; border-radius: 12px; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.14); }
.hc-dsearch__prices span { font-weight: 600; }
.hc-dsearch__prices strong { color: var(--hc-text-1); font-weight: 500; }
.hc-dsearch__stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; padding-top: 18px; border-top: 1px solid rgba(255,255,255,.16); }
.hc-dsearch__stats li { display: flex; flex-direction: column; gap: 4px; }
.hc-dsearch__stats strong { font-weight: 600; line-height: 1.1; }
.hc-dsearch__stats span { color: var(--hc-text-1); }
@media (max-width: 1124px) { .hc-dsearch__panel { grid-template-columns: 1fr; } }
@media (max-width: 575px) {
  .hc-dsearch__panel { padding: 20px 16px; }
  .hc-dsearch__field { flex-direction: column; }
  .hc-dsearch__field input { padding: 12px; }
  .hc-dsearch__field .button { width: 100%; justify-content: center; }
}

/* ---------- newsletter ---------- */
.hc-news__panel { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 70px); align-items: center; background: var(--hc-secondary); border-radius: clamp(24px, 3vw, 40px); padding: clamp(28px, 5vw, 80px); }
.hc-news .heading-area { margin-bottom: 0; }
.hc-news .heading-area h2 { color: #fff; }
.hc-news .heading-area p { color: var(--hc-text-1); }
.hc-news .heading-area .badge { display: inline-flex; align-items: center; gap: 8px; color: var(--hc-text-1); background: rgba(37,99,235,.2); }
.hc-news .heading-area .badge img { width: 18px; height: 18px; }
.hc-news__form { display: flex; gap: 8px; padding: 8px; border-radius: 16px; background: #fff; }
.hc-news__form input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; padding: 0 14px; font: inherit; font-size: 18px; color: var(--hc-secondary); }
.hc-news__form .button { border: 0; cursor: pointer; flex-shrink: 0; }
@media (max-width: 991px) { .hc-news__panel { grid-template-columns: 1fr; } }
@media (max-width: 575px) { .hc-news__form { flex-direction: column; } .hc-news__form input { padding: 12px; } .hc-news__form .button { width: 100%; justify-content: center; } }

/* ---------- rich text / html ---------- */
.hc-richtext .hc-prose { max-width: 820px; margin: 0 auto; }
.hc-richtext.is-left .hc-prose { margin-left: 0; }

/* pricing footnote sits close to a logo strip that follows the plans */
.hc-pricing:has(+ .hc-logos) { padding-bottom: clamp(10px, 1vw, 16px); }
.hc-pricing + .hc-logos { padding-top: clamp(12px, 1.2vw, 20px); }

/* ---------- green hosting band (full width) ---------- */
.hc-gband { position: relative; overflow: hidden; padding: clamp(56px, 6vw, 100px) 0; color: #fff; background: radial-gradient(ellipse 70% 90% at 75% 50%, #1D5B45 0%, rgba(29,91,69,0) 70%), linear-gradient(120deg, #0F3D2E 0%, #134A38 55%, #0E3829 100%); }
.hc-gband__grid { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(260px, 1fr); gap: clamp(32px, 6vw, 120px); align-items: center; }
.hc-gband__title { color: #fff !important; font-size: clamp(28px, 2.4vw, 40px); font-weight: 600; line-height: 1.15; letter-spacing: -.01em; margin: 0 0 clamp(18px, 1.6vw, 24px); }
.hc-gband__tags { display: flex; flex-wrap: wrap; gap: 12px; margin: 0 0 clamp(20px, 2vw, 28px); padding: 0; list-style: none; }
.hc-gband__tags li { display: inline-flex; align-items: center; gap: 10px; padding: 9px 18px; border-radius: 110px; border: 1px solid rgba(255,255,255,.28); background: rgba(255,255,255,.08); color: #fff; font-weight: 500; }
.hc-gband__tags li::before { content: ""; width: 14px; height: 14px; flex: none; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5l5 5L20 6.5'/%3E%3C/svg%3E") center / contain no-repeat; }
.hc-gband__body { color: rgba(255,255,255,.86); font-size: clamp(16px, 1.15vw, 19px); line-height: 1.6; max-width: 720px; }
.hc-gband__body p { margin: 0; }
.hc-gband__body p + p { margin-top: 1em; }
.hc-gband__card { display: flex; flex-direction: column; align-items: center; text-align: center; padding: clamp(28px, 2.6vw, 40px) clamp(24px, 2.4vw, 40px); border-radius: var(--hc-radius); border: 1px solid rgba(255,255,255,.2); background: rgba(255,255,255,.1); box-shadow: 0 20px 50px rgba(0,0,0,.18); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); max-width: 360px; width: 100%; justify-self: center; }
.hc-gband__icon { display: inline-flex; align-items: center; justify-content: center; width: 80px; height: 80px; border-radius: 50%; background: rgba(255,255,255,.14); color: #fff; margin-bottom: clamp(20px, 2vw, 30px); }
.hc-gband__label { color: rgba(255,255,255,.85); font-size: 15px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
.hc-gband__value { color: #fff; font-size: clamp(56px, 5vw, 80px); font-weight: 700; line-height: 1.05; letter-spacing: -.03em; margin: 6px 0 4px; }
.hc-gband__note { color: rgba(255,255,255,.75); font-size: 17px; }
@media (max-width: 860px) { .hc-gband__grid { grid-template-columns: 1fr; } .hc-gband__card { justify-self: start; } }
/* a boxed logo band after the plans keeps even spacing inside its lines */
.hc-pricing + .hc-logos.is-band { padding-top: clamp(30px, 3.5vw, 56px); margin-top: clamp(16px, 1.6vw, 24px); }

/* feature sections with an image beside them: a heading size that suits the half-width column */
.hosting-features.hc-split .heading-area h2.heading-3 { font-size: clamp(28px, 2.5vw, 42px); line-height: 1.15; }
/* ==========================================================================
   30 · Company pages (co_* sets, glossary browser, company/website template)
   ========================================================================== */

/* ---------- shared bits ---------- */
:root {
  --hc-cat-c-0: #2563EB; --hc-cat-b-0: rgba(37,99,235,.1);
  --hc-cat-c-1: #8F61F6; --hc-cat-b-1: rgba(143,97,246,.1);
  --hc-cat-c-2: #16A34A; --hc-cat-b-2: rgba(22,163,74,.1);
  --hc-cat-c-3: #B7791F; --hc-cat-b-3: rgba(255,199,17,.14);
  --hc-cat-c-4: #DC2626; --hc-cat-b-4: rgba(220,38,38,.1);
  --hc-cat-c-5: #0891B2; --hc-cat-b-5: rgba(8,145,178,.1);
}
.hc-co-note { display: block; width: max-content; max-width: 100%; margin: calc(clamp(18px, 4vw, 40px) * -0.5) auto clamp(20px, 3vw, 36px); padding: 6px 14px; border-radius: 110px; background: rgba(81,96,114,.08); color: var(--hc-text-2); text-align: center; }
.heading-area.is-left + .hc-co-note, .is-left .hc-co-note { margin-left: 0; }
.tone-dark .hc-co-note { background: rgba(255,255,255,.08); color: var(--hc-text-1); }
.hc-co-small { display: block; color: var(--hc-text-3); line-height: 1.5; }
.hc-co-kicker { display: inline-block; align-self: flex-start; padding: 5px 12px; border-radius: 110px; background: rgba(37,99,235,.1); color: var(--hc-primary); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; margin-bottom: 14px; }
.hc-co-meta { display: block; color: var(--hc-green); font-weight: 600; margin: -2px 0 10px; }
.heading-area .heading-3.is-sm { font-size: clamp(32px, 2.8vw, 48px); line-height: 1.08; }
.hc-btn-row.is-center { justify-content: center; }

/* label / value rows (phone-hours style) */
.hc-co-rows { list-style: none; margin: 0; padding: 0 clamp(18px, 2vw, 28px); background: #fff; border: 1px solid var(--hc-line); border-radius: var(--hc-radius); }
.tone-soft .hc-co-rows { border-color: transparent; }
.hc-co-rows li { display: flex; justify-content: space-between; align-items: baseline; gap: 8px 20px; padding: clamp(12px, 1.4vw, 18px) 0; border-bottom: 1px solid var(--hc-line); color: var(--hc-text-2); font-size: clamp(15px, 1vw, 18px); line-height: 1.45; }
.hc-co-rows li:last-child { border-bottom: 0; }
.hc-co-rows li strong, .hc-co-rows li a { color: var(--hc-secondary); font-weight: 600; text-align: right; }
.hc-co-rows li a { color: var(--hc-primary); word-break: break-word; }
.hc-co-rows li.is-stack { flex-direction: column; align-items: flex-start; gap: 4px; }
.hc-co-rows li.is-stack strong { text-align: left; }
@media (max-width: 480px) {
  .hc-co-rows li.is-pair { flex-direction: column; gap: 4px; }
  .hc-co-rows li.is-pair strong, .hc-co-rows li.is-pair a { text-align: left; }
}

/* dark callout box (contact page "Twitter / X" card style) */
.hc-co-callout { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: clamp(22px, 2.5vw, 40px); border-radius: var(--hc-radius); background: var(--hc-secondary); }
.hc-co-callout strong { color: #fff; font-weight: 600; line-height: 1.3; }
.hc-co-callout p { color: var(--hc-text-1); margin: 0 0 6px; }

/* filter chips */
.hc-co-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 0 auto clamp(24px, 3vw, 40px); }
.hc-co-chip { display: inline-flex; align-items: center; gap: 8px; padding: 9px 18px; border-radius: 110px; border: 1px solid var(--hc-line); background: #fff; color: var(--hc-text-2); font-size: 16px; font-weight: 500; cursor: pointer; transition: all .2s; }
.hc-co-chip span { font-size: 13px; padding: 1px 7px; border-radius: 20px; background: rgba(81,96,114,.1); }
.hc-co-chip:hover { border-color: var(--hc-primary); color: var(--hc-primary); }
.hc-co-chip.is-on { background: var(--hc-blue); color: #fff; border-color: transparent; box-shadow: 0 6px 16px rgba(37,99,235,.22); }
.hc-co-chip.is-on span { background: rgba(255,255,255,.2); }

/* coupon code + copy */
.hc-co-code { display: flex; align-items: stretch; border: 1px dashed var(--hc-primary); border-radius: 10px; overflow: hidden; background: var(--hc-soft); }
.hc-co-code__value { flex: 1; min-width: 0; padding: 12px 14px; font-weight: 600; letter-spacing: .06em; color: var(--hc-secondary); align-self: center; overflow-wrap: anywhere; }
.hc-co-code__btn { display: inline-flex; align-items: center; justify-content: center; border: 0; border-left: 1px dashed var(--hc-primary); background: var(--hc-primary); color: #fff; padding: 0 18px; font-size: 15px; font-weight: 600; cursor: pointer; white-space: nowrap; transition: background .2s; }
.hc-co-code__btn:hover { background: #1D4ED8; color: #fff; }
.hc-co-code__btn.is-copied { background: var(--hc-green); }
.hc-co-code.is-light { background: #fff; border-color: rgba(255,255,255,.7); }
.hc-co-code.is-light .hc-co-code__value { font-size: clamp(18px, 1.4vw, 24px); padding: 16px 18px; }

/* tinted tags */
.hc-co-tag-blue { color: #2563EB !important; background: rgba(37,99,235,.1) !important; }
.hc-co-tag-green { color: #16A34A !important; background: rgba(22,163,74,.1) !important; }
.hc-co-tag-grey { color: #516072 !important; background: rgba(81,96,114,.1) !important; }
.hc-co-tag-pill { color: #fff !important; background: #16A34A !important; }
.tags { display: flex; flex-wrap: wrap; gap: 6px; }
.tags .tag { display: inline-block; padding: 6px 12px; border-radius: 110px; font-weight: 600; font-size: 14px; line-height: 1.2; }

/* ---------- co_page_hero ---------- */
.hc-cohero .content--area { padding-bottom: clamp(60px, 6vw, 110px) !important; }
.hc-cohero.is-centered .content--area { max-width: 1040px; }
.hc-cohero.is-centered .hc-cohero__text { display: flex; flex-direction: column; align-items: center; text-align: center; }
.hc-cohero .hc-crumbs { margin-bottom: 18px; }
.hc-cohero .heading-1 { text-wrap: balance; }
.hc-cohero.size-small .heading-1 { font-size: clamp(36px, 3.8vw, 60px); }
.hc-cohero.size-large .heading-1 { font-size: clamp(42px, 5vw, 80px); }
.hc-cohero .sub-heading { margin: 0 auto; text-wrap: pretty; }
.hc-cohero .hc-btn-row { justify-content: center; }
.hc-cohero .hc-btn-row .link-arrow { color: #fff; }
.hc-cohero .hc-btn-row .link-arrow:hover { color: var(--hc-lime); }
.hc-cohero__stats { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px clamp(24px, 4vw, 56px); margin-top: clamp(24px, 2.5vw, 40px); }
.hc-cohero__stats > div { display: flex; flex-direction: column; gap: 6px; }
.hc-cohero__stats strong { color: #fff; font-weight: 600; }
.hc-cohero__stats span { color: var(--hc-text-1); }
.hc-cohero__note { color: var(--hc-text-1) !important; margin-top: 16px; }
.hc-cohero__meta { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 16px; margin-top: 22px; color: var(--hc-text-1) !important; }
.hc-cohero__meta span + span::before { content: '•'; margin-right: 16px; opacity: .6; }

/* text + side panel */
.hc-cohero.has-aside .content--area { max-width: none; align-items: stretch; text-align: left; }
.hc-cohero.has-aside .hc-cohero__grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(28px, 4vw, 80px); align-items: center; }
.hc-cohero.has-aside .heading-1 { font-size: clamp(36px, 3.8vw, 64px); line-height: 1.04; text-align: left; }
.hc-cohero.has-aside .sub-heading { margin: 0; max-width: 640px; }
.hc-cohero.has-aside .hc-crumbs, .hc-cohero.has-aside .hc-btn-row, .hc-cohero.has-aside .hc-cohero__stats, .hc-cohero.has-aside .hc-cohero__meta { justify-content: flex-start; }
.hc-cohero.has-aside .hc-cohero__stats { margin-top: 28px; }
@media (max-width: 1124px) {
  .hc-cohero.has-aside .hc-cohero__grid { grid-template-columns: 1fr; }
}

/* side panels */
.hc-cohero-aside { position: relative; z-index: 2; display: flex; flex-direction: column; gap: 14px; padding: clamp(24px, 2.6vw, 44px); border-radius: var(--hc-radius); text-align: left; }
.hc-cohero-aside.is-glass { background: rgba(255,255,255,.08); border: 1px solid rgba(190,219,255,.28); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.hc-cohero-aside.is-navy { background: var(--hc-secondary); border: 1px solid var(--hc-primary); }
.hc-cohero-aside.is-white { background: #fff; box-shadow: 0 30px 70px rgba(5,18,74,.3); }
.hc-cohero-aside__label { color: var(--hc-lime); font-size: 14px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
.hc-cohero-aside__lead { color: #fff !important; font-size: clamp(18px, 1.4vw, 24px); line-height: 1.5; margin: 0; }
.hc-cohero-aside .list { margin: 6px 0 0; padding-top: 16px; border-top: 1px solid rgba(190,219,255,.2); }
.hc-cohero-aside .list li { color: var(--hc-text-1); }
.hc-cohero-aside.is-white .list { border-top-color: var(--hc-line); }
.hc-cohero-aside.is-white .list li { color: var(--hc-text-2); }
.hc-cohero-aside.is-white .badge.b-normal { align-self: flex-start; margin: 0; color: var(--hc-primary); background: rgba(37,99,235,.1); }
.hc-cohero-aside__quote { margin: 4px 0 0; color: var(--hc-secondary); font-size: clamp(20px, 1.6vw, 28px); line-height: 1.4; font-weight: 400; }
.hc-cohero-aside__cite { color: var(--hc-text-3); }
.hc-cohero-aside__points li { display: flex; flex-direction: column; gap: 2px; margin-bottom: 12px; }
.hc-cohero-aside__points li::before { top: 4px; transform: none; }
.hc-cohero-aside__points strong { color: var(--hc-secondary); font-weight: 600; }
.hc-cohero-aside__points span { font-size: 15px; line-height: 1.5; }
.hc-cohero-aside__price { display: flex; align-items: flex-end; gap: 8px; }
.hc-cohero-aside__price strong { color: #fff; font-size: clamp(54px, 5vw, 80px); line-height: 1; font-weight: 600; letter-spacing: -.03em; }
.hc-cohero-aside__price span { color: var(--hc-text-1); padding-bottom: 10px; }
.hc-cohero-aside.is-navy p { color: var(--hc-text-1); margin: 0; }
.hc-cohero-aside__title { color: var(--hc-secondary) !important; font-weight: 600; line-height: 1.25; margin: 0; }
.hc-cohero-aside__text { color: var(--hc-text-2) !important; margin: 0; }
.hc-cohero-aside__note { color: var(--hc-text-3); text-align: center; line-height: 1.5; }
.hc-cohero-aside .button { width: 100%; margin-top: 6px; }
.hc-cohero-aside .link-arrow { justify-content: center; }
.hc-cohero-aside.is-stat { gap: 12px; }
.hc-cohero-aside.is-stat .hc-green__note { color: var(--hc-text-1); }
.hc-cohero:not(.is-green) .hc-cohero-aside.is-stat .hc-green__value { background: none; -webkit-text-fill-color: #fff; color: #fff; }
.hc-cohero.is-green .badge.b-normal { color: var(--hc-lime); }

/* numbered steps */
.hc-co-steps { list-style: none; margin: 4px 0; padding: 0; display: flex; flex-direction: column; gap: 0; }
.hc-co-steps li { position: relative; display: flex; gap: 16px; padding-bottom: 18px; }
.hc-co-steps li:not(:last-child)::after { content: ''; position: absolute; left: 21px; top: 46px; bottom: 4px; width: 2px; background: rgba(37,99,235,.2); }
.hc-co-steps__num { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; border: 2px solid var(--hc-primary); color: var(--hc-primary); font-weight: 600; font-size: 15px; background: #fff; }
.hc-co-steps li div { display: flex; flex-direction: column; gap: 3px; padding-top: 9px; }
.hc-co-steps strong { color: var(--hc-secondary); font-weight: 600; font-size: clamp(16px, 1.1vw, 19px); }
.hc-co-steps span { color: var(--hc-text-2); font-size: 15px; line-height: 1.5; }

/* in-page nav */
.hc-cohero.has-nav .content--area { padding-bottom: clamp(50px, 5vw, 90px) !important; }
.hc-cohero #banner-page-nav nav ul { flex-wrap: wrap; gap: 10px clamp(28px, 3.4vw, 64px); }
.hc-cohero #banner-page-nav.is-sticky { top: 72px; }
.hc-cohero #banner-page-nav.is-sticky nav ul li a { color: var(--hc-text-2); }
.hc-cohero #banner-page-nav.is-sticky nav ul li a.active { color: var(--hc-primary); }
#banner-page-nav + .banner-nav-placeholder { display: block; }
@media (min-width: 992px) { .hc-cohero #banner-page-nav { display: block; } }

/* hero cards overlapping the next section */
.hc-cohero.has-cards .content--area { padding-bottom: clamp(150px, 12vw, 210px) !important; }
.hc-cohero-cards { position: relative; z-index: 3; margin-top: clamp(-150px, -9vw, -100px); padding-bottom: clamp(30px, 4vw, 60px); }
.hc-cohero-cards__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2vw, 30px); }
.hc-cohero-cards__grid.hc-n-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 1100px; margin: 0 auto; }
.hc-cohero-cards__grid.hc-n-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.hc-cohero-card { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: clamp(22px, 2.5vw, 40px); border-radius: var(--hc-radius); background: #fff; border: 1px solid var(--hc-line); box-shadow: 0 20px 50px rgba(15,23,42,.08); transition: border-color .2s; }
.hc-cohero-card:hover { border-color: var(--hc-primary); }
.hc-cohero-card img { width: clamp(52px, 3.6vw, 64px); height: auto; margin-bottom: 8px; }
.hc-cohero-card h2 { color: var(--hc-secondary) !important; font-weight: 600; line-height: 1.25; margin: 0; }
.hc-cohero-card__meta { color: var(--hc-primary); }
.hc-cohero-card__meta strong { font-weight: 600; }
.hc-cohero-card p { color: var(--hc-text-2) !important; line-height: 1.55; margin: 0 0 6px; flex: 1; }
@media (max-width: 1124px) {
  .hc-cohero-cards__grid, .hc-cohero-cards__grid.hc-n-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 768px) {
  .hc-cohero-cards__grid, .hc-cohero-cards__grid.hc-n-2, .hc-cohero-cards__grid.hc-n-4 { grid-template-columns: 1fr; }
  .hc-cohero.has-cards .content--area { padding-bottom: 130px !important; }
  .hc-cohero-cards { margin-top: -90px; }
}

/* ---------- co_stats_row ---------- */
.hc-costats__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(16px, 2vw, 30px); }
.hc-costats__grid.hc-n-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.hc-costats__grid.hc-n-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.hc-costats__grid.hc-n-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.hc-costats__item { display: flex; flex-direction: column; gap: 10px; }
.hc-costats__item strong { font-size: clamp(32px, 2.8vw, 52px); }
.hc-costats__item span { color: var(--hc-text-2); line-height: 1.45; }
.hc-costats.is-cards .hc-costats__item { padding: clamp(22px, 2.5vw, 40px); border-radius: var(--hc-radius); background: #fff; }
.hc-costats.is-lined .hc-costats__item { padding: 4px 0 4px clamp(18px, 2vw, 32px); border-left: 3px solid rgba(37,99,235,.15); }
.hc-costats.is-lined .hc-costats__item:first-child { border-left-color: var(--hc-primary); }
@media (max-width: 1124px) {
  .hc-costats__grid, .hc-costats__grid.hc-n-3, .hc-costats__grid.hc-n-5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 480px) {
  .hc-costats__grid, .hc-costats__grid.hc-n-2, .hc-costats__grid.hc-n-3, .hc-costats__grid.hc-n-5 { grid-template-columns: 1fr; }
}

/* ---------- co_timeline (journey) ---------- */
.why-us.milestone.hc-cotimeline { padding: var(--hc-sec) 0; }
.why-us.milestone.tone-soft { background: var(--hc-soft); }
.why-us.milestone.tone-dark { background: var(--hc-secondary); }
.why-us.milestone.tone-dark .why-us-details-wrapper { border: 1px solid rgba(37,99,235,.5); }
.hc-cotimeline .why-us-details-wrapper .heading-area { max-width: none; }
.hc-cotimeline .why-us-details-wrapper .heading-area h2 { color: #fff; margin-bottom: clamp(16px, 1.5vw, 24px); }
.hc-cotimeline .why-us-details-wrapper .heading-area h2 span { font-weight: 600; }
.hc-cotimeline .why-us-details-wrapper .heading-area p { color: var(--hc-text-1); }
.hc-cotimeline .why-us-details-wrapper .counter .item strong { display: block; margin-bottom: 12px; }
.hc-cotimeline .why-us-details-wrapper .counter .item .title { display: block; color: var(--hc-text-1); line-height: 1.45; }
.hc-cotimeline .why-us-details-wrapper .hc-co-note { margin: 20px 0 0; }
.hc-cotimeline .why-us-features .item section { min-width: 0; }
.hc-cotimeline .why-us-features .item .date { flex: none; font-weight: 600; white-space: nowrap; }
.hc-cotimeline .why-us-features .item h3.title { display: block; font-weight: 500; color: var(--hc-secondary); margin: 0 0 8px; line-height: 1.3; }
.hc-cotimeline .why-us-features .item:last-child { margin-bottom: 0; }
.hc-cotimeline .why-us-features::before { height: calc(100% - 60px); top: 30px; }
.why-us.milestone.tone-soft .why-us-features .item { border-color: transparent; }
@media (max-width: 768px) {
  .hc-cotimeline .why-us-features { padding-left: 24px; }
  .hc-cotimeline .why-us-features .item::before { left: -35px !important; top: 34px !important; }
}

/* ---------- co_split_grid ---------- */
.hc-cosplit__grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(28px, 5vw, 100px); align-items: start; }
.hc-cosplit__head { position: sticky; top: 130px; }
.hc-cosplit__head .heading-area { margin: 0; max-width: 560px; }
.hc-cosplit__head .hc-btn-row { margin-top: clamp(20px, 2vw, 32px); }
.hc-cosplit__cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(16px, 2vw, 30px); }
.hc-cosplit__card { padding: clamp(22px, 2.5vw, 40px); border-radius: var(--hc-radius); background: #fff; border: 1px solid var(--hc-line); transition: border-color .2s; }
.hc-cosplit__card:hover { border-color: var(--hc-primary); }
.tone-soft .hc-cosplit__card { border-color: transparent; }
.hc-cosplit__card img { width: clamp(52px, 3.6vw, 64px); height: auto; margin-bottom: clamp(16px, 1.4vw, 24px); }
.hc-cosplit h3 { color: var(--hc-secondary); font-weight: 500; line-height: 1.3; margin: 0 0 8px; }
.hc-cosplit p { color: var(--hc-text-2); margin: 0; }
.hc-cosplit.tone-dark .hc-cosplit__card { background: transparent; border-color: rgba(37,99,235,.6); }
.hc-cosplit.tone-dark .hc-cosplit__card:hover { border-color: var(--hc-primary); background: rgba(37,99,235,.06); }
.hc-cosplit.tone-dark h3 { color: #fff; }
.hc-cosplit.tone-dark p { color: var(--hc-text-1); }
.hc-cosplit.tone-dark .heading-area p { color: var(--hc-text-1); }
.hc-cosplit__steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: clamp(14px, 1.6vw, 24px); }
.hc-cosplit__steps li { display: flex; gap: clamp(16px, 2vw, 28px); padding: clamp(22px, 2.5vw, 36px); border-radius: var(--hc-radius); background: #fff; border: 1px solid var(--hc-line); }
.tone-soft .hc-cosplit__steps li { border-color: transparent; }
.hc-cosplit .hc-num { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 14px; background: rgba(37,99,235,.1); color: var(--hc-primary); font-weight: 600; font-size: 18px; }
.tone-dark .hc-cosplit__steps li { background: transparent; border-color: rgba(37,99,235,.6); }
.hc-cosplit__dated { display: flex; flex-direction: column; gap: clamp(14px, 1.6vw, 24px); }
.hc-cosplit__date-item { display: flex; gap: clamp(16px, 2vw, 32px); align-items: flex-start; padding: clamp(22px, 2.5vw, 36px); border-radius: var(--hc-radius); background: #fff; border: 1px solid var(--hc-line); }
.hc-co-date { flex: none; display: inline-block; padding: clamp(12px, 1.2vw, 18px); border-radius: 16px; background: #EDF5FF; color: var(--hc-primary); font-weight: 600; white-space: nowrap; }
@media (max-width: 1124px) {
  .hc-cosplit__grid { grid-template-columns: 1fr; }
  .hc-cosplit__head { position: static; }
}
@media (max-width: 640px) {
  .hc-cosplit__cards { grid-template-columns: 1fr; }
  .hc-cosplit__steps li, .hc-cosplit__date-item { flex-direction: column; }
}

/* ---------- co_card_grid ---------- */
.hc-cocards .features-box-wrapper .item { display: flex; flex-direction: column; align-items: flex-start; transition: border-color .2s; }
.hc-cocards .features-box-wrapper .item:hover { border-color: var(--hc-primary); }
.hc-cocards.tone-white .features-box-wrapper .item { border: 1px solid var(--hc-line); }
.hc-cocards.tone-soft .features-box-wrapper .item { border: 1px solid transparent; }
.hc-cocards .features-box-wrapper .item h3.title { color: var(--hc-secondary); font-weight: 500; line-height: 1.3; margin-bottom: 8px; }
.hc-cocards.is-tint.tone-white .features-box-wrapper .item { background: var(--hc-soft); border-color: transparent; }
.hc-cocards.is-green .features-box-wrapper .item { background: linear-gradient(160deg, #F0FDF4 0%, #fff 60%); border-color: #D1FADF; }
.hc-cocards.is-green .features-box-wrapper .item img { filter: hue-rotate(-95deg) saturate(1.1); }
.hc-cocards.is-green .features-box-wrapper .item:hover { border-color: var(--hc-green); }
.hc-cocards.is-numbered .hc-num { margin-bottom: clamp(18px, 1.5vw, 28px); }
.hc-cocards.is-topline .features-box-wrapper .item { border-top: 3px solid rgba(37,99,235,.18) !important; }
.hc-cocards.is-topline .features-box-wrapper .item:first-child { border-top-color: var(--hc-primary) !important; }
.hc-cocards.tone-dark { background: var(--hc-secondary); }
.hc-cocards.tone-dark .features-box-wrapper .item { background: transparent; border: 1px solid rgba(37,99,235,.6); }
.hc-cocards.tone-dark .features-box-wrapper .item:hover { border-color: var(--hc-primary); background: rgba(37,99,235,.06); }
.hc-cocards.tone-dark .features-box-wrapper .item h3.title { color: #fff; }
.hc-cocards.tone-dark .features-box-wrapper .item p { color: var(--hc-text-1); }
.hc-cocards.tone-dark .hc-co-kicker { background: rgba(37,99,235,.2); color: var(--hc-text-1); }
.hc-cocards .features-box-wrapper.hc-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 1124px) { .hc-cocards .features-box-wrapper.hc-cols-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 768px) { .hc-cocards .features-box-wrapper.hc-cols-3 { grid-template-columns: 1fr; } }

/* ---------- co_compare_table ---------- */
.hc-cocompare .table-area { padding: 0; }
.hc-cocompare .compare-table { overflow-x: auto !important; -webkit-overflow-scrolling: touch; }
.hc-cocompare .compare-table table { min-width: 680px; width: 100% !important; }
.hc-cocompare .compare-table thead th { vertical-align: top; padding: clamp(20px, 2.4vw, 40px) clamp(16px, 2vw, 40px); color: var(--hc-secondary); }
.hc-cocompare .compare-table thead th:first-child { vertical-align: bottom; }
.hc-cocompare .compare-table tbody td { padding: clamp(12px, 1.4vw, 22px) clamp(16px, 2vw, 40px); vertical-align: middle; line-height: 1.4; }
.hc-cocompare .compare-table thead th:nth-child(2), .hc-cocompare .compare-table tbody td:nth-child(2) { color: var(--hc-secondary); }
.hc-cocompare .compare-table tbody td:first-child { color: var(--hc-secondary); font-weight: 500; }
.hc-cocompare .compare-table thead th.is-hl { background: var(--hc-blue) !important; color: #fff; }
.hc-cocompare .compare-table tbody td.is-hl { color: var(--hc-primary) !important; font-weight: 500; background-color: rgba(37,99,235,.06) !important; }
.hc-cocompare .compare-table tbody tr:nth-child(even) td.is-hl { background-color: rgba(37,99,235,.1) !important; }
.hc-cocompare__col { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.hc-cocompare__name { font-size: clamp(18px, 1.5vw, 26px); font-weight: 500; line-height: 1.2; }
.hc-cocompare__logo { height: clamp(22px, 1.8vw, 30px); width: auto; }
.is-hl .hc-cocompare__logo { filter: brightness(0) invert(1); }
.hc-cocompare__price { font-size: clamp(24px, 2vw, 36px); font-weight: 600; line-height: 1; letter-spacing: -.02em; }
.hc-cocompare__price small { display: inline !important; font-size: 50%; font-weight: 400; opacity: .7; margin-left: 2px; }
.hc-cocompare__note { font-size: 14px; font-weight: 400; color: var(--hc-text-3); }
.is-hl .hc-cocompare__note { color: var(--hc-text-1); }
.hc-cocompare__col .button { margin-top: 6px; }
.hc-cocompare__col .link-arrow { font-size: 16px; }
.is-hl .hc-cocompare__col .link-arrow { color: #fff; }
.hc-cocompare .compare-table tr.hc-group th { text-align: left; padding: 14px clamp(16px, 2vw, 40px); background: #EDF5FF !important; color: var(--hc-primary); font-weight: 600; font-size: 14px; letter-spacing: .08em; text-transform: uppercase; }
.hc-cocompare .compare-table .yes, .hc-cocompare .compare-table .no, .hc-cocompare .compare-table .none { vertical-align: -3px; margin-right: 6px; }
.hc-cocompare .compare-table .yes::before, .hc-cocompare .compare-table .no::before, .hc-cocompare .compare-table .none::before { top: 0; }
.hc-cocompare__foot { display: flex; justify-content: space-between; gap: 10px 24px; flex-wrap: wrap; margin-top: 16px; color: var(--hc-text-3); }

/* ---------- co_cost_bars ---------- */
.hc-cobars__card { padding: clamp(22px, 2.6vw, 44px); border-radius: var(--hc-radius); background: #fff; }
.hc-cobars__head { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px 30px; margin-bottom: clamp(20px, 2vw, 32px); }
.hc-cobars__head h2 { color: var(--hc-secondary) !important; font-weight: 500; margin: 0; }
.hc-cobars__legend, .hc-cobars__parts { display: flex; flex-wrap: wrap; gap: 8px 20px; color: var(--hc-text-2); }
.hc-cobars__legend span, .hc-cobars__parts span { display: inline-flex; align-items: center; gap: 8px; }
.hc-cobars i { display: inline-block; width: 12px; height: 12px; border-radius: 4px; }
.hc-cobars i.is-first { background: #9DBBFF; }
.hc-cobars i.is-second { background: var(--hc-primary); }
.hc-cobars__rows { display: flex; flex-direction: column; gap: clamp(18px, 2vw, 28px); }
.hc-cobars__label { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 10px; }
.hc-cobars__name { color: var(--hc-text-2); font-size: clamp(15px, 1vw, 18px); }
.hc-cobars__name small { color: var(--hc-text-3); font-size: 14px; }
.hc-cobars__total { color: var(--hc-secondary); font-weight: 600; font-size: clamp(16px, 1.1vw, 20px); white-space: nowrap; }
.hc-cobars__track { display: flex; height: 20px; border-radius: 10px; overflow: hidden; background: rgba(81,96,114,.12); }
.hc-cobars__seg { display: block; height: 100%; }
.hc-cobars__seg.is-first { background: #B8C2CF; }
.hc-cobars__seg.is-second { background: var(--hc-text-2); }
.hc-cobars__row:not(.is-hl) .hc-cobars__parts i.is-first { background: #B8C2CF; }
.hc-cobars__row:not(.is-hl) .hc-cobars__parts i.is-second { background: var(--hc-text-2); }
.hc-cobars__row.is-hl .hc-cobars__name { color: var(--hc-secondary); font-weight: 600; }
.hc-cobars__row.is-hl .hc-cobars__total { color: var(--hc-primary); font-size: clamp(20px, 1.5vw, 26px); }
.hc-cobars__row.is-hl .hc-cobars__track { height: 26px; background: linear-gradient(90deg, rgba(37,99,235,.1), rgba(11,42,161,.1)); }
.hc-cobars__row.is-hl .hc-cobars__seg.is-first { background: #9DBBFF; }
.hc-cobars__row.is-hl .hc-cobars__seg.is-second { background: linear-gradient(90deg, #2563EB, #0B2AA1); }
.hc-cobars__parts { margin-top: 8px; color: var(--hc-text-3); }
.hc-cobars__summary { margin: clamp(20px, 2vw, 32px) 0 0; padding-top: 16px; border-top: 1px solid var(--hc-line); color: var(--hc-text-2); }

/* ---------- co_detail_panels ---------- */
.hc-copanels__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(20px, 2vw, 30px); align-items: start; }
.hc-copanel { display: flex; flex-direction: column; gap: 16px; padding: clamp(24px, 3vw, 56px); border-radius: var(--hc-radius); background: #fff; border: 1px solid var(--hc-line); }
.tone-soft .hc-copanel { border-color: transparent; }
.hc-copanel h2 { color: var(--hc-secondary); font-weight: 500; line-height: 1.2; margin: 0; }
.hc-copanel h2 span { font-weight: 600; }
.hc-copanel > p { color: var(--hc-text-2); margin: 0; }
.hc-copanel__checks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 20px; margin: 4px 0 0; color: var(--hc-text-2); }
.hc-copanel__checks li { margin: 0; line-height: 1.4; }
.hc-copanel__checks li::before { top: 2px; transform: none; }
.hc-copanel .hc-co-rows { padding: 0 clamp(16px, 1.6vw, 24px); background: var(--hc-soft); border-color: transparent; }
@media (max-width: 991px) { .hc-copanels__grid { grid-template-columns: 1fr; } }
@media (max-width: 480px) { .hc-copanel__checks { grid-template-columns: 1fr; } }

/* ---------- co_key_table ---------- */
.hc-cokeys__wide { max-width: 1100px; margin: 0 auto; border-radius: var(--hc-radius); overflow: hidden; background: #fff; border: 1px solid var(--hc-line); }
.tone-soft .hc-cokeys__wide { border-color: transparent; }
.hc-cokeys__row { display: grid; grid-template-columns: minmax(160px, .4fr) 1fr; gap: 8px 30px; padding: clamp(16px, 1.8vw, 26px) clamp(20px, 2.6vw, 44px); border-top: 1px solid var(--hc-line); }
.hc-cokeys__row:first-child { border-top: 0; }
.hc-cokeys__row:nth-child(even) { background: #FAFCFF; }
.hc-cokeys__row strong { color: var(--hc-secondary); font-weight: 600; font-size: clamp(16px, 1.1vw, 19px); }
.hc-cokeys__row span { color: var(--hc-text-2); font-size: clamp(15px, 1.05vw, 18px); line-height: 1.55; }
.hc-cokeys__grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(28px, 4vw, 80px); align-items: start; }
.hc-cokeys__main .heading-area { margin-bottom: clamp(20px, 2.4vw, 36px); max-width: none; }
.hc-cokeys__side { display: flex; flex-direction: column; gap: clamp(16px, 2vw, 24px); }
.hc-cokeys__group { padding: clamp(22px, 2.5vw, 40px); border-radius: var(--hc-radius); background: #fff; }
.tone-white .hc-cokeys__group { border: 1px solid var(--hc-line); }
.hc-cokeys__group h3 { color: var(--hc-secondary); font-weight: 500; margin: 0 0 14px; line-height: 1.3; }
.hc-cokeys__group .list li { color: var(--hc-text-2); margin-bottom: 10px; line-height: 1.45; }
.hc-cokeys__group .list li::before { top: 3px; transform: none; }
.hc-cokeys__side .hc-co-note { margin: 0; text-align: left; border-radius: 12px; }
@media (max-width: 1124px) { .hc-cokeys__grid { grid-template-columns: 1fr; } }
@media (max-width: 640px) { .hc-cokeys__row { grid-template-columns: 1fr; } }

/* ---------- co_directory_cards ---------- */
.hc-codir.features-box.partners { padding: var(--hc-sec) 0; }
.hc-codir .features-box-wrapper .item { display: flex; flex-direction: column; align-items: stretch; gap: 0; border: 1px solid transparent; transition: border-color .2s; }
.hc-codir .features-box-wrapper .item:hover { border-color: var(--hc-primary); }
.hc-codir .features-box-wrapper .item[hidden] { display: none; }
.hc-codir__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.hc-codir__top:empty { display: none; }
.hc-codir__mark { display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 14px; background: var(--hc-blue); color: #fff; font-weight: 600; font-size: 17px; margin-bottom: 18px; }
.hc-codir__top strong { margin-bottom: 14px; }
.hc-codir .item h3.title { color: var(--hc-secondary); font-weight: 500; line-height: 1.3; }
.hc-codir .item .tags { margin: 4px 0 14px; }
.hc-codir .item p { margin-bottom: 16px !important; }
.hc-codir__facts { margin: 0 0 18px; display: flex; flex-direction: column; border-top: 1px solid var(--hc-line); }
.hc-codir__facts div { display: flex; justify-content: space-between; gap: 14px; padding: 10px 0; border-bottom: 1px solid var(--hc-line); font-size: 15px; }
.hc-codir__facts dt { color: var(--hc-text-3); }
.hc-codir__facts dd { margin: 0; color: var(--hc-secondary); font-weight: 600; text-align: right; }
.hc-codir.is-columns .hc-codir__facts { flex-direction: row; flex-wrap: wrap; gap: 12px 20px; border: 0; padding: 14px 0; border-top: 1px solid var(--hc-line); border-bottom: 1px solid var(--hc-line); }
.hc-codir.is-columns .hc-codir__facts div, .hc-codir.is-stacked .hc-codir__facts div { flex-direction: column; gap: 2px; padding: 0; border: 0; }
.hc-codir.is-columns .hc-codir__facts dd, .hc-codir.is-stacked .hc-codir__facts dd { text-align: left; }
.hc-codir.is-stacked .hc-codir__facts { gap: 12px; border: 0; padding-top: 4px; }
.hc-codir.is-stacked .hc-codir__facts dt { font-size: 13px; text-transform: uppercase; letter-spacing: .06em; }
.hc-codir.is-stacked .hc-codir__facts dd { font-weight: 400; color: var(--hc-text-2); line-height: 1.5; }
.hc-codir__foot { margin-top: auto; padding-top: 16px; border-top: 1px solid var(--hc-line); display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px 16px; }
.hc-codir__foot span { color: var(--hc-text-3); }
.hc-codir__foot .link-arrow.is-muted { color: var(--hc-text-3); }
.hc-codir .item .hc-co-code { margin-top: auto; }

/* ---------- co_earnings_calculator ---------- */
.hc-cocalc__card { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(24px, 4vw, 70px); align-items: center; padding: clamp(24px, 3.5vw, 64px); border-radius: var(--hc-radius); background: #fff; }
.hc-cocalc__input .heading-area { margin-bottom: clamp(20px, 2.4vw, 36px); max-width: none; }
.hc-cocalc__row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.hc-cocalc__row label { color: var(--hc-text-2); }
.hc-cocalc__row strong { color: var(--hc-secondary); font-weight: 600; }
.hc-cocalc input[type=range] { width: 100%; height: 8px; accent-color: var(--hc-primary); cursor: pointer; }
.hc-cocalc__scale { display: flex; justify-content: space-between; margin-top: 8px; color: var(--hc-text-3); }
.hc-cocalc__out { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.hc-cocalc__result { display: flex; flex-direction: column; gap: 10px; padding: clamp(20px, 2.4vw, 36px); border-radius: var(--hc-radius); background: var(--hc-soft); }
.hc-cocalc__result span { color: var(--hc-text-2); }
.hc-cocalc__result strong { color: var(--hc-secondary); font-size: clamp(30px, 2.6vw, 48px); white-space: nowrap; }
.hc-cocalc__result.is-main { background: var(--hc-blue); }
.hc-cocalc__result.is-main span { color: var(--hc-text-1); }
.hc-cocalc__result.is-main strong { color: #fff; }
.hc-cocalc__note { grid-column: 1 / -1; margin: 0; color: var(--hc-text-3); line-height: 1.5; }
@media (max-width: 991px) { .hc-cocalc__card { grid-template-columns: 1fr; } }
@media (max-width: 420px) { .hc-cocalc__out { grid-template-columns: 1fr; } }

/* ---------- co_featured_offer ---------- */
.hc-cooffer__card { position: relative; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(260px, .6fr); gap: clamp(24px, 4vw, 70px); align-items: center; padding: clamp(26px, 4vw, 70px); border-radius: clamp(24px, 2.5vw, 40px); color: #fff; }
.hc-cooffer__card::after { content: ''; position: absolute; right: -120px; top: -120px; width: 360px; height: 360px; border-radius: 50%; background: radial-gradient(circle, rgba(196,232,60,.18), transparent 70%); pointer-events: none; }
.hc-cooffer__text, .hc-cooffer__action { position: relative; z-index: 1; }
.hc-cooffer__badges { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-bottom: 18px; }
.hc-cooffer__badges .badge { margin: 0; }
.hc-cooffer__badges span.text-16 { color: var(--hc-text-1); }
.hc-cooffer h2 { color: #fff; margin: 0 0 18px; line-height: 1.08; }
.hc-cooffer h2 span { font-weight: 600; }
.hc-cooffer__text p { color: var(--hc-text-1); margin: 0; max-width: 720px; }
.hc-cooffer__stats { display: flex; flex-wrap: wrap; gap: 16px clamp(24px, 3vw, 48px); margin: clamp(20px, 2vw, 32px) 0 0; }
.hc-cooffer__stats dt { color: var(--hc-text-1); text-transform: uppercase; letter-spacing: .08em; margin-bottom: 4px; }
.hc-cooffer__stats dd { margin: 0; color: #fff; font-weight: 600; }
.hc-cooffer__action { display: flex; flex-direction: column; gap: 14px; }
.hc-cooffer__action .button { width: 100%; }
.hc-cooffer__note { color: var(--hc-text-1); text-align: center; line-height: 1.5; }
@media (max-width: 991px) { .hc-cooffer__card { grid-template-columns: 1fr; } }

/* ---------- co_form_split ---------- */
.hc-coform__grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(24px, 4vw, 80px); align-items: start; }
.hc-coform.is-form-left .hc-coform__form { order: -1; }
.hc-coform.is-form-left .hc-coform__grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); }
.hc-coform__side { display: flex; flex-direction: column; gap: clamp(18px, 2vw, 28px); }
.hc-coform__side .heading-area { margin: 0; max-width: none; }
.hc-coform__checks li { color: var(--hc-text-2); margin-bottom: 12px; line-height: 1.45; }
.hc-coform__checks li::before { top: 3px; transform: none; }
.hc-coform__lines p { color: var(--hc-text-2); margin: 0 0 8px; }
.hc-coform__box { display: flex; flex-direction: column; gap: 10px; }
.hc-coform__box h3 { color: var(--hc-secondary); font-weight: 600; margin: 0; }
.hc-coform__box > p { color: var(--hc-text-2); margin: 0; }
.hc-coform__form.form-area { display: flex; flex-direction: column; align-items: stretch; padding: clamp(22px, 3vw, 48px); border-radius: var(--hc-radius); border: 1px solid var(--hc-line); background: #fff; }
.tone-soft .hc-coform__form.form-area { border-color: transparent; box-shadow: 0 20px 50px rgba(15,23,42,.06); }
.tone-dark .hc-coform__form.form-area { border: 0; }
.hc-coform__form h3.title { color: var(--hc-secondary); font-weight: 600; margin: 0 0 6px; }
.hc-coform__intro { color: var(--hc-text-2); margin: 0 0 clamp(18px, 2vw, 28px); line-height: 1.5; }
.hc-coform__form h3.title + form { margin-top: clamp(14px, 1.4vw, 24px); }
.hc-co-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(14px, 1.4vw, 24px) clamp(14px, 1.4vw, 24px); margin-bottom: clamp(20px, 2vw, 30px); }
.hc-co-form-grid .form-field { grid-column: 1 / -1; }
.hc-co-form-grid .form-field.is-half { grid-column: span 1; }
.hc-co-form-grid .form-field label { margin-bottom: 6px; }
.hc-co-form-grid .form-field label span { color: #DC2626; }
.hc-co-form-grid .form-field input, .hc-co-form-grid .form-field textarea, .hc-co-form-grid .form-field select { width: 100%; font: inherit; font-size: clamp(15px, 1.05vw, 18px); color: var(--hc-secondary); background: #fff; transition: border-color .2s, box-shadow .2s; }
.hc-co-form-grid .form-field input[type=url], .hc-co-form-grid .form-field input[type=tel], .hc-co-form-grid .form-field input[type=number] { border-radius: 8px; border: 1px solid #E8E8E8; height: 50px; padding: 12px; }
.hc-co-form-grid .form-field textarea { height: auto; min-height: 140px; resize: vertical; }
.hc-co-form-grid .form-field input:focus, .hc-co-form-grid .form-field textarea:focus, .hc-co-form-grid .form-field select:focus { outline: none; border-color: var(--hc-primary); box-shadow: 0 0 0 3px rgba(37,99,235,.12); }
.hc-co-form-grid .form-field.has-error input, .hc-co-form-grid .form-field.has-error textarea { border-color: #DC2626; }
.hc-co-field-error { display: block; margin-top: 6px; color: #DC2626; }
.hc-coform__form .button[type=submit] { width: 100%; }
.hc-coform__note { margin: 16px 0 0; color: var(--hc-text-3); line-height: 1.5; }
.hc-coform__success { padding: 18px 20px; border-radius: 12px; background: #ECFDF3; color: #067647; line-height: 1.5; }
.hc-coform__errors { padding: 14px 16px; border-radius: 12px; background: #FEF3F2; color: #B42318; margin-bottom: 18px; }
.hc-coform.tone-dark .heading-area p, .hc-coform.tone-dark .hc-coform__checks li, .hc-coform.tone-dark .hc-coform__lines p { color: var(--hc-text-1); }
@media (max-width: 991px) {
  .hc-coform__grid, .hc-coform.is-form-left .hc-coform__grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) { .hc-co-form-grid .form-field.is-half { grid-column: 1 / -1; } }

/* ---------- co_job_openings ---------- */
.hc-cojobs__list { display: flex; flex-direction: column; gap: clamp(18px, 2vw, 30px); }
.hc-cojob { display: grid; grid-template-columns: minmax(0, 1fr) minmax(240px, 330px); gap: clamp(22px, 3vw, 56px); padding: clamp(24px, 3vw, 56px); border-radius: var(--hc-radius); background: #fff; border: 1px solid transparent; transition: border-color .2s; }
.hc-cojob:hover { border-color: var(--hc-primary); }
.hc-cojob .tags { margin-bottom: 16px; }
.hc-cojob h3 { color: var(--hc-secondary); font-weight: 500; margin: 0 0 12px; }
.hc-cojob__main > p { color: var(--hc-text-2); margin: 0; }
.hc-cojob__lists { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px clamp(20px, 3vw, 48px); margin-top: clamp(20px, 2vw, 32px); }
.hc-cojob__label { display: block; color: var(--hc-secondary); font-weight: 600; margin-bottom: 12px; }
.hc-cojob .list li { color: var(--hc-text-2); margin-bottom: 10px; line-height: 1.45; }
.hc-cojob .list li::before { top: 3px; transform: none; }
.hc-cojob__side { display: flex; flex-direction: column; gap: 14px; }
.hc-cojob__side .hc-co-rows { background: var(--hc-soft); border-color: transparent; }
.hc-cojob__side .button { width: 100%; }
.hc-cojob__side .hc-co-small { text-align: center; }
@media (max-width: 991px) { .hc-cojob { grid-template-columns: 1fr; } }
@media (max-width: 640px) { .hc-cojob__lists { grid-template-columns: 1fr; } }

/* ---------- co_legal ---------- */
.hc-colegal__notice { display: flex; align-items: center; gap: 12px; max-width: 1240px; margin: 0 auto clamp(24px, 3vw, 44px); padding: 16px 20px; border-radius: 14px; background: #FFFAEB; border: 1px solid #FEDF89; color: #93370D; }
.hc-colegal__notice img { width: 24px; height: 24px; flex: none; }
.hc-colegal__grid { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: clamp(30px, 5vw, 90px); max-width: 1240px; margin: 0 auto; align-items: start; }
.hc-colegal__toc { position: sticky; top: 120px; max-height: calc(100vh - 140px); overflow: auto; padding: clamp(18px, 2vw, 28px); border-radius: var(--hc-radius); background: var(--hc-soft); }
.hc-colegal__toc summary { cursor: pointer; color: var(--hc-secondary); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; list-style: none; display: flex; justify-content: space-between; align-items: center; }
.hc-colegal__toc summary::-webkit-details-marker { display: none; }
.hc-colegal__toc summary::after { content: '\e902'; font-family: 'icomoon' !important; font-size: 8px; transition: transform .2s; }
.hc-colegal__toc details[open] summary::after { transform: rotate(180deg); }
.hc-colegal__toc ol { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.hc-colegal__toc ol a { display: flex; gap: 8px; padding: 7px 10px; border-radius: 8px; color: var(--hc-text-2); font-size: 15px; line-height: 1.4; transition: all .2s; }
.hc-colegal__toc ol a span { color: var(--hc-text-3); min-width: 1.4em; }
.hc-colegal__toc ol a:hover { color: var(--hc-primary); background: #fff; }
.hc-colegal__toc ol a.is-active { color: var(--hc-primary); background: #fff; font-weight: 500; }
.hc-colegal__toc > details > .link-arrow { margin: 14px 10px 0; font-size: 15px; }
.hc-colegal__section { scroll-margin-top: 120px; padding-bottom: clamp(26px, 3vw, 44px); margin-bottom: clamp(26px, 3vw, 44px); border-bottom: 1px solid var(--hc-line); }
.hc-colegal__section:last-child { border-bottom: 0; margin-bottom: 0; }
.hc-colegal__section h2 { color: var(--hc-secondary); font-size: clamp(24px, 2vw, 34px); font-weight: 500; line-height: 1.2; letter-spacing: -.01em; margin: 0 0 16px; }
.hc-colegal__num { color: var(--hc-primary); }
.hc-colegal .hc-prose { max-width: 820px; }
@media (max-width: 991px) {
  .hc-colegal__grid { grid-template-columns: 1fr; }
  .hc-colegal__toc { position: relative; top: auto; max-height: none; }
}

/* ---------- co_option_cards ---------- */
.hc-cooptions.is-side .hc-cooptions__wrap { display: grid; grid-template-columns: minmax(0, .38fr) minmax(0, 1fr); gap: clamp(28px, 4vw, 80px); align-items: start; }
.hc-cooptions.is-side .heading-area { margin: 0; position: sticky; top: 130px; }
.hc-cooptions__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(18px, 2vw, 30px); }
.hc-cooptions__grid.hc-n-1 { grid-template-columns: minmax(0, 560px); justify-content: center; }
.hc-cooptions__grid.hc-n-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.hc-cooptions__grid.hc-n-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.hc-cooption { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; padding: clamp(24px, 2.5vw, 40px); border-radius: var(--hc-radius); border: 1px solid var(--hc-line); background: #fff; transition: border-color .2s; }
.tone-soft .hc-cooption { border-color: transparent; }
.hc-cooption:hover { border-color: var(--hc-primary); }
.hc-cooption.is-hl { border: 2px solid var(--hc-primary); box-shadow: 0 20px 50px rgba(37,99,235,.14); }
.hc-cooption__tag { display: inline-block; padding: 7px 14px; border-radius: 110px; font-size: 14px; font-weight: 600; line-height: 1.2; color: #0F172A; background: #EEF1F5; }
.hc-cooption__tag.is-blue { color: #2563EB; background: #C4E83C; }
.hc-cooption__tag.is-green { color: #fff; background: #16A34A; }
.hc-cooption__price { display: flex; align-items: baseline; gap: 4px; }
.hc-cooption__price strong { color: var(--hc-secondary); }
.hc-cooption.is-hl .hc-cooption__price strong { color: var(--hc-primary); }
.hc-cooption__price span { color: var(--hc-text-2); }
.hc-cooption > p { color: var(--hc-text-2); margin: 0; padding-top: 14px; border-top: 1px solid var(--hc-line); width: 100%; line-height: 1.55; }
.hc-cooption .list { width: 100%; }
.hc-cooption .list li { color: var(--hc-text-2); margin-bottom: 10px; line-height: 1.45; font-size: clamp(15px, 1vw, 18px); }
.hc-cooption .list li::before { top: 3px; transform: none; }
.hc-cooption__cta { margin-top: auto; padding-top: 6px; }
.hc-cooptions .hc-footnote { margin-top: clamp(18px, 2vw, 30px); }
.hc-cooptions.is-side .hc-footnote { justify-content: flex-start; text-align: left; }
@media (max-width: 1200px) {
  .hc-cooptions.is-side .hc-cooptions__wrap { grid-template-columns: 1fr; }
  .hc-cooptions.is-side .heading-area { position: static; }
  .hc-cooptions__grid.hc-n-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 991px) {
  .hc-cooptions__grid, .hc-cooptions__grid.hc-n-2, .hc-cooptions__grid.hc-n-4 { grid-template-columns: 1fr; }
}

/* ---------- co_review_wall ---------- */
.hc-coreviews.testimonials { background: #fff; }
.hc-coreviews__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2vw, 30px); align-items: start; }
.hc-coreview { margin: 0; display: flex; flex-direction: column; gap: 16px; padding: clamp(22px, 2.5vw, 40px); border-radius: var(--hc-radius); border: 1px solid var(--hc-line); background: #fff; transition: border-color .2s; }
.hc-coreview[hidden] { display: none; }
.hc-coreview:hover { border-color: var(--hc-primary); }
.hc-coreview blockquote { margin: 0; color: var(--hc-base); line-height: 1.6; }
.hc-coreview figcaption { display: flex; align-items: center; gap: 12px; padding-top: 16px; border-top: 1px solid var(--hc-line); }
.hc-coreview .hc-avatar { width: 46px; height: 46px; font-size: 18px; }
.hc-coreview figcaption > span:first-child { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.hc-coreview figcaption strong { color: var(--hc-secondary); font-weight: 600; }
.hc-coreview figcaption small { color: var(--hc-text-3); }
.hc-coreview__topic { margin-left: auto; padding: 4px 10px; border-radius: 110px; background: rgba(37,99,235,.08); color: var(--hc-primary); white-space: nowrap; }
.hc-coreviews .hc-btn-row { margin-top: clamp(24px, 3vw, 44px); }
@media (max-width: 1124px) { .hc-coreviews__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 768px) { .hc-coreviews__grid { grid-template-columns: 1fr; } }
@media (max-width: 420px) { .hc-coreview__topic { display: none; } }

/* ---------- glossary browser ---------- */
.hc-cogloss__bar { display: flex; flex-direction: column; align-items: center; gap: 18px; margin-bottom: clamp(28px, 3.5vw, 56px); }
.hc-cogloss__search { position: relative; width: 100%; max-width: 700px; }
.hc-cogloss__search svg { position: absolute; left: 18px; top: 50%; transform: translateY(-50%); color: var(--hc-text-3); }
.hc-cogloss__search input { width: 100%; height: 58px; padding: 0 18px 0 52px; border-radius: 110px; border: 1px solid var(--hc-line); background: #fff; font: inherit; font-size: 18px; color: var(--hc-secondary); box-shadow: 0 10px 30px rgba(15,23,42,.05); }
.hc-cogloss__search input:focus { outline: none; border-color: var(--hc-primary); box-shadow: 0 0 0 3px rgba(37,99,235,.12); }
.hc-cogloss__letters { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.hc-cogloss__letters .hc-co-chip { min-width: 42px; justify-content: center; padding: 8px 12px; }
.hc-cogloss__body { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: clamp(28px, 4vw, 70px); align-items: start; }
.hc-cogloss__body:not(:has(.hc-cogloss__side)) { grid-template-columns: 1fr; }
.hc-cogloss__groups { display: flex; flex-direction: column; gap: clamp(28px, 3vw, 44px); }
.hc-cogloss__group[hidden] { display: none; }
.hc-cogloss__head { display: flex; align-items: center; gap: 16px; margin-bottom: 16px; }
.hc-cogloss__letter { display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 14px; background: var(--hc-blue); color: #fff; font-size: 24px; font-weight: 600; }
.hc-cogloss__rule { flex: 1; height: 1px; background: var(--hc-line); }
.hc-cogloss__head .text-16 { color: var(--hc-text-3); }
.hc-cogloss__terms { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.hc-cogloss__term { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 14px 18px; border-radius: 12px; background: var(--hc-soft); border: 1px solid transparent; color: var(--hc-secondary); font-size: clamp(15px, 1vw, 17px); line-height: 1.35; transition: all .2s; }
.hc-cogloss__term[hidden] { display: none; }
.hc-cogloss__term i { font-size: 9px; color: var(--hc-text-3); transition: transform .2s; }
.hc-cogloss__term:hover { border-color: var(--hc-primary); background: #fff; color: var(--hc-primary); }
.hc-cogloss__term:hover i { color: var(--hc-primary); transform: translateX(3px); }
.hc-cogloss__term:target { border-color: var(--hc-primary); background: #fff; }
.hc-cogloss__empty { padding: 40px 0; display: flex; flex-direction: column; gap: 8px; }
.hc-cogloss__empty strong { color: var(--hc-secondary); font-weight: 500; }
.hc-cogloss__empty p { color: var(--hc-text-2); margin: 0; }
.hc-cogloss__side { position: sticky; top: 120px; }
.hc-cogloss__help { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding: clamp(24px, 2.5vw, 40px); border-radius: var(--hc-radius); background: var(--hc-secondary); }
.hc-cogloss__help img { width: 56px; height: 56px; }
.hc-cogloss__help h2 { color: #fff !important; font-weight: 600; margin: 0; line-height: 1.3; }
.hc-cogloss__help p { color: var(--hc-text-1) !important; margin: 0 0 6px; }
@media (max-width: 1124px) {
  .hc-cogloss__body { grid-template-columns: 1fr; }
  .hc-cogloss__side { position: static; }
  .hc-cogloss__terms { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 340px) { .hc-cogloss__terms { grid-template-columns: 1fr; } }
.hc-codir__logo { display: flex; align-items: center; height: 56px; margin-bottom: 18px; }
.hc-codir__logo img { max-height: 44px; max-width: 190px; width: auto; height: auto; object-fit: contain; }
.features-box .features-box-wrapper .item .hc-codir__logo img { width: auto; height: 44px; max-width: 200px; margin: 0; object-fit: contain; object-position: left center; }

/* ---------- comparison pages (/compare, /compare/{slug}) ---------- */
.hc-cmp .compare-table tbody td:nth-child(2), .hc-cmp .compare-table thead th:nth-child(2) { color: inherit; }
.hc-cmp .compare-table th.is-hl, .hc-cmp .compare-table td.is-hl { text-align: center; }
.hc-cmp .compare-table th.is-hl .hc-cocompare__col { align-items: center; }
.hc-cmp__logo { filter: none; max-width: 140px; object-fit: contain; }
.hc-cmp .compare-table tr.hc-cmp__cta td { padding-top: clamp(18px, 2vw, 30px); padding-bottom: clamp(18px, 2vw, 30px); border-bottom: 0; }
.hc-cmp .compare-table tr.hc-cmp__cta td:first-child { font-weight: 600; color: var(--hc-primary); }
.hc-cmplist .compare-table table { min-width: 720px; }
.hc-cmplist .compare-table tbody td:first-child { width: 30%; }
.hc-cmplist__title { color: var(--hc-primary); font-weight: 600; text-decoration: none; }
.hc-cmplist__title:hover { text-decoration: underline; }
.hc-cmplist__host { display: inline-block; margin: 2px 6px 2px 0; padding: 2px 10px; border-radius: 999px; background: #EDF5FF; color: var(--hc-primary); font-size: 14px; white-space: nowrap; }
.hc-cmplist__host.is-us { background: var(--hc-blue); color: #fff; }
.hc-cmplist .compare-table td:last-child { white-space: nowrap; text-align: right; }
.hc-cmpfeat__list { display: flex; flex-direction: column; gap: clamp(16px, 1.6vw, 24px); max-width: 1180px; margin: 0 auto; }
.hc-cmpfeat__item { display: grid; grid-template-columns: minmax(220px, 1fr) 2fr; gap: clamp(20px, 3vw, 56px); padding: clamp(24px, 3vw, 48px); border-radius: var(--hc-radius); background: #fff; }
.hc-cmpfeat__head { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; }
.hc-cmpfeat__head h3 { color: var(--hc-secondary); font-weight: 500; line-height: 1.2; margin: 0; }
.hc-cmpfeat__icon { display: inline-flex; align-items: center; justify-content: center; width: 64px; height: 64px; border-radius: 16px; background: var(--hc-soft); }
.hc-cmpfeat__icon img { width: 36px; height: 36px; }
.hc-cmpfeat__cta { margin-top: clamp(18px, 1.6vw, 26px); display: flex; flex-wrap: wrap; gap: 12px 24px; align-items: center; }
@media (max-width: 860px) { .hc-cmpfeat__item { grid-template-columns: 1fr; } .hc-cmpfeat__head { flex-direction: row; align-items: center; } }

/* ---------- reviews slider (reviews set): review-wall cards in the swiper ---------- */
.hc-revslider .content-area .testimonials-slider .swiper-wrapper { padding-bottom: 48px; }
.hc-revslider .swiper-slide { height: auto; display: flex; }
.hc-revslider .hc-coreview { width: 100%; height: 100%; }
.hc-revslider .hc-coreview blockquote { flex: 1; }
.hc-revslider .hc-coreview figcaption { margin-top: auto; }
.hc-coreview__title { display: block; margin-bottom: 8px; color: var(--hc-secondary); font-weight: 600; }

/* directory card highlighted in blue (e.g. our own deal among partner deals) */
.hc-codir .features-box-wrapper .item.is-highlight { background: linear-gradient(145deg, #2563EB 0%, #0B2AA1 100%); border-color: transparent; color: #fff; box-shadow: 0 18px 40px rgba(37,99,235,.28); }
.hc-codir .features-box-wrapper .item.is-highlight:hover { border-color: rgba(255,255,255,.5); }
.hc-codir .item.is-highlight h3.title, .hc-codir .item.is-highlight p, .hc-codir .item.is-highlight .hc-codir__facts dd { color: #fff !important; }
.hc-codir .item.is-highlight .hc-codir__facts dt { color: rgba(255,255,255,.75); }
.hc-codir .item.is-highlight .hc-codir__facts, .hc-codir .item.is-highlight .hc-codir__facts div, .hc-codir .item.is-highlight .hc-codir__foot { border-color: rgba(255,255,255,.22) !important; }
.hc-codir .item.is-highlight .hc-codir__mark { background: #fff; color: var(--hc-primary); }
.hc-codir .item.is-highlight .hc-co-code { background: #fff; border-color: rgba(255,255,255,.8); }
.hc-codir .item.is-highlight .hc-co-code__btn { background: linear-gradient(90deg, #FDB241, #F04E23); border-left-color: transparent; }
.hc-codir .item.is-highlight .hc-codir__foot .link-arrow, .hc-codir .item.is-highlight .hc-codir__foot span { color: #fff; }
.hc-codir .item.is-highlight .hc-codir__logo img { filter: brightness(0) invert(1); }

/* in-page nav under a page hero: plain text links on a white bar, underline for the active one */
.inner-banner.hc-cohero #banner-page-nav { background: #fff !important; padding: 0; border-bottom: 1px solid var(--hc-line); }
.inner-banner.hc-cohero #banner-page-nav nav ul { gap: 0 clamp(24px, 3vw, 48px); }
.inner-banner.hc-cohero #banner-page-nav nav ul li a { position: relative; display: inline-block; padding: 18px 0 16px; color: var(--hc-text-2) !important; font-size: clamp(15px, 1.05vw, 17px); font-weight: 500; border-bottom: 2px solid transparent; transition: color .2s, border-color .2s; }
.inner-banner.hc-cohero #banner-page-nav nav ul li a:hover { color: var(--hc-secondary) !important; border-bottom-color: var(--hc-line); }
.inner-banner.hc-cohero #banner-page-nav nav ul li a.active { color: var(--hc-secondary) !important; font-weight: 600; border-bottom-color: var(--hc-primary); }
.inner-banner.hc-cohero #banner-page-nav.is-sticky { background: rgba(255,255,255,.97) !important; box-shadow: 0 6px 18px rgba(15,23,42,.06); }

/* centred page heroes run wider so the heading and intro stay within ~3 lines */
.inner-banner.tab-banner.hc-cohero.is-centered .content--area { max-width: 1240px; }
.hc-cohero.is-centered .hc-cohero__text .sub-heading { max-width: 1000px; }

/* green page hero (tone: green), e.g. /green-hosting: the Christmas theme's evergreen, in every theme */
.inner-banner.hc-cohero.is-green { background: radial-gradient(ellipse 70% 110% at 85% 0%, rgba(234,179,8,.18) 0%, rgba(234,179,8,0) 55%), linear-gradient(180deg, #0B3B2A 0%, #062619 100%) !important; }
.inner-banner.hc-cohero.is-green .sub-heading { color: rgba(236,253,245,.9); }
.inner-banner.hc-cohero.is-green .hc-crumbs, .inner-banner.hc-cohero.is-green .hc-crumbs a { color: rgba(236,253,245,.85); }
.inner-banner.hc-cohero.is-green .button.btn-white { color: #14532D; }

/* centred page heroes use the same heading size as the side-by-side layout, and a normal intro size */
.hc-cohero.is-centered.size-medium .heading-1 { font-size: clamp(34px, 3.4vw, 56px); line-height: 1.08; }
.hc-cohero.is-centered .hc-cohero__text .sub-heading { font-size: clamp(16px, 1.25vw, 20px); line-height: 1.6; }

/* pages with a green hero: hello bar in matching deep evergreen so the top of the page flows */
main:has(.inner-banner.hc-cohero.is-green) #header .promo-strip { background: rgba(2, 26, 17, .72); }

/* review wall (reviews page): masonry of plain review cards */
.hc-revwall { columns: 4 250px; column-gap: clamp(16px, 1.8vw, 26px); }
.hc-revcard { break-inside: avoid; display: block; width: 100%; margin: 0 0 clamp(16px, 1.8vw, 26px); padding: clamp(22px, 2vw, 32px); border-radius: 14px; background: #fff; border: 1px solid var(--hc-line); box-shadow: 0 6px 18px rgba(15,23,42,.04); }
.hc-revcard__icon { display: block; width: 36px; height: auto; margin-bottom: 18px; }
.hc-revcard__icon.is-quote { width: 30px; opacity: .8; }
.hc-revcard__name { margin: 0 0 10px; color: var(--hc-secondary); font-size: 16px; font-weight: 700; }
.hc-revcard__text { margin: 0; color: var(--hc-text-2); font-size: 15px; line-height: 1.65; }
.hc-revcard__text p { margin: 0; }
.hc-revcard__text p + p { margin-top: .9em; }
.hc-revwall-sec .hc-btn-row { margin-top: clamp(16px, 2vw, 30px); }
/* review wall: three wider columns, larger readable text */
.hc-revwall { columns: 3 320px; column-gap: clamp(18px, 2vw, 30px); }
.hc-revcard { margin-bottom: clamp(18px, 2vw, 30px); padding: clamp(26px, 2.4vw, 38px); }
.hc-revcard__icon { width: 40px; margin-bottom: 20px; }
.hc-revcard__name { font-size: 19px; margin-bottom: 12px; }
.hc-revcard__text { font-size: clamp(16px, 1.15vw, 18px); line-height: 1.7; color: var(--hc-base); }

/* category menu bar under a hero (KB category pages): plain text links, underline on the current one */
.hc-subbar { background: #fff; border-bottom: 1px solid var(--hc-line); }
.hc-subbar nav ul { display: flex; justify-content: center; flex-wrap: wrap; gap: 0 clamp(22px, 2.6vw, 44px); margin: 0; padding: 0; list-style: none; }
.hc-subbar nav a { display: inline-block; padding: 18px 0 16px; color: var(--hc-text-2); font-size: clamp(15px, 1.05vw, 17px); font-weight: 500; border-bottom: 2px solid transparent; transition: color .2s, border-color .2s; white-space: nowrap; }
.hc-subbar nav a:hover { color: var(--hc-secondary); border-bottom-color: var(--hc-line); }
.hc-subbar nav a.is-active { color: var(--hc-secondary); font-weight: 600; border-bottom-color: var(--hc-primary); }
@media (max-width: 991px) { .hc-subbar nav ul { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .hc-subbar nav ul::-webkit-scrollbar { display: none; } }
/* ==========================================================================
   40-content: blog, knowledge base, glossary, domain pages, network status, 404
   ========================================================================== */

/* ---------- banner add-ons (search box, chips, meta) ---------- */
.inner-banner .content--area > * { position: relative; z-index: 3; }
.inner-banner .content--area .heading-1 + .sub-heading { margin-top: -6px; }
.hc-bsearch { display: flex; align-items: center; gap: 8px; width: 100%; max-width: 680px; margin: 10px auto 0; padding: 8px; background: #fff; border-radius: 16px; box-shadow: 0 24px 48px rgba(5, 18, 74, .28); text-align: left; }
.hc-bsearch > i { color: var(--hc-text-2); font-size: 16px; margin-left: 12px; }
.hc-bsearch input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font-size: 18px; color: var(--hc-secondary); height: 48px; padding: 0 6px; font-family: inherit; }
.hc-bsearch input::placeholder { color: var(--hc-text-3); }
.hc-bsearch .button { flex-shrink: 0; border: 0; cursor: pointer; }
.hc-banner-meta { margin-top: 18px; font-size: 16px; color: var(--hc-text-1); }
.hc-banner-meta strong { color: #fff; font-weight: 600; }
.hc-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 26px; }
.hc-chips a { display: inline-block; padding: 8px 16px; border-radius: 34px; background: rgba(190, 219, 255, .14); color: rgba(255, 255, 255, .92); font-size: 16px; line-height: 1.3; transition: all .2s; }
.hc-chips a:hover { background: rgba(255, 255, 255, .2); color: #fff; }
.hc-chips a.is-active { background: #fff; color: var(--hc-primary); }
.hc-chips a small { opacity: .7; margin-left: 4px; font-size: 13px; }
.hc-chips--light { justify-content: flex-start; margin-top: 0; }
.hc-chips--light a { background: var(--hc-soft); color: var(--hc-text-2); }
.hc-chips--light a:hover { background: rgba(37, 99, 235, .1); color: var(--hc-primary); }
.hc-chips--light a.is-active { background: var(--hc-primary); color: #fff; }
.inner-banner.kb-article-banner .content--area .badge { display: inline-flex; }
.inner-banner.kb-article-banner .content--area .badge:hover { background: rgba(255, 255, 255, .2); color: #fff; }
.inner-banner.kb-article-banner .content--area .blog-details { justify-content: center; flex-wrap: wrap; }
.inner-banner.kb-article-banner .content--area h1 { color: #fff; text-wrap: balance; }
.inner-banner.kb-article-banner .content--area .points a:hover { background: rgba(255, 255, 255, .2); color: #fff; }
.inner-banner .hc-crumbs + .badge { margin-top: 0; }
@media (max-width: 480px) {
  .hc-bsearch input { font-size: 16px; }
  .hc-bsearch > i { display: none; }
  .hc-bsearch .button { padding-inline: 16px; }
  .hc-chips a { font-size: 14px; padding: 7px 13px; }
}

/* ---------- shared bits ---------- */
.hc-pmeta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; color: var(--hc-text-2); font-size: 15px; line-height: 1.3; margin-bottom: 12px; }
.hc-pmeta span { display: inline-flex; align-items: center; gap: 7px; }
.hc-pmeta i { font-size: 13px; }
.hc-pill { display: inline-block; padding: 4px 11px; border-radius: 34px; background: var(--hc-soft); color: var(--hc-text-2); font-size: 13px; line-height: 1.4; white-space: nowrap; }
.hc-pill.is-blue { background: rgba(37, 99, 235, .1); color: var(--hc-primary); }
.hc-pill.is-green { background: rgba(22, 163, 74, .1); color: #15803D; }
.hc-empty { padding: clamp(24px, 3vw, 40px); border-radius: 20px; background: var(--hc-soft); color: var(--hc-text-2); font-size: 18px; }
.hc-empty a { color: var(--hc-primary); }
.hc-list-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 10px 16px; margin-bottom: 18px; flex-wrap: wrap; }
.hc-list-head h2 { color: var(--hc-secondary); font-weight: 400; font-size: clamp(24px, 2vw, 34px); line-height: 1.2; letter-spacing: -.02em; }
.hc-list-head span { color: var(--hc-text-3); font-size: 15px; }
.hc-stack { display: flex; flex-direction: column; gap: clamp(36px, 3.5vw, 56px); }
.hc-sec .hc-more { display: flex; justify-content: center; margin-top: clamp(28px, 3vw, 48px); }

/* ---------- post cards ---------- */
.hc-bpost-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(28px, 2.4vw, 36px) clamp(20px, 2vw, 30px); }
.hc-bpost-grid.is-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 991px) { .hc-bpost-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .hc-bpost-grid, .hc-bpost-grid.is-2 { grid-template-columns: 1fr; } }
.hc-bpost { display: flex; flex-direction: column; color: inherit; min-width: 0; }
.hc-bpost__media { position: relative; display: flex; align-items: center; justify-content: center; aspect-ratio: 16 / 10; border-radius: 20px; overflow: hidden; background: linear-gradient(135deg, #E3ECFF 0%, #F4F8FF 100%); border: 1px solid #E3EBFB; margin-bottom: clamp(16px, 1.5vw, 24px); }
.tone-soft .hc-bpost__media { background: linear-gradient(135deg, #FFFFFF 0%, #E8F0FF 100%); }
.hc-bpost__media .hc-bpost__photo { width: 100%; height: 100%; object-fit: cover; }
.hc-bpost__media .hc-bpost__art { width: auto; height: 64%; max-width: 72%; transition: transform .35s ease; }
.hc-bpost:hover .hc-bpost__art { transform: scale(1.05); }
.hc-bpost__tag { position: absolute; top: 14px; right: 14px; padding: 5px 12px; border-radius: 34px; background: #fff; color: var(--hc-primary); font-size: 13px; line-height: 1.3; box-shadow: 0 4px 12px rgba(15, 23, 42, .06); }
.hc-bpost__title { color: var(--hc-secondary); font-size: clamp(20px, 1.4vw, 24px); line-height: 1.35; margin-bottom: 10px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; transition: color .2s; }
.hc-bpost:hover .hc-bpost__title { color: var(--hc-primary); }
.hc-bpost__excerpt { color: var(--hc-text-2); font-size: 16px; line-height: 1.6; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.hc-bpost.is-lead .hc-bpost__media { aspect-ratio: 16 / 9; }
.hc-bpost.is-lead .hc-bpost__title { font-size: clamp(26px, 2.2vw, 38px); line-height: 1.2; letter-spacing: -.02em; -webkit-line-clamp: 3; }
.hc-bpost.is-lead .hc-bpost__excerpt { font-size: clamp(16px, 1.1vw, 19px); -webkit-line-clamp: 3; }
.hc-bpost.is-lead .link-arrow { margin-top: 18px; }

/* featured + latest */
.hc-blogfeat { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: clamp(24px, 3vw, 48px); align-items: start; }
@media (max-width: 991px) { .hc-blogfeat { grid-template-columns: 1fr; } }
.hc-latest { border: 1px solid var(--hc-line); border-radius: var(--hc-radius); padding: clamp(20px, 2.5vw, 36px); background: #fff; }
.hc-latest .badge { margin-bottom: 8px; }
.hc-latest a { display: block; padding: 18px 0; border-top: 1px solid var(--hc-line); }
.hc-latest a:first-of-type { border-top: 0; }
.hc-latest__cat { display: block; color: var(--hc-primary); font-size: 13px; letter-spacing: .06em; text-transform: uppercase; font-weight: 600; }
.hc-latest__title { display: block; color: var(--hc-secondary); font-size: clamp(17px, 1.2vw, 20px); line-height: 1.4; margin: 6px 0; transition: color .2s; }
.hc-latest a:hover .hc-latest__title { color: var(--hc-primary); }
.hc-latest small { color: var(--hc-text-3); font-size: 14px; }

/* ---------- article layout (kb-article-page .article-area) ---------- */
.article-area .content-area .article-left { min-width: 0; }
.article-area .content-area .article-right { min-width: 0; }
.article-area .article-right-content-warpper .search-box form.input-wrapper { padding-right: 6px; }
.article-area .article-right-content-warpper .input-wrapper button { border: 0; background: var(--hc-primary); color: #fff; border-radius: 8px; height: 38px; padding: 0 14px; font-size: 15px; cursor: pointer; flex-shrink: 0; }
.article-area .article-right-content-warpper .related-articles ul li a { font-size: 17px; line-height: 1.4; }
.article-area .article-right-content-warpper .related-articles ul li:last-child { margin-bottom: 0; }
.article-area .article-right-content-warpper ul.hc-side-list li { flex-direction: row !important; justify-content: space-between; align-items: center; gap: 12px !important; margin-bottom: 0 !important; padding: 10px 0; border-top: 1px solid #F0F0F0; }
.article-area .article-right-content-warpper ul.hc-side-list li:first-child { border-top: 0; padding-top: 0; }
.article-area .article-right-content-warpper ul.hc-side-list li a.is-active { color: var(--hc-primary); font-weight: 500; }
.article-area .article-right-content-warpper ul.hc-side-list li span { font-size: 14px; color: var(--hc-text-3); }
.article-area .article-right-content-warpper .related-articles p { color: var(--hc-text-2); font-size: 16px; line-height: 1.6; margin-bottom: 16px; }
.article-area .article-right-content-warpper .table-of-contents ul li a { font-size: clamp(15px, 1.1vw, 18px); line-height: 1.4; transition: color .2s; }
.article-area .article-right-content-warpper .table-of-contents ul li a:hover,
.article-area .article-right-content-warpper .table-of-contents ul li a.is-active { color: var(--hc-primary); }
.article-area .article-right-content-warpper .table-of-contents[hidden] { display: none; }
.article-area .article-right-content-warpper .need-help img { max-width: 160px; }
.article-area .article-right-content-warpper .need-help p { font-size: 18px; }
.article-area .article-right-content-warpper .need-help .list { text-align: left; margin-bottom: 28px; align-self: stretch; }
.article-area .article-right-content-warpper .need-help .list li { color: #fff; font-size: 16px; }
.article-area .article-right-content-warpper .need-help .badge { margin-bottom: 16px; color: var(--hc-text-1); background: rgba(255, 255, 255, .1); }
.article-area .article-right-content-warpper .need-help small { display: block; margin-top: 14px; color: var(--hc-text-1); font-size: 14px; }
.article-area .article-right-content-warpper .need-help.is-plain { background: var(--hc-secondary); }
.article-area.is-listing .content-area .article-left { width: 70%; }
.article-area.is-listing .content-area .article-right { width: 30%; }
@media (max-width: 991px) {
  .article-area.is-listing .content-area .article-left, .article-area.is-listing .content-area .article-right { width: 100%; }
}
.article-area .content-area .article-left .contact-support h4 { color: var(--hc-secondary); }
.article-area .content-area .article-left .contact-support p { color: var(--hc-text-2); }
.article-area .content-area .article-left .contact-support .hc-btn-row { justify-content: center; margin-top: 0; }
.article-area .content-area .article-left .rate-article { gap: 24px; flex-wrap: wrap; margin-top: 16px; }
.article-area .content-area .article-left .rate-article .rate-section .rate-buttons button { font-family: inherit; transition: filter .2s; }
.article-area .content-area .article-left .rate-article .rate-section .rate-buttons button:hover { filter: brightness(.95); }
.article-area .content-area .article-left .rate-article .hc-thanks { display: block; color: var(--hc-green); font-size: 16px; margin-top: 10px; font-weight: 400; }
.article-area .content-area .article-left .rate-article .connects .social-links { margin-top: 12px; }
.article-area .content-area .article-left .rate-article .connects .social-links li a, .article-area .content-area .article-left .rate-article .connects .social-links li button { border: 0; cursor: pointer; transition: all .2s; }
.article-area .content-area .article-left .rate-article .connects .social-links li a:hover { background: var(--hc-primary); color: #fff; }
.article-area .content-area .article-left .rate-article .connects .social-links li button { display: flex; align-items: center; justify-content: center; height: clamp(32px, 2.5vw, 42px); padding: 0 14px; border-radius: 8px; background: rgba(37, 99, 235, .1); color: var(--hc-primary); font-size: 15px; font-family: inherit; }
.article-area .content-area .article-left .rate-article .connects .social-links li button:hover { background: var(--hc-primary); color: #fff; }
@media (max-width: 640px) {
  .article-area .content-area .article-left .rate-article { flex-direction: column; align-items: flex-start; }
}
.hc-article-image { display: block; width: auto; height: auto; max-width: 100%; max-height: clamp(240px, 30vw, 440px); border-radius: 20px; margin-bottom: clamp(24px, 2.5vw, 40px); border: 1px solid var(--hc-line); }
.hc-standfirst { color: var(--hc-secondary) !important; font-size: clamp(20px, 1.6vw, 26px) !important; line-height: 1.5 !important; }
.hc-applies { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: clamp(24px, 2.5vw, 36px); }

/* ---------- article content (extends .article-section from the design) ---------- */
.article-section { overflow-wrap: break-word; }
.article-section > :first-child, .article-section .hc-block:first-child > :first-child { margin-top: 0 !important; }
.article-section > :last-child { margin-bottom: 0; }
.article-section h2, .article-section h3, .article-section h4 { scroll-margin-top: 110px; }
.article-section h2 { margin-top: clamp(32px, 3vw, 52px); }
.article-section h3, .article-section h4 { margin-top: clamp(24px, 2.2vw, 36px); }
.article-section a { display: inline; padding: 0; background: none; border-radius: 0; font-size: inherit; color: var(--hc-primary) !important; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.article-section a:hover { color: #1739B0 !important; }
.article-section p, .article-section ol li, .article-section ul li { font-size: clamp(17px, 1.25vw, 20px); }
.article-section ul li::before { top: .35em; }
.article-section img { max-width: 100%; height: auto; border-radius: 20px; }
.article-section table { display: block; overflow-x: auto; }
@media (min-width: 641px) { .article-section table { display: table; } }
.article-section pre code { line-height: 1.7; padding-block: 22px; }
.article-section hr { border: 0; border-top: 1px solid var(--hc-line); margin-block: clamp(28px, 3vw, 44px); }
.article-section .alert { font-size: clamp(16px, 1.15vw, 19px); }
.article-section .alert p, .article-section .alert li { font-size: inherit; color: inherit; }
.article-section .alert p + p { margin-top: 10px; }
.article-section .alert a { color: inherit !important; background: none !important; padding: 0; text-decoration: underline; }
.article-section .alert.danger { color: #B91C1C; border: 1px solid rgba(220, 38, 38, .3); background: rgba(220, 38, 38, .07); }
.article-section .alert .hc-btn-row { margin-top: 16px; }
.article-section .hc-btn-row a { text-decoration: none; color: inherit !important; font-size: 18px; }
.article-section .hc-btn-row .button.btn-gradient, .article-section .hc-btn-row .button.btn-blue { color: #fff !important; }
.article-section .hc-btn-row .button.btn-line { color: var(--hc-secondary) !important; }
.article-section .hc-btn-row .link-arrow { color: var(--hc-primary) !important; }
.article-section .hc-block-title { color: var(--hc-secondary); }

/* steps */
.article-section ol.hc-steps { list-style: none; padding: 0; margin: 0 0 clamp(20px, 2vw, 32px); }
.article-section ol.hc-steps > li { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 18px; position: relative; padding-bottom: 22px; margin: 0 !important; }
.article-section ol.hc-steps > li:last-child { padding-bottom: 0; }
.article-section ol.hc-steps > li:not(:last-child)::after { content: ''; position: absolute; left: 21px; top: 50px; bottom: 2px; width: 2px; border-radius: 2px; background: #DCE6FB; }
.hc-steps__num { width: 44px; height: 44px; border-radius: 12px; background: var(--hc-blue); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 18px; line-height: 1; }
.hc-steps__body { padding-top: 8px; min-width: 0; }
.article-section .hc-steps__body h3 { margin: 0 0 8px; }
.article-section .hc-steps__body p, .article-section .hc-steps__body ul, .article-section .hc-steps__body ol { margin-bottom: 10px; }
.hc-steps__body > :last-child, .hc-steps__body .hc-rich > :last-child { margin-bottom: 0 !important; }

/* code, figures, video */
.hc-code { margin-block: clamp(24px, 2.5vw, 40px); border-radius: 20px; overflow: hidden; background: #1E1E2E; }
.hc-code__bar { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 14px 10px 22px; background: #161624; color: #B8C0DA; font-size: 14px; }
.hc-code__copy { border: 1px solid rgba(255, 255, 255, .2); background: transparent; color: #fff; border-radius: 8px; padding: 6px 12px; font-size: 13px; cursor: pointer; font-family: inherit; }
.hc-code__copy:hover { background: rgba(255, 255, 255, .1); }
.article-section .hc-code pre { margin: 0; border-radius: 0; }
.hc-figure { margin: 0 0 clamp(20px, 2vw, 32px); }
.hc-figure img, .hc-figure video { display: block; width: 100%; border-radius: 20px; }
.hc-figure.is-framed img { border: 1px solid var(--hc-line); padding: 8px; background: var(--hc-soft); }
.hc-figure figcaption { margin-top: 10px; color: var(--hc-text-3); font-size: 15px; }
.hc-video { position: relative; aspect-ratio: 16 / 9; border-radius: 20px; overflow: hidden; background: #000; }
.hc-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* light accordion */
.hc-acc-list { display: flex; flex-direction: column; gap: 12px; margin-bottom: clamp(20px, 2vw, 32px); }
.hc-acc { border: 1px solid var(--hc-line); border-radius: 16px; background: #fff; transition: border-color .2s; }
.hc-acc[open], .hc-acc:hover { border-color: var(--hc-primary); }
.hc-acc > summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 18px 22px; color: var(--hc-secondary); font-size: clamp(17px, 1.2vw, 20px); font-weight: 500; line-height: 1.4; }
.hc-acc > summary::-webkit-details-marker { display: none; }
.hc-acc > summary::after { content: '\e902'; font-family: 'icomoon' !important; font-size: 8px; color: var(--hc-primary); transition: transform .2s; flex-shrink: 0; }
.hc-acc[open] > summary::after { transform: rotate(180deg); }
.hc-acc__body { padding: 0 22px 20px; color: var(--hc-text-2); font-size: 17px; line-height: 1.65; }
.article-section .hc-acc__body p, .article-section .hc-acc__body li { font-size: 17px; }
.hc-acc__body > * + * { margin-top: 10px; }
.hc-acc__body > :last-child { margin-bottom: 0; }

/* ---------- rows (KB lists) ---------- */
.hc-list-card { background: #fff; border: 1px solid var(--hc-line); border-radius: var(--hc-radius); overflow: hidden; }
.tone-soft .hc-list-card { border-color: transparent; }
.hc-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px clamp(18px, 2vw, 28px); border-top: 1px solid var(--hc-line); color: var(--hc-secondary); transition: background .2s; }
.hc-row:first-child { border-top: 0; }
.hc-row:hover { background: var(--hc-soft); }
.tone-soft .hc-row:hover { background: #FAFCFF; }
.hc-row__main { display: flex; align-items: center; gap: 16px; min-width: 0; }
.hc-row__num { color: var(--hc-primary); font-weight: 600; font-size: 15px; width: 26px; flex-shrink: 0; }
.hc-row__title { font-size: clamp(16px, 1.1vw, 19px); line-height: 1.4; transition: color .2s; }
.hc-row:hover .hc-row__title { color: var(--hc-primary); }
.hc-row__meta { display: flex; align-items: center; gap: 8px; flex-shrink: 0; flex-wrap: wrap; justify-content: flex-end; }
.hc-row__meta i { color: var(--hc-primary); font-size: 10px; margin-left: 4px; }
@media (max-width: 640px) {
  .hc-row { flex-direction: column; align-items: flex-start; gap: 10px; }
  .hc-row__meta { justify-content: flex-start; }
  .hc-row__meta i { display: none; }
}

/* search results */
.hc-results { display: flex; flex-direction: column; }
.hc-result { display: block; padding: 26px 0; border-top: 1px solid var(--hc-line); }
.hc-result:first-child { border-top: 0; padding-top: 0; }
.hc-result .hc-pmeta { margin-bottom: 6px; }
.hc-result__title { display: block; color: var(--hc-secondary); font-size: clamp(20px, 1.5vw, 26px); line-height: 1.3; margin-bottom: 8px; transition: color .2s; }
.hc-result:hover .hc-result__title { color: var(--hc-primary); }
.hc-result p { color: var(--hc-text-2); font-size: 17px; line-height: 1.6; }

/* pagination */
.hc-pager { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 8px; margin-top: clamp(28px, 3vw, 48px); }
.hc-pager a, .hc-pager span { min-width: 44px; height: 44px; padding: 0 14px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; border-radius: 12px; border: 1px solid var(--hc-line); background: #fff; color: var(--hc-text-2); font-size: 16px; transition: all .2s; }
.hc-pager a:hover { border-color: var(--hc-primary); color: var(--hc-primary); }
.hc-pager .is-current { background: var(--hc-blue); border-color: transparent; color: #fff; }
.hc-pager .is-disabled { opacity: .45; }
.hc-pager i { font-size: 10px; }

/* ---------- knowledge base home ---------- */
.hc-kbcats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(16px, 1.6vw, 24px); }
@media (max-width: 1280px) { .hc-kbcats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .hc-kbcats { grid-template-columns: 1fr; } }
.hc-kbcat { display: flex; flex-direction: column; transition: border-color .2s; }
.hc-kbcat:hover { border-color: var(--hc-primary); }
.hc-kbcat__icon { width: 56px; height: 56px; margin-bottom: 20px; }
.hc-kbcat h3 { color: var(--hc-secondary); font-size: clamp(21px, 1.5vw, 26px); font-weight: 500; line-height: 1.25; margin-bottom: 6px; }
.hc-kbcat h3 a { color: inherit; }
.hc-kbcat h3 a:hover { color: var(--hc-primary); }
.hc-kbcat__count { display: block; color: var(--hc-primary); font-size: 15px; margin-bottom: 12px; }
.hc-kbcat > p { color: var(--hc-text-2); font-size: 16px; line-height: 1.6; margin-bottom: 18px; }
.hc-kbcat ul { flex: 1; margin-bottom: 20px; }
.hc-kbcat ul li a { display: block; padding: 10px 0; border-top: 1px solid #F0F0F0; color: var(--hc-text-2); font-size: 16px; line-height: 1.4; transition: color .2s; }
.hc-kbcat ul li a:hover { color: var(--hc-primary); }
.hc-kbcat.is-help { color: #fff; border-color: transparent; justify-content: center; background: var(--hc-blue); }
.hc-kbcat.is-help h3 { color: #fff; }
.hc-kbcat.is-help > p { color: var(--hc-text-1); }
.hc-kbcat.is-help .button { align-self: flex-start; }
.hc-mostread { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: clamp(24px, 3vw, 48px); align-items: start; }
@media (max-width: 991px) { .hc-mostread { grid-template-columns: 1fr; } }
.hc-mostread .heading-area { margin-bottom: clamp(18px, 2vw, 28px); }
.hc-help-cards { display: flex; flex-direction: column; gap: 18px; }
.hc-help-card { display: flex; gap: 18px; align-items: flex-start; }
.hc-help-card img { width: 52px; height: 52px; flex-shrink: 0; }
.hc-help-card h3 { color: var(--hc-secondary); font-size: clamp(19px, 1.3vw, 23px); font-weight: 500; margin-bottom: 8px; line-height: 1.3; }
.hc-help-card p { color: var(--hc-text-2); font-size: 16px; margin-bottom: 12px; }

/* ---------- glossary term (three columns) ---------- */
.article-area.hc-3col .content-area .article-left { width: auto; flex: 1; }
.article-area.hc-3col .content-area .article-right { width: 340px; flex-shrink: 0; }
.hc-gloss-left { width: 240px; flex-shrink: 0; }
.hc-gloss-left__inner { position: sticky; top: 100px; display: flex; flex-direction: column; gap: 24px; }
.hc-side-card { padding: clamp(20px, 2vw, 28px); border: 1px solid var(--hc-line); border-radius: var(--hc-radius); background: #fff; }
.hc-side-card__title { display: block; color: var(--hc-secondary); font-size: clamp(18px, 1.3vw, 21px); margin-bottom: 10px; }
.hc-side-card a { display: block; padding: 9px 0; color: var(--hc-text-2); font-size: 16px; line-height: 1.4; border-top: 1px solid #F0F0F0; transition: color .2s; }
.hc-side-card a:first-of-type { border-top: 0; }
.hc-side-card a:hover { color: var(--hc-primary); }
.hc-lead { color: var(--hc-secondary) !important; font-size: clamp(20px, 1.6vw, 26px) !important; line-height: 1.5 !important; margin-bottom: clamp(20px, 2vw, 32px); }
.hc-term-badge { margin-bottom: 14px; }
@media (max-width: 1280px) {
  .article-area.hc-3col .content-area { flex-wrap: wrap; }
  .article-area.hc-3col .content-area .article-left { flex: 1 1 0; min-width: 0; }
  .article-area.hc-3col .content-area .article-right { width: 320px; }
  .hc-gloss-left { width: 100%; order: 3; }
  .hc-gloss-left__inner { position: static; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 991px) {
  .article-area.hc-3col .content-area .article-left, .article-area.hc-3col .content-area .article-right { width: 100%; flex: none; }
}
@media (max-width: 640px) { .hc-gloss-left__inner { grid-template-columns: 1fr; } }

/* ---------- domains ---------- */
.inner-banner.hc-tld-banner .content--area { max-width: none; align-items: stretch; }
.hc-tld-hero { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(30px, 4vw, 72px); align-items: center; text-align: left; width: 100%; }
.hc-tld-hero .hc-crumbs { justify-content: flex-start; }
.hc-tld-hero h1 { text-align: left; }
.hc-tld-mark { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 18px; }
.hc-tld-mark .badge.b-normal { margin-bottom: 0 !important; }
.hc-tld-logo { display: inline-flex; align-items: center; justify-content: center; min-width: 64px; height: 64px; padding: 0 14px; border-radius: 16px; background: #fff; color: var(--hc-primary); font-size: 24px; font-weight: 600; }
.hc-tld-logo img { max-height: 36px; max-width: 120px; }
.hc-tld-prices { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 28px; }
.hc-tld-prices > div { padding: 14px 20px; border-radius: 16px; background: rgba(255, 255, 255, .08); border: 1px solid rgba(190, 219, 255, .22); display: flex; flex-direction: column; gap: 6px; min-width: 130px; }
.hc-tld-prices strong { color: #fff; font-size: clamp(26px, 2.2vw, 36px); font-weight: 500; line-height: 1; letter-spacing: -.02em; }
.hc-tld-prices span { color: var(--hc-text-1); font-size: 14px; }
@media (max-width: 991px) { .hc-tld-hero { grid-template-columns: 1fr; } }
@media (max-width: 480px) { .hc-tld-prices { gap: 8px; } .hc-tld-prices > div { min-width: 0; flex: 1 1 0; padding: 12px; } .hc-tld-prices strong { font-size: 21px; } .hc-tld-prices span { font-size: 12px; } }

.hc-tldsearch { width: 100%; background: #fff; border-radius: var(--hc-radius); padding: clamp(20px, 2.5vw, 36px); box-shadow: 0 30px 60px rgba(5, 18, 74, .3); text-align: left; }
.hc-tldsearch__label { display: block; color: var(--hc-secondary); font-size: clamp(20px, 1.6vw, 26px); margin-bottom: 16px; }
.hc-tldsearch__row { display: flex; gap: 8px; align-items: stretch; }
.hc-tldsearch__field { flex: 1; display: flex; align-items: center; min-width: 0; border: 1px solid var(--hc-line); border-radius: 12px; background: var(--hc-soft); padding: 0 6px 0 16px; transition: border-color .2s; }
.hc-tldsearch__field:focus-within { border-color: var(--hc-primary); }
.hc-tldsearch__field input { flex: 1; min-width: 0; border: 0; background: transparent; outline: 0; height: 56px; font-size: 18px; color: var(--hc-secondary); font-family: inherit; }
.hc-tldsearch__field span { color: var(--hc-primary); font-weight: 600; font-size: 18px; padding: 0 8px; }
.hc-tldsearch select { border: 1px solid var(--hc-line); border-radius: 12px; background: var(--hc-soft); padding: 0 14px; font-size: 18px; font-weight: 600; color: var(--hc-secondary); height: 58px; cursor: pointer; font-family: inherit; outline: 0; }
.hc-tldsearch .button { border: 0; cursor: pointer; flex-shrink: 0; }
.hc-tldsearch__note { display: block; color: var(--hc-text-2); font-size: 15px; line-height: 1.5; margin-top: 14px; }
.hc-tldsearch.is-full { max-width: 900px; margin: 10px auto 0; padding: 10px; border-radius: 18px; }
@media (max-width: 640px) {
  .hc-tldsearch__row { flex-wrap: wrap; }
  .hc-tldsearch__field { flex-basis: 100%; }
  .hc-tldsearch select { flex: 1; }
  .hc-tldsearch .button { flex: 1; justify-content: center; }
  .hc-tldsearch.is-full .hc-tldsearch__row .button { flex: 2; }
}
.hc-trust { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 24px; margin-top: 26px; color: var(--hc-text-1); font-size: 16px; }
.hc-trust span { display: inline-flex; align-items: center; gap: 8px; }
.hc-trust span::before { content: ''; width: 16px; height: 16px; background: url(/theme/icons/check.svg) center/contain no-repeat; filter: brightness(0) invert(1); opacity: .85; }

.hc-table-wrap { position: relative; border: 1px solid var(--hc-line); border-radius: var(--hc-radius); overflow-x: auto; background: #fff; -webkit-overflow-scrolling: touch; }
.hc-table { width: 100%; border-collapse: collapse; min-width: 680px; }
.hc-table th { background: var(--hc-soft); color: var(--hc-secondary); font-weight: 600; font-size: 15px; text-align: left; padding: 18px 24px; white-space: nowrap; }
.hc-table td { padding: 16px 24px; border-top: 1px solid var(--hc-line); color: var(--hc-text-2); font-size: 17px; vertical-align: middle; }
.hc-table tbody tr { transition: background .2s; }
.hc-table tbody tr:hover { background: #FAFCFF; }
.hc-table .is-tld a, .hc-table .is-tld span { color: var(--hc-secondary); font-weight: 600; font-size: 20px; }
.hc-table .is-tld a:hover { color: var(--hc-primary); }
.hc-table .is-price { color: var(--hc-secondary); font-weight: 600; }
.hc-table .is-action { text-align: right; white-space: nowrap; }
.hc-table-note { color: var(--hc-text-3); font-size: 15px; line-height: 1.6; margin-top: 16px; max-width: 760px; }

.hc-tldpoints { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2vw, 30px); }
@media (max-width: 991px) { .hc-tldpoints { grid-template-columns: 1fr; } }
.hc-tldpoint img { width: 60px; height: 60px; margin-bottom: 20px; }
.hc-tldpoint h3 { color: var(--hc-secondary); font-size: clamp(20px, 1.5vw, 26px); font-weight: 500; line-height: 1.3; margin-bottom: 10px; }
.hc-tldpoint p { color: var(--hc-text-2); font-size: 17px; }
.hc-tldpoint { transition: border-color .2s; }
.hc-tldpoint:hover { border-color: var(--hc-primary); }

.hc-dark-panel { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 64px); align-items: center; padding: clamp(28px, 4vw, 64px); border-radius: var(--hc-radius); background: var(--hc-secondary); color: #fff; position: relative; overflow: hidden; }
.hc-dark-panel::after { content: ''; position: absolute; right: -80px; top: -80px; width: 280px; height: 280px; border-radius: 50%; background: radial-gradient(circle, rgba(37, 99, 235, .45), transparent 70%); pointer-events: none; }
.hc-dark-panel .heading-area h2 { color: #fff; }
.hc-dark-panel .heading-area p { color: var(--hc-text-1); }
.hc-dark-panel .heading-area .badge { color: var(--hc-lime); background: rgba(196, 232, 60, .12); }
.hc-dark-panel .hc-btn-row { margin-top: 8px; }
.hc-kv { position: relative; z-index: 2; border: 1px solid rgba(37, 99, 235, .6); border-radius: 16px; padding: clamp(18px, 2vw, 28px); background: rgba(37, 99, 235, .08); }
.hc-kv > div { display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; border-top: 1px solid rgba(190, 219, 255, .15); color: var(--hc-text-1); font-size: 17px; }
.hc-kv > div:first-child { border-top: 0; padding-top: 0; }
.hc-kv strong { color: #fff; font-weight: 600; }
.hc-kv strong.is-free { color: var(--hc-lime); }
.hc-kv small { display: block; color: var(--hc-text-1); font-size: 14px; margin-top: 12px; opacity: .8; }
@media (max-width: 991px) { .hc-dark-panel { grid-template-columns: 1fr; } }

.hc-two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 3vw, 48px); align-items: start; }
@media (max-width: 991px) { .hc-two { grid-template-columns: 1fr; } }
.hc-details > div { display: flex; justify-content: space-between; gap: 16px; padding: 16px 0; border-top: 1px solid var(--hc-line); color: var(--hc-text-2); font-size: 17px; }
.hc-details > div:first-child { border-top: 0; padding-top: 0; }
.hc-details > div:last-child { padding-bottom: 0; }
.hc-details strong { color: var(--hc-secondary); font-weight: 500; text-align: right; }
.hc-details strong.is-free { color: var(--hc-green); }
.hc-col-title { color: var(--hc-secondary); font-weight: 400; font-size: clamp(26px, 2.2vw, 38px); letter-spacing: -.02em; line-height: 1.2; margin-bottom: clamp(16px, 1.6vw, 24px); }

.hc-tld-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: clamp(14px, 1.4vw, 20px); }
@media (max-width: 1280px) { .hc-tld-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 640px) { .hc-tld-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.hc-tld-card { display: flex; flex-direction: column; gap: 6px; padding: clamp(18px, 1.8vw, 26px); border-radius: var(--hc-radius); background: #fff; border: 1px solid var(--hc-line); transition: border-color .2s; }
.tone-soft .hc-tld-card { border-color: transparent; }
.hc-tld-card:hover { border-color: var(--hc-primary); }
.hc-tld-card strong { color: var(--hc-secondary); font-size: clamp(24px, 1.8vw, 30px); font-weight: 500; }
.hc-tld-card span { color: var(--hc-text-2); font-size: 15px; line-height: 1.45; }
.hc-tld-card em { font-style: normal; color: var(--hc-primary); font-weight: 600; font-size: 17px; margin-top: auto; padding-top: 8px; }

/* ---------- 404 ---------- */
.hc-link-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(16px, 1.6vw, 24px); }
@media (max-width: 1124px) { .hc-link-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .hc-link-cards { grid-template-columns: 1fr; } }
.hc-link-card { display: flex; flex-direction: column; transition: border-color .2s; }
.hc-link-card:hover { border-color: var(--hc-primary); }
.hc-link-card img { width: 56px; height: 56px; margin-bottom: 20px; }
.hc-link-card h3 { color: var(--hc-secondary); font-size: clamp(20px, 1.4vw, 24px); font-weight: 500; margin-bottom: 8px; line-height: 1.3; }
.hc-link-card p { color: var(--hc-text-2); font-size: 16px; margin-bottom: 18px; flex: 1; }

/* ---------- network status ---------- */
.hc-status-pill { display: inline-flex; align-items: center; gap: 10px; padding: 8px 18px; border-radius: 110px; background: rgba(22, 163, 74, .22); border: 1px solid rgba(74, 222, 128, .45); color: #D1FAE5; font-size: 16px; margin-bottom: 18px; }
.hc-status-pill i { width: 10px; height: 10px; border-radius: 50%; background: #4ADE80; box-shadow: 0 0 0 4px rgba(74, 222, 128, .25); }
.hc-status-pill.is-degraded { background: rgba(245, 158, 11, .2); border-color: rgba(251, 191, 36, .5); color: #FEF3C7; }
.hc-status-pill.is-degraded i { background: #FBBF24; box-shadow: 0 0 0 4px rgba(251, 191, 36, .25); }
.hc-status-pill.is-outage { background: rgba(220, 38, 38, .25); border-color: rgba(248, 113, 113, .5); color: #FEE2E2; }
.hc-status-pill.is-outage i { background: #F87171; box-shadow: 0 0 0 4px rgba(248, 113, 113, .25); }
.hc-nstats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(14px, 1.6vw, 24px); }
@media (max-width: 991px) { .hc-nstats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.hc-nstat { text-align: center; }
.hc-nstat strong { display: block; margin-bottom: 10px; line-height: 1.1; }
.hc-nstat span { color: var(--hc-text-2); font-size: 16px; line-height: 1.5; display: block; }
.inner-banner + .hc-nstats-sec { padding-top: 0; position: relative; z-index: 3; margin-top: -70px; }
.inner-banner:has(+ .hc-nstats-sec) .content--area { padding-bottom: 140px; }
.hc-nstats-sec .hc-nstat { box-shadow: 0 16px 40px rgba(15, 23, 42, .08); border-color: transparent; }
.hc-window { display: inline-flex; padding: 5px; gap: 4px; border-radius: 110px; background: var(--hc-soft); border: 1px solid #DCE6FB; }
.hc-window .hc-term { padding: 8px 18px; font-size: 15px; font-family: inherit; }
.hc-comp { padding: 22px clamp(18px, 2vw, 28px); border-top: 1px solid var(--hc-line); }
.hc-comp:first-child { border-top: 0; }
.hc-comp__head { display: flex; justify-content: space-between; align-items: center; gap: 10px 16px; margin-bottom: 14px; flex-wrap: wrap; }
.hc-comp__name { display: block; color: var(--hc-secondary); font-size: 18px; font-weight: 500; }
.hc-comp__region { color: var(--hc-text-3); font-size: 14px; }
.hc-comp__right { display: flex; align-items: center; gap: 14px; }
.hc-comp__uptime { color: var(--hc-text-2); font-size: 15px; }
.hc-state { display: inline-flex; align-items: center; gap: 7px; padding: 4px 12px; border-radius: 34px; font-size: 13px; font-weight: 500; background: rgba(22, 163, 74, .1); color: #15803D; white-space: nowrap; }
.hc-state::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.hc-state.is-degraded { background: rgba(245, 158, 11, .12); color: #B45309; }
.hc-state.is-outage { background: rgba(220, 38, 38, .1); color: #B91C1C; }
.hc-state.is-maintenance { background: rgba(37, 99, 235, .1); color: var(--hc-primary); }
.hc-upbars { display: flex; gap: 2px; height: 34px; }
.hc-upbars span { flex: 1; min-width: 1px; border-radius: 3px; background: #2FBE8F; }
.hc-upbars span:hover { opacity: .7; }
.hc-upbars-foot { display: flex; justify-content: space-between; color: var(--hc-text-3); font-size: 13px; margin-top: 8px; }
@media (max-width: 640px) { .hc-upbars { gap: 1px; height: 28px; } .hc-upbars span { border-radius: 2px; } }
.hc-box-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.hc-box-head h3 { color: var(--hc-secondary); font-size: clamp(21px, 1.5vw, 26px); font-weight: 500; }
.hc-box-text { color: var(--hc-text-2); font-size: 17px; }
.hc-box-small { display: block; color: var(--hc-text-3); font-size: 14px; margin-top: 12px; }
.hc-maint { padding: 14px 0; border-top: 1px solid var(--hc-line); }
.hc-maint:first-of-type { border-top: 0; padding-top: 0; }
.hc-maint__head { display: flex; justify-content: space-between; gap: 6px 14px; flex-wrap: wrap; }
.hc-maint__head strong { color: var(--hc-secondary); font-weight: 500; font-size: 17px; }
.hc-maint__head span { color: var(--hc-primary); font-size: 15px; }
.hc-maint p { color: var(--hc-text-2); font-size: 15px; margin-top: 6px; }
.hc-incident > summary { align-items: center; }
.hc-incident__title { display: flex; align-items: center; gap: 14px; min-width: 0; }
.hc-incident__title small { display: block; color: var(--hc-text-3); font-size: 14px; font-weight: 400; margin-top: 4px; }
.hc-incident__dot { width: 10px; height: 10px; border-radius: 50%; background: #F59E0B; flex-shrink: 0; }
.hc-incident.is-outage .hc-incident__dot { background: #DC2626; }
.hc-incident > summary .hc-state { margin-left: auto; }
.hc-incident__label { display: block; color: var(--hc-secondary); font-weight: 600; font-size: 14px; letter-spacing: .06em; text-transform: uppercase; margin: 18px 0 10px; }
.hc-itimeline > div { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 14px; padding: 8px 0; border-top: 1px dashed var(--hc-line); font-size: 16px; }
.hc-itimeline > div:first-child { border-top: 0; }
.hc-itimeline span { color: var(--hc-primary); font-weight: 600; }
.hc-history-note { color: var(--hc-text-3); font-size: 15px; margin-top: 20px; text-align: center; }
@media (max-width: 640px) { .hc-incident > summary { flex-wrap: wrap; } .hc-incident > summary .hc-state { margin-left: 24px; } }
.hc-sub { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 64px); align-items: center; }
@media (max-width: 991px) { .hc-sub { grid-template-columns: 1fr; } }
.hc-sub .heading-area { margin-bottom: 20px; }
.hc-sub .list li { color: var(--hc-text-2); font-size: 17px; margin-bottom: 10px; }
.hc-form-title { display: block; color: var(--hc-secondary); font-size: clamp(20px, 1.5vw, 26px); margin-bottom: 18px; }
.hc-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 18px; }
.hc-form-grid label, .hc-subfield { display: flex; flex-direction: column; gap: 6px; color: var(--hc-text-2); font-size: 14px; }
.hc-input { height: 50px; border-radius: 10px; border: 1px solid var(--hc-line); background: #fff; padding: 0 14px; font-size: 16px; color: var(--hc-secondary); font-family: inherit; outline: 0; width: 100%; }
.hc-input:focus { border-color: var(--hc-primary); }
.hc-subchecks { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 8px 0 20px; }
.hc-subchecks label { display: flex; align-items: center; gap: 8px; color: var(--hc-text-2); font-size: 15px; cursor: pointer; }
.hc-subchecks input { accent-color: var(--hc-primary); width: 16px; height: 16px; }
.hc-form-note { display: block; color: var(--hc-text-3); font-size: 14px; margin-top: 12px; }
@media (max-width: 480px) { .hc-form-grid, .hc-subchecks { grid-template-columns: 1fr; } }

/* empty states while the blog and knowledge base are being rewritten */
.hc-empty { max-width: 720px; margin: 0 auto; text-align: center; padding: clamp(32px, 4vw, 56px); border: 1px dashed #C7D7FB; border-radius: 20px; background: var(--hc-soft); display: flex; flex-direction: column; align-items: center; gap: 14px; }
.hc-empty img { width: 64px; height: 64px; }
.hc-empty h2 { color: var(--hc-secondary); margin: 0; }
.hc-empty p { color: var(--hc-text-2); margin: 0; max-width: 560px; }
.hc-empty .hc-btn-row { justify-content: center; margin-top: 8px; }
.hc-kbcat__count.is-soon { color: var(--hc-text-3); }
.hc-mostread.is-empty { grid-template-columns: 1fr !important; max-width: 760px; margin: 0 auto; }

/* blog home: smaller hero heading, 2-col post grid */
.hc-bloghero .content--area h1.heading-3 { color: #fff; font-size: clamp(32px, 3vw, 52px); line-height: 1.15; max-width: 900px; margin-bottom: 16px; }
.hc-bloghero .content--area .sub-heading { max-width: 760px; }
.hc-bloghome .hc-bpost-grid:empty { display: none; }

/* KB category page: runs of articles and named collections in the order set on the category */
.hc-kbflow { display: flex; flex-direction: column; gap: clamp(18px, 2vw, 28px); }
.hc-kbcoll__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; margin-bottom: 12px; }
.hc-kbcoll__title { margin: 0; color: var(--hc-secondary); font-size: clamp(20px, 1.5vw, 24px); font-weight: 600; }
.hc-kbcoll__desc { flex-basis: 100%; order: 3; margin: 0; color: var(--hc-text-2); font-size: 16px; }
.hc-kbcoll__count { color: var(--hc-text-3); font-size: 14px; }

/* ==========================================================================
   Free tools: banners (tool_hero, tool_split_hero), interactive widgets
   (resources/views/tools/*), notes, explainer, tool lists and the CTA panel.
   ========================================================================== */

/* ---------- banners ---------- */
.hct-tool-hero .content--area .badge.b-normal, .hct-tool-split .content--area .badge.b-normal { text-transform: none; }
.hct-tool-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: clamp(20px, 2vw, 32px); }
.hct-tool-chips li { display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border-radius: 110px; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.14); color: #fff; }
.hct-tool-chips li::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--hc-lime); flex: none; }

/* banner split in two: text left, live IP card right */
.hct-tool-hero--split .content--area { align-items: stretch; }
.hct-tool-hero__grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(30px, 5vw, 90px); align-items: center; width: 100%; }
.hct-tool-hero__text { display: flex; flex-direction: column; align-items: flex-start; text-align: left; min-width: 0; }
.hct-tool-hero--split .content--area h1 { text-align: left; }
.hct-tool-hero--split .hc-crumbs, .hct-tool-hero--split .hct-tool-chips { justify-content: flex-start; }
.hct-tool-hero--split .sub-heading { max-width: 640px; }

/* text left, button panel right (Tools page, glossaries) */
.hct-tool-split .content--area { align-items: stretch; }
.hct-tool-split__grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(280px, .65fr); gap: clamp(30px, 5vw, 90px); align-items: end; width: 100%; }
.hct-tool-split__text { display: flex; flex-direction: column; align-items: flex-start; text-align: left; min-width: 0; }
.hct-tool-split .content--area h1 { text-align: left; margin-bottom: 20px; }
.hct-tool-split .hc-crumbs { justify-content: flex-start; }
.hct-tool-split .sub-heading { max-width: 760px; }
.hct-tool-split__side { display: flex; flex-direction: column; gap: 12px; padding: clamp(20px, 2vw, 32px); border-radius: var(--hc-radius); background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.16); backdrop-filter: blur(6px); }
.hct-tool-split__side .button { width: 100%; }
.hct-tool-split__note { margin: 4px 0 0; text-align: center; color: var(--hc-text-1); line-height: 1.4; }
.hct-tool-split.has-glow::after { content: ''; position: absolute; right: -10%; top: -20%; width: 55%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(196,232,60,.16), transparent 65%); pointer-events: none; z-index: 1; }

/* widget cards overlap the banner above them */
.hct-tool-hero:has(+ .hct-tool--overlap) .content--area, .hct-tool-split:has(+ .hct-tool--overlap) .content--area { padding-bottom: clamp(140px, 12vw, 210px); }
.hct-tool-hero + .hct-tool--overlap, .hct-tool-split + .hct-tool--overlap { padding-top: 0; }
.hct-tool-hero + .hct-tool--overlap .hct-tool__inner, .hct-tool-split + .hct-tool--overlap .hct-tool__inner { position: relative; z-index: 3; margin-top: clamp(-130px, -8vw, -80px); }

/* ---------- widget shell ---------- */
.hct-tool__inner { max-width: 1440px; margin-inline: auto; }
.hct-tool-app { display: flex; flex-direction: column; gap: clamp(16px, 1.6vw, 24px); }
.hct-tool-app.hct-tool-grid { display: grid; }
.hct-tool-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(16px, 1.6vw, 24px); align-items: start; }
.hct-tool-grid--side { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); }
.hct-tool-grid--robots { grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); }
.hct-tool-grid--wide { grid-template-columns: minmax(0, 1.4fr) minmax(0, .8fr); }
.hct-tool-stack { display: flex; flex-direction: column; gap: clamp(16px, 1.6vw, 24px); min-width: 0; }
.hct-tool-card { display: flex; flex-direction: column; gap: 20px; min-width: 0; padding: clamp(20px, 2.2vw, 36px); background: #fff; border: 1px solid var(--hc-line); border-radius: var(--hc-radius); box-shadow: 0 12px 40px rgba(15,23,42,.06); }
.hct-tool-card--sticky { position: sticky; top: 110px; }
.hct-tool-card__head { display: flex; align-items: center; justify-content: space-between; gap: 10px 16px; flex-wrap: wrap; }
.hct-tool-label { font-size: clamp(20px, 1.4vw, 24px); font-weight: 500; line-height: 1.2; color: var(--hc-secondary); letter-spacing: -.01em; }
.hct-tool-meta { font-size: 15px; color: var(--hc-text-2); }
.hct-tool-pill { display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; border-radius: 110px; background: #fff; border: 1px solid #DCE6FB; color: var(--hc-text-2); font-size: 15px; }
.hct-tool-pill::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--hc-green); }
.hct-tool-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.hct-tool-actions .button { min-width: 150px; }
.hct-btn-full { width: 100%; }
.hct-tool-empty { margin: 0; color: var(--hc-text-3); font-size: 16px; }

/* ---------- form controls (design: scss/components/_forms.scss) ---------- */
.hct-form-row { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.hct-form-pair { display: grid; grid-template-columns: 1.6fr 1fr; gap: 16px; }
.hct-form-label { font-size: 14px; line-height: 1.5; color: var(--hc-text-2); }
.hct-form-hint { font-size: 14px; line-height: 1.5; color: var(--hc-text-3); margin-top: -12px; }
.hct-form-row .hct-form-hint { margin-top: 0; }
.hct-field { display: block; width: 100%; min-width: 0; padding: 12px 14px; border: 1px solid var(--hc-line); border-radius: 8px; background: #fff; color: var(--hc-base); font: inherit; font-size: clamp(15px, 1.1vw, 17px); line-height: 1.5; transition: border-color .2s, box-shadow .2s; }
input.hct-field { height: 50px; }
textarea.hct-field { min-height: 300px; resize: vertical; line-height: 1.65; }
.hct-field::placeholder { color: var(--hc-text-3); }
.hct-field:focus { outline: none; border-color: var(--hc-primary); box-shadow: 0 0 0 4px rgba(37,99,235,.12); }
.hct-field--code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 14px; }
.hct-field--dark { background: var(--hc-secondary); border-color: var(--hc-secondary); color: #E4E4F0; }
.hct-field--dark::placeholder { color: rgba(190,219,255,.5); }
.hct-field--dark:focus { border-color: var(--hc-primary); }
textarea.hct-field--tall { min-height: 440px; }
textarea.hct-field--short { min-height: 120px; }
textarea.hct-field--mini { min-height: 76px; }

.hct-chip-btn { display: inline-flex; align-items: center; justify-content: center; flex: none; padding: 7px 16px; border: 0; border-radius: 110px; background: rgba(37,99,235,.1); color: var(--hc-primary); font: inherit; font-size: 14px; font-weight: 500; line-height: 1.2; cursor: pointer; transition: background .2s, color .2s; }
.hct-chip-btn:hover { background: var(--hc-primary); color: #fff; }

.hct-checks { display: flex; flex-direction: column; gap: 12px; }
.hct-check { display: flex; align-items: flex-start; gap: 12px; color: var(--hc-text-2); font-size: 16px; line-height: 1.45; cursor: pointer; }
.hct-check input, .hct-radio-card input { appearance: none; -webkit-appearance: none; flex: none; width: 20px; height: 20px; margin: 1px 0 0; border: 1px solid #C5D0E2; border-radius: 6px; background: #fff center / 12px no-repeat; cursor: pointer; transition: background-color .15s, border-color .15s; }
.hct-check input:checked { border-color: var(--hc-primary); background-color: var(--hc-primary); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 10'%3E%3Cpath d='M1 5.2 4.3 8.5 11 1.5' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.hct-check input:focus-visible, .hct-radio-card input:focus-visible { outline: 2px solid var(--hc-primary); outline-offset: 2px; }
.hct-check:hover input { border-color: var(--hc-primary); }

.hct-radio-list { display: flex; flex-direction: column; gap: 10px; }
.hct-radio-card { display: flex; align-items: flex-start; gap: 14px; padding: 16px 18px; border: 1px solid var(--hc-line); border-radius: 14px; background: #fff; cursor: pointer; transition: border-color .2s, background .2s; }
.hct-radio-card:hover { border-color: #A9C0F5; }
.hct-radio-card[data-on="true"] { border-color: var(--hc-primary); background: var(--hc-soft); }
.hct-radio-card input { border-radius: 50%; }
.hct-radio-card input:checked { border: 6px solid var(--hc-primary); }
.hct-radio-card__text { display: flex; flex-direction: column; gap: 4px; }
.hct-radio-card__text strong { color: var(--hc-secondary); font-weight: 500; font-size: 17px; line-height: 1.3; }
.hct-radio-card__text span { color: var(--hc-text-2); font-size: 15px; line-height: 1.5; }

.hct-seg { display: flex; gap: 4px; padding: 5px; border-radius: 110px; background: var(--hc-soft); border: 1px solid #DCE6FB; }
.hct-seg__btn { flex: 1; min-width: 0; padding: 10px 12px; border: 0; border-radius: 110px; background: transparent; color: var(--hc-text-2); font: inherit; font-size: 15px; font-weight: 500; line-height: 1.2; cursor: pointer; transition: all .2s; }
.hct-seg__btn:hover { color: var(--hc-primary); }
.hct-seg__btn[data-state*="background:#1F4FE0"] { background: var(--hc-blue); color: #fff; box-shadow: 0 6px 16px rgba(37,99,235,.25); }

.hct-range-head { display: flex; justify-content: space-between; align-items: baseline; }
.hct-range-value { font-size: 22px; font-weight: 600; color: var(--hc-primary); line-height: 1; }
.hct-range { width: 100%; height: 24px; margin: 4px 0 0; accent-color: var(--hc-primary); cursor: pointer; }

.hct-tool-alert { display: flex; gap: 12px; align-items: flex-start; padding: 16px 18px; border-radius: 14px; background: rgba(37,99,235,.06); border: 1px solid rgba(37,99,235,.2); }
.hct-tool-alert img { width: 20px; height: 20px; flex: none; margin-top: 2px; }
.hct-tool-alert p { margin: 0; color: var(--hc-text-2); font-size: 15px; line-height: 1.6; }
.hct-tool-alert code, .hct-tool-explainer code { background: rgba(37,99,235,.08); color: var(--hc-primary); padding: 1px 6px; border-radius: 6px; font-size: .92em; }

/* ---------- stat tiles ---------- */
.hct-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(12px, 1.6vw, 24px); }
.hct-stat { display: flex; flex-direction: column; gap: 12px; min-width: 0; padding: clamp(18px, 2vw, 30px); background: #fff; border: 1px solid var(--hc-line); border-radius: var(--hc-radius); box-shadow: 0 12px 40px rgba(15,23,42,.06); }
.hct-stat__label { font-size: 15px; color: var(--hc-text-2); letter-spacing: .02em; }
.hct-stat__value { font-size: clamp(28px, 2.2vw, 40px); font-weight: 600; line-height: 1; letter-spacing: -.03em; color: var(--hc-secondary); overflow-wrap: anywhere; }
.hct-stat[data-tone="#1F4FE0"] .hct-stat__value { background: var(--hc-blue); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.hct-stat[data-tone="#8A93A8"] .hct-stat__value { color: var(--hc-text-3); }
.hct-stats--mini { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.hct-stat--mini { padding: 16px 18px; gap: 8px; background: var(--hc-soft); border-color: transparent; box-shadow: none; border-radius: 14px; }
.hct-stat--mini .hct-stat__label { font-size: 14px; }
.hct-stat--mini .hct-stat__value { font-size: clamp(24px, 1.6vw, 30px); }

.hct-rows { display: flex; flex-direction: column; }
.hct-rows__row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 13px 0; border-bottom: 1px solid var(--hc-line); color: var(--hc-text-2); font-size: 16px; }
.hct-rows__row:first-child { padding-top: 0; }
.hct-rows__row:last-child { border-bottom: 0; padding-bottom: 0; }
.hct-rows__row strong { color: var(--hc-secondary); font-weight: 600; text-align: right; }

.hct-bars { display: flex; flex-direction: column; gap: 14px; }
.hct-bar { display: flex; flex-direction: column; gap: 6px; }
.hct-bar__head { display: flex; justify-content: space-between; gap: 12px; color: var(--hc-secondary); font-size: 16px; font-weight: 500; }
.hct-bar__count { color: var(--hc-text-3); font-weight: 400; }
.hct-bar__track { height: 6px; border-radius: 6px; background: var(--hc-soft); overflow: hidden; }
.hct-bar__track span { display: block; height: 100%; border-radius: 6px; background: var(--hc-blue); }

/* ---------- password ---------- */
.hct-pw { display: flex; flex-direction: column; gap: 18px; padding: clamp(22px, 2.4vw, 40px); border-radius: var(--hc-radius); background: var(--hc-secondary); color: #fff; position: relative; overflow: hidden; box-shadow: 0 12px 40px rgba(15,23,42,.12); }
.hct-pw::after { content: ''; position: absolute; right: -60px; top: -60px; width: 220px; height: 220px; border-radius: 50%; background: radial-gradient(circle, rgba(37,99,235,.35), transparent 70%); pointer-events: none; }
.hct-pw > * { position: relative; z-index: 1; }
.hct-pw__head, .hct-pw__meta { display: flex; justify-content: space-between; gap: 8px 16px; flex-wrap: wrap; }
.hct-pw__label { color: var(--hc-text-1); font-size: 15px; }
.hct-pw__strength { font-size: 15px; font-weight: 600; }
.hct-pw__value { display: block; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: clamp(22px, 2.2vw, 34px); line-height: 1.35; color: #fff; word-break: break-all; padding: 18px 20px; border-radius: 14px; border: 1px solid rgba(115,153,233,.35); background: rgba(37,99,235,.08); }
.hct-meter { height: 8px; border-radius: 8px; background: rgba(255,255,255,.1); overflow: hidden; }
.hct-meter span { display: block; height: 100%; border-radius: 8px; transition: width .3s, background .3s; }
.hct-pw__meta { color: var(--hc-text-1); font-size: 14px; }
.hct-pw-list { display: flex; flex-direction: column; border: 1px solid var(--hc-line); border-radius: 14px; overflow: hidden; }
.hct-pw-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 16px; background: #fff; }
.hct-pw-row + .hct-pw-row { border-top: 1px solid var(--hc-line); }
.hct-pw-row:nth-child(odd) { background: #FBFCFF; }
.hct-pw-row__value { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 15px; color: var(--hc-secondary); word-break: break-all; background: none; padding: 0; }

/* ---------- IP checker ---------- */
.hct-status { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 110px; background: var(--hc-soft); color: var(--hc-secondary); font-size: 14px; font-weight: 500; white-space: nowrap; }
.hct-status__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--hct-status, #E0B341); box-shadow: 0 0 0 4px color-mix(in srgb, var(--hct-status, #E0B341) 22%, transparent); }
.hct-ipcard { background: #fff; border-radius: var(--hc-radius); box-shadow: 0 30px 70px rgba(5,18,74,.35); overflow: hidden; text-align: left; min-width: 0; }
.hct-ipcard__head { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 18px clamp(20px, 2vw, 32px); border-bottom: 1px solid var(--hc-line); }
.hct-ipcard__title { color: var(--hc-text-2); font-size: 16px; }
.hct-ipcard__body { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: clamp(24px, 2.4vw, 40px) clamp(20px, 2vw, 32px); }
.hct-ipcard__ip { font-size: clamp(30px, 3vw, 54px); font-weight: 600; line-height: 1.05; letter-spacing: -.03em; color: var(--hc-secondary); word-break: break-all; }
.hct-ipcard__sub { color: var(--hc-text-2); font-size: 16px; line-height: 1.5; margin-bottom: 12px; }
.hct-ipcard__foot, .hct-featured__foot { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--hc-line); background: var(--hc-soft); }
.hct-ipcard__foot > div, .hct-featured__foot > div { display: flex; flex-direction: column; gap: 4px; padding: 16px clamp(20px, 2vw, 32px); min-width: 0; }
.hct-ipcard__foot > div + div, .hct-featured__foot > div + div { border-left: 1px solid var(--hc-line); }
.hct-ipcard__foot span, .hct-featured__foot span { color: var(--hc-text-3); font-size: 14px; }
.hct-ipcard__foot strong, .hct-featured__foot strong { color: var(--hc-secondary); font-weight: 500; font-size: 16px; overflow-wrap: anywhere; }

.hct-ipgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(12px, 1.6vw, 24px); }
.hct-ipitem { display: flex; flex-direction: column; gap: 8px; min-width: 0; padding: clamp(20px, 2vw, 30px); background: #fff; border: 1px solid transparent; border-radius: var(--hc-radius); transition: border-color .2s; }
.hct-ipitem:hover { border-color: var(--hc-primary); }
.hct-ipitem__label { color: var(--hc-text-2); font-size: 15px; }
.hct-ipitem__value { color: var(--hc-secondary); font-size: clamp(20px, 1.5vw, 26px); font-weight: 500; line-height: 1.25; overflow-wrap: anywhere; }
.hct-ipitem__hint { color: var(--hc-text-3); font-size: 14px; line-height: 1.5; }

/* ---------- Tools page featured card ---------- */
.hct-featured { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(24px, 4vw, 64px); align-items: center; padding: clamp(22px, 3vw, 48px); background: #fff; border: 1px solid var(--hc-line); border-radius: var(--hc-radius); box-shadow: 0 12px 40px rgba(15,23,42,.08); color: inherit; transition: border-color .2s; }
.hct-featured:hover { border-color: var(--hc-primary); }
.hct-featured__text { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; min-width: 0; }
.hct-featured__meta { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.hct-featured__url { color: var(--hc-text-3); font-size: 15px; }
.hct-featured__title { margin: 0; font-size: clamp(32px, 3vw, 52px); font-weight: 400; line-height: 1.1; letter-spacing: -.02em; color: var(--hc-secondary); }
.hct-featured__title span { font-weight: 600; }
.hct-featured__intro { margin: 0; color: var(--hc-text-2); font-size: clamp(16px, 1.2vw, 20px); line-height: 1.6; max-width: 620px; }
.hct-featured:hover .link-arrow { gap: 12px; }
.hct-featured__preview { border-radius: var(--hc-radius); background: var(--hc-secondary); overflow: hidden; min-width: 0; }
.hct-featured__head { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 16px 24px; border-bottom: 1px solid rgba(115,153,233,.25); color: var(--hc-text-1); font-size: 15px; }
.hct-featured__head .hct-status { background: rgba(255,255,255,.08); color: #fff; }
.hct-featured__body { display: flex; flex-direction: column; gap: 8px; padding: 28px 24px; }
.hct-featured__ip { color: #fff; font-size: clamp(26px, 2.4vw, 42px); font-weight: 600; letter-spacing: -.03em; line-height: 1.1; word-break: break-all; }
.hct-featured__sub { color: var(--hc-text-1); font-size: 15px; }
.hct-featured__foot { background: rgba(37,99,235,.12); border-top-color: rgba(115,153,233,.25); }
.hct-featured__foot > div + div { border-left-color: rgba(115,153,233,.25); }
.hct-featured__foot span { color: rgba(190,219,255,.7); }
.hct-featured__foot strong { color: #fff; }

/* ---------- notes (heading + 2x2 points) ---------- */
.hct-tool-notes__grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.4fr); gap: clamp(28px, 5vw, 90px); align-items: start; }
.hct-tool-notes__head { position: sticky; top: 120px; }
.hct-tool-notes__head .heading-area { margin-bottom: 0; }
.hct-tool-notes__head .heading-area h2 { margin-bottom: 16px; }
.hct-tool-notes__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(14px, 1.6vw, 24px); }
.hct-note { display: flex; flex-direction: column; gap: 10px; padding: clamp(20px, 2.2vw, 36px); border-radius: var(--hc-radius); background: var(--hc-soft); border: 1px solid transparent; transition: border-color .2s; }
.hct-note:hover { border-color: var(--hc-primary); }
.hct-note__num { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin-bottom: 8px; border-radius: 12px; background: var(--hc-blue); color: #fff; font-weight: 600; font-size: 17px; }
.hct-note__title { margin: 0; color: var(--hc-secondary); font-size: clamp(20px, 1.4vw, 24px); font-weight: 500; line-height: 1.3; }
.hct-note__text { margin: 0; color: var(--hc-text-2); font-size: 16px; line-height: 1.65; }

/* ---------- explainer (text + questions) ---------- */
.hct-tool-explainer__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(28px, 5vw, 90px); align-items: start; }
.hct-tool-explainer__text .heading-area { margin-bottom: 20px; }
.hct-qa { display: flex; flex-direction: column; gap: 12px; }
.hct-qa__item { border: 1px solid var(--hc-line); border-radius: var(--hc-radius); background: #fff; transition: border-color .2s; }
.hct-qa__item:hover, .hct-qa__item[open] { border-color: var(--hc-primary); }
.hct-qa__item summary { position: relative; list-style: none; cursor: pointer; padding: clamp(18px, 1.6vw, 24px) 56px clamp(18px, 1.6vw, 24px) clamp(20px, 2vw, 28px); color: var(--hc-secondary); font-size: clamp(17px, 1.2vw, 21px); font-weight: 500; line-height: 1.4; }
.hct-qa__item summary::-webkit-details-marker { display: none; }
.hct-qa__item summary::after { content: '\e902'; font-family: 'icomoon' !important; position: absolute; right: 24px; top: 50%; margin-top: -6px; font-size: 9px; line-height: 12px; color: var(--hc-primary); transition: transform .2s; }
.hct-qa__item[open] summary::after { transform: rotate(180deg); }
.hct-qa__item summary:focus-visible { outline: 2px solid var(--hc-primary); outline-offset: -2px; border-radius: var(--hc-radius); }
.hct-qa__answer { padding: 0 clamp(20px, 2vw, 28px) clamp(18px, 1.6vw, 24px); }
.hct-qa__answer p { margin: 0; color: var(--hc-text-2); font-size: 16px; line-height: 1.7; }

/* ---------- tool lists ---------- */
.hct-tools-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 1.6vw, 24px); }
.hct-tools-grid.is-compact { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.hct-tlink { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; min-width: 0; padding: clamp(20px, 2.2vw, 36px); background: #fff; border: 1px solid transparent; border-radius: var(--hc-radius); color: inherit; transition: border-color .2s, transform .2s; }
.is-outline .hct-tlink { border-color: var(--hc-line); }
a.hct-tlink:hover { border-color: var(--hc-primary); transform: translateY(-3px); }
a.hct-tlink:hover .link-arrow { gap: 12px; }
.hct-tlink__icon { width: 60px; height: 60px; margin-bottom: 8px; }
.is-compact .hct-tlink__icon { width: 48px; height: 48px; margin-bottom: 4px; }
.hct-tlink__title { color: var(--hc-secondary); font-size: clamp(20px, 1.5vw, 26px); font-weight: 500; line-height: 1.25; }
.is-compact .hct-tlink__title { font-size: clamp(18px, 1.3vw, 22px); }
.hct-tlink__text { flex: 1; color: var(--hc-text-2); font-size: 16px; line-height: 1.6; }
.hct-tlink .link-arrow { margin-top: 6px; font-size: 16px; }
.hct-tlink.is-soon { background: rgba(255,255,255,.6); border: 1px dashed #C9D5EC; }
.hct-tlink.is-soon .hct-tlink__icon { filter: grayscale(1); opacity: .6; }
.hct-tlink__soon { margin-top: 6px; padding: 5px 12px; border-radius: 110px; background: #E9EEF7; color: var(--hc-text-2); font-size: 13px; font-weight: 500; letter-spacing: .02em; }

/* ---------- CTA panel ---------- */
.hct-tool-cta { display: flex; align-items: center; justify-content: space-between; gap: clamp(24px, 4vw, 64px); padding: clamp(28px, 4vw, 64px); border-radius: var(--hc-radius); position: relative; overflow: hidden; }
.hct-tool-cta::before { content: ''; position: absolute; inset: 0; background: url("../images/banner-grid-3.svg") center bottom / cover no-repeat; opacity: .35; pointer-events: none; }
.hct-tool-cta > * { position: relative; z-index: 1; }
.hct-tool-cta__text { max-width: 780px; display: flex; flex-direction: column; align-items: flex-start; }
.hct-tool-cta .badge.b-normal { color: var(--hc-text-1); background: rgba(255,255,255,.1); margin-bottom: 16px; }
.hct-tool-cta h2 { color: #fff; margin: 0 0 16px; line-height: 1.1; }
.hct-tool-cta h2 span { font-weight: 600; }
.hct-tool-cta p { margin: 0; color: var(--hc-text-1); }
.hct-tool-cta__buttons { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; flex: none; }
.link-arrow.is-light { color: #fff; }
.link-arrow.is-light:hover { color: var(--hc-lime); }

/* ---------- responsive ---------- */
@media (max-width: 1360px) {
  .hct-tools-grid.is-compact { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 1124px) {
  .hct-tool-hero__grid, .hct-tool-split__grid { grid-template-columns: 1fr; align-items: start; }
  .hct-tool-split__side { max-width: 520px; }
  .hct-tool-grid, .hct-tool-grid--side, .hct-tool-grid--robots, .hct-tool-grid--wide { grid-template-columns: minmax(0, 1fr); }
  .hct-tool-card--sticky, .hct-tool-notes__head { position: static; }
  .hct-tool-notes__grid, .hct-tool-explainer__grid { grid-template-columns: 1fr; }
  .hct-featured { grid-template-columns: 1fr; }
  .hct-tool-cta { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 991px) {
  .hct-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hct-ipgrid, .hct-tools-grid, .hct-tools-grid.is-compact { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .hct-tool-notes__list, .hct-ipgrid, .hct-tools-grid, .hct-tools-grid.is-compact, .hct-form-pair { grid-template-columns: minmax(0, 1fr); }
  .hct-ipcard__foot, .hct-featured__foot { grid-template-columns: 1fr; }
  .hct-ipcard__foot > div + div, .hct-featured__foot > div + div { border-left: 0; border-top: 1px solid var(--hc-line); }
  .hct-featured__foot > div + div { border-top-color: rgba(115,153,233,.25); }
  .hct-tool-actions .button { flex: 1 1 100%; }
  textarea.hct-field { min-height: 220px; }
  textarea.hct-field--tall { min-height: 300px; }
  .hct-tool-cta__buttons, .hct-tool-cta__buttons .button { width: 100%; }
  .hct-tool-chips li { padding: 7px 13px; }
}
@media (max-width: 420px) {
  .hct-stats { gap: 10px; }
  .hct-stat { padding: 16px; }
  .hct-stat__value { font-size: 24px; }
}

/* <button> elements styled as design buttons */
button.button.btn-ghost, button.button.btn-line { background: transparent; }
button.button.btn-ghost:hover { background: rgba(255,255,255,.1); }
/* ==========================================================================
   Wider text blocks. Headings, intros and body text use more of the section
   width instead of narrow fixed caps, so they don't wrap onto many short lines.
   Loaded last so it wins over the earlier caps.
   ========================================================================== */

/* section intros (centred and full-width sections) */
.heading-area p,
.hc-intro .heading-area p,
.features-box.mission-values .heading-area p,
.progress-section .heading-area p,
.hc-darkcta .heading-area p { max-width: 960px; }
.plans .heading-area { max-width: 1000px; }

/* hero intros */
.inner-banner .content--area .sub-heading,
.inner-banner:is(:has(+ .hc-pricing), :has(+ .hc-includes + .hc-pricing)) .content--area .sub-heading,
.hc-bloghero .content--area .sub-heading { max-width: 1000px; }

/* closing call-to-action band */
.footer-cta-section .content-area .heading-area .sub-heading { max-width: 1000px; }

/* split layouts: the text column is already limited by the grid */
.hc-cohero.has-aside .sub-heading,
.hct-tool-hero--split .sub-heading,
.hct-tool-split .sub-heading,
.inner-banner.hc-xhero .sub-heading,
.hc-gband__body,
.hc-cosplit__head .heading-area,
.hct-featured__intro { max-width: none; }

/* single-column text sections (e.g. "Why the AblePage team is remote") */
.hc-rsplit.is-single .hc-rsplit__grid { grid-template-columns: minmax(0, 1100px); }

/* long-form text: wider, still a comfortable reading width */
.hc-richtext .hc-prose,
.hc-colegal .hc-prose { max-width: 960px; }