.clarity{
    --clarity-ink:#172338;
    --clarity-muted:#706d67;
    --clarity-gold:#a38654;
    --clarity-line:#d8d0c4;
    --clarity-paper:#f4efe7;
    --clarity-card:#faf7f1;

    background:var(--clarity-paper);
    color:var(--clarity-ink);
    min-height:100vh;
}

.clarity-shell{
    width:min(1180px,calc(100% - 48px));
    margin:0 auto;
}

.clarity-hero{
    padding:7.5rem 0 3rem;
}

.clarity-eyebrow{
    margin:0 0 1rem;
    font-size:.68rem;
    font-weight:700;
    letter-spacing:.18em;
    text-transform:uppercase;
    color:var(--clarity-gold);
}

.clarity-hero h1,
.clarity-step h2,
.clarity-success h1{
    font-family:Georgia,"Times New Roman",serif;
    color:var(--clarity-ink);
    font-weight:400;
    letter-spacing:-.045em;
}

.clarity-hero h1{
    max-width:940px;
    margin:0;
    font-size:clamp(2.9rem,6vw,6rem);
    line-height:.96;
}

.clarity-hero h1 em{
    display:block;
    font-weight:400;
    color:var(--clarity-gold);
}

.clarity-lead{
    max-width:700px;
    margin:2rem 0 0;
    font-size:1rem;
    line-height:1.65;
    color:var(--clarity-muted);
}

.clarity-progress{
    display:flex;
    flex-wrap:wrap;
    gap:.5rem;
    margin-top:3rem;
    padding-top:1.2rem;
    border-top:1px solid var(--clarity-line);
}

.clarity-progress span{
    font-size:.62rem;
    letter-spacing:.12em;
    text-transform:uppercase;
    color:#9a948a;
}

.clarity-progress span+span::before{
    content:"·";
    margin-right:.5rem;
    color:#bdb5aa;
}

.clarity-progress span.is-active{
    color:var(--clarity-ink);
    font-weight:700;
}

.clarity-step{
    display:none;
    padding:4rem 0 7rem;
}

.clarity-step.is-active{
    display:block;
}

.clarity-step-heading{
    max-width:720px;
    margin-bottom:2.4rem;
}

.clarity-step-heading h2{
    margin:0 0 1rem;
    font-size:clamp(2.25rem,4vw,4rem);
    line-height:1;
}

.clarity-step-heading>p:last-child{
    max-width:620px;
    font-size:.9rem;
    line-height:1.6;
    color:var(--clarity-muted);
}

.clarity-choice-grid{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    border-top:1px solid var(--clarity-line);
    border-left:1px solid var(--clarity-line);
}

.clarity-choice{
    min-height:185px;
    padding:1.5rem;
    border:0;
    border-right:1px solid var(--clarity-line);
    border-bottom:1px solid var(--clarity-line);
    background:rgba(255,255,255,.22);
    text-align:left;
    cursor:pointer;
    color:var(--clarity-ink);
    transition:.2s ease;
}

.clarity-choice:hover,
.clarity-choice.is-selected{
    background:var(--clarity-card);
}

.clarity-choice.is-selected{
    box-shadow:inset 0 -3px 0 var(--clarity-gold);
}

.clarity-choice strong{
    display:block;
    margin-bottom:.75rem;
    font-family:Georgia,"Times New Roman",serif;
    font-size:1.25rem;
    font-weight:400;
    line-height:1.08;
}

.clarity-choice span{
    display:block;
    font-size:.84rem;
    line-height:1.48;
    color:var(--clarity-muted);
}

#clarity-story,
.clarity-contact-grid input,
.clarity-contact-grid textarea,
.clarity-scope-field input,
.clarity-scope-field select,
.clarity-scope-field textarea{
    width:100%;
    border:1px solid var(--clarity-line);
    border-radius:0;
    background:rgba(255,255,255,.38);
    padding:1rem 1.1rem;
    color:var(--clarity-ink);
    font:inherit;
    outline:none;
}

#clarity-story{
    min-height:260px;
    resize:vertical;
    font-size:1rem;
    line-height:1.6;
}

#clarity-story:focus,
.clarity-contact-grid input:focus,
.clarity-contact-grid textarea:focus,
.clarity-scope-field input:focus,
.clarity-scope-field select:focus,
.clarity-scope-field textarea:focus{
    border-color:var(--clarity-gold);
}

