/* =========================================================
   RELIZ PRESS-RELIZ-YERLESDIR - VISUAL SYSTEM V3
   Full page-specific color redesign.
   ========================================================= */

body:has(.placement-page) .static-page-hero{
    border-bottom-color:rgba(0,93,108,.14);
    background:
        radial-gradient(
            circle at 86% 5%,
            rgba(255,145,32,.18),
            transparent 28%
        ),
        radial-gradient(
            circle at 10% 90%,
            rgba(0,145,157,.12),
            transparent 32%
        ),
        linear-gradient(
            120deg,
            #EAF9F7 0%,
            #FFFFFF 52%,
            #FFF2DF 100%
        );
}

body:has(.placement-page) .static-page-main{
    background:
        radial-gradient(
            circle at 0 25%,
            rgba(0,147,160,.055),
            transparent 25%
        ),
        radial-gradient(
            circle at 100% 70%,
            rgba(255,126,0,.055),
            transparent 25%
        ),
        #FFFFFF;
}

.static-page-main:has(.placement-page) .static-page-content{
    width:100%;
    max-width:none;
}


/* =========================================================
   VARIABLES / BASE
   ========================================================= */

.placement-page{
    --place-navy:#001B2B;
    --place-navy-2:#003846;

    --place-teal:#007987;
    --place-teal-bright:#00A6A9;
    --place-teal-soft:#E5F8F5;

    --place-orange:#FF7A00;
    --place-orange-2:#FFAD25;
    --place-orange-soft:#FFF0D9;

    --place-blue:#2187B8;
    --place-blue-soft:#E9F6FC;

    --place-green:#25D366;
    --place-green-dark:#107D43;
    --place-green-soft:#E9FAEF;

    --place-violet:#6967CE;
    --place-violet-soft:#F0EFFE;

    --place-border:rgba(0,67,82,.15);
    --place-shadow:0 14px 36px rgba(0,40,54,.08);
    --place-shadow-strong:0 22px 54px rgba(0,34,48,.15);

    display:flex;
    flex-direction:column;
    gap:68px;
}

.placement-page *,
.placement-page *::before,
.placement-page *::after{
    box-sizing:border-box;
}

.placement-page h2,
.placement-page h3,
.placement-page p{
    margin-top:0;
}

.placement-kicker{
    display:block;
    margin-bottom:10px;
    color:var(--place-teal);
    font-size:12px;
    font-weight:900;
    letter-spacing:.09em;
    text-transform:uppercase;
}


/* =========================================================
   PRIMARY OFFER
   ========================================================= */

.placement-offer{
    position:relative;
    display:grid;
    grid-template-columns:minmax(0,1.35fr) minmax(300px,.65fr);
    gap:34px;
    align-items:stretch;
    overflow:hidden;
    padding:38px;
    border:1px solid rgba(0,115,128,.22);
    border-radius:24px;

    background:
        radial-gradient(
            circle at 96% 0,
            rgba(255,165,50,.38),
            transparent 29%
        ),
        radial-gradient(
            circle at 0 100%,
            rgba(0,164,171,.22),
            transparent 31%
        ),
        linear-gradient(
            125deg,
            #DDF7F3 0%,
            #F9FFFE 44%,
            #FFF2D9 100%
        );

    box-shadow:
        0 24px 60px rgba(0,52,65,.11);
}

.placement-offer::before{
    content:"";
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:6px;

    background:
        linear-gradient(
            90deg,
            var(--place-teal-bright) 0%,
            var(--place-teal-bright) 30%,
            var(--place-orange) 70%,
            var(--place-orange-2) 100%
        );
}

.placement-offer-copy{
    position:relative;
    z-index:2;
    display:flex;
    min-width:0;
    flex-direction:column;
    align-items:flex-start;
    justify-content:center;
}

.placement-offer-copy h2{
    max-width:720px;
    margin-bottom:15px;
    color:var(--place-navy);
    font-size:clamp(30px,4vw,44px);
    font-weight:800;
    line-height:1.07;
    letter-spacing:-.012em;
}

.placement-offer-copy > p{
    max-width:720px;
    margin-bottom:24px;
    color:#25424D;
    font-size:17px;
    line-height:1.65;
}

.placement-offer-facts{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    margin-bottom:26px;
}

.placement-offer-facts span{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:10px 13px;

    border:1px solid rgba(0,118,128,.15);
    border-radius:999px;

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

    color:var(--place-navy);
    font-size:13px;
    font-weight:800;

    box-shadow:
        0 4px 12px rgba(0,54,67,.05);
}

.placement-offer-facts i{
    color:var(--place-teal);
}

.placement-start-button{
    min-width:195px;
    box-shadow:
        0 9px 22px rgba(255,122,0,.24);
}


/* =========================================================
   PRICE CARD - MAIN VISUAL FOCUS
   ========================================================= */

.placement-price-card{
    position:relative;
    display:flex;
    min-width:0;
    min-height:100%;
    flex-direction:column;
    justify-content:center;
    overflow:hidden;

    padding:42px 36px 38px;

    border:1px solid rgba(177,83,0,.15);
    border-radius:22px;

    background:
        radial-gradient(
            circle at 90% 5%,
            rgba(255,255,255,.38),
            transparent 27%
        ),
        linear-gradient(
            145deg,
            #FFD15C 0%,
            #FF9B22 52%,
            #FF7300 100%
        );

    color:var(--place-navy);

    box-shadow:
        0 18px 38px rgba(218,104,0,.18);

    animation:none;
}

