/* @source public-theme/100-system.css */
/* ==========================================================================
   Public system reservation page — page base
   ========================================================================== */
.public-body--halo-dark-page .halo-system-page{
    min-height:100svh;
}

/* @source public-theme/102-system-hero.css */
/* ==========================================================================
   Public system reservation page — hero and signal chips
   ========================================================================== */
.public-body--halo-dark-page .halo-system-hero{
    background:
        linear-gradient(90deg,rgba(12,10,9,.94) 0%,rgba(18,14,12,.72) 31%,rgba(18,14,12,.23) 58%,rgba(18,14,12,.16) 100%),
        linear-gradient(180deg,rgba(12,10,9,.05) 0%,rgba(12,10,9,.52) 100%),
        url("../img/halo-system/hero-system-reservation-premium.webp") right top / cover no-repeat,
        #100c0a;
    border-bottom:0;
}

.public-body--halo-dark-page .halo-system-hero::after{
    background:
        radial-gradient(circle at 16% 18%,rgba(226,164,87,.138),transparent 24%),
        linear-gradient(180deg,transparent 62%,rgba(9,6,6,.62) 100%);
}

.halo-system-hero__copy{
    display:grid;
    gap:clamp(16px,1.8vw,24px);
    max-width:940px;
}

.halo-system-page .salons-hero-v2__copy.halo-system-hero__copy{
    max-height:none;
    overflow:visible;
}

.halo-system-page .halo-system-hero__actions{
    overflow:visible;
    padding-bottom:6px;
}

.halo-system-hero__lead{
    max-width:690px;
    margin:0;
    font-size:clamp(1.02rem,1.08vw,1.18rem);
    line-height:1.72;
}

.halo-system-hero__actions,
.halo-system-hero__signals{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:12px;
}

.halo-system-hero__actions{
    justify-content:flex-start;
    width:100%;
    max-width:820px;
    margin-left:0;
    margin-right:auto;
}

.halo-system-hero__signals{
    justify-content:center;
    flex-wrap:nowrap;
    justify-self:center;
    width:min(100%,1180px);
    max-width:none;
    margin-top:2px;
    margin-inline:auto;
    gap:9px;
}

.halo-system-hero__signals span{
    position:relative;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:42px;
    padding:10px 16px 10px 39px;
    border:1px solid rgba(226,164,87,.366);
    border-radius:999px;
    background:
        linear-gradient(135deg,rgba(255,247,235,.08) 0%,rgba(226,164,87,.211) 52%,rgba(255,247,235,.06) 100%),
        rgba(21,16,13,.62);
    color:#fff1dc;
    font-size:.80rem;
    font-weight:900;
    letter-spacing:.02em;
    white-space:nowrap;
    overflow:hidden;
    box-shadow:
        0 16px 36px rgba(0,0,0,.24),
        inset 0 1px 0 rgba(255,255,255,.09),
        inset 0 -1px 0 rgba(226,164,87,.124),
        0 0 26px rgba(226,164,87,.146);
}