.clarity-actions{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:1rem;
    margin-top:2rem;
}

.clarity-button,
.clarity-back{
    appearance:none;
    border:1px solid var(--clarity-ink);
    padding:.9rem 1.3rem;
    border-radius:999px;
    background:transparent;
    color:var(--clarity-ink);
    cursor:pointer;
    text-decoration:none;
    font-size:.72rem;
    font-weight:700;
    letter-spacing:.1em;
    text-transform:uppercase;
}

.clarity-button{
    background:var(--clarity-ink);
    color:#fff;
}

.clarity-working{
    display:none;
    align-items:center;
    gap:.8rem;
    margin-top:1.5rem;
    color:var(--clarity-muted);
    font-size:.82rem;
}

.clarity-working.is-active{
    display:flex;
}

.clarity-working span{
    width:18px;
    height:18px;
    border:2px solid var(--clarity-line);
    border-top-color:var(--clarity-gold);
    border-radius:50%;
    animation:clarity-spin .8s linear infinite;
}

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

.clarity-recommendation{
    display:grid;
    grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
    border:1px solid var(--clarity-line);
    background:rgba(255,255,255,.25);
}

.clarity-recommendation-main,
.clarity-recommendation-detail{
    padding:2rem;
}

.clarity-recommendation-main{
    border-right:1px solid var(--clarity-line);
}

.clarity-path{
    margin:0 0 1rem;
    font-family:Georgia,"Times New Roman",serif;
    font-size:clamp(2rem,3vw,3rem);
    font-weight:400;
    letter-spacing:-.035em;
}

.clarity-recommendation p,
.clarity-recommendation li{
    font-size:.84rem;
    line-height:1.5;
    color:var(--clarity-muted);
}

.clarity-recommendation h4{
    margin:0 0 .65rem;
    font-size:.67rem;
    letter-spacing:.16em;
    text-transform:uppercase;
    color:var(--clarity-gold);
}

.clarity-recommendation ul{
    margin:0;
    padding-left:1rem;
}

.clarity-recommendation-group+.clarity-recommendation-group{
    margin-top:1.6rem;
}

.clarity-secondary{
    margin-top:1.5rem;
    padding-top:1.5rem;
    border-top:1px solid var(--clarity-line);
}

.clarity-secondary span{
    display:inline-block;
    margin:.25rem .35rem .25rem 0;
    padding:.35rem .65rem;
    border:1px solid var(--clarity-line);
    border-radius:999px;
    font-size:.68rem;
}

#clarity-scope{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:1rem;
}

.clarity-scope-field{
    padding:1.25rem;
    border:1px solid var(--clarity-line);
    background:rgba(255,255,255,.24);
}

.clarity-scope-field label{
    display:block;
    margin-bottom:.7rem;
    font-family:Georgia,"Times New Roman",serif;
    font-size:1.15rem;
}

.clarity-scope-field small{
    display:block;
    margin-bottom:.8rem;
    color:var(--clarity-muted);
    line-height:1.45;
}

.clarity-price-note{
    margin-top:2rem;
    padding:2rem;
    border-top:1px solid var(--clarity-line);
    border-bottom:1px solid var(--clarity-line);
}

.clarity-price-note h3{
    margin:.25rem 0 .7rem;
    font-family:Georgia,"Times New Roman",serif;
    font-size:2rem;
    font-weight:400;
}

.clarity-price-note p:last-child{
    max-width:650px;
    margin-bottom:0;
    font-size:.84rem;
    line-height:1.5;
    color:var(--clarity-muted);
}

.clarity-contact-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:1.25rem;
}

.clarity-contact-grid label>span{
    display:block;
    margin-bottom:.5rem;
    font-size:.72rem;
    font-weight:700;
    letter-spacing:.08em;
    text-transform:uppercase;
}

.clarity-contact-grid .clarity-full{
    grid-column:1/-1;
}

.clarity-errors{
    margin:1rem 0;
    padding:1rem 1.25rem;
    border:1px solid #a96f6f;
}

.clarity-errors p{
    margin:.25rem 0;
}

.clarity-honeypot{
    position:absolute;
    left:-10000px;
    width:1px;
    height:1px;
    overflow:hidden;
}

.clarity-success{
    padding:10rem 0;
}

.clarity-success-inner{
    max-width:760px;
}

