/* =====================================================================
   eCheckPlan Pricing — light & clean theme
   All class + variable names are kept identical to the template so that
   page content and images are never touched; only the visual styling
   changes. Scoped entirely under .ecp-pricing.
   ===================================================================== */


/* box-sizing everywhere, but DON'T zero margin/padding globally — that would
   wipe out Bootstrap's .row / .col gutters. Reset only typographic elements. */

.ecp-pricing *,
.ecp-pricing *::before,
.ecp-pricing *::after {
    box-sizing: border-box
}

.ecp-pricing h1,
.ecp-pricing h2,
.ecp-pricing h3,
.ecp-pricing h4,
.ecp-pricing h5,
.ecp-pricing p,
.ecp-pricing ul,
.ecp-pricing ol,
.ecp-pricing li,
.ecp-pricing figure,
.ecp-pricing table,
.ecp-pricing blockquote {
    margin: 0
}

.ecp-pricing ul,
.ecp-pricing ol {
    padding: 0;
    list-style: none;
    margin-bottom: 35px;
}

.ecp-pricing {
    /* page + surfaces */
    --ink: #ffffff;
    /* page background            */
    --ink2: #fff7f3;
    /* soft peach surface         */
    --glass: #ffffff;
    /* card background            */
    --glass2: #fff8f4;
    /* tinted card background     */
    /* brand (kept under the old var names the template references) */
    --emerald: #ff5a3c;
    /* primary orange-red accent  */
    --emerald-dim: #ff382e;
    /* deeper red                 */
    --emerald-glow: rgba(255, 90, 60, 0.16);
    --gold: #ff5a3c;
    /* enterprise amber           */
    --gold-light: #ff382e;
    /* type */
    --cream: #1d150f;
    /* headings / near-black ink  */
    --fog: #6d655e;
    /* body / muted gray          */
    /* lines + shadows */
    --border: #f4e4d9;
    --border2: #f0dcb9;
    --shadow-sm: 0 4px 14px rgba(29, 21, 15, 0.05);
    --shadow: 0 14px 44px rgba(29, 21, 15, 0.08);
    --shadow-brand: 0 16px 40px rgba(255, 90, 60, 0.22);
    --grad: #ff382e;
}

.ecp-pricing {
    background: var(--ink);
    color: var(--cream);
    overflow: hidden;
    position: relative;
    isolation: isolate;
    -webkit-font-smoothing: antialiased
}


/* Wide section container — overrides Bootstrap's default .container width
   for every section on this page (scoped so header/footer are untouched). */

.ecp-pricing .container {
    max-width: 1690px;
    padding: 0 4%
}


/* soft peach blooms instead of the old dark glow */

.glow-bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    overflow: hidden
}

.glow-bg span {
    position: absolute;
    border-radius: 50%;
    filter: blur(150px);
    opacity: .55
}

.glow-bg span:nth-child(1) {
    width: 680px;
    height: 680px;
    background: radial-gradient(circle, rgba(255, 138, 90, 0.22), transparent 70%);
    top: -260px;
    left: -180px
}

.glow-bg span:nth-child(2) {
    width: 520px;
    height: 520px;
    background: radial-gradient(circle, rgba(255, 196, 150, 0.20), transparent 70%);
    bottom: -160px;
    right: -120px
}

.glow-bg span:nth-child(3) {
    width: 420px;
    height: 420px;
    background: radial-gradient(circle, rgba(255, 170, 120, 0.12), transparent 70%);
    top: 46%;
    left: 54%;
    opacity: .4
}


/* shared inline buttons */

.btn-ghost {
    background: #fff;
    border: 1.5px solid var(--border);
    color: var(--emerald-dim);
    padding: 13px 26px;
    border-radius: 100px;
    font-size: 0.9rem;
    font-weight: 700;
    cursor: pointer;
    transition: all .22s;
    font-family: 'Lato', sans-serif
}

.btn-ghost:hover {
    border-color: var(--emerald);
    background: #fff4f0;
    transform: translateY(-2px)
}

