/* Shared owned landing-page components. */

body.re-owned-template {
    /* Two roles, two palettes:

       1. Feature icons use the warm/cool flip documented in the plan:
          beige sections get cool blue icons on pale-blue chips, while
          pale-blue sections get warm coral icons on pale-peach chips.
          Variety comes from icon shape, typography and content rather than
          per-card colour ranking.

       2. Numbered / step / workflow chips (enumeration wayfinding) use a cool
          navy on a pale blue chip so they recede and let the warm feature
          icons hold attention.

       CTAs and "View solution" links keep their stronger brand orange
       separately. BRANDED / NON-BRANDED audience badges keep their semantic
       green / orange separately. */
    --re-lp-accent: #ee8a59;
    --re-lp-accent-bg: #fdefe5;
    --re-lp-accent-border: #f5cfb6;

    --re-lp-num: #0ea4b3;
    --re-lp-num-bg: #eef4fa;
    --re-lp-num-border: #c5d8e8;

    --re-lp-blue-icon: #277dc0;

    --re-lp-accent-sky: var(--re-lp-accent);
    --re-lp-accent-sky-bg: var(--re-lp-accent-bg);
    --re-lp-accent-sky-border: var(--re-lp-accent-border);
    --re-lp-accent-coral: var(--re-lp-accent);
    --re-lp-accent-coral-bg: var(--re-lp-accent-bg);
    --re-lp-accent-coral-border: var(--re-lp-accent-border);
    --re-lp-accent-mint: var(--re-lp-accent);
    --re-lp-accent-mint-bg: var(--re-lp-accent-bg);
    --re-lp-accent-mint-border: var(--re-lp-accent-border);
    --re-lp-accent-denim: var(--re-lp-accent);
    --re-lp-accent-denim-bg: var(--re-lp-accent-bg);
    --re-lp-accent-denim-border: var(--re-lp-accent-border);
    --re-lp-accent-rose: var(--re-lp-accent);
    --re-lp-accent-rose-bg: var(--re-lp-accent-bg);
    --re-lp-accent-rose-border: var(--re-lp-accent-border);
    --re-lp-accent-gold: var(--re-lp-accent);
    --re-lp-accent-gold-bg: var(--re-lp-accent-bg);
    --re-lp-accent-gold-border: var(--re-lp-accent-border);
}

/* True numbered chips (01/02/03 text) get the teal lift on a pale blue chip
   so the enumeration pops without competing with the warm coral icons.
   `.re-rm-control-list article > span` carries the numbered steps on the RM
   page; `.re-card-number` covers the HIW step/goal/scope/delivery cards;
   `.re-workflow-step > span` covers the homepage workflow numbers. */
body.re-owned-template .re-rm-control-list article > span,
body.re-owned-template .re-card-number,
body.re-owned-template .re-workflow-step > span {
    color: var(--re-lp-num) !important;
    background: var(--re-lp-num-bg) !important;
    border-color: var(--re-lp-num-border) !important;
}

/* Icon chips on sections with warm beige backgrounds (RM "Built for reputation
   workflows", HIW "Add review steps only where you need them") use the cool
   blue palette so the icons contrast against the warm section background.
   The icon stroke uses a deeper navy than the numbered chips because icons
   carry visual weight and benefit from being darker, not brighter. */
body.re-owned-template .re-rm-feature-card__icon,
body.re-owned-template .re-hiw-approval-card > span {
    color: var(--re-lp-blue-icon) !important;
    background: var(--re-lp-num-bg) !important;
    border-color: var(--re-lp-num-border) !important;
}

/* Icon chips on sections with pale blue backgrounds (RM "Plan each article",
   RM "Keep control without running the process") keep the warm coral palette
   so the warm icon stands against the cool section background. The peach
   border softens the chip so it reads as a container, not a saturated badge. */
body.re-owned-template .re-rm-step-list article > span,
body.re-owned-template .re-rm-workflow-list article > span {
    border-color: var(--re-lp-accent-border) !important;
}

/* 6-card feature grids: drop the 4px coloured top bar down to a 1px hairline
   in the same subtle peach line. Six identical coral bars in a 3x2 grid read
   as visual repetition; a hairline frames the card without shouting. */
body.re-owned-template .re-rm-feature-card::before,
body.re-owned-template .re-hiw-approval-card::before {
    height: 1px !important;
    background: var(--re-lp-accent-border) !important;
}

body.re-owned-template .re-proof-list,
body.re-owned-template .re-proof-item,
body.re-owned-template .re-proof-item__content {
    min-width: 0;
}

