/* PPC Landing New - Figma "KR PPC" (Desktop 1440 / Tablet 768 / Mobile 360).
   Typography: Figma "FS Me" Light = 'FSMeWeb-Light', Bold = 'FSMeWeb-Bold' (each declared as a single "normal"
   weight, so font-synthesis: none stops the browser faking a heavier bold).
   Breakpoints: mobile < 768, tablet 768-1199, desktop >= 1200. */

@font-face {
    font-family: 'FSMeWeb-Bold';
    src: url('../assets/fonts/FSMeWeb-Bold.eot') format('embedded-opentype');
    src: url('../assets/fonts/FSMeWeb-Bold.woff') format('woff'),
         url('../assets/fonts/FSMeWeb-Bold.eot?#iefix') format('embedded-opentype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'FSMeWeb-Light';
    src: url('../assets/fonts/FSMeWeb-Light.eot') format('embedded-opentype');
    src: url('../assets/fonts/FSMeWeb-Light.woff') format('woff'),
         url('../assets/fonts/FSMeWeb-Light.eot?#iefix') format('embedded-opentype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

:root {
    --ppcln-plum: #50213F;
    --ppcln-pink: #B73764;
    --ppcln-text: #0E0E0E;
    --ppcln-rule: #DB9BB1;   /* Figma 0.5px #B73764 rule, as rendered */
}

html, body { margin: 0; padding: 0; background: #fff; }
.ppcln, .ppcln * { box-sizing: border-box; }

.ppcln {
    font-family: 'FSMeWeb-Light';
    font-weight: 300;
    font-synthesis: none;
    font-size: 16px;
    color: var(--ppcln-text);
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    min-height: 100vh;
}
:where(.ppcln) :is(p, h1, dl, dd) { margin: 0; }
:where(.ppcln) img { display: block; max-width: none; }
.ppcln a { text-decoration: none; }

.ppcln-logo { display: block; width: 270px; max-width: 100%; height: auto; aspect-ratio: 270 / 34; }
.ppcln-logo img { width: 100%; height: 100%; }
.ppcln-logo--plum { display: none; }

/* ---------- Left: headline + calculator ---------- */
.ppcln-calc {
    background: #fff;
    display: flex;
    align-items: center;
    padding: 50px clamp(32px, 4vw, 57px) 48px clamp(40px, 6.74vw, 97px);
}
.ppcln-calc__inner { width: 100%; max-width: 533px; }

.ppcln-title {
    font-family: 'FSMeWeb-Light';
    font-weight: 300;
    font-size: 64px;
    line-height: normal;
    color: #50213F;
}
.ppcln-sub { margin-top: 30px; font-size: clamp(20px, 1.67vw, 24px); line-height: 1.083; color: #000; }
.ppcln-sub p { 
    color: #000;
    font-family: 'FSMeWeb-Light';
    font-size: 24px;
    font-style: normal;
    font-weight: 300;
    line-height: normal; 
}

.ppcln-calculator { margin-top: 93px; width: 100%; max-width: 528px; }
.ppcln-calculator__figures { display: flex; justify-content: space-between; align-items: flex-end; }
.ppcln-figure { display: flex; flex-direction: column; }
.ppcln-figure--right { text-align: right; align-items: flex-end; }
.ppcln-figure__label { color: #000;
    font-family: 'FSMeWeb-Light';
    font-size: 16px;
    font-style: normal;
    font-weight: 300;
    line-height: normal;}
.ppcln-figure__value {
margin-top: 10px;
    color: #50213F;
    font-family: 'FSMeWeb-Bold';
    font-size: 32px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}

/* Range: 8px track (#D8D8D8 @50%), pink fill, 21x20 plum thumb. */
.ppcln-range {
    -webkit-appearance: none;
    appearance: none;
    display: block;
    width: 100%;
    height: 20px;
    margin: 20px 0 0;
    background: transparent;
    cursor: pointer;
    --ppcln-fill: 23%;
}
.ppcln-range:focus { outline: none; }
.ppcln-range::-webkit-slider-runnable-track {
    height: 8px;
    border-radius: 0px;
    background: linear-gradient(to right, var(--ppcln-pink) 0, var(--ppcln-pink) var(--ppcln-fill), rgba(216,216,216,.5) var(--ppcln-fill), rgba(216,216,216,.5) 100%);
}
.ppcln-range::-moz-range-track {
    height: 8px;
    border-radius: 4px;
    background: rgba(216,216,216,.5);
}
.ppcln-range::-moz-range-progress { height: 8px; border-radius: 4px; background: var(--ppcln-pink); }
.ppcln-range::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 21px;
    height: 20px;
    margin-top: -6px;
    border: 0;
    border-radius: 50%;
    background: var(--ppcln-plum);
}
.ppcln-range::-moz-range-thumb {
    width: 21px;
    height: 20px;
    border: 0;
    border-radius: 50%;
    background: var(--ppcln-plum);
}
.ppcln-range:focus-visible::-webkit-slider-thumb { outline: 2px solid var(--ppcln-pink); outline-offset: 2px; }
.ppcln-range:focus-visible::-moz-range-thumb { outline: 2px solid var(--ppcln-pink); outline-offset: 2px; }

.ppcln-calculator__foot { display: flex; justify-content: space-between; align-items: flex-start; margin-top: 34px; }
.ppcln-calculator__note { 
    max-width: 420px;
    color: #000;
    font-family: 'FSMeWeb-Light';
    font-size: 16px;
    font-style: normal;
    font-weight: 300;
    line-height: normal; 
}
.ppcln-calculator__note span { display: block; }
.ppcln-calculator__note span + span { margin-top: 10px; }
.ppcln-badge { width: 51px; height: 64px; object-fit: contain; }
.ppcln .ppcln-badge--calc { margin-top: -22px; }
.ppcln .ppcln-badge--card { display: none; }

/* ---------- Right: offer ---------- */
.ppcln-offer {
    background: var(--ppcln-plum);
    color: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 67px 24px 28px;
}
.ppcln-offer .ppcln-logo { margin-bottom: 67px; }

.ppcln-card {
    background: #fff;
    border-radius: 20px;
    width: 100%;
    max-width: 420px;
    padding: 44px 50px 47px 47px;
    color: var(--ppcln-text);
}
.ppcln-card__name {
    white-space: nowrap;
    color: #50213F;
    font-family: 'FSMeWeb-Bold';
    font-size: 30.762px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    text-transform: uppercase;
}
.ppcln-card__rate {
    margin-top: 10px;
    color: #B73764;
    font-family: 'FSMeWeb-Bold';
    font-size: 108.23px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}
.ppcln-card__caption { 
    margin-top: 0;
    color: #0E0E0E;
    text-align: center;
    font-family: 'FSMeWeb-Light';
    font-size: 16px;
    font-style: normal;
    font-weight: 300;
    line-height: normal;
}

.ppcln-features { margin-top: 30px; border-top: 1px solid var(--ppcln-rule); border-bottom: 1px solid var(--ppcln-rule); }
.ppcln-features__row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 47.25px;
    font-size: 16px;
    line-height: normal;
    color: #000;
}
.ppcln-features__row + .ppcln-features__row { border-top: 1px solid var(--ppcln-rule); }
.ppcln-features dt {
    color: #000;
    font-family: 'FSMeWeb-Light';
    font-size: 16px;
    font-style: normal;
    font-weight: 300;
    line-height: normal;
}
.ppcln-features dd { text-align: right;
    color: #000;
    font-family: 'FSMeWeb-Bold';
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: normal; }

.ppcln-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 30px;
    padding: 12px 20px;
    color: #FFF;
    text-align: center;
    font-family: 'FSMeWeb-Bold';
    font-size: 20px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    border-radius: 5px;
    background: #B73764;
}
.ppcln-btn:hover, .ppcln-btn:focus-visible { background: #9f2d56; color: #fff; }
.ppcln-btn:focus-visible { outline: 2px solid var(--ppcln-plum); outline-offset: 2px; }

.ppcln-other { margin-top: 43px; text-align: center; max-width: 420px; }
.ppcln-other__title {     color: #FFF;
    text-align: center;
    font-family: 'FSMeWeb-Bold';
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: normal; }
.ppcln-other__text { margin-top: 10px;
    color: #FFF;
    font-family: 'FSMeWeb-Light';
    font-size: 16px;
    font-style: normal;
    font-weight: 300;
    line-height: normal; }
.ppcln-other__links { display: flex; justify-content: center; gap: 0; margin-top: 10px; }
.ppcln-other__links a {
display: inline-flex;
    align-items: center;
    gap: 10px;
    height: 42px;
    padding: 10px 20px;
    text-decoration: underline;
    border-radius: 5px;
    color: #FFF;
    text-align: center;
    font-family: 'FSMeWeb-Light';
    font-size: 16px;
    font-style: normal;
    font-weight: 300;
    line-height: 0;
    text-decoration-line: underline;
}
.ppcln-other__links a::after {
    content: "";
    width: 5px;
    height: 11px;
    background: url('../images/ppc-landing-new/chevron.svg') no-repeat center / contain;
    transform: rotate(180deg);
}
.ppcln-other__links a:hover, .ppcln-other__links a:focus-visible { color: #fff; background: rgba(255,255,255,.12); }

/* ---------- Large desktop (> 1440): centre the left content in its half ---------- */
@media (min-width: 1441px) {
    .ppcln-calc { justify-content: center; padding-left: 40px; padding-right: 40px; }
}

/* ---------- Tall desktop screens: keep the composition vertically balanced (Figma frame is 900 high) ---------- */
@media (min-width: 1024px) and (min-height: 960px) {
    .ppcln-offer { padding-top: calc(67px + (100vh - 900px) / 2); }
}

/* ---------- Tablet (768 - 1023) ---------- */
@media (max-width: 1023.98px) {
    .ppcln { grid-template-columns: minmax(0, 1fr); min-height: 0; }

    .ppcln-calc { display: block; padding: 67px 60px 60px; }
    .ppcln-calc__inner { max-width: 648px; margin-left: auto; margin-right: auto; }
    .ppcln-title { font-size: 64px; max-width: 533px; }
    .ppcln-sub { margin-top: 20px; font-size: 24px; }
    .ppcln-calculator { margin-top: 50px; max-width: none; }

    .ppcln-offer { padding: 50px 80px 34px; }
    .ppcln-offer .ppcln-logo { margin-bottom: 50px; }

    .ppcln-card {
        max-width: 608px;
        min-height: 252px;
        display: grid;
        grid-template-columns: 228px 1fr;
        column-gap: 48px;
        align-items: center;
        padding: 30px;
    }
    .ppcln-card__head { display: flex; flex-direction: column; }
    .ppcln-card__name { font-size: 17.9px; line-height: normal; text-align: center; }
    .ppcln-card__rate { font-size: 64px; line-height: 1.1; margin-top: 0; text-align: center; }
    .ppcln-card__caption { text-align: left; }
    .ppcln-card__body { display: contents; }
    .ppcln-features { grid-column: 2; grid-row: 1 / span 2; margin-top: 0; border-top: 0; border-bottom: 0; position: relative; top: -1px; }
    .ppcln-features__row { height: 48px; }
    .ppcln-btn { grid-column: 1; grid-row: 2; width: 228px; margin-top: 34px; align-self: start; }
    .ppcln-card__head { grid-column: 1; grid-row: 1; }
    .ppcln-other { margin-top: 48px; }
}

/* ---------- Mobile (< 768) ---------- */
@media (max-width: 767.98px) {
    .ppcln-logo--plum { display: block; }
    .ppcln-offer .ppcln-logo--white { display: none; }

    /* Content column: fluid up to 480px, centred on wide phones / small tablets. */
    .ppcln-calc { display: grid; grid-template-columns: minmax(0, 480px); justify-content: center; padding: 31px 30px 25px; }
    .ppcln-calc__inner { max-width: none; margin: 0; }
    .ppcln-logo { width: 270px; max-width: 100%; }
    .ppcln-logo--plum { justify-self: start; }
    .ppcln-title { font-size: clamp(28px, calc(36px - (360px - 100vw) * 0.12), 36px); margin-top: 31px; max-width: 310px; }
    .ppcln-sub { display: none; }
    .ppcln-calculator { margin-top: 30px; }
    .ppcln-figure__value { font-size: 20px; line-height: 24px; margin-top: 9px; }
    .ppcln-range { height: 48px; margin-top: 19px; }
    .ppcln-range::-webkit-slider-runnable-track { height: 8px; }
    .ppcln-range::-webkit-slider-thumb { width: 48px; height: 48px; margin-top: -20px; }
    .ppcln-range::-moz-range-thumb { width: 48px; height: 48px; }
    .ppcln-calculator__foot { margin-top: 20px; }
    .ppcln-calculator__note { max-width: 290px; }
    .ppcln .ppcln-badge--calc { display: none; }
    .ppcln-hide-mobile { display: none; }

    .ppcln-offer { padding: 30px 30px 17px; }

    .ppcln-card {
        display: block;
        max-width: 480px;
        padding: 30px;
        box-shadow: 0 4px 4px rgba(0,0,0,.25);
    }
    .ppcln-card__head { display: block; }
    .ppcln-card__name { font-size: clamp(18px, 6.35vw, 22.86px); line-height: normal; white-space: normal; }
    .ppcln-card__rate { font-size: clamp(60px, 22.35vw, 80.46px); line-height: 1.143; margin-top: 0; }
    .ppcln-card__caption { text-align: center; }
    .ppcln-card__body { display: block; }
    .ppcln-features { margin-top: 30px; border-top: 1px solid var(--ppcln-rule); border-bottom: 0; }
    .ppcln-features__row { box-sizing: border-box; height: 48px; }
    .ppcln-features__row:first-child { height: 49px; }
    .ppcln-btn { width: 100%; margin-top: 15px; }
    .ppcln .ppcln-badge--card { display: block; margin: 30px auto 0; }
    .ppcln-other { margin-top: 29px; }
    .ppcln-other__links { flex-wrap: wrap; }
}

/* ---------- Mobile-only copy (optional CMS "Text (mobile)" field) ---------- */
.ppcln-show-mobile { display: none; }
@media (max-width: 767.98px) {
    .ppcln-show-desktop { display: none; }
    .ppcln-show-mobile { display: inline; }

    /* Figma mobile: the interest value is left-aligned in a 93px block, its label right-aligned 13px in from the edge. */
    .ppcln-figure--right { 
        align-items: end;
        text-align: right;
        width: 51%;
    }
    output#ppcln-interest-out {
        margin-right: 13px;
    }

    .ppcln-figure--right .ppcln-figure__label { align-self: flex-end; margin-right: 13px; }
}

/* ---------- Figma alignment: sub-pixel text placement ----------
   Figma and the browser place glyphs differently inside the same line box (font ascent/descent vs
   "normal" line height). These nudges, measured against the Figma frames, line the glyphs up exactly.
   Offsets are in em so they scale with the fluid font sizes. */
.ppcln-title, .ppcln-sub, .ppcln-figure__label, .ppcln-figure__value, .ppcln-calculator__note,
.ppcln-card__name, .ppcln-card__rate, .ppcln-card__caption,
.ppcln-other__title, .ppcln-other__text, .ppcln-other__links a { position: relative; }

@media (min-width: 1024px) {
    .ppcln-title { top: -0.094em; }
    .ppcln-sub { top: -0.083em; left: 2px; }
    .ppcln-figure__label { top: -0.125em; }
    .ppcln-figure:not(.ppcln-figure--right) .ppcln-figure__label { left: 2px; }
    .ppcln-figure__value { top: -0.094em; }
    .ppcln-figure--right .ppcln-figure__value { top: -0.16em; }
    .ppcln-figure--right .ppcln-figure__label { left: -2px; }
    .ppcln-calculator__note { top: -0.125em; left: 2px; }
    .ppcln-range { margin-top: 18px; margin-left: 3px; width: calc(100% - 4px); }
    .ppcln-calculator__foot { margin-top: 35px; gap: 20px;}
    .ppcln-card__name { top: -0.065em; }
    .ppcln-card__rate { top: -0.028em; }
    .ppcln-card__caption { top: -0.0625em; }
    .ppcln-other__title { top: -0.125em; }
    .ppcln-other__text { top: -0.19em; }
    .ppcln-other__links a { top: -0.125em; }
    .ppcln-other__links { margin-top: 8px; }
    .ppcln-btn { margin-top: 29px; }
    .ppcln-features { position: relative; top: -1px; }
    /* Figma desktop rule positions: rows are 50 / 48 / 48 / 44px between the rules (text sits 1-2px low in the first and last row). */
    .ppcln-features__row { box-sizing: border-box; height: 48px; }
    .ppcln-features__row:first-child { height: 50px; padding-top: 3px; }
    .ppcln-features__row:last-child { height: 44px; padding-top: 4px; }
    .ppcln-badge--calc { position: relative; left: -1px; top: -1px; }
}

@media (min-width: 768px) and (max-width: 1023.98px) {
    .ppcln-title { top: -0.078em; left: 1px; }
    .ppcln-sub { top: -0.04em; left: 2px; }
    .ppcln-figure__label { top: -0.0625em; }
    .ppcln-figure:not(.ppcln-figure--right) .ppcln-figure__label { left: 2px; }
    .ppcln-figure__value { top: -0.0625em; }
    .ppcln-figure--right .ppcln-figure__value { top: -0.156em; }
    .ppcln-figure--right .ppcln-figure__label { left: -2px; }
    .ppcln-calculator__note { top: -0.0625em; left: 2px; }
    .ppcln-range { margin-left: 3px; width: calc(100% - 4px); }
    .ppcln-card__name { top: -0.11em; }
    .ppcln-card__rate { top: 0.03em; }
    .ppcln-other__text { top: 2px; }
    .ppcln-other__links { margin-top: 8px; }
}

@media (max-width: 767.98px) {
    .ppcln-title { top: -0.083em; }
    .ppcln-figure__label { top: -0.0625em; }
    .ppcln-figure__value { top: -0.05em; }
    .ppcln-figure:not(.ppcln-figure--right) .ppcln-figure__value { left: -2px; }
    .ppcln-card__name { top: -0.13em; }
    .ppcln-card__rate { top: -0.0124em; }
    .ppcln-card__caption { top: -0.0625em; color: #000 !important;}
    .ppcln-other__title { top: -0.0625em; }
    .ppcln-range::-webkit-slider-runnable-track {
        border-radius: 0px !important;
        height: 11px !important;
    }
}

/* ---------- Very small phones (< 360px): keep the other-options links on one row ---------- */
@media (max-width: 359.98px) {
    .ppcln-other__links { flex-wrap: nowrap; }
    .ppcln-other__links a { padding-left: 10px; padding-right: 10px; gap: 6px; }
}

/* Figma mobile frame: the links row sits 4px right of centre (37..331 in a 360px frame). */
@media (max-width: 420px) and (min-width: 360px) {
    .ppcln-other__links { position: relative; left: 4px; }
}


@media only screen and (min-width: 1280px) {
    .ppcln-calculator__foot {
    flex-direction: column;
        gap: 60px;
    }
    
    h1.ppcln-title {
    font-size: 56px;
}

.ppcln-sub p {
    font-size: 22px;
}

.ppcln-calculator {
    margin-top: 46px;
}

.ppcln-sub {
    margin-top: 20px;
}

.ppcln-offer .ppcln-logo {
    margin-bottom: 45px;
    margin-top: 45px;
}

.ppcln-offer {
    /*padding: calc(67px + (100vh - 900px) / 2);*/
    padding: calc(45px + (100vh - 900px) / 2) 24px 15px;
}

p.ppcln-card__name {
    font-size: 24.738px;
}

p.ppcln-card__rate {
    font-size: 87.035px;
}

.ppcln-features__row {
    height: 38px !important;
}

.ppcln-btn {
    margin-top: 20px;
}

.ppcln-btn {
    padding: 9.5px 20px;
    font-size: 16.083px;
}

.ppcln-card {
    padding: 30px 47px 30px 47px;
}

.ppcln-other {
    margin-top: 30px;
}

.ppcln-other__links {
    margin-top: 0px !important;
}

.ppcln-card__head {
    text-align: center;
}

}