/*
 * BlogFriend Stage33
 * Current-active-main based selective Hero transplant.
 *
 * Scope:
 * Hero / Live Status / four quick cards only.
 */

.bf5-hero {
    --blue: #5260df;
    --blue-soft: #f2f3ff;
    --blue2: #3f4dd0;
    --body: #66738c;
    --dark: #0e1a30;
    --green: #28c493;
    --ink: #14213b;
    --ink2: #202d48;
    --line: #e7eaf2;
    --muted: #8d99ad;
    --shadow: 0 22px 60px rgba(31,50,89,.10);
    --soft: #f8f9fc;
    --soft-blue: #f5f7ff;

    font-family:
        "NanumBarunGothic",
        "나눔바른고딕",
        "Noto Sans KR",
        "Malgun Gothic",
        sans-serif;
}

.bf5-hero,
.bf5-hero *,
.bf5-hero *::before,
.bf5-hero *::after {
    box-sizing: border-box;
}

.bf5-hero h1,
.bf5-hero h2,
.bf5-hero h3,
.bf5-hero strong,
.bf5-hero b,
.bf5-hero button {
    font-family:
        "NanumBarunGothicBold",
        "NanumBarunGothic",
        "나눔바른고딕",
        "Noto Sans KR",
        "Malgun Gothic",
        sans-serif;
}

.bf5-container {
width:min(1380px,calc(100% - 64px));
    margin:0 auto;
}

.bf5-hero {
padding:76px 0 55px;
    overflow:hidden;
    background:
        radial-gradient(
            circle at 73% 7%,
            rgba(95,109,227,.08),
            transparent 26%
        ),
        linear-gradient(
            180deg,
            #ffffff 0%,
            #fbfcff 100%
        );
}

.bf5-hero-grid {
display:grid;
    grid-template-columns:
        minmax(0,.92fr)
        minmax(580px,1.08fr);
    align-items:center;
    gap:78px;
}

.bf5-eyebrow {
color:var(--blue);
    font-size:11px;
    font-weight:850;
    letter-spacing:.08em;
}

.bf5-hero-copy h1 {
max-width:650px;
    margin:20px 0 0;
    color:var(--ink);
    font-size:clamp(52px,4.6vw,69px);
    font-weight:850;
    line-height:1.08;
    letter-spacing:-.057em;
    word-break:keep-all;
}

.bf5-hero-copy h1 strong {
color:var(--blue);
    font-weight:850;
}

.bf5-lead {
max-width:610px;
    margin:27px 0 0;
    color:var(--body);
    font-size:16px;
    line-height:1.8;
    letter-spacing:-.015em;
}

.bf5-hero-actions {
display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:12px;
    margin-top:31px;
}

.bf5-primary-button,
.bf5-secondary-button {
min-height:49px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:11px;
    padding:0 22px;
    border-radius:11px;
    text-decoration:none;
    font-size:13px;
    font-weight:800;
}

.bf5-primary-button {
color:#fff;
    background:
        linear-gradient(
            135deg,
            #5668e7,
            #494fd4
        );
    box-shadow:
        0 12px 26px rgba(76,85,218,.18);
}

.bf5-secondary-button {
color:#344059;
    border:1px solid #dfe3ec;
    background:#fff;
}

.bf5-hero-checks {
display:flex;
    flex-wrap:wrap;
    gap:25px;
    margin-top:27px;
}

.bf5-hero-checks span {
color:#73809a;
    font-size:11px;
    font-weight:650;
}

.bf5-hero-checks i {
color:var(--blue);
    margin-right:5px;
    font-style:normal;
    font-weight:900;
}

.bf5-quick-grid {
display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:14px;
    margin-top:57px;
}

.bf5-quick-grid article {
min-height:130px;
    display:grid;
    grid-template-columns:56px 1fr;
    align-items:center;
    gap:17px;
    padding:20px;
    border:1px solid var(--line);
    border-radius:14px;
    background:#fff;
    box-shadow:
        0 8px 24px rgba(29,45,78,.045);
}

.bf5-icon {
display:flex;
    align-items:center;
    justify-content:center;
    border-radius:11px;
    background:
        linear-gradient(
            145deg,
            #f4f2ff,
            #eef4ff
        );
}

.bf5-icon {
width:52px;
    height:52px;
}

.bf5-icon svg {
width:26px;
    height:26px;
    fill:none;
    stroke:#5963e5;
    stroke-width:1.7;
    stroke-linecap:round;
    stroke-linejoin:round;
}

.bf5-quick-grid article > div:last-child > span {
color:#6c73df;
    font-size:9px;
    font-weight:850;
    letter-spacing:.06em;
}

.bf5-quick-grid strong {
display:block;
    margin-top:6px;
    color:var(--ink);
    font-size:18px;
}

.bf5-quick-grid p {
margin:7px 0 0;
    color:#728099;
    font-size:10px;
    line-height:1.55;
}

@media (max-width:1100px) {
.bf5-hero-grid {
grid-template-columns:1fr 1fr;
        gap:45px;
}

.bf5-quick-grid {
grid-template-columns:repeat(2,1fr);
}
}

@media (max-width:820px) {
.bf5-container {
width:min(100% - 32px,1380px);
}

.bf5-hero {
padding-top:55px;
}

.bf5-hero-grid {
grid-template-columns:1fr;
        gap:42px;
}
}

@media (max-width:600px) {
.bf5-container {
width:min(100% - 24px,1380px);
}

.bf5-hero-copy h1 {
font-size:42px;
}

.bf5-lead {
font-size:14px;
}

.bf5-hero-actions {
align-items:stretch;
        flex-direction:column;
}

.bf5-primary-button,
.bf5-secondary-button {
width:100%;
}

.bf5-hero-checks {
align-items:flex-start;
        flex-direction:column;
        gap:8px;
}

.bf5-quick-grid {
grid-template-columns:1fr;
}
}

.bf5-container {
width:min(1400px,calc(100% - 64px));
}

.bf5-hero {
padding-top:68px;
    padding-bottom:48px;
}

.bf5-hero-grid {
grid-template-columns:
        minmax(0,.97fr)
        minmax(600px,1.03fr);

    gap:68px;
}

.bf5-hero-copy h1 {
max-width:720px;

    font-size:clamp(
        57px,
        4.9vw,
        73px
    );

    line-height:1.055;

    letter-spacing:-.061em;
}

.bf5-hero-copy h1 strong {
display:inline-block;
}

.bf5-lead {
max-width:650px;

    margin-top:28px;

    font-size:16.5px;

    line-height:1.78;
}

.bf5-hero-actions {
margin-top:33px;
}

.bf5-primary-button,
.bf5-secondary-button {
min-height:52px;

    padding-left:24px;
    padding-right:24px;

    font-size:13.5px;
}

.bf5-hero-checks {
margin-top:28px;

    gap:26px;
}

.bf5-hero-checks span {
font-size:11.5px;
}

.bf5-quick-grid {
margin-top:49px;

    gap:16px;
}

.bf5-quick-grid article {
min-height:150px;

    grid-template-columns:
        62px
        1fr;

    gap:19px;

    padding:
        24px
        23px;

    border-radius:15px;

    box-shadow:
        0 10px 30px rgba(29,45,78,.055);
}

.bf5-icon {
width:58px;
    height:58px;

    border-radius:13px;
}

.bf5-icon svg {
width:29px;
    height:29px;
}

.bf5-quick-grid article > div:last-child > span {
font-size:9.5px;
}

.bf5-quick-grid strong {
margin-top:7px;

    font-size:20px;
}

.bf5-quick-grid p {
margin-top:8px;

    font-size:11px;

    line-height:1.58;
}

@media (max-width:1100px) {
.bf5-hero-grid {
grid-template-columns:
            1fr
            1fr;

        gap:43px;
}

.bf5-hero-copy h1 {
font-size:54px;
}
}

@media (max-width:820px) {
.bf5-hero-copy h1 {
font-size:48px;
}
}

@media (max-width:600px) {
.bf5-hero-copy h1 {
font-size:41px;
}

.bf5-hero-copy h1 strong {
display:inline;
}

.bf5-quick-grid article {
min-height:135px;
}
}

.bf5-hero-copy h1 {
max-width:680px;

    font-size:clamp(
        50px,
        3.75vw,
        60px
    );

    line-height:1.09;

    letter-spacing:-.052em;
}

.bf5-lead {
max-width:650px;

    font-size:16.5px;

    line-height:1.75;
}

.bf5-primary-button,
.bf5-secondary-button {
font-size:14px;
}

.bf5-hero-checks span {
font-size:12.5px;

    line-height:1.5;
}

.bf5-quick-grid article {
min-height:164px;

    padding:
        25px
        24px;
}

.bf5-quick-grid article > div:last-child > span {
font-size:10.5px;

    line-height:1.35;
}

.bf5-quick-grid strong {
font-size:21px;

    line-height:1.3;
}

.bf5-quick-grid p {
margin-top:9px;

    font-size:13.5px;

    line-height:1.58;
}

@media (max-width:1100px) {
.bf5-hero-copy h1 {
font-size:52px;
}
}

@media (max-width:820px) {
.bf5-hero-copy h1 {
font-size:47px;
}
}

@media (max-width:600px) {
.bf5-hero-copy h1 {
font-size:39px;
}

.bf5-lead {
font-size:15px;
}

.bf5-quick-grid p {
font-size:13px;
}
}

