/* The savings calculators ("#calculator" on /models/, /context/, /governance/) and the three tiles
   on /pricing/ that send a reader to them. Behaviour is calc.js.

   TWO PAGE FAMILIES, ONE FILE. The product pages load app.css (--txt, --dim, --line) and /pricing/
   loads home.css (--ink, --muted, --rule): the same palette under different names. Every colour
   below is read through a --c-* alias that tries the home.css name and falls back to the app.css
   one, the way feedback.css does, so this file has no per-page copy of anything.

   The result plate is dark on every theme and declares its own ink, for the reason estimate.css
   gives: --ink and --bg flip with the paper, and a plate that borrowed them would swap its own
   ground and text whenever the theme changed. A capability's colour is its tile: a small square in
   the eyebrow and a rule across the top of the plate, never a fill behind text, so the four fixed
   hues (Models blue, Context green, Governance amber) are never asked to carry contrast. */
/* The estimator on /pricing/ is not a calculator section but uses the same sliders, so it takes the same tokens. */
section.calc,.estimate{
  --c-ink:var(--ink,var(--txt));
  --c-body:var(--body,var(--dim));
  --c-muted:var(--muted,var(--dim2));
  --c-rule:var(--rule,var(--line));
  --c-rule2:var(--rule-strong,var(--line2));
  --c-hue:var(--mint);
  --c-plate:#111613;--c-plate-ink:#EEF0EA;--c-plate-ink2:#AAB3AB;--c-plate-line:#2A342D;
}
:root[data-theme="night"] section.calc{--c-plate:#16202C;--c-plate-line:#2C3A4B}
section.calc[data-calc="models"]{--c-hue:var(--p-models)}
section.calc[data-calc="context"]{--c-hue:var(--p-context)}
section.calc[data-calc="governance"]{--c-hue:var(--p-gov)}

/* The by-hand sentence: shown by the markup's <noscript> without scripts, and by calc.js if the
   inputs it needs cannot be read. With the calculator running it is hidden. */
section.calc .calc-fallback{margin:0;max-width:46em;font-size:calc((15px) * var(--ts,1));line-height:1.6;color:var(--c-muted)}

.calc-box{
  display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);
  border:1px solid var(--c-rule2);border-radius:22px;
  /* clip, not hidden: hidden makes the box a scroll container, and the result plate below is sticky
     so it stays in view while a long form is filled in. Where clip is unsupported the corners
     still round and the plate simply scrolls with the page. */
  overflow:hidden;overflow:clip;
  background:rgba(var(--surface,255,255,255),.7);
}
/* display:grid above would otherwise beat the hidden attribute the script waits on. */
.calc-box[hidden],.calc-fallback[hidden],.calc [data-own][hidden],.calc-note[hidden]{display:none}

