/* BizTorq — eCommerce Website Cost Calculator (cc- prefix) */
.cc { --cc-ink:#191233; --cc-purple:#6C3FD1; --cc-purple-2:#8B63E8; --cc-lilac:#A88BFF; --cc-bg:#F7F5FC; --cc-line:#E3DDF6; --cc-muted:#5A566E; --cc-wa:#1FA855; color:var(--cc-ink); overflow-x:hidden; }
.cc *{ box-sizing:border-box; }
.cc-wrap{ max-width:1240px; margin:0 auto; padding:0 clamp(16px,4vw,48px); }
.cc-narrow{ max-width:900px; }
.cc h1,.cc h2,.cc h3{ font-family:'Bricolage Grotesque',sans-serif; letter-spacing:-.02em; }
.cc-eyebrow{ display:inline-block; font-size:11px; font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:var(--cc-lilac); }

/* Hero */
.cc-hero{ background:var(--cc-ink); color:#F7F5FC; padding:clamp(40px,6vw,80px) 0 clamp(36px,5vw,64px); }
.cc-crumbs{ font-size:13px; color:#B9B1D6; margin-bottom:18px; }
.cc-crumbs a{ color:#D6D0EA; }
.cc-crumbs span{ margin:0 4px; }
.cc-hero h1{ font-weight:800; font-size:clamp(30px,5vw,54px); line-height:1.04; margin:14px 0 18px; max-width:20ch; }
.cc-quick{ font-size:clamp(15.5px,1.4vw,18px); line-height:1.65; color:#D6D0EA; max-width:72ch; margin:0 0 22px; }
.cc-quick strong{ color:#fff; }
.cc-trust{ list-style:none; padding:0; margin:0; display:flex; flex-wrap:wrap; gap:10px 22px; font-size:14px; color:#CFC6EE; }
.cc-trust li::before{ content:"✓ "; color:var(--cc-lilac); font-weight:700; }

/* Layout */
.cc-tool{ background:var(--cc-bg); padding:clamp(32px,5vw,64px) 0; }
.cc-grid{ display:grid; grid-template-columns:minmax(0,1fr) 380px; gap:clamp(20px,3vw,40px); align-items:start; }
.cc-form{ display:flex; flex-direction:column; gap:18px; }
.cc-step{ background:#fff; border:1px solid var(--cc-line); border-radius:4px; padding:clamp(18px,2.4vw,28px); margin:0; min-width:0; }
.cc-step[disabled]{ opacity:.55; }
.cc-step legend{ float:left; width:100%; padding:0; margin:0 0 16px; font-family:'Bricolage Grotesque',sans-serif; font-weight:700; font-size:clamp(17px,1.8vw,20px); display:flex; align-items:center; gap:10px; }
.cc-step legend + *{ clear:both; }
.cc-num{ width:28px; height:28px; border-radius:50%; background:var(--cc-purple); color:#fff; font-size:14px; display:inline-flex; align-items:center; justify-content:center; flex-shrink:0; }
.cc-hint{ clear:both; font-size:13.5px; color:var(--cc-muted); background:#F3F0FC; padding:10px 12px; border-radius:3px; margin:0 0 14px; }
.cc-sub{ display:block; font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--cc-muted); margin-bottom:10px; }

/* Store type cards */
.cc-cards{ display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:12px; }
.cc-card{ position:relative; cursor:pointer; }
.cc-card input,.cc-pill input{ position:absolute; opacity:0; pointer-events:none; }
.cc-card-body{ display:flex; flex-direction:column; gap:6px; height:100%; border:1.5px solid var(--cc-line); border-radius:4px; padding:14px; transition:border-color .15s, background .15s; }
.cc-card-title{ font-weight:700; font-size:15px; }
.cc-card-desc{ font-size:13px; line-height:1.5; color:var(--cc-muted); }
.cc-card-price{ margin-top:auto; font-size:13px; font-weight:700; color:var(--cc-purple); }
.cc-card:hover .cc-card-body{ border-color:var(--cc-lilac); }
.cc-card input:checked + .cc-card-body{ border-color:var(--cc-purple); background:#F5F1FF; box-shadow:inset 0 0 0 1px var(--cc-purple); }
.cc-card input:focus-visible + .cc-card-body,.cc-pill input:focus-visible + span{ outline:2px solid var(--cc-purple); outline-offset:2px; }

/* Product pills */
.cc-pills{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:14px; }
.cc-pill{ position:relative; cursor:pointer; }
.cc-pill span{ display:inline-block; border:1.5px solid var(--cc-line); border-radius:999px; padding:9px 14px; font-size:14px; font-weight:600; transition:all .15s; }
.cc-pill input:checked + span{ background:var(--cc-ink); border-color:var(--cc-ink); color:#fff; }

/* Checks and radios */
.cc-checks{ display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:8px 18px; }
.cc-check,.cc-radio{ display:flex; gap:10px; align-items:flex-start; font-size:14.5px; line-height:1.45; padding:6px 0; cursor:pointer; }
.cc-check input,.cc-radio input{ margin-top:3px; width:17px; height:17px; accent-color:var(--cc-purple); flex-shrink:0; }
.cc-check em{ font-style:normal; font-size:12.5px; font-weight:700; color:var(--cc-purple); white-space:nowrap; }
.cc-check-wide{ background:#FAF8FF; border:1px dashed var(--cc-line); border-radius:3px; padding:10px 12px; }
.cc-two{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:18px 28px; }

/* Buttons */
.cc-btn{ display:block; text-align:center; font-family:inherit; font-weight:700; font-size:15px; padding:15px 20px; border-radius:3px; border:none; cursor:pointer; text-decoration:none; transition:background .15s, color .15s; }
.cc-btn-primary{ background:var(--cc-purple); color:#fff; width:100%; }
.cc-btn-primary:hover{ background:var(--cc-purple-2); color:#fff; }
.cc-btn-dark{ background:var(--cc-ink); color:#fff; }
.cc-btn-wa{ background:var(--cc-wa); color:#fff; }
.cc-btn-wa:hover{ background:#178F47; color:#fff; }
.cc-btn-ghost{ border:1.5px solid #fff; color:#fff; background:transparent; }
.cc-btn-ghost:hover{ background:#fff; color:var(--cc-ink); }
.cc-js .cc-nojs-submit{ display:none; }

/* Result panel */
.cc-result{ position:sticky; top:90px; }
.cc-result-card{ background:var(--cc-ink); color:#F7F5FC; border-radius:4px; padding:clamp(20px,2.4vw,28px); display:flex; flex-direction:column; gap:12px; }
.cc-result-label{ font-size:12px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--cc-lilac); }
.cc-result-price{ font-family:'Bricolage Grotesque',sans-serif; font-weight:800; font-size:clamp(28px,3vw,36px); line-height:1.1; letter-spacing:-.02em; }
.cc-result-note{ font-size:13px; color:#B9B1D6; margin-top:-6px; }
.cc-result-row{ display:grid; grid-template-columns:1fr 1fr; gap:12px; border-top:1px solid rgba(255,255,255,.12); border-bottom:1px solid rgba(255,255,255,.12); padding:14px 0; }
.cc-result-row strong{ display:block; font-size:15.5px; margin-top:4px; }
.cc-mini{ font-size:11.5px; color:#B9B1D6; text-transform:uppercase; letter-spacing:.08em; }
.cc-breakdown summary{ cursor:pointer; font-weight:700; font-size:14px; margin-bottom:8px; }
.cc-breakdown table{ width:100%; border-collapse:collapse; font-size:13px; }
.cc-breakdown td{ padding:7px 0; border-bottom:1px solid rgba(255,255,255,.08); vertical-align:top; color:#E4DFF5; }
.cc-breakdown td:last-child{ text-align:right; white-space:nowrap; padding-left:10px; font-weight:600; }
.cc-breakdown em{ font-style:normal; color:var(--cc-lilac); font-weight:600; white-space:normal; }
.cc-result .cc-small{ color:#B9B1D6; }
.cc-small{ font-size:12.5px; line-height:1.55; color:var(--cc-muted); }

/* Lead */
.cc-lead{ background:#EEEAFA; padding:clamp(40px,6vw,80px) 0; }
.cc-lead-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:clamp(24px,4vw,56px); align-items:start; }
.cc-lead h2{ font-size:clamp(26px,3.4vw,38px); line-height:1.1; margin:12px 0 14px; }
.cc-lead p{ font-size:16px; line-height:1.65; color:#3E3A52; }
.cc-ticks{ list-style:none; padding:0; margin:18px 0 0; display:flex; flex-direction:column; gap:10px; font-weight:600; }
.cc-ticks li::before{ content:"✓"; display:inline-flex; align-items:center; justify-content:center; width:22px; height:22px; border-radius:50%; background:var(--cc-purple); color:#fff; font-size:12px; margin-right:10px; }
.cc-lead-card{ background:#fff; border:1px solid var(--cc-line); border-radius:4px; padding:clamp(20px,3vw,34px); }
.cc-lead .cc-small{ font-size:12.5px; color:var(--cc-muted); margin:12px 0 0; }
.cc-lead-estimate{ margin:0 0 16px; font-size:15px !important; }
.cc-lead-estimate strong{ color:var(--cc-purple); }
.cc-fields{ display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:14px; margin-bottom:14px; }
.cc-lead-card label{ display:block; font-size:13px; font-weight:600; color:#2A2640; margin-bottom:6px; }
.cc-lead-card input[type=text],.cc-lead-card input[type=tel],.cc-lead-card input[type=email],.cc-lead-card textarea{ width:100%; font-family:inherit; font-size:15px; padding:12px 13px; border:1px solid #DCD4F2; border-radius:3px; color:var(--cc-ink); background:#fff; }
.cc-lead-card input:focus,.cc-lead-card textarea:focus{ outline:2px solid var(--cc-purple); outline-offset:0; border-color:transparent; }
.cc-lead-card textarea{ margin-bottom:14px; resize:vertical; }
.cc-err{ display:block; color:#A42C2C; font-size:12.5px; margin-top:5px; }
.cc-alert{ background:#FFF3F3; border:1px solid #E8CACA; color:#8A2C2C; padding:11px 13px; font-size:14px; margin-bottom:14px; border-radius:3px; }
.cc-hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.cc-done{ display:flex; flex-direction:column; gap:12px; align-items:flex-start; }
.cc-done h3{ margin:0; font-size:24px; }
.cc-done p{ margin:0; }
.cc-done-icon{ width:46px; height:46px; border-radius:50%; background:var(--cc-purple); color:#fff; display:flex; align-items:center; justify-content:center; font-size:22px; font-weight:700; }

/* Content */
.cc-content{ background:#fff; padding:clamp(40px,6vw,88px) 0; }
.cc-content h2{ font-size:clamp(23px,2.8vw,31px); line-height:1.15; margin:48px 0 14px; }
.cc-content h2:first-child{ margin-top:0; }
.cc-content p,.cc-content li{ font-size:16px; line-height:1.7; color:#3E3A52; }
.cc-table-wrap{ overflow-x:auto; border:1px solid var(--cc-line); border-radius:4px; margin:6px 0 10px; }
.cc-table{ width:100%; border-collapse:collapse; font-size:14.5px; min-width:640px; }
.cc-table th{ background:var(--cc-ink); color:#fff; text-align:left; padding:12px 14px; font-size:13px; letter-spacing:.02em; }
.cc-table td{ padding:12px 14px; border-top:1px solid var(--cc-line); vertical-align:top; line-height:1.5; }
.cc-table tbody tr:nth-child(even) td{ background:#FAF8FF; }
.cc-list{ padding-left:22px; display:flex; flex-direction:column; gap:8px; }
.cc-examples{ display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:14px; }
.cc-example{ border:1px solid var(--cc-line); border-radius:4px; padding:18px; display:flex; flex-direction:column; gap:6px; }
.cc-example h3{ font-size:17px; margin:0; line-height:1.3; }
.cc-example p{ font-size:14px !important; margin:0; color:var(--cc-muted) !important; }
.cc-example-price{ font-family:'Bricolage Grotesque',sans-serif; font-weight:800; font-size:22px; color:var(--cc-purple); margin-top:6px; }
.cc-example a{ margin-top:auto; padding-top:8px; font-weight:700; font-size:14px; }
.cc-author{ border-left:3px solid var(--cc-purple); padding-left:14px; }
.cc-faq details{ border-bottom:1px solid var(--cc-line); padding:14px 0; }
.cc-faq summary{ cursor:pointer; font-weight:700; font-size:16.5px; list-style:none; position:relative; padding-right:30px; }
.cc-faq summary::-webkit-details-marker{ display:none; }
.cc-faq summary::after{ content:"+"; position:absolute; right:4px; top:-2px; font-size:22px; color:var(--cc-purple); }
.cc-faq details[open] summary::after{ content:"–"; }
.cc-faq p{ margin:10px 0 0; }
.cc-related{ columns:2; column-gap:30px; padding-left:20px; }

/* Final CTA */
.cc-final{ background:var(--cc-ink); color:#F7F5FC; padding:clamp(40px,6vw,72px) 0; text-align:center; }
.cc-final h2{ font-size:clamp(26px,3.4vw,38px); margin:0 0 10px; }
.cc-final p{ color:#D6D0EA; margin:0 0 22px; }
.cc-final-actions{ display:flex; flex-wrap:wrap; gap:12px; justify-content:center; }
.cc-final-actions .cc-btn{ width:auto; min-width:240px; }

.cc-mbar{ display:none; }
@media (max-width:980px){
  .cc-grid{ grid-template-columns:1fr; }
  .cc-result{ position:static; }
  .cc-js .cc-mbar{ display:flex; position:fixed; left:0; right:0; bottom:0; z-index:70; align-items:center; justify-content:space-between; gap:12px; background:var(--cc-ink); color:#fff; padding:12px 16px; box-shadow:0 -6px 20px rgba(25,18,51,.25); font-size:14px; }
  .cc-mbar strong{ font-family:'Bricolage Grotesque',sans-serif; font-size:18px; display:block; }
  .cc-mbar a{ background:var(--cc-purple); color:#fff; font-weight:700; padding:10px 14px; border-radius:3px; white-space:nowrap; }
  .cc-mbar.is-hidden{ display:none !important; }
  body:has(.cc-mbar:not(.is-hidden)) a[aria-label="WhatsApp"]{ bottom:84px !important; }
}
@media (max-width:600px){
  .cc-related{ columns:1; }
  .cc-result-row{ grid-template-columns:1fr; }
}