/**
 * Happily Hosted public-site aesthetic refinement
 *
 * Tokens sampled from the logo asset and existing stylesheets, then darkened
 * where the sampled value fails WCAG AA on its intended background.
 * Scoped to html[data-design="refinement"]. Silent rollback: ?dev_design=current
 */

/*
 * Type scale is in px, not rem. Bootstrap sets html { font-size: 62.5% }
 * (10px root), so rem tokens halved every size on the page.
 */
html[data-design="refinement"] {
    font-size: 16px;
}

[data-design="refinement"] {
    --brand: #00b090;          /* sampled from hh-full-logo-large.png */
    --brand-strong: #007a63;   /* same hue, AA on white / --surface / white-on-brand */
    --brand-tint: #e6f7f1;
    --action: #e67e22;         /* existing CTA */
    --action-dark: #d35400;
    --ink: #2c3e50;            /* existing --hh-dark / hero */
    --ink-2: #1a252f;          /* existing footer / benefits base */
    --surface: #f5f7fa;
    --text: #2c3e50;
    --text-muted: #4b5563;     /* 7.0:1 on --surface; darkened from #7f8c8d */
    --line: #e3e7ed;
    --footer-muted: #c5cdd6;   /* 9.7:1 on --ink-2 */
    --page-max: 1170px;        /* Bootstrap .container at ≥1200px; pricing table width */

    --type-display: 48px;
    --type-h2: 32px;
    --type-h3: 20px;
    --type-body: 16px;
    --type-small: 14px;
    --type-caption: 13px;
    --type-legal: 12px;
}

[data-design="refinement"] body {
    background: var(--surface);
    color: var(--text);
    font-size: 16px;
}

[data-design="refinement"] #content.order-page {
    background: #fff;
}

[data-design="refinement"] #content .container,
[data-design="refinement"] header .container,
[data-design="refinement"] footer .container,
[data-design="refinement"] .hero-slide .container,
[data-design="refinement"] .hh-trust-refined .container {
    max-width: var(--page-max);
    width: 100%;
}

[data-design="refinement"] a {
    color: var(--brand-strong);
}

[data-design="refinement"] a:hover {
    color: var(--brand);
}

[data-design="refinement"] :focus {
    outline: none;
}

[data-design="refinement"] :focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 2px;
}

[data-design="refinement"] .nav-cart-badge {
    background: var(--brand-strong);
    font-size: var(--type-caption);
    min-width: 20px;
    height: 20px;
    line-height: 20px;
    border-radius: 10px;
}

/* Status pill: operational green → brand. Other statuses keep functional colours. */
[data-design="refinement"] .hh-status-indicator[data-status="operational"] {
    color: var(--brand-strong) !important;
}
[data-design="refinement"] .hh-status-indicator[data-status="operational"] .hh-status-dot {
    background: var(--brand-strong) !important;
}

/* -------------------------------------------------------------------------- */
/* Header                                                                      */
/* -------------------------------------------------------------------------- */
[data-design="refinement"] .mainmenu ul li a:hover,
[data-design="refinement"] .mainmenu ul li.active a {
    color: var(--brand-strong);
    background: var(--brand-tint);
}

/* -------------------------------------------------------------------------- */
/* Hero                                                                        */
/* -------------------------------------------------------------------------- */
[data-design="refinement"] .hero-wrapper {
    background: var(--ink);
}

[data-design="refinement"] .hero-section {
    padding-bottom: 0;
}

[data-design="refinement"] .hero-slide,
[data-design="refinement"] .hero-slide.active {
    position: relative;
    background-color: var(--ink);
    background-image: none !important;
    min-height: 0;
}

