/* ManyChat pricing calculator (/tools/manychat-pricing-calculator).
   Shared system lives in ds2.css; this file only adds the calculator. */

.calc-hero{padding:148px 0 40px}
.calc-hero h1{max-width:14em}
.calc-hero .sub{color:var(--text-2);font-size:1.125rem;margin-top:18px;max-width:38em}
.calc-hero .checked{color:var(--text-3);font-size:0.875rem;margin-top:10px}

/* ---------- inputs ---------- */
.calc{padding:8px 0 40px}
.calc-panel{
  background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);
  box-shadow:var(--shadow-tile);padding:28px;
}
.calc-volume label{display:block;color:var(--text-2);font-size:0.9375rem;margin-bottom:10px}
.volume-row{display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.volume-input{
  width:7.5em;background:transparent;border:none;border-bottom:1px solid var(--border-strong);
  color:var(--text);font:inherit;font-size:clamp(2.25rem,6vw,3.25rem);font-weight:600;
  letter-spacing:-0.02em;font-variant-numeric:tabular-nums;padding:2px 0;border-radius:0;
}
.volume-input:focus{outline:none;border-bottom-color:var(--text)}
.volume-input:focus-visible{outline:2px solid var(--accent-l);outline-offset:4px}
.volume-range{
  flex:1;min-width:200px;height:36px;margin:0;cursor:pointer;
  -webkit-appearance:none;appearance:none;background:transparent;
}
.volume-range::-webkit-slider-runnable-track{
  height:10px;border-radius:999px;border:1px solid var(--border-strong);
  background:linear-gradient(to right,var(--text) var(--fill,50%),var(--border-strong) var(--fill,50%));
}
.volume-range::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;width:28px;height:28px;margin-top:-10px;border-radius:50%;
  background:var(--text);border:4px solid var(--bg);box-shadow:0 0 0 1px var(--text);
}
.volume-range::-moz-range-track{height:10px;border-radius:999px;border:1px solid var(--border-strong);background:var(--border-strong)}
.volume-range::-moz-range-progress{height:10px;border-radius:999px;background:var(--text)}
.volume-range::-moz-range-thumb{
  width:20px;height:20px;border-radius:50%;background:var(--text);border:4px solid var(--bg);box-shadow:0 0 0 1px var(--text);
}
.volume-range:focus{outline:none}
.volume-range:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 1px var(--text),0 0 0 5px var(--border-strong)}
.volume-range:focus-visible::-moz-range-thumb{box-shadow:0 0 0 1px var(--text),0 0 0 5px var(--border-strong)}

.calc-options{
  display:flex;flex-wrap:wrap;gap:14px 28px;align-items:center;
  margin-top:24px;padding-top:22px;border-top:1px solid var(--border);
}
.opt{display:flex;align-items:center;gap:12px;color:var(--text-2);font-size:0.9375rem}

.switch{position:relative;width:44px;height:26px;flex:none}
.switch input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer}
.switch span{
  position:absolute;inset:0;border-radius:999px;background:var(--panel-3);
  border:1px solid var(--border-strong);transition:background 0.2s ease;pointer-events:none;
}
.switch span::after{
  content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;
  background:var(--text-2);transition:transform 0.3s var(--spring),background 0.2s ease;
}
.switch input:checked + span{background:var(--text)}
.switch input:checked + span::after{transform:translateX(18px);background:var(--bg)}
.switch input:focus-visible + span{outline:2px solid var(--accent-l);outline-offset:3px}

.stepper{display:inline-flex;align-items:center;border:1px solid var(--border-strong);border-radius:var(--radius-xs)}
.stepper button{
  width:34px;height:34px;background:transparent;border:none;color:var(--text);font-size:1.125rem;line-height:1;
}
.stepper button:hover{background:var(--accent-dim)}
.stepper output{min-width:2.2em;text-align:center;font-variant-numeric:tabular-nums;color:var(--text)}

