/* pricing.html (October 3, owner request; reference: klingit.com/pricing). Built by
   tools/pricing-build.cjs from the calculator's rate card. Every rule is scoped to the page's
   own sections inside main.mc-pricing-page, so the preserved footer is never styled here. */
.mc-pricing-page{--pr-ink:#1b1724;--pr-muted:#67676f;--pr-line:rgba(26,16,44,.08);--pr-purple:#7424c8;--pr-soft:#f6f2fd}

/* hero: centred, on a soft colour field */
.mc-pricing-page .mc-pricing-hero{position:relative;isolation:isolate;text-align:center}
.mc-pricing-page .mc-pricing-hero::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(34% 70% at 18% 40%,rgba(203,146,255,.26),rgba(203,146,255,0) 72%),radial-gradient(34% 70% at 84% 30%,rgba(137,168,255,.24),rgba(137,168,255,0) 72%)}
.mc-pricing-page .mc-pricing-hero .mc-container{display:flex;flex-direction:column;align-items:center}
.mc-pricing-page .mc-pricing-hero .mc-breadcrumb{align-self:center}
.mc-pricing-page .mc-pricing-hero h1{max-width:820px;margin-inline:auto}
.mc-pricing-page .mc-pricing-hero h1 span{color:#8435de;background:linear-gradient(105deg,#ea00d7 0%,#a63cf0 45%,#8600f9 100%);background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.mc-pricing-page .mc-pricing-hero .mc-category-lead{max-width:620px;margin-inline:auto}
.mc-pricing-facts{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;list-style:none;margin:28px 0 0;padding:0}
.mc-pricing-facts li{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border:1px solid var(--pr-line);border-radius:999px;background:#ffffffd9;font-size:13px;font-weight:500;color:var(--pr-ink)}
.mc-pricing-facts li::before{content:"";width:6px;height:6px;border-radius:50%;background:linear-gradient(135deg,#ea00d7,#8600f9)}

/* the four disciplines */
.mc-pricing-page .mc-pricing-overview{padding-top:0}
.mc-pricing-cats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.mc-pricing-cat{position:relative;isolation:isolate;overflow:hidden;display:flex;flex-direction:column;padding:32px;border:1px solid var(--pr-line);border-radius:24px;background:#fff;box-shadow:0 1px 2px rgba(26,16,44,.04),0 24px 56px -40px rgba(44,22,88,.3)}
.mc-pricing-cat::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(60% 70% at 100% 0%,var(--wash),rgba(255,255,255,0) 70%)}
.mc-pricing-cat.pr-tone-0{--wash:rgba(220,190,255,.55)}
.mc-pricing-cat.pr-tone-1{--wash:rgba(190,212,255,.6)}
.mc-pricing-cat.pr-tone-2{--wash:rgba(255,200,236,.55)}
.mc-pricing-cat.pr-tone-3{--wash:rgba(200,196,255,.6)}
.mc-pricing-kicker{margin:0 0 12px;font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--pr-purple)}
.mc-pricing-cat h3{margin:0 0 10px;font-size:clamp(22px,2vw,28px);font-weight:600;line-height:1.15;letter-spacing:-.03em;color:#171717}
.mc-pricing-from{margin:0 0 14px;font-size:14px;color:var(--pr-muted)}
.mc-pricing-from strong{margin-left:4px;font-size:clamp(30px,3vw,40px);font-weight:600;letter-spacing:-.035em;color:var(--pr-ink)}
.mc-pricing-lead{margin:0 0 18px;font-size:15px;line-height:1.6;color:var(--pr-muted);max-width:44ch}
.mc-pricing-tags{display:flex;flex-wrap:wrap;gap:6px;list-style:none;margin:0 0 26px;padding:0}
.mc-pricing-tags li{padding:5px 10px;border-radius:999px;background:#f4f2f8;font-size:12px;font-weight:500;color:#4a4552}
.mc-pricing-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:auto}

/* how we price */
.mc-how-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.mc-how-card h3{margin:22px 0 8px;font-size:18px;font-weight:600;letter-spacing:-.02em;color:#171717}
.mc-how-card p{margin:0;font-size:14.5px;line-height:1.6;color:var(--pr-muted)}
.mc-how-art{display:grid;place-items:center;height:250px;padding:24px;border-radius:20px;box-shadow:inset 0 0 0 1px rgba(26,16,44,.05)}
.mc-how-art.pr-tone-0{background:radial-gradient(80% 80% at 20% 10%,#efe2ff,transparent 70%),linear-gradient(180deg,#f8f3ff,#ece4fb)}
.mc-how-art.pr-tone-1{background:radial-gradient(80% 80% at 80% 10%,#ffe3f4,transparent 70%),linear-gradient(180deg,#fff6fb,#f8e6f6)}
.mc-how-art.pr-tone-2{background:radial-gradient(80% 80% at 50% 0%,#dceaff,transparent 70%),linear-gradient(180deg,#f4f8ff,#e3ebfd)}
.mc-how-stack,.mc-how-month{display:flex;flex-direction:column;gap:8px;width:min(100%,250px)}
.mc-how-stack span,.mc-how-month>span:not(.mc-how-toggle){display:flex;justify-content:space-between;gap:12px;padding:10px 14px;border-radius:12px;background:#fff;box-shadow:0 0 0 1px rgba(26,16,44,.05),0 10px 22px -16px rgba(44,22,88,.35);font-size:13px}
.mc-how-stack b,.mc-how-month b{font-weight:500;color:var(--pr-ink)}
.mc-how-stack i,.mc-how-month i{font-style:normal;font-weight:600;color:var(--pr-ink)}
.mc-how-stack .is-total{background:#171717;margin-top:4px}
.mc-how-stack .is-total b,.mc-how-stack .is-total i{color:#fff}
.mc-how-chips{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;width:min(100%,260px)}
.mc-how-chips span{display:flex;align-items:center;gap:8px;padding:12px;border-radius:12px;background:#fff;box-shadow:0 0 0 1px rgba(26,16,44,.05),0 10px 22px -16px rgba(44,22,88,.35);font-size:13px;font-weight:600;color:var(--pr-ink)}
.mc-how-chips svg{width:16px;height:16px;color:var(--pr-purple);flex:none}
.mc-how-toggle{display:grid;grid-template-columns:1fr 1fr;padding:4px;border-radius:999px;background:#fff;box-shadow:0 0 0 1px rgba(26,16,44,.06);margin-bottom:4px}
.mc-how-toggle b{padding:7px 0;border-radius:999px;text-align:center;font-size:12px;font-weight:600;color:var(--pr-muted)}
.mc-how-toggle b.is-on{background:#171717;color:#fff}

/* every service */
.mc-price-group{margin-top:64px;scroll-margin-top:110px}
.mc-price-group:first-of-type{margin-top:48px}
.mc-price-group-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;padding-bottom:20px;margin-bottom:24px;border-bottom:1px solid var(--pr-line)}
.mc-price-group-head h3{margin:0 0 6px;font-size:clamp(24px,2.4vw,32px);font-weight:600;letter-spacing:-.03em;color:#171717}
.mc-price-group-head p:not(.mc-pricing-kicker){margin:0;font-size:15px;line-height:1.6;color:var(--pr-muted)}
.mc-price-group-head>span{flex:none;padding:7px 12px;border-radius:999px;background:var(--pr-soft);font-size:12.5px;font-weight:600;color:var(--pr-purple)}
.mc-price-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.mc-price-item{display:flex;flex-direction:column;padding:22px;border:1px solid var(--pr-line);border-radius:20px;background:#fff;transition:border-color .25s,box-shadow .25s,transform .25s}
.mc-price-item:hover{border-color:rgba(116,36,200,.24);box-shadow:0 22px 44px -32px rgba(44,22,88,.45);transform:translateY(-2px)}
.mc-price-item-top{display:flex;justify-content:space-between;align-items:center;gap:12px}
.mc-price-item-icon{display:grid;place-items:center;width:40px;height:40px;border-radius:12px;background:var(--pr-soft);color:var(--pr-purple)}
.mc-price-item-icon svg{width:19px;height:19px}
.mc-price-badge{padding:5px 10px;border-radius:999px;font-size:11.5px;font-weight:600;letter-spacing:.01em}
.mc-price-badge.is-setup{background:#f2f1f5;color:#45404d}
.mc-price-badge.is-monthly{background:#f1e7ff;color:#6a1fbd}
.mc-price-badge.is-milestone{background:#e6efff;color:#1f4fa8}
.mc-price-badge.is-unconfirmed{background:#fff3df;color:#7d5100}
.mc-price-item h4{margin:18px 0 6px;font-size:17px;font-weight:600;letter-spacing:-.02em;color:#171717}
.mc-price-amount{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 8px;margin:0}
.mc-price-amount strong{font-size:30px;font-weight:600;letter-spacing:-.035em;color:var(--pr-ink)}
.mc-price-amount span{font-size:13px;color:var(--pr-muted)}
.mc-price-extra{margin:4px 0 0;font-size:12.5px;font-weight:600;color:var(--pr-purple)}
.mc-price-scope{flex:1;margin:12px 0 0;font-size:14px;line-height:1.55;color:var(--pr-muted)}
.mc-price-add{align-self:flex-start;display:inline-flex;align-items:center;gap:8px;min-height:40px;margin-top:18px;padding:8px 14px;border:1px solid #d7d7df;border-radius:999px;font-size:13px;font-weight:600;color:#171717;text-decoration:none;transition:background .2s,color .2s,border-color .2s}
.mc-price-add span{font-size:16px;line-height:1}
.mc-price-add:hover{background:#171717;border-color:#171717;color:#fff}
.mc-pricing-page :is(.mc-price-add,.mc-start-row,.mc-pricing-actions a):focus-visible{outline:3px solid #7b2ad4;outline-offset:3px}
.mc-price-note{display:flex;gap:10px;align-items:flex-start;max-width:720px;margin:40px auto 0;font-size:13px;line-height:1.6;color:var(--pr-muted)}
.mc-price-note svg{width:18px;height:18px;flex:none;margin-top:1px}

/* the calculator, in its own dark card */
.mc-pricing-page #estimate{scroll-margin-top:90px}
.mc-pricing-page #estimate .mc-intro{margin-bottom:40px}

/* not sure where to start */
.mc-start-list{display:flex;flex-direction:column;gap:12px;max-width:860px;margin:0 auto}
.mc-start-row{display:flex;align-items:center;gap:16px;padding:18px 22px;border:1px solid var(--pr-line);border-radius:16px;background:#fff;color:var(--pr-ink);text-decoration:none;transition:border-color .2s,box-shadow .2s}
.mc-start-row:hover{border-color:rgba(116,36,200,.28);box-shadow:0 16px 36px -28px rgba(44,22,88,.45)}
.mc-start-icon{display:grid;place-items:center;width:36px;height:36px;flex:none;border-radius:10px;background:var(--pr-soft);color:var(--pr-purple)}
.mc-start-icon svg{width:18px;height:18px}
.mc-start-quote{flex:1;font-size:16px;font-weight:500;letter-spacing:-.01em}
.mc-start-target{flex:none;padding:6px 12px;border-radius:999px;background:#f4f2f8;font-size:12.5px;font-weight:600;color:#4a4552}

@media(max-width:980px){
 .mc-price-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
 .mc-how-grid{grid-template-columns:1fr;max-width:560px;margin-inline:auto}
}
@media(max-width:800px){
 .mc-pricing-cats{grid-template-columns:1fr}
 .mc-price-group-head{flex-direction:column;align-items:flex-start}
}
@media(max-width:640px){
 .mc-price-grid{grid-template-columns:1fr}
 .mc-pricing-cat{padding:24px 22px}
 .mc-pricing-actions .mc-button{flex:1 1 auto}
 .mc-start-row{flex-wrap:wrap;gap:12px;padding:16px}
 .mc-start-quote{flex-basis:calc(100% - 52px);font-size:15px}
 .mc-start-target{margin-left:52px}
}
@media(prefers-reduced-motion:reduce){
 .mc-price-item,.mc-price-add,.mc-start-row{transition:none}
 .mc-price-item:hover{transform:none}
}
@media(forced-colors:active){
 .mc-pricing-page .mc-pricing-hero h1 span{background:none;-webkit-text-fill-color:CanvasText}
}