/* tools/pricing-calculator. Loaded after css/site.css.

   The page's own 16KB <style> block rebuilt on the design tokens: 75 rules, 8
   gradients, 13 box-shadows and a dozen hardcoded greys, replaced by hairlines,
   one gradient on the primary action and the site's type scale.

   Every selector here matches the one it replaces. The calculator's JavaScript
   addresses 22 element ids directly and the markup was not touched, so nothing
   in this file can change what the tool computes — only how it reads. */

body.pc{
  --pc-rel:10px;       /* a label and its field */
  --pc-field:20px;     /* between fields */
  --pc-block:44px;     /* between blocks inside a card */
  --pc-section:72px;   /* between sections */
}

/* ── hero ─────────────────────────────────────────────────────────────────
   Was a purple gradient band with a decorative ::before. Now a plain section
   head on the tint, like every other page's opening. */
body.pc .calc-hero{background:var(--tint);padding:150px 20px 56px;text-align:center;
  border-bottom:1px solid var(--line)}
body.pc .calc-hero::before{display:none}
body.pc .calc-hero h1{font-size:40px;font-weight:800;letter-spacing:-.03em;line-height:1.14;
  color:var(--ink);margin:0 auto 16px;max-width:760px;text-wrap:balance}
body.pc .calc-hero p{font-size:17.5px;line-height:1.7;color:var(--body);
  margin:0 auto;max-width:640px;text-wrap:pretty}

/* ── how it works ─────────────────────────────────────────────────────────
   The same hairline-divided container the landing pages use for their steps. */
body.pc .how-strip{padding:var(--pc-section) 20px 0;max-width:980px;margin:0 auto}
body.pc .how-strip h2{font-size:24px;font-weight:800;letter-spacing:-.022em;color:var(--ink);
  margin:0 0 28px;text-align:center}
body.pc .how-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;
  background:var(--line);border:1px solid var(--line);border-radius:20px;overflow:hidden}