.halo-system-hero__signals span::before{
    content:"";
    position:absolute;
    left:15px;
    top:50%;
    width:10px;
    height:10px;
    border-radius:999px;
    transform:translateY(-50%);
    background:radial-gradient(circle at 35% 35%,#fff8ef 0%,#f3c474 46%,#d38b23 100%);
    box-shadow:0 0 0 4px rgba(226,164,87,.138),0 0 18px rgba(226,164,87,.486);
}

.halo-system-hero__signals span::after{
    content:"";
    position:absolute;
    inset:-1px auto -1px -38%;
    width:34%;
    background:linear-gradient(115deg,transparent 0%,rgba(255,255,255,.04) 24%,rgba(255,255,255,.26) 50%,rgba(255,255,255,.05) 76%,transparent 100%);
    transform:skewX(-24deg);
    opacity:.92;
}

.halo-system-hero__signals span:nth-child(2n){
    background:
        linear-gradient(135deg,rgba(255,247,235,.07) 0%,rgba(226,164,87,.172) 42%,rgba(255,247,235,.05) 100%),
        rgba(18,15,13,.62);
}

.halo-system-hero__signals span:nth-child(3n){
    border-color:rgba(226,164,87,.44);
    box-shadow:
        0 18px 42px rgba(0,0,0,.26),
        inset 0 1px 0 rgba(255,255,255,.1),
        inset 0 -1px 0 rgba(226,164,87,.159),
        0 0 32px rgba(226,164,87,.185);
}

/* @source public-theme/104-system-content.css */
/* ==========================================================================
   Public system reservation page — sections, cards, process and CTA
   ========================================================================== */
.halo-system-section{
    position:relative;
    isolation:isolate;
    padding:clamp(58px,6vw,98px) 0;
    color:#f8f1e7;
}

.halo-system-section::before{
    content:"";
    position:absolute;
    inset:0;
    z-index:-1;
    pointer-events:none;
    background:
        radial-gradient(circle at 18% 0%,rgba(226,164,87,.103),transparent 28vw),
        radial-gradient(circle at 84% 24%,rgba(255,238,199,.041),transparent 26vw);
}

.halo-system-section--intro{
    margin-top:clamp(-42px,-3.2vw,-20px);
    padding-top:clamp(64px,7vw,110px);
}

.halo-system-section__inner{
    display:grid;
    gap:clamp(24px,3vw,42px);
}

.halo-system-heading{
    max-width:940px;
}

.halo-system-heading h2,
.halo-system-process__copy h2,
.halo-system-join h2{
    margin:0;
    color:#fff8ef;
    font-family:Georgia,"Times New Roman",serif;
    font-size:clamp(2.26rem,3.2vw,4.2rem);
    font-weight:700;
    line-height:1.02;
    letter-spacing:-.03em;
    text-wrap:balance;
}

.halo-system-heading p,
.halo-system-process__copy p,
.halo-system-join p{
    max-width:740px;
    color:rgba(255,241,224,.74);
    line-height:1.72;
}

.halo-system-grid{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:clamp(14px,1.7vw,22px);
}

.halo-system-card,
.halo-system-step{
    position:relative;
    overflow:hidden;
    border:1px solid rgba(226,164,87,.227);
    background:
        radial-gradient(circle at 18% 0%,rgba(226,164,87,.146),transparent 44%),
        linear-gradient(145deg,rgba(28,18,12,.82),rgba(10,8,6,.74));
    box-shadow:0 26px 70px rgba(0,0,0,.24),inset 0 1px 0 rgba(255,255,255,.055);
}

.halo-system-card::before,
.halo-system-step::before{
    content:"";
    position:absolute;
    inset:0;
    pointer-events:none;
    background:linear-gradient(135deg,rgba(255,239,207,.079),transparent 34%);
    opacity:.86;
}

.halo-system-card{
    display:grid;
    gap:12px;
    min-height:250px;
    padding:clamp(22px,2.4vw,34px);
    border-radius:var(--hp-radius-lg);
}

.halo-system-card span{
    position:relative;
    z-index:1;
    color:#e2a457;
    font-size:.72rem;
    font-weight:950;
    letter-spacing:.15em;
    text-transform:uppercase;
}

.halo-system-card h3,
.halo-system-step h3{
    position:relative;
    z-index:1;
    margin:0;
    color:#fff8ef;
    font-size:clamp(1.24rem,1.36vw,1.58rem);
    line-height:1.16;
    letter-spacing:-.03em;
}

.halo-system-card p,
.halo-system-step p{
    position:relative;
    z-index:1;
    margin:0;
    color:rgba(255,241,224,.72);
    line-height:1.64;
}

.halo-system-process{
    display:grid;
    grid-template-columns:minmax(0,.82fr) minmax(420px,1.18fr);
    gap:clamp(28px,4.4vw,82px);
    align-items:start;
}

.halo-system-process__copy{
    display:grid;
    gap:16px;
    max-width:660px;
}

.halo-system-process__copy>span{
    display:inline-flex;
    align-items:center;
    gap:10px;
    width:max-content;
    color:#e2a457;
    font-size:.72rem;
    font-weight:950;
    letter-spacing:.15em;
    text-transform:uppercase;
}

.halo-system-process__copy>span::before,
.halo-system-process__copy>span::after{
    content:"";
    display:block;
    width:32px;
    height:1px;
    border-radius:999px;
    background:linear-gradient(90deg,rgba(226,164,87,.138),rgba(226,164,87,.93));
    box-shadow:0 0 18px rgba(226,164,87,.227);
}

.halo-system-process__copy>span::after{
    background:linear-gradient(270deg,rgba(226,164,87,.138),rgba(226,164,87,.93));
}

.halo-system-process__steps{
    display:grid;
    gap:14px;
}

.halo-system-step{
    display:grid;
    grid-template-columns:auto minmax(0,1fr);
    gap:clamp(16px,2vw,26px);
    align-items:start;
    padding:clamp(18px,2vw,26px);
    border-radius:var(--hp-radius-lg);
}

.halo-system-step strong{
    position:relative;
    z-index:1;
    display:grid;
    place-items:center;
    width:56px;
    height:56px;
    border:1px solid rgba(226,164,87,.366);
    border-radius:20px;
    background:rgba(226,164,87,.159);
    color:#f7cc8c;
    font-size:.92rem;
    font-weight:950;
    box-shadow:0 16px 34px rgba(0,0,0,.22),inset 0 1px 0 rgba(255,255,255,.08);
}

.halo-system-step div{
    position:relative;
    z-index:1;
    display:grid;
    gap:8px;
}

.halo-system-join{
    padding-top:clamp(24px,3.6vw,54px);
}

.halo-system-join__inner{
    border-color:rgba(226,164,87,.253);
    background:
        radial-gradient(circle at 16% 0%,rgba(226,164,87,.159),transparent 38%),
        linear-gradient(135deg,rgba(30,21,14,.82),rgba(10,8,6,.78));
}

/* @source public-theme/106-system-motion.css */
/* ==========================================================================
   Public system reservation page — motion
   ========================================================================== */
@media (prefers-reduced-motion:no-preference){
    .halo-system-hero__signals span{
        transition:transform .24s ease,border-color .24s ease,box-shadow .24s ease,background .24s ease;
        animation:haloSystemSignalFloat 5.6s ease-in-out infinite;
    }

    .halo-system-hero__signals span::after{
        animation:haloSystemSignalShine 4.8s ease-in-out infinite;
    }

    .halo-system-hero__signals span:nth-child(2){animation-delay:.35s;}
    .halo-system-hero__signals span:nth-child(3){animation-delay:.7s;}
    .halo-system-hero__signals span:nth-child(4){animation-delay:1.05s;}
    .halo-system-hero__signals span:nth-child(5){animation-delay:1.4s;}
    .halo-system-hero__signals span:nth-child(6){animation-delay:1.75s;}

    .halo-system-hero__signals span:hover{
        transform:translateY(-4px) scale(1.02);
        border-color:rgba(226,164,87,.516);
        box-shadow:
            0 24px 52px rgba(0,0,0,.3),
            inset 0 1px 0 rgba(255,255,255,.12),
            inset 0 -1px 0 rgba(226,164,87,.211),
            0 0 34px rgba(226,164,87,.278);
    }

    .halo-system-card,
    .halo-system-step{
        transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease;
    }

    .halo-system-card:hover,
    .halo-system-step:hover{
        transform:translateY(-4px);
        border-color:rgba(226,164,87,.366);
        box-shadow:0 32px 78px rgba(0,0,0,.3),inset 0 1px 0 rgba(255,255,255,.07);
    }
}

@keyframes haloSystemSignalFloat{
    0%,100%{transform:translateY(0);}
    50%{transform:translateY(-3px);}
}

@keyframes haloSystemSignalShine{
    0%{left:-42%;opacity:0;}
    12%{opacity:.0;}
    22%{opacity:.88;}
    48%,100%{left:118%;opacity:0;}
}

/* @source public-theme/108-system-responsive.css */
/* ==========================================================================
   Public system reservation page — responsive rules
   ========================================================================== */
@media (max-width:1080px){
    .halo-system-grid,
    .halo-system-process{
        grid-template-columns:1fr;
    }

    .halo-system-process__copy{
        max-width:780px;
    }
}

@media (max-width:760px){
    .public-body--halo-system .halo-breadcrumb-shell{
        display:none;
    }

    .public-body--halo-dark-page .halo-system-hero{
        min-height:auto;
        padding:clamp(94px,24vw,116px) 0 clamp(22px,5.8vw,32px);
        background:
            linear-gradient(90deg,rgba(12,10,9,.94) 0%,rgba(18,14,12,.74) 44%,rgba(18,14,12,.38) 100%),
            linear-gradient(180deg,rgba(12,10,9,.08) 0%,rgba(12,10,9,.58) 100%),
            url("../img/halo-system/hero-system-reservation-premium.webp") 63% top / cover no-repeat,
            #100c0a;
    }

    .halo-system-hero__shell{
        width:min(100% - 24px,620px);
        gap:clamp(16px,4.8vw,24px);
    }

    .halo-system-hero__copy{
        justify-items:center;
        gap:clamp(10px,3.2vw,15px);
        text-align:center;
        margin-inline:auto;
    }

    .halo-system-page .salons-hero-v2__kicker{
        justify-content:center;
        gap:10px;
        margin:0 auto 0;
        font-size:.61rem;
        letter-spacing:.15em;
        text-align:center;
    }

    .halo-system-page .salons-hero-v2__kicker::before,
    .halo-system-page .salons-hero-v2__kicker::after{
        flex-basis:26px;
        width:26px;
    }

    .halo-system-page .salons-hero-v2 h1{
        max-width:11em;
        margin-inline:auto;
        font-size:clamp(2.06rem,9.15vw,2.68rem);
        line-height:1.045;
        letter-spacing:-.036em;
        text-align:center;
        text-wrap:balance;
    }

    .halo-system-hero__lead,
    .halo-system-heading,
    .halo-system-heading p,
    .halo-system-process__copy,
    .halo-system-process__copy p{
        margin-inline:auto;
        text-align:center;
    }

    .halo-system-hero__lead{
        width:min(100%,34rem);
        max-width:33ch;
        font-size:.88rem;
        line-height:1.54;
        color:rgba(255,241,224,.82);
        text-wrap:pretty;
    }

    .halo-system-hero__actions{
        justify-content:center;
        width:min(100%,330px);
        gap:9px;
        margin:2px auto 0;
        padding-bottom:2px;
    }

    .halo-system-hero__actions .halo-market-button{
        --halo-action-height:40px;
        --halo-action-radius:13px;
        --halo-action-font-size:.77rem;
        width:100%;
        min-width:0;
        max-width:none;
        justify-content:center;
        padding-inline:15px;
        letter-spacing:.035em;
    }

    .halo-system-hero__signals{
        justify-content:flex-start;
        flex-wrap:nowrap;
        width:100%;
        max-width:100%;
        margin-top:1px;
        gap:8px;
        overflow-x:auto;
        overflow-y:hidden;
        overscroll-behavior-inline:contain;
        scroll-padding-inline:2px;
        scroll-snap-type:x proximity;
        padding:2px 2px 4px;
        -webkit-overflow-scrolling:touch;
    }

    .halo-system-hero__signals::-webkit-scrollbar{
        display:none;
    }

    .halo-system-hero__signals span{
        flex:0 0 auto;
        min-height:34px;
        max-width:calc(100vw - 54px);
        padding:8px 12px 8px 31px;
        font-size:.68rem;
        letter-spacing:.018em;
        scroll-snap-align:start;
        text-overflow:ellipsis;
        box-shadow:0 12px 26px rgba(0,0,0,.2),inset 0 1px 0 rgba(255,255,255,.08);
    }

    .halo-system-hero__signals span::before{
        left:12px;
        width:8px;
        height:8px;
        box-shadow:0 0 0 3px rgba(226,164,87,.138),0 0 14px rgba(226,164,87,.417);
    }

    .halo-system-grid{
        grid-template-columns:1fr;
        justify-items:center;
        width:min(100%,320px);
        margin-inline:auto;
    }

    .halo-system-section--intro{
        margin-top:0;
        padding-top:clamp(42px,10vw,62px);
    }

    .halo-system-card{
        width:100%;
        min-height:0;
        margin-inline:auto;
        text-align:center;
        justify-items:center;
        align-content:center;
    }

    .halo-system-card h3,
    .halo-system-card p{
        max-width:27ch;
    }

    .halo-system-process__copy>span{
        margin-inline:auto;
    }

    .halo-system-step{
        grid-template-columns:1fr;
        text-align:center;
    }

    .halo-system-step strong{
        margin-inline:auto;
    }
}

@media (max-width:420px){
    .halo-system-hero__shell{
        width:min(100% - 22px,520px);
        gap:clamp(13px,4.8vw,20px);
    }

    .halo-system-page .salons-hero-v2 h1{
        max-width:10.8em;
        font-size:clamp(1.96rem,8.8vw,2.38rem);
        line-height:1.05;
    }

    .halo-system-hero__lead{
        max-width:32ch;
        font-size:.85rem;
        line-height:1.52;
    }

    .halo-system-hero__actions{
        width:min(100%,320px);
        margin-top:0;
    }

    .halo-system-hero__signals span{
        min-height:32px;
        padding:7px 11px 7px 29px;
        font-size:.65rem;
    }
}

@media (max-width:760px) and (max-height:720px){
    .public-body--halo-dark-page .halo-system-hero{
        padding-top:88px;
        padding-bottom:20px;
    }

    .halo-system-hero__copy{
        gap:10px;
    }

    .halo-system-hero__lead{
        line-height:1.48;
    }
}