.calc-in{padding:clamp(22px,3vw,34px);display:grid;gap:20px;align-content:start}
.calc-field label{
  display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin:0 0 8px;
  font-size:calc((14.5px) * var(--ts,1));font-weight:600;color:var(--c-ink);
}
/* The short name of the count in the field ("100K"), written beside the label by calc.js. */
.calc-readout .calc-size{font-family:var(--mono);font-size:calc((13.5px) * var(--ts,1));font-weight:600;color:var(--c-hue);white-space:nowrap}
.calc-size:empty{display:none}
.calc-hint{display:block;margin:6px 0 0;font-size:calc((12.8px) * var(--ts,1));line-height:1.5;color:var(--c-muted)}
.calc-two{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.calc-field select,.calc-field input[type=number],.calc-field input[type=text]{
  width:100%;height:46px;padding:0 14px;border:1px solid var(--c-rule2);border-radius:12px;
  background:var(--bg);color:var(--c-ink);font:inherit;font-size:calc((15px) * var(--ts,1));
  font-variant-numeric:tabular-nums;box-sizing:border-box;
}
.calc-field select{
  padding-right:38px;-webkit-appearance:none;appearance:none;
  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;
}
.calc-field select:focus-visible,.calc-field input:focus-visible{outline:2px solid var(--c-hue);outline-offset:2px}
/* A numeric field is a slider. The label and the exact number share a row (the number is a text box
   you can type into, with its short name beside it); the slider is under them; the suggested sizes
   sit along the track at the place each one is on it. calc.js builds the readout, the slider and the
   marks around the field's own input, so none of this is written in the markup. */
.calc-field.calc-slide{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:12px;align-items:center}
.calc-slide > label{grid-column:1;margin:0}
.calc-slide > .calc-readout{grid-column:2;display:flex;align-items:center;justify-content:flex-end;gap:8px}
.calc-slide > .calc-range{grid-column:1 / -1;margin:10px 0 0}
.calc-slide > .calc-hint{grid-column:1 / -1}
.calc-field .calc-readout input[type=text]{
  width:8.2em;height:34px;padding:0 10px;border-radius:9px;text-align:right;
  font-family:var(--mono);font-size:calc((14px) * var(--ts,1));
}
.calc-unit{margin-left:-2px;font-family:var(--mono);font-size:calc((13px) * var(--ts,1));color:var(--c-muted)}

.calc-range{
  --p:0%;-webkit-appearance:none;appearance:none;display:block;width:100%;height:22px;margin:0;
  background:transparent;cursor:pointer;
}
.calc-range:focus-visible{outline:2px solid var(--c-hue);outline-offset:4px;border-radius:999px}
.calc-range::-webkit-slider-runnable-track{height:6px;border-radius:999px;background:linear-gradient(to right,var(--c-hue) var(--p),var(--c-rule2) var(--p))}
.calc-range::-moz-range-track{height:6px;border-radius:999px;background:var(--c-rule2)}
.calc-range::-moz-range-progress{height:6px;border-radius:999px;background:var(--c-hue)}
.calc-range::-webkit-slider-thumb{
  -webkit-appearance:none;width:18px;height:18px;margin-top:-6px;border-radius:50%;
  background:var(--bg);border:2px solid var(--c-hue);box-sizing:border-box;box-shadow:0 1px 3px rgba(0,0,0,.2);
}
.calc-range::-moz-range-thumb{width:14px;height:14px;border-radius:50%;background:var(--bg);border:2px solid var(--c-hue);box-shadow:0 1px 3px rgba(0,0,0,.2)}


/* Ticks, worked out from the slider's range and drawn by calc.js: a short mark at every step, and a
   number under the labelled ones, which can be clicked to set that value. Minor marks (2 and 5 on a
   log slider) have no number. */
.calc-ticks{grid-column:1 / -1;position:relative;height:28px;margin:0}
.calc-tick{position:absolute;top:0;transform:translateX(-50%);margin:0;padding:0;border:0;background:none}
.calc-tick:not(.major){width:1px;height:4px;background:var(--c-rule2)}
.calc-tick.major{
  padding:9px 3px 0;font-family:var(--mono);font-size:calc((12px) * var(--ts,1));line-height:1;
  color:var(--c-muted);white-space:nowrap;cursor:pointer;border-radius:5px;
}
.calc-tick.major::before{content:"";position:absolute;left:50%;top:0;width:1px;height:7px;background:var(--c-muted)}
.calc-tick.major:hover{color:var(--c-ink)}
.calc-tick.major:focus-visible{outline:2px solid var(--c-hue);outline-offset:1px}
.calc-tick.major[aria-pressed="true"]{color:var(--c-hue);font-weight:700}
.calc-tick.major[aria-pressed="true"]::before{background:var(--c-hue)}
.calc-tick[hidden]{display:none}

/* Advanced: the full form behind one disclosure, so the first view is a setup, a provider and a count. */
.calc-adv{border-top:1px solid var(--c-rule);padding-top:16px}
.calc-adv > summary{
  display:flex;align-items:center;gap:10px;cursor:pointer;list-style:none;
  font-size:calc((14.5px) * var(--ts,1));font-weight:600;color:var(--c-ink);
}
.calc-adv > summary::-webkit-details-marker{display:none}
.calc-adv > summary::before{
  content:"";flex:none;width:7px;height:7px;border-right:2px solid var(--c-muted);border-bottom:2px solid var(--c-muted);
  transform:rotate(-45deg);margin:0 2px 0 3px;
}
.calc-adv[open] > summary::before{transform:rotate(45deg);margin-bottom:3px}
.calc-adv > summary span{font-weight:400;color:var(--c-muted)}
.calc-adv > summary:focus-visible{outline:2px solid var(--c-hue);outline-offset:4px;border-radius:6px}
.calc-adv-body{display:grid;gap:20px;margin-top:18px}

.calc-own{display:grid;gap:16px;padding:16px;border:1px dashed var(--c-rule2);border-radius:14px}

.calc-out{
  display:flex;flex-direction:column;padding:clamp(22px,3vw,34px);
  background:var(--c-plate);color:var(--c-plate-ink);border-top:3px solid var(--c-hue);
}
.calc-out .co-stick{position:sticky;top:84px;width:100%}
.calc-out .co-k{font-family:var(--mono);font-size:calc((11.5px) * var(--ts,1));letter-spacing:.12em;text-transform:uppercase;color:var(--c-plate-ink2)}
.calc-out .co-v{
  margin:12px 0 6px;font-size:calc((clamp(38px,4.6vw,54px)) * var(--ts,1));font-weight:600;
  letter-spacing:-.05em;line-height:1;font-variant-numeric:tabular-nums;
}
.calc-out .co-s{font-size:calc((14.5px) * var(--ts,1));color:var(--c-plate-ink2);line-height:1.45}
/* app.css styles every th and td on the product pages (padding, a rule under each cell, mono ink in
   the page's own colour) and turns every table into a scrolling block on a phone. The plate is a
   different ground, so this resets all of it, by element, one level more specific than that rule. */
.calc-out table{display:table;width:100%;margin:26px 0 0;border-collapse:collapse;overflow:visible;font-size:calc((14px) * var(--ts,1))}
.calc-out table th,.calc-out table td{
  padding:10px 0;border:0;background:none;color:var(--c-plate-ink);
  font:inherit;letter-spacing:0;text-transform:none;text-align:right;vertical-align:baseline;
}
.calc-out table thead th{
  padding:0 0 10px;font-family:var(--mono);font-size:calc((11px) * var(--ts,1));
  font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--c-plate-ink2);border-bottom:1px solid var(--c-plate-line);
}
.calc-out table tbody th{width:42%;padding-right:14px;text-align:left;font-weight:400;color:var(--c-plate-ink2)}
.calc-out table tbody td{padding-left:12px;font-family:var(--mono);font-variant-numeric:tabular-nums}
.calc-out table tbody tr + tr > *{border-top:1px solid var(--c-plate-line)}
.calc-out table td small{display:block;margin:2px 0 0;font-family:inherit;font-size:calc((11.5px) * var(--ts,1));letter-spacing:0;color:var(--c-plate-ink2)}
.calc-out table .calc-total th,.calc-out table .calc-total td{color:var(--c-plate-ink);font-weight:600}
.calc-note{margin:0;padding-top:20px;font-size:calc((12.8px) * var(--ts,1));line-height:1.55;color:var(--c-plate-ink2)}
.calc-foot{margin:14px 0 0;max-width:52em;font-size:calc((13.5px) * var(--ts,1));line-height:1.6;color:var(--c-muted)}
.calc-foot a{color:var(--c-ink);text-underline-offset:3px}