.btn-fill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: #ff382e;
    color: #fff;
    padding: 13px 28px;
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 700;
    cursor: pointer;
    border: none;
    box-shadow: none;
    transition: all .2s ease
}

.btn-fill:hover {
    background: #000;
    color: #fff;
    transform: none;
    box-shadow: none
}


/* ============================ HERO ============================ */

.hero {
    position: relative;
    z-index: 1;
    padding: 70px 0 90px;
    overflow: hidden;
    background: #fff
}

.hero-left {
    padding-right: 24px
}

.ecp-pricing h1 {
    font-weight: 800;
    line-height: 1.04;
    letter-spacing: -1.5px;
    margin-bottom: 22px;
    color: var(--cream)
}

.hero-body {
    font-size: 1.08rem;
    color: var(--fog);
    line-height: 1.7;
    max-width: 480px;
    margin-bottom: 36px !important;
    font-weight: 400
}

.hero-actions {
    display: flex;
    gap: 14px;
    flex-wrap: wrap
}

.btn-hero-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: #ff382e;
    color: #fff;
    font-weight: 700;
    font-size: 0.95rem;
    border: none;
    border-radius: 8px;
    box-shadow: none;
    padding: 13px 26px;
    min-width: 0;
    cursor: pointer;
    transition: all .2s ease
}

.btn-hero-primary:hover {
    background: #000;
    color: #fff;
    transform: none
}

.btn-hero-outline {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: transparent;
    box-shadow: inset 0 0 0 1px #d5d5db;
    border: none;
    border-radius: 8px;
    padding: 12px 25px;
    min-width: 0;
    cursor: pointer;
    transition: all .2s ease
}

.btn-hero-outline-icon {
    width: auto;
    height: auto;
    flex-shrink: 0;
    border-radius: 0;
    background: transparent;
    color: #000;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem
}

.btn-hero-outline-text {
    background: none;
    -webkit-background-clip: initial;
    background-clip: initial;
    -webkit-text-fill-color: #000;
    color: #000;
    font-weight: 600;
    font-size: 0.95rem
}

.btn-hero-outline:hover {
    background: #f5f5f7;
    box-shadow: inset 0 0 0 1px #000;
    transform: none
}

.btn-hero-outline:hover .btn-hero-outline-icon {
    background: transparent;
    color: #000
}

.btn-hero-outline:hover .btn-hero-outline-text {
    background: none;
    -webkit-text-fill-color: #000;
    color: #000
}


/* HERO RIGHT */

.hero-right {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%
}