.bf5-hero-copy h1 {
font-size:clamp(
        44px,
        3.25vw,
        52px
    );

    line-height:1.10;
}

@media (max-width:1100px) {
.bf5-hero-copy h1 {
font-size:46px;
}
}

@media (max-width:820px) {
.bf5-hero-copy h1 {
font-size:43px;
}
}

@media (max-width:600px) {
.bf5-hero-copy h1 {
font-size:38px;
}
}

.bf56-live-panel {
position:relative;
    overflow:hidden;
    min-height:420px;
    padding:30px 32px 28px;
    border-radius:21px;

    color:#fff;

    background:
        radial-gradient(
            circle at 92% 0%,
            rgba(153,166,255,.46),
            transparent 39%
        ),
        radial-gradient(
            circle at 2% 96%,
            rgba(64,191,206,.15),
            transparent 36%
        ),
        linear-gradient(
            138deg,
            #123b73 0%,
            #294ca6 49%,
            #4d5dcc 100%
        );

    box-shadow:
        0 25px 55px rgba(42,75,161,.24);
}

.bf56-live-head {
position:relative;
    z-index:2;

    display:flex;
    justify-content:space-between;
    align-items:center;
}

.bf56-live-head > span {
display:inline-flex;
    align-items:center;
    gap:8px;

    color:#e0e7ff;

    font-size:11px;
    font-weight:800;
    letter-spacing:.04em;
}

.bf56-live-head > span i {
width:7px;
    height:7px;

    border-radius:50%;

    background:#55dfb0;

    box-shadow:
        0 0 0 5px rgba(85,223,176,.09);
}

.bf56-live-head time {
color:#becaf0;
    font-size:11px;
}

.bf56-live-main {
position:relative;
    z-index:2;

    display:grid;
    grid-template-columns:minmax(0,1fr) 150px;
    gap:24px;
    align-items:center;

    padding-top:35px;
}

.bf56-primary {
min-width:0;
}

.bf56-kicker {
display:block;

    color:#bacaf0;

    font-size:11px;
    font-weight:750;
    letter-spacing:.045em;
}

.bf56-total {
display:flex;
    align-items:flex-end;
    gap:7px;

    margin-top:8px;
}

.bf56-total strong {
color:#fff;

    font-size:clamp(58px,5vw,72px);
    font-weight:720;
    line-height:.96;
    letter-spacing:-.065em;

    font-variant-numeric:
        tabular-nums;
}

.bf56-total > span {
padding-bottom:8px;

    color:#79e4bd;

    font-size:25px;
    font-weight:800;
    line-height:1;
}

.bf56-primary h2 {
margin:13px 0 0;

    color:#fff;

    font-size:18px;
    font-weight:720;
    letter-spacing:-.025em;
}

.bf56-primary p {
max-width:305px;

    margin:8px 0 0;

    color:#c5d1ed;

    font-size:12.5px;
    line-height:1.7;
    word-break:keep-all;
}

.bf56-satisfaction {
display:flex;
    flex-direction:column;
    align-items:center;

    padding:15px 11px 13px;

    border:1px solid rgba(255,255,255,.13);
    border-radius:16px;

    background:
        rgba(255,255,255,.065);

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.05);
}

.bf56-satisfaction-label {
align-self:flex-start;

    color:#b9c7ec;

    font-size:8px;
    font-weight:800;
    line-height:1.35;
    letter-spacing:.05em;
}

.bf56-ring {
position:relative;

    width:94px;
    height:94px;

    display:flex;
    align-items:center;
    justify-content:center;

    margin-top:7px;

    border-radius:50%;

    background:
        conic-gradient(
            #70e0b7 0deg 360deg
        );

    box-shadow:
        0 10px 26px rgba(10,31,76,.16);
}

.bf56-ring::before {
content:"";

    position:absolute;

    width:76px;
    height:76px;

    border-radius:50%;

    background:
        linear-gradient(
            145deg,
            #294ca6,
            #3c54b5
        );

    box-shadow:
        inset 0 1px 2px rgba(255,255,255,.10);
}

.bf56-ring strong {
position:relative;
    z-index:2;

    color:#fff;

    font-size:23px;
    font-weight:750;
    line-height:1;
    letter-spacing:-.04em;
}

.bf56-ring strong span {
font-size:13px;
    margin-left:1px;
}

.bf56-satisfaction p {
margin:8px 0 0;

    color:#e2e8fb;

    font-size:10px;
    font-weight:650;
}

.bf56-service-track {
position:relative;
    z-index:2;

    display:grid;
    grid-template-columns:auto 1fr auto;
    align-items:center;
    gap:12px;

    margin-top:21px;
}

.bf56-service-track > span {
color:#aebee8;

    font-size:8px;
    font-weight:800;
    letter-spacing:.055em;
}

.bf56-service-track > div {
position:relative;
    overflow:hidden;

    height:4px;

    border-radius:999px;

    background:
        rgba(255,255,255,.13);
}

.bf56-service-track > div i {
position:absolute;
    inset:0;

    display:block;

    border-radius:inherit;

    background:
        linear-gradient(
            90deg,
            #65dcb3,
            #91eed1
        );

    box-shadow:
        0 0 14px rgba(101,220,179,.28);
}

.bf56-service-track > strong {
color:#dce6ff;

    font-size:9px;
    font-weight:800;
}

.bf56-stat-grid {
position:relative;
    z-index:2;

    display:grid;
    grid-template-columns:repeat(3,1fr);

    margin-top:18px;

    border-top:
        1px solid rgba(255,255,255,.12);
}

.bf56-stat-grid article {
min-width:0;

    padding:15px 13px 0;

    text-align:center;
}

.bf56-stat-grid article:first-child {
padding-left:0;
}

.bf56-stat-grid article:last-child {
padding-right:0;
}

.bf56-stat-grid article + article {
border-left:
        1px solid rgba(255,255,255,.11);
}

.bf56-stat-grid strong {
display:block;

    color:#fff;

    font-size:18px;
    font-weight:750;
    line-height:1.15;

    font-variant-numeric:
        tabular-nums;
}

.bf56-stat-grid span {
display:block;

    margin-top:5px;

    color:#b9c6e8;

    font-size:9.5px;
    font-weight:620;
    line-height:1.4;

    word-break:keep-all;
}

.bf56-glow {
position:absolute;

    width:300px;
    height:300px;

    right:-125px;
    top:-150px;

    border-radius:50%;

    border:
        1px solid rgba(255,255,255,.09);

    box-shadow:
        0 0 0 45px rgba(255,255,255,.025),
        0 0 0 95px rgba(255,255,255,.018);

    pointer-events:none;
}

@media (max-width:1100px) {
.bf56-live-panel {
min-height:410px;
        padding:
            28px
            27px
            26px;
}

.bf56-live-main {
grid-template-columns:
            minmax(0,1fr)
            138px;

        gap:19px;
}

.bf56-total strong {
font-size:60px;
}
}

@media (max-width:820px) {
.bf56-live-panel {
min-height:400px;
}

.bf56-total strong {
font-size:64px;
}
}

@media (max-width:600px) {
.bf56-live-panel {
min-height:0;

        padding:
            24px
            21px
            22px;
}

.bf56-live-main {
grid-template-columns:
            minmax(0,1fr)
            112px;

        gap:14px;

        padding-top:29px;
}

.bf56-total strong {
font-size:48px;
}

.bf56-total > span {
padding-bottom:5px;
        font-size:20px;
}

.bf56-primary h2 {
font-size:17px;
}

.bf56-primary p {
font-size:11.5px;
        line-height:1.65;
}

.bf56-satisfaction {
padding:
            12px
            8px
            11px;
}

.bf56-ring {
width:78px;
        height:78px;
}

.bf56-ring::before {
width:63px;
        height:63px;
}

.bf56-ring strong {
font-size:19px;
}

.bf56-service-track {
gap:8px;
        margin-top:17px;
}

.bf56-service-track > span {
font-size:7px;
}

.bf56-stat-grid {
margin-top:15px;
}

.bf56-stat-grid article {
padding:
            13px
            8px
            0;
}

.bf56-stat-grid strong {
font-size:16px;
}

.bf56-stat-grid span {
font-size:8.5px;
}
}

@media (max-width:430px) {
.bf56-live-main {
grid-template-columns:1fr;
}

.bf56-satisfaction {
display:grid;
        grid-template-columns:auto 78px 1fr;
        align-items:center;
        gap:11px;

        margin-top:2px;

        padding:
            10px
            12px;
}

.bf56-satisfaction-label {
align-self:center;
}

.bf56-satisfaction p {
margin:0;
        text-align:left;
}

.bf56-ring {
margin:0;
}
}

.bf56-live-head > span {
font-size:12px;
    letter-spacing:.035em;
}

.bf56-live-head time {
font-size:12px;
}

.bf56-kicker {
font-size:12px;
    font-weight:800;
}

.bf56-primary h2 {
font-size:20px;
}

.bf56-primary p {
max-width:320px;

    margin-top:9px;

    font-size:14px;
    font-weight:550;
    line-height:1.6;
}

.bf56-satisfaction-label {
font-size:10px;
    line-height:1.4;
}

.bf56-satisfaction p {
font-size:12px;
    font-weight:700;
}

.bf56-service-track > span {
font-size:9.5px;
}

.bf56-service-track > strong {
font-size:10.5px;
}

.bf56-stat-grid strong {
font-size:20px;
}

