/* Shared palette. Legacy green tokens remain aliases for existing components. */
:root {
  --bg: #101114;
  --bg-2: #191b20;
  --surface: #22252c;
  --surface-2: #2a2e37;
  --text: #f6f7fa;
  --muted: #ccd0d9;
  --dim: #b0b7c5;
  --line: #424754;
  --green: #88baff;
  --green-2: #5e9fff;
  --cyan: #87bfff;
  --blue: #387ef0;
  --navy: #14161b;
  --navy-2: #232730;
  --brand-navy: #14161b;
  --brand-slate: #272b34;
  --brand-blue: #387ef0;
  --brand-cyan: #88baff;
  --brand-green: #88baff;
  --ink: #171b24;
  --action: #1b5ed6;
  --action-hover: #144cba;
  --paper: #edf1f7;
  --paper-ink: #1b2230;
  --paper-muted: #4c586b;
  --paper-blue: #195bb9;
  --shadow: 0 20px 48px rgba(0, 0, 0, 0.2);
  --shadow-soft: 0 10px 28px rgba(0, 0, 0, 0.14);
}

html body,
.home .service-gate-main,
.service-gate-main,
.dlhs-storefront,
.dlhs-account-page {
  color: var(--text);
  background: var(--bg);
}

body::before,
.control-room-backdrop,
.control-room-backdrop::before,
.control-room-backdrop::after,
.service-gate-main::before,
.service-gate-main::after,
.dlhs-storefront::before,
.dlhs-storefront::after {
  display: none;
  background: none;
}

/* One static image layer; opaque forms and cards keep their own contrast. */
body:not(.dlhs-customer-authenticated) {
  isolation: isolate;
}

