/* ============================================================
   Renergy, FAQ + pricing calculator components
   Added 2 September 2026. Loaded alongside renergy-shared.css.

   THIS FILE OVERRIDES NOTHING GLOBAL.
   No :root, no body, no element selectors, no font-family, every
   rule is scoped under .tw-block, which wraps each inserted section.
   The site's own typography (MatterSQ) and colours are inherited.
   That is deliberate: tw-content.css from the templates folder sets
   body and :root, and dropping it onto these Webflow pages would
   have changed the type and spacing of the whole site.

   Colours come from renergy-shared.css tokens where they exist, with
   literal fallbacks so this file still works if a token is renamed.
   --renergy-green (#00b259) is only ~2.6:1 on white, which fails
   WCAG AA for text, so text accents use --green-dark (#14663d) at
   about 7:1 instead. The bright green is kept for non-text accents.
   ============================================================ */

.tw-block{
  --tw-ink:   var(--text-color--text-primary, #111);
  --tw-soft:  #5c6360;                                   /* ~5.5:1 on white */
  --tw-line:  var(--gray-light, #dae5e0);
  --tw-soft-bg: #f5f8f6;
  --tw-accent: var(--green-dark, #14663d);
  --tw-bright: var(--renergy-green, #00b259);
  --tw-warn:  #8a4b0b;
  --tw-warn-bg: #fff6ec;
  --tw-roi-bg: #eaf7f0;                                  /* light mint, distinct from --tw-soft-bg */
  --tw-radius: 8px;
}

/* ---------- shared ----------
   renergy-shared.css is a Webflow export, and it zeroes paragraph and
   list margins globally. Without these, multi-paragraph FAQ answers run
   together into one wall of text. Scoped to .tw-block so the rest of the
   site keeps the reset it expects. */
.tw-block p{margin:0 0 1em}
.tw-block p:last-child{margin-bottom:0}
.tw-block ul,.tw-block ol{margin:0 0 1em;padding-left:1.35em}
.tw-block li{margin:.35em 0}
.tw-block li:last-child{margin-bottom:0}
.tw-block h3{margin:2em 0 .6em}
.tw-block h3:first-child{margin-top:0}
.tw-block blockquote{margin:0 0 1em;padding-left:1em;border-left:3px solid var(--tw-line)}

.tw-block .tw-callout{
  background:var(--tw-soft-bg);border-left:4px solid var(--tw-bright);
  border-radius:var(--tw-radius);padding:22px 26px;margin:0 0 2em}
.tw-block .tw-callout > :first-child{margin-top:0}
.tw-block .tw-callout > :last-child{margin-bottom:0}
.tw-block .tw-callout ul{margin:.6em 0;padding-left:1.3em}
.tw-block .tw-callout li{margin:.4em 0}

.tw-block .tw-note{font-size:.9em;color:var(--tw-soft);margin:1em 0 0}

/* Tables scroll inside their own box rather than the page [CLS/mobile] */
.tw-block .tbl{overflow-x:auto;margin:0 0 1.8em;-webkit-overflow-scrolling:touch}
.tw-block .tbl table{width:100%;border-collapse:collapse;min-width:520px}
.tw-block .tbl caption{caption-side:bottom;text-align:left;font-size:.85em;
  color:var(--tw-soft);padding-top:.7em}
.tw-block .tbl th,.tw-block .tbl td{
  text-align:left;padding:11px 13px;border-bottom:1px solid var(--tw-line);vertical-align:top}
.tw-block .tbl thead th{background:var(--tw-soft-bg);font-weight:700}
.tw-block .tbl tbody th{font-weight:700}

.tw-block .tw-fact{border:1px solid var(--tw-line);border-radius:var(--tw-radius);
  padding:20px 22px;margin:2em 0;background:#fff}
.tw-block .tw-fact .label{font-size:.8em;text-transform:uppercase;letter-spacing:.05em;
  color:var(--tw-soft);margin:0 0 .3em;font-weight:700}
.tw-block .tw-fact .big{font-size:2.4em;line-height:1.05;font-weight:700;
  color:var(--tw-accent);margin:0 0 .4em}
.tw-block .tw-fact p:last-child{margin-bottom:0}

/* The price headline (callout) and closing note read as running prose, so
   they keep a comfortable line length even though the section around them
   now spans a wide container-large column. Everything else in the section
   (the calculator grid) is free to use the extra width. Centered (not
   flush left) now that the section itself is much wider than they are. */
.tw-block .tw-callout{max-width:760px;margin-left:auto;margin-right:auto}
.tw-block .tw-note{max-width:760px;margin-left:auto;margin-right:auto}

/* The site's own padding-section-large (7rem/7rem) is the standard gap
   between sections, but with the connectivity table gone this section's
   content now ends much higher up inside that same padding, leaving a
   very tall gap before the FAQ heading. Trimmed for this section only. */
.section_pricing .padding-section-large{padding-bottom:3rem}

/* ---------- FAQ ----------
   No accordion CSS of our own here any more. The FAQ block now reuses
   the homepage's own .faq1_component / .faq1_accordion / .faq1_question /
   .faq1_answer markup and classes verbatim (styled by renergy-shared.css)
   and the site's existing generic accordion script (matches by class
   name, not by per-element id), so a product-page FAQ opens, closes and
   is sized exactly like the homepage's, nothing to duplicate here. */

/* ---------- pricing calculator ----------
   Progressive enhancement, and the direction matters: the form is
   hidden until an inline script confirms JS runs, so a visitor never
   gets a dead control that silently keeps showing the old number
   while they type into it. Also covers the script loading but
   throwing. Set during parse, so no flash and no layout shift. */
.tw-block .calc{display:none}
.has-js .tw-block .calc{display:block}
.has-js .tw-block .nojs-note,
.has-js .tw-block .out-label{display:none}

.tw-block .nojs-note{background:var(--tw-warn-bg);border-left:4px solid var(--tw-warn);
  padding:14px 16px;border-radius:var(--tw-radius);margin:1.5em 0}
.tw-block .out-label{font-weight:700;margin:0 0 10px}

.tw-block .calc{background:var(--tw-soft-bg);border:1px solid var(--tw-line);
  border-radius:var(--tw-radius);padding:22px;margin:1.5em auto;max-width:640px}
.tw-block .calc .field{margin:0 0 16px}
.tw-block .calc .field > label{display:block;font-weight:700;font-size:.95em;margin-bottom:5px}
.tw-block .calc .hint{display:block;font-weight:400;font-size:.82em;
  color:var(--tw-soft);margin-top:3px}
.tw-block .calc input[type=number]{width:100%;padding:9px 34px 9px 11px;font-size:1em;
  font-family:inherit;border:1px solid var(--tw-line);border-radius:5px;
  background:#fff;color:var(--tw-ink)}
.tw-block .calc input[type=number]:disabled{background:#eef1ef;color:var(--tw-soft)}
.tw-block .calc input:focus-visible,
.tw-block .opts label:focus-within{outline:2px solid var(--tw-accent);outline-offset:2px}

/* Three columns, left to right: what you install (widest -- it holds every
   input), what you protect (deliberately the narrowest -- one field), and
   the ROI panel (numbers only). The protect column uses a fixed-ish
   minmax track instead of an fr unit so it stays thin regardless of how
   wide the section as a whole gets, rather than growing to fill space. */
.tw-block .tw-calc-grid{display:grid;
  grid-template-columns:1.3fr minmax(150px,220px) 1fr;gap:24px;align-items:start}
@media (max-width:900px){
  .tw-block .tw-calc-grid{grid-template-columns:1fr}
}
.tw-block .tw-calc-grid .calc{max-width:none;margin:0 0 1.2em}
.tw-block .tw-calc-col .out{max-width:none;margin:0}

/* Same top padding on all three columns so "What you install", "What you
   protect" and "Your ROI" sit on one shared baseline instead of the ROI
   panel's own padding pushing its heading down past the other two. */
.tw-block .tw-calc-grid>div{padding:20px 20px 4px}
.tw-block .tw-col-heading{margin:0 0 14px;font-size:1.05em}
/* The calc column is narrower than a full-width calculator used to be,
   so its own field-rows (three fields, and later four) need a smaller
   floor than the site-wide .field-row default to still fit one line. */
.tw-block .tw-calc-col .field-row{gap:10px}
.tw-block .tw-calc-col .field-row .field{flex-basis:0;min-width:90px}

/* "What you protect": just the inventory-at-risk field, stripped of its
   own card chrome since it is a single control, not a form. */
.tw-block .tw-protect-col .calc{background:transparent;border:0;padding:0;margin:0}

/* Three soft tints, left to right light to dark, each column washed in
   its own color that fades to nothing at the very top and bottom (a
   short, deliberately quick fade rather than a slow blend) instead of a
   bordered, rounded card -- no frames, just color. */
.tw-block .tw-calc-col{background:linear-gradient(to bottom,
  transparent 0, #eef8f2 24px, #eef8f2 calc(100% - 24px), transparent 100%)}
.tw-block .tw-protect-col{background:linear-gradient(to bottom,
  transparent 0, #cfeeda 24px, #cfeeda calc(100% - 24px), transparent 100%)}
.tw-block .tw-roi-panel{background:linear-gradient(to bottom,
  transparent 0, #a3ddbf 24px, #a3ddbf calc(100% - 24px), transparent 100%)}

/* Battery backup only means anything on a cellular connection, so it is
   hidden entirely (not just disabled) unless cellular is checked. This
   :has() rule is reactive with no JS; the calculator script also sets
   the [hidden] attribute directly for engines that lack :has() support. */
.tw-block #backupField{display:none}
.tw-block #connField:has(input[value="cell"]:checked) ~ #backupField{display:block}

/* Cost breakdown: one-time and recurring render as two separate blocks
   with a visible gap and rule between them, rather than one table with
   two stacked headers, so the two kinds of cost do not read as one
   clustered list. */
.tw-block .tw-cost-block{margin:0 0 18px}
.tw-block .tw-cost-block:last-child{margin-bottom:0}
.tw-block .tw-cost-block + .tw-cost-block{padding-top:18px;border-top:1px dashed var(--tw-line)}
.tw-block .tw-cost-heading{margin:0 0 8px;font-size:.85em;text-transform:uppercase;
  letter-spacing:.05em;color:var(--tw-soft);font-weight:700;text-align:center}

/* Four tiles (sensors, up front, per year, per sensor/mo) on one line
   instead of wrapping to a second row -- shrink to fit rather than wrap,
   down to phone widths where wrapping is unavoidable and fine. */
.tw-block .tw-calc-col .out .headline{flex-wrap:nowrap}
.tw-block .tw-calc-col .out .big-num{flex:1 1 0;min-width:0}
@media (max-width:480px){
  .tw-block .tw-calc-col .out .headline{flex-wrap:wrap}
  .tw-block .tw-calc-col .out .big-num{flex:1 1 45%}
}

.tw-block .tw-roi-panel .out{max-width:none;margin:0 0 1.4em}
.tw-block .tw-roi-panel .out:last-child{margin-bottom:0}
.tw-block .tw-roi-panel .out-label{margin:0 0 8px;font-size:.85em;text-transform:uppercase;
  letter-spacing:.05em;color:var(--tw-soft)}
.has-js .tw-block .tw-roi-panel .out-label{display:block}

/* Site-size question, compacted to three columns so it fits in the
   narrower calculator column instead of wrapping to separate rows. The
   descriptive .sub text used elsewhere in .opts is dropped for this
   group only, to leave room. */
.tw-block .opts.opts--compact{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.tw-block .opts.opts--compact label{flex:none;justify-content:center;text-align:center;padding:9px 6px}

/* Three fields side by side on a wide screen (locations / walk-ins /
   sensors, and the labour form's four), one per row once they no longer
   fit, kept as one narrow column below 560px rather than truncating. */
.tw-block .field-row{display:flex;gap:14px;flex-wrap:wrap}
.tw-block .field-row .field{flex:1 1 150px;min-width:120px}
@media (max-width:560px){
  .tw-block .field-row{flex-direction:column;gap:0}
}

/* Custom up/down triangles replacing the browser's default number-input
   spinner. Outlined light green at rest, filled solid on hover/press.
   The JS listener in section_temperaturewise_pricing.html does the actual
   incrementing; this is presentation only. */
.tw-block .num-field{position:relative}
.tw-block .num-field input[type=number]{-moz-appearance:textfield}
.tw-block .num-field input[type=number]::-webkit-outer-spin-button,
.tw-block .num-field input[type=number]::-webkit-inner-spin-button{
  -webkit-appearance:none;margin:0}
.tw-block .num-spin{position:absolute;top:1px;right:1px;bottom:1px;width:26px;
  display:flex;flex-direction:column;border-left:1px solid var(--tw-line);
  border-radius:0 4px 4px 0;overflow:hidden}
.tw-block .num-spin button{flex:1 1 50%;display:flex;align-items:center;justify-content:center;
  background:#fff;border:0;padding:0;cursor:pointer;line-height:0}
.tw-block .num-spin button:first-child{border-bottom:1px solid var(--tw-line)}
.tw-block .num-spin button:disabled{cursor:not-allowed;opacity:.5}
.tw-block .num-spin svg{width:9px;height:6px;display:block}
.tw-block .num-spin path{fill:none;stroke:var(--tw-bright);stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round}
.tw-block .num-spin button:hover path,
.tw-block .num-spin button:active path{fill:var(--tw-bright);stroke:var(--tw-bright)}
.tw-block .num-spin button:focus-visible{outline:2px solid var(--tw-accent);outline-offset:-2px}

.tw-block .opts{display:flex;flex-wrap:wrap;gap:9px;margin-top:5px}
.tw-block .opts label{display:flex;gap:8px;align-items:flex-start;
  border:1px solid var(--tw-line);border-radius:5px;padding:11px 14px;background:#fff;
  cursor:pointer;font-size:.95em;flex:1 1 200px}
.tw-block .opts label:has(input:checked){border-color:var(--tw-accent);
  box-shadow:inset 0 0 0 1px var(--tw-accent)}
.tw-block .opts label:has(input:disabled){opacity:.55;cursor:not-allowed}
.tw-block .opts input{margin:3px 0 0;flex:0 0 auto}
.tw-block .opts .sub{display:block;font-size:.85em;color:var(--tw-soft);font-weight:400}

/* Default result is pre-rendered in the HTML, so nothing shifts on
   load; min-height only absorbs variation between result shapes. Capped
   and centered like .calc above it, rather than stretching the full
   width of the section. */
.tw-block .out{min-height:360px;max-width:640px;margin-left:auto;margin-right:auto}
.tw-block .out--small{min-height:130px}
.tw-block .out .headline{display:flex;flex-wrap:wrap;gap:20px;margin:0 0 16px}
.tw-block .out .big-num{flex:1 1 160px}
.tw-block .out .big-num .n{font-size:2em;font-weight:700;line-height:1.1;display:block;
  color:var(--tw-accent)}
.tw-block .out .big-num .k{font-size:.78em;color:var(--tw-soft);
  text-transform:uppercase;letter-spacing:.05em}

/* Sized to its own content and centered, rather than stretched to the
   full column width -- at width:100% the label and price cells end up
   with a wide dead gap between them, since the row itself has so little
   text either side of it. */
.tw-block .breakdown{width:auto;margin:0 auto;border-collapse:collapse;font-size:.95em}
.tw-block .breakdown th,.tw-block .breakdown td{
  text-align:left;padding:8px 18px 8px 10px;border-bottom:1px solid var(--tw-line)}
.tw-block .breakdown td:last-child,.tw-block .breakdown th:last-child{
  text-align:right;font-variant-numeric:tabular-nums;padding-right:10px}
.tw-block .breakdown tr.total td{font-weight:700;border-top:2px solid var(--tw-ink);
  border-bottom:none}
.tw-block .verdict{margin-top:16px;padding:14px 16px;border-radius:5px;background:#fff;
  border:1px solid var(--tw-line);font-size:.95em}

.tw-block .visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

@media (max-width:600px){
  .tw-block .out{min-height:440px}
  .tw-block .out .big-num{flex:1 1 100%}
}

/* ---------- email-capture gate ----------
   Same visual language as the case-study access gate (fixed overlay,
   blurred backdrop, white card), rebuilt under tw- names. The gate markup
   sits as a sibling of the pricing section in the page (it is a
   position:fixed overlay, not part of that section's normal flow), so
   these rules are NOT scoped under .tw-block, .tw-gate is not nested
   inside it. The class names are unique enough on their own not to
   collide with anything in renergy-shared.css. Two qualified exceptions
   to "no bare element selectors" for the same reason: both only ever
   fire on an element carrying one of these tw-gate-* classes, which only
   this file's own markup and script ever add. */
.tw-gate{position:fixed;inset:0;z-index:3000;display:grid;place-items:center;
  padding:24px;background:rgba(0,26,13,.38);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.tw-gate[hidden]{display:none}
body.tw-gate-open{overflow:hidden}

.tw-gate-dialog{position:relative;width:min(100%,30rem);max-height:calc(100dvh - 3rem);
  overflow-y:auto;padding:clamp(28px,5vw,44px);border:1px solid var(--gray-light,#dae5e0);
  border-radius:14px;background:#fff;box-shadow:0 2rem 6rem rgba(0,0,0,.28);
  font-family:MatterSQ,sans-serif}

.tw-gate-close{position:absolute;top:14px;right:14px;width:32px;height:32px;
  border:0;border-radius:999px;background:#f5f8f6;color:#5c6360;
  font-size:1.3em;line-height:1;cursor:pointer}
.tw-gate-close:hover{background:#dae5e0}

.tw-gate-eyebrow{margin:0 0 10px;color:var(--green-dark,#14663d);font-size:.76rem;
  font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.tw-gate-title{margin:0;color:var(--text-color--text-primary,#111);
  font-size:clamp(1.6rem,4vw,2.1rem);font-weight:600;line-height:1.1}
.tw-gate-intro{margin:14px 0 0;color:#5c6360;font-size:1rem;line-height:1.6}

.tw-gate-form{display:grid;gap:12px;margin-top:22px}
.tw-gate-label{color:var(--text-color--text-primary,#111);font-size:.88rem;font-weight:600}
.tw-gate-input{width:100%;min-height:3rem;border:1px solid #dae5e0;
  border-radius:6px;padding:.7rem 1rem;background:#fff;color:var(--text-color--text-primary,#111);
  font:inherit}
.tw-gate-input:focus-visible{border-color:var(--renergy-green,#00b259);
  outline:3px solid rgba(0,178,89,.15)}
.tw-gate-captcha{min-height:78px}
.tw-gate-submit{width:100%;min-height:3rem;cursor:pointer}
.tw-gate-submit:disabled{cursor:wait;opacity:.65}
.tw-gate-status{min-height:1.3rem;margin:0;color:#a32626;font-size:.86rem;line-height:1.4}
.tw-gate-note{margin:2px 0 0;color:#5c6360;font-size:.78rem;line-height:1.45}