/* The page for salon owners, on Bellfy's night (brand/night.css): the sky, then the circuit, the three
   ways to collect, the club with its simulator, everything else, the cost and the questions. */
.sales-page{--nav-h:76px}
@media(max-width:720px){.sales-page{--nav-h:72px}}
.sales-sky{margin-top:calc(12px - var(--nav-h))}
.sales-sky .nt-sky-inner{padding-top:calc(var(--nav-h) + clamp(48px,7vw,96px))}
.sales-head .nt-title{max-width:17ch}
.sales-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:34px}
.sales-proof{display:flex;flex-wrap:wrap;gap:10px;margin:28px 0 0;padding:0;list-style:none}
.sales-proof li{padding:9px 16px;border:1px solid var(--moon-line);border-radius:999px;background:var(--glass);color:var(--moon-soft);font-size:13px;font-weight:600}
.sales-proof li::before{content:'✦';margin-right:8px;color:var(--blush)}

/* ---------- Bands on the day ---------- */
.sales-band{max-width:1240px;margin:0 auto;padding:clamp(64px,8vw,112px) clamp(22px,4vw,48px)}
.sales-band.is-paper{max-width:none;margin:0 12px;padding-left:max(clamp(22px,4vw,48px),calc((100% - 1144px)/2));padding-right:max(clamp(22px,4vw,48px),calc((100% - 1144px)/2));border-radius:36px;background:var(--paper-raised);box-shadow:inset 0 0 0 1px var(--line)}
.sales-section-head{max-width:720px;margin:0 auto 48px;text-align:center}
.sales-section-head.is-left{margin:0 0 28px;text-align:left}
.sales-eyebrow{margin:0;font:600 11px/1.5 var(--text);letter-spacing:.24em;text-transform:uppercase;color:var(--accent)}
.sales-section-head h2,.price-card h2{margin:14px 0 0;font-family:var(--display);font-weight:400;font-size:clamp(34px,4.6vw,60px);line-height:1;letter-spacing:-.04em;color:var(--ink);text-wrap:balance}
.sales-section-head h2 em{font-style:italic;color:var(--accent)}
.sales-section-head p:not(.sales-eyebrow){margin:18px auto 0;max-width:56ch;font-size:17px;line-height:1.7;color:var(--ink-soft)}

/* ---------- The circuit: eight steps on a line ---------- */
.circuit{position:relative;display:grid;gap:14px;max-width:880px;margin:0 auto;padding:0;list-style:none;counter-reset:step}
.circuit::before{content:'';position:absolute;left:31px;top:24px;bottom:24px;width:1px;background:linear-gradient(var(--accent),color-mix(in srgb,var(--accent) 10%,transparent))}
.circuit li{position:relative;display:grid;grid-template-columns:64px 1fr auto;align-items:start;gap:18px;padding:22px 24px 22px 0;border-radius:24px;transition:background .4s}
.circuit li:hover{background:var(--paper-raised)}
.circuit-num{position:relative;z-index:1;display:grid;place-items:center;width:64px;height:64px;border-radius:50%;background:var(--ink);color:var(--paper);font:400 22px/1 var(--display);font-style:italic}
.circuit h3{margin:6px 0 6px;font-size:21px;letter-spacing:-.01em;color:var(--ink)}
.circuit p{margin:0;max-width:60ch;line-height:1.65;color:var(--ink-soft)}
.circuit-tag{align-self:center;padding:7px 12px;border-radius:999px;background:color-mix(in srgb,var(--accent) 10%,transparent);color:var(--accent);font-size:12px;font-weight:700;white-space:nowrap}
@media(max-width:720px){
 .circuit::before{left:23px}
 .circuit li{grid-template-columns:48px 1fr;gap:14px;padding-right:8px}
 .circuit-num{width:48px;height:48px;font-size:18px}
 .circuit-tag{grid-column:2;justify-self:start}
}