body:not(.dlhs-customer-authenticated) .control-room-backdrop {
  display: block;
  position: fixed;
  inset: 0;
  z-index: -1;
  opacity: 1;
  pointer-events: none;
  background-color: var(--bg);
  background-image:
    linear-gradient(90deg, rgba(16, 17, 20, 0.35), rgba(16, 17, 20, 0.68) 8%, rgba(16, 17, 20, 0.72) 50%, rgba(16, 17, 20, 0.68) 92%, rgba(16, 17, 20, 0.35)),
    url("../images/dustinlabs-circuits-desktop.webp");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

body:not(.dlhs-customer-authenticated) :is(.service-gate-main, .dlhs-storefront, .dlhs-account-page) {
  background: transparent;
}

@media (max-width: 760px) {
  body:not(.dlhs-customer-authenticated) .control-room-backdrop {
    background-image:
      linear-gradient(rgba(16, 17, 20, 0.68), rgba(16, 17, 20, 0.68)),
      url("../images/dustinlabs-circuits-mobile.webp");
    background-position: 18% center;
  }
}

@media print, (forced-colors: active), (prefers-contrast: more) {
  body:not(.dlhs-customer-authenticated) .control-room-backdrop { display: none; }
}

.site-header,
.rb-page-scrolled .site-header {
  border-color: #353a45;
  background: #14161b;
  box-shadow: none;
}

body .tiny-action {
  border-color: var(--line);
  background: #252932;
  box-shadow: none;
}

body .brand,
body .nav {
  border-color: transparent;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
}

body .brand:hover { transform: none; box-shadow: none; }

body .nav a {
  min-height: 44px;
  align-items: center;
  border-radius: 0;
  font-size: 14px;
  font-weight: 600;
  transition: color 150ms ease;
}

body .nav a,
body .tiny-action { color: #e1e5ed; }

body .nav a:hover,
body .nav .current-menu-item > a,
body .nav a[aria-current="page"] {
  color: #ffffff;
  background: transparent;
  text-decoration: underline;
  text-decoration-color: var(--green);
  text-decoration-thickness: 2px;
  text-underline-offset: 7px;
}

body .tiny-action:hover {
  color: #ffffff;
  background: #334363;
}

body .header-account,
body .header-account[aria-current="page"],
body.dlhs-public-account .header-account {
  min-height: 44px;
  padding: 0 18px;
  border: 1px solid #737b8a;
  border-radius: 4px;
  color: #f6f7fa;
  background: transparent;
  box-shadow: none;
  font-size: 14px;
  font-weight: 600;
  transform: none;
  transition: background-color 150ms ease, border-color 150ms ease;
}

body .header-account::before {
  display: none;
  content: none;
}

body .header-account:hover,
body .header-account:focus-visible {
  border-color: #c4cbd7;
  background: #2a2e37;
  transform: none;
}

.header-menu-toggle { display: none; }

@media (max-width: 1100px) {
  body .site-header {
    grid-template-columns: auto minmax(0, 1fr) auto auto;
  }

  body .site-header > .brand { grid-column: 1; grid-row: 1; }
  body .site-header > .header-account { grid-column: 3; grid-row: 1; }
  body .site-header > .header-cta { display: none; }

  body .site-header.is-navigation-ready .header-menu-toggle {
    display: inline-grid;
    grid-column: 4;
    grid-row: 1;
    place-items: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid #737b8a;
    border-radius: 4px;
    background: transparent;
    color: var(--text);
    cursor: pointer;
  }

  .header-menu-toggle span {
    width: 20px;
    height: 20px;
    background: currentColor;
    mask: url("../icons/menu.svg") center / contain no-repeat;
    -webkit-mask: url("../icons/menu.svg") center / contain no-repeat;
  }

  body .header-menu-toggle:hover,
  body .header-menu-toggle[aria-expanded="true"] { background: #2a2e37; }

  body .site-header.is-navigation-ready > .nav {
    display: none;
    position: absolute;
    top: 100%;
    right: 16px;
    left: auto;
    width: min(340px, calc(100% - 32px));
    max-height: calc(100dvh - 90px);
    overflow-y: auto;
    padding: 8px;
    border: 1px solid var(--line);
    border-radius: 4px;
    background: #1b1e25;
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.2);
  }

  body .site-header.is-navigation-open > .nav { display: grid; }
  body .site-header .nav ul { display: grid; }
  body .site-header .nav a { width: 100%; padding: 12px; }

  body .site-header:not(.is-navigation-ready) { position: relative; }
  body .site-header:not(.is-navigation-ready) > .nav {
    display: flex;
    grid-column: 1 / -1;
    grid-row: 2;
    flex-wrap: wrap;
  }
}

body .site-footer {
  grid-template-columns: minmax(220px, 1fr) minmax(0, 2fr);
  align-items: start;
  gap: 24px 40px;
  border-color: var(--line);
  background: #17191e;
}

body .footer-brand { grid-column: 1; grid-row: 1 / span 2; min-width: 0; }
body .site-footer nav {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-column: 2;
  grid-row: 1;
  gap: 12px 24px;
  justify-content: start;
  min-width: 0;
}
body .site-footer a { font-weight: 500; }
body .footer-mail { grid-column: 2; grid-row: 2; overflow-wrap: anywhere; }
body .footer-price-note { grid-column: 1 / -1; grid-row: 3; margin: 0; }

@media (max-width: 760px) {
  body .site-footer { grid-template-columns: minmax(0, 1fr); }
  body .site-footer > * { grid-column: 1; grid-row: auto; }
  body .site-footer nav { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.site-footer a,
.home-manager-console a,
.home-manager-console a span,
.home-choice-arrow,
.home-choice-index,
.home-request-steps strong,
.home-service-content > span,
.home-service-content > a,
.home-service-content > a span,
.home-request-trust,
.eyebrow,
.home :is(.home-sales-copy, .home-choice-head, .home-section-head,
  .home-request-copy, .home-final-cta) .eyebrow,
.home-request-steps li > span,
.static-main .eyebrow,
.dlhs-eyebrow,
.hero-useful-panel-head span,
.hero-service-media figcaption span,
.dlhs-domain-only-intro span,
.dlhs-hosting-media figcaption span,
.dlhs-account-hero-panel > span,
.ads-package-card > strong {
  color: var(--green);
}

/* Solid blue actions use white type on both light and dark surfaces. */
body .header-cta,
body .button.primary,
body .home-sales-actions > .button,
body .home-final-actions > .button,
body .sticky-cta,
body .service-route-action,
body .service-route-detail-link,
body .home-domain-fields button,
body .dlhs-button-primary {
  color: #ffffff;
  border-color: #4989eb;
  background: var(--action);
  border-radius: 4px;
  box-shadow: none;
  font-weight: 600;
}

body .header-cta:hover,
body .button.primary:hover,
body .home-sales-actions > .button:hover,
body .home-final-actions > .button:hover,
body .sticky-cta:hover,
body .service-route-main:hover .service-route-action,
body .service-route-detail-link:hover,
body .home-domain-fields button:hover,
body .dlhs-button-primary:hover {
  color: #ffffff;
  background: var(--action-hover);
}

body .button.secondary,
body .dlhs-button-secondary {
  color: var(--text);
  border-color: #697487;
  background: #303744;
  box-shadow: none;
}

body .button.secondary:hover,
body .dlhs-button-secondary:hover { background: #3a4961; }

body :is(a, button, input, select, textarea, summary):focus-visible {
  outline: 3px solid #75aaff;
  outline-offset: 3px;
}

body input[type="checkbox"],
body input[type="radio"],
body input[type="range"] { accent-color: var(--action); }

/* Section backgrounds stay quieter than the individual items they contain. */
.static-main :is(.page-hero, .problem-band, .solution-band, .services-band,
  .results-band, .roi-band, .automation-band, .process-band, .cases-band,
  .trust-band, .faq-band, .lead-band, .content-split, .service-summary-band,
  .problem-summary-band, .final-cta),
.ads-packages-band {
  border-color: var(--line);
  background: var(--bg-2) !important;
  box-shadow: none;
}

.static-main .page-hero { background: transparent !important; }

.home-choice-link,
.home-service-card,
.home-request-steps li,
.static-main :is(.micro-card, .pain-card, .pricing-card, .result-card,
  .service-card, .automation-card, .process-step, .case-card, .split-card,
  .console, .faq-list details, .roi-calculator, .roi-output, .service-route-card,
  .service-route-detail, .hero-useful-panel),
.ads-soon-card,
.ads-package-card,
.ads-setup-card {
  border-color: var(--line);
  background: var(--surface) !important;
  box-shadow: var(--shadow-soft);
}

.home-choice-link:hover,
.home-choice-link:focus-visible {
  border-color: #89baff;
  background: #30394a !important;
  transform: none;
}

.home-choice-link.is-featured,
.ads-package-card.is-featured {
  border-color: #6296e1;
  background: #263245 !important;
}

.home-request-steps { background: var(--line); border-color: var(--line); }
.home-choice-block,
.home-request-band { border-color: var(--line); }

.home-final-cta,
.home-hosting-band {
  border-color: #526782;
  background: #253349;
  box-shadow: none;
}

.home-final-cta {
  border: 0;
  border-top: 1px solid var(--line);
  border-radius: 0;
  padding-inline: 0;
  background: transparent;
}

.hero-useful-panel-head,
.hero-useful-panel-list li,
.static-main .service-route-links,
.static-main .service-route-links a {
  border-color: var(--line);
  background: #30353f;
}

.static-main .service-route-links a:hover {
  color: #ffffff;
  background: var(--action);
}

.section-head,
.section-head::before,
.lead-copy,
.service-route-card { border-left-color: #75aaff; }

.service-route-links::before,
.service-route-links::after,
.service-route-card::before,
.micro-card::before,
.service-card::before,
.static-main .hero-useful-panel::before,
.service-route-card--ads .service-route-main::after,
.home-request-trust span::before,
.dlhs-account-hero-panel li::before {
  background: #5e9fff;
}

.static-main .service-price,
.static-main .pricing-card .service-price,
.static-main .service-card .service-price,
.static-main .process-step > span,
.static-main .automation-card > span,
.service-route-label,
.service-route-detail-label,
.ads-pill {
  color: #c5dcff;
  border-color: #4d709e;
  background: #263d5d;
}

/* Categories are text, not controls. Keep availability badges distinct. */
body :is(.service-route-label, .service-route-detail-label, .ads-pill) {
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--green);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.5;
}

body .service-route-icon,
body .service-route-main::after,
body .service-route-card::before,
body .micro-card::before,
body .service-card::before,
body .home-request-trust span::before {
  display: none;
}

.static-main .section-head {
  padding-left: 0;
  border-left: 0;
}

body .home-request-trust {
  color: var(--muted);
  font-weight: 500;
}

body .home-request-trust span { padding-left: 0; }

body .service-route-card:hover,
body .home-service-card:hover {
  transform: none;
  box-shadow: none;
}

body :is(.header-cta, .button, .sticky-cta, .dlhs-button-primary):hover {
  transform: none;
  box-shadow: none;
}

.ads-price strong,
.ads-setup-price strong,
.service-price strong,
.static-main .control-status strong,
.hero-useful-panel-list span,
.check-list li::marker,
.trust-list li::marker { color: var(--green); }

.hero-useful-panel-list li::before {
  color: #111a2b;
  background: #a4caff;
}

.static-main .process-step::before,
.static-main .case-card::before { background: none; }

.dlhs-price-policy { color: var(--muted); }

/* The domain checker remains a light, clearly readable working surface. */
.home-hosting-manager {
  color: var(--paper-ink);
  border-color: #a9bad4;
  background: var(--paper);
  box-shadow: var(--shadow);
}

.home-manager-kicker,
.home-manager-plan strong,
.home-domain-result.is-success { color: var(--paper-blue); }

.home-manager-plan {
  position: relative;
  color: var(--paper-ink);
  border-color: #b9c5d6;
  background: #f9fbff;
}

.home-manager-plan.is-featured {
  border-color: #6a9adc;
  background: #dce9fb;
}

.home-manager-plans {
  margin-top: 12px;
  align-items: stretch;
  row-gap: 22px;
}

.home-manager-plan-badge {
  position: absolute;
  top: -12px;
  left: 10px;
  padding: 4px 8px;
  border-radius: 4px;
  color: #fff;
  background: #245eb9;
  font-size: 10px;
  font-weight: 700;
  line-height: 1.4;
}

.home-manager-plan {
  padding-top: 20px;
  grid-template-rows: auto auto auto auto 1fr auto;
}

.home-manager-plan-cta {
  display: flex;
  grid-column: 1 / -1;
  justify-content: space-between;
  gap: 8px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid #b9c5d6;
  color: var(--paper-blue);
  font-size: 12px;
  font-weight: 700;
}

.home-manager-pricing-trust {
  margin: 0;
  color: var(--paper-muted);
  font-size: 12px;
  line-height: 1.6;
}

@media (max-width: 700px) {
  .home-manager-plan { grid-template-rows: auto; }
}

.home-manager-plan em,
.home-manager-plan-name,
.home-manager-plan-fit,
.home-manager-plan-features li,
.home-manager-plan strong small,
.home-manager-intro,
.home-domain-result { color: var(--paper-muted); }

.home-manager-plan-features li::before,
.home-domain-result.is-success > span { background: var(--paper-blue); }

.home-manager-console {
  border-color: #495569;
  background: #252e3d;
}

.home-manager-console p { color: #d0d8e6; }

.home-domain-fields input::placeholder,
.lead-form input::placeholder,
.lead-form textarea::placeholder,
.static-main .lead-form input::placeholder,
.static-main .lead-form textarea::placeholder {
  color: #586779;
  opacity: 1;
}

.static-main .lead-form,
.lead-form {
  color: var(--paper-ink);
  border-color: #b9c5d6;
  background: var(--paper) !important;
}

.static-main .lead-form label,
.lead-form label,
.static-main .lead-form .consent span,
.static-main .lead-form p { color: var(--paper-ink); }

.static-main .lead-form a:not(.button) { color: var(--paper-blue); }

.static-main .lead-form :is(input, textarea, select),
.lead-form :is(input, textarea, select) {
  color: var(--paper-ink);
  border-color: #97a6ba;
  background: #ffffff;
}

/* Hosting styles belong to the theme, not to the provisioning configuration. */
.dlhs-page {
  --dlhs-bg: var(--bg);
  --dlhs-paper: var(--surface);
  --dlhs-paper-2: var(--surface-2);
  --dlhs-ink: var(--text);
  --dlhs-muted: var(--muted);
  --dlhs-line: var(--line);
  --dlhs-green: var(--green);
  --dlhs-cyan: var(--cyan);
  --dlhs-blue: var(--blue);
}

body:not(.dlhs-customer-authenticated) :is(.dlhs-domain-search,
  .dlhs-checkout-form, .dlhs-cart, .dlhs-domain-result, .dlhs-login-box,
  .dlhs-included-panel, .dlhs-plan-card, .dlhs-account-hero-panel,
  .dlhs-account-start-card, .dlhs-checkout-message) {
  border-color: var(--line);
  background: var(--surface);
  box-shadow: var(--shadow-soft);
}

.dlhs-storefront .dlhs-plan-card.is-selected {
  border-color: #82b2fa;
  background: #28364d;
  box-shadow: inset 0 3px 0 #82b2fa;
}

.dlhs-storefront .dlhs-plan-card.is-selected .dlhs-button-secondary {
  color: #ffffff;
  border-color: #4989eb;
  background: var(--action);
}

.dlhs-domain-only-intro,
.dlhs-trust-strip li,
.dlhs-plan-badge,
.dlhs-email-limit-note {
  color: #d7e6fc;
  border-color: #506584;
  background: #253247;
}

.dlhs-trust-strip span,
.dlhs-plan-price strong,
.dlhs-price strong,
.dlhs-text-link,
.dlhs-plan-card li::before { color: var(--green); }

.dlhs-plan-card li::before,
.dlhs-included-panel li::before,
.dlhs-plan-card li::marker { color: var(--green); background: var(--green); }

/* Keep package comparisons compact, without stretching the feature lists. */
#hostingpakketten .dlhs-plan-grid {
  gap: 20px;
  align-items: stretch;
  margin-top: 32px;
}

#hostingpakketten .dlhs-plan-card {
  position: relative;
  min-width: 0;
  min-height: 0;
  padding: 28px;
  border: 1px solid #484f5d;
  border-radius: 8px;
  background: #22262e;
  box-shadow: none;
  gap: 22px;
  grid-template-rows: auto auto 1fr auto;
  transform: none;
  transition: border-color 160ms ease, background-color 160ms ease;
}

#hostingpakketten .dlhs-plan-card > div:first-child {
  min-height: 0;
}

#hostingpakketten .dlhs-plan-card .dlhs-plan-kicker {
  margin: 0 0 10px;
  color: #a9c9f7;
  font-size: 12px;
  line-height: 1.5;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
}

#hostingpakketten .dlhs-plan-card h3 {
  margin: 0 0 12px;
  color: #f6f8fc;
  font-size: 26px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0;
}

#hostingpakketten .dlhs-plan-card > div:first-child > p:last-child {
  color: #c9cfda;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.55;
}

