/* The pricing estimator ("What would a month cost?"), /pricing/ only, so it is its own file rather
   than more weight in home.css, which the homepage also loads. Behaviour is estimate.js.

   Layout and the dark result panel are the design from the preview site, rebuilt on this site's
   tokens. The panel is dark on every theme and declares its own ink (--est-*) instead of reading
   --ink and --bg, for the reason the closing card in home.css gives: those two flip with the paper,
   and a panel that borrowed them would swap its own ground and text whenever the theme changed. On
   night the panel is lifted a step above the paper so it still reads as a plate; on day and dusk it
   is the darkest thing on the page, which is the point of it. --est-ink-2 is 8.5:1 on the plate. */
.estimate{margin:26px 0 0}
.estimate .pricehead{margin-bottom:26px}
.estimate .pricehead h2{
  font-size:calc((clamp(22px,2.6vw,29px)) * var(--ts));line-height:1.2;letter-spacing:-.022em;margin:0 0 10px;
}
.estimate .pricehead .sub{margin:0;max-width:46em}
/* The by-hand sentence: shown by the markup's <noscript> without scripts, and by estimate.js if
   pricing.json cannot be read. With the estimator running it is hidden. */
.est-fallback{margin:0;max-width:46em;font-size:calc((15px) * var(--ts));line-height:1.6;color:var(--muted)}

.estimator{
  --est-bg:#111613;--est-ink:#EEF0EA;--est-ink-2:#AAB3AB;--est-line:#2A342D;
  display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);
  border:1px solid var(--rule-strong);border-radius:22px;overflow:hidden;
  background:rgba(var(--surface),.7);
}
:root[data-theme="night"] .estimator{--est-bg:#16202C;--est-line:#2C3A4B}
/* display:grid above would otherwise beat the hidden attribute the script waits on. */
.estimator[hidden]{display:none}

.est-in{padding:clamp(22px,3vw,36px);display:grid;gap:22px;align-content:start}
.est-field label{
  display:flex;justify-content:space-between;gap:12px;margin:0 0 10px;
  font-size:calc((14.5px) * var(--ts));font-weight:600;color:var(--ink);
}
.est-field output{font-family:var(--mono);font-size:calc((13px) * var(--ts));font-weight:500;color:var(--muted);white-space:nowrap}
.est-field select{
  width:100%;height:46px;padding:0 38px 0 14px;border:1px solid var(--rule-strong);border-radius:12px;
  background:var(--bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 6l4 4 4-4' fill='none' stroke='%23736F66' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 12px center/14px auto;
  color:var(--ink);font:inherit;font-size:calc((15px) * var(--ts));-webkit-appearance:none;appearance:none;
}
.est-field select:focus-visible{outline:2px solid var(--mint);outline-offset:2px}
.est-check{display:flex;gap:10px;align-items:flex-start;font-size:calc((14px) * var(--ts));line-height:1.5;color:var(--body);cursor:pointer}
.est-check input{flex:none;margin:3px 0 0;accent-color:var(--mint)}

.est-out{display:flex;flex-direction:column;padding:clamp(22px,3vw,36px);background:var(--est-bg);color:var(--est-ink)}
.eo-k{font-family:var(--mono);font-size:calc((11.5px) * var(--ts));letter-spacing:.12em;text-transform:uppercase;color:var(--est-ink-2)}
.eo-v{
  margin:12px 0 6px;font-size:calc((clamp(40px,5vw,58px)) * var(--ts));font-weight:600;
  letter-spacing:-.05em;line-height:1;font-variant-numeric:tabular-nums;
}
.eo-s{font-size:calc((14.5px) * var(--ts));color:var(--est-ink-2)}
.est-out dl{
  display:grid;grid-template-columns:1fr auto;gap:10px 16px;margin:28px 0 0;padding-top:20px;
  border-top:1px solid var(--est-line);font-size:calc((14.5px) * var(--ts));
}
.est-out dt{color:var(--est-ink-2)}
.est-out dd{margin:0;text-align:right;font-family:var(--mono);font-variant-numeric:tabular-nums}
.eo-notes{margin-top:auto;padding-top:22px}
/* The panel holds the estimate, or, for a model with no rate, what to do instead (estimate.js swaps them). display:flex on each
   would beat the hidden attribute it is swapped by, so each says so. The same goes for the fields that belong to one billing unit
   (data-units): .calc-slide is a grid (calc.css, which loads after this file, hence the three classes) and .est-check a flex row,
   and either would show a field the script has hidden. */
.est-in .est-field[hidden],.est-in .est-check[hidden]{display:none}
.eo-main{display:flex;flex-direction:column;flex:1}
.eo-main[hidden],.eo-ask[hidden],.eo-req[hidden]{display:none}
.eo-ask{display:flex;flex-direction:column;align-items:flex-start;flex:1}
.eo-name{
  margin:12px 0 8px;font-size:calc((clamp(24px,3vw,32px)) * var(--ts));font-weight:600;
  letter-spacing:-.03em;line-height:1.15;overflow-wrap:anywhere;
}
/* Under an estimate, for a model that is not served: the way to ask for it, set apart by a rule. */
.eo-req{display:flex;flex-direction:column;align-items:flex-start;gap:6px;margin-top:20px;padding-top:18px;border-top:1px solid var(--est-line)}
.eo-req .btn{margin-top:10px}
/* The panel is dark on every theme, so its button takes the panel's own ink and ground, as the closing card's does (home.css, .contact .btn-p).
   .btn-p borrows --txt and --bg, which flip with the paper, and left a dark pill on a dark plate. */
.eo-ask .btn,.eo-req .btn{background:var(--est-ink);border-color:var(--est-ink);color:var(--est-bg)}
.eo-ask .btn{margin-top:26px}
.eo-ask .btn:hover,.eo-req .btn:hover{opacity:.9}
.eo-foot{margin:0;font-size:calc((12.8px) * var(--ts));line-height:1.55;color:var(--est-ink-2)}
.eo-foot + .eo-foot{margin-top:12px}
.eo-foot.flag{color:var(--est-ink)}
.eo-foot a{color:var(--est-ink);text-decoration:underline;text-underline-offset:3px}

@media (max-width:900px){.estimator{grid-template-columns:1fr}}