.hero-right::before {
    /* content: ''; */
    position: absolute;
    width: 340px;
    height: 340px;
    right: -30px;
    top: 50%;
    transform: translateY(-50%);
    background-image: radial-gradient(rgba(255, 120, 70, 0.5) 1.6px, transparent 1.6px);
    background-size: 16px 16px;
    -webkit-mask-image: radial-gradient(circle, #000 35%, transparent 70%);
    mask-image: radial-gradient(circle, #000 35%, transparent 70%);
    opacity: .5;
    z-index: 0
}

.hero-photo {
    position: relative;
    width: 480px;
    max-width: 100%;
    border-radius: 22px;
    overflow: hidden;
    box-shadow: 0 30px 70px rgba(29, 21, 15, 0.18);
    border: 4px solid #fff;
    z-index: 1;
    animation: floatA 7s ease-in-out infinite alternate
}

.hero-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block
}

@keyframes floatA {
    0% {
        transform: rotate(-3deg) translateY(0)
    }
    100% {
        transform: rotate(-1.5deg) translateY(-16px)
    }
}

@keyframes floatB {
    0% {
        transform: rotate(4deg) translateY(0)
    }
    100% {
        transform: rotate(2.5deg) translateY(-12px)
    }
}


/* ======================== SHARED SECTION ======================== */

.section {
    position: relative;
    z-index: 1
}

.s-intro {
    text-align: center;
    padding: 88px 24px 50px
}

.s-tag {
    display: inline-block;
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #ff382e;
    margin-bottom: 14px
}

.s-title {
    font-size: clamp(2.1rem, 4vw, 3.1rem);
    font-weight: 700;
    line-height: 1.14;
    letter-spacing: 0;
    color: #1a1a1a;
    margin-bottom: 18px
}

.s-title em {
    color: #ff382e;
    font-style: normal;
    font-weight: 700
}

.s-body {
    font-size: 1.02rem;
    color: var(--fog);
    max-width: 600px;
    margin: 10px auto !important;
    line-height: 1.7;
    font-weight: 400
}


/* NO-FEE BANNER */

.no-fee-banner {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    max-width: 640px;
    margin: 44px auto 0;
    text-align: center;
    border: none;
    border-radius: 0;
    padding: 0;
}

.no-fee-banner .nf-icon {
    display: none;
}

.no-fee-banner .nf-text {
    font-size: 0.95rem;
    color: var(--cream);
    font-weight: 600;
    line-height: 1.5
}

.no-fee-banner .nf-text span {
    color: var(--emerald-dim);
    font-weight: 700
}

.no-fee-banner .nf-sub {
    font-size: 0.82rem;
    color: var(--fog);
    margin-top: 2px;
    font-weight: 400
}


/* ======================== PRICING CARDS ======================== */

.pcard {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 40px 34px 44px;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 22px;
    box-shadow: var(--shadow-sm);
    transition: transform .3s, box-shadow .3s, border-color .3s;
    overflow: hidden
}

.pcard .ecp-btn-block {
    margin-top: auto
}

.pcard:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow);
    border-color: var(--border2)
}

.pcard.feat {
    background: #fff;
    border: 1.5px solid rgba(255, 90, 60, 0.35);
    /* box-shadow: 0 28px 70px rgba(255, 90, 60, 0.18); */
    transform: scale(1.03);
    z-index: 2
}

.pcard.feat:hover {
    transform: scale(1.03) translateY(-6px)
}

.feat-top-line {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 5px;
    background: var(--grad)
}

.plan-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    /* background: #f9f9f9; */
    /* border: 1px solid var(--border2); */
    color: var(--emerald-dim);
    /* padding: 20px 14px; */
    border-radius: 8px;
    /* margin-bottom: 22px */
}

.plan-chip.gold-chip {
    background: #fbf3e0;
    border-color: #f0dcb9;
    color: var(--gold-light)
}

.plan-chip.hot {
    /* background: var(--grad); */
    color: #61c838;
    border: none;
    /* box-shadow: 0 8px 20px rgba(255, 90, 60, 0.35) */
}

.rate-main .r-num {
    font-size: 2.5rem !important;
}

.plan-name {
    font-size: 1.7rem;
    font-weight: 800;
    color: var(--cream);
    margin-bottom: 8px;
    letter-spacing: -0.5px;
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 8px;
}

.plan-desc {
    font-size: 0.9rem;
    color: var(--fog);
    line-height: 1.6;
    margin-bottom: 28px;
    font-weight: 400;
    min-height: 52px
}


/* Clean inline "(volume)" next to the plan name — no pill/background. */

.vol-range {
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--fog);
    letter-spacing: 0;
}

.vol-range .vr-val {
    font-weight: 700;
    color: var(--emerald-dim);
}

.rate-hero {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 8px;
    font-family: 'Lato';
}

.rate-main {
    display: flex;
    align-items: flex-start;
    gap: 2px;
    line-height: 1
}

.r-num {
    font-size: 4.6rem;
    font-weight: 800;
    color: var(--cream);
    line-height: 1;
    /* letter-spacing: -2px */
}

.r-pct {
    font-size: 2.2rem;
    font-weight: 700;
    color: var(--fog);
    align-self: flex-end;
    padding-bottom: 8px
}

.r-plus {
    font-size: 0.92rem;
    color: var(--fog);
    margin-bottom: 8px;
    font-weight: 400
}

.r-plus strong {
    color: var(--cream);
    font-weight: 800
}