#hostingpakketten .dlhs-plan-badge,
#hostingpakketten .dlhs-plan-status {
  min-height: 0;
  margin: 0 0 12px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  color: #a9c9f7;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.5;
  text-transform: none;
}

#hostingpakketten .dlhs-plan-card.is-featured {
  border-color: #7aa9ef;
  background: #222e42;
  box-shadow: 0 0 0 1px rgba(122, 169, 239, 0.12);
}

#hostingpakketten .dlhs-plan-badge {
  position: absolute;
  top: -14px;
  left: 24px;
  margin: 0;
  padding: 5px 12px;
  border: 1px solid #78aaff;
  border-radius: 5px;
  color: #ffffff;
  background: #245eb9;
  font-size: 12px;
  line-height: 1.5;
}

#hostingpakketten .dlhs-price {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  align-content: start;
  align-items: baseline;
  column-gap: 10px;
  margin: 0;
  padding: 0 0 22px;
  border-top: 0;
  border-bottom: 1px solid #454d5b;
}

#hostingpakketten .dlhs-price strong {
  color: #a1c6ff;
  font-size: 38px;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: 0;
}

#hostingpakketten .dlhs-price span {
  margin: 0;
  color: #d4dbe6;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
}

#hostingpakketten .dlhs-price small {
  grid-column: 1 / -1;
  margin: 4px 0 0;
  color: #bcc6d5;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.5;
}

