div.wrapper,
div.wrapper textarea,
div.wrapper select,
div.wrapper button,
div.wrapper table{
    font-family:var(--font-landing);
}

div.header{
    text-align:right;
    max-width:600px;
    margin:0 auto;
    padding:16px 20px 0;
    box-sizing: border-box;
    font-size:14px;
    color:var(--grey-text-300);
}

.animate-box{
    opacity: 0;
    visibility: hidden;
}

.animate-box[data-animation="popIn"]{
    opacity: 1;
    transform: scale(0);
}

.animate-box.is-visible{
    opacity: 1;
    visibility: visible;
}

[data-scroll-scale]{
    --scroll-scale:1;
    scale:var(--scroll-scale);
}

div.modal .cta_popup {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: -100%;
    z-index: 11;
}

div.modal .cta_popup.on {
    display: block;
}

div.modal .cta_popup:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: saturate(180%) blur(8px);
    -webkit-backdrop-filter: saturate(180%) blur(8px);
}

div.modal .cta_popup div.float {
    position: absolute;
    bottom: 0;
    left: 20px;
    right: 20px;
}

div.modal .cta_popup div.float div.form {
    position: relative;
    background: #fff;
    padding: 30px 20px 15px;
    border-radius: 1em 1em 0em 0em;
    max-width: 550px;
    margin: 0 auto;
}

div.modal .cta_popup div.float button.cta_popup_btn {
    position: absolute;
    top: -20px;
    right: 10px;
    color: #fff;
    font-size: 26px;
    width: 26px;
    text-align: center;
    padding: 10px;
    background: #2e2e2e;
    border-radius: 50%;
    box-sizing: content-box;
}


section > div.content > div{
    max-width:1500px;
    margin:0 auto;
    box-sizing:border-box;
    padding:0 20px;
}

div.content div.title > div.description{
    position:relative;
    width:fit-content;
    text-align:center;
    font-size:clamp(16px, 5vw, 24px);
    font-weight:600;
    line-height:1.5;
    letter-spacing:-0.03em;
    margin:8px auto;
}
div.content div.title > div.description div.text{
    position:relative;
    z-index:1;
}

div.content div.title > div.description.case-2{
    font-size:clamp(16px, 7vw, 32px);
    line-height:1.34;
    font-weight:700;
    margin-top:14px;
}
div.content div.title > div.description.case-3{
    font-size:clamp(16px, 6.8vw, 29px);
    letter-spacing:-0.05em;
    font-weight:700;
    margin:8px auto 2px;
}

div.content div.title > div.description em{
    background:var(--primary-gradient);
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
    background-clip:text;
}
div.content div.title h1,
div.content div.title h2{
    position:relative;
    text-align:center;
    letter-spacing:-0.02em;
}

div.content div.title h1 span.linebreak,
div.content div.title h2 span.linebreak{
    display:block;
    position:relative;
    width:fit-content;
    margin:0 auto;
    line-height:1.2;
}

div.content div.title h2 span.linebreak{
    line-height:1.3;
}

div.content div.title h1{
    font-size:clamp(32px, 11vw, 48px);
    font-weight:800;
}
div.content div.title h1.case-2{
    font-size:clamp(32px, 10vw, 48px);
    font-weight:800;
}
div.content div.title h1.case-3{
    font-size:clamp(24px, 9vw, 42px);
    /*font-size:clamp(24px, 10vw, 42px);*/
    font-weight:800;
}
div.content div.title h2 {
    font-size: clamp(20px, 8.2vw, 38px);
    font-weight: 600;
}

div.content div.title h1 strong,
div.content div.title h2 strong{
    font-weight:inherit;
}
div.content div.title h1 em,
div.content div.title h2 em{
    background:var(--primary-gradient);
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
    background-clip:text;
}

div.content div.title h1 em.accent,
div.content div.title h2 em.accent{
    background:var(--accent-gradient);
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
    background-clip:text;
}

div.content div.title .relative{
    position:relative;
    z-index:1;
}

div.content div.title div.emoji{
    position:absolute;
    top: clamp(-18px, -3vw, -5px);
    right: clamp(-76px, -16vw, -10px);
    width: clamp(12px, 18vw, 84px);
    aspect-ratio:1 / 1;
    z-index:0;
    background-size:cover;
}
div.content div.title div.emoji.case-2{
    right: auto;
    top:auto;
    position:relative;
    width: clamp(12px, 35vw, 140px);
    margin:0 auto 22px;
}
div.content div.title div.emoji.case-3{
    right: auto;
    top:auto;
    position:relative;
    width: clamp(12px, calc(100% - 16px), 380px);
    aspect-ratio:970 / 562;
    margin:clamp(22px, 10vw, 44px) auto;
}
div.content div.title div.emoji.thinking-face{
    background-image:url('../img/thinking_face.webp');
}
div.content div.title div.emoji.smiling-face-with-hearts{
    background-image:url('../img/smiling_face_with_hearts.webp');
}
div.content div.title div.emoji.speak-no-evil-monkey{
    background-image:url('../img/speak_no_evil_monkey.webp');
}
div.content div.title div.emoji.hundred-points{
    background-image:url('../img/hundred_points.webp');
}
div.content div.title div.emoji.real-money{
    background-image:url('../img/money-alt.svg');
}

div.content.hero{
    padding:70px 0 100px;
    overflow:hidden;
}

.personalized-consulting > div{
    margin:60px auto 0;
    padding:40px 0 16px;
    border-radius:24px;
    max-width:500px;
    box-sizing:border-box;

}
.personalized-consulting .pc-data{
    display:none;
}
.personalized-consulting .pc-stage{
    display:flex;
    flex-direction:column;
    background:var(--grey-gradient);
    align-items:center;
    gap:10px;

}
.personalized-consulting .pc-bubble-track{
    position:relative;
    display:flex;
    justify-content:center;
}