[data-design="refinement"] .hero-hex-mesh {
    display: block;
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='55' viewBox='0 0 32 55'%3E%3Cpath d='M16 1.5 L30 9.5 V25.5 L16 33.5 L2 25.5 V9.5 Z' fill='none' stroke='%2300b090' stroke-width='1.15'/%3E%3Cpath d='M16 33.5 L30 41.5 V56' fill='none' stroke='%2300b090' stroke-width='1.15'/%3E%3Cpath d='M16 33.5 L2 41.5 V56' fill='none' stroke='%2300b090' stroke-width='1.15'/%3E%3C/svg%3E");
    background-repeat: repeat;
    background-size: 32px 55px;
    opacity: 0.34;
    -webkit-mask-image: linear-gradient(to bottom right, #000 0%, rgba(0,0,0,0.55) 38%, transparent 78%);
    mask-image: linear-gradient(to bottom right, #000 0%, rgba(0,0,0,0.55) 38%, transparent 78%);
}

[data-design="refinement"] .hero-overlay {
    display: none;
}

[data-design="refinement"] .hero-slide .container {
    position: relative;
    z-index: 2;
}

[data-design="refinement"] .hero-content {
    justify-content: flex-start;
    text-align: left;
    padding: 40px 0 36px;
}

[data-design="refinement"] .hero-text {
    max-width: 640px;
    text-align: left;
}

[data-design="refinement"] .hero-title {
    font-size: 48px !important;
    line-height: 1.15;
    color: #fff;
}

[data-design="refinement"] .hero-price-row .hero-price {
    font-size: 42px;
}

[data-design="refinement"] .hero-price-row .hero-price-note {
    font-size: 16px;
}

[data-design="refinement"] .hero-subtitle {
    font-size: 22px !important;
}

[data-design="refinement"] .hero-features li {
    font-size: 16px;
}

[data-design="refinement"] .hero-subtitle {
    color: rgba(255, 255, 255, 0.92);
}

[data-design="refinement"] .hero-features li {
    justify-content: flex-start;
    text-align: left;
}

[data-design="refinement"] .hero-features li i {
    color: var(--brand) !important;
}

[data-design="refinement"] .hero-cta,
[data-design="refinement"] a.hero-cta,
[data-design="refinement"] a.hero-cta:visited {
    background: var(--action);
    box-shadow: none;
    border-radius: 8px;
}

[data-design="refinement"] .hero-cta:hover,
[data-design="refinement"] a.hero-cta:hover,
[data-design="refinement"] .btn-primary:hover,
[data-design="refinement"] a.btn-primary:hover,
[data-design="refinement"] .btn-primary:focus {
    background: var(--action-dark);
    box-shadow: none;
    transform: none;
}

[data-design="refinement"] .hero-cta-row .btn-secondary-hero {
    border-color: rgba(255, 255, 255, 0.7);
    color: #fff !important;
}

[data-design="refinement"] .hero-domain-search .domain-btn-search {
    background: var(--action);
    color: #fff;
}

[data-design="refinement"] .hero-domain-search .domain-btn-search:hover,
[data-design="refinement"] .hero-domain-search .domain-btn-search:focus {
    background: var(--action-dark);
    color: #fff;
}

[data-design="refinement"] .hero-domain-search .domain-search-inner {
    overflow: visible !important;
    gap: 8px;
    background: transparent !important;
    box-shadow: none !important;
}

[data-design="refinement"] .hero-domain-search .domain-search-input {
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
}

[data-design="refinement"] .hero-domain-search .domain-btn-search {
    border-radius: 8px;
}

[data-design="refinement"] .hero-domain-search .domain-btn-transfer {
    background: transparent !important;
    color: #fff !important;
    border: 2px solid rgba(255, 255, 255, 0.7) !important;
    border-left: 2px solid rgba(255, 255, 255, 0.7) !important;
    box-shadow: none !important;
    border-radius: 8px;
}

[data-design="refinement"] .hero-domain-search .domain-btn-transfer:hover,
[data-design="refinement"] .hero-domain-search .domain-btn-transfer:focus {
    background: rgba(255, 255, 255, 0.12) !important;
    color: #fff !important;
}

[data-design="refinement"] .hero-image {
    display: none;
}

@media (max-width: 992px) {
    [data-design="refinement"] .hero-content {
        flex-direction: column;
        text-align: left;
    }
    [data-design="refinement"] .hero-text {
        max-width: 640px;
    }
    [data-design="refinement"] .hero-features li {
        justify-content: flex-start;
    }
}

@media (max-width: 576px) {
    [data-design="refinement"] .hero-overlay {
        display: none !important;
        background: none !important;
    }
    [data-design="refinement"] .hero-title {
        font-size: 32px !important;
    }
}

/* -------------------------------------------------------------------------- */
/* Trust band                                                                  */
/* -------------------------------------------------------------------------- */
[data-design="refinement"] .hh-trust-current {
    display: none;
}

[data-design="refinement"] .hh-trust-refined {
    display: block !important;
}

[data-design="refinement"] #testimonial-full {
    background: var(--ink-2) !important;
    padding: 48px 0 !important;
    text-align: left;
}

[data-design="refinement"] #testimonial-full::before {
    display: none;
}