body.pc .how-step{background:#fff;padding:26px 24px;min-width:0}
body.pc .how-step .step-num{width:32px;height:32px;border-radius:50%;display:flex;
  align-items:center;justify-content:center;background:var(--tint);color:var(--pu);
  font-size:13.5px;font-weight:800;margin-bottom:14px}
body.pc .how-step h3{font-size:17px;font-weight:700;letter-spacing:-.016em;color:var(--ink);margin:0 0 8px}
body.pc .how-step p{font-size:15px;line-height:1.65;color:var(--body);margin:0}

/* ── the tool ─────────────────────────────────────────────────────────────
   Inputs on the left, the live figure on the right. */
body.pc .calc-container{max-width:980px;margin:0 auto;padding:var(--pc-section) 20px}
body.pc .calc-grid{display:grid;grid-template-columns:1fr 1fr;gap:28px;align-items:start}
body.pc .calc-card{background:#fff;border:1px solid var(--line);border-radius:20px;
  padding:30px 28px;box-shadow:none;min-width:0}
body.pc .calc-card h2{display:flex;align-items:center;gap:10px;font-size:19px;font-weight:800;
  letter-spacing:-.02em;color:var(--ink);margin:0 0 24px}
body.pc .calc-card h2 .icon{display:flex;align-items:center;color:var(--pu)}
body.pc .calc-card h2 .icon svg{width:20px;height:20px}

body.pc .input-group{margin-bottom:var(--pc-field)}
body.pc .input-group label{display:block;font-size:14px;font-weight:700;color:var(--ink);
  margin-bottom:var(--pc-rel)}
body.pc .input-group .hint{display:block;font-size:13px;font-weight:500;color:var(--mute);
  margin-top:6px;line-height:1.5}
body.pc .input-group input[type="number"]{width:100%;font-family:inherit;font-size:16px;
  font-weight:600;color:var(--ink);background:#fff;border:1px solid var(--line);
  border-radius:11px;padding:12px 14px;transition:border-color .18s ease,box-shadow .18s ease}
body.pc .input-group input[type="number"]::-webkit-inner-spin-button,
body.pc .input-group input[type="number"]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
body.pc .input-group input[type="number"]:focus{outline:none;border-color:var(--pu);
  box-shadow:0 0 0 3px rgba(102,126,234,.14)}

/* A prefixed or suffixed field is one control, so the border belongs to the
   wrapper and the input inside it carries none. */
body.pc .input-prefix,body.pc .input-suffix{display:flex;align-items:stretch;
  border:1px solid var(--line);border-radius:11px;overflow:hidden;background:#fff;
  transition:border-color .18s ease,box-shadow .18s ease}
body.pc .input-prefix:focus-within,body.pc .input-suffix:focus-within{border-color:var(--pu);
  box-shadow:0 0 0 3px rgba(102,126,234,.14)}
body.pc .input-prefix span,body.pc .input-suffix span{display:flex;align-items:center;
  padding:0 13px;background:var(--tint);color:var(--mute);font-size:15px;font-weight:700;
  white-space:nowrap}
body.pc .input-prefix span{border-right:1px solid var(--line)}
body.pc .input-suffix span{border-left:1px solid var(--line)}
body.pc .input-prefix input,body.pc .input-suffix input{flex:1;min-width:0;border:0;
  border-radius:0;box-shadow:none}
body.pc .input-prefix input:focus,body.pc .input-suffix input:focus{outline:none;box-shadow:none}

/* ── results ──────────────────────────────────────────────────────────────
   The number is the only large thing on the page. Everything else supports it. */
body.pc .results-card{background:var(--tint);border:1px solid var(--line)}
body.pc .price-display{text-align:center;padding:6px 0 26px;border-bottom:1px solid var(--line);
  margin-bottom:24px}
body.pc .price-label{font-size:11.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  color:var(--pu);margin-bottom:10px}
body.pc .price-value{font-size:52px;font-weight:800;letter-spacing:-.035em;line-height:1;
  color:var(--ink)}
body.pc .price-sub{font-size:14px;color:var(--mute);margin-top:10px}

body.pc .breakdown-list{list-style:none;padding:0;margin:0 0 var(--pc-block)}
body.pc .breakdown-list li{display:flex;justify-content:space-between;gap:16px;
  padding:11px 0;border-bottom:1px solid var(--line);font-size:15px;line-height:1.5}
body.pc .breakdown-list li:last-child{border-bottom:0}
body.pc .breakdown-list li span:first-child{color:var(--body)}
body.pc .breakdown-list li span:last-child{color:var(--ink);font-weight:700;
  font-variant-numeric:tabular-nums;white-space:nowrap}

body.pc .revenue-box{background:#fff;border:1px solid var(--line);border-radius:14px;
  padding:18px 20px;margin-bottom:var(--pc-block)}
body.pc .revenue-box .revenue-row{display:flex;justify-content:space-between;gap:16px;
  align-items:baseline}
body.pc .revenue-box .revenue-row + .revenue-row{margin-top:10px;padding-top:10px;
  border-top:1px solid var(--line)}
body.pc .revenue-box .revenue-label{font-size:14.5px;color:var(--body)}
body.pc .revenue-box .revenue-value{font-size:19px;font-weight:800;letter-spacing:-.02em;
  color:var(--ink);font-variant-numeric:tabular-nums}

/* Both children, not just <button>. "Start Free Trial" is an <a>, so a rule
   scoped to button gave it the colour but none of the padding or sizing and its
   label rendered clipped by its own box. */
body.pc .action-buttons{display:flex;gap:10px;flex-wrap:wrap;align-items:stretch}
body.pc .action-buttons button,
body.pc .action-buttons a{flex:1 1 0;min-width:0;font-family:inherit;font-size:14.5px;
  font-weight:700;padding:13px 18px;border-radius:12px;cursor:pointer;text-decoration:none;
  white-space:nowrap;justify-content:center;
  transition:border-color .2s ease,color .2s ease,transform .2s ease}
body.pc .btn-print{background:#fff;border:1px solid var(--line);color:var(--ink)}
body.pc .btn-print:hover{border-color:var(--pu);color:var(--pu)}
body.pc .btn-trial{background:var(--grad);border:1px solid transparent;color:#fff;
  box-shadow:0 6px 18px rgba(102,126,234,.32)}
body.pc .btn-trial:hover{color:#fff;transform:translateY(-1px)}

/* ── lead capture ─────────────────────────────────────────────────────────
   A quiet panel under the tool, not a second hero. */
body.pc .lead-panel{max-width:560px;margin:var(--pc-section) auto 0;background:var(--tint);
  border:1px solid var(--line);border-radius:20px;padding:30px 28px;text-align:center}
body.pc .lead-panel h3{font-size:20px;font-weight:800;letter-spacing:-.02em;color:var(--ink);
  margin:0 0 10px}
body.pc .lead-panel p{font-size:15.5px;line-height:1.65;color:var(--body);margin:0 0 22px}
/* The spam honeypot. A decoy "Website" field that must be invisible to people
   and fillable by bots — the form treats anything in it as spam.
   Dropping this rule during the restyle made it VISIBLE, which does not just
   look wrong: a real person would helpfully type their website in and be
   rejected as a bot. Hidden two ways, as it was originally, because a single
   display:none can be beaten by a later rule and the cost of that is silent
   lost leads. */
body.pc .hp-field{position:absolute;left:-9999px;top:-9999px;opacity:0;height:0;width:0;
  overflow:hidden;pointer-events:none}
body.pc .hp-field{display:none !important}

body.pc .lead-form{display:flex;flex-direction:column;gap:14px}
body.pc .lead-form input[type="email"]{width:100%;font-family:inherit;font-size:15.5px;
  color:var(--ink);background:#fff;border:1px solid var(--line);border-radius:11px;padding:13px 14px;
  transition:border-color .18s ease,box-shadow .18s ease}
body.pc .lead-form input[type="email"]:focus{outline:none;border-color:var(--pu);
  box-shadow:0 0 0 3px rgba(102,126,234,.14)}
body.pc .consent-row{display:flex;align-items:flex-start;gap:9px;text-align:left}
body.pc .consent-row input[type="checkbox"]{margin-top:3px;flex:none;width:15px;height:15px;
  accent-color:var(--pu)}
body.pc .consent-row label{font-size:13px;line-height:1.5;color:var(--mute)}
body.pc .consent-row label a{color:var(--pu);font-weight:600}
body.pc .lead-form button[type="submit"]{font-family:inherit;font-size:15.5px;font-weight:700;
  padding:14px 20px;border:1px solid transparent;border-radius:12px;background:var(--grad);
  color:#fff;cursor:pointer;box-shadow:0 6px 18px rgba(102,126,234,.32);
  transition:transform .2s ease,opacity .2s ease}
body.pc .lead-form button[type="submit"]:hover{transform:translateY(-1px)}
body.pc .lead-form button[type="submit"]:disabled{opacity:.55;cursor:not-allowed;
  transform:none;box-shadow:none}

body.pc .lead-success{display:none}
body.pc .lead-success.show{display:block;text-align:center}
body.pc .lead-success .tick-circle{width:46px;height:46px;border-radius:50%;margin:0 auto 14px;
  display:flex;align-items:center;justify-content:center;background:var(--tint);border:1px solid var(--line)}
body.pc .lead-success .tick-circle svg{width:22px;height:22px;color:var(--pu)}
body.pc .lead-success h3{font-size:19px;font-weight:800;color:var(--ink);margin:0 0 8px}
body.pc .lead-success p{font-size:15px;line-height:1.6;color:var(--body);margin:0}

/* ── closing CTA ──────────────────────────────────────────────────────────
   .btn-primary and .cta-btn were defined in styles.css, which this page no
   longer loads — exactly the trap that left the UK page's only call to action
   rendering as a plain text link. Both are given a rule here. */
body.pc .calc-cta{padding:var(--pc-section) 20px;text-align:center;background:var(--tint);
  border-top:1px solid var(--line);margin-top:var(--pc-section)}
body.pc .calc-cta h2{font-size:30px;font-weight:800;letter-spacing:-.026em;line-height:1.18;
  color:var(--ink);margin:0 auto 14px;max-width:640px;text-wrap:balance}
body.pc .calc-cta p{font-size:17px;line-height:1.7;color:var(--body);margin:0 auto 28px;
  max-width:600px;text-wrap:pretty}
body.pc a.btn-primary,body.pc a.cta-btn{display:inline-block;background:var(--grad);
  border:1px solid transparent;color:#fff;font-size:15.5px;font-weight:700;padding:15px 28px;
  border-radius:13px;box-shadow:0 6px 18px rgba(102,126,234,.32);
  transition:transform .2s ease}
body.pc a.btn-primary:hover,body.pc a.cta-btn:hover{color:#fff;transform:translateY(-1px)}

@media (max-width:860px){
  body.pc{--pc-section:48px;--pc-block:32px;--pc-field:16px}
  body.pc .calc-hero{padding:126px 20px 40px}
  body.pc .calc-hero h1{font-size:29px}
  body.pc .calc-hero p{font-size:16.5px}
  body.pc .how-grid{grid-template-columns:1fr}
  body.pc .calc-grid{grid-template-columns:1fr}
  body.pc .calc-card{padding:24px 20px}
  body.pc .price-value{font-size:42px}
  body.pc .calc-cta h2{font-size:24px}
  body.pc .action-buttons button{flex:1 1 100%}
}

/* Print: the breakdown is the point, the chrome is not. */
@media print{
  body.pc nav,body.pc footer,body.pc .calc-hero,body.pc .how-strip,
  body.pc .lead-panel,body.pc .calc-cta,body.pc .action-buttons{display:none}
  body.pc .calc-grid{grid-template-columns:1fr}
  body.pc .calc-card{border:1px solid #ddd;box-shadow:none;break-inside:avoid}
}