.personalized-consulting .pc-bubble{
    position:relative;
    z-index:2;
    background:#fff;
    border-radius:16px;
    padding:24px 40px;
    text-align:center;
    white-space:nowrap;
    box-sizing:border-box;
    will-change:transform;
    transform:translateY(0);
    transition:transform 0.55s cubic-bezier(0.34, 1.56, 0.64, 1);
    box-shadow:0 -4px 20px rgba(0,0,0,0.03);
}
.personalized-consulting .pc-bubble.pc-down{
    transform:translateY(20px);
    transition:transform 0.25s cubic-bezier(0.55, 0, 1, 0.45);
}
.personalized-consulting .pc-bubble.pc-up{
    transform:translateY(0);
    transition:transform 0.55s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.personalized-consulting .pc-bubble::after{
    content:'';
    position:absolute;
    bottom:-12px;
    left:50%;
    margin-left:-12px;
    width:24px;
    height:24px;
    background:#fff;
    border-radius:0 0 6px 0;
    transform:rotate(45deg);
}

.personalized-consulting .pc-emoji{
    position:relative;
    z-index:1;
    width:170px;
    background-size:cover;
    aspect-ratio: 1 / 1;
}

.personalized-consulting .pc-emoji.partying-face{
    background-image:url('../img/partying_face.svg');
}
.personalized-consulting .pc-emoji.smiling-heart{
    background-image:url('../img/smiling_face_with_hearts.svg');
}
.personalized-consulting .pc-emoji.partying-face-animated{
    background-image:url('../img/partying_face_animated.webp');
}
.personalized-consulting .pc-emoji.smiling-heart-animated {
    background-image:url('../img/smiling_face_with_hearts.png');
}

.personalized-consulting .pc-bubble dl{
    margin:0;
    padding:0;
}
.personalized-consulting .pc-bubble dt{
    margin-bottom:3px;
}
.personalized-consulting .pc-bubble dt ~ dt{
    margin-top:14px;
}
.personalized-consulting .pc-bubble dt{
    font-size:clamp(10px, 4vw, 16px);
    font-weight:400;
    color:var(--grey-text-400);

}
.personalized-consulting .pc-value{
    margin:0;
    font-size:clamp(18px, 8vw, 32px);
    font-weight:700;
    color:var(--base-text);
    display:flex;
    align-items:baseline;
    justify-content:center;
    white-space:nowrap;
    gap:2px;
    min-height:1.3em;
}
.personalized-consulting .pc-value .slot-nums{
    display:inline-flex;
    overflow:hidden;
    align-items:baseline;
}
.personalized-consulting .pc-value .slot-fixed{
    flex-shrink:0;
}
.personalized-consulting .pc-value .slot-digit{
    display:inline-block;
    overflow:hidden;
    height:1.3em;
    line-height:1.3;
    vertical-align:baseline;
    --slot-fade:0%;
    -webkit-mask-image:linear-gradient(to bottom,
        transparent 0%, #000 var(--slot-fade), #000 calc(100% - var(--slot-fade)), transparent 100%);
    mask-image:linear-gradient(to bottom,
        transparent 0%, #000 var(--slot-fade), #000 calc(100% - var(--slot-fade)), transparent 100%);
    transition:--slot-fade 0.2s ease;
}
.personalized-consulting .pc-value .slot-digit.is-spinning{
    --slot-fade:35%;
}
.personalized-consulting .pc-value .slot-digit .slot-reel{
    display:flex;
    flex-direction:column;
    will-change:transform;
}
.personalized-consulting .pc-value .slot-digit .slot-reel span{
    display:block;
    height:1.3em;
    line-height:1.3;
    text-align:center;
}

.product-list-selector{
    display:flex;
    align-items:center;
    gap:14px;
    max-width:500px;
    margin:50px auto 0;
    padding:16px 26px;
    box-sizing:border-box;
}
.product-list-selector > li:first-child{
    margin-right:auto;
}
.product-list-selector > li.has-mini-tip{
    position:relative;
}
/* .f-options { display:none } → form.css 에 정의 */

.product-list-wrap{
    padding:0 !important;
    max-width:unset !important;
}

.product-list{
    padding:80px 0;
    position:relative;
    background-color: var(--grey-bg-500);
}

.product-list div.product-list-item-wrap{
    background-color:var(--grey-bg-500);
}

.product-list ul.product-list-item{
    display:flex;
    flex-direction:column;
    gap:16px;
    padding:0 20px;
    max-width:500px;
    margin:0 auto;
    box-sizing:border-box;
    transition:filter 0.2s ease, opacity 0.2s ease;
}

/* ── 로딩 상태 ── */
.product-list ul.product-list-item.is-loading{
    filter:blur(3px);
    opacity:0.5;
    pointer-events:none;
}

.product-list ul.product-list-item .skeleton-card{
    display:flex;
    flex-direction:column;
    gap:20px;
    background:#fff;
    border-radius:12px;
    padding:26px 32px;
}
.product-list ul.product-list-item .skeleton-line{
    height:14px;
    border-radius:7px;
    background:linear-gradient(90deg, #eee 25%, #e0e0e0 50%, #eee 75%);
    background-size:200% 100%;
    animation:skeletonShimmer 1.5s ease infinite;
}
.product-list ul.product-list-item .skeleton-line.w60{ width:60%; }
.product-list ul.product-list-item .skeleton-line.w80{ width:80%; }
.product-list ul.product-list-item .skeleton-line.w40{ width:40%; }
.product-list ul.product-list-item .skeleton-line.h20{ height:20px; border-radius:10px; }
.product-list ul.product-list-item > li{
    display:flex;
    flex-direction:column;
    gap:22px;
    background-color:#fff;
    border-radius:12px;
    padding:26px clamp(22px, 4vw, 32px);;
}

.product-list ul.product-list-item > li div.title{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:20px;
}

.product-list ul.product-list-item > li div.title div.isp-name{
    font-weight:400;
    white-space:nowrap;
    color:var(--grey-text-300);
}

.product-list ul.product-list-item > li div.title ul.label{
    align-items:center;
    display:flex;
    gap:4px;
    flex-wrap:wrap;
    justify-content:flex-end;
}
.product-list ul.product-list-item > li div.title ul.label > li{
    border-radius:6px;
    background-color:var(--accent-bg);
    font-size:11px;
    padding:6px 8px;
    white-space:nowrap;
    color:#fff;
    font-weight:500;
}

.product-list ul.product-list-item > li ul.benefit-list{
    display:flex;
    flex-direction:column;
    gap:12px;
}
.product-list ul.product-list-item > li ul.benefit-list > li{
    display:flex;
    justify-content:space-between;
    gap:12px;
}
.product-list ul.product-list-item > li ul.benefit-list > li div.label{
    min-width:80px;
}
.product-list ul.product-list-item > li ul.benefit-list > li div.value{
    display:flex;
    gap:2px;
    font-variant-numeric:tabular-nums;
    font-weight:700;
}
.product-list ul.product-list-item > li ul.promotion{
    display:flex;
    flex-direction:column;
    gap:6px;
    border-top:1px solid var(--grey-line-200);
    padding-top:18px;
}
.product-list ul.product-list-item > li ul.promotion > li{
    display:flex;
    gap:6px;
    align-items:center;
    font-size:12px;
    line-height: 1.34;
}
.product-list ul.product-list-item > li ul.promotion > li::before{
    content:"";display:inline-block;width:2px;height:2px;background:var(--base-text);
}

div.key-benefit{
    padding:80px 0;
    max-width:600px;
    margin:0 auto;
}
div.key-benefit div.title h2{
    text-align:left;
}
div.key-benefit div.title h2 span.linebreak{
    margin:0;
}

div.key-benefit-list > ul{
    display:grid;
    grid-template-columns: repeat(12, 1fr);
    gap:12px;
    margin:80px auto 30px;
}
div.key-benefit-list > ul > li{
    position:relative;
    letter-spacing:0.02em;
    color:var(--base-text);
    padding:26px 10px 26px 20px;
    border-radius:12px;
    background:var(--grey-bg-400);
    grid-column:span 4;
    line-height:1.24;
    font-weight:600;
}
div.key-benefit-list > ul > li.no-overflow{
    overflow: hidden;
}
div.key-benefit-list > ul > li:nth-child(1){
    background:var(--accent-gradient) !important;
    color:#fff;
}
div.key-benefit-list > ul > li:nth-child(2){
    background:var(--semi-black-gradient) !important;
    color:#fff;
}
div.key-benefit-list > ul > li.accent-bg{
    background:var(--accent-gradient) !important;
    color:#fff;
}
div.key-benefit-list > ul > li.black-bg{
    background:var(--semi-black-gradient) !important;
    color:#fff;
}
div.key-benefit-list > ul > li.primary-bg{
    background:var(--primary-gradient) !important;
    color:#fff;
}
div.key-benefit-list > ul > li.grey{
    background:var(--grey-bg-300) !important;
    color:inherit;
    padding:26px;
}
div.key-benefit-list > ul > li.no-bg{
    background:none !important;
    padding:0;
    color:inherit;
}
div.key-benefit-list > ul > li:nth-child(1){
    grid-column: span 12;
}
div.key-benefit-list > ul > li:nth-child(2){
    grid-column: span 12;
}
div.key-benefit-list > ul > li:nth-child(3){
    grid-column: span 12;
}
div.key-benefit-list > ul > li:nth-child(4){
    grid-column: span 12;
}
div.key-benefit-list > ul > li:nth-child(5){
    grid-column: span 12;
}
div.key-benefit-list .linebreak{
    display:block;
}
div.key-benefit-list div.fixed-money-img-alt{
    position:absolute;
    top:60%;
    right:-42%;
    width:clamp(100px, 100%, 630px);
    aspect-ratio:964.58 / 556.82;
    background-image:url('../img/money-alt.svg');
    filter: drop-shadow(7px 10px 7px rgba(0,0,0,0.12));
    background-size:contain;
    background-repeat:no-repeat;
}
div.key-benefit-list div.agent-avatar{
    position:absolute;
    bottom:0.2rem;
    right:-0.5rem;
    height:80%;
    aspect-ratio:306 / 370;
    background-image:url('../img/agent-avatar.png');
    background-size:contain;
    background-repeat:no-repeat;
    z-index:0;
    transform-origin:center bottom;
}

div.key-benefit-list div.compare-chart{
    position:absolute;
    bottom:0;
    right:0;
    display:flex;
    align-items:end;
    justify-content:space-between;
    padding:0 20px;
    gap: clamp(8px, 2vw, 24px);
    width:clamp(120px, 50%, 300px);
    aspect-ratio: 1 / 0.64;
    overflow:hidden;
}
div.key-benefit-list div.compare-chart div.bar{
    display:flex;
    justify-content: center;
    border-radius:12px 12px 0 0;
    background:#fff;
    width:100%;
}

div.key-benefit-list div.compare-chart div.bar.bar-before {
    height:100%;
}
div.key-benefit-list div.compare-chart div.bar.bar-after {
    height:100%;
}
div.key-benefit-list.is-visible div.compare-chart div.bar.bar-after {
    animation: barShrink 0.6s 0.3s ease-out both;
}

div.key-benefit-list div.compare-chart div.bar.bar-after{
    position:relative;
}

div.key-benefit-list div.compare-chart .dimension-line{
    position:absolute;
    left:50%;
    bottom:calc(100% + 6px);
    translate:-50% 0;
    width:1.5px;
    height:calc(100% * 60 / 40 - 8px);
    box-sizing:border-box;
    padding:4px 0;
    background:repeating-linear-gradient(
        to bottom,
        rgba(255,255,255,0.7) 0px,
        rgba(255,255,255,0.7) 3px,
        transparent 3px,
        transparent 6px
    );
    transform:scaleY(0);
    transform-origin:top;
}

div.key-benefit-list div.compare-chart .dimension-line::before{
    content:'';
    position:absolute;
    left:50%;
    top:0;
    translate:-50% -50%;
    width:20px;
    height:1.5px;
    background:rgba(255,255,255,0.7);
    transform:scaleX(0);
}

div.key-benefit-list div.compare-chart .dimension-line::after{
    content:'';
    position:absolute;
    left:50%;
    bottom:0;
    translate:-50% 50%;
    width:20px;
    height:1.5px;
    background:rgba(255,255,255,0.7);
    transform:scaleX(0);
}
div.key-benefit-list.is-visible div.compare-chart .dimension-line{
    animation:dimensionLineIn 0.4s 0.9s ease-out both;
}
div.key-benefit-list.is-visible div.compare-chart .dimension-line::before,
div.key-benefit-list.is-visible div.compare-chart .dimension-line::after{
    animation:dimensionCapIn 0.25s 1.3s ease-out both;
}

div.key-benefit-list div.compare-chart div.bar div.title{
    color: var(--base-text);
    font-size:clamp(11px, 1vw, 16px);
    margin-top:10px;
}

div.key-benefit-list div.label{
    font-size:clamp(12px, 5.3vw, 24px);
    position:relative;
    z-index:1;
}
div.key-benefit-list div.description{
    margin:0.4rem 0;
    font-size:10px;
    color:rgba(255,255,255,0.8);
}
div.key-benefit-list div.value div.number{
    margin-top:2rem;
    font-weight:700;
    font-size:clamp(16px, 6.9vw, 34px);
}
div.key-benefit-list div.value div.number.top{
    margin-top:0;
    margin-bottom:6rem;
}
div.signup-process,
div.signup-process-alt{
    background:var(--grey-bg-400);
}
div.signup-process-alt {
    padding-top: 80px;
    position:relative;
    overflow:hidden;
}

div.signup-process-phone-wrap{
    position:relative;
}

div.signup-process .signup-process-sticky{
    position:sticky;
    top:0;
    text-align:center;
    padding-top:80px;
}
div.signup-process .signup-process-sticky > .title{
    margin-bottom:4rem;
}
div.signup-process-alt > .title{
    margin-bottom:4rem;
}
div.signup-process .phone-frame,
div.signup-process-alt .phone-frame{
    width:280px;
    height:520px;
    margin:0 auto;
    background:#1a1a1a;
    border-radius:44px 44px 0 0;
    padding:8px 8px 0;
    box-sizing:border-box;
    box-shadow:0 -4px 20px rgba(0,0,0,0.16);
    container-type:inline-size;
    font-weight:500;
    font-family:'Pretendard',나눔고딕,'Nanum Gothic',Malgun Gothic,맑은고딕,굴림,돋움,Dotum,Helvetica,AppleSDGothicNeo,sans-serif;
}
div.signup-process .phone-screen,
div.signup-process-alt .phone-screen{
    position:relative;
    width:100%;
    height:100%;
    background:var(--it-gradient);
    border-radius:36px 36px 0 0;
    overflow:hidden;
}
div.signup-process .phone-screen::before,
div.signup-process-alt .phone-screen::before{
    content:'';
    position:absolute;
    top:10px;
    left:50%;
    transform:translateX(-50%);
    width:90px;
    height:25px;
    background:#1a1a1a;
    border-radius:14px;
    z-index:1;
}
div.signup-process .phone-statusbar,
div.signup-process-alt .phone-statusbar{
    position:absolute;
    top:0;
    left:0;
    right:0;
    height:45px;
    z-index:1;
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:0 8.4cqi;
    box-sizing:border-box;
    list-style:none;
    margin:0;
}
div.signup-process .phone-statusbar .time,
div.signup-process-alt .phone-statusbar .time{
    font-size:4cqi;
    font-weight:700;
    color:#1a1a1a;
    letter-spacing:-0.02em;
}
div.signup-process .phone-statusbar .status-icons,
div.signup-process-alt .phone-statusbar .status-icons{
    display:flex;
    align-items:center;
    gap:2cqi;
    color:#1a1a1a;
}
div.signup-process .phone-statusbar .status-icons .signal,
div.signup-process-alt .phone-statusbar .status-icons .signal{
    width:5cqi;
    height:auto;
    fill:#1a1a1a;
}
div.signup-process .phone-statusbar .status-icons .battery,
div.signup-process-alt .phone-statusbar .status-icons .battery{
    width:10cqi;
    height:auto;
}

@media (min-width:768px){
    div.signup-process .phone-frame,
    div.signup-process-alt .phone-frame{
        width:390px;
        height:760px;
        border-radius:56px 56px 0 0;
        padding:12px 12px 0;
    }
    div.signup-process .phone-screen,
    div.signup-process-alt .phone-screen{
        border-radius:44px 44px 0 0;
    }
    div.signup-process .phone-screen::before,
    div.signup-process-alt .phone-screen::before{
        top:14px;
        width:120px;
        height:32px;
        border-radius:16px;
    }
    div.signup-process .phone-statusbar,
    div.signup-process-alt .phone-statusbar{
        height:60px;
    }
}

div.signup-process .signup-process-list,
div.signup-process-alt .signup-process-list{
    position:absolute;
    top:14cqi;
    left:0;
    right:0;
    bottom:0;
    padding:4cqi;
    box-sizing:border-box;
    overflow:hidden;
}
div.signup-process .signup-process-list ul,
div.signup-process-alt .signup-process-list ul{
    display:flex;
    flex-direction:column;
    gap:0;
    margin:0;
    padding:0;
    list-style:none;
    transition:transform 0.4s ease;
}
div.signup-process .signup-process-list li,
div.signup-process-alt .signup-process-list li{
    background:rgba(255,255,255,0.55);
    backdrop-filter:blur(40px) saturate(200%) brightness(1.1);
    -webkit-backdrop-filter:blur(40px) saturate(200%) brightness(1.1);
    border:0.5px solid rgba(255,255,255,0.5);
    box-shadow:
        0 1px 4px rgba(0,0,0,0.06),
        inset 0 1px 0 rgba(255,255,255,0.6),
        inset 0 -0.5px 0 rgba(255,255,255,0.2);
    border-radius:7.5cqi;
    padding:4.5cqi;
    display:flex;
    align-items:center;
    gap:3cqi;
    opacity:0;
    transform:translateY(-100%);
    transition:
        opacity 0.35s ease,
        transform 0.5s cubic-bezier(0.23, 1, 0.32, 1),
        max-height 0.4s cubic-bezier(0.23, 1, 0.32, 1),
        padding 0.4s cubic-bezier(0.23, 1, 0.32, 1),
        margin-top 0.4s cubic-bezier(0.23, 1, 0.32, 1);
    max-height:100px;
    overflow:hidden;
}
div.signup-process-alt .signup-process-list li.signup-process-target{
    box-shadow:0 -4px 20px rgba(26,26,26, calc(1 - var(--screen-shadow, 1)));
}

div.signup-process-alt .signup-process-list li + li{
    margin-top:2cqi;
}
div.signup-process-alt .signup-process-list li:last-child{
    transform-origin:center center;
    overflow:visible;
    position:relative;
    z-index:2;
}
div.content.signup-process-alt::after{
    content:'';
    position:absolute;
    top:0;left:0;right:0;bottom:0;
    background:rgba(0,0,0, calc(1 - var(--screen-dim, 1)));
    backdrop-filter:blur(var(--screen-blur, 0px));
    -webkit-backdrop-filter:blur(var(--screen-blur, 0px));
    pointer-events:none;
    z-index:1;
    transition:backdrop-filter 0.15s ease, background 0.15s ease;
}
div.signup-process-alt .signup-process-list{
    overflow:visible;
}
div.signup-process-alt .phone-screen{
    overflow:visible;
}
div.signup-process-alt .phone-frame{
    overflow:visible;
}

div.signup-process .signup-process-list .indicator,
div.signup-process-alt .signup-process-list .indicator{
    width:10cqi;
    height:10cqi;
    flex-shrink:0;
    display:flex;
    align-items:center;
    justify-content:center;
    background:var(--primary-gradient);
    color:#fff;
    font-size:3.5cqi;
    font-weight:700;
    border-radius:22%;
}
div.signup-process .signup-process-list .icon,
div.signup-process-alt .signup-process-list .icon{
    width:10cqi;
    height:10cqi;
    flex-shrink:0;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:6cqi;
    border-radius:22%;
    background-size:82%;
    background-position:center;
    background-repeat:no-repeat;
}
div.signup-process .signup-process-list .icon.sms,
div.signup-process-alt .signup-process-list .icon.sms{
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='white'%3E%3Cpath d='M16 3C8.82 3 3 7.92 3 14c0 3.37 1.78 6.38 4.57 8.47L6 27.5c-.12.46.34.86.78.66L12.5 25.5c1.12.32 2.28.5 3.5.5 7.18 0 13-4.92 13-11S23.18 3 16 3z'/%3E%3C/svg%3E") no-repeat center / 82%, linear-gradient(180deg, #5cf577 0%, #0dbd2c 100%);
}
div.signup-process .signup-process-list .icon.phone,
div.signup-process-alt .signup-process-list .icon.phone{
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M20.01 15.38c-1.23 0-2.42-.2-3.53-.56a.977.977 0 00-1.01.24l-1.57 1.97c-2.83-1.35-5.48-3.9-6.89-6.83l1.95-1.66c.27-.28.35-.67.24-1.02-.37-1.11-.56-2.3-.56-3.53 0-.54-.45-.99-.99-.99H4.19C3.65 3 3 3.24 3 3.99 3 13.28 10.73 21 20.01 21c.71 0 .99-.63.99-1.18v-3.45c0-.54-.45-.99-.99-.99z'/%3E%3C/svg%3E") no-repeat center / 82%, linear-gradient(180deg, #5ac8fa 0%, #007aff 100%);
}
div.signup-process .signup-process-list .icon.bank,
div.signup-process-alt .signup-process-list .icon.bank{
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='none' stroke='white' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='5,10 10,24 16,10 22,24 27,10'/%3E%3Cline x1='2.5' y1='16' x2='6.2' y2='16'/%3E%3Cline x1='25.8' y1='16' x2='29.5' y2='16'/%3E%3C/svg%3E") no-repeat center / 82%, linear-gradient(180deg, #ffb340 0%, #ff9500 100%);
}
div.signup-process .signup-process-list .text-wrap,
div.signup-process-alt .signup-process-list .text-wrap{
    flex:1;
    min-width:0;
    color:#1a1a1a;
    font-size:4.8cqi;
    line-height:1.3;
    letter-spacing:-0.02em;
}
div.signup-process .signup-process-list .title,
div.signup-process-alt .signup-process-list .title{
    font-weight:700;
}

div.credibility{
    padding:100px 0;
    background:var(--black-gradient);
    color:#fff;
}

div.credibility > div{
    max-width:600px !important;
}


div.credibility div.title h2{
    text-align:left;
}
div.credibility div.title h2 span.linebreak{
    margin:0;
}


div.trust-metric ul{
    display:grid;
    grid-template-columns: repeat(14, 1fr);
    gap:12px;
    margin:80px auto 30px;
}
div.trust-metric ul li{
    position:relative;
    letter-spacing:0.02em;
    color:#fff;
    padding:26px 10px 26px 20px;
    border-radius:12px;
    background:var(--semi-black-gradient);
    grid-column:span 4;
    line-height:1.24;
    font-weight:600;
}
div.trust-metric ul li.rgt{
    padding:26px 20px 26px 20px;
}
div.trust-metric ul li.rgt .value{
    text-align:right;
}
div.trust-metric ul li.no-overflow{
    overflow: hidden;
}
div.trust-metric ul li:nth-child(1){
    grid-column: span 8;
}
div.trust-metric ul li:nth-child(2){
    grid-column: span 6;
}
div.trust-metric ul li:nth-child(3){
    grid-column: span 14;
}
div.trust-metric ul li:nth-child(4){
    grid-column: span 7;
}
div.trust-metric ul li:nth-child(5){
    grid-column: span 7;
}
div.trust-metric ul li:nth-child(6){
    grid-column: span 14;
}
div.trust-metric .linebreak{
    display:block;
}
div.trust-metric div.label{
    font-size:clamp(12px, 5.3vw, 24px);
    position:relative;
    z-index:1;
}
div.trust-metric div.description{
    margin:0.4rem 0;
    font-size:10px;
    color:rgba(255,255,255,0.5);
    position:relative;
    z-index:1;
}
div.trust-metric div.value div.number{
    margin-top:2rem;
    font-weight:700;
    font-size:clamp(16px, 6.9vw, 34px);
    position:relative;
    z-index:1;
}
div.trust-metric div.value div.number.top{
    margin-top:0;
    margin-bottom:4rem;
}
div.trust-metric div.chest{
    position:absolute;
    bottom:0;
    right:-0.5rem;
    height:80%;
    aspect-ratio:224 / 263;
    background-image:url('../img/chest.svg');
    background-size:contain;
    background-repeat:no-repeat;
    z-index:0;
    transform-origin:center bottom;
}
div.trust-metric li.company-bg {
    display:flex;
    align-items:end;
    aspect-ratio: 1150 / 600;
    box-sizing: border-box;
    position:relative;
    overflow:hidden;
}
div.trust-metric li.company-bg .bg{
    position:absolute;
    top:0;left:0;right:0;bottom:0;
    background-image:url('../img/company-bg-alt.jpg');
    background-size:cover;
    background-repeat:no-repeat;
    z-index:0;
}

div.content-hub{
    padding:100px 0;
}
div.content-hub > div{
    max-width:600px !important;
    margin:0 auto;
}
div.content-hub-list > ul{
    display:flex;
    flex-direction:column;
    gap:26px;
    margin:80px 0 30px;
}
div.content-hub-list > ul > li a{
    display:flex;
    align-items:end;
    gap:12px;
    padding:32px;
    border-radius:12px;
    text-decoration:none;
    transition:transform 0.2s ease;
    background-color:var(--grey-bg-400);
}
div.content-hub-list > ul > li a:hover{
    transform:translateY(-2px);
}
div.content-hub-list > ul > li a::after{
    content:'';
    position:relative;
    bottom:-1px;
    flex-shrink:0;
    width:24px;
    aspect-ratio:1/1;
    margin-left:auto;
    -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='4' y1='12' x2='20' y2='12'/%3E%3Cpolyline points='14 6 20 12 14 18'/%3E%3C/svg%3E") center / contain no-repeat;
    mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='4' y1='12' x2='20' y2='12'/%3E%3Cpolyline points='14 6 20 12 14 18'/%3E%3C/svg%3E") center / contain no-repeat;
    background-color:currentColor;
    transition:transform 0.2s ease, opacity 0.2s ease;
}
div.content-hub-list > ul > li.case-certification a{
    background-image:url('../img/hundred_points.webp');
    background-repeat:no-repeat;
    background-size:clamp(1px, 20vw, 100px);
    background-position:right 30px top 14px;
}
div.content-hub-list > ul > li a div.content{
    display:flex;
    flex-direction:column;
    flex:1;
    gap:34px;
    line-height:1.4;
}
div.content-hub-list > ul > li a div.content div.title strong{
    font-weight:600;
    font-size:clamp(12px, 5.3vw, 24px);
}
div.your-benefit{
    padding:100px 0;
    background: var(--grey-bg-400);
}
div.ask-list{
    margin:3rem auto 0;
    display:flex;
    flex-direction:column;
    gap:10px;
    overflow:hidden;
    -webkit-mask-image:linear-gradient(to right, transparent 0%, #000 8%, #000 92%, transparent 100%);
    mask-image:linear-gradient(to right, transparent 0%, #000 8%, #000 92%, transparent 100%);
}
div.ask-list .row{
    display:flex;
    gap:12px;
    width:max-content;
}
div.ask-list .row-left{
    animation:askScrollLeft 20s linear infinite;
}
div.ask-list .row-right{
    animation:askScrollLeft 25s linear infinite;
}
div.ask-list ul{
    list-style:none;
    margin:0;
    padding:0;
    display:flex;
    gap:12px;
    flex-shrink:0;
}
div.ask-list li{
    background:var(--grey-bg-400);
    color:var(--base-text);
    padding:12px 22px;
    font-size:clamp(12px, 3.5vw, 15px);
    font-weight:500;
    letter-spacing:-0.02em;
    line-height:1.4;
    cursor:default;
    white-space:nowrap;
    flex-shrink:0;
    border-radius:20px;
}

div.search-window.animate-box{
    opacity:1;
    visibility:visible;
}
div.search-window > div.box{
    margin:3rem auto;
    position:relative;
    max-width:500px;
}
div.search-window .search-bar{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:2px;
    padding:20px 30px;
    border-radius:26px;
    box-sizing:border-box;
    position:relative;
    overflow:hidden;
}
div.search-window .search-bar::before{
    content:'';
    position:absolute;
    top:0;
    left:0;
    width:62px;
    height:100%;
    background:var(--grey-bg-400);
    border-radius:31px;
    transform:scale(0);
    transform-origin:left center;
}
div.search-window .search-bar .search-typing,
div.search-window .search-bar .search-cursor{
    opacity:0;
    position:relative;
    z-index:1;
}
div.search-window.is-visible .search-bar::before{
    animation:searchDot 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) both,
              searchExpand 0.6s cubic-bezier(0.23, 1, 0.32, 1) 0.3s both;
}
div.search-window.is-visible .search-bar .search-typing,
div.search-window.is-visible .search-bar .search-cursor{
    opacity:1;
    transition:opacity 0.3s ease 0.9s;
}
div.search-window .search-typing{
    font-size:clamp(12px, 5.3vw, 24px);
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    line-height:1.4;
}
div.search-window .search-typing::after{
    content:'\200b';
}
div.search-window .search-cursor{
    width:clamp(1.5px, 0.4vw, 2px);
    height:clamp(12px, 5vw, 22px);
    background:var(--base-text);
    flex-shrink:0;
}
div.search-window.is-visible .search-cursor{
    animation:cursorBlink 0.9s step-end 0.9s infinite;
}
div.search-window .search-items{
    display:none;
}

div.search-window .emoji{
    position:relative;
    z-index:1;
    width:150px;
    margin:0 auto -1rem;
    background-size:cover;
    aspect-ratio: 1 / 1;
    background-image:url('../img/face_with_monocle.webp');
}


div.consulting-case{
    overflow-x:clip;
}

div.consulting-case ul.case-data{
    display:none;
}

div.consulting-case .case-orbit{
    position:relative;
    display:flex;
    justify-content:center;
    align-items:center;
    width:clamp(280px, 70vw, 360px);
    aspect-ratio:1 / 1;
    margin:70px auto;
}

div.consulting-case .orbit-ring{
    position:absolute;
    inset:0;
    border:none;
    border-radius:50%;
    animation:orbitSpin 50s linear infinite;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Ccircle cx='100' cy='100' r='96' fill='none' stroke='rgba(0,0,0,0.28)' stroke-width='1.4' stroke-linecap='round' stroke-dasharray='0.1 9.96'/%3E%3C/svg%3E");
    background-size:100% 100%;
}

div.consulting-case .orbit-icon{
    position:absolute;
    width:0px;
    height:0px;
    margin:-10px 0 0 -10px;
    background:rgba(255,255,255,0.7);
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:0px;
    color:rgba(0,0,0,0.24);
    /*box-shadow:0 2px 8px rgba(0,0,0,0.09);*/
    z-index:2;
    animation:orbitCounterSpin 50s linear infinite;
    transition:
        width 0.8s cubic-bezier(0.34, 1.56, 0.64, 1),
        height 0.8s cubic-bezier(0.34, 1.56, 0.64, 1),
        margin 0.8s cubic-bezier(0.34, 1.56, 0.64, 1),
        font-size 0.8s cubic-bezier(0.34, 1.56, 0.64, 1),
        background 0.8s ease,
        color 0.8s ease,
        box-shadow 0.8s ease;
}

div.consulting-case .oi-1{ top:2%;      left:50%;     }  /* 0°      */
div.consulting-case .oi-2{ top:20.04%;  left:87.51%;  }  /* 51.43°  */
div.consulting-case .oi-3{ top:60.67%;  left:96.80%;  }  /* 102.86° */
div.consulting-case .oi-4{ top:93.30%;  left:70.76%;  }  /* 154.29° */
div.consulting-case .oi-5{ top:93.30%;  left:29.24%;  }  /* 205.71° */
div.consulting-case .oi-6{ top:60.67%;  left:3.20%;   }  /* 257.14° */
div.consulting-case .oi-7{ top:20.04%;  left:12.49%;  }  /* 308.57° */

div.consulting-case .orbit-icon.is-pop{
    width:44px;
    height:44px;
    margin:-22px 0 0 -22px;
    font-size:20px;
    background:var(--case-color, var(--accent-bg));
    color:#fff;
    box-shadow:none;
}

div.consulting-case .orbit-center{
    position:relative;
    z-index:1;
}

div.consulting-case .speech-bubble{
    position:relative;
    width:100%;
    max-width:fit-content;
    box-sizing:border-box;
}

div.consulting-case .speech-bubble dl{
    margin:0;
    padding:0;
}
div.consulting-case .speech-bubble dt ~ dt{
    margin-top:16px;
}
div.consulting-case .speech-bubble dt{
    font-size:clamp(12px, 4.6vw, 18px);
    font-weight:400;
    text-align:center;
    color:var(--grey-text-400);
}
div.consulting-case .speech-bubble dd{
    margin:0;
    font-size:clamp(12px, 7.4vw, 32px);
    font-weight:700;
    color:var(--case-color, var(--base-text));
    display:flex;
    align-items:baseline;
    justify-content:center;
    white-space:nowrap;
    gap:4px;
    transition:color 0.4s ease;
}

div.consulting-case .speech-bubble dd .slot-nums{
    display:inline-flex;
    overflow:hidden;
    align-items:baseline;
    transition:width 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

div.consulting-case .speech-bubble dd .slot-fixed{
    flex-shrink:0;
}

@property --slot-fade {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 0%;
}
div.consulting-case .speech-bubble dd .slot-digit{
    display:inline-block;
    overflow:hidden;
    height:1.3em;
    line-height:1.3;
    vertical-align:baseline;
    --slot-fade:0%;
    -webkit-mask-image:linear-gradient(to bottom,
        transparent 0%, #000 var(--slot-fade), #000 calc(100% - var(--slot-fade)), transparent 100%);
    mask-image:linear-gradient(to bottom,
        transparent 0%, #000 var(--slot-fade), #000 calc(100% - var(--slot-fade)), transparent 100%);
    transition:--slot-fade 0.2s ease;
}
div.consulting-case .speech-bubble dd .slot-digit.is-spinning{
    --slot-fade:35%;
}
div.consulting-case .speech-bubble dd .slot-digit .slot-reel{
    display:flex;
    flex-direction:column;
    will-change:transform;
}
div.consulting-case .speech-bubble dd .slot-digit .slot-reel span{
    display:block;
    height:1.3em;
    line-height:1.3;
    text-align:center;
}

div.ask-anything{
    padding:0 0 80px 0;
}

div.wrong-plan{
    padding:80px 0 30px;
}
div.wrong-plan-case{
    max-width:600px !important;
}

div.wrong-plan-case ul{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:12px;
    margin: 80px auto 0;
}
div.wrong-plan-case ul > li{
    display:flex;
    position:relative;
    flex-direction:column;
    padding:26px 0 0;
    border-radius:12px;
    background:var(--grey-bg-500);
    font-weight: 500;
    font-size: clamp(16px, 5vw, 25px);
    line-height:1.24;
    overflow:hidden;
}
div.wrong-plan-case ul > li span.linebreak{
    display:block;
}

div.wrong-plan-case ul > li > div.description{
    text-align:center;
    word-break: break-all;
}
div.wrong-plan-case ul > li > div.emoji{
    width:clamp(10px, 32vw, 170px);
    margin-left: auto;
    aspect-ratio:1 / 1;
    background-image:url('../img/face_with_raised_eyebrow.webp');
    background-size:contain;
    background-repeat:no-repeat;
    position:relative;
    right:calc(100% - 110%);
    bottom:calc(100% - 110%);
}
div.wrong-plan-case ul > li.long-wording{
    font-size: clamp(12px, 4vw, 18px);
    padding-left:16px;
    padding-right:16px;
    text-align:left;
    box-sizing:border-box;
    background:var(--black-gradient);
    color:#fff;
    font-weight:400;
}
div.wrong-plan-case ul > li.long-wording > div.description {
    text-align:left;

}
div.wrong-plan-case ul > li.long-wording > div.emoji {
    position:absolute;
}

div.wrong-plan-case ul > li > div.emoji.case-1{
    background-image:url('../img/crying_cat.webp');
}
div.wrong-plan-case ul > li > div.emoji.case-2{
    background-image:url('../img/unamused_face.webp');
}
div.wrong-plan-case ul > li > div.emoji.case-3{
    background-image:url('../img/face_with_raised_eyebrow.webp');
}
div.wrong-plan-case ul > li > div.emoji.case-4{
    background-image:url('../img/speak_no_evil_monkey.webp');
}
div.wrong-plan-case ul > li > div.emoji.case-5{
    background-image:url('../img/exploding_head.webp');
}
div.wrong-plan-case ul > li > div.emoji.case-6{
    background-image:url('../img/pleading_face.webp');
}
div.wrong-plan-case ul > li > div.emoji.case-7{
    background-image:url('../img/skull.webp');
}
div.wrong-plan-case ul > li > div.emoji.case-8{
    background-image:url('../img/wilted_flower.webp');
}

div.testimonial {
    padding:120px 0;
    background: var(--black-gradient);
}
div.testimonial blockquote{
    max-width:600px !important;
    margin:0 auto;
    padding:0 40px;
    box-sizing:border-box;
    display:flex;
    flex-direction:column;
    gap:1.6rem;
}

div.testimonial blockquote{
    background:var(--white-gradient);
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
    background-clip:text;
}

div.testimonial blockquote p{
    font-size: clamp(12px, 7vw, 28px);
    font-weight: 400;
    line-height: 1.4;
}
div.testimonial blockquote cite{
    display:block;
    font-size:clamp(12px, 5vw, 19px);
    font-weight:400;
    font-style:normal;
}
div.last-nudge{
    padding:80px 0 30px;
}
div.last-nudge ul.last-momentum-list{
    display:flex;
    flex-direction:column;
    gap:clamp(10px, 2.6vw, 16px);
    width:min(100%, 600px);
    margin:0 auto 100px;
    padding:0 20px;
    box-sizing:border-box;
}
div.last-nudge ul.last-momentum-list > li{
    display:flex;
    position:relative;
    padding:32px 0;
    gap:2px;
    border-bottom:1px solid var(--grey-line-300);
    font-weight:600;
    font-size:clamp(12px, 5.3vw, 24px);
}

div.last-nudge ul.last-momentum-list > li::before{
    content:'';
    display:block;
    flex-shrink:0;
    align-self:center;
    width:clamp(9px, 2.5vw, 13px);
    height:clamp(16px, 4vw, 22px);
    margin-right:clamp(14px, 3.6vw, 18px);
    border-right:clamp(1px, 1.2vw, 6px) solid var(--accent-bg);
    border-bottom:clamp(1px, 1.2vw, 6px) solid var(--accent-bg);
    transform:translateY(-8%) rotate(45deg) scale(0.35);
    opacity:0;
    margin-left:10px;
    transform-origin:center center;
    box-sizing:border-box;
}
div.last-nudge ul.last-momentum-list > li.is-visible::before{
    animation:momentumCheckMark 0.32s cubic-bezier(0.22, 1, 0.36, 1) 0.12s forwards;
}

div.call-to-action{
    position:sticky;
    z-index:4;
    bottom:0;
    margin-bottom:80px;
    padding-bottom:env(safe-area-inset-bottom);
    transform:translateY(100%);
    opacity:0;
    pointer-events:none;
    transition:transform 0.35s ease, opacity 0.35s ease;
}
div.call-to-action.is-visible{
    transform:translateY(0);
    opacity:1;
    pointer-events:auto;
}

div.call-to-action .cta-tooltip{
    position:absolute;
    top:-14px;
    right:-6px;
    padding:5px 12px;
    background:#fff;
    border:1px solid var(--base-text);
    color:var(--base-text);
    font-size:12px;
    font-weight:600;
    line-height:1.4;
    border-radius:10px;
    white-space:nowrap;
    pointer-events:none;
}
div.call-to-action .cta-tooltip::before,
div.call-to-action .cta-tooltip::after{
    content:'';
    position:absolute;
    left:50%;
    translate:-50% 0;
    border-style:solid;
    border-color:transparent;
}
div.call-to-action .cta-tooltip::after{
    top:100%;
    border-width:5px;
    border-top-color:var(--base-text);
}
div.call-to-action .cta-tooltip::before{
    top:calc(100% - 1px);
    border-width:5px;
    border-top-color:#fff;
    z-index:1;
}
div.call-to-action ul{
    max-width:600px;
    display:flex;
    justify-content:center;
    gap:8px;
    margin:0 auto;
    padding:20px;
    box-sizing:border-box;
}
div.call-to-action ul > li{
    text-align:center;
    flex:auto;
}

div.call-to-action ul > li > a{
    position:relative;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    padding:20px 0;
    border-radius:16px;
    background:var(--accent-gradient);
    color:#fff;
    font-size:clamp(12px, 5.3vw, 22px);
    font-weight:600;
    transition:transform 0.2s ease;
}

div.call-to-action ul > li:nth-child(1) > a{
    background:var(--black-gradient);
}
@media screen and (min-width: 550px) {
    div.call-to-action ul > li:nth-child(1){
        display:none;
    }
}


div.call-to-action ul > li > a.icon::after{
    content:'';
    flex-shrink:0;
    width:24px;
    aspect-ratio:1/1;
    -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='4' y1='12' x2='20' y2='12'/%3E%3Cpolyline points='14 6 20 12 14 18'/%3E%3C/svg%3E") center / contain no-repeat;
    mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='4' y1='12' x2='20' y2='12'/%3E%3Cpolyline points='14 6 20 12 14 18'/%3E%3C/svg%3E") center / contain no-repeat;
    background-color:currentColor;
    transition:transform 0.25s ease;
}
div.call-to-action ul > li > a:hover::after{
    transform:translateX(4px);
}
div.content-hub-summary-list{
    color:var(--link-text);
}
div.content-hub-summary-list ul{
    display:flex;
    flex-direction:column;
    margin:0 auto;
    gap:12px;
    justify-content:center;
}
div.content-hub-summary-list ul > li > a{
    display:flex;
    width:fit-content;
    justify-content:center;
    align-items:center;
    margin:0 auto;
    font-size:18px;
    gap:6px;
    font-weight:600;
}
div.content-hub-summary-list ul > li > a i{
    font-size:1.2em;
}
div.content-hub-summary-list ul > li > a div.number{
    font-size:0.7em;
    opacity:0.7;
}
div.hero-cta-form{
    padding:0 20px;
    max-width:420px;
    font-weight:400;
    display:flex;
    flex-direction:column;
    gap:12px;
    margin:0 auto;
}
div.hero-cta-form.case-2{
    padding:40px 0 0;
    border-top:1px solid #2e2e2e;
}

div.hero-cta-form div.title{
    position:relative;
    font-size:clamp(16px, 7vw, 30px);
    margin-bottom:26px;
}
div.hero-cta-form div.small-description{
    color:var(--grey-text-500);
    display:flex;
    gap:2px;
}
div.hero-cta-form div.small-description em{
    color:var(--error-text);
}
div.hero-cta-form div.title ul{
    font-size:clamp(16px, 6vw, 30px);
}
div.hero-cta-form div.title div.icon {
    position: absolute;
    top:0;
    right:-14px;
    width:150px;
    aspect-ratio: 1 / 1;
    z-index: 0;
    background-size: cover;
    background-image: url('/assets/img/detective.webp');
}
div.hero-cta-form div.text-field{
    display:flex;
    flex-direction:column;
    gap:12px;
}
div.hero-cta-form div.chk-box{
    display:flex;
    align-items:center;
    gap:10px;
}

div.hero-cta-form div.consent-more{
    display:none;
    font-size:13px;
    color: var(--grey-text-300);
    line-height:1.45;
}

div.hero-cta-form .consent-more-btn{
    display: inline-block;
    padding: 4px 6px;
    font-size: 11px;
    border: 1px solid var(--grey-line-300);
    color: var(--grey-text-400);
    background-color: var(--grey-bg-500);
    border-radius: 6px;
}
div.hero-cta-form .submit-btn{
    display:flex;
    flex-direction:column;
}

div.hero-cta-form div.code{
    color:var(--error-text);
    line-height:3.45;
}
div.benefit-bubble-stack{
    position:relative;
    width:fit-content;
    margin:8px auto;
    padding-top:clamp(18px, 4vw, 22px);
    padding-bottom:clamp(4px, 2vw, 22px)
}

div.benefit-bubble-stack ul.benefit-bubble-list{
    position:relative;
    display:flex;
    flex-wrap:nowrap;
    justify-content:center;
    gap:clamp(4px, 1.4vw, 6px);
    white-space:nowrap;
    z-index:1;
}
div.benefit-bubble-stack ul.benefit-bubble-list > li{
    --bubble-tilt:0deg;
    --bubble-shift-x:0px;
    --bubble-shift-y:0px;
    position:relative;
    padding:clamp(13px, 3.4vw, 15px) clamp(13px, 5vw, 17px);
    border-radius:22px;
    background:#fff;
    color:var(--base-text);
    font-size:clamp(15px, 6vw, 20px);
    font-weight:500;
    line-height:1.2;
    white-space:nowrap;
    box-shadow:0 4px 24px rgba(0,0,0,0.12);
    transform-origin:center bottom;
    transform:translate(var(--bubble-shift-x), var(--bubble-shift-y)) rotate(var(--bubble-tilt));
}
div.benefit-bubble-stack ul.benefit-bubble-list > li:nth-child(1){
    --bubble-tilt:-4deg;
    --bubble-shift-x:clamp(-3px, -0.6vw, -1px);
    --bubble-shift-y:clamp(1px, 0.35vw, 2px);
}
div.benefit-bubble-stack ul.benefit-bubble-list > li:nth-child(2){
    --bubble-tilt:4deg;
    --bubble-shift-x:clamp(1px, 0.6vw, 3px);
    --bubble-shift-y:clamp(1px, 0.35vw, 2px);
}
div.benefit-bubble-stack ul.benefit-bubble-list > li::after{
    content:"";
    position:absolute;
    left:50%;
    bottom:-5px;
    width:10px;
    height:10px;
    background:#fff;
    transform:translateX(-50%) rotate(45deg);
    border-radius:2px;
}

/* ============================================
   @keyframes — animation.css 병합
   ============================================ */

@keyframes fadeIn {
    from { opacity:0; }
    to   { opacity:1; }
}

@keyframes fadeInUp {
    from { opacity:0; transform:translateY(50px); }
    to   { opacity:1; transform:translateY(0); }
}

@keyframes fadeInDown {
    from { opacity:0; transform:translateY(-50px); }
    to   { opacity:1; transform:translateY(0); }
}

@keyframes fadeInLeft {
    from { opacity:0; transform:translateX(-50px); }
    to   { opacity:1; transform:translateX(0); }
}

@keyframes fadeInRight {
    from { opacity:0; transform:translateX(50px); }
    to   { opacity:1; transform:translateX(0); }
}

@keyframes zoomIn {
    from { opacity:0; transform:scale(0.9); }
    to   { opacity:1; transform:scale(1); }
}

@keyframes revealMoney {
    from { opacity:0; transform:translate(-10%, -10%); }
    to   { opacity:1; transform:translate(0, -30%); }
}

@keyframes revealMoney-case-2 {
    from { opacity:0; transform:translate(50%, 50%); }
    to   { opacity:1; transform:translate(0, 0); }
}

@keyframes popIn {
    0%   { opacity:1; transform:scale(0.3); }
    70%  { transform:scale(1.06); }
    100% { opacity:1; transform:scale(1); }
}

@keyframes barShrink {
    from { height:100%; }
    to   { height:40%; }
}

@keyframes dimensionLineIn {
    0%   { transform:scaleY(0); }
    100% { transform:scaleY(1); }
}

@keyframes dimensionCapIn {
    0%   { transform:scaleX(0); }
    100% { transform:scaleX(1); }
}

/* iOS 알림 스타일 */
@keyframes iosNotification {
    0%   { opacity:0; transform:translateY(-100%) scale(0.8); }
    40%  { opacity:1; transform:translateY(6%) scale(1.02); }
    60%  { transform:translateY(-2%) scale(0.99); }
    80%  { transform:translateY(1%) scale(1.005); }
    100% { opacity:1; transform:translateY(0) scale(1); }
}

@keyframes selectorModalIn {
    from { opacity:0; transform:translate(-50%, -48%) scale(0.95); }
    to   { opacity:1; transform:translate(-50%, -50%) scale(1); }
}

@keyframes overlayFadeIn {
    from { opacity:0; }
    to   { opacity:1; }
}

@keyframes skeletonShimmer {
    0%   { background-position:200% 0; }
    100% { background-position:-200% 0; }
}

@keyframes askScrollLeft {
    0%   { transform:translateX(0); }
    100% { transform:translateX(calc(var(--scroll-width, -1000px) * -1)); }
}

@keyframes searchDot {
    0%   { transform:scale(0); }
    100% { transform:scale(1); }
}

@keyframes searchExpand {
    0%   { width:62px; border-radius:31px; }
    100% { width:100%; border-radius:26px; }
}

@keyframes cursorBlink {
    0%,100% { opacity:1; }
    50%     { opacity:0; }
}

@keyframes orbitSpin {
    to { transform:rotate(360deg); }
}

@keyframes orbitCounterSpin {
    to { transform:rotate(-360deg); }
}


@keyframes momentumCheckMark {
    0% {
        opacity:0;
        transform:translateY(-8%) rotate(45deg) scale(0.35);
    }
    65% {
        opacity:1;
        transform:translateY(-8%) rotate(45deg) scale(1.08);
    }
    100% {
        opacity:1;
        transform:translateY(-8%) rotate(45deg) scale(1);
    }
}