.r-plus em {
    color: var(--fog);
    font-style: normal;
    font-size: 0.8rem
}

.savings-tag {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: #f9f9f9;
    border: 1px solid #fff5f1;
    border-radius: 8px;
    padding: 6px 12px;
    margin-bottom: 26px;
    font-size: 0.76rem;
    color: #ff382e;
    font-weight: 700
}

.divline {
    height: 1px;
    background: var(--border);
    margin-bottom: 26px
}

.feats {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 13px;
    margin-bottom: 34px
}

.feats li {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    font-size: 0.9rem;
    color: #4f463e;
    line-height: 1.45;
    font-weight: 500
}

.fi {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.62rem;
    margin-top: 1px;
    font-weight: 700
}

.fi-g {
    /* background: #ffe7df; */
    color: var(--emerald-dim)
}

.fi-gold {
    background: #f7ecd2;
    color: var(--gold-light)
}

.cta-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 13px 26px;
    border-radius: 8px;
    border: none;
    cursor: pointer;
    font-size: 0.95rem;
    font-weight: 700;
    text-align: center;
    text-decoration: none;
    transition: all .2s ease;
    letter-spacing: 0.01em
}

.cta-outline {
    background: #fff;
    box-shadow: inset 0 0 0 1px #d5d5db;
    color: #000;
    padding: 12px 25px
}

.cta-outline:hover {
    background: #f5f5f7;
    box-shadow: inset 0 0 0 1px #000;
    transform: none
}

.cta-solid {
    background: #ff382e;
    color: #fff;
    box-shadow: none
}

.cta-solid:hover {
    background: #000;
    color: #fff;
    transform: none;
    box-shadow: none
}

.cta-gold {
    background: linear-gradient(135deg, #d9a544, #bd7d10);
    color: #fff;
    box-shadow: 0 14px 36px rgba(189, 125, 16, 0.3)
}

.cta-gold:hover {
    transform: translateY(-2px);
    box-shadow: 0 20px 48px rgba(189, 125, 16, 0.42)
}


/* ======================== CALCULATOR ======================== */

.calc-section {
    margin: 90px 0
}

.calc-card {
    /* background: linear-gradient(160deg, #fff8f4, #fff); */
    /* border: 1px solid var(--border); */
    border-radius: 24px;
    padding: 50px 54px;
    box-shadow: var(--shadow);
    position: relative;
    overflow: hidden
}

.calc-card::before {
    /* content: ''; */
    position: absolute;
    top: -70px;
    right: -70px;
    width: 280px;
    height: 280px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 120, 70, 0.12), transparent 70%);
    pointer-events: none
}

.calc-header {
    margin-bottom: 38px;
    position: relative
}

.calc-header .s-tag {
    text-align: left;
    display: block;
    margin-bottom: 10px
}

.calc-header h2 {
    font-size: 2.2rem;
    font-weight: 700;
    color: #1a1a1a;
    letter-spacing: 0
}

.calc-header h2 em {
    color: #ff382e;
    font-style: normal
}

.calc-header p {
    color: var(--fog);
    font-size: 0.94rem;
    margin-top: 10px;
    font-weight: 400
}

.calc-body {
    position: relative
}

.calc-inputs {
    display: flex;
    flex-direction: column;
    gap: 22px
}

.field-label {
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--fog);
    margin-bottom: 9px
}

.field-input {
    width: 100%;
    background: #fff;
    border: 1.5px solid var(--border);
    border-radius: 12px;
    padding: 14px 18px;
    font-size: 1rem;
    color: var(--cream);
    outline: none;
    transition: border .2s, box-shadow .2s;
    font-weight: 600
}

.field-input:focus {
    border-color: var(--emerald);
    box-shadow: 0 0 0 4px rgba(255, 90, 60, 0.12)
}

.field-input::placeholder {
    color: #bdb4ab;
    font-weight: 400
}