.placement-price-card::before{
    content:"";
    position:absolute;
    width:190px;
    height:190px;
    top:-95px;
    right:-80px;

    border-radius:50%;

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

.placement-price-card::after{
    content:"";
    position:absolute;
    width:110px;
    height:110px;
    left:-50px;
    bottom:-54px;

    border-radius:50%;

    background:
        rgba(0,78,91,.11);
}

.placement-price-label{
    position:relative;
    z-index:2;

    display:inline-flex;
    width:max-content;

    margin-bottom:18px;
    padding:8px 12px;

    border-radius:999px;

    background:var(--place-navy);
    color:#fff;

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

.placement-price-card strong{
    position:relative;
    z-index:2;
    display:block;

    margin-bottom:22px;

    color:var(--place-navy);

    font-size:clamp(58px,6vw,82px);
    font-weight:900;
    line-height:.98;
    letter-spacing:-.018em;

    text-shadow:none;

    font-kerning:normal;
    font-feature-settings:"kern" 1;
}

.placement-price-note{
    position:relative;
    z-index:2;

    margin-top:0;
    max-width:21ch;

    color:#102A34;
    font-size:16px;
    font-weight:700;
    line-height:1.50;
    letter-spacing:0;
}

.placement-payment-note{
    position:relative;
    z-index:2;

    margin-top:18px;
    max-width:25ch;
    padding-top:17px;

    border-top:
        1px solid
        rgba(0,27,43,.14);

    color:#263F47;
    font-size:14px;
    font-weight:500;
    line-height:1.55;
    letter-spacing:0;
}

@keyframes placement-price-float{
    0%,
    100%{
        transform:translateY(0);
    }

    50%{
        transform:translateY(-7px);
    }
}


/* =========================================================
   SECTION HEADINGS
   ========================================================= */

.placement-section-heading{
    max-width:780px;
    margin-bottom:26px;
}

.placement-section-heading h2{
    margin-bottom:10px;

    color:var(--place-navy);

    font-size:31px;
    font-weight:800;
    line-height:1.13;
    letter-spacing:-.01em;
}

.placement-section-heading p{
    margin-bottom:0;

    color:#60717A;

    font-size:16px;
    line-height:1.6;
}


/* =========================================================
   PROCESS STEPS
   ========================================================= */

.placement-steps{
    display:grid;
    grid-template-columns:
        repeat(4,minmax(0,1fr));

    gap:17px;
}

.placement-step{
    position:relative;

    min-width:0;
    overflow:hidden;

    padding:24px;

    border:1px solid var(--place-border);
    border-radius:18px;

    box-shadow:
        0 10px 28px rgba(0,43,55,.06);

    transition:
        transform .2s ease,
        box-shadow .2s ease;
}

.placement-step:nth-child(1){
    background:
        linear-gradient(
            145deg,
            #DFF8F4,
            #F8FFFE
        );
}

.placement-step:nth-child(2){
    background:
        linear-gradient(
            145deg,
            #FFF0D5,
            #FFFDFC
        );
}

.placement-step:nth-child(3){
    background:
        linear-gradient(
            145deg,
            #E6F5FC,
            #FBFEFF
        );
}

.placement-step:nth-child(4){
    background:
        linear-gradient(
            145deg,
            #E5F9EB,
            #FBFFFC
        );
}

.placement-step::before{
    content:"";

    position:absolute;
    top:0;
    left:0;

    width:100%;
    height:6px;
}

.placement-step:nth-child(1)::before{
    background:
        linear-gradient(
            90deg,
            #007E88,
            #00B4AD
        );
}

.placement-step:nth-child(2)::before{
    background:
        linear-gradient(
            90deg,
            #FF7200,
            #FFB12B
        );
}

.placement-step:nth-child(3)::before{
    background:
        linear-gradient(
            90deg,
            #1479A8,
            #35AFD2
        );
}

.placement-step:nth-child(4)::before{
    background:
        linear-gradient(
            90deg,
            #128A48,
            #25D366
        );
}

.placement-step:hover{
    box-shadow:
        0 18px 34px rgba(0,43,55,.11);

    transform:
        translateY(-5px);
}

.placement-step-number{
    position:absolute;
    top:19px;
    right:18px;

    color:rgba(0,27,43,.28);

    font-size:13px;
    font-weight:900;
}

.placement-step > i{
    display:flex;

    width:46px;
    height:46px;

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

    margin-bottom:19px;

    border-radius:13px;

    font-size:19px;
}

.placement-step:nth-child(1) > i{
    background:#007A85;
    color:#fff;
}

.placement-step:nth-child(2) > i{
    background:#FF8100;
    color:#fff;
}

.placement-step:nth-child(3) > i{
    background:#1D8AB7;
    color:#fff;
}

.placement-step:nth-child(4) > i{
    background:#20B95C;
    color:#fff;
}

.placement-step h3{
    margin-bottom:8px;

    color:var(--place-navy);

    font-size:18px;
    font-weight:700;
    line-height:1.25;
}

.placement-step p{
    margin-bottom:0;

    color:#52666E;

    font-size:14px;
    line-height:1.55;
}


/* =========================================================
   ORDER ZONE
   ========================================================= */

.placement-order{
    position:relative;

    scroll-margin-top:24px;

    overflow:visible;

    padding:38px;

    border:
        1px solid
        rgba(0,112,124,.20);

    border-radius:24px;

    background:
        radial-gradient(
            circle at 0 0,
            rgba(0,170,173,.15),
            transparent 29%
        ),
        radial-gradient(
            circle at 100% 100%,
            rgba(255,129,0,.18),
            transparent 31%
        ),
        linear-gradient(
            135deg,
            #E6F8F5 0%,
            #F9FFFF 40%,
            #FFF4E4 100%
        );

    box-shadow:
        0 26px 65px rgba(0,51,64,.10);
}

.placement-order::before{
    content:"";

    position:absolute;
    top:0;
    left:18px;

    width:calc(100% - 36px);
    height:7px;

    border-radius:999px;

    background:
        linear-gradient(
            90deg,
            var(--place-teal-bright) 0%,
            var(--place-teal-bright) 33%,
            var(--place-orange) 70%,
            var(--place-orange-2) 100%
        );
}

.placement-order-heading{
    position:relative;
    z-index:2;

    margin-bottom:32px;
}

.placement-order-grid{
    position:relative;
    z-index:2;

    display:grid;
    grid-template-columns:
        minmax(0,1.08fr)
        minmax(320px,.92fr);

    gap:32px;
    align-items:stretch;
}

.placement-form{
    min-width:0;
    align-self:start;
}


/* =========================================================
   PROGRESS
   ========================================================= */

.placement-progress{
    margin-bottom:20px;
    padding:19px;

    border:1px solid rgba(0,111,122,.16);
    border-radius:15px;

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

    box-shadow:
        0 8px 24px rgba(0,44,55,.05);
}

.placement-progress-head{
    display:flex;
    justify-content:space-between;
    gap:16px;

    margin-bottom:11px;

    color:var(--place-navy);

    font-size:13px;
}

.placement-progress-head strong{
    font-weight:900;
}

.placement-progress-head span{
    color:var(--place-teal);
    font-weight:900;
}

.placement-progress-track{
    height:9px;

    overflow:hidden;

    border-radius:999px;

    background:#DDEBEA;
}

.placement-progress-track span{
    display:block;

    width:0;
    height:100%;

    border-radius:inherit;

    background:
        linear-gradient(
            90deg,
            #00A49F,
            #2AB59F 42%,
            #FFAD25 72%,
            #FF7700
        );

    box-shadow:
        0 0 14px
        rgba(255,122,0,.25);

    transition:
        width .28s ease;
}


/* =========================================================
   FORM CARDS
   ========================================================= */

.placement-form-block{
    position:relative;

    overflow:hidden;

    padding:25px;

    border:
        1px solid
        rgba(0,90,105,.14);

    border-radius:18px;

    background:#fff;

    box-shadow:
        0 12px 30px
        rgba(0,44,57,.055);
}

.placement-form-block::before{
    content:"";

    position:absolute;
    top:0;
    left:0;

    width:6px;
    height:100%;

    background:var(--place-teal);
}

.placement-form-block:nth-of-type(3)::before{
    background:var(--place-orange);
}

.placement-form-block:nth-of-type(4)::before{
    background:var(--place-blue);
}

.placement-form-block + .placement-form-block{
    margin-top:18px;
}

.placement-form-block-heading{
    display:flex;
    gap:14px;
    align-items:flex-start;

    margin-bottom:22px;
}

.placement-form-block-heading > span{
    display:flex;

    width:40px;
    height:40px;
    flex:0 0 40px;

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

    border-radius:50%;

    background:
        linear-gradient(
            145deg,
            #007B86,
            #004654
        );

    color:#fff;

    font-size:12px;
    font-weight:900;

    box-shadow:
        0 7px 17px
        rgba(0,107,119,.22);
}

.placement-form-block:nth-of-type(3)
.placement-form-block-heading > span{
    background:
        linear-gradient(
            145deg,
            #FF9500,
            #E76700
        );

    box-shadow:
        0 7px 17px
        rgba(255,122,0,.22);
}

.placement-form-block:nth-of-type(4)
.placement-form-block-heading > span{
    background:
        linear-gradient(
            145deg,
            #2A99C5,
            #146E9C
        );

    box-shadow:
        0 7px 17px
        rgba(33,135,184,.20);
}

.placement-form-block-heading h3{
    margin-bottom:4px;

    color:var(--place-navy);

    font-size:20px;
    font-weight:700;
    line-height:1.2;
}

.placement-form-block-heading p{
    margin-bottom:0;

    color:#697A82;

    font-size:13px;
    line-height:1.45;
}


/* =========================================================
   FIELDS
   ========================================================= */

.placement-fields{
    display:grid;
    gap:16px;
}

.placement-fields-two{
    grid-template-columns:
        repeat(2,minmax(0,1fr));
}

.placement-field{
    display:block;
    min-width:0;

    margin-top:16px;
}

.placement-fields .placement-field{
    margin-top:0;
}

.placement-field > span,
.placement-status legend{
    display:flex;
    align-items:center;
    gap:7px;

    margin-bottom:8px;

    color:var(--place-navy);

    font-size:13px;
    font-style:normal;
    font-weight:900;
}

.placement-field em{
    color:#D74431;
    font-style:normal;
}

.placement-field b{
    color:#7A898F;

    font-size:11px;
    font-weight:700;
}

.placement-field input,
.placement-question-row textarea{
    width:100%;
    min-width:0;

    border:
        1px solid
        #C7D5D8;

    border-radius:11px;

    background:#fff;
    color:#132D38;

    font:inherit;

    outline:none;

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

.placement-field input{
    height:50px;

    padding:
        0
        14px;
}

.placement-question-row textarea{
    min-height:86px;

    padding:
        13px
        14px;

    resize:vertical;

    line-height:1.5;
}

.placement-field input:hover,
.placement-question-row textarea:hover{
    border-color:
        rgba(0,121,135,.42);
}

.placement-field input:focus,
.placement-question-row textarea:focus{
    border-color:var(--place-teal);

    background:#FBFFFF;

    box-shadow:
        0 0 0 4px
        rgba(0,145,157,.10);
}

.placement-field > small{
    display:none;

    margin-top:7px;

    color:#B33428;

    font-size:12px;
    line-height:1.4;
}

.placement-field.has-error input{
    border-color:#C54B3F;

    box-shadow:
        0 0 0 4px
        rgba(197,75,63,.08);
}

.placement-field.has-error > small{
    display:block;
}


/* =========================================================
   MATERIAL STATUS
   ========================================================= */

.placement-status{
    min-width:0;

    margin:
        20px
        0
        0;

    padding:0;
    border:0;
}

.placement-status-grid{
    display:grid;

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

    gap:12px;
}

.placement-choice{
    position:relative;
    display:block;
    cursor:pointer;
}

.placement-choice input{
    position:absolute;

    width:1px;
    height:1px;

    opacity:0;
    pointer-events:none;
}

.placement-choice > span{
    display:block;

    min-height:94px;

    padding:17px;

    border:
        1px solid
        rgba(0,100,115,.15);

    border-radius:13px;

    background:
        linear-gradient(
            145deg,
            #F1FAF9,
            #FFFFFF
        );

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

.placement-choice:nth-child(2) > span{
    background:
        linear-gradient(
            145deg,
            #FFF4E5,
            #FFFFFF
        );
}

.placement-choice strong,
.placement-choice small{
    display:block;
}

.placement-choice strong{
    margin-bottom:5px;

    color:var(--place-navy);

    font-size:14px;
    font-weight:900;
}

.placement-choice small{
    color:#667981;

    font-size:12px;
    line-height:1.45;
}

.placement-choice:has(input:checked) > span{
    border-color:var(--place-teal);

    background:
        linear-gradient(
            145deg,
            #DDF8F4,
            #FFFFFF
        );

    box-shadow:
        0 0 0 4px
        rgba(0,145,157,.09),
        0 10px 24px
        rgba(0,77,90,.06);

    transform:
        translateY(-1px);
}

.placement-choice:nth-child(2):has(input:checked) > span{
    border-color:var(--place-orange);

    background:
        linear-gradient(
            145deg,
            #FFE8C7,
            #FFFFFF
        );

    box-shadow:
        0 0 0 4px
        rgba(255,122,0,.08),
        0 10px 24px
        rgba(130,68,0,.06);
}

.placement-choice:has(input:focus-visible) > span{
    outline:
        2px solid
        var(--place-teal);

    outline-offset:2px;
}


/* =========================================================
   QUESTIONS
   ========================================================= */

.placement-question-list{
    display:flex;
    flex-direction:column;

    gap:12px;
}

.placement-question-row{
    display:grid;

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

    gap:10px;
    align-items:start;
}

.placement-question-content{
    min-width:0;
}

.placement-question-content label{
    display:block;

    margin-bottom:7px;

    color:var(--place-navy);

    font-size:13px;
    font-weight:900;
}

.placement-remove-question{
    display:flex;

    width:42px;
    height:42px;

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

    margin-top:25px;

    border:
        1px solid
        #F0C7C1;

    border-radius:10px;

    background:#FFF2F0;
    color:#AD382E;

    cursor:pointer;
}

.placement-remove-question:hover{
    border-color:#C54B3F;

    background:#FFE8E4;
}

.placement-add-question{
    display:inline-flex;
    align-items:center;

    gap:8px;

    margin-top:15px;
    padding:
        9px
        13px;

    border:
        1px solid
        rgba(33,135,184,.20);

    border-radius:10px;

    background:var(--place-blue-soft);
    color:#176D99;

    font:inherit;
    font-size:13px;
    font-weight:900;

    cursor:pointer;
}

.placement-add-question:hover{
    border-color:
        rgba(33,135,184,.40);

    background:#DDF2FC;
    color:#0D567E;
}


/* =========================================================
   WHATSAPP ACTION
   ========================================================= */

.placement-submit-area{
    position:relative;

    overflow:hidden;

    margin-top:20px;
    padding:22px;

    border-radius:17px;

    background:
        radial-gradient(
            circle at 100% 0,
            rgba(37,211,102,.22),
            transparent 38%
        ),
        linear-gradient(
            135deg,
            #002536,
            #00505A
        );

    box-shadow:
        0 16px 35px
        rgba(0,32,44,.15);
}

.placement-submit-area::before{
    content:"";

    position:absolute;

    top:0;
    left:0;

    width:6px;
    height:100%;

    background:var(--place-green);
}

.placement-submit{
    position:relative;
    z-index:2;

    display:inline-flex;

    width:100%;
    min-height:54px;

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

    gap:10px;

    background:
        linear-gradient(
            135deg,
            #2BDF70,
            #20C75E
        );

    color:#06341D;

    font-weight:900;

    box-shadow:
        0 9px 22px
        rgba(37,211,102,.25);
}

.placement-submit:not(:disabled):hover{
    background:
        linear-gradient(
            135deg,
            #37EB7C,
            #25D366
        );

    color:#052D1A;

    transform:
        translateY(-1px);
}

.placement-submit:disabled{
    background:#718F8D;
    color:#EAF4F3;

    box-shadow:none;

    opacity:.68;

    cursor:not-allowed;
}

.placement-submit-area p{
    position:relative;
    z-index:2;

    margin:
        13px
        0
        0;

    color:#C6D9DC;

    font-size:12px;
    line-height:1.5;
}


/* =========================================================
   LIVE PREVIEW
   ========================================================= */

.placement-preview{
    min-width:0;
    align-self:stretch;
}

.placement-preview-sticky{
    position:sticky;
    top:20px;

    display:flex;
    max-height:calc(100vh - 40px);
    flex-direction:column;

    overflow:hidden;

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

    border-top:
        6px solid
        var(--place-orange);

    border-radius:21px;

    background:
        radial-gradient(
            circle at 100% 0,
            rgba(0,183,183,.25),
            transparent 33%
        ),
        radial-gradient(
            circle at 0 100%,
            rgba(37,211,102,.13),
            transparent 30%
        ),
        linear-gradient(
            145deg,
            #001A2A,
            #00404C 72%,
            #07565B
        );

    color:#fff;

    box-shadow:
        0 27px 58px
        rgba(0,26,39,.24);
}

.placement-preview-head{
    display:flex;

    align-items:flex-start;
    justify-content:space-between;

    gap:18px;

    padding:
        25px
        25px
        19px;

    border-bottom:
        1px solid
        rgba(255,255,255,.11);
}

.placement-preview-kicker{
    display:block;

    margin-bottom:5px;

    color:#79D6D3;

    font-size:11px;
    font-weight:900;
    letter-spacing:.09em;

    text-transform:uppercase;
}

.placement-preview-head h3{
    margin-bottom:0;

    color:#fff;

    font-size:22px;
    font-weight:700;
}

.placement-live-badge{
    display:inline-flex;

    align-items:center;

    gap:6px;

    padding:
        7px
        9px;

    border:
        1px solid
        rgba(37,211,102,.18);

    border-radius:999px;

    background:
        rgba(37,211,102,.10);

    color:#B8FFD1;

    font-size:10px;
    font-weight:900;
    letter-spacing:.07em;
}

.placement-live-badge > span{
    width:8px;
    height:8px;

    border-radius:50%;

    background:var(--place-green);

    animation:
        placement-live-pulse
        1.8s
        ease-out
        infinite;
}

@keyframes placement-live-pulse{
    0%{
        box-shadow:
            0 0 0 0
            rgba(37,211,102,.35);
    }

    70%{
        box-shadow:
            0 0 0 9px
            rgba(37,211,102,0);
    }

    100%{
        box-shadow:
            0 0 0 0
            rgba(37,211,102,0);
    }
}

.placement-message{
    min-height:310px;
    min-width:0;
    flex:1 1 auto;
    overflow:auto;

    padding:25px;

    color:#F3FAFB;

    font-family:inherit;
    font-size:14px;
    line-height:1.75;

    white-space:pre-wrap;
    overflow-wrap:anywhere;
}

.placement-preview-note{
    display:flex;

    gap:9px;
    align-items:flex-start;

    padding:
        17px
        25px;

    background:
        rgba(0,0,0,.12);

    color:#BFD7DA;

    font-size:12px;
    line-height:1.45;
}

.placement-preview-note i{
    margin-top:2px;

    color:#FFAB32;
}


/* =========================================================
   WHAT IS INCLUDED
   ========================================================= */

.placement-included-grid{
    display:grid;

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

    gap:16px;
}

.placement-included-grid article{
    position:relative;

    min-width:0;
    overflow:hidden;

    padding:22px;

    border:
        1px solid
        var(--place-border);

    border-radius:16px;

    box-shadow:
        0 9px 25px
        rgba(0,42,55,.055);
}

.placement-included-grid article:nth-child(1){
    background:#E5F8F5;
}

.placement-included-grid article:nth-child(2){
    background:#FFF0DB;
}

.placement-included-grid article:nth-child(3){
    background:#E9F6FC;
}

.placement-included-grid article:nth-child(4){
    background:#F0EFFE;
}

.placement-included-grid article:nth-child(5){
    background:#E9FAEF;
}

.placement-included-grid article:nth-child(6){
    background:#FFF0E7;
}

.placement-included-grid article::before{
    content:"";

    position:absolute;

    top:0;
    left:0;

    width:100%;
    height:5px;
}

.placement-included-grid article:nth-child(1)::before{
    background:#008D94;
}

.placement-included-grid article:nth-child(2)::before{
    background:#FF7A00;
}

.placement-included-grid article:nth-child(3)::before{
    background:#258EBB;
}

.placement-included-grid article:nth-child(4)::before{
    background:#6967CE;
}

.placement-included-grid article:nth-child(5)::before{
    background:#21A955;
}

.placement-included-grid article:nth-child(6)::before{
    background:#E36B39;
}

.placement-included-grid i{
    display:flex;

    width:42px;
    height:42px;

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

    margin-bottom:16px;

    border-radius:11px;

    color:#fff;
}

.placement-included-grid article:nth-child(1) i{
    background:#008D94;
}

.placement-included-grid article:nth-child(2) i{
    background:#FF7A00;
}

.placement-included-grid article:nth-child(3) i{
    background:#258EBB;
}

.placement-included-grid article:nth-child(4) i{
    background:#6967CE;
}

.placement-included-grid article:nth-child(5) i{
    background:#21A955;
}

.placement-included-grid article:nth-child(6) i{
    background:#E36B39;
}

.placement-included-grid strong,
.placement-included-grid span{
    display:block;
}

.placement-included-grid strong{
    margin-bottom:7px;

    color:var(--place-navy);

    font-size:15px;
    font-weight:700;
}

.placement-included-grid span{
    color:#52666F;

    font-size:13px;
    line-height:1.5;
}


/* =========================================================
   CONDITIONS
   ========================================================= */

.placement-details{
    display:grid;
    gap:13px;
}

.placement-details details{
    overflow:hidden;

    border:
        1px solid
        rgba(0,97,109,.16);

    border-radius:15px;

    background:
        linear-gradient(
            135deg,
            #F7FCFB,
            #FFFFFF
        );

    box-shadow:
        0 7px 19px
        rgba(0,42,55,.04);
}

.placement-details details:nth-child(2){
    background:
        linear-gradient(
            135deg,
            #FFF8EF,
            #FFFFFF
        );
}

.placement-details summary{
    display:flex;

    align-items:center;
    justify-content:space-between;

    gap:18px;

    padding:
        19px
        21px;

    color:var(--place-navy);

    font-size:14px;
    font-weight:900;

    cursor:pointer;
    list-style:none;
}

.placement-details summary::-webkit-details-marker{
    display:none;
}

.placement-details summary > span{
    display:flex;

    align-items:center;

    gap:11px;
}

.placement-details summary > span i{
    display:flex;

    width:31px;
    height:31px;

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

    border-radius:9px;

    background:var(--place-teal-soft);
    color:var(--place-teal);
}

.placement-details details:nth-child(2)
summary > span i{
    background:var(--place-orange-soft);
    color:#D86800;
}

.placement-details summary > i{
    transition:
        transform .2s ease;
}

.placement-details details[open]
summary > i{
    transform:
        rotate(180deg);
}

.placement-details details > div{
    padding:
        0
        21px
        21px;
}

.placement-details details p{
    margin:
        0
        0
        12px;

    color:#384F58;

    font-size:14px;
    line-height:1.68;
}

.placement-details details p:last-child{
    margin-bottom:0;
}


/* =========================================================
   CONTACT CTA
   ========================================================= */

.placement-help{
    position:relative;

    display:flex;

    align-items:center;
    justify-content:space-between;

    gap:30px;

    overflow:hidden;

    padding:30px;

    border-radius:20px;

    background:
        radial-gradient(
            circle at 95% 0,
            rgba(255,155,34,.36),
            transparent 31%
        ),
        linear-gradient(
            125deg,
            #001B2B,
            #004652 72%,
            #086059
        );

    color:#fff;

    box-shadow:
        0 19px 43px
        rgba(0,25,38,.16);
}

.placement-help::before{
    content:"";

    position:absolute;

    left:0;
    top:0;

    width:7px;
    height:100%;

    background:
        linear-gradient(
            180deg,
            var(--place-orange),
            var(--place-orange-2)
        );
}

.placement-help h2{
    margin-bottom:8px;

    color:#fff;

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

.placement-help p{
    max-width:580px;

    margin-bottom:0;

    color:#D0E1E4;

    font-size:14px;
    line-height:1.55;
}

.placement-help .placement-kicker{
    color:#FFAF3A;
}

.placement-help-actions{
    display:flex;

    flex-wrap:wrap;
    justify-content:flex-end;

    gap:10px;
}

.placement-contact-link{
    display:inline-flex;

    min-height:45px;

    align-items:center;

    gap:8px;

    padding:
        0
        14px;

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

    border-radius:10px;

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

    color:#fff;

    font-size:13px;
    font-weight:800;

    text-decoration:none;
}

.placement-contact-link:hover{
    border-color:
        rgba(255,255,255,.38);

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

    color:#fff;
}


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

@media(max-width:980px){

    .placement-page{
        gap:56px;
    }

    .placement-offer{
        grid-template-columns:
            minmax(0,1fr)
            290px;

        padding:30px;
    }

    .placement-price-card{
        padding:32px 28px 30px;
    }

    .placement-price-card strong{
        font-size:56px;
        line-height:1;
        letter-spacing:-.015em;
    }

    .placement-steps{
        grid-template-columns:
            repeat(2,minmax(0,1fr));
    }

    .placement-order-grid{
        grid-template-columns:1fr;
    }

    .placement-preview-sticky{
        position:static;
        display:block;
        max-height:none;
    }

    .placement-message{
        min-height:220px;
        overflow:visible;
    }

    .placement-included-grid{
        grid-template-columns:
            repeat(2,minmax(0,1fr));
    }

    .placement-help{
        align-items:flex-start;
        flex-direction:column;
    }

    .placement-help-actions{
        justify-content:flex-start;
    }
}


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

@media(max-width:700px){

    .placement-page{
        gap:44px;
    }

    .placement-offer{
        grid-template-columns:1fr;

        gap:23px;

        padding:23px;

        border-radius:19px;
    }

    .placement-offer-copy h2{
        font-size:30px;
    }

    .placement-offer-copy > p{
        font-size:15px;
    }

    .placement-offer-facts{
        align-items:flex-start;
        flex-direction:column;

        width:100%;
    }

    .placement-offer-facts span{
        width:100%;
    }

    .placement-start-button{
        width:100%;
        justify-content:center;
    }

    .placement-price-card{
        padding:30px 24px 28px;

        animation:none;
    }

    .placement-price-card strong{
        font-size:52px;
        line-height:1;
        letter-spacing:-.012em;
    }

    .placement-section-heading h2{
        font-size:26px;
    }

    .placement-steps{
        grid-template-columns:1fr;
    }

    .placement-step{
        padding:21px;
    }

    .placement-order{
        padding:21px;

        border-radius:19px;
    }

    .placement-fields-two,
    .placement-status-grid,
    .placement-included-grid{
        grid-template-columns:1fr;
    }

    .placement-form-block{
        padding:20px;
    }

    .placement-progress-head{
        align-items:flex-start;
        flex-direction:column;

        gap:4px;
    }

    .placement-choice > span{
        min-height:0;
    }

    .placement-question-row{
        grid-template-columns:
            minmax(0,1fr)
            40px;
    }

    .placement-remove-question{
        width:40px;
        height:40px;
    }

    .placement-preview-head,
    .placement-message{
        padding-left:20px;
        padding-right:20px;
    }

    .placement-message{
        min-height:0;
    }

    .placement-preview-note{
        padding-left:20px;
        padding-right:20px;
    }

    .placement-details summary{
        align-items:flex-start;

        padding:17px;
    }

    .placement-details details > div{
        padding:
            0
            17px
            17px;
    }

    .placement-help{
        padding:23px;
    }

    .placement-help-actions{
        width:100%;
        flex-direction:column;
    }

    .placement-contact-link,
    .placement-help-actions .button{
        width:100%;
        justify-content:center;
    }
}


/* =========================================================
   SMALL MOBILE
   ========================================================= */

@media(max-width:420px){

    .placement-offer,
    .placement-order{
        margin-left:-4px;
        margin-right:-4px;
    }

    .placement-form-block{
        padding:17px;
    }

    .placement-form-block-heading{
        gap:11px;
    }

    .placement-form-block-heading > span{
        width:35px;
        height:35px;
        flex-basis:35px;
    }

    .placement-preview-head{
        gap:10px;
    }

    .placement-preview-head h3{
        font-size:19px;
    }

    .placement-price-card strong{
        font-size:46px;
        line-height:1;
        letter-spacing:-.01em;
    }
}


/* =========================================================
   ACCESSIBILITY
   ========================================================= */

@media(prefers-reduced-motion:reduce){

    .placement-price-card,
    .placement-live-badge > span{
        animation:none;
    }

    .placement-step,
    .placement-progress-track span,
    .placement-details summary > i,
    .placement-choice > span{
        transition:none;
    }
}


/* =========================================================
   RELIZ ORDER FORM V5
   Conditional Qurum / publication-time controls.
   ========================================================= */

.placement-conditional{
    margin-top:16px;
    animation:
        placement-conditional-reveal
        .2s
        ease;
}

.placement-conditional[hidden]{
    display:none !important;
}


/*
 * Fourth form card:
 * questions.
 *
 * div:nth-of-type:
 * 1 progress
 * 2 identity
 * 3 press-release
 * 4 publication time
 * 5 questions
 */
.placement-form-block:nth-of-type(5)::before{
    background:var(--place-violet);
}

.placement-form-block:nth-of-type(5)
.placement-form-block-heading > span{
    background:
        linear-gradient(
            145deg,
            #7875DC,
            #5552B5
        );

    box-shadow:
        0 7px 17px
        rgba(105,103,206,.22);
}


@keyframes placement-conditional-reveal{
    from{
        opacity:0;
        transform:translateY(-5px);
    }

    to{
        opacity:1;
        transform:translateY(0);
    }
}


@media(prefers-reduced-motion:reduce){

    .placement-conditional{
        animation:none;
    }
}


/* =========================================================
   RELIZ ORDER FORM V6 - MULTI-CHANNEL ACTIONS
   WhatsApp + E-mail + Copy
   ========================================================= */

.placement-submit-area{
    background:
        radial-gradient(
            circle at 100% 0,
            rgba(255,121,0,.18),
            transparent 38%
        ),
        linear-gradient(
            135deg,
            #002536,
            #00505A
        );
}

.placement-submit-area::before{
    background:
        linear-gradient(
            180deg,
            #FF7900,
            #00A6B2
        );
}

.placement-submit-heading{
    position:relative;
    z-index:2;

    display:flex;
    flex-direction:column;

    gap:3px;

    margin-bottom:14px;
}

.placement-submit-heading strong{
    color:#fff;

    font-size:17px;
    font-weight:900;
    line-height:1.25;
}

.placement-submit-heading span{
    color:#C6D9DC;

    font-size:12px;
    line-height:1.45;
}

.placement-submit-actions{
    position:relative;
    z-index:2;

    display:grid;

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

    gap:10px;
}

.placement-submit-email{
    display:inline-flex;

    width:100%;
    min-height:54px;

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

    gap:10px;

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

    border-radius:11px;

    background:#fff;
    color:#004153;

    font:inherit;
    font-weight:900;

    cursor:pointer;

    box-shadow:
        0 9px 22px
        rgba(0,30,48,.15);

    transition:
        transform .16s ease,
        background-color .16s ease,
        border-color .16s ease;
}

.placement-submit-email:hover:not(:disabled){
    border-color:#fff;

    background:#F0FBFD;

    transform:
        translateY(-1px);
}

.placement-copy-button{
    position:relative;
    z-index:2;

    display:flex;

    width:100%;
    min-height:44px;

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

    gap:9px;

    margin-top:10px;

    padding:
        9px
        14px;

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

    border-radius:10px;

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

    color:#fff;

    font:inherit;
    font-size:13px;
    font-weight:900;

    cursor:pointer;

    transition:
        background-color .16s ease,
        border-color .16s ease,
        transform .16s ease;
}

.placement-copy-button:hover:not(:disabled){
    border-color:
        rgba(255,255,255,.40);

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

    transform:
        translateY(-1px);
}

.placement-submit-email:disabled,
.placement-copy-button:disabled{
    opacity:.52;
    cursor:not-allowed;

    box-shadow:none;

    transform:none;
}

.placement-copy-status{
    position:relative;
    z-index:2;

    min-height:0;

    margin-top:8px;

    font-size:12px;
    font-weight:800;
    line-height:1.4;
}

.placement-copy-status:empty{
    display:none;
}

.placement-copy-status.is-success{
    color:#79E9A2;
}

.placement-copy-status.is-error{
    color:#FFD2CC;
}

.placement-submit-email:focus-visible,
.placement-copy-button:focus-visible{
    outline:
        3px solid
        rgba(255,255,255,.88);

    outline-offset:3px;
}

.placement-copy-buffer{
    position:fixed;

    top:0;
    left:-9999px;

    width:1px;
    height:1px;

    opacity:0;
    pointer-events:none;
}


@media(max-width:700px){

    .placement-submit-actions{
        grid-template-columns:1fr;
    }

    .placement-submit-email,
    .placement-submit{
        min-height:52px;
    }

    .placement-copy-button{
        min-height:46px;
    }
}


@media(prefers-reduced-motion:reduce){

    .placement-submit-email,
    .placement-copy-button{
        transition:none;
    }
}


/* =========================================================
   RELIZ ORDER CHOICE UI V4
   Standard accessible radio tiles
   ========================================================= */


/*
 * Entire tile remains clickable.
 */
.placement-page
.placement-form
.placement-status
.placement-status-grid
.placement-choice{
    position:relative;

    display:block;

    cursor:pointer;
}


/*
 * REAL visual radio control.
 *
 * It is deliberately visible instead of hiding selection
 * behind card background alone.
 */
.placement-page
.placement-form
.placement-status
.placement-status-grid
.placement-choice
> input[type="radio"]{
    position:absolute;

    z-index:3;

    top:22px;
    left:20px;

    display:block;

    width:22px;
    height:22px;

    margin:0;

    opacity:1;
    visibility:visible;

    clip:auto;
    clip-path:none;

    appearance:none;
    -webkit-appearance:none;

    border:
        2px solid
        #7C91A3;

    border-radius:50%;

    background:#FFFFFF;

    box-shadow:none;

    cursor:pointer;
}


/*
 * Unselected tile.
 */
.placement-page
.placement-form
.placement-status
.placement-status-grid
.placement-choice
> input[type="radio"]:not(:checked)
+ span{
    display:block;

    min-height:116px;

    padding:
        21px
        22px
        20px
        56px;

    border:
        2px solid
        #CBD7E0;

    border-radius:18px;

    background:#FFFFFF;

    color:#0B2239;

    box-shadow:
        0 3px 10px
        rgba(11,34,57,.06);

    cursor:pointer;

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


.placement-page
.placement-form
.placement-status
.placement-status-grid
.placement-choice
> input[type="radio"]:not(:checked)
+ span strong{
    display:block;

    margin:
        0
        0
        8px;

    color:#0B2239;

    font-weight:900;
    line-height:1.3;
}


.placement-page
.placement-form
.placement-status
.placement-status-grid
.placement-choice
> input[type="radio"]:not(:checked)
+ span small{
    display:block;

    color:#607888;

    line-height:1.45;
}


/*
 * Hover makes an unselected tile obviously interactive.
 */
.placement-page
.placement-form
.placement-status
.placement-status-grid
.placement-choice:hover
> input[type="radio"]:not(:checked)
+ span{
    border-color:#00505A;

    background:#F8FAFC;

    box-shadow:
        0 7px 18px
        rgba(0,80,90,.12);

    transform:
        translateY(-1px);
}


/*
 * Selected radio.
 *
 * White ring + blue center is readable against
 * the selected blue tile.
 */
.placement-page
.placement-form
.placement-status
.placement-status-grid
.placement-choice
> input[type="radio"]:checked{
    border-color:#FFFFFF;

    background:#FFFFFF;

    box-shadow:
        inset 0 0 0 5px
        #00505A;
}


/*
 * SELECTED TILE.
 *
 * One consistent primary selection colour.
 */
.placement-page
.placement-form
.placement-status
.placement-status-grid
.placement-choice
> input[type="radio"]:checked
+ span{
    display:block;

    min-height:116px;

    padding:
        21px
        22px
        20px
        56px;

    border:
        2px solid
        #00505A;

    border-radius:18px;

    background:#00505A;

    color:#FFFFFF;

    box-shadow:
        0 8px 20px
        rgba(0,80,90,.25);

    cursor:pointer;

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


.placement-page
.placement-form
.placement-status
.placement-status-grid
.placement-choice
> input[type="radio"]:checked
+ span strong,
.placement-page
.placement-form
.placement-status
.placement-status-grid
.placement-choice
> input[type="radio"]:checked
+ span small{
    color:#FFFFFF;
}


.placement-page
.placement-form
.placement-status
.placement-status-grid
.placement-choice:hover
> input[type="radio"]:checked
+ span{
    border-color:#003E47;

    background:#003E47;

    box-shadow:
        0 9px 22px
        rgba(0,80,90,.30);

    transform:
        translateY(-1px);
}


/*
 * Remove ALL decorative pseudo-content inherited from
 * previous/base card styling.
 */
.placement-page
.placement-form
.placement-status
.placement-status-grid
.placement-choice
> span::before,
.placement-page
.placement-form
.placement-status
.placement-status-grid
.placement-choice
> span::after{
    content:none;

    display:none;
}


/*
 * Keyboard focus is deliberately NOT blue:
 * orange focus ring remains distinguishable from selection.
 */
.placement-page
.placement-form
.placement-status
.placement-status-grid
.placement-choice
> input[type="radio"]:focus-visible
+ span{
    outline:
        3px solid
        #FF7900;

    outline-offset:3px;
}


@media(max-width:700px){

    .placement-page
    .placement-form
    .placement-status
    .placement-status-grid
    .placement-choice
    > input[type="radio"]{
        top:19px;
        left:17px;

        width:21px;
        height:21px;
    }


    .placement-page
    .placement-form
    .placement-status
    .placement-status-grid
    .placement-choice
    > input[type="radio"]:not(:checked)
    + span,
    .placement-page
    .placement-form
    .placement-status
    .placement-status-grid
    .placement-choice
    > input[type="radio"]:checked
    + span{
        min-height:0;

        padding:
            18px
            18px
            18px
            51px;
    }
}


@media(prefers-reduced-motion:reduce){

    .placement-page
    .placement-form
    .placement-status
    .placement-status-grid
    .placement-choice
    > span{
        transition:none;
    }
}