/* 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);

    --re-card-border-cool: rgba(1, 87, 138, 0.14);
    --re-card-shadow-cool: 5px 5px 5px rgba(0, 65, 121, 0.2);
    --re-card-border-warm: rgba(138, 78, 1, 0.14);
    --re-card-shadow-warm: 5px 5px 5px rgba(108, 45, 7, 0.2);
}

/* 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") 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 {
    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", HIW "Add review steps only
   where you need them") 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,
body.re-owned-template .re-hiw-approval-card > 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 {
    height: 1px !important;
    background: var(--re-lp-accent-border) !important;
}

body.re-owned-template .re-hiw-approval-card::before {
    height: 1px !important;
    background: var(--re-lp-num-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-testimonial-proof {
    --re-testimonial-card-border: var(--re-card-border-cool);
    --re-testimonial-card-shadow: var(--re-card-shadow-cool);
    width: min(1040px, 100%);
    margin: clamp(46px, 5vw, 72px) auto 0;
}

body.re-owned-template .re-testimonial-proof--warm {
    --re-testimonial-card-border: var(--re-card-border-warm);
    --re-testimonial-card-shadow: var(--re-card-shadow-warm);
}

body.re-owned-template .re-testimonial-proof__head {
    width: min(980px, 100%);
    margin: 0 auto clamp(24px, 2.6vw, 36px);
    text-align: center;
}

body.re-owned-template .re-testimonial-proof__eyebrow {
    margin-right: auto;
    margin-bottom: 16px;
    margin-left: auto;
}

body.re-owned-template .re-testimonial-proof__head h3 {
    margin: 0;
    color: #043d6b;
    font-family: Manrope, sans-serif;
    font-size: clamp(31px, 2.45vw, 42px);
    font-weight: 800;
    line-height: 1.12;
    letter-spacing: 0;
    text-wrap: normal;
}

body.re-owned-template .re-testimonial-proof__head p:not(.re-testimonial-proof__eyebrow) {
    margin: 14px auto 0;
    color: #365a76;
    font-size: clamp(15px, 1vw, 17px);
    line-height: 1.58;
}

@media (min-width: 768px) {
    body.re-owned-template .re-testimonial-proof__head p:not(.re-testimonial-proof__eyebrow) {
        width: 80%;
    }
}

body.re-owned-template .re-testimonial-proof__grid {
    display: grid;
    grid-template-columns: repeat(var(--re-testimonial-proof-count, 2), minmax(0, 1fr));
    gap: 16px;
}

body.re-owned-template .re-testimonial-proof__card {
    min-width: 0;
    min-height: 268px;
    display: flex;
    flex-direction: column;
    padding: clamp(22px, 2.1vw, 28px);
    background: #fff;
    border: 1px solid var(--re-testimonial-card-border);
    border-radius: 3px;
    box-shadow: none;
}

body.re-owned-template .re-testimonial-proof__rating {
    width: 170px;
    margin: 0 0 18px;
}

body.re-owned-template .re-testimonial-proof__rating img {
    display: block;
    width: 100%;
    height: auto;
}

body.re-owned-template .re-testimonial-proof__card h4 {
    margin: 0;
    color: #043d6b;
    font-family: Manrope, sans-serif;
    font-size: clamp(18px, 1.25vw, 21px);
    font-weight: 800;
    line-height: 1.18;
}

body.re-owned-template .re-testimonial-proof__card p {
    margin: 13px 0 0;
    color: #315872;
    font-size: 14.5px;
    line-height: 1.58;
}

body.re-owned-template .re-testimonial-proof__card footer {
    margin-top: auto;
    padding-top: 20px;
}

body.re-owned-template .re-testimonial-proof__card strong {
    color: #0b719b;
    font-family: Manrope, sans-serif;
    font-size: 13px;
    font-weight: 900;
    line-height: 1;
    text-transform: none;
}

body.re-owned-template .re-testimonial-proof__trustpilot {
    display: flex;
    justify-content: center;
    margin: clamp(24px, 2.4vw, 32px) auto 0;
}

body.re-owned-template .re-testimonial-proof__trustpilot-wrap {
    position: relative;
    width: min(260px, 100%);
    min-height: 24px;
}

body.re-owned-template .re-testimonial-proof__trustpilot .trustpilot-widget {
    display: block;
    width: 100%;
    height: 24px;
    overflow: hidden;
}

body.re-owned-template .re-testimonial-proof__trustpilot .trustpilot-widget iframe {
    display: block !important;
    width: 100% !important;
    height: 24px !important;
}

body.re-owned-template .re-testimonial-proof__trustpilot-link {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: block;
    text-decoration: none;
}

body.re-owned-template .re-testimonial-proof.is-trustpilot-referrer .re-testimonial-proof__trustpilot {
    margin-top: 0;
}

@media (max-width: 980px) {
    body.re-owned-template .re-testimonial-proof__grid {
        grid-template-columns: 1fr;
    }

    body.re-owned-template .re-testimonial-proof__card {
        min-height: 0;
    }
}

@media (max-width: 767px) {
    body.re-owned-template .re-testimonial-proof__head {
        text-align: left;
    }

    body.re-owned-template .re-testimonial-proof__eyebrow {
        margin-left: 0;
    }

    body.re-owned-template .re-testimonial-proof__trustpilot {
        justify-content: flex-start;
    }
}

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-case-detail-hero .re-proof-item__icon,
body.re-owned-template .re-case-detail-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,
body.re-owned-template .re-pricing-hero .re-proof-item__icon,
body.re-owned-template .re-pricing-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-case-detail-hero .re-proof-icon,
body.re-owned-template .re-about-hero .re-proof-icon {
    padding: 11px !important;
}

body.re-owned-template .re-pricing-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-case-detail-hero .re-proof-item .re-svg-icon,
body.re-owned-template .re-about-hero .re-proof-item .re-svg-icon,
body.re-owned-template .re-pricing-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;
    top: 0;
    display: flex;
    min-width: 0;
    overflow: visible;
    background: #fff;
    border: 1px solid rgba(1, 78, 138, 0.13);
    border-radius: 3px;
    box-shadow: 0 26px 58px rgba(8, 56, 92, 0.12);
    transition: top 220ms ease, border-color 220ms ease, box-shadow 220ms ease;
}

body.re-owned-template .re-solution-card:hover,
body.re-owned-template .re-solution-card:focus-within {
    top: -4px;
    border-color: rgba(233, 111, 48, 0.26);
    box-shadow: 0 10px 24px rgba(0, 86, 147, 0.31);
}

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: inline-flex;
    width: fit-content;
    min-height: 25px;
    align-items: center;
    margin-bottom: 24px;
    padding: 5px 7px;
    color: #0b719b;
    background: rgba(4, 61, 107, 0);
    border-radius: 3px;
    font-family: Manrope, sans-serif;
    font-size: 13.5px;
    font-weight: 900;
    line-height: 1.1;
    text-transform: uppercase;
    transition: color 200ms ease, background-color 200ms ease, box-shadow 200ms ease, transform 200ms ease;
}

body.re-owned-template .re-solution-card:hover .re-solution-card__label,
body.re-owned-template .re-solution-card:focus-within .re-solution-card__label {
    color: #fff !important;
    background: #043d6b;
    box-shadow: 0 12px 22px rgba(4, 61, 107, 0.18);
    transform: translateY(-1px);
}

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: 24px 0 0;
    color: #24516d;
    font-size: 15.5px;
    line-height: 1.58;
}

body.re-owned-template .re-solution-card a {
    display: inline-flex;
    width: fit-content;
    margin-top: auto;
    padding-left: 0;
    padding-top: 24px;
    padding-bottom: 5px;
    color: #e96023;
    background-image: linear-gradient(currentColor, currentColor);
    background-repeat: no-repeat;
    background-position: left bottom;
    background-size: 0 1px;
    font-family: Manrope, sans-serif;
    font-size: 15px;
    font-weight: 900;
    line-height: 1.2;
    text-decoration: none;
    text-shadow: 0 0 0 rgba(233, 96, 35, 0);
    transition: color 200ms ease, background-size 200ms ease, padding-left 200ms ease, text-shadow 200ms ease;
}

body.re-owned-template .re-solution-card a::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
}

body.re-owned-template .re-solution-card:hover a,
body.re-owned-template .re-solution-card:focus-within a {
    color: #c94912;
    background-size: 100% 1px;
    padding-left: 3px;
    text-shadow: 0 0 18px rgba(233, 96, 35, 0.18);
}

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,
    body.re-owned-template .re-case-detail-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,
    body.re-owned-template .re-case-detail-hero .re-case-detail-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-case-detail-hero .re-proof-item__icon,
    body.re-owned-template .re-case-detail-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,
    body.re-owned-template .re-pricing-hero .re-proof-item__icon,
    body.re-owned-template .re-pricing-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-case-detail-hero .re-proof-icon,
    body.re-owned-template .re-about-hero .re-proof-icon,
    body.re-owned-template .re-pricing-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-case-detail-hero .re-proof-item .re-svg-icon,
    body.re-owned-template .re-about-hero .re-proof-item .re-svg-icon,
    body.re-owned-template .re-pricing-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 .re-solution-card__body {
        min-height: 0;
        padding: 24px;
    }
}

/* White cards paint above the soft shadows of neighbouring elements
   (graphic frames, figures). A hovered card rises above everything so its
   own elevated shadow can show. Note: between two sibling cards at equal
   z-index, paint order is DOM order; keeping card shadows smaller than the
   grid gap is what fully prevents card-on-card shadow bleed. */