[data-design="refinement"] .hh-trust-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px 64px;
    align-items: center;
}

[data-design="refinement"] .hh-trust-copy .whiteheader,
[data-design="refinement"] .hh-trust-copy h2 {
    color: #fff !important;
    font-size: 32px !important;
    font-weight: 800;
    margin: 0 0 16px;
    text-align: left;
    line-height: 1.2;
}

[data-design="refinement"] .hh-trust-copy p {
    color: var(--footer-muted) !important;
    font-size: 16px !important;
    margin: 0 0 8px;
    text-align: left;
    line-height: 1.5;
}

[data-design="refinement"] .hh-trust-copy a {
    color: #fff !important;
    text-decoration: underline;
}

[data-design="refinement"] .hh-trust-quote {
    position: relative;
}

[data-design="refinement"] .hh-trust-mark {
    position: absolute;
    top: -18px;
    left: -8px;
    font-size: 96px;
    line-height: 1;
    color: var(--brand);
    opacity: 0.22;
    pointer-events: none;
    font-family: Georgia, "Times New Roman", serif;
}

[data-design="refinement"] .hh-trust-quote blockquote,
[data-design="refinement"] #testimonial-full .hh-trust-quote blockquote {
    position: relative;
    z-index: 1;
    color: #fff !important;
    font-size: 22px !important;
    font-weight: 500;
    font-style: normal;
    border: none;
    margin: 0;
    padding: 12px 0 0 !important;
    text-shadow: none;
}

[data-design="refinement"] .hh-trust-quote cite,
[data-design="refinement"] .hh-trust-quote .hh-trust-attr {
    display: block;
    margin-top: 14px;
    font-size: 14px !important;
    font-style: normal;
    color: var(--footer-muted) !important;
}

@media (max-width: 767px) {
    [data-design="refinement"] .hh-trust-grid {
        grid-template-columns: 1fr;
        gap: 28px;
    }
    [data-design="refinement"] .hh-trust-quote blockquote,
    [data-design="refinement"] #testimonial-full .hh-trust-quote blockquote {
        font-size: 20px !important;
        padding: 12px 0 0 !important;
    }
}

/* -------------------------------------------------------------------------- */
/* Feature cards                                                               */
/* -------------------------------------------------------------------------- */
[data-design="refinement"] .feature-cards-row .feature-card {
    text-align: left;
    background: var(--surface);
    border: 1px solid var(--line);
    box-shadow: none;
}

[data-design="refinement"] .feature-cards-row .feature-icon {
    margin: 0 0 20px;
    background: var(--brand-tint) !important;
    box-shadow: none !important;
}

[data-design="refinement"] .feature-cards-row .feature-icon i {
    color: var(--brand-strong) !important;
}

[data-design="refinement"] .feature-cards-row h3 {
    font-size: 20px !important;
    color: var(--text);
    text-align: left;
}

[data-design="refinement"] .feature-cards-row p {
    color: var(--text-muted) !important;
    font-size: 16px !important;
    text-align: left;
}

/* -------------------------------------------------------------------------- */
/* Benefits strip                                                              */
/* -------------------------------------------------------------------------- */
[data-design="refinement"] .hh-benefits-strip {
    background: var(--ink-2) !important;
}

[data-design="refinement"] .hh-benefits-strip p,
[data-design="refinement"] .hh-benefits-strip {
    color: #fff !important;
}

[data-design="refinement"] .hh-benefits-strip i {
    color: var(--brand) !important;
}