body.re-owned-template .re-proof-item__inner {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    height: 100%;
}

body.re-owned-template .re-proof-item__icon,
body.re-owned-template .re-proof-icon {
    flex: 0 0 auto;
}

body.re-owned-template .re-proof-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 3px;
    font-size: 0;
}

body.re-owned-template .re-proof-item__title,
body.re-owned-template .re-proof-item__description {
    margin: 0;
}

body.re-owned-template .re-proof-item__title span {
    color: inherit;
}

body.re-owned-template .re-proof-item__description {
    overflow-wrap: break-word;
}

body.re-owned-template .re-eyebrow,
body.re-owned-template .re-home-hero__eyebrow {
    box-shadow: none !important;
}

body.re-owned-template .re-home-hero--saas .re-proof-item__icon,
body.re-owned-template .re-home-hero--saas .re-proof-icon,
body.re-owned-template .re-hiw-hero .re-proof-item__icon,
body.re-owned-template .re-hiw-hero .re-proof-icon,
body.re-owned-template .re-rm-hero .re-proof-item__icon,
body.re-owned-template .re-rm-hero .re-proof-icon,
body.re-owned-template .re-about-hero .re-proof-item__icon,
body.re-owned-template .re-about-hero .re-proof-icon {
    width: 60px !important;
    height: 60px !important;
    flex-basis: 60px !important;
}

body.re-owned-template .re-home-hero--saas .re-proof-icon,
body.re-owned-template .re-hiw-hero .re-proof-icon,
body.re-owned-template .re-rm-hero .re-proof-icon,
body.re-owned-template .re-about-hero .re-proof-icon {
    padding: 11px !important;
}

body.re-owned-template .re-home-hero--saas .re-proof-item .re-proof-svg,
body.re-owned-template .re-hiw-hero .re-proof-item .re-proof-svg,
body.re-owned-template .re-rm-hero .re-proof-item .re-proof-svg,
body.re-owned-template .re-about-hero .re-proof-item .re-svg-icon {
    width: 38px !important;
    height: 38px !important;
}

body.re-owned-template .re-solution-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
    min-width: 0;
}

body.re-owned-template .re-solution-card {
    position: relative;
    display: flex;
    min-width: 0;
    overflow: visible;
    background: rgba(255, 255, 255, 0.98);
    border: 1px solid rgba(1, 78, 138, 0.13);
    border-radius: 3px;
    box-shadow: 0 26px 58px rgba(8, 56, 92, 0.12);
}

body.re-owned-template .re-solution-card::after {
    content: "";
    position: absolute;
    z-index: -1;
    right: -16px;
    bottom: -16px;
    width: 52%;
    height: 52%;
    background: linear-gradient(135deg, rgba(1, 78, 138, 0), rgba(35, 122, 233, 0.19));
    pointer-events: none;
}

body.re-how-it-works-template .re-solution-card::after {
    background: linear-gradient(135deg, rgba(1, 78, 138, 0), rgba(233, 111, 48, 0.15));
}

body.re-solution-page-template .re-solution-card::after,
body.re-reputation-management-template .re-solution-card::after {
    background: linear-gradient(135deg, rgba(1, 78, 138, 0), rgba(233, 111, 48, 0.15));
}

body.re-owned-template .re-solution-card .re-solution-card__body {
    width: 100%;
    height: 100%;
    min-height: 304px;
    display: flex;
    flex-direction: column;
    padding: clamp(24px, 2.2vw, 30px);
}

body.re-owned-template .re-solution-card__meta {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 12px;
    margin-bottom: 24px;
}

body.re-owned-template .re-final-cta__pricing,
body.re-owned-template .re-hiw-final-cta__pricing,
body.re-owned-template .re-rm-final-cta__pricing,
body.re-owned-template .re-pricing-final-cta__pricing {
    max-width: none;
    margin: 22px auto 0 !important;
    color: rgba(255, 255, 255, 0.72) !important;
    font-size: 14px !important;
    line-height: 1.5 !important;
}

body.re-owned-template .re-final-cta__pricing .wpcs_price,
body.re-owned-template .re-final-cta__pricing .wpcs_price_symbol,
body.re-owned-template .re-hiw-final-cta__pricing .wpcs_price,
body.re-owned-template .re-hiw-final-cta__pricing .wpcs_price_symbol,
body.re-owned-template .re-rm-final-cta__pricing .wpcs_price,
body.re-owned-template .re-rm-final-cta__pricing .wpcs_price_symbol,
body.re-owned-template .re-pricing-final-cta__pricing .wpcs_price,
body.re-owned-template .re-pricing-final-cta__pricing .wpcs_price_symbol {
    color: inherit;
    font: inherit;
}