.vol-slider {
    width: 100%;
    -webkit-appearance: none;
    appearance: none;
    height: 6px;
    border-radius: 6px;
    background: #ffe1d6;
    outline: none;
    margin-top: 10px;
    cursor: pointer
}

.vol-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--grad);
    border: 3px solid #fff;
    box-shadow: 0 3px 10px rgba(255, 90, 60, 0.5);
    cursor: pointer
}

.vol-slider::-moz-range-thumb {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #ff5a3c;
    border: 3px solid #fff;
    cursor: pointer
}

.slider-labels {
    display: flex;
    justify-content: space-between;
    font-size: 0.7rem;
    color: var(--fog);
    margin-top: 8px;
    font-weight: 600
}

.calc-result {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 18px;
    padding: 30px 28px;
    box-shadow: var(--shadow-sm)
}

.result-rate-badge {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 22px
}

.rrb-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--emerald);
    box-shadow: 0 0 0 4px rgba(255, 90, 60, 0.18)
}

.rrb-text {
    font-size: 0.76rem;
    color: var(--fog);
    text-transform: uppercase;
    letter-spacing: 0.07em;
    font-weight: 700
}

.rrb-val {
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--emerald-dim);
    margin-left: auto
}

.result-rows {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-bottom: 22px
}

.result-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid var(--border)
}

.result-row:last-child {
    border-bottom: none
}

.rr-label {
    font-size: 0.85rem;
    color: var(--fog);
    font-weight: 500
}

.rr-val {
    font-size: 1.2rem;
    font-weight: 800;
    color: var(--cream);
    letter-spacing: -0.5px
}

.rr-val.em {
    color: var(--emerald-dim)
}

.rr-val.gold {
    color: var(--gold-light)
}

.result-total {
    /* background: linear-gradient(135deg, #fff1ea, #ffe5da); */
    border: 1px solid var(--border2);
    border-radius: 14px;
    padding: 18px 22px;
    display: flex;
    justify-content: space-between;
    align-items: center
}

.rt-label {
    font-size: 0.8rem;
    font-weight: 800;
    color: var(--cream);
    text-transform: uppercase;
    letter-spacing: 0.05em
}

.rt-val {
    font-size: 1.9rem;
    font-weight: 800;
    color: var(--emerald-dim);
    letter-spacing: -1px
}

.calc-cta {
    margin-top: 26px;
    text-align: center
}

.calc-note {
    font-size: 0.78rem;
    color: var(--fog);
    margin-top: 12px;
    line-height: 1.5
}


/* ======================== PHOTO BANNER (clean, orange accent, no image) ======================== */

.photo-banner {
    position: relative;
    z-index: 1;
    margin: 90px 0 0
}

.pb-inner {
    position: relative;
    background: linear-gradient(160deg, #fff8f4, #fff);
    border: 1px solid var(--border);
    border-radius: 26px;
    box-shadow: var(--shadow);
    overflow: hidden
}

.pb-inner::before {
    content: '';
    position: absolute;
    top: -90px;
    right: -60px;
    width: 320px;
    height: 320px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 120, 70, 0.14), transparent 70%);
    pointer-events: none
}

.pb-inner::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 190px;
    height: 5px;
    background: var(--grad);
    border-radius: 0 6px 0 26px
}

.pb-content {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 56px 60px;
    gap: 40px
}

.pb-left h2 {
    font-size: 2.2rem;
    font-weight: 800;
    color: var(--cream);
    line-height: 1.12;
    letter-spacing: -1px
}

.pb-left h2 em {
    color: var(--emerald-dim);
    font-style: normal;
    /* font-weight: 800 */
}

.pb-left p {
    color: var(--fog);
    font-size: 0.96rem;
    margin-top: 12px;
    font-weight: 400;
    max-width: 400px;
    line-height: 1.6
}

.pb-stats {
    display: flex;
    gap: 44px
}

.pb-stat .n {
    font-size: 2.7rem;
    /* font-weight: 800; */
    color: var(--cream);
    letter-spacing: -1px
}

.pb-stat .n em {
    color: var(--emerald-dim);
    font-style: normal
}