/* -------------------------------------------------------------------------- */
/* Pricing                                                                     */
/* -------------------------------------------------------------------------- */
[data-design="refinement"] .hh-plans-header h2,
[data-design="refinement"] .go-dedicated-section h3,
[data-design="refinement"] .optional-addons h3,
[data-design="refinement"] .hh-infra-card h3 {
    font-size: 32px !important;
    font-weight: 800 !important;
    color: var(--text) !important;
    line-height: 1.2;
}

[data-design="refinement"] .hh-plans-header p,
[data-design="refinement"] .go-dedicated-section > p,
[data-design="refinement"] .optional-addons > p,
[data-design="refinement"] .hh-infra-card > p {
    color: var(--text-muted) !important;
    font-size: 14px !important;
}

[data-design="refinement"] .hh-reseller-note {
    display: block !important;
    text-align: center;
    color: var(--text-muted) !important;
    font-size: 14px !important;
    margin: 16px 0 0;
}

[data-design="refinement"] .hh-reseller-note a {
    color: var(--brand-strong);
    text-decoration: underline;
}

[data-design="refinement"] .plan-comparison em {
    font-style: normal;
}

[data-design="refinement"] .plan-comparison .plan-name {
    font-size: 20px !important;
}

[data-design="refinement"] .plan-comparison td,
[data-design="refinement"] .plan-comparison td.feature-label {
    font-size: 16px;
}

[data-design="refinement"] .is-cpanel-label > .fa {
    display: none;
}

[data-design="refinement"] .plan-comparison .premium-tooltip {
    background: none !important;
    box-shadow: none;
}

[data-design="refinement"] .plan-comparison .premium-tooltip img,
[data-design="refinement"] .hh-cpanel-mark {
    display: none !important;
    filter: none;
}

[data-design="refinement"] .hh-cpanel-text {
    display: inline;
    color: var(--brand-strong);
    font-weight: 600;
    font-size: 16px;
    background: none;
    box-shadow: none;
}

[data-design="refinement"] .plan-comparison th {
    background: var(--ink) !important;
    color: #fff;
}

[data-design="refinement"] .plan-comparison th.featured {
    background: var(--brand-strong) !important;
    border-left: 1px solid var(--brand-strong);
    border-right: 1px solid var(--brand-strong);
}

[data-design="refinement"] .plan-comparison th.featured::after {
    content: "MOST POPULAR";
    top: -12px;
    background: var(--ink);
    color: #fff;
    font-size: var(--type-caption);
    font-weight: 600;
    padding: 4px 12px;
    border-radius: 999px;
    letter-spacing: 0.04em;
}

[data-design="refinement"] .plan-comparison td.is-featured-col {
    border-left: 1px solid var(--brand);
    border-right: 1px solid var(--brand);
}

[data-design="refinement"] .plan-comparison td.feature-label {
    color: var(--text);
    background: var(--surface);
}

[data-design="refinement"] .plan-comparison td.feature-label i {
    color: var(--text-muted);
}

[data-design="refinement"] .plan-comparison .check {
    color: var(--brand-strong);
}

[data-design="refinement"] .plan-comparison .value-highlight {
    color: var(--brand-strong);
}

[data-design="refinement"] .plan-comparison .value {
    color: var(--text);
}

[data-design="refinement"] .premium-tooltip .tooltip-indicator {
    color: var(--brand-strong);
}

[data-design="refinement"] .premium-tooltip:hover .tooltip-indicator {
    color: var(--brand);
}

[data-design="refinement"] .plan-comparison .btn-order,
[data-design="refinement"] .plan-comparison .btn-order.featured {
    background: var(--action);
    color: #fff;
}

[data-design="refinement"] .plan-comparison .btn-order:hover,
[data-design="refinement"] .plan-comparison .btn-order.featured:hover {
    background: var(--action-dark);
    box-shadow: none;
    transform: none;
    color: #fff;
}

@media (max-width: 768px) {
    [data-design="refinement"] .plan-comparison th,
    [data-design="refinement"] .plan-comparison td {
        font-size: 14px;
    }
}

[data-design="refinement"] .plan-comparison .plan-period,
[data-design="refinement"] .plan-comparison .plan-annual {
    font-size: 13px !important;
}