@media (max-width:900px){
  .calc-box{grid-template-columns:1fr}
  .calc-out .co-stick{position:static}
}
@media (max-width:480px){
  .calc-two{grid-template-columns:1fr}
}

/* /pricing/: one tile per product, each a link to that product's calculator. */
.savetiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin:0}
.savetile{
  --c-hue:var(--mint);
  display:flex;flex-direction:column;gap:8px;padding:22px 22px 20px;text-decoration:none;color:inherit;
  border:1px solid var(--rule-strong,var(--line2));border-top:3px solid var(--c-hue);border-radius:16px;
  background:rgba(var(--surface,255,255,255),.7);
}
.savetile[data-product="models"]{--c-hue:var(--p-models)}
.savetile[data-product="context"]{--c-hue:var(--p-context)}
.savetile[data-product="governance"]{--c-hue:var(--p-gov)}
.savetile h3{margin:0;font-size:calc((18px) * var(--ts,1));letter-spacing:-.01em;color:var(--ink,var(--txt))}
.savetile p{margin:0;font-size:calc((14.5px) * var(--ts,1));line-height:1.55;color:var(--muted,var(--dim2))}
.savetile .go{margin-top:auto;padding-top:6px;font-size:calc((14px) * var(--ts,1));font-weight:600;color:var(--ink,var(--txt))}
.savetile:hover,.savetile:focus-visible{border-color:var(--c-hue)}
.savetile:focus-visible{outline:2px solid var(--c-hue);outline-offset:3px}
@media (max-width:900px){.savetiles{grid-template-columns:1fr}}
.saveband{margin:26px 0 0}
.saveband .pricehead{margin-bottom:22px}
.saveband .pricehead h2{
  font-size:calc((clamp(22px,2.6vw,29px)) * var(--ts,1));line-height:1.2;letter-spacing:-.022em;margin:0 0 10px;
}
.saveband .pricehead .sub{margin:0;max-width:46em}