/* /app-development: "Which package fits your app?" estimator (Nov 2026).
   Built on the idea of 21st.dev's ROI Pricing Calculator (id 27098): live inputs on the left, a result that updates as you choose.
   One white panel on the page's dark purple; the result is a deep purple card inside it. */

.est-section{padding:110px 0 40px;color:#f3eefb}
.est-shell{width:min(1240px,calc(100% - 48px));margin:0 auto}
.est-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.8fr);gap:56px;align-items:end;margin-bottom:40px}
.est-eyebrow{display:inline-flex;align-items:center;gap:12px;margin:0 0 18px;font:600 12px/1 Inter,sans-serif;letter-spacing:2.4px;text-transform:uppercase;color:#c4b5fd}
.est-eyebrow::before{content:"";width:28px;height:2px;border-radius:2px;background:#c4b5fd}
.ap-inner-page main .est-h2{margin:0;font:300 clamp(34px,3.6vw,52px)/1.08 Fustat,Inter,sans-serif;letter-spacing:-.04em;color:#f6f2fd}
.ap-inner-page main .est-h2 b{font-weight:750;color:#fff}
.est-lead{margin:0;font:400 16.5px/1.7 Inter,sans-serif;color:#d6ccea}

.est-panel{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:0;border-radius:30px;overflow:hidden;isolation:isolate;background:#fff;color:#1b1235;
  box-shadow:0 0 0 1px rgba(255,255,255,.08),0 50px 110px -50px rgba(6,2,16,.85)}
.est-form{padding:40px 44px 36px;border:0;margin:0;min-width:0}
.est-group{border:0;margin:0;padding:0;min-width:0}
.est-group+.est-group{margin-top:30px}
.est-group legend{display:flex;align-items:baseline;gap:10px;padding:0;margin-bottom:14px;font:650 15.5px/1.3 Inter,sans-serif;letter-spacing:-.01em;color:#1b1235}
.est-group legend small{font:500 12.5px/1 Inter,sans-serif;color:#8a7fa0}
.est-step{display:inline-grid;place-items:center;width:24px;height:24px;border-radius:50%;background:#f1ecfa;color:#6d28d9;font:700 12px/1 Inter,sans-serif;flex:none;transform:translateY(-1px)}

/* segmented choices */
.est-seg{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;padding:6px;border-radius:18px;background:#f6f2fc;border:1px solid #ece4f6}
.est-seg label{position:relative;display:block;cursor:pointer}
.est-seg input{position:absolute;opacity:0;pointer-events:none}
.est-seg span{display:flex;flex-direction:column;justify-content:center;gap:4px;min-height:64px;padding:10px 14px;border-radius:13px;font:600 14px/1.25 Inter,sans-serif;color:#3f3654;transition:background .25s ease,color .25s ease,box-shadow .25s ease}
.est-seg span small{font:400 12.5px/1.35 Inter,sans-serif;color:#8a7fa0}
.est-seg input:checked+span{background:#fff;color:#1b1235;box-shadow:0 10px 24px -14px rgba(59,26,98,.45),0 0 0 1.5px #7c3aed}
.est-seg input:focus-visible+span{outline:2px solid #7c3aed;outline-offset:2px}

/* feature chips */
.est-chips{display:flex;flex-wrap:wrap;gap:8px}
.est-chip{position:relative;cursor:pointer}
.est-chip input{position:absolute;opacity:0;pointer-events:none}
.est-chip span{display:inline-flex;align-items:center;gap:9px;padding:10px 14px 10px 11px;border-radius:999px;border:1px solid #e6def2;background:#fff;font:500 14px/1 Inter,sans-serif;color:#3f3654;transition:background .2s ease,border-color .2s ease,color .2s ease,transform .2s ease}
.est-chip span::before{content:"";flex:none;width:18px;height:18px;border-radius:50%;border:1.5px solid #cdbfe3;background:#fff center/10px no-repeat;transition:background-color .2s ease,border-color .2s ease}
.est-chip:hover span{border-color:#c9b6ea}
.est-chip input:checked+span{background:#f3edfd;border-color:#a78bfa;color:#1b1235}
.est-chip input:checked+span::before{background-color:#7c3aed;border-color:#7c3aed;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.3 5 8.6l4.5-5.2' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
.est-chip input:focus-visible+span{outline:2px solid #7c3aed;outline-offset:2px}
.est-chip[data-tier="2"] span em{font-style:normal;font:600 10.5px/1 Inter,sans-serif;letter-spacing:.6px;text-transform:uppercase;color:#9a5b00;background:#fff4e5;padding:4px 6px;border-radius:999px}

/* result */
.est-result{position:relative;display:flex;flex-direction:column;padding:40px 40px 34px;color:#fff;overflow:hidden;isolation:isolate;
  background:radial-gradient(90% 70% at 90% 0%,rgba(167,139,250,.38),transparent 60%),linear-gradient(155deg,#2a1454 0%,#3b1a6e 52%,#4c1d95 100%)}
.est-result::after{content:"";position:absolute;inset:0;z-index:-1;background-image:linear-gradient(rgba(196,181,253,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(196,181,253,.06) 1px,transparent 1px);background-size:34px 34px;-webkit-mask-image:linear-gradient(160deg,#000,transparent 70%);mask-image:linear-gradient(160deg,#000,transparent 70%)}
.est-kicker{font:600 11.5px/1 Inter,sans-serif;letter-spacing:1.8px;text-transform:uppercase;color:#c4b5fd}
.est-meter{position:relative;display:grid;grid-template-columns:repeat(3,1fr);margin:20px 0 26px;padding:5px;border-radius:999px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.1)}
.est-meter span{position:relative;z-index:1;padding:9px 4px;text-align:center;font:600 12.5px/1 Inter,sans-serif;color:#cfc4e3;transition:color .35s ease}
.est-meter span.is-on{color:#1b1235}
.est-meter i{position:absolute;z-index:0;top:5px;bottom:5px;left:5px;width:calc((100% - 10px)/3);border-radius:999px;background:linear-gradient(120deg,#fff,#e9d5ff);box-shadow:0 8px 20px -8px rgba(233,213,255,.7);transition:transform .5s cubic-bezier(.2,.75,.2,1)}
.est-name{margin:0;font:650 15px/1.2 Inter,sans-serif;color:#e9d5ff}
.ap-inner-page main .est-price{display:flex;align-items:baseline;gap:8px;margin:8px 0 0;font:700 clamp(44px,4.4vw,60px)/1 Fustat,Inter,sans-serif;letter-spacing:-.045em;color:#fff}
.est-price small{font:500 15px/1 Inter,sans-serif;letter-spacing:0;color:#cfc4e3}
.est-time{display:inline-flex;align-items:center;gap:8px;margin-top:14px;padding:8px 12px;border-radius:999px;background:rgba(255,255,255,.1);font:500 13px/1 Inter,sans-serif;color:#efe9fb;align-self:flex-start}
.est-time::before{content:"";width:7px;height:7px;border-radius:50%;background:#4ade80;box-shadow:0 0 0 3px rgba(74,222,128,.2)}
.est-why{list-style:none;margin:22px 0 0;padding:18px 0 0;border-top:1px solid rgba(255,255,255,.12);display:grid;gap:9px;min-height:120px}
.est-why li{position:relative;padding-left:22px;font:400 14px/1.45 Inter,sans-serif;color:#e4dcf3}
.est-why li::before{content:"";position:absolute;left:2px;top:7px;width:8px;height:8px;border-radius:50%;background:#c4b5fd}
.est-why li b{font-weight:650;color:#fff}
.est-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:auto;padding-top:24px}
.est-cta{display:inline-flex;align-items:center;gap:10px;padding:14px 20px;border-radius:999px;font:600 14.5px/1 Inter,sans-serif;color:#1b1235;background:#fff;text-decoration:none;transition:transform .2s ease}
.est-cta:hover{transform:translateY(-2px)}
.est-link{display:inline-flex;align-items:center;padding:14px 6px;font:600 14px/1 Inter,sans-serif;color:#e9d5ff;text-decoration:none;border-bottom:0}
.est-link:hover{color:#fff}
.est-note{margin:14px 0 0;font:400 12.5px/1.5 Inter,sans-serif;color:#b9aed0}
.est-flash{animation:est-flash .5s ease}
@keyframes est-flash{0%{opacity:.25;transform:translateY(6px)}100%{opacity:1;transform:none}}

@media (max-width:980px){
  .est-head{grid-template-columns:1fr;gap:18px}
  .est-panel{grid-template-columns:1fr}
}
@media (max-width:640px){
  .est-section{padding:72px 0 24px}
  .est-shell{width:calc(100% - 32px)}
  .est-form{padding:26px 18px 24px}
  .est-seg{grid-template-columns:1fr}
  .est-seg span{min-height:0}
  .est-result{padding:28px 22px 24px}
  .est-panel{border-radius:24px}
}
@media (prefers-reduced-motion:reduce){.est-meter i,.est-chip span,.est-seg span{transition:none}.est-flash{animation:none}}

/* Light version for /bespoke-software (white band) */
.est-section--light{color:#0e0a17;padding:110px 0}
.est-section--light .est-eyebrow{color:#6d28d9}
.est-section--light .est-eyebrow::before{background:#6d28d9}
.ap-inner-page main .est-section--light .est-h2,.est-section--light .est-h2{color:#0e0a17}
.ap-inner-page main .est-section--light .est-h2 b,.est-section--light .est-h2 b{color:#0e0a17}
.est-section--light .est-lead{color:#4f4860}
.est-section--light .est-panel{box-shadow:0 0 0 1px rgba(76,29,149,.08),0 50px 100px -50px rgba(59,26,98,.45)}
@media (max-width:640px){.est-section--light{padding:72px 0}}