.seg{display:inline-flex;border:1px solid var(--border-strong);border-radius:var(--radius-xs);padding:3px;gap:3px}
.seg button{
  background:transparent;border:none;color:var(--text-2);font-size:0.875rem;
  padding:6px 12px;border-radius:9px;
}
.seg button[aria-pressed="true"]{background:var(--text);color:var(--bg)}

/* ---------- the two bills ---------- */
.bills{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:20px}
.bill{
  background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);
  padding:26px 26px 22px;display:flex;flex-direction:column;
}
.bill.is-cheaper{border-color:var(--text)}
.bill-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.bill-head h2{font-size:1.25rem;letter-spacing:-0.01em}
.bill-tag{font-size:0.8125rem;color:var(--bg);background:var(--text);border-radius:999px;padding:3px 10px;visibility:hidden}
.bill.is-cheaper .bill-tag{visibility:visible}

.lines{list-style:none;margin:20px 0 0;font-variant-numeric:tabular-nums}
.lines li{display:flex;align-items:baseline;gap:10px;padding:7px 0;color:var(--text-2);font-size:0.9375rem}
.lines li::after{content:"";order:1;flex:1;border-bottom:1px dotted var(--border-strong);transform:translateY(-4px)}
.lines li .amt{order:2;color:var(--text)}

.total{
  margin-top:16px;padding-top:16px;border-top:1px solid var(--border-strong);
  display:flex;align-items:baseline;justify-content:space-between;gap:12px;
}
.total span{color:var(--text-2);font-size:0.9375rem}
.total strong{
  font-size:clamp(2.25rem,5vw,3rem);font-weight:600;letter-spacing:-0.02em;
  font-variant-numeric:tabular-nums;line-height:1;
}
.total strong small{font-size:1rem;font-weight:500;color:var(--text-3);letter-spacing:0}
.bill-notes{list-style:none;margin-top:16px;color:var(--text-3);font-size:0.875rem}
.bill-notes li + li{margin-top:6px}

.verdict{
  margin-top:28px;font-size:clamp(1.25rem,2.6vw,1.625rem);font-weight:500;
  letter-spacing:-0.01em;max-width:34em;
}
.verdict-sub{color:var(--text-2);margin-top:8px;max-width:44em}

/* ---------- reference sections ---------- */
.ref{padding:72px 0 0}
.ref h2{max-width:20em}
.ref p{color:var(--text-2);max-width:42em;margin-top:16px}
.ref p a,.calc-foot a{text-decoration:underline;text-underline-offset:3px}

.table-scroll{overflow-x:auto;margin-top:28px;border:1px solid var(--border);border-radius:var(--radius-sm)}
.plan-table{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums;min-width:620px}
.plan-table th,.plan-table td{padding:13px 16px;text-align:left;border-bottom:1px solid var(--border);font-size:0.9375rem}
.plan-table thead th{color:var(--text-2);font-weight:500;background:var(--panel)}
.plan-table tbody th{font-weight:500}
.plan-table td{color:var(--text-2);white-space:nowrap}
.plan-table tr:last-child th,.plan-table tr:last-child td{border-bottom:none}

.diffs{list-style:none;margin-top:28px;max-width:46em}
.diffs li{padding:16px 0;border-bottom:1px solid var(--border);color:var(--text-2)}
.diffs li:first-child{border-top:1px solid var(--border)}
.diffs strong{color:var(--text);font-weight:500}

.calc-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:24px}
.faq-title{margin-top:72px}

.calc-foot{color:var(--text-3);font-size:0.875rem;margin-top:18px;max-width:52em}

@media (max-width:760px){
  .calc-hero{padding:120px 0 28px}
  .calc-panel{padding:22px}
  .bills{grid-template-columns:1fr}
  .bill{padding:22px}
}
@media (prefers-reduced-motion:reduce){
  .switch span::after{transition:none}
}