.pb-stat .l {
    font-size: 0.76rem;
    color: var(--fog);
    letter-spacing: 0.05em;
    text-transform: uppercase;
    margin-top: 5px;
    font-weight: 600
}


/* ======================== RATE TABLE ======================== */

.rate-wrap {
    margin: 90px 0
}

.rt-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    margin-bottom: 32px;
    gap: 24px
}

.rt-header h2 {
    font-size: 2.2rem;
    font-weight: 700;
    color: #1a1a1a;
    letter-spacing: 0
}

.rt-header h2 em {
    color: #ff382e;
    font-style: normal
}

.rt-note {
    font-size: 0.84rem;
    color: var(--fog);
    text-align: right;
    max-width: 280px;
    line-height: 1.5
}

.rtable-wrap {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 18px;
    overflow: hidden;
    box-shadow: var(--shadow-sm)
}

.rtable {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0
}

.rtable thead tr th {
    background: #000;
    padding: 16px 28px;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #fff;
    border-bottom: 1px solid var(--border);
    text-align: left
}

.rtable tbody tr td {
    padding: 20px 28px;
    font-size: 0.92rem;
    color: #4f463e;
    border-bottom: 1px solid var(--border);
    transition: background .15s
}

.rtable tbody tr:hover td {
    background: #fff8f5
}

.rtable tbody tr:last-child td {
    border-bottom: none
}

.rtable tbody tr td strong {
    color: var(--cream)
}

.rval {
    font-size: 1.4rem;
    font-weight: 800;
    color: var(--emerald-dim);
    letter-spacing: -0.5px
}

.vbar-track {
    height: 7px;
    background: #ffe1d6;
    border-radius: 100px;
    overflow: hidden;
    margin-top: 6px;
    max-width: 160px
}

.vbar-fill {
    height: 100%;
    border-radius: 100px;
    background: var(--grad);
    transition: width 1s ease
}


/* ======================== TRUST ======================== */

.trust-row {
    margin-top: 40px;
}

.trust-inner {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px
}

.trust-pill {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 11px 22px;
    font-size: 0.74rem;
    color: #4f463e;
    font-weight: 600;
    box-shadow: var(--shadow-sm);
    transition: all .2s
}

.trust-pill:hover {
    border-color: var(--emerald);
    transform: translateY(-2px);
    color: var(--cream)
}


/* ======================== TESTIMONIALS ======================== */

.testi-section {
    margin: 0 0 100px
}

.tcard {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 20px;
    padding: 32px 28px;
    box-shadow: var(--shadow-sm);
    transition: transform .25s, box-shadow .25s;
    position: relative;
    overflow: hidden
}

.tcard:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow)
}

.tcard-photo {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid #fff;
    box-shadow: 0 4px 12px rgba(29, 21, 15, 0.12);
    margin-bottom: 16px
}

.tcard-quote {
    font-size: 0.92rem;
    color: #4f463e;
    line-height: 1.7;
    font-weight: 400;
    margin-bottom: 20px
}

.tcard-name {
    font-size: 0.88rem;
    font-weight: 800;
    color: var(--cream)
}

.tcard-role {
    font-size: 0.79rem;
    color: var(--fog);
    margin-top: 2px
}

.tcard-stars {
    color: #f5a623;
    font-size: 0.92rem;
    margin-bottom: 12px;
    letter-spacing: 2px
}


/* ======================== FAQ ======================== */

.faq-section {
    margin: 0 0 100px
}

.faq-q-row {
    padding: 0 35px;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.03);
    border-left: 8px solid #ff3d34;
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.05);
    cursor: pointer;
    margin-bottom: 20px;
    transition: all .4s cubic-bezier(.4, 0, .2, 1)
}

.faq-q-row:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.08)
}

.faq-q-row.open {
    background: #fffafa
}

.faq-q-text {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    font-size: 1.15rem;
    font-weight: 700;
    color: #1a1a1a;
    padding: 25px 0
}