body.re-owned-template :is(
    .re-solution-card,
    .re-testimonial-proof__card,
    .re-testimonial-card,
    .re-outcome-card,
    .re-metric-card,
    .re-workflow-step,
    .re-editorial-method-card,
    .re-pull-quote,
    .re-quality-proof-card,
    .re-hiw-step-card,
    .re-hiw-scope-card,
    .re-hiw-approval-card,
    .re-hiw-editorial-step,
    .re-hiw-delivery-list article,
    .re-rm-outcome-card,
    .re-rm-feature-card,
    .re-rm-metric-card,
    .re-rm-explainer-card,
    .re-rm-content-style-panel,
    .re-rm-case-study-card,
    .re-rm-control-list article,
    .re-rm-step-list article,
    .re-rm-workflow-list article,
    .re-pricing-card,
    .re-pricing-included__grid article,
    .re-pricing-choice__cards article,
    .re-pricing-smart__grid article,
    .re-pricing-proof__grid article,
    .re-pricing-faq article,
    .re-em-standard-card,
    .re-em-pipeline-step,
    .re-em-brand-role-list article,
    .re-em-content-style-grid article,
    .re-em-case-grid article,
    .re-em-visibility-grid article,
    .re-about-card,
    .re-about-step,
    .re-about-metric,
    .re-about-resource-card,
    .re-case-snapshot__brief,
    .re-case-metric,
    .re-case-takeaway-grid article,
    .re-case-editorial-strategy__grid article
) {
    position: relative;
    z-index: 1;
}

