/* Time calculator: Shorts per month, own editing time vs CLIPFABRIK. Monochrome, page style. */
.calc { max-width: 880px; margin: 56px auto 0; padding: clamp(26px, 4vw, 48px); text-align: left; position: relative; overflow: hidden; }
.calc::before { content: ""; position: absolute; right: -120px; top: -140px; width: 420px; height: 420px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(9,9,11,.06), transparent); }
.calc-top { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; }
.calc-k { font: 600 .78rem/1 var(--sf); letter-spacing: .14em; text-transform: uppercase; color: var(--soft); }
.calc-big { font: 700 clamp(2.8rem, 6vw, 4.4rem)/.9 var(--sf); letter-spacing: -.055em; color: var(--ink); font-variant-numeric: tabular-nums; }

/* Slider: black fill, white thumb with a ring. */
.calc input[type="range"] { -webkit-appearance: none; appearance: none; width: 100%; height: 30px; margin: 22px 0 6px; background: none; cursor: pointer; }
.calc input[type="range"]::-webkit-slider-runnable-track { height: 10px; border-radius: 999px;
  background: linear-gradient(to right, #09090b 0 var(--p, 11%), #e4e4e7 var(--p, 11%) 100%); box-shadow: inset 0 1px 2px rgba(9,9,11,.12); }
.calc input[type="range"]::-moz-range-track { height: 10px; border-radius: 999px; background: #e4e4e7; }
.calc input[type="range"]::-moz-range-progress { height: 10px; border-radius: 999px; background: #09090b; }
.calc input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 30px; height: 30px; margin-top: -10px; border-radius: 50%; background: #fff;
  box-shadow: 0 0 0 1px rgba(9,9,11,.14), 0 6px 16px -4px rgba(9,9,11,.4), inset 0 -3px 6px rgba(9,9,11,.08); transition: transform .2s; }
.calc input[type="range"]::-moz-range-thumb { width: 30px; height: 30px; border: 0; border-radius: 50%; background: #fff; box-shadow: 0 0 0 1px rgba(9,9,11,.14), 0 6px 16px -4px rgba(9,9,11,.4); }
.calc input[type="range"]:active::-webkit-slider-thumb { transform: scale(1.12); }
.calc input[type="range"]:focus-visible { outline: 2px solid #09090b; outline-offset: 6px; border-radius: 999px; }
.calc-scale { display: flex; justify-content: space-between; font: 500 .8rem/1 var(--sf); color: var(--soft); }

/* Comparison rows. */
.calc-row { margin-top: 34px; }
.calc-label { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 10px; }
.calc-label b { font: 600 1rem/1.2 var(--sf); letter-spacing: -.02em; color: var(--ink); }
.calc-label small { font: 500 .8rem/1.2 var(--sf); color: var(--soft); text-align: right; }
.calc-bar { height: 40px; border-radius: var(--radius); background: #f1f1f3; overflow: hidden; box-shadow: inset 0 0 0 1px rgba(9,9,11,.04); }
.calc-bar i { display: block; height: 100%; width: 0; border-radius: var(--radius); background: linear-gradient(90deg, #a1a1aa, #c4c4cc);
  transition: width .6s cubic-bezier(.2,.8,.2,1); }
.calc-row.us .calc-bar i { background: #09090b; min-width: 12px; }
.calc-val { margin: 10px 0 0; font: 600 .95rem/1.2 var(--sf); color: var(--text); font-variant-numeric: tabular-nums; }
.calc-row.us .calc-val { font: 700 clamp(1.6rem, 3vw, 2.1rem)/1.1 var(--sf); letter-spacing: -.04em; color: var(--ink); }

.calc-foot { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-top: 36px; padding-top: 30px; border-top: 1px solid var(--line); }
.calc-win { margin: 0; font: 600 1.05rem/1.3 var(--sf); letter-spacing: -.02em; color: var(--ink); }
.calc-win strong { font: 800 clamp(2rem, 4vw, 2.6rem)/1 var(--sf); letter-spacing: -.05em; margin-right: 6px; font-variant-numeric: tabular-nums; }
.calc-cta { height: 58px; padding: 0 8px 0 26px; gap: 16px; font-size: 1.04rem; box-shadow: 0 18px 36px -14px rgba(9,9,11,.55), inset 0 1px 0 rgba(255,255,255,.18); }
.calc-cta .hc-ic { width: 42px; height: 42px; border-radius: 50%; background: #fff; color: #09090b; display: grid; place-items: center; transition: transform .35s cubic-bezier(.2,.8,.2,1); }
.calc-cta .hc-ic svg { width: 18px; height: 18px; }
.calc-cta:hover .hc-ic { transform: translateX(3px) rotate(-45deg); }
.calc-price { margin: 18px 0 0; font: 600 .9rem/1.3 var(--sf); color: var(--text); }
.calc-fine { margin: 10px 0 0; font: 400 .78rem/1.5 var(--sf); color: var(--soft); }
@media (max-width: 560px) { .calc-label { flex-direction: column; gap: 4px; } .calc-label small { text-align: left; } .calc-cta { width: 100%; justify-content: space-between; } }
@media (prefers-reduced-motion: reduce) { .calc-bar i { transition: none; } }