.clarity-success h1{
    margin:0 0 1.25rem;
    font-size:clamp(3rem,6vw,6rem);
}

.clarity-success p:not(.clarity-eyebrow){
    max-width:620px;
    margin:0 0 2rem;
    color:var(--clarity-muted);
    line-height:1.6;
}

@media(max-width:900px){

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

    .clarity-recommendation{
        grid-template-columns:1fr;
    }

    .clarity-recommendation-main{
        border-right:0;
        border-bottom:1px solid var(--clarity-line);
    }

}

@media(max-width:640px){

    .clarity-shell{
        width:min(100% - 32px,1180px);
    }

    .clarity-hero{
        padding-top:5.5rem;
    }

    .clarity-choice-grid,
    #clarity-scope,
    .clarity-contact-grid{
        grid-template-columns:1fr;
    }

    .clarity-contact-grid .clarity-full{
        grid-column:auto;
    }

    .clarity-choice{
        min-height:150px;
    }

    .clarity-actions{
        align-items:stretch;
        flex-direction:column-reverse;
    }

    .clarity-button,
    .clarity-back{
        width:100%;
        text-align:center;
    }

}

/* ============================================================
   CLARITY HERO COMPRESSION
   Keep the message, get users into the engine faster.
   ============================================================ */

.clarity-hero{
    padding:4.25rem 0 1.75rem;
}

.clarity-hero h1{
    max-width:820px;
    font-size:clamp(2.5rem,4.8vw,4.65rem);
    line-height:.96;
}

.clarity-lead{
    max-width:680px;
    margin-top:1.35rem;
    font-size:.92rem;
    line-height:1.55;
}

.clarity-progress{
    margin-top:1.8rem;
    padding-top:.9rem;
}

.clarity-step{
    padding:2.75rem 0 6rem;
}

.clarity-step-heading{
    margin-bottom:1.8rem;
}

.clarity-step-heading h2{
    font-size:clamp(2.1rem,3.4vw,3.45rem);
}

@media(max-width:640px){

    .clarity-hero{
        padding:3.25rem 0 1.4rem;
    }

    .clarity-hero h1{
        font-size:clamp(2.35rem,10vw,3.45rem);
    }

    .clarity-lead{
        margin-top:1rem;
    }

    .clarity-progress{
        margin-top:1.4rem;
    }

    .clarity-step{
        padding:2rem 0 5rem;
    }
}


/* ============================================================
   KATALUME CLARITY — FRIENDLY VALIDATION MODAL
   ============================================================ */

body.clarity-modal-open{
    overflow:hidden;
}

.clarity-modal{
    position:fixed;
    inset:0;
    z-index:9999;
    display:none;
    align-items:center;
    justify-content:center;
    padding:24px;
}

.clarity-modal.is-open{
    display:flex;
}

.clarity-modal-backdrop{
    position:absolute;
    inset:0;
    background:rgba(20,30,46,.58);
    backdrop-filter:blur(7px);
}

.clarity-modal-dialog{
    position:relative;
    z-index:1;
    width:min(520px,100%);
    padding:2.2rem;
    background:#f4efe7;
    border:1px solid #d8d0c4;
    box-shadow:0 24px 80px rgba(20,30,46,.22);
}

.clarity-modal-dialog h3{
    margin:0 0 1rem;
    font-family:Georgia,"Times New Roman",serif;
    font-size:clamp(2rem,4vw,3rem);
    font-weight:400;
    line-height:1;
    letter-spacing:-.035em;
    color:#172338;
}

.clarity-modal-message{
    color:#706d67;
    font-size:.9rem;
    line-height:1.6;
}

.clarity-modal-message p{
    margin:0;
}

.clarity-modal-actions{
    display:flex;
    justify-content:flex-end;
    margin-top:1.7rem;
}

@media(max-width:640px){

    .clarity-modal{
        padding:16px;
    }

    .clarity-modal-dialog{
        padding:1.6rem;
    }

    .clarity-modal-actions .clarity-button{
        width:100%;
    }
}



/* ==========================================================
   Clarity completion modal
   Completion should appear immediately after redirect.
   ========================================================== */

.clarity-modal.clarity-modal-instant,
.clarity-modal.clarity-modal-instant *,
.clarity-modal.clarity-modal-instant::before,
.clarity-modal.clarity-modal-instant::after {
    transition: none !important;
    animation: none !important;
}