body.re-owned-template :is(
    .re-solution-card,
    .re-testimonial-proof__card,
    .re-pricing-card,
    .re-hiw-step-card,
    .re-rm-feature-card,
    .re-about-resource-card
):hover {
    z-index: 2;
}


/* Hero seam: the dark hero meets the next section along a faceted line —
   three straight segments at gentle angles, echoing the logo's isometric
   facet geometry without copying its (too steep for full width) 30-degree
   slopes. The strip uses the flat beige base hue (#fbf3ec, the base layer of
   --re-beige-section-surface; the full token is a gradient stack ending
   near-white, which painted a white line when compressed into the strip).
   The mask is one full-width 1920x120 polygon stretched with
   preserveAspectRatio none, so the silhouette scales with the viewport; the
   mobile query shortens the band, which flattens the same shape rather than
   cropping it. Each hero overrides --re-hero-seam-mask with its own vertex
   positions so no two pages share the same edge (2026-06-12). */
.re-has-seam {
    position: relative;
}

.re-has-seam > :not(.re-hero-seam) {
    position: relative;
    z-index: 1;
}

.re-hero-seam {
    position: absolute;
    right: 0;
    bottom: -1px;
    left: 0;
    height: 120px;
    background: #fbf3ec;
    -webkit-mask-image: var(--re-hero-seam-mask);
    mask-image: var(--re-hero-seam-mask);
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    pointer-events: none;
    z-index: 0;
    --re-hero-seam-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1920 120' preserveAspectRatio='none'%3E%3Cpolygon fill='%23fff' points='0,46 860,78 1390,28 1920,58 1920,120 0,120'/%3E%3C/svg%3E");
}