[data-design="refinement"] .hh-spec-sub,
[data-design="refinement"] .hh-dedicated-from,
[data-design="refinement"] .hh-gw-from {
    font-size: 13px !important;
}

[data-design="refinement"] .go-dedicated-section h3 {
    font-size: 32px !important;
    color: var(--text) !important;
}

[data-design="refinement"] .go-dedicated-section > p {
    color: var(--text-muted) !important;
    font-size: 14px !important;
}

[data-design="refinement"] .hh-dedicated-cog {
    background: var(--brand-strong) !important;
}

[data-design="refinement"] .hh-spec-icon {
    color: var(--brand) !important;
}

[data-design="refinement"] .hh-stock-pill {
    background: var(--brand-strong) !important;
    font-size: 13px !important;
}

[data-design="refinement"] .hh-dedicated-cta {
    background: var(--action) !important;
    color: #fff !important;
}

[data-design="refinement"] .hh-dedicated-cta:hover {
    background: var(--action-dark) !important;
}

/* -------------------------------------------------------------------------- */
/* Google Workspace add-on                                                     */
/* -------------------------------------------------------------------------- */
[data-design="refinement"] .hh-addon-card {
    max-width: none !important;
    margin: 0 !important;
}

[data-design="refinement"] .optional-addons h3 {
    font-size: 32px !important;
    color: var(--text) !important;
}

[data-design="refinement"] .optional-addons > p {
    color: var(--text-muted) !important;
    font-size: 14px !important;
}

[data-design="refinement"] .optional-addons h4 {
    font-size: 20px !important;
}

[data-design="refinement"] .hh-gw-feat i {
    color: var(--text-muted) !important;
}

[data-design="refinement"] .hh-gw-cta {
    background: var(--action) !important;
    box-shadow: none !important;
    color: #fff !important;
}

[data-design="refinement"] .hh-gw-cta:hover {
    background: var(--action-dark) !important;
}

/* -------------------------------------------------------------------------- */
/* Infrastructure card                                                         */
/* -------------------------------------------------------------------------- */
[data-design="refinement"] .hh-infra-card {
    background: #fff;
    padding: 40px;
    text-align: center;
}

[data-design="refinement"] .hh-infra-card h3 {
    color: var(--text);
    font-weight: 800;
    margin-bottom: 10px;
}

[data-design="refinement"] .hh-infra-card > p {
    color: var(--text-muted) !important;
    font-size: 14px !important;
    margin: 0 auto 30px;
    max-width: 700px;
}

[data-design="refinement"] .hh-infra-logos {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 48px;
    flex-wrap: wrap;
}