#hostingpakketten .dlhs-price small:first-of-type {
  margin-top: 12px;
  color: #e6ebf3;
  font-weight: 500;
}

#hostingpakketten .dlhs-plan-card ul {
  align-content: start;
  grid-auto-rows: min-content;
  gap: 12px;
  margin: 0;
  padding: 0;
}

#hostingpakketten .dlhs-plan-card li {
  align-items: flex-start;
  gap: 10px;
  color: #d8dee8;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

#hostingpakketten .dlhs-plan-card li::before {
  content: "✓";
  flex: 0 0 16px;
  width: 16px;
  height: auto;
  margin-top: 0;
  color: #91bfff;
  background: transparent;
  font-weight: 700;
}

#hostingpakketten .dlhs-plan-details {
  margin-top: 18px;
  padding-top: 12px;
  border-top: 1px solid #454d5b;
  color: #c9cfda;
  font-size: 13px;
  line-height: 1.55;
}

#hostingpakketten .dlhs-plan-details summary {
  cursor: pointer;
  color: #a9c9f7;
}

#hostingpakketten .dlhs-plan-details summary:focus-visible {
  outline: 2px solid #a1c6ff;
  outline-offset: 4px;
}

#hostingpakketten .dlhs-plan-details p {
  margin: 10px 0 0;
  font-size: inherit;
  line-height: inherit;
}

