/* ==========================================================
   HYTIX — Pricing page: the fee calculator
   ========================================================== */

/* the "what's included" checklist runs to nine lines against three lines of
   copy - centering the columns against each other pushed the copy down into
   the whitespace instead of letting both start at the same line */
.split.top{align-items:start;}

.calc{
    display:grid; grid-template-columns:0.8fr 1.2fr; gap:0;
    border:1px solid var(--line); border-radius:var(--radius);
    overflow:hidden; background:var(--paper); max-width:1000px; margin:0 auto;
  }

.calc-inputs{padding:32px 30px; background:var(--cream); border-right:1px solid var(--line);}

.input-prefix{position:relative;}

.input-prefix span{
    position:absolute; left:14px; top:50%; transform:translateY(-50%);
    font-size:15px; font-weight:600; color:var(--muted); pointer-events:none;
  }

.input-prefix input{padding-left:28px;}

.calc-hint{font-size:12.5px; color:var(--muted); margin:14px 0 0; line-height:1.5;}

.calc-out{padding:30px;}

.calc-us{
    border:1.5px solid var(--coral); border-radius:var(--radius-sm);
    background:var(--coral-tint); padding:20px 22px; margin-bottom:22px;
  }

.calc-label{
    font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:0.12em;
    text-transform:uppercase; color:var(--coral-deep); display:block; margin-bottom:10px;
  }

.calc-total{
    font-family:'Archivo',sans-serif; font-weight:800; font-size:40px;
    color:var(--ink); letter-spacing:-0.035em; line-height:1; display:block;
  }

.calc-per{font-size:13px; color:var(--muted); display:block; margin-top:8px;}

table.calc-table{width:100%; border-collapse:collapse;}

table.calc-table th{
    font-family:'JetBrains Mono',monospace; font-size:10.5px; letter-spacing:0.1em;
    text-transform:uppercase; color:var(--muted); font-weight:600;
    text-align:left; padding:0 0 10px; border-bottom:1px solid var(--line2);
  }

table.calc-table th:last-child, table.calc-table td:last-child{text-align:right;}

table.calc-table td{
    padding:12px 0; font-size:14.5px; color:var(--muted);
    border-bottom:1px solid var(--line);
  }

table.calc-table tr:last-child td{border-bottom:none;}

table.calc-table td:first-child{color:var(--ink); font-weight:600;}

table.calc-table td.fee,
table.calc-table td.save{font-family:'JetBrains Mono',monospace; font-size:13.5px;}

table.calc-table td.save{color:var(--mint); font-weight:600;}

/* when a competitor is cheaper we say so rather than hiding the row - a
   calculator that only ever flatters us is one nobody trusts twice */
table.calc-table td.save.worse{color:var(--muted); font-weight:500;}

@media (max-width:820px){
  .calc{grid-template-columns:1fr;}
  .calc-inputs{border-right:none; border-bottom:1px solid var(--line);}
}