.bf56-stat-grid span {
margin-top:6px;

    font-size:11.5px;
    font-weight:650;
    line-height:1.4;
}

@media (max-width:600px) {
.bf56-live-head > span,
.bf56-live-head time {
font-size:11px;
}

.bf56-kicker {
font-size:11px;
}

.bf56-primary h2 {
font-size:18px;
}

.bf56-primary p {
font-size:13px;
}

.bf56-satisfaction-label {
font-size:9px;
}

.bf56-satisfaction p {
font-size:11px;
}

.bf56-service-track > span {
font-size:8.5px;
}

.bf56-service-track > strong {
font-size:9.5px;
}

.bf56-stat-grid strong {
font-size:18px;
}

.bf56-stat-grid span {
font-size:10.5px;
}
}

.bf56-stat-grid span {
margin-top:7px;

    font-size:13.5px;
    font-weight:700;
    line-height:1.35;

    letter-spacing:-.015em;
}

@media (max-width:600px) {
.bf56-stat-grid span {
font-size:11.5px;
        font-weight:700;
}
}

body:not(#bf514-never-a):not(#bf514-never-b)
    .bf5-hero-copy h1 {
font-family:
        "NanumBarunGothic",
        "나눔바른고딕",
        "Noto Sans KR",
        "Malgun Gothic",
        sans-serif !important;

    font-weight: 400 !important;
}

body:not(#bf514-never-a):not(#bf514-never-b)
    .bf5-hero-copy h1 strong {
font-family:
        "NanumBarunGothicBold",
        "NanumBarunGothic",
        "나눔바른고딕",
        "Noto Sans KR",
        "Malgun Gothic",
        sans-serif !important;

    font-weight: 400 !important;
}

body:not(#bf515-never-a):not(#bf515-never-b)
    .bf5-hero-copy h1 {
-webkit-text-stroke:
        0.18px
        currentColor;
}

body:not(#bf515-never-a):not(#bf515-never-b)
    .bf5-hero-copy h1 strong {
-webkit-text-stroke:
        0
        currentColor;
}

body:not(#bf516-never-a):not(#bf516-never-b)
    .bf5-hero-copy h1 {
-webkit-text-stroke:
        0.45px
        currentColor;
}

body:not(#bf516-never-a):not(#bf516-never-b)
    .bf5-hero-copy h1 strong {
-webkit-text-stroke:
        0
        currentColor;
}

body:not(#bf517-never-a):not(#bf517-never-b)
    .bf5-hero-copy h1 {
-webkit-text-stroke:
        0
        currentColor !important;

    text-shadow:
         0.50px  0       currentColor,
        -0.50px  0       currentColor,
         0        0.50px currentColor,
         0       -0.50px currentColor;
}

body:not(#bf517-never-a):not(#bf517-never-b)
    .bf5-hero-copy h1 strong {
-webkit-text-stroke:
        0
        currentColor !important;

    text-shadow:
        none !important;
}

body:not(#bf518r1-never-a):not(#bf518r1-never-b)
    .bf5-hero-copy h1 strong {
font-family:
        "NanumBarunGothic",
        "나눔바른고딕",
        "Noto Sans KR",
        "Malgun Gothic",
        sans-serif !important;

    font-weight:
        400 !important;

    -webkit-text-stroke:
        0
        currentColor !important;

    text-shadow:
         0.50px  0       currentColor,
        -0.50px  0       currentColor,
         0        0.50px currentColor,
         0       -0.50px currentColor !important;
}


/* =========================================================
   BLOGFRIEND STAGE33
   CURRENT-LIVE + V5.20 SELECTIVE TRANSPLANT
   RETRY3 MOBILE CASCADE REPAIR

   Root cause:
   Historical donor CSS contains later desktop / 1100px
   two-column Hero rules after the original 820px
   one-column mobile rule.

   Scope:
   <= 820px only.

   Desktop >= 821px remains byte-equivalent to Retry2.
   ========================================================= */


@media (max-width:820px) {

    /*
     * Restore the intended mobile Hero stack:
     *
     * 1. Hero copy
     * 2. CTA / checks
     * 3. Live Service Status
     * 4. Quick cards
     */

    .bf5-hero-grid {
        grid-template-columns:
            minmax(0, 1fr) !important;

        gap:
            42px !important;
    }


    /*
     * The donor has a later unscoped desktop container
     * width rule. Re-establish mobile side margins.
     */

    .bf5-hero .bf5-container {
        width:
            min(
                calc(100% - 32px),
                1380px
            ) !important;

        max-width:
            100% !important;
    }


    /*
     * Prevent the Live panel from retaining any
     * desktop minimum-width/grid-track pressure.
     */

    .bf56-live-panel {
        width:
            100% !important;

        max-width:
            none !important;

        min-width:
            0 !important;
    }


    .bf5-hero-copy,
    .bf56-live-main,
    .bf56-primary,
    .bf56-satisfaction,
    .bf5-quick-grid,
    .bf5-quick-grid article {
        min-width:
            0 !important;
    }
}


@media (max-width:600px) {

    /*
     * Normal phone gutters.
     */

    .bf5-hero .bf5-container {
        width:
            calc(100% - 24px) !important;
    }


    .bf5-hero-grid {
        gap:
            32px !important;
    }


    /*
     * Preserve one-column CTA and value-card flow.
     */

    .bf5-hero-actions {
        flex-direction:
            column !important;

        align-items:
            stretch !important;
    }


    .bf5-primary-button,
    .bf5-secondary-button {
        width:
            100% !important;
    }


    .bf5-hero-checks {
        flex-direction:
            column !important;

        align-items:
            flex-start !important;

        gap:
            8px !important;
    }


    .bf5-quick-grid {
        grid-template-columns:
            minmax(0, 1fr) !important;
    }
}


@media (max-width:430px) {

    /*
     * At the actual iPhone 14 Pro Max emulation width,
     * stack the Live panel's main content vertically.
     */

    .bf56-live-main {
        grid-template-columns:
            minmax(0, 1fr) !important;
    }


    /*
     * Keep the three lower service metrics evenly
     * distributed without horizontal overflow.
     */

    .bf56-stat-grid {
        grid-template-columns:
            repeat(
                3,
                minmax(0, 1fr)
            ) !important;
    }
}


/* =========================================================
   BLOGFRIEND STAGE33
   RETRY5 — HOW IT WORKS DETAIL TRANSPLANT

   Change scope:
   - subtitle
   - V5.20 SVG step icons
   - V5.20 CSS pseudo arrows

   Preserved:
   - title
   - current three card wording
   - current section/card foundation
   - Plans and everything below
   ========================================================= */


/* ---------------------------------------------------------
   SUBTITLE
   V5.20 source wording and visual hierarchy.
   --------------------------------------------------------- */

.bf-rp3-process-heading
.bf-rp3-process-subtitle {

    margin:
        12px
        auto
        0;

    color:
        #788499;

    font-family:
        "NanumBarunGothic",
        "나눔바른고딕",
        "Noto Sans KR",
        "Malgun Gothic",
        sans-serif !important;

    font-size:
        15px;

    font-weight:
        400 !important;

    line-height:
        1.75;

    letter-spacing:
        -.015em;
}


/* ---------------------------------------------------------
   THREE-CARD GRID
   Existing card style is retained.

   Explicit middle arrow columns are removed.
   V5.20 uses three card columns + pseudo arrows.
   --------------------------------------------------------- */

.bf-rp3-steps.bf-rp3-steps-v520 {

    grid-template-columns:
        repeat(
            3,
            minmax(0, 1fr)
        );

    gap:
        46px;
}


/* ---------------------------------------------------------
   V5.20 SVG ICON DESIGN
   Exact visual metrics from V5.20 final cascade.
   --------------------------------------------------------- */

.bf-rp3-steps
article > i.bf-rp3-step-icon-v520 {

    display:
        inline-flex;

    width:
        56px;

    height:
        56px;

    margin-top:
        8px;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        12px;

    background:
        linear-gradient(
            145deg,
            #f4f2ff,
            #eef4ff
        );

    color:
        inherit;

    font-size:
        0;

    font-style:
        normal;
}


.bf-rp3-steps
.bf-rp3-step-icon-v520 svg {

    display:
        block;

    width:
        28px;

    height:
        28px;

    max-width:
        none;

    fill:
        none;

    stroke:
        #5963e5;

    stroke-width:
        1.7;

    stroke-linecap:
        round;

    stroke-linejoin:
        round;
}


/* ---------------------------------------------------------
   V5.20 ARROW DESIGN
   Source implementation:
   article:not(:last-child)::after

   V5.20 uses a CSS-generated › rather than an HTML arrow.
   --------------------------------------------------------- */

.bf-rp3-steps-v520
article:not(:last-child)::after {

    content:
        "›";

    position:
        absolute;

    right:
        -34px;

    top:
        47px;

    color:
        #6066e6;

    font-family:
        Arial,
        sans-serif;

    font-size:
        36px;

    font-weight:
        300;

    line-height:
        1;

    pointer-events:
        none;
}


/* =========================================================
   MOBILE
   Current BlogFriend mobile one-column flow is preserved.
   V5.20 arrows disappear once the cards become one column.
   ========================================================= */

@media (max-width:820px) {

    .bf-rp3-process-heading
    .bf-rp3-process-subtitle {

        margin-top:
            10px;

        font-size:
            13px;

        line-height:
            1.7;
    }


    .bf-rp3-steps.bf-rp3-steps-v520 {

        grid-template-columns:
            minmax(0, 1fr);

        gap:
            11px;
    }


    .bf-rp3-steps-v520
    article:not(:last-child)::after {

        display:
            none;
    }


    .bf-rp3-steps
    article > i.bf-rp3-step-icon-v520 {

        width:
            50px;

        height:
            50px;

        margin-top:
            0;

        border-radius:
            14px;
    }


    .bf-rp3-steps
    .bf-rp3-step-icon-v520 svg {

        width:
            24px;

        height:
            24px;
    }
}


/* =========================================================
   BLOGFRIEND STAGE33
   RETRY8 — FAQ SELECTIVE TRANSPLANT

   Source:
   V5.20 FAQ visual structure.

   Scope:
   .bf5-faq only.

   Placement:
   Plans -> FAQ -> Existing Final CTA
   ========================================================= */


.bf5-faq {

    padding:
        82px
        0
        86px;

    background:
        #fafbfc;
}


.bf5-faq > .bf5-container {

    width:
        min(
            1400px,
            calc(100% - 64px)
        );

    margin:
        0
        auto;
}


.bf5-faq-layout {

    display:
        grid;

    grid-template-columns:
        .69fr
        1.31fr;

    gap:
        86px;
}


/* ---------------------------------------------------------
   LEFT COPY
   --------------------------------------------------------- */

.bf5-faq-copy > span {

    display:
        block;

    color:
        #6871df;

    font-family:
        "NanumBarunGothicBold",
        "나눔바른고딕",
        "NanumBarunGothic",
        "Noto Sans KR",
        "Malgun Gothic",
        sans-serif;

    font-size:
        10px;

    font-weight:
        400;

    line-height:
        1.4;

    letter-spacing:
        .09em;
}


.bf5-faq-copy h2 {

    max-width:
        480px;

    margin:
        13px
        0
        0;

    color:
        #142138;

    font-family:
        "NanumBarunGothic",
        "나눔바른고딕",
        "Noto Sans KR",
        "Malgun Gothic",
        sans-serif !important;

    font-size:
        34px;

    font-weight:
        400 !important;

    line-height:
        1.27;

    letter-spacing:
        -.04em;

    -webkit-text-stroke:
        0
        currentColor !important;

    text-shadow:
         0.50px  0       currentColor,
        -0.50px  0       currentColor,
         0        0.50px currentColor,
         0       -0.50px currentColor !important;
}


.bf5-faq-copy p {

    margin:
        16px
        0
        0;

    color:
        #818b9d;

    font-family:
        "NanumBarunGothic",
        "나눔바른고딕",
        "Noto Sans KR",
        "Malgun Gothic",
        sans-serif;

    font-size:
        14px;

    font-weight:
        400;

    line-height:
        1.65;
}


/* ---------------------------------------------------------
   FAQ LIST
   Native <details> / <summary>
   --------------------------------------------------------- */

.bf5-faq-list {

    border-top:
        1px
        solid
        #dfe3ea;
}


.bf5-faq-list details {

    border-bottom:
        1px
        solid
        #dfe3ea;
}


.bf5-faq-list summary {

    position:
        relative;

    padding:
        26px
        44px
        26px
        0;

    list-style:
        none;

    cursor:
        pointer;

    color:
        #354057;

    font-family:
        "NanumBarunGothicBold",
        "나눔바른고딕",
        "NanumBarunGothic",
        "Noto Sans KR",
        "Malgun Gothic",
        sans-serif;

    font-size:
        15.5px;

    font-weight:
        400;

    line-height:
        1.5;
}


.bf5-faq-list summary::-webkit-details-marker {

    display:
        none;
}


.bf5-faq-list summary::marker {

    content:
        "";
}


.bf5-faq-list summary::after {

    content:
        "+";

    position:
        absolute;

    right:
        3px;

    top:
        19px;

    color:
        #858fa1;

    font-family:
        Arial,
        sans-serif;

    font-size:
        22px;

    font-weight:
        400;

    line-height:
        1;
}


.bf5-faq-list details[open]
summary::after {

    content:
        "−";
}


.bf5-faq-list > details > p {

    margin:
        -2px
        0
        25px;

    padding:
        0
        44px
        0
        0;

    color:
        #778397;

    font-family:
        "NanumBarunGothic",
        "나눔바른고딕",
        "Noto Sans KR",
        "Malgun Gothic",
        sans-serif;

    font-size:
        14.5px;

    font-weight:
        400;

    line-height:
        1.7;

    letter-spacing:
        -.01em;
}


/* =========================================================
   TABLET / MOBILE
   ========================================================= */

@media (max-width:820px) {

    .bf5-faq {

        padding:
            72px
            0;
    }


    .bf5-faq > .bf5-container {

        width:
            min(
                calc(100% - 32px),
                1400px
            );
    }


    .bf5-faq-layout {

        grid-template-columns:
            minmax(0, 1fr);

        gap:
            42px;
    }


    .bf5-faq-copy h2 {

        max-width:
            none;

        font-size:
            29px;
    }


    .bf5-faq-list summary {

        font-size:
            15px;
    }


    .bf5-faq-list > details > p {

        font-size:
            14px;
    }
}


@media (max-width:600px) {

    .bf5-faq > .bf5-container {

        width:
            calc(100% - 24px);
    }


    .bf5-faq {

        padding:
            64px
            0;
    }


    .bf5-faq-layout {

        gap:
            32px;
    }


    .bf5-faq-copy h2 {

        font-size:
            27px;

        line-height:
            1.3;
    }


    .bf5-faq-copy p {

        font-size:
            13px;

        line-height:
            1.7;
    }


    .bf5-faq-list summary {

        padding:
            21px
            38px
            21px
            0;

        font-size:
            14px;
    }


    .bf5-faq-list summary::after {

        top:
            15px;

        font-size:
            21px;
    }


    .bf5-faq-list > details > p {

        margin-bottom:
            21px;

        padding-right:
            12px;

        font-size:
            13px;

        line-height:
            1.7;
    }
}


/* =========================================================
   BLOGFRIEND STAGE33
   RETRY9 — FAQ CLOSED DEFAULT + FINAL CTA SPACING

   Scope:
   - FAQ initial state is handled in HTML.
   - Only visual CSS change here:
     additional top spacing before existing Final CTA card.
   ========================================================= */


/* Desktop */
.bf-rp3-final {

    padding-top:
        44px;
}


/* Tablet */
@media (max-width:820px) {

    .bf-rp3-final {

        padding-top:
            36px;
    }
}


/* Mobile */
@media (max-width:600px) {

    .bf-rp3-final {

        padding-top:
            30px;
    }
}
/* =========================================================
   BLOGFRIEND STAGE33
   MAIN VISITOR PLAN REDESIGN V1

   Scope:
   - Homepage plans section only.
   - 7 visitor packages + 1 account-tier guide.
   - Desktop: 4 columns / 2 rows.
   - Tablet: 2 columns.
   - Mobile: 1 column.
   ========================================================= */

.bf-rp3 .bf-main-visitor-plan-grid {
    grid-template-columns:
        repeat(
            4,
            minmax(0, 1fr)
        );
    gap:
        16px;
}

.bf-rp3
.bf-main-visitor-plan-grid
> article {
    min-width:
        0;
    min-height:
        300px;
}

.bf-rp3
.bf-main-visitor-package-card
h3 {
    margin-bottom:
        24px;
}

.bf-rp3
.bf-main-visitor-package-card
.plan-line
strong {
    white-space:
        nowrap;
}

.bf-rp3
.bf-main-account-tier-card {
    grid-column:
        auto !important;
}

.bf-rp3
.bf-main-account-tier-card
h3 {
    line-height:
        1.38;
}

.bf-rp3
.bf-main-account-tier-card
p {
    word-break:
        keep-all;
}

@media (max-width: 1100px) {

    .bf-rp3
    .bf-main-visitor-plan-grid {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );
    }

    .bf-rp3
    .bf-main-account-tier-card {
        grid-column:
            auto !important;
    }
}

@media (max-width: 600px) {

    .bf-rp3
    .bf-main-visitor-plan-grid {
        grid-template-columns:
            minmax(0, 1fr);
        gap:
            12px;
    }

    .bf-rp3
    .bf-main-visitor-plan-grid
    > article {
        min-height:
            285px;
    }

    .bf-rp3
    .bf-main-account-tier-card {
        grid-column:
            auto !important;
    }
}
/* =========================================================
   BLOGFRIEND STAGE33
   MAIN VISITOR PLAN DESIGN V2

   Goal:
   - Product-card visual hierarchy
   - Visitor quantity first
   - Sale price second
   - Discount/unit-price third
   - Strong CTA
   - Account-plan guide with numeric metrics
   ========================================================= */

.bf-rp3
.bf-main-visitor-plan-grid-v2 {
    gap:
        18px;
}

.bf-rp3
.bf-main-visitor-plan-grid-v2
> article {
    min-height:
        350px;

    padding:
        27px
        26px
        24px;

    border-radius:
        18px;
}

.bf-rp3
.bf-main-visitor-package-card-v2 {
    position:
        relative;

    overflow:
        hidden;

    display:
        flex;

    flex-direction:
        column;
}

.bf-rp3
.bf-main-package-top {
    display:
        flex;

    min-height:
        24px;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        12px;
}

.bf-rp3
.bf-main-package-eyebrow,
.bf-rp3
.bf-main-account-tier-eyebrow {
    color:
        #696f85;

    font-size:
        10px;

    font-weight:
        800;

    letter-spacing:
        .08em;

    text-transform:
        uppercase;
}

.bf-rp3
.bf-main-package-recommend {
    position:
        static;

    flex:
        0 0 auto;

    padding:
        5px
        10px;

    font-size:
        10px;
}

.bf-rp3
.bf-main-package-quantity {
    display:
        flex;

    align-items:
        baseline;

    gap:
        4px;

    margin-top:
        13px;

    color:
        #161c2d;

    line-height:
        1;
}

.bf-rp3
.bf-main-package-quantity
strong {
    font-size:
        32px;

    font-weight:
        850;

    letter-spacing:
        -.045em;
}

.bf-rp3
.bf-main-package-quantity
span {
    font-size:
        17px;

    font-weight:
        780;
}

.bf-rp3
.bf-main-package-price {
    margin-top:
        27px;

    padding-top:
        20px;

    border-top:
        1px solid #eceef4;
}

.bf-rp3
.bf-main-package-regular-price {
    min-height:
        19px;

    color:
        #9aa1b0;

    font-size:
        11px;

    font-weight:
        650;
}

.bf-rp3
.bf-main-package-regular-price
s {
    margin-left:
        4px;
}

.bf-rp3
.bf-main-package-regular-price.is-base {
    text-decoration:
        none;
}

.bf-rp3
.bf-main-package-sale-price {
    display:
        block;

    margin-top:
        6px;

    color:
        #171d2d;

    font-size:
        27px;

    font-weight:
        880;

    line-height:
        1.15;

    letter-spacing:
        -.04em;
}

.bf-rp3
.bf-main-package-sale-price
small {
    margin-left:
        2px;

    font-size:
        14px;

    font-weight:
        760;
}

.bf-rp3
.bf-main-package-benefits {
    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        8px;

    margin-top:
        18px;
}

.bf-rp3
.bf-main-package-unit-price {
    color:
        #747d8f;

    font-size:
        11px;

    white-space:
        nowrap;
}

.bf-rp3
.bf-main-package-unit-price
strong {
    color:
        #4e586d;

    font-weight:
        800;
}

.bf-rp3
.bf-main-package-discount {
    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    min-height:
        27px;

    padding:
        4px
        9px;

    border-radius:
        999px;

    font-size:
        10.5px;

    font-weight:
        850;

    white-space:
        nowrap;
}

.bf-rp3
.bf-main-package-discount.is-discounted {
    background:
        #f0edff;

    color:
        #5a48da;
}

.bf-rp3
.bf-main-package-discount.is-base {
    background:
        #f2f4f7;

    color:
        #7a8394;
}

.bf-rp3
.bf-main-visitor-package-card-v2
> a.bf-main-package-cta {
    height:
        47px;

    margin-top:
        auto;

    border-radius:
        10px;

    font-size:
        12.5px;

    font-weight:
        850;
}

.bf-rp3
.bf-main-visitor-package-card-v2.featured {
    transform:
        translateY(-2px);

    background:
        linear-gradient(
            155deg,
            rgba(101,82,229,.085),
            rgba(255,255,255,.98) 42%
        );

    box-shadow:
        0 22px 46px rgba(82,66,208,.17),
        inset 0 0 0 2px #5b4be2;
}

.bf-rp3
.bf-main-visitor-package-card-v2.featured
.bf-main-package-quantity
strong,
.bf-rp3
.bf-main-visitor-package-card-v2.featured
.bf-main-package-sale-price {
    color:
        #4939ce;
}

.bf-rp3
.bf-main-visitor-package-card-v2.featured
> a.bf-main-package-cta {
    border-color:
        #5b4be2;

    background:
        linear-gradient(
            135deg,
            #6753eb,
            #5040d8
        );

    color:
        #fff;

    box-shadow:
        0 8px 18px rgba(82,66,208,.18);
}


/* Account plan guide */

.bf-rp3
.bf-main-account-tier-card-v2 {
    padding:
        29px
        27px
        24px;

    background:
        linear-gradient(
            150deg,
            #efecff 0%,
            #f8f7ff 48%,
            #ffffff 100%
        );

    box-shadow:
        0 17px 40px rgba(66,56,156,.10),
        inset 0 0 0 1px #ddd7ff;
}

.bf-rp3
.bf-main-account-tier-card-v2
h3 {
    margin:
        12px
        0
        11px;

    color:
        #4b3ad0;

    font-size:
        22px;

    font-weight:
        850;

    line-height:
        1.38;

    letter-spacing:
        -.035em;
}

.bf-rp3
.bf-main-account-tier-card-v2
p {
    color:
        #626d80;

    font-size:
        12px;

    line-height:
        1.7;
}

.bf-rp3
.bf-main-account-tier-metrics {
    display:
        grid;

    grid-template-columns:
        1fr
        1fr;

    gap:
        9px;

    margin-top:
        21px;
}

.bf-rp3
.bf-main-account-tier-metrics
> div {
    padding:
        13px
        11px;

    border:
        1px solid #e0dcfa;

    border-radius:
        11px;

    background:
        rgba(255,255,255,.72);
}

.bf-rp3
.bf-main-account-tier-metrics
span {
    display:
        block;

    color:
        #7a8192;

    font-size:
        9.5px;

    font-weight:
        700;

    line-height:
        1.45;
}

.bf-rp3
.bf-main-account-tier-metrics
strong {
    display:
        block;

    margin-top:
        5px;

    color:
        #4433c6;

    font-size:
        16px;

    font-weight:
        880;

    white-space:
        nowrap;
}

.bf-rp3
.bf-main-account-tier-card-v2
> a.bf-main-account-tier-cta {
    height:
        47px;

    margin-top:
        auto;

    border-color:
        #cfc7fa;

    background:
        #ffffff;

    color:
        #513fd1;

    font-size:
        12.5px;

    font-weight:
        850;
}


/* Slightly more breathing room around the section */

.bf-rp3
.bf-rp3-plans-heading
h2 {
    margin-top:
        1px;
}

.bf-rp3
.bf-rp3-plans-heading
p {
    max-width:
        650px;

    margin:
        12px
        auto
        0;

    line-height:
        1.7;
}


/* Tablet */

@media (max-width: 1100px) {

    .bf-rp3
    .bf-main-visitor-plan-grid-v2
    > article {
        min-height:
            340px;
    }

    .bf-rp3
    .bf-main-package-quantity
    strong {
        font-size:
            30px;
    }
}


/* Mobile */

@media (max-width: 600px) {

    .bf-rp3
    .bf-main-visitor-plan-grid-v2
    > article {
        min-height:
            0;

        padding:
            24px
            22px;
    }

    .bf-rp3
    .bf-main-package-quantity
    strong {
        font-size:
            31px;
    }

    .bf-rp3
    .bf-main-package-sale-price {
        font-size:
            26px;
    }

    .bf-rp3
    .bf-main-package-benefits {
        margin-bottom:
            24px;
    }

    .bf-rp3
    .bf-main-account-tier-metrics {
        grid-template-columns:
            1fr
            1fr;
    }

    .bf-rp3
    .bf-main-account-tier-card-v2
    h3 {
        font-size:
            21px;
    }
}
/* =========================================================
   BLOGFRIEND STAGE33
   MAIN VISITOR PURCHASE CARD TRANSPLANT V3

   Purchase-page card design language transplanted
   into homepage plan section.

   Product / price / purchase policy remains unchanged.
   ========================================================= */


/* Grid */

.bf-rp3
.bf-main-visitor-purchase-transplant-v3 {
    display:
        grid;

    grid-template-columns:
        repeat(
            4,
            minmax(0, 1fr)
        );

    gap:
        16px;

    margin-top:
        38px;
}


/* Base card — adapted from /app/visitor-purchase/ */

.bf-rp3
.bf-main-visitor-purchase-transplant-v3
.bf-billing-plan-card {
    position:
        relative;

    display:
        flex;

    min-width:
        0;

    min-height:
        455px;

    padding:
        24px;

    flex-direction:
        column;

    overflow:
        hidden;

    border:
        1px solid #e2e6ed;

    border-radius:
        18px;

    background:
        #ffffff;

    box-shadow:
        0 6px 22px
        rgba(15, 23, 42, .035);

    transition:
        transform .18s ease,
        border-color .18s ease,
        box-shadow .18s ease;
}

.bf-rp3
.bf-main-visitor-purchase-transplant-v3
.bf-billing-plan-card:hover {
    border-color:
        #d4ceff;

    transform:
        translateY(-2px);

    box-shadow:
        0 12px 28px
        rgba(15, 23, 42, .07);
}

.bf-rp3
.bf-main-visitor-purchase-transplant-v3
.bf-billing-plan-card.is-featured {
    border:
        2px solid #6554ee;

    box-shadow:
        0 14px 32px
        rgba(82, 66, 208, .11);
}


/* Badge row */

.bf-rp3
.bf-main-visitor-purchase-transplant-v3
.bf-billing-card-badges {
    display:
        flex;

    align-items:
        center;

    min-height:
        31px;

    gap:
        7px;

    margin-bottom:
        15px;
}

.bf-rp3
.bf-main-visitor-purchase-transplant-v3
.bf-billing-recommend-badge,
.bf-rp3
.bf-main-account-badge-v3 {
    display:
        inline-flex;

    align-items:
        center;

    min-height:
        29px;

    padding:
        0 11px;

    border-radius:
        999px;

    background:
        #6554ee;

    color:
        #ffffff;

    font-size:
        12px;

    font-weight:
        800;

    line-height:
        1;
}


/* Visitor count */

.bf-rp3
.bf-main-visitor-purchase-transplant-v3
.bf-billing-plan-name {
    margin-bottom:
        9px;

    color:
        #6554ee;

    font-size:
        15px;

    font-weight:
        800;

    line-height:
        1.4;

    letter-spacing:
        .04em;
}


/* Price */

.bf-rp3
.bf-main-visitor-purchase-transplant-v3
.bf-billing-plan-price {
    margin-bottom:
        12px;

    color:
        #172033;

    font-size:
        28px;

    font-weight:
        800;

    line-height:
        1.2;

    letter-spacing:
        -.04em;
}

.bf-rp3
.bf-main-visitor-purchase-transplant-v3
.bf-main-purchase-regular-price {
    display:
        block;

    margin-bottom:
        5px;

    color:
        #9aa3b2;

    font-size:
        13px;

    font-weight:
        600;

    line-height:
        1.3;
}


/* Description */

.bf-rp3
.bf-main-visitor-purchase-transplant-v3
.bf-billing-plan-description {
    min-height:
        47px;

    margin:
        0 0 19px;

    color:
        #7d889a;

    font-size:
        13px;

    line-height:
        1.65;

    word-break:
        keep-all;
}


/* Visitor / account metric box */

.bf-rp3
.bf-main-visitor-purchase-transplant-v3
.bf-billing-plan-traffic {
    display:
        flex;

    align-items:
        flex-end;

    justify-content:
        space-between;

    gap:
        12px;

    margin-bottom:
        19px;

    padding:
        15px;

    border:
        1px solid #e5e1ff;

    border-radius:
        12px;

    background:
        #f8f7ff;
}

.bf-rp3
.bf-main-visitor-purchase-transplant-v3
.bf-billing-plan-traffic
> span {
    color:
        #6d788a;

    font-size:
        13px;

    font-weight:
        800;
}

.bf-rp3
.bf-main-visitor-purchase-transplant-v3
.bf-billing-plan-traffic
strong {
    color:
        #5b4cf0;

    font-size:
        19px;

    font-weight:
        800;

    white-space:
        nowrap;
}

.bf-rp3
.bf-main-visitor-purchase-transplant-v3
.bf-billing-plan-traffic
small {
    margin-left:
        2px;

    font-size:
        12px;
}


/* Feature list */

.bf-rp3
.bf-main-visitor-purchase-transplant-v3
.bf-billing-feature-list {
    display:
        flex;

    margin:
        0 0 21px;

    padding:
        0;

    flex-direction:
        column;

    gap:
        10px;

    list-style:
        none;
}

.bf-rp3
.bf-main-visitor-purchase-transplant-v3
.bf-billing-feature-list
li {
    display:
        flex;

    align-items:
        center;

    gap:
        8px;

    color:
        #526075;

    font-size:
        12px;

    font-weight:
        700;

    line-height:
        1.55;
}

.bf-rp3
.bf-main-visitor-purchase-transplant-v3
.bf-billing-feature-list
li
> span {
    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    width:
        20px;

    height:
        20px;

    flex:
        0 0 20px;

    border-radius:
        50%;

    background:
        #eef9f4;

    color:
        #218b61;

    font-size:
        11px;

    font-weight:
        800;
}


/* CTA */

.bf-rp3
.bf-main-visitor-purchase-transplant-v3
.bf-billing-plan-button {
    display:
        flex;

    width:
        100%;

    height:
        45px;

    margin-top:
        auto;

    align-items:
        center;

    justify-content:
        center;

    border:
        1px solid #d8d2ff;

    border-radius:
        10px;

    background:
        #f8f7ff;

    color:
        #6554ee;

    font-size:
        13px;

    font-weight:
        800;

    line-height:
        1.2;

    text-align:
        center;

    text-decoration:
        none;
}

.bf-rp3
.bf-main-visitor-purchase-transplant-v3
.bf-billing-plan-card.is-featured
.bf-billing-plan-button {
    border-color:
        #6554ee;

    background:
        #6554ee;

    color:
        #ffffff;
}


/* Account guide */

.bf-rp3
.bf-main-account-guide-v3 {
    background:
        linear-gradient(
            150deg,
            rgba(101,84,238,.065),
            rgba(255,255,255,1) 48%
        );
}

.bf-rp3
.bf-main-account-title-v3 {
    margin-bottom:
        11px;

    color:
        #4d3fd0;

    font-size:
        20px;

    font-weight:
        850;

    line-height:
        1.38;

    letter-spacing:
        -.035em;

    word-break:
        keep-all;
}

.bf-rp3
.bf-main-account-description-v3 {
    min-height:
        67px !important;
}

.bf-rp3
.bf-main-account-primary-v3 {
    margin-top:
        1px;
}


/* Tablet */

@media (max-width: 1100px) {

    .bf-rp3
    .bf-main-visitor-purchase-transplant-v3 {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );
    }

    .bf-rp3
    .bf-main-visitor-purchase-transplant-v3
    .bf-billing-plan-card {
        min-height:
            450px;
    }
}


/* Mobile */

@media (max-width: 600px) {

    .bf-rp3
    .bf-main-visitor-purchase-transplant-v3 {
        grid-template-columns:
            minmax(0, 1fr);

        gap:
            13px;
    }

    .bf-rp3
    .bf-main-visitor-purchase-transplant-v3
    .bf-billing-plan-card {
        min-height:
            0;

        padding:
            23px 21px;
    }

    .bf-rp3
    .bf-main-visitor-purchase-transplant-v3
    .bf-billing-plan-description {
        min-height:
            0;
    }

    .bf-rp3
    .bf-main-account-description-v3 {
        min-height:
            0 !important;
    }

    .bf-rp3
    .bf-main-visitor-purchase-transplant-v3
    .bf-billing-feature-list {
        margin-bottom:
            24px;
    }
}
/* =========================================================
   BLOGFRIEND STAGE33
   MAIN VISITOR PURCHASE CARD FIDELITY V4

   Purpose:
   Restore the actual /app/visitor-purchase/ card
   proportions and typography on the homepage.

   IMPORTANT:
   - V3 HTML structure remains unchanged.
   - Visitor package data remains unchanged.
   - Purchase logic remains unchanged.
   - Account policy remains unchanged.
   ========================================================= */


/* ---------------------------------------------------------
   01 CARD PROPORTION
   Purchase page:
   min-height 520px / padding 25px
   --------------------------------------------------------- */

.bf-rp3
.bf-main-visitor-purchase-transplant-v3
.bf-billing-plan-card {
    min-height:
        520px;

    padding:
        25px;
}


/* ---------------------------------------------------------
   02 BADGE / TOP RHYTHM
   Keep the badge row visually consistent between cards.
   --------------------------------------------------------- */

.bf-rp3
.bf-main-visitor-purchase-transplant-v3
.bf-billing-card-badges {
    min-height:
        31px;

    margin-bottom:
        15px;
}


/* ---------------------------------------------------------
   03 PRICE
   Purchase-page price hierarchy is already 28px.
   Restore its original lower spacing.
   --------------------------------------------------------- */

.bf-rp3
.bf-main-visitor-purchase-transplant-v3
.bf-billing-plan-price {
    margin-bottom:
        13px;

    font-size:
        28px;
}


/* ---------------------------------------------------------
   04 DESCRIPTION
   Exact purchase-page readability level.
   --------------------------------------------------------- */

.bf-rp3
.bf-main-visitor-purchase-transplant-v3
.bf-billing-plan-description {
    min-height:
        48px;

    margin:
        0
        0
        22px;

    font-size:
        14px;

    line-height:
        1.7;
}


/* ---------------------------------------------------------
   05 PROVIDED VISITOR METRIC
   Exact purchase-page scale.
   --------------------------------------------------------- */

.bf-rp3
.bf-main-visitor-purchase-transplant-v3
.bf-billing-plan-traffic {
    margin-bottom:
        22px;

    padding:
        17px;
}

.bf-rp3
.bf-main-visitor-purchase-transplant-v3
.bf-billing-plan-traffic
> span {
    font-size:
        14px;
}

.bf-rp3
.bf-main-visitor-purchase-transplant-v3
.bf-billing-plan-traffic
strong {
    font-size:
        21px;
}

.bf-rp3
.bf-main-visitor-purchase-transplant-v3
.bf-billing-plan-traffic
small {
    font-size:
        13px;
}


/* ---------------------------------------------------------
   06 BENEFIT LIST
   Restore purchase-page 14px readability,
   13px vertical rhythm and 21px check icons.
   --------------------------------------------------------- */

.bf-rp3
.bf-main-visitor-purchase-transplant-v3
.bf-billing-feature-list {
    margin:
        0
        0
        24px;

    gap:
        13px;
}

.bf-rp3
.bf-main-visitor-purchase-transplant-v3
.bf-billing-feature-list
li {
    gap:
        9px;

    font-size:
        14px;

    line-height:
        1.55;
}

.bf-rp3
.bf-main-visitor-purchase-transplant-v3
.bf-billing-feature-list
li
> span {
    width:
        21px;

    height:
        21px;

    flex:
        0
        0
        21px;

    font-size:
        12px;
}


/* ---------------------------------------------------------
   07 CTA
   Restore purchase-page CTA text scale.
   --------------------------------------------------------- */

.bf-rp3
.bf-main-visitor-purchase-transplant-v3
.bf-billing-plan-button {
    height:
        45px;

    font-size:
        14px;
}


/* ---------------------------------------------------------
   08 ACCOUNT GUIDE CARD
   Keep the 8th card at the same visual density
   as the visitor packages.
   --------------------------------------------------------- */

.bf-rp3
.bf-main-account-title-v3 {
    margin-bottom:
        13px;

    font-size:
        22px;

    line-height:
        1.4;
}

.bf-rp3
.bf-main-account-description-v3 {
    min-height:
        72px !important;

    font-size:
        14px !important;

    line-height:
        1.7 !important;
}

.bf-rp3
.bf-main-account-guide-v3
.bf-billing-feature-list
li {
    font-size:
        14px;
}


/* ---------------------------------------------------------
   09 DESKTOP GRID
   The existing 1360 / 1280 homepage wrap is sufficient.
   Do NOT artificially widen the global page.
   --------------------------------------------------------- */

.bf-rp3
.bf-main-visitor-purchase-transplant-v3 {
    grid-template-columns:
        repeat(
            4,
            minmax(0, 1fr)
        );

    gap:
        16px;
}


/* ---------------------------------------------------------
   10 TABLET
   --------------------------------------------------------- */

@media (max-width: 1100px) {

    .bf-rp3
    .bf-main-visitor-purchase-transplant-v3 {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );
    }

    .bf-rp3
    .bf-main-visitor-purchase-transplant-v3
    .bf-billing-plan-card {
        min-height:
            500px;
    }
}


/* ---------------------------------------------------------
   11 MOBILE
   Preserve the one-column mobile design without forcing
   the 520px desktop minimum height.
   --------------------------------------------------------- */

@media (max-width: 600px) {

    .bf-rp3
    .bf-main-visitor-purchase-transplant-v3 {
        grid-template-columns:
            minmax(0, 1fr);

        gap:
            13px;
    }

    .bf-rp3
    .bf-main-visitor-purchase-transplant-v3
    .bf-billing-plan-card {
        min-height:
            0;

        padding:
            25px;
    }

    .bf-rp3
    .bf-main-visitor-purchase-transplant-v3
    .bf-billing-plan-description,
    .bf-rp3
    .bf-main-account-description-v3 {
        min-height:
            0 !important;
    }
}
/* =========================================================
   BLOGFRIEND STAGE33
   MAIN VISITOR PLAN SIMPLIFIED V5

   Homepage-specific information refinement.

   Keep:
   - Purchase-page card visual language
   - Visitor count
   - Regular / sale price
   - Description
   - Unit price
   - Two core benefits
   - CTA

   Remove:
   - Duplicate provided-visitor block
   - Duplicate regular-price benefit
   - Duplicate discount benefit
   - Repeated duration copy
   ========================================================= */


/* Grid */

.bf-rp3
.bf-main-visitor-plan-simplified-v5 {
    display:
        grid;

    grid-template-columns:
        repeat(
            4,
            minmax(0, 1fr)
        );

    gap:
        16px;

    margin-top:
        38px;
}


/* Product / account cards */

.bf-rp3
.bf-main-visitor-plan-simplified-v5
.bf-billing-plan-card {
    position:
        relative;

    display:
        flex;

    min-width:
        0;

    min-height:
        460px;

    padding:
        25px;

    flex-direction:
        column;

    overflow:
        hidden;

    border:
        1px solid #e2e6ed;

    border-radius:
        18px;

    background:
        #ffffff;

    box-shadow:
        0 7px 24px
        rgba(15, 23, 42, .04);

    transition:
        transform .18s ease,
        border-color .18s ease,
        box-shadow .18s ease;
}

.bf-rp3
.bf-main-visitor-plan-simplified-v5
.bf-billing-plan-card:hover {
    border-color:
        #d4ceff;

    transform:
        translateY(-2px);

    box-shadow:
        0 13px 30px
        rgba(15, 23, 42, .075);
}

.bf-rp3
.bf-main-visitor-plan-simplified-v5
.bf-billing-plan-card.is-featured {
    border:
        2px solid #6554ee;

    box-shadow:
        0 15px 34px
        rgba(82, 66, 208, .12);
}


/* Badge */

.bf-rp3
.bf-main-v5-badges {
    display:
        flex;

    align-items:
        center;

    min-height:
        31px;

    margin-bottom:
        15px;
}

.bf-rp3
.bf-main-visitor-plan-simplified-v5
.bf-billing-recommend-badge,
.bf-rp3
.bf-main-account-badge-v5 {
    display:
        inline-flex;

    align-items:
        center;

    min-height:
        29px;

    padding:
        0
        11px;

    border-radius:
        999px;

    background:
        #6554ee;

    color:
        #ffffff;

    font-size:
        12px;

    font-weight:
        800;

    line-height:
        1;
}


/* Visitor quantity */

.bf-rp3
.bf-main-v5-package-name {
    margin-bottom:
        9px;

    color:
        #6554ee;

    font-size:
        15px;

    font-weight:
        800;

    line-height:
        1.4;
}


/* Price */

.bf-rp3
.bf-main-v5-price {
    margin-bottom:
        13px;

    color:
        #172033;

    font-size:
        28px;

    font-weight:
        800;

    line-height:
        1.2;

    letter-spacing:
        -.04em;
}

.bf-rp3
.bf-main-v5-price
.bf-main-purchase-regular-price {
    display:
        block;

    min-height:
        17px;

    margin-bottom:
        5px;

    color:
        #9aa3b2;

    font-size:
        13px;

    font-weight:
        600;

    line-height:
        1.3;

    letter-spacing:
        0;
}

.bf-rp3
.bf-main-v5-price
.bf-main-purchase-regular-price.is-base {
    text-decoration:
        none;
}


/* Description */

.bf-rp3
.bf-main-v5-description {
    min-height:
        48px;

    margin:
        0
        0
        21px;

    color:
        #7d889a;

    font-size:
        14px;

    line-height:
        1.7;

    word-break:
        keep-all;
}


/* Unit price — single useful metric */

.bf-rp3
.bf-main-unit-price-box-v5 {
    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        12px;

    min-height:
        55px;

    padding:
        0
        16px;

    border:
        1px solid #e5e1ff;

    border-radius:
        12px;

    background:
        #f8f7ff;
}

.bf-rp3
.bf-main-unit-price-box-v5
span {
    color:
        #6d788a;

    font-size:
        13px;

    font-weight:
        750;
}

.bf-rp3
.bf-main-unit-price-box-v5
strong {
    color:
        #5b4cf0;

    font-size:
        18px;

    font-weight:
        850;

    white-space:
        nowrap;
}


/* Only two homepage benefits */

.bf-rp3
.bf-main-benefit-list-v5 {
    display:
        flex;

    margin:
        19px
        0
        23px;

    padding:
        0;

    flex-direction:
        column;

    gap:
        11px;

    list-style:
        none;
}

.bf-rp3
.bf-main-benefit-list-v5
li {
    display:
        flex;

    align-items:
        center;

    gap:
        9px;

    color:
        #526075;

    font-size:
        13px;

    font-weight:
        700;

    line-height:
        1.55;

    word-break:
        keep-all;
}

.bf-rp3
.bf-main-benefit-list-v5
li
> span {
    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    width:
        21px;

    height:
        21px;

    flex:
        0
        0
        21px;

    border-radius:
        50%;

    background:
        #eef9f4;

    color:
        #218b61;

    font-size:
        12px;

    font-weight:
        800;
}


/* CTA */

.bf-rp3
.bf-main-visitor-plan-simplified-v5
.bf-billing-plan-button {
    display:
        flex;

    width:
        100%;

    height:
        46px;

    margin-top:
        auto;

    align-items:
        center;

    justify-content:
        center;

    border:
        1px solid #d8d2ff;

    border-radius:
        10px;

    background:
        #f8f7ff;

    color:
        #6554ee;

    font-size:
        14px;

    font-weight:
        800;

    text-decoration:
        none;
}

.bf-rp3
.bf-main-visitor-plan-simplified-v5
.bf-billing-plan-card.is-featured
.bf-billing-plan-button {
    border-color:
        #6554ee;

    background:
        #6554ee;

    color:
        #ffffff;
}


/* Account plan */

.bf-rp3
.bf-main-account-guide-v5 {
    background:
        linear-gradient(
            150deg,
            rgba(101,84,238,.07),
            rgba(255,255,255,1) 50%
        );
}

.bf-rp3
.bf-main-account-title-v5 {
    margin-bottom:
        13px;

    color:
        #4d3fd0;

    font-size:
        22px;

    font-weight:
        850;

    line-height:
        1.4;

    letter-spacing:
        -.035em;

    word-break:
        keep-all;
}

.bf-rp3
.bf-main-account-description-v5 {
    min-height:
        64px;

    margin:
        0
        0
        20px;

    color:
        #697487;

    font-size:
        14px;

    line-height:
        1.7;

    word-break:
        keep-all;
}

.bf-rp3
.bf-main-account-metrics-v5 {
    display:
        flex;

    flex-direction:
        column;

    gap:
        10px;

    margin-bottom:
        23px;
}

.bf-rp3
.bf-main-account-metric-v5 {
    display:
        flex;

    min-height:
        59px;

    padding:
        0
        15px;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        12px;

    border:
        1px solid #e2def8;

    border-radius:
        12px;

    background:
        rgba(255,255,255,.78);
}

.bf-rp3
.bf-main-account-metric-v5
span {
    color:
        #687285;

    font-size:
        12px;

    font-weight:
        750;

    line-height:
        1.4;

    word-break:
        keep-all;
}

.bf-rp3
.bf-main-account-metric-v5
strong {
    color:
        #4f3ed1;

    font-size:
        17px;

    font-weight:
        850;

    white-space:
        nowrap;
}


/* Tablet */

@media (max-width: 1100px) {

    .bf-rp3
    .bf-main-visitor-plan-simplified-v5 {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );
    }

    .bf-rp3
    .bf-main-visitor-plan-simplified-v5
    .bf-billing-plan-card {
        min-height:
            450px;
    }
}


/* Mobile */

@media (max-width: 600px) {

    .bf-rp3
    .bf-main-visitor-plan-simplified-v5 {
        grid-template-columns:
            minmax(0, 1fr);

        gap:
            13px;
    }

    .bf-rp3
    .bf-main-visitor-plan-simplified-v5
    .bf-billing-plan-card {
        min-height:
            0;

        padding:
            25px;
    }

    .bf-rp3
    .bf-main-v5-description,
    .bf-rp3
    .bf-main-account-description-v5 {
        min-height:
            0;
    }
}
/* =========================================================
   BLOGFRIEND STAGE33
   MAIN VISITOR PLAN VISUAL POLISH V7

   Scope:
   - CSS only
   - Current V6 copy/data preserved
   - Improve card readability and vertical rhythm
   - Refine ACCOUNT PLAN visual hierarchy
   - Never restore unit-price display
   ========================================================= */


/* ---------------------------------------------------------
   01 GRID RHYTHM
   --------------------------------------------------------- */

.bf-rp3
.bf-main-visitor-purchase-transplant-v3 {
    column-gap:
        16px;

    row-gap:
        18px;
}


/* ---------------------------------------------------------
   02 PRODUCT CARD BALANCE
   Preserve purchase-page proportions while adding
   a little more breathing room.
   --------------------------------------------------------- */

.bf-rp3
.bf-main-visitor-purchase-transplant-v3
.bf-main-purchase-card-v3 {
    min-height:
        528px;

    padding:
        26px;
}


/* ---------------------------------------------------------
   03 VISITOR QUANTITY
   --------------------------------------------------------- */

.bf-rp3
.bf-main-visitor-purchase-transplant-v3
.bf-billing-plan-name {
    margin-bottom:
        9px;

    font-size:
        16px;

    line-height:
        1.4;
}


/* ---------------------------------------------------------
   04 PRICE
   --------------------------------------------------------- */

.bf-rp3
.bf-main-visitor-purchase-transplant-v3
.bf-billing-plan-price {
    margin-bottom:
        14px;

    font-size:
        29px;

    line-height:
        1.18;
}

.bf-rp3
.bf-main-visitor-purchase-transplant-v3
.bf-main-purchase-regular-price {
    margin-bottom:
        6px;

    font-size:
        13px;
}


/* ---------------------------------------------------------
   05 DESCRIPTION
   --------------------------------------------------------- */

.bf-rp3
.bf-main-visitor-purchase-transplant-v3
.bf-billing-plan-description {
    min-height:
        50px;

    margin:
        0
        0
        22px;

    color:
        #707b8e;

    font-size:
        14px;

    line-height:
        1.72;

    word-break:
        keep-all;
}


/* ---------------------------------------------------------
   06 PROVIDED VISITOR
   --------------------------------------------------------- */

.bf-rp3
.bf-main-visitor-purchase-transplant-v3
.bf-billing-plan-traffic {
    min-height:
        61px;

    margin-bottom:
        22px;

    padding:
        16px
        17px;

    align-items:
        center;
}

.bf-rp3
.bf-main-visitor-purchase-transplant-v3
.bf-billing-plan-traffic
> span {
    font-size:
        14px;

    font-weight:
        800;
}

.bf-rp3
.bf-main-visitor-purchase-transplant-v3
.bf-billing-plan-traffic
strong {
    font-size:
        22px;

    line-height:
        1.15;
}

.bf-rp3
.bf-main-visitor-purchase-transplant-v3
.bf-billing-plan-traffic
small {
    font-size:
        13px;
}


/* ---------------------------------------------------------
   07 BENEFIT LIST
   Keep the existing purchase-page content but improve
   scanability inside the homepage 4-column grid.
   --------------------------------------------------------- */

.bf-rp3
.bf-main-visitor-purchase-transplant-v3
.bf-billing-feature-list {
    min-height:
        100px;

    margin:
        0
        0
        24px;

    gap:
        13px;
}

.bf-rp3
.bf-main-visitor-purchase-transplant-v3
.bf-billing-feature-list
li {
    align-items:
        flex-start;

    gap:
        9px;

    color:
        #4e5b70;

    font-size:
        14px;

    font-weight:
        700;

    line-height:
        1.55;

    word-break:
        keep-all;
}

.bf-rp3
.bf-main-visitor-purchase-transplant-v3
.bf-billing-feature-list
li
> span {
    margin-top:
        1px;
}


/* ---------------------------------------------------------
   08 CTA
   --------------------------------------------------------- */

.bf-rp3
.bf-main-visitor-purchase-transplant-v3
.bf-billing-plan-button {
    height:
        48px;

    border-radius:
        11px;

    font-size:
        14px;

    font-weight:
        850;
}


/* ---------------------------------------------------------
   09 FEATURED 50K CARD
   Keep recommendation strong but refined.
   --------------------------------------------------------- */

.bf-rp3
.bf-main-visitor-purchase-transplant-v3
.bf-billing-plan-card.is-featured {
    border:
        2px solid #6554ee;

    box-shadow:
        0 18px 38px
        rgba(82, 66, 208, .13);
}


/* ---------------------------------------------------------
   10 ACCOUNT PLAN CARD
   Remove the visually duplicated first benefit because
   the 50-project metric is already shown in the main box.
   Source HTML remains unchanged.
   --------------------------------------------------------- */

.bf-rp3
.bf-main-account-guide-v3 {
    background:
        linear-gradient(
            155deg,
            rgba(101,84,238,.085) 0%,
            rgba(248,247,255,.96) 43%,
            #ffffff 100%
        );

    box-shadow:
        0 12px 30px
        rgba(75, 63, 180, .08),
        inset 0 0 0 1px #e0dcfb;
}

.bf-rp3
.bf-main-account-guide-v3
.bf-main-account-title-v3 {
    margin-bottom:
        14px;

    font-size:
        23px;

    line-height:
        1.38;
}

.bf-rp3
.bf-main-account-guide-v3
.bf-main-account-description-v3 {
    min-height:
        78px !important;

    margin-bottom:
        22px;

    color:
        #626e82;

    font-size:
        14px !important;

    line-height:
        1.72 !important;
}

.bf-rp3
.bf-main-account-guide-v3
.bf-main-account-primary-v3 {
    min-height:
        66px;

    margin-bottom:
        21px;

    padding:
        16px
        17px;
}

.bf-rp3
.bf-main-account-guide-v3
.bf-main-account-primary-v3
strong {
    font-size:
        22px;
}


/* Duplicate of the primary "maximum 50 projects" metric. */
.bf-rp3
.bf-main-account-guide-v3
.bf-billing-feature-list
li:first-child {
    display:
        none;
}


/* The remaining referrer limit becomes the secondary metric. */
.bf-rp3
.bf-main-account-guide-v3
.bf-billing-feature-list
li:nth-child(2) {
    min-height:
        54px;

    padding:
        12px
        13px;

    align-items:
        center;

    border:
        1px solid #e4e0fa;

    border-radius:
        11px;

    background:
        rgba(255,255,255,.78);

    color:
        #4f42c8;

    font-weight:
        800;
}


/* Final account-plan note stays visually subordinate. */
.bf-rp3
.bf-main-account-guide-v3
.bf-billing-feature-list
li:nth-child(3) {
    color:
        #647084;

    font-size:
        13px;
}

.bf-rp3
.bf-main-account-guide-v3
.bf-billing-feature-list {
    min-height:
        100px;

    gap:
        11px;
}


/* ---------------------------------------------------------
   11 TABLET
   --------------------------------------------------------- */

@media (max-width: 1100px) {

    .bf-rp3
    .bf-main-visitor-purchase-transplant-v3
    .bf-main-purchase-card-v3 {
        min-height:
            510px;
    }

    .bf-rp3
    .bf-main-visitor-purchase-transplant-v3
    .bf-billing-feature-list {
        min-height:
            0;
    }
}


/* ---------------------------------------------------------
   12 MOBILE
   Do not force desktop heights.
   --------------------------------------------------------- */

@media (max-width: 600px) {

    .bf-rp3
    .bf-main-visitor-purchase-transplant-v3
    .bf-main-purchase-card-v3,
    .bf-rp3
    .bf-main-account-guide-v3 {
        min-height:
            0;
    }

    .bf-rp3
    .bf-main-visitor-purchase-transplant-v3
    .bf-billing-feature-list {
        min-height:
            0;
    }

    .bf-rp3
    .bf-main-account-guide-v3
    .bf-main-account-description-v3 {
        min-height:
            0 !important;
    }
}