@media (max-width: 767px) {
    .re-hero-seam {
        height: 64px;
    }
}

/* Per-hero seam edges: same low-amplitude three-facet language, different
   vertex positions per page. The default above (dip left, peak right) is the
   homepage edge. */
.re-hiw-hero .re-hero-seam {
    --re-hero-seam-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1920 120' preserveAspectRatio='none'%3E%3Cpolygon fill='%23fff' points='0,56 540,26 1120,74 1920,42 1920,120 0,120'/%3E%3C/svg%3E");
}

.re-em-hero .re-hero-seam {
    --re-hero-seam-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1920 120' preserveAspectRatio='none'%3E%3Cpolygon fill='%23fff' points='0,34 700,66 1340,38 1920,64 1920,120 0,120'/%3E%3C/svg%3E");
}

.re-about-hero .re-hero-seam {
    --re-hero-seam-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1920 120' preserveAspectRatio='none'%3E%3Cpolygon fill='%23fff' points='0,66 620,40 1240,70 1920,36 1920,120 0,120'/%3E%3C/svg%3E");
}

.re-case-detail-hero .re-hero-seam {
    --re-hero-seam-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1920 120' preserveAspectRatio='none'%3E%3Cpolygon fill='%23fff' points='0,44 980,72 1490,40 1920,60 1920,120 0,120'/%3E%3C/svg%3E");
}

.re-rm-hero .re-hero-seam {
    --re-hero-seam-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1920 120' preserveAspectRatio='none'%3E%3Cpolygon fill='%23fff' points='0,60 760,32 1420,68 1920,48 1920,120 0,120'/%3E%3C/svg%3E");
}

.re-pricing-hero .re-hero-seam {
    --re-hero-seam-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1920 120' preserveAspectRatio='none'%3E%3Cpolygon fill='%23fff' points='0,38 840,58 1480,30 1920,62 1920,120 0,120'/%3E%3C/svg%3E");
}

/* Floating block accents around hero graphics: sharp squares (no radius, no
   borders), light blue and white only, three soft blocks behind the graphic
   and three crisper ones in front, each on its own speed. Default positions
   below; each hero class overrides a subset so every page has a different
   configuration. Transform-only animation, GPU-cheap. */
.re-hero-blocks-host {
    position: relative;
    isolation: isolate;
}