/* ---------- Three ways to collect ---------- */
.pay-ways{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
@media(max-width:900px){.pay-ways{grid-template-columns:1fr}}
.pay-way{padding:30px 28px}
.pay-icon{display:grid;place-items:center;width:52px;height:52px;border-radius:16px;background:var(--ink);color:var(--rose,#ffd6ec);font-size:24px}
.pay-way h3{margin:22px 0 8px;font-size:21px;color:var(--ink)}
.pay-way p{margin:0;line-height:1.65;color:var(--ink-soft)}
.pay-cash{margin:28px auto 0;max-width:62ch;text-align:center;color:var(--ink-soft);line-height:1.65}

/* ---------- The club and its simulator ---------- */
.club-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.95fr);gap:clamp(28px,5vw,64px);align-items:center}
@media(max-width:960px){.club-grid{grid-template-columns:1fr}}
.club-copy{margin:0;font-size:17px;line-height:1.75;color:var(--ink-soft)}
.club-rules{display:grid;gap:10px;margin:24px 0 0;padding:0;list-style:none}
.club-rules li{position:relative;padding-left:26px;line-height:1.6;color:var(--ink)}
.club-rules li::before{content:'✦';position:absolute;left:0;top:0;color:var(--accent)}
.club-sim{padding:clamp(24px,3vw,36px);color:var(--moon);background:linear-gradient(160deg,rgba(116,68,220,.92),rgba(20,11,29,.96) 70%)}
.club-sim h3{margin:0;font-family:var(--display);font-style:italic;font-weight:400;font-size:34px;letter-spacing:-.03em}
.sim-hint{margin:8px 0 22px;color:var(--moon-soft);font-size:14px}
.sim-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
@media(max-width:520px){.sim-fields{grid-template-columns:1fr}}
.sim-fields label{display:grid;gap:8px;font-size:12px;font-weight:700;letter-spacing:.04em;color:var(--moon-soft)}
.sim-input{display:flex;align-items:center;gap:6px;min-height:50px;padding:0 14px;border:1px solid var(--moon-line);border-radius:14px;background:rgba(255,248,242,.08)}
.sim-input:focus-within{border-color:var(--blush)}
.sim-input span{color:var(--moon-faint);font-weight:600}
.sim-input input{width:100%;min-width:0;border:0;background:transparent;color:var(--moon);font:600 18px/1 var(--text);outline:none}
.sim-out{display:grid;gap:10px;margin:24px 0 0;padding:20px 0 0;border-top:1px solid var(--moon-line);list-style:none}
.sim-out li{line-height:1.6;color:var(--moon-soft)}
.sim-out strong{color:var(--moon)}

/* ---------- Everything else ---------- */
.feature-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
@media(max-width:1000px){.feature-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.feature-grid{grid-template-columns:1fr}}
.feature{padding:24px;border:1px solid var(--line);border-radius:22px;background:var(--paper)}
.feature h3{margin:0 0 8px;font-size:17px;color:var(--ink)}
.feature p{margin:0;font-size:15px;line-height:1.6;color:var(--ink-soft)}

/* ---------- The cost ---------- */
.price-card{max-width:820px;margin:0 auto;padding:clamp(32px,5vw,56px);text-align:center;color:var(--moon);background:var(--sky)}
.price-card .sales-eyebrow{color:var(--rose,#ffd6ec)}
.price-card h2{color:var(--moon)}
.price-card p:not(.sales-eyebrow){margin:18px auto 28px;max-width:58ch;line-height:1.7;color:var(--moon-soft)}

/* ---------- Questions ---------- */
.faq{display:grid;gap:12px;max-width:860px;margin:0 auto}
.faq details{border:1px solid var(--line);border-radius:20px;background:var(--paper);padding:0 22px}
.faq summary{cursor:pointer;padding:20px 0;font-weight:700;color:var(--ink);list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'+';float:right;color:var(--accent);font-size:20px;line-height:1}
.faq details[open] summary::after{content:'–'}
.faq details p{margin:0 0 20px;line-height:1.7;color:var(--ink-soft)}

/* ---------- The close ---------- */
.sales-close{margin-bottom:0}
.sales-close .nt-sky-inner{text-align:center}
.sales-close .nt-title{max-width:20ch;margin:0 auto;font-size:clamp(36px,5vw,72px)}
.sales-close .sales-actions{justify-content:center}

/* ---------- Bellfys: the three levels ---------- */
.levels{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin:22px 0 0}
@media(max-width:900px){.levels{grid-template-columns:1fr}}
.level{display:grid;gap:6px;padding:20px 22px;border:1px solid var(--line);border-radius:20px;background:var(--paper)}
.level strong{font-family:var(--display);font-weight:400;font-size:28px;letter-spacing:-.02em;color:var(--ink)}
.level span{font-size:15px;line-height:1.55;color:var(--ink-soft)}
.level.is-silver strong{color:#6f7280}
.level.is-gold strong{color:#a87a1c}

/* ---------- The brain: six cards in three columns ---------- */
.feature-grid.is-three{grid-template-columns:repeat(3,minmax(0,1fr))}
@media(max-width:1000px){.feature-grid.is-three{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.feature-grid.is-three{grid-template-columns:1fr}}

/* ---------- Everything that reaches her ---------- */
.send-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;max-width:960px;margin:0 auto;padding:0;list-style:none}
@media(max-width:720px){.send-list{grid-template-columns:1fr}}
.send-list li{position:relative;display:grid;gap:4px;padding:16px 18px 16px 52px;border:1px solid var(--line);border-radius:18px;background:var(--paper)}
.send-list li::before{content:'✦';position:absolute;left:20px;top:16px;color:var(--accent);font-size:16px}
.send-list strong{font-size:16px;color:var(--ink)}
.send-list span{font-size:14px;line-height:1.5;color:var(--ink-soft)}

/* ---------- Referrals: two cards ---------- */
.refer-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;max-width:1000px;margin:0 auto}
@media(max-width:900px){.refer-grid{grid-template-columns:1fr}}
.refer-grid .pay-way{padding:30px 28px}
.refer-grid h3{margin:22px 0 8px;font-size:21px;color:var(--ink)}
.refer-grid p{margin:0;line-height:1.65;color:var(--ink-soft)}