#hostingpakketten .dlhs-pricing-trust {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px 24px;
  margin: 24px 0;
  padding: 0;
  list-style: none;
  color: #c9d5e5;
  font-size: 14px;
  line-height: 1.5;
}

#hostingpakketten .dlhs-pricing-trust li::before {
  content: "✓";
  margin-right: 8px;
  color: #91bfff;
}

#hostingpakketten .dlhs-plan-card > .dlhs-button {
  width: 100%;
  min-height: 48px;
  padding: 12px 18px;
  border: 1px solid #637794;
  border-radius: 5px;
  background: #303c50;
  color: #ffffff;
  box-shadow: none;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.4;
  transform: none;
}

#hostingpakketten .dlhs-plan-card > .dlhs-button:hover:not(:disabled) {
  border-color: #a1c6ff;
  background: #3b4c67;
}

#hostingpakketten .dlhs-plan-card > .dlhs-button:focus-visible {
  outline: 2px solid #a1c6ff;
  outline-offset: 4px;
}

#hostingpakketten .dlhs-plan-card.is-selected {
  border-color: #91bfff;
  background: #252e3d;
  box-shadow: inset 0 3px 0 #91bfff;
}

#hostingpakketten .dlhs-plan-card.is-selected > .dlhs-button {
  border-color: #78aaff;
  background: #1b5ed6;
}