[data-design="refinement"] .hh-infra-logos a,
[data-design="refinement"] .hh-infra-logos > div {
    text-decoration: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

[data-design="refinement"] .hh-infra-logo-frame {
    height: 52px !important;
    width: auto !important;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: visible;
}

[data-design="refinement"] .hh-infra-logos img,
[data-design="refinement"] .hh-infra-logos .hh-logo-akamai {
    height: 48px !important;
    width: auto !important;
    max-width: none !important;
    object-fit: contain;
}

[data-design="refinement"] .hh-logo-akamai {
    display: block;
    overflow: visible;
}

[data-design="refinement"] .hh-infra-caption {
    color: var(--text-muted) !important;
    font-size: 13px !important;
}

/* -------------------------------------------------------------------------- */
/* Footer                                                                      */
/* -------------------------------------------------------------------------- */
[data-design="refinement"] footer {
    background: var(--ink-2) !important;
}

[data-design="refinement"] footer h4 {
    border-bottom-color: var(--brand) !important;
}

[data-design="refinement"] .hh-footer-icon {
    background: rgba(0, 176, 144, 0.15) !important;
    border-color: rgba(0, 176, 144, 0.35) !important;
}

[data-design="refinement"] .hh-footer-icon i {
    color: var(--brand) !important;
}

[data-design="refinement"] .hh-green-badge {
    background: rgba(0, 176, 144, 0.15) !important;
    border-color: rgba(0, 176, 144, 0.35) !important;
}

[data-design="refinement"] .hh-green-badge i,
[data-design="refinement"] .hh-green-badge span {
    color: var(--brand) !important;
    font-size: 13px !important;
}

[data-design="refinement"] footer p,
[data-design="refinement"] footer li a,
[data-design="refinement"] .hh-footer-blurb,
[data-design="refinement"] .hh-footer-legal,
[data-design="refinement"] .hh-footer-legal a,
[data-design="refinement"] .hh-footer-nav a {
    color: var(--footer-muted) !important;
}

[data-design="refinement"] footer h4 {
    color: #fff !important;
}

[data-design="refinement"] footer a[href^="tel"],
[data-design="refinement"] footer a[href^="mailto"] {
    color: #fff !important;
}

[data-design="refinement"] .hh-footer-legal {
    font-size: 12px !important;
}

[data-design="refinement"] .hh-footer-label {
    color: var(--footer-muted) !important;
    font-size: 13px !important;
}

[data-design="refinement"] footer a:hover {
    color: #fff !important;
}

/* -------------------------------------------------------------------------- */
/* Sticky bar                                                                  */
/* -------------------------------------------------------------------------- */
[data-design="refinement"] .hh-sticky-cta {
    background: var(--ink-2);
    border-top-color: var(--action);
}

[data-design="refinement"] .hh-sticky-cta .hh-sticky-price span {
    color: var(--brand);
}

[data-design="refinement"] .hh-sticky-cta a.hh-sticky-btn {
    background: var(--action);
}

[data-design="refinement"] .hh-sticky-cta a.hh-sticky-btn:hover {
    background: var(--action-dark);
}

/* -------------------------------------------------------------------------- */
/* Inner pages — shared chrome                                                  */
/* -------------------------------------------------------------------------- */
html[data-design="refinement"] {
    --hh-success: #007a63;
    --hh-info: #007a63;
    --hh-warning: #007a63;
    --hh-gray: #4b5563;
}

[data-design="refinement"] .btn-primary,
[data-design="refinement"] a.btn-primary,
[data-design="refinement"] a.btn-primary:visited,
[data-design="refinement"] .btn-success,
[data-design="refinement"] .btn-info,
[data-design="refinement"] .btn-warning {
    background: var(--action) !important;
    background-image: none !important;
    color: #fff !important;
    box-shadow: none;
    border: none;
}

[data-design="refinement"] .btn-primary:hover,
[data-design="refinement"] a.btn-primary:hover,
[data-design="refinement"] .btn-success:hover,
[data-design="refinement"] .btn-info:hover,
[data-design="refinement"] .btn-warning:hover {
    background: var(--action-dark) !important;
    color: #fff !important;
}

[data-design="refinement"] .form-control:focus {
    border-color: var(--brand-strong);
    box-shadow: 0 0 0 4px rgba(0, 122, 99, 0.12);
}

[data-design="refinement"] #subheader {
    background: var(--ink);
}

[data-design="refinement"] #subheader::before {
    display: none;
}

[data-design="refinement"] #subheader h1 {
    font-size: 32px;
}

[data-design="refinement"] #subheader .crumb li a:hover {
    color: var(--brand);
}

[data-design="refinement"] #content {
    background: var(--surface);
}

[data-design="refinement"] #content.order-page {
    background: #fff;
}

[data-design="refinement"] .lead,
[data-design="refinement"] .pkg-features p,
[data-design="refinement"] .dedicated-features p,
[data-design="refinement"] .partner-logo-text,
[data-design="refinement"] .values-grid .value-box p {
    color: var(--text-muted) !important;
}

[data-design="refinement"] .alert-success,
[data-design="refinement"] .success,
[data-design="refinement"] #content .success {
    background: var(--brand-tint) !important;
    border-color: var(--brand-strong) !important;
    color: var(--brand-strong) !important;
}

[data-design="refinement"] .alert-info {
    background: var(--brand-tint) !important;
    border-color: var(--brand-strong) !important;
    color: var(--text) !important;
}

/* Feature / value icons: brand, not a rainbow */
[data-design="refinement"] .pkg-features .feature-icon i,
[data-design="refinement"] .dedicated-features .feature-icon i,
[data-design="refinement"] .config-icon i,
[data-design="refinement"] .value-item i,
[data-design="refinement"] .value-icon i,
[data-design="refinement"] .order-features .feature-icon i,
[data-design="refinement"] .about-card h2 i {
    color: var(--brand-strong) !important;
}