.faq-icon {
    font-size: 1rem;
    color: #ff382e;
    flex-shrink: 0;
    transition: transform .4s ease
}

.faq-q-row.open .faq-icon {
    transform: rotate(180deg)
}

.faq-ans {
    font-size: 1rem;
    color: #555;
    line-height: 1.7;
    font-weight: 400;
    max-height: 0;
    overflow: hidden;
    border-top: 1px solid rgba(0, 0, 0, 0.02);
    transition: max-height .4s ease, padding .3s
}

.faq-q-row.open .faq-ans {
    max-height: 400px;
    padding: 20px 0 30px
}


/* ======================== COMPARE ======================== */

.compare-section {
    /* max-width: 1150px; */
    margin: 0 auto 100px;
    padding: 0 40px
}

.compare-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 18px;
    overflow: hidden;
    box-shadow: var(--shadow-sm)
}

.compare-table th {
    background: #000;
    padding: 18px 24px;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #fff;
    border-bottom: 1px solid var(--border);
    text-align: left
}

.compare-table th:not(:first-child) {
    text-align: center
}

.compare-table td {
    padding: 16px 24px;
    font-size: 0.89rem;
    color: #4f463e;
    border-bottom: 1px solid #ededed;
    font-weight: 500
}

.compare-table tr:last-child td {
    border-bottom: none
}

.volume-based-pricing .s-body {
    margin-bottom: 30px !important;
}

.compare-table td:not(:first-child) {
    text-align: center
}

.compare-table tr:hover td {
    /* background: #fff8f5 */
}

.c-yes {
    color: #1faa59;
    font-size: 1.05rem;
    font-weight: 800
}

.c-no {
    color: #ff382e;
    font-size: 1.05rem;
    font-weight: 700
}

.c-ours {
    color: var(--emerald-dim);
    font-weight: 800
}

.c-col-ours {
    background: #efffef;
    font-weight: 700 !important;
}

.compare-table th.c-col-ours {
    /* background: #ffe8de;
    color: var(--emerald-dim) */
}


/* ======================== FINAL CTA (orange, tilted card) ======================== */

.cta-section {
    position: relative;
    z-index: 1;
    margin: 0 0 90px
}

.cta-card {
    position: relative;
    overflow: hidden;
    border-radius: 30px;
    background: #fff;
    min-height: 560px;
    box-shadow: 0 40px 90px rgba(255, 90, 60, 0.20), 0 0 0 1px rgba(255, 150, 110, 0.10)
}


/* photo fills the right half (sits behind the orange) */

.cta-photo {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 56%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    z-index: 1
}


/* tilted orange panel with a bulging right edge, overlapping the photo's left part */