body.re-owned-template .re-solution-card__audience {
    min-height: 27px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 8px;
    color: #057356;
    background: rgba(0, 168, 117, 0.1);
    border: 1px solid rgba(0, 168, 117, 0.2);
    border-radius: 3px;
    font-family: Manrope, sans-serif;
    font-size: 10.5px;
    font-weight: 900;
    line-height: 1;
    letter-spacing: 0;
    text-transform: uppercase;
    white-space: nowrap;
}

body.re-owned-template .re-solution-card__audience--non-branded {
    color: #b64f19;
    background: rgba(233, 111, 48, 0.1);
    border-color: rgba(233, 111, 48, 0.22);
}

body.re-owned-template .re-solution-card .re-solution-card__label {
    display: block;
    margin-bottom: 12px;
    color: #0b719b;
    font-family: Manrope, sans-serif;
    font-size: 13.5px;
    font-weight: 900;
    line-height: 1.1;
    text-transform: uppercase;
}

body.re-owned-template .re-solution-card h3 {
    margin: 0;
    color: #124e7f;
    font-size: clamp(21px, 1.55vw, 25px);
}

body.re-owned-template .re-solution-card p {
    margin: 16px 0 0;
    color: #24516d;
    font-size: 15.5px;
    line-height: 1.58;
}

body.re-owned-template .re-solution-card a {
    width: fit-content;
    margin-top: auto;
    padding-top: 22px;
    color: #e96023;
    font-family: Manrope, sans-serif;
    font-size: 15px;
    font-weight: 900;
    line-height: 1.2;
    text-decoration: none;
    transition: color 200ms ease;
}

body.re-owned-template .re-solution-card a:hover,
body.re-owned-template .re-solution-card a:focus-visible {
    color: #c94912;
}

body.re-owned-template .re-inline-link {
    color: #e96023;
    font-family: Manrope, sans-serif;
    font-size: 15px;
    font-weight: 900;
    line-height: 1.2;
    text-decoration: none;
    transition: color 200ms ease, text-shadow 200ms ease;
}

body.re-owned-template .re-inline-link:hover,
body.re-owned-template .re-inline-link:focus-visible {
    color: #c94912;
    text-shadow: 0 0 18px rgba(233, 96, 35, 0.12);
}

@media (min-width: 1025px) and (max-width: 1366px) {
    body.re-owned-template .re-home-hero--saas .re-proof-list,
    body.re-owned-template .re-hiw-hero .re-proof-list {
        width: min(100%, 560px);
        grid-template-columns: 1fr;
    }

    body.re-owned-template .re-home-hero--saas .re-home-hero__media,
    body.re-owned-template .re-hiw-hero .re-hiw-hero__media {
        align-self: center;
    }
}

@media (max-width: 1180px) {
    body.re-owned-template .re-solution-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 767px) {
    body.re-owned-template .re-home-hero--saas .re-proof-item__icon,
    body.re-owned-template .re-home-hero--saas .re-proof-icon,
    body.re-owned-template .re-hiw-hero .re-proof-item__icon,
    body.re-owned-template .re-hiw-hero .re-proof-icon,
    body.re-owned-template .re-rm-hero .re-proof-item__icon,
    body.re-owned-template .re-rm-hero .re-proof-icon,
    body.re-owned-template .re-about-hero .re-proof-item__icon,
    body.re-owned-template .re-about-hero .re-proof-icon {
        width: 48px !important;
        height: 48px !important;
        flex-basis: 48px !important;
    }

    body.re-owned-template .re-home-hero--saas .re-proof-icon,
    body.re-owned-template .re-hiw-hero .re-proof-icon,
    body.re-owned-template .re-rm-hero .re-proof-icon,
    body.re-owned-template .re-about-hero .re-proof-icon {
        padding: 9px !important;
    }

    body.re-owned-template .re-home-hero--saas .re-proof-item .re-proof-svg,
    body.re-owned-template .re-hiw-hero .re-proof-item .re-proof-svg,
    body.re-owned-template .re-rm-hero .re-proof-item .re-proof-svg,
    body.re-owned-template .re-about-hero .re-proof-item .re-svg-icon {
        width: 30px !important;
        height: 30px !important;
    }

    body.re-owned-template .re-solution-grid {
        grid-template-columns: 1fr;
    }

    body.re-owned-template .re-solution-card::after {
        right: -10px;
        bottom: -10px;
    }

    body.re-owned-template .re-solution-card .re-solution-card__body {
        min-height: 0;
        padding: 24px;
    }
}