[data-design="refinement"] .contact-card h4 i {
    color: var(--brand-strong) !important;
}

[data-design="refinement"] .about-card > h1 {
    color: var(--text) !important;
}

[data-design="refinement"] .hh-info-banner i.fa,
[data-design="refinement"] .hh-benefits-inline i.fa {
    color: var(--brand) !important;
}

[data-design="refinement"] .hh-brand-callout {
    background: var(--brand-strong) !important;
}

[data-design="refinement"] .hh-stat-num {
    color: var(--brand-strong) !important;
}

[data-design="refinement"] .hh-partner-pill {
    background: var(--brand-tint) !important;
    color: var(--brand-strong) !important;
}

/* Dedicated / order plan cards */
[data-design="refinement"] .plan-card {
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

[data-design="refinement"] .plan-card.featured {
    border: 1px solid var(--brand);
}

[data-design="refinement"] .plan-card.featured::before {
    background: var(--ink);
}

[data-design="refinement"] .plan-header {
    background: var(--ink) !important;
    color: #fff;
    padding: 28px 20px;
    text-align: center;
}

[data-design="refinement"] .plan-card.featured .plan-header {
    background: var(--brand-strong) !important;
}

[data-design="refinement"] .plan-pricing {
    text-align: center;
    padding: 24px 20px;
    background: #fafafa;
}

[data-design="refinement"] .plan-pricing .price {
    font-size: 48px;
    font-weight: 800;
    color: var(--text);
    line-height: 1;
}

[data-design="refinement"] .plan-pricing .price-period {
    font-size: 16px;
    color: var(--text-muted);
}

[data-design="refinement"] .plan-pricing .annual-price,
[data-design="refinement"] .plan-pricing .annual-price i {
    color: var(--brand-strong) !important;
}

[data-design="refinement"] .plan-features {
    padding: 20px;
    flex: 1;
}

[data-design="refinement"] .plan-features ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

[data-design="refinement"] .plan-features li {
    padding: 8px 0;
    color: var(--text);
}

[data-design="refinement"] .plan-footer {
    padding: 20px;
}

[data-design="refinement"] .plan-features .fa-check,
[data-design="refinement"] .plan-features li i {
    color: var(--brand-strong);
}

/* WordPress hosting */
html[data-design="refinement"] .wp-badge i {
    color: var(--brand) !important;
}

html[data-design="refinement"] .wp-stats .stat .number,
html[data-design="refinement"] .welcome-hero .price,
html[data-design="refinement"] .welcome-plan .welcome-plan-price {
    color: var(--brand) !important;
}

html[data-design="refinement"] .feature-box .icon {
    background: var(--brand-tint) !important;
}

html[data-design="refinement"] .feature-box .icon i.fa {
    color: var(--brand-strong) !important;
}

html[data-design="refinement"] .step-box .number {
    background: var(--brand-strong) !important;
}

html[data-design="refinement"] .wp-cta-section {
    background: var(--ink) !important;
}

html[data-design="refinement"] .wp-cta-section .btn,
html[data-design="refinement"] .wp-cta-section a.btn,
html[data-design="refinement"] .wp-cta-section a.btn:visited {
    background: var(--action) !important;
    color: #fff !important;
}

html[data-design="refinement"] .wp-cta-section .btn:hover,
html[data-design="refinement"] .wp-cta-section a.btn:hover {
    background: var(--action-dark) !important;
    color: #fff !important;
}

html[data-design="refinement"] .faq-section-title {
    background: var(--ink) !important;
}

html[data-design="refinement"] .faq-question.active {
    background: var(--brand-tint) !important;
    color: var(--brand-strong) !important;
}

html[data-design="refinement"] .faq-question i,
html[data-design="refinement"] .faq-question.active i {
    color: var(--brand-strong) !important;
}

/* Contact */
html[data-design="refinement"] .contact-info-item .icon-circle {
    background: rgba(0, 176, 144, 0.15) !important;
    border-color: rgba(0, 176, 144, 0.35) !important;
}

html[data-design="refinement"] .contact-info-item .icon-circle i.fa {
    color: var(--brand) !important;
}

html[data-design="refinement"] .contact-info-item a:hover {
    color: var(--brand) !important;
}

html[data-design="refinement"] .contact-card .form-control:focus {
    border-color: var(--brand-strong);
    box-shadow: 0 0 0 4px rgba(0, 122, 99, 0.12);
}

/* Google Workspace page: keep Google product colours; HH chrome uses tokens */
html[data-design="refinement"] .gw-hero {
    background: var(--ink) !important;
}

html[data-design="refinement"] .gw-hero::before,
html[data-design="refinement"] .gw-hero::after {
    opacity: 0.35;
}

html[data-design="refinement"] .gw-badge i {
    color: var(--brand) !important;
}

html[data-design="refinement"] .gw-cta-btn {
    background: var(--action) !important;
    box-shadow: none;
}

html[data-design="refinement"] .gw-cta-btn:hover {
    background: var(--action-dark) !important;
}

html[data-design="refinement"] .gw-trial-banner {
    background: var(--ink) !important;
}

html[data-design="refinement"] .gw-trial-btn {
    background: var(--action) !important;
    color: #fff !important;
}

html[data-design="refinement"] .gw-trial-btn:hover {
    background: var(--action-dark) !important;
}

/* Hosting comparison */
html[data-design="refinement"] .comparison-hero {
    background: var(--ink) !important;
}

html[data-design="refinement"] .comparison-hero::before {
    display: none;
}

html[data-design="refinement"] .provider-card.highlighted {
    border-color: var(--brand-strong);
}

html[data-design="refinement"] .provider-card.highlighted::before {
    background: var(--ink);
}

html[data-design="refinement"] .price-display .amount,
html[data-design="refinement"] .table-price {
    color: var(--brand-strong) !important;
}

html[data-design="refinement"] .value-icon {
    background: var(--brand-tint) !important;
}

html[data-design="refinement"] .value-icon i {
    color: var(--brand-strong) !important;
}

html[data-design="refinement"] .cta-section {
    background: var(--ink) !important;
}

html[data-design="refinement"] .cta-section .btn,
html[data-design="refinement"] .cta-section a.btn {
    background: var(--action) !important;
    color: #fff !important;
}

html[data-design="refinement"] .cta-section .btn:hover,
html[data-design="refinement"] .cta-section a.btn:hover {
    background: var(--action-dark) !important;
    color: #fff !important;
}

html[data-design="refinement"] .comparison-table .highlight-col {
    background: var(--brand-tint);
}

html[data-design="refinement"] .comparison-lead i {
    float: none !important;
    display: inline !important;
    margin: 0 6px 0 0 !important;
}

html[data-design="refinement"] .comparison-lead .btn,
html[data-design="refinement"] .comparison-lead a.btn {
    margin: 0 !important;
}

/* Order flow */
html[data-design="refinement"] .order-page {
    background: var(--surface);
}

html[data-design="refinement"] .order-subheader {
    background: var(--ink);
}

html[data-design="refinement"] .cart-item-icon.domain {
    background: var(--brand-strong) !important;
}

html[data-design="refinement"] .badge-annual,
html[data-design="refinement"] .domain-cart-banner {
    background: var(--brand-strong) !important;
}

html[data-design="refinement"] .hh-save-pill {
    background: var(--brand-strong) !important;
}

html[data-design="refinement"] .hh-dedicated-link {
    background: var(--action) !important;
    box-shadow: none !important;
}

html[data-design="refinement"] .hh-secure-note,
html[data-design="refinement"] .hh-secure-note i {
    color: var(--brand-strong) !important;
}

/* -------------------------------------------------------------------------- */
/* Motion: keep existing behaviour, honour reduced-motion                      */
/* -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    [data-design="refinement"] .hero-cta,
    [data-design="refinement"] .plan-comparison .btn-order,
    [data-design="refinement"] .hh-dedicated-cta,
    [data-design="refinement"] .hh-gw-cta,
    [data-design="refinement"] .hh-status-ring {
        transition: none !important;
        transform: none !important;
        animation: none !important;
    }
}