.cta-orange {
    position: absolute;
    top: 50%;
    left: -3%;
    width: 64%;
    height: 124%;
    transform: translateY(-50%) rotate(-3.5deg);
    background: linear-gradient(135deg, #ff7a2e, #ef3f15);
    border-radius: 30px 90px 90px 30px / 30px 190px 190px 30px;
    box-shadow: 0 30px 60px rgba(239, 63, 21, 0.26);
    z-index: 2
}


/* dotted halftones on the white corners */

.cta-dots {
    position: absolute;
    z-index: 3;
    width: 120px;
    height: 88px;
    pointer-events: none;
    background-image: radial-gradient(rgba(255, 120, 70, 0.55) 2px, transparent 2px);
    background-size: 13px 13px
}

.cta-dots-tl {
    top: 26px;
    left: 30px;
    -webkit-mask-image: radial-gradient(circle, #000, transparent 75%);
    mask-image: radial-gradient(circle, #000, transparent 75%)
}

.cta-dots-bl {
    bottom: 24px;
    left: 40%;
    width: 160px;
    -webkit-mask-image: radial-gradient(circle, #000, transparent 72%);
    mask-image: radial-gradient(circle, #000, transparent 72%)
}


/* upright text panel above the orange */

.cta-panel {
    position: relative;
    z-index: 4;
    max-width: 52%;
    padding: 74px 0 74px 60px
}

.cta-panel h2 {
    font-size: clamp(2rem, 3vw, 2.7rem);
    font-weight: 500;
    color: #fff;
    line-height: 1.14;
    margin-bottom: 20px;
    letter-spacing: -0.5px
}

.cta-panel h2 em {
    display: inline-block;
    font-style: normal;
    font-weight: 800;
    border-bottom: 3px solid rgba(255, 255, 255, 0.85);
    padding-bottom: 3px;
    margin-top: 6px
}

.cta-panel p {
    color: rgba(255, 255, 255, 0.95);
    font-size: 1rem;
    line-height: 1.7;
    margin-bottom: 34px;
    font-weight: 400;
    max-width: 430px
}

.cta-btns-row {
    display: flex;
    gap: 14px;
    flex-wrap: wrap
}

.cta-panel .btn-fill {
    background: #fff;
    color: #ef3f15;
    border-radius: 100px;
    /* box-shadow: 0 14px 30px rgba(0, 0, 0, 0.14); */
    font-weight: 700
}

.cta-panel .btn-fill:hover {
    background: #fff;
    transform: translateY(-2px);
    /* box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2) */
}

.cta-panel .btn-ghost {
    background: transparent;
    border: 1.5px solid rgba(255, 255, 255, 0.85);
    color: #fff;
    border-radius: 100px;
    font-weight: 700
}

.cta-panel .btn-ghost:hover {
    background: rgba(255, 255, 255, 0.15);
    border-color: #fff
}


/* ======================== SCROLL-IN ======================== */

.au {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity .7s ease, transform .7s ease
}

.au.in {
    opacity: 1;
    transform: translateY(0)
}


/* ======================== RESPONSIVE ======================== */

@media(max-width:991.98px) {
    .hero {
        padding: 60px 0 70px
    }
    .hero-left {
        padding-right: 0;
        margin-bottom: 20px
    }
    .hero-right {
        height: 420px
    }
    .hero-right::before {
        right: 10%
    }
    .hero-photo {
        width: 360px
    }
    .pcard.feat {
        transform: none
    }
    .pcard.feat:hover {
        transform: translateY(-6px)
    }
    .pb-content {
        flex-direction: column;
        align-items: flex-start;
        padding: 34px;
        gap: 28px
    }
    .pb-stats {
        gap: 28px;
        flex-wrap: wrap
    }
    .cta-card {
        min-height: 0;
        background: linear-gradient(135deg, #ff7a2e, #ef3f15)
    }
    .cta-photo {
        position: relative;
        width: 100%;
        height: 230px;
        z-index: 1
    }
    .cta-orange {
        display: none
    }
    .cta-dots {
        display: none
    }
    .cta-panel {
        max-width: 100%;
        padding: 40px 28px
    }
    .rt-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px
    }
    .rt-note {
        text-align: left
    }
    .no-fee-banner {
        flex-direction: column;
        text-align: center
    }
    .calc-body {
        grid-template-columns: 1fr
    }
    .calc-card {
        padding: 36px 26px
    }
    .compare-section {
        padding: 0 16px
    }
    .compare-table th,
    .compare-table td {
        padding: 13px 14px;
        font-size: 0.8rem
    }
    .rtable thead tr th,
    .rtable tbody tr td {
        padding: 14px 16px
    }
}

@media(max-width:560px) {
    .hero {
        padding: 40px 0 56px
    }
    .hero-photo {
        width: 300px
    }
    .r-num {
        font-size: 3.8rem
    }
}


/* ── admin-link wrappers (preserve button layout) ── */

.ecp-pricing a.ecp-btn-link {
    text-decoration: none;
    display: inline-block
}

.ecp-pricing a.ecp-btn-block {
    text-decoration: none;
    display: block
}


/* Final-CTA button styling (.cta-btn-row) now lives site-wide in style.css
   (search "FINAL CTA BUTTONS — site-wide" there) so every page's final CTA
   — not just this one — matches .hero-actions. Nothing pricing-specific
   left to override here. */