.re-hero-blocks {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.re-hero-block {
    position: absolute;
    display: block;
    animation: re-hero-block-float 7s ease-in-out infinite alternate;
}

.re-hero-block--1 {
    top: -36px;
    right: -40px;
    z-index: -1;
    width: 150px;
    height: 150px;
    background: rgba(141, 213, 255, 0.09);
    animation-duration: 11s;
}

.re-hero-block--2 {
    top: 48%;
    left: -52px;
    z-index: -1;
    width: 110px;
    height: 110px;
    background: rgba(255, 255, 255, 0.06);
    animation-duration: 9s;
    animation-delay: -3s;
}

.re-hero-block--3 {
    top: 58%;
    right: -30px;
    z-index: -1;
    width: 80px;
    height: 80px;
    background: rgba(141, 213, 255, 0.07);
    animation-duration: 7.5s;
    animation-delay: -5s;
}

.re-hero-block--4 {
    top: -18px;
    left: 12%;
    z-index: 1;
    width: 44px;
    height: 44px;
    background: rgba(141, 213, 255, 0.3);
    animation-duration: 4.5s;
    animation-delay: -1s;
}

.re-hero-block--5 {
    top: 26%;
    right: 4%;
    z-index: 1;
    width: 28px;
    height: 28px;
    background: rgba(255, 255, 255, 0.22);
    animation-duration: 6s;
    animation-delay: -2.5s;
}

.re-hero-block--6 {
    top: 8%;
    left: 38%;
    z-index: -1;
    width: 18px;
    height: 18px;
    background: rgba(141, 213, 255, 0.28);
    animation-duration: 3.8s;
    animation-delay: -4s;
}

/* Per-hero configurations: each page shifts a subset of blocks so no two
   heroes share the same arrangement. */
.re-home-hero--saas .re-hero-block--1 {
    top: -48px;
    right: auto;
    left: -36px;
}

.re-home-hero--saas .re-hero-block--2 {
    top: 14%;
    left: auto;
    right: -48px;
}

.re-home-hero--saas .re-hero-block--4 {
    top: -14px;
    left: auto;
    right: 16%;
}

.re-home-hero--saas .re-hero-block--6 {
    top: 56%;
    left: -10px;
}

.re-hiw-hero .re-hero-block--2 {
    top: 10%;
    left: auto;
    right: -44px;
}

.re-hiw-hero .re-hero-block--3 {
    top: 62%;
    right: auto;
    left: -28px;
}

.re-hiw-hero .re-hero-block--5 {
    top: 60%;
    right: -10px;
}

.re-hiw-hero .re-hero-block--6 {
    top: 4%;
    left: 60%;
}

.re-em-hero .re-hero-block--1 {
    top: -30px;
    right: 10%;
}

.re-em-hero .re-hero-block--3 {
    top: 50%;
    right: auto;
    left: -34px;
}

.re-em-hero .re-hero-block--4 {
    top: auto;
    bottom: -14px;
    left: 22%;
}

.re-em-hero .re-hero-block--5 {
    top: 12%;
    right: -12px;
}

.re-about-hero .re-hero-block--1 {
    top: 30%;
    right: -52px;
}

.re-about-hero .re-hero-block--2 {
    top: -34px;
    left: 8%;
}

.re-about-hero .re-hero-block--4 {
    top: 64%;
    left: -14px;
}

.re-about-hero .re-hero-block--6 {
    top: -10px;
    left: 70%;
}

.re-case-detail-hero .re-hero-block--1 {
    top: -40px;
    right: 24%;
}

.re-case-detail-hero .re-hero-block--3 {
    top: 30%;
    right: -36px;
}

.re-case-detail-hero .re-hero-block--4 {
    top: 58%;
    left: -16px;
}

.re-case-detail-hero .re-hero-block--5 {
    top: -12px;
    right: 8%;
}

@keyframes re-hero-block-float {
    from {
        transform: translateY(-7px);
    }

    to {
        transform: translateY(7px);
    }
}

@media (prefers-reduced-motion: reduce) {
    .re-hero-block {
        animation: none;
    }
}

@media (max-width: 767px) {
    .re-hero-blocks {
        display: none;
    }
}

/* Seam balance (2026-06-12, per user red-line mock): the transition line sits
   lower by extending the navy below the hero content, while the section that
   follows gives back the same amount of top padding so its content does not
   move. Desktop-width only; the shallow-laptop and mobile layouts manage
   their own hero padding. */
@media (min-width: 1025px) {
    body.re-owned-template .re-has-seam + section,
    body.re-owned-template .re-home-viewport + section {
        padding-top: clamp(48px, 3.5vw, 64px);
    }
}