#hostingpakketten .dlhs-plan-card.is-featured > .dlhs-button {
  border-color: #78aaff;
  background: #1b5ed6;
}

#hostingpakketten .dlhs-plan-card.is-featured > .dlhs-button:hover:not(:disabled) {
  background: #246ce8;
}

@supports (grid-template-rows: subgrid) {
  #hostingpakketten .dlhs-plan-card {
    grid-row: span 4;
    grid-template-rows: subgrid;
  }
}

@media (min-width: 901px) {
  #hostingpakketten .dlhs-plan-kicker { min-height: 36px; }
}

@media (max-width: 900px) {
  #hostingpakketten .dlhs-plan-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
  }

  #hostingpakketten .dlhs-plan-card {
    grid-row: auto;
    grid-template-rows: auto auto auto auto;
    padding: 24px;
    gap: 20px;
  }
}

@media (max-width: 380px) {
  #hostingpakketten .dlhs-plan-card { padding: 20px; }
}

@media (prefers-reduced-motion: reduce) {
  #hostingpakketten .dlhs-plan-card { transition: none; }
}

body:not(.dlhs-customer-authenticated) :is(.dlhs-login-box,
  .dlhs-checkout-form, .dlhs-domain-search) :is(input, select, textarea) {
  color: var(--paper-ink);
  border-color: #97a6ba;
  background: #f9fbff;
}

body:not(.dlhs-customer-authenticated) .dlhs-page input::placeholder {
  color: #586779;
  opacity: 1;
}

body .dlhs-button:disabled,
body .dlhs-button[aria-disabled="true"] {
  color: #d1d6e1;
  border-color: #657086;
  background: #363d49;
  box-shadow: none;
}

/* Keep the business portal light, with a charcoal shell and blue navigation. */
body.dlhs-customer-authenticated {
  --dl-app-shell: #1b1e25;
  --dl-app-sidebar: #282d36;
  --dl-app-sidebar-hover: #354156;
  --dl-app-blue: #1b5ed6;
  --dl-app-blue-dark: #144cba;
  --dl-app-brand: #88baff;
  --dl-app-success: #195bb9;
  background: var(--dl-app-canvas);
}

body.dlhs-customer-authenticated .dlhs-app-status i {
  box-shadow: 0 0 0 3px rgba(136, 186, 255, 0.13);
}

body.dlhs-customer-authenticated .dlhs-text-link { color: var(--dl-app-blue-dark); }

@media (prefers-reduced-motion: reduce) {
  body :is(.rb-card-spotlight-layer, .rb-glare-hover-layer) { display: none; }
}

/* 4.26.30 — the shared header keeps the same colors on hosting/account pages. */
body.dustinlabs-theme header.site-header {
  background: #14171c;
  border-bottom-color: #303741;
  box-shadow: none;
  backdrop-filter: none;
}
body.dustinlabs-theme .site-header > .nav {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
  backdrop-filter: none;
}
body.dustinlabs-theme .site-header .nav a {
  color: #e1e5ed;
  background: transparent;
}
body.dustinlabs-theme .site-header .nav a:hover,
body.dustinlabs-theme .site-header .nav .current-menu-item > a,
body.dustinlabs-theme .site-header .nav a[aria-current="page"] {
  color: #ffffff;
  background: transparent;
  text-decoration-color: #88baff;
}
body.dustinlabs-theme .site-header .header-account,
body.dustinlabs-theme .site-header .header-menu-toggle {
  color: #f6f7fa;
  border-color: #606a78;
  background: transparent;
}
body.dustinlabs-theme .site-header .header-account:hover,
body.dustinlabs-theme .site-header .header-account:focus-visible,
body.dustinlabs-theme .site-header .header-menu-toggle:hover,
body.dustinlabs-theme .site-header .header-menu-toggle[aria-expanded="true"] {
  border-color: #c4cbd7;
  background: #2a2e37;
}
@media (max-width: 1100px) {
  body.dustinlabs-theme .site-header > .nav {
    background: #1b2028;
    border-color: #39414d;
  }
}