/* ==========================================================================
   CogniPrism · Stress Impact Calculator
   File: assets/css/cogniprism-calculator.css
   Loaded ONLY on the calculator page (see the functions.php snippet).

   Everything here is scoped under one of these, so nothing leaks into the
   header, footer, or other sections:
     .cp-calc            the calculator (inside the Champagne plaster section)
     .cp-calc-method     Assumptions & Methodology (its own block, below S4)
     .cp-calc-bar        the phone running-total bar
     .cp-hero--ghost     the hidden number in this page's hero
     #cp-calc-print      the Save as PDF sheet (built by the script)
     .cp-calc-s3/-s4     S3 and S4, built as native blocks

   Replace this file wholesale. Do not splice.

   CHANGED 11/2026 (post-launch):
     · Eyebrow 24px on desktop, 21px on phones (was 20px / 17px), so it stays
       larger than the intro line beneath it. Measured: 21px fits one line
       in a 320px phone column.
     · Intro line 17px on phones.
     · "Your Organization" panel title: 24px bold Baltic, matching the
       site-wide card titles (was about 22px semibold Cerulean).
     · S3 and S4 headings use ordinary wrapping below 820px, so phone
       headings fill each line first instead of balancing.

   CONTENTS
     1. Tokens
     2. Reset inside the calculator (keeps theme styles out)
     3. Intro: eyebrow and opening line
     4. Layout
     5. Input panel
     6. Results panel
     7. Save your results
     8. Running total bar (phone)
     9. Methodology block
    10. Hero hidden number
    11. Breakpoints
    12. Save as PDF sheet (print)
    13. S3 and S4 (native WordPress blocks)
    14. Methodology on Navy, joined to S4
    15. S3 seven-domain panel
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. Tokens
   Read from the system variables, with the hex as a fallback.
   Muted text on white uses Slate at 72%: the old Pale Oak Dark labels
   measured under 2:1 on white and failed contrast.
   -------------------------------------------------------------------------- */

.cp-calc,
.cp-calc-method,
.cp-calc-bar,
#cp-calc-print {
  --c-ivory:     var(--cp-ivory, #FBFAF9);
  --c-champagne: var(--cp-champagne, #F0E5D3);
  --c-oak:       var(--cp-oak-light, #DBCDBD);
  --c-oak-dark:  var(--cp-oak-dark, #CFBAA0);
  --c-slate:     var(--cp-slate, #2A2F3B);
  --c-muted:     rgba(42, 47, 59, .72);
  --c-navy:      var(--cp-navy, #07355B);
  --c-baltic:    var(--cp-baltic, #05597D);
  --c-cerulean:  var(--cp-cerulean, #4281A4);
  --c-robin:     var(--cp-robin, #64C9CE);
  --c-robin-mid: var(--cp-robin-mid, #2F9095);
  --c-robin-deep:var(--cp-robin-deep, #257074);
  --c-on-navy:   #C6DCE9;
  --f-head: 'Bricolage Grotesque', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --f-body: 'Instrument Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --f-sc:   'Alegreya Sans SC', 'Instrument Sans', Helvetica, Arial, sans-serif;
}


/* --------------------------------------------------------------------------
   2. Reset inside the calculator
   theme.json gives headings, paragraphs and lists their own margins and
   sizes. These rules stop that from reaching into the calculator.
   -------------------------------------------------------------------------- */

/* Scoped to the components themselves. The section containers (.wrap)
   keep the site's own sizing, so content edges line up with every other
   section on the page. */
.cp-calc,
.cp-calc *,
.cp-calc-method .methodology-section,
.cp-calc-method .methodology-section *,
.cp-calc-bar,
.cp-calc-bar * { box-sizing: border-box; }

.cp-calc :where(h2, h3, h4, p, ul, li, label),
.cp-calc-method :where(h2, h3, h4, p, ul, li) {
  margin: 0;
  padding: 0;
}

.cp-calc {
  font-family: var(--f-body);
  color: var(--c-slate);
  line-height: 1.65;
}

.cp-calc button,
.cp-calc input,
.cp-calc select,
.cp-calc-method button,
.cp-calc-bar button { font-family: var(--f-body); }

/* One visible focus ring for every control, keyboard only. */
.cp-calc :focus-visible,
.cp-calc-method :focus-visible,
.cp-calc-bar:focus-visible {
  outline: 3px solid var(--c-cerulean);
  outline-offset: 2px;
}


/* --------------------------------------------------------------------------
   3. Intro: eyebrow and opening line
   The eyebrow replaces the calculator's old H1. The page hero holds the H1.
   Opening line runs at the page's prose size (18px). The eyebrow stays
   visibly larger than the line beneath it at every width.
   -------------------------------------------------------------------------- */

.cp-calc__eyebrow {
  font-family: var(--f-sc);
  font-weight: 700;
  font-size: 24px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--c-robin-deep);
  margin: 0 0 10px;
  scroll-margin-top: 96px;   /* lands with room above, clear of a sticky header */
}

.cp-calc__intro {
  font-size: 18px;
  font-weight: 500;   /* medium: holds up against the section texture */
  line-height: 1.6;
  max-width: none;
  margin: 0 0 32px;
}


/* --------------------------------------------------------------------------
   4. Layout
   -------------------------------------------------------------------------- */

.cp-calc__body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 40px;
  align-items: start;
}


/* --------------------------------------------------------------------------
   5. Input panel
   -------------------------------------------------------------------------- */

.cp-calc .input-panel {
  background: #FFFFFF;
  border-radius: 12px;
  padding: 32px;
  box-shadow: 0 2px 20px rgba(42, 47, 59, .06);
  border: 1px solid var(--c-oak);
}

/* Bold Baltic, matching the site-wide card titles (card system v2.1). */
.cp-calc .input-panel h2 {
  font-family: var(--f-head);
  font-size: 24px;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -.015em;
  color: var(--c-baltic);
  margin-bottom: 28px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--c-oak);
}

.cp-calc .input-group { margin-bottom: 28px; }
.cp-calc .input-group:last-child { margin-bottom: 0; }

.cp-calc .input-group > label,
.cp-calc .group-label {
  display: block;
  font-size: 15.5px;
  font-weight: 600;
  color: var(--c-slate);
  margin-bottom: 10px;
}

.cp-calc .group-label { padding: 0; float: none; width: 100%; }

.cp-calc .sublabel {
  font-size: 14.5px;
  color: var(--c-baltic);
  margin: -4px 0 2px;
}

.cp-calc .slider-value {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.cp-calc .current-value {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--c-cerulean);
}

.cp-calc .range-label {
  font-size: 14px;
  color: var(--c-muted);
}

.cp-calc .number-input {
  width: 110px;
  padding: 6px 10px;
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--c-cerulean);
  border: 1px solid var(--c-oak-dark);
  border-radius: 6px;
  background: #FFFFFF;
  text-align: center;
  -moz-appearance: textfield;
}
.cp-calc .number-input:hover,
.cp-calc .number-input:focus { border-color: var(--c-cerulean); }
.cp-calc .number-input::-webkit-outer-spin-button,
.cp-calc .number-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.cp-calc input[type="range"] {
  display: block;
  width: 100%;
  height: 6px;
  margin: 0;
  border-radius: 3px;
  background: var(--c-oak);
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
}
.cp-calc input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--c-cerulean);
  border: 3px solid #FFFFFF;
  box-shadow: 0 2px 6px rgba(66, 129, 164, .35);
  transition: transform .15s ease;
}
.cp-calc input[type="range"]::-webkit-slider-thumb:hover { transform: scale(1.1); }
.cp-calc input[type="range"]::-moz-range-thumb {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--c-cerulean);
  border: 3px solid #FFFFFF;
  box-shadow: 0 2px 6px rgba(66, 129, 164, .35);
}

.cp-calc select {
  width: 100%;
  padding: 12px 16px;
  font-size: .95rem;
  border: 1px solid var(--c-oak-dark);
  border-radius: 8px;
  background: #FFFFFF;
  color: var(--c-slate);
  cursor: pointer;
}
.cp-calc select:hover,
.cp-calc select:focus { border-color: var(--c-cerulean); }

/* Radio options. The real radio stays in the page (visually hidden, still
   reachable by keyboard); v4.3 used display:none, which removed it from
   keyboard and screen reader access. */
.cp-calc .radio-group {
  display: flex;
  flex-direction: column;
  gap: 10px;
  border: 0;
  margin: 0;
  padding: 0;
  min-width: 0;
}

.cp-calc .radio-option {
  position: relative;
  display: flex;
  align-items: center;
  padding: 12px 16px;
  border: 1px solid var(--c-oak);
  border-radius: 8px;
  cursor: pointer;
  transition: border-color .2s ease, background .2s ease;
}
.cp-calc .radio-option:hover { border-color: var(--c-cerulean); background: rgba(66, 129, 164, .03); }
.cp-calc .radio-option:has(input:checked) { border-color: var(--c-cerulean); background: rgba(66, 129, 164, .07); }
.cp-calc .radio-option:has(input:focus-visible) { outline: 3px solid var(--c-cerulean); outline-offset: 2px; }

.cp-calc .radio-option input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  margin: 0;
}

.cp-calc .radio-circle {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid var(--c-oak-dark);
  margin-right: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cp-calc .radio-option:has(input:checked) .radio-circle { border-color: var(--c-cerulean); }
.cp-calc .radio-option:has(input:checked) .radio-circle::after {
  content: '';
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--c-cerulean);
}

.cp-calc .radio-label { font-size: 15px; color: var(--c-slate); }
.cp-calc .radio-label strong { font-weight: 600; }

.cp-calc .optional-badge {
  display: inline-block;
  font-size: .7rem;
  font-weight: 600;
  color: var(--c-robin-deep);
  background: var(--cp-tint-robin, #E6F3F3);
  border-radius: 20px;
  padding: 1px 8px;
  margin-left: 8px;
  text-transform: uppercase;
  letter-spacing: .05em;
  vertical-align: 1px;
}


/* --------------------------------------------------------------------------
   6. Results panel
   Navy is this page's accent. The panel is taller than the inputs, so it is
   no longer sticky (sticky did nothing at that height and could slide under
   a sticky site header).
   -------------------------------------------------------------------------- */

.cp-calc .results-panel {
  background: var(--c-navy);
  border-radius: 12px;
  padding: 32px;
  color: #FFFFFF;
  scroll-margin-top: 24px;
}

.cp-calc .results-panel h2 {
  font-family: var(--f-head);
  font-size: 17px;
  font-weight: 400;
  line-height: 1.15;
  color: var(--c-oak-dark);
  margin-bottom: 8px;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.cp-calc .total-cost {
  font-family: var(--f-head);
  font-size: 3rem;
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -.01em;
  color: var(--c-ivory);
  margin-bottom: 8px;
  transition: opacity .2s ease;
}
.cp-calc .total-cost.updating { opacity: .6; }

.cp-calc .total-label {
  font-size: 14.5px;
  color: var(--c-oak-dark);
}

/* Convergence line, on screen version (Option A). */
.cp-calc .convergence-line {
  font-size: 15.5px;
  line-height: 1.55;
  color: var(--c-ivory);
  margin: 16px 0 28px;
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, .15);
}

/* Cost breakdown */
.cp-calc .cost-breakdown {
  border-top: 1px solid rgba(255, 255, 255, .15);
  padding-top: 24px;
  margin-bottom: 28px;
}

.cp-calc .results-panel h3 {
  font-family: var(--f-body);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--c-robin);
  margin-bottom: 14px;
  text-transform: uppercase;
  letter-spacing: .5px;
}

.cp-calc .cost-item {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 14px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
}
.cp-calc .cost-item:last-child { border-bottom: 0; margin-bottom: 0; padding-bottom: 0; }

.cp-calc .cost-item-left { flex: 1; }

.cp-calc .cost-item-name {
  font-size: 15.5px;
  color: var(--c-ivory);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.cp-calc .info-icon {
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .15);
  color: var(--c-oak-dark);
  font-size: .7rem;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.cp-calc .info-icon:hover,
.cp-calc .info-icon[aria-expanded="true"] { background: rgba(255, 255, 255, .28); color: var(--c-ivory); }

.cp-calc .cost-item-footnote {
  font-size: 13.5px;
  color: var(--c-oak-dark);
  margin-top: 4px;
  line-height: 1.45;
}
.cp-calc .cost-item-footnote[hidden] { display: none; }

.cp-calc .cost-item-value {
  font-size: 17px;
  font-weight: 600;
  color: var(--c-ivory);
  text-align: right;
  white-space: nowrap;
}

.cp-calc .multiplier-badge {
  display: inline-block;
  font-size: .7rem;
  font-weight: 600;
  background: var(--c-robin);
  color: var(--c-navy);
  padding: 2px 8px;
  border-radius: 10px;
}

/* Shared inner boxes */
.cp-calc .uncounted-section,
.cp-calc .diagnosis-return-section,
.cp-calc .insight-section {
  border-radius: 8px;
  padding: 20px;
  margin-bottom: 24px;
}

.cp-calc .uncounted-section { background: rgba(255, 255, 255, .04); border-top: 3px solid var(--c-oak-dark); }

.cp-calc .uncounted-section ul { list-style: none; margin-bottom: 12px; }
.cp-calc .uncounted-section li {
  font-size: 14.5px;
  color: var(--c-ivory);
  margin-bottom: 6px;
  padding-left: 14px;
  position: relative;
}
.cp-calc .uncounted-section li::before {
  content: '\2013';
  position: absolute;
  left: 0;
  color: var(--c-oak-dark);
}

.cp-calc .closing-line {
  font-size: 14.5px;
  color: var(--c-oak-dark);
  font-style: italic;
}

.cp-calc .diagnosis-return-section { background: rgba(255, 255, 255, .04); }

.cp-calc .diagnosis-return-item {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 14.5px;
  margin-bottom: 8px;
}
.cp-calc .diagnosis-return-item:last-of-type { margin-bottom: 14px; }
.cp-calc .diagnosis-return-item .label { color: var(--c-oak-dark); }
.cp-calc .diagnosis-return-item .value { color: var(--c-robin); font-weight: 600; }

.cp-calc .diagnosis-return-section .closing-line {
  font-size: 14.5px;
  padding-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, .08);
}

/* What the Pattern Points To */
.cp-calc .insight-section { background: rgba(100, 201, 206, .08); border-top: 3px solid var(--c-oak-dark); }

.cp-calc .insight-signals {
  font-size: 17px;
  font-weight: 600;
  color: var(--c-robin);
  margin-bottom: 10px;
}

.cp-calc .insight-collapsed,
.cp-calc .insight-human-cost,
.cp-calc .insight-expanded { color: var(--c-champagne); }

.cp-calc .insight-collapsed { font-size: 15.5px; line-height: 1.55; margin-bottom: 12px; }

.cp-calc .insight-human-cost {
  font-size: 14.5px;
  line-height: 1.55;
  margin-bottom: 12px;
  padding-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, .1);
}

.cp-calc .insight-expand-toggle {
  background: none;
  border: 0;
  padding: 4px 0;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--c-robin);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.cp-calc .insight-expand-toggle:hover { color: var(--c-ivory); }
.cp-calc .toggle-arrow { transition: transform .2s ease; }
.cp-calc .insight-expand-toggle[aria-expanded="true"] .toggle-arrow { transform: rotate(180deg); }

.cp-calc .insight-expanded {
  font-size: 14.5px;
  line-height: 1.6;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, .1);
}
.cp-calc .insight-expanded[hidden] { display: none; }
.cp-calc .insight-expanded p { margin-bottom: 12px; }
.cp-calc .insight-expanded p:last-child { margin-bottom: 0; }


/* --------------------------------------------------------------------------
   7. Save your results
   Outlined so it does not compete with Find the Source in S4.
   -------------------------------------------------------------------------- */

.cp-calc .cp-calc-save {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 50px;
  padding: 12px 20px;
  background: transparent;
  border: 1.5px solid var(--c-robin);
  border-radius: 6px;
  color: var(--c-robin);
  font-size: 16.5px;
  font-weight: 600;
  cursor: pointer;
  transition: background .2s ease, color .2s ease;
}
.cp-calc .cp-calc-save:hover { background: var(--c-robin); color: var(--c-navy); }
.cp-calc .cp-calc-save svg { flex-shrink: 0; }

.cp-calc .cp-calc-save-note {
  font-size: 14.5px;
  color: var(--c-oak-dark);
  text-align: center;
  margin-top: 8px;
}


/* --------------------------------------------------------------------------
   8. Running total bar (phone)
   Shows while the visitor is working in the inputs and the results panel
   is out of view. The script adds .is-visible. Hidden on wider screens.
   -------------------------------------------------------------------------- */

.cp-calc-bar {
  display: none;
}

@media (max-width: 768px) {
  .cp-calc-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 900;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    min-height: 68px;
    padding: 10px 20px calc(12px + env(safe-area-inset-bottom, 0px));
    background: var(--c-navy);
    border: 0;
    border-radius: 0;
    color: var(--c-ivory);
    text-align: left;
    cursor: pointer;
    box-shadow: 0 -6px 20px rgba(7, 53, 91, .18);
    transform: translateY(110%);
    transition: transform .25s ease;
  }
  .cp-calc-bar.is-visible { transform: translateY(0); }

  .cp-calc-bar__label {
    display: block;
    font-family: var(--f-sc);
    font-size: 13px;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--c-on-navy);
  }
  .cp-calc-bar__total {
    display: block;
    font-family: var(--f-head);
    font-weight: 700;
    font-size: 26px;
    line-height: 1.1;
    color: var(--c-robin);
  }
  .cp-calc-bar__action {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 15px;
    font-weight: 600;
    color: var(--c-ivory);
    white-space: nowrap;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cp-calc-bar { transition: none; }
}


/* --------------------------------------------------------------------------
   9. Methodology block
   Its own Custom HTML block, below S4, on Ivory.
   -------------------------------------------------------------------------- */

.cp-calc-method {
  font-family: var(--f-body);
  color: var(--c-slate);
}

.cp-calc-method .methodology-section {
  background: #FFFFFF;
  border-radius: 12px;
  border: 1px solid var(--c-oak);
  overflow: hidden;
}

.cp-calc-method .methodology-header {
  width: 100%;
  min-height: 56px;
  padding: 18px 24px;
  background: var(--c-champagne);
  border: 0;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  text-align: left;
  transition: background .2s ease;
}
.cp-calc-method .methodology-header:hover { background: var(--c-oak); }

.cp-calc-method .methodology-title {
  font-family: var(--f-head);
  font-size: 1.1rem;
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -.01em;
  color: var(--c-baltic);
}

.cp-calc-method .toggle-icon {
  font-size: 1.1rem;
  color: var(--c-baltic);
  transition: transform .2s ease;
}
.cp-calc-method .methodology-header[aria-expanded="true"] .toggle-icon { transform: rotate(180deg); }

.cp-calc-method .methodology-content { padding: 24px; }
.cp-calc-method .methodology-content[hidden] { display: none; }

.cp-calc-method .methodology-item {
  margin-bottom: 24px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--c-oak);
}
.cp-calc-method .methodology-item:last-child { margin-bottom: 0; padding-bottom: 0; border-bottom: 0; }

.cp-calc-method .methodology-item h4 {
  font-family: var(--f-body);
  font-size: .95rem;
  font-weight: 600;
  color: var(--c-slate);
  margin-bottom: 8px;
}

.cp-calc-method .methodology-item p {
  font-size: .9rem;
  color: var(--c-baltic);
  line-height: 1.6;
  margin-bottom: 8px;
}

.cp-calc-method .methodology-item .source {
  font-size: .8rem;
  color: var(--c-muted);
  font-style: italic;
}


/* --------------------------------------------------------------------------
   10. Hero hidden number
   Sits in the hero's media column. Decorative only (aria-hidden in the
   markup), so screen readers skip it. Colour follows the headline.
   Hidden below 820px, where the hero stacks and the number would push the
   button off the first screen.
   -------------------------------------------------------------------------- */

.cp-hero--ghost {
  --cp-hero-img: 420px;
  /* Shorter than the site's standard hero height, on purpose: this hero
     hands visitors off to the calculator, so it hugs its content. */
  min-height: auto;
  padding: 96px 0 88px;
}

.cp-hero__ghost {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 12px;
  user-select: none;
}

/* Label and rule in Robin Mid, a lighter step of the calculator eyebrow's
   colour. The number uses Navy, the page accent, previewing the Navy
   results panel where the real number lives. */
.cp-hero__ghost-label {
  font-family: 'Alegreya Sans SC', 'Instrument Sans', sans-serif;
  /* Robin Mid is 3.63:1 on Ivory, which clears the 3:1 large-text
     threshold only at 19px bold or larger. Do not reduce either. */
  font-size: 19px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--cp-robin-mid, #2F9095);
}

.cp-hero__ghost-number {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-weight: 700;
  /* --ghost-scale is set by the script, which measures the number and
     shrinks it only as much as needed to fit its column. */
  font-size: calc(clamp(88px, 9vw, 124px) * var(--ghost-scale, 1));
  line-height: .9;
  letter-spacing: -.03em;
  white-space: nowrap;
  color: var(--cp-navy, #07355B);
  filter: blur(9px);
  opacity: .5;
  transition: filter .9s ease, opacity .9s ease;
}

/* Revealed: after the visitor changes any calculator input, the hero shows
   their own total, sharp. */
.cp-hero__ghost.is-revealed .cp-hero__ghost-number { filter: none; opacity: 1; }
.cp-hero__ghost.is-revealed .cp-hero__ghost-rule { opacity: .6; transition: opacity .9s ease; }

@media (prefers-reduced-motion: reduce) {
  .cp-hero__ghost-number,
  .cp-hero__ghost-rule { transition: none; }
}

.cp-hero__ghost-rule {
  width: 260px;
  height: 3px;
  border-radius: 2px;
  background: var(--cp-robin-mid, #2F9095);
  opacity: .3;
}

/* The button scrolls down to the calculator, so its arrow nudges down on
   hover instead of sideways like the site's other hero buttons. */
.cp-hero--ghost .cp-hero__cta:hover .cp-icon { transform: translateY(3px); }

/* Smooth scroll for the hero button, on this page only. */
html:has(.cp-calc) { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html:has(.cp-calc) { scroll-behavior: auto; }
}

/* Keeps the full-width phone button inside the screen edge. */
.cp-hero--ghost .cp-hero__cta { box-sizing: border-box; max-width: 100%; }

@media (max-width: 820px) {
  .cp-hero__ghost { display: none; }
  .cp-hero--ghost { padding: 48px 0 44px; }
}


/* --------------------------------------------------------------------------
   11. Breakpoints
   Phone order is inputs first, then results (v4.3 put results first).
   -------------------------------------------------------------------------- */

@media (max-width: 960px) {
  .cp-calc__body { gap: 28px; }
  .cp-calc .input-panel,
  .cp-calc .results-panel { padding: 26px; }
}

@media (max-width: 768px) {
  .cp-calc__body { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .cp-calc .input-panel,
  .cp-calc .results-panel { padding: 24px 20px; }
  .cp-calc .total-cost { font-size: 2.6rem; }
  .cp-calc__intro { font-size: 17px; margin-bottom: 24px; }
  /* 21px stays on one line in a 320px phone column (measured at about
     290px wide) and stays larger than the 17px intro beneath it. */
  .cp-calc__eyebrow { font-size: 21px; letter-spacing: .08em; }
  .cp-calc .input-panel h2 { font-size: 22px; }
  /* Room so the running total bar never covers the last control. */
  .cp-calc { padding-bottom: 8px; }
}


/* --------------------------------------------------------------------------
   12. Save as PDF sheet
   The script builds #cp-calc-print as a direct child of <body> when the
   visitor clicks Save your results, adds .cp-printing to <html>, and opens
   the print window. While printing, everything else on the page is hidden.
   The sheet never shows on screen.
   Body text stays at 11pt or larger.
   -------------------------------------------------------------------------- */

#cp-calc-print { display: none; }

@media print {
  html.cp-printing body > *:not(#cp-calc-print) { display: none !important; }
  html.cp-printing body { background: #FFFFFF !important; margin: 0 !important; }

  html.cp-printing #cp-calc-print {
    display: block;
    font-family: var(--f-body);
    font-size: 11pt;
    line-height: 1.5;
    color: var(--c-slate);
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  @page { size: letter; margin: .6in .65in .5in; }

  #cp-calc-print * { box-sizing: border-box; }
  #cp-calc-print h1,
  #cp-calc-print h2,
  #cp-calc-print h3,
  #cp-calc-print p,
  #cp-calc-print ul { margin: 0; padding: 0; }

  #cp-calc-print .pr-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    padding-bottom: 10pt;
    border-bottom: 2pt solid var(--c-cerulean);
    margin-bottom: 16pt;
  }
  #cp-calc-print .pr-brand {
    font-family: var(--f-head);
    font-weight: 700;
    font-size: 18pt;
    color: var(--c-cerulean);
    letter-spacing: -.01em;
  }
  #cp-calc-print .pr-doc {
    text-align: right;
    font-size: 10pt;
    color: var(--c-muted);
  }
  #cp-calc-print .pr-doc strong {
    display: block;
    font-family: var(--f-head);
    font-size: 13pt;
    color: var(--c-navy);
  }

  #cp-calc-print .pr-block {
    margin-bottom: 16pt;
    break-inside: avoid;
    page-break-inside: avoid;
  }
  #cp-calc-print .pr-block--flow { break-inside: auto; page-break-inside: auto; }

  #cp-calc-print h2 {
    font-family: var(--f-sc);
    font-size: 11pt;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--c-robin-deep);
    margin-bottom: 6pt;
    break-after: avoid;
    page-break-after: avoid;
  }

  #cp-calc-print .pr-inputs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3pt 24pt;
    font-size: 11pt;
  }
  #cp-calc-print .pr-inputs div { display: flex; justify-content: space-between; gap: 10pt; border-bottom: .5pt solid var(--c-oak); padding: 3pt 0; }
  #cp-calc-print .pr-inputs span { color: var(--c-muted); }
  #cp-calc-print .pr-inputs strong { font-weight: 600; text-align: right; }

  #cp-calc-print .pr-total-box {
    background: var(--c-navy);
    color: #FFFFFF;
    border-radius: 6pt;
    padding: 14pt 16pt;
  }
  #cp-calc-print .pr-total {
    font-family: var(--f-head);
    font-weight: 700;
    font-size: 30pt;
    line-height: 1.05;
    color: var(--c-robin);
  }
  #cp-calc-print .pr-total-label { font-size: 11pt; color: var(--c-on-navy); margin-top: 3pt; }
  #cp-calc-print .pr-convergence {
    font-size: 11pt;
    color: #FFFFFF;
    margin-top: 9pt;
    padding-top: 8pt;
    border-top: .5pt solid rgba(255, 255, 255, .3);
  }

  #cp-calc-print .pr-rows div {
    display: flex;
    justify-content: space-between;
    gap: 16pt;
    padding: 5pt 0;
    border-bottom: .5pt solid var(--c-oak);
  }
  #cp-calc-print .pr-rows div:last-child { border-bottom: 0; }
  #cp-calc-print .pr-rows strong { font-weight: 600; white-space: nowrap; }
  #cp-calc-print .pr-rows em { display: block; font-size: 10pt; font-style: normal; color: var(--c-muted); }

  #cp-calc-print .pr-signals { font-weight: 600; color: var(--c-baltic); margin-bottom: 5pt; }
  #cp-calc-print .pr-text p { margin-bottom: 7pt; }
  #cp-calc-print .pr-text p:last-child { margin-bottom: 0; }
  #cp-calc-print .pr-text .pr-human { font-style: italic; }

  #cp-calc-print .pr-method .methodology-item { margin-bottom: 8pt; break-inside: avoid; page-break-inside: avoid; }
  #cp-calc-print .pr-method h4 { font-size: 11pt; font-weight: 600; margin: 0 0 2pt; }
  #cp-calc-print .pr-method p { font-size: 11pt; margin: 0 0 2pt; }
  #cp-calc-print .pr-method .source { font-size: 10pt; font-style: italic; color: var(--c-muted); }

  #cp-calc-print .pr-close {
    border-top: 2pt solid var(--c-navy);
    padding-top: 12pt;
    break-inside: avoid;
    page-break-inside: avoid;
  }
  #cp-calc-print .pr-close-title {
    font-family: var(--f-head);
    font-weight: 700;
    font-size: 15pt;
    color: var(--c-navy);
    margin-bottom: 6pt;
  }
  #cp-calc-print .pr-close p { margin-bottom: 7pt; }
  #cp-calc-print .pr-close a { color: var(--c-baltic); font-weight: 600; text-decoration: none; }

  /* Footer. position: fixed repeats it on every printed page, pinned to the
     bottom of the printable area. The sheet sits inside a one-cell table
     whose empty table footer repeats on every page too; that empty footer
     reserves the space the real footer covers, so content never runs
     underneath it. */
  #cp-calc-print .pr-layout { width: 100%; border-collapse: collapse; }
  #cp-calc-print .pr-layout td { padding: 0; vertical-align: top; }
  #cp-calc-print .pr-footer-space { height: .45in; }

  #cp-calc-print .pr-footer {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    background: #FFFFFF;
    display: flex;
    justify-content: space-between;
    gap: 16pt;
    padding-top: 5pt;
    border-top: .5pt solid var(--c-oak-dark);
    font-size: 9.5pt;
    color: var(--c-muted);
  }
}


/* --------------------------------------------------------------------------
   13. S3 and S4 (native WordPress blocks)
   Built as Group, Heading, Paragraph and Button blocks so the copy stays
   editable in the editor. These rules override the theme's default block
   spacing and heading styles inside the two sections only.
   Prose runs at the page's 18px.
   -------------------------------------------------------------------------- */

.cp-calc-s3,
.cp-calc-s4 { margin-block: 0 !important; }

.cp-calc-s3 .wrap > *,
.cp-calc-s4 .wrap > * { margin-block: 0; }

.cp-calc-s3 h2.wp-block-heading,
.cp-calc-s4 h2.wp-block-heading {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -.02em;
  max-width: 24ch;
  text-wrap: balance;
}

/* Phones: ordinary wrapping, matching the site's heroes rule. Balanced
   wrapping evens line lengths and left "This Number / Has a Source" with a
   gap on line one. */
@media (max-width: 820px) {
  .cp-calc-s3 h2.wp-block-heading,
  .cp-calc-s4 h2.wp-block-heading { text-wrap: wrap; max-width: none; }
}

/* S3: Ivory, Cerulean heading */
.cp-calc-s3 h2.wp-block-heading {
  font-size: clamp(32px, 3.4vw, 42px);
  color: var(--cp-cerulean, #4281A4);
  margin-bottom: 26px;
}

.cp-calc-s3 p {
  font-family: 'Instrument Sans', sans-serif;
  font-size: 18px;
  line-height: 1.65;
  color: var(--cp-slate, #2A2F3B);
  max-width: 72ch;
}
.cp-calc-s3__text > * { margin-block: 0; }
.cp-calc-s3__text > p + p { margin-top: 20px; }

.cp-calc-s3 .cp-calc-s3__close {
  /* Robin Mid is 3.63:1 on Ivory, which clears the 3:1 large-text
     threshold only at 19px bold or larger. Do not reduce either. */
  font-size: 19px;
  font-weight: 700;
  color: var(--cp-robin-mid, #2F9095);
}

/* S4: Navy close (page accent) */
.cp-calc-s4 h2.wp-block-heading {
  font-size: clamp(30px, 3.2vw, 40px);
  color: var(--cp-ivory, #FBFAF9);
  margin-bottom: 28px;
}

.cp-calc-s4 .wp-block-buttons { gap: 0; }

/* Robin Egg on Navy with Navy text, the site's inverted button. 19px bold
   matches the hero button rule. */
.cp-calc-s4 .cp-calc-s4__cta .wp-block-button__link {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 52px;
  padding: 14px 28px;
  background: var(--cp-robin, #64C9CE);
  color: var(--cp-navy, #07355B);
  font-family: 'Instrument Sans', sans-serif;
  font-weight: 700;
  font-size: 19px;
  line-height: 1.2;
  text-decoration: none;
  border: 0;
  border-radius: var(--cp-radius, 6px);
  transition: background .16s ease;
}
.cp-calc-s4 .cp-calc-s4__cta .wp-block-button__link::after {
  content: '';
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m12 5 7 7-7 7'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m12 5 7 7-7 7'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform .2s ease;
}
.cp-calc-s4 .cp-calc-s4__cta .wp-block-button__link:hover { background: var(--cp-ivory, #FBFAF9); }
.cp-calc-s4 .cp-calc-s4__cta .wp-block-button__link:hover::after { transform: translateX(3px); }

.cp-calc-s4 .wrap > .cp-calc-s4__secondary {
  margin-top: 40px;
  padding-top: 26px;
  border-top: 1px solid rgba(198, 220, 233, .22);
  font-family: 'Instrument Sans', sans-serif;
  font-size: 18px;
  line-height: 1.6;
  color: #C6DCE9;
}

.cp-calc-s4 .wrap > .cp-calc-s4__link {
  margin-top: 8px;
  font-family: 'Instrument Sans', sans-serif;
  font-size: 18px;
  line-height: 1.5;
}
.cp-calc-s4 .cp-calc-s4__link a {
  color: var(--cp-robin, #64C9CE);
  font-weight: 600;
  text-decoration: none;
}
.cp-calc-s4 .cp-calc-s4__link a:hover { color: var(--cp-ivory, #FBFAF9); text-decoration: underline; }

.cp-calc-s4 a:focus-visible {
  outline: 3px solid var(--cp-robin, #64C9CE);
  outline-offset: 3px;
}

@media (max-width: 560px) {
  .cp-calc-s4 .cp-calc-s4__cta,
  .cp-calc-s4 .cp-calc-s4__cta .wp-block-button__link { width: 100%; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  .cp-calc-s4 .cp-calc-s4__cta .wp-block-button__link,
  .cp-calc-s4 .cp-calc-s4__cta .wp-block-button__link::after { transition: none; }
}


/* --------------------------------------------------------------------------
   14. Methodology on Navy, joined to S4
   The block keeps its cp-ivory class; these rules override it, so the
   block itself never needs editing. S4 and Methodology read as one Navy
   close: no top padding here, so there is no seam between them.
   -------------------------------------------------------------------------- */

.cp-sec.cp-calc-method {
  background-color: var(--cp-navy, #07355B) !important;
  background-image: none !important;
  color: #C6DCE9;
  padding-top: 0 !important;
  margin-block: 0 !important;
}

.cp-calc-method .methodology-section {
  background: transparent;
  border: 1px solid rgba(198, 220, 233, .3);
}

.cp-calc-method .methodology-header { background: transparent; }
.cp-calc-method .methodology-header:hover { background: rgba(255, 255, 255, .06); }

.cp-calc-method .methodology-title,
.cp-calc-method .toggle-icon { color: var(--cp-robin, #64C9CE); }

.cp-calc-method .methodology-content { border-top: 1px solid rgba(198, 220, 233, .2); }

.cp-calc-method .methodology-item { border-bottom-color: rgba(198, 220, 233, .16); }
.cp-calc-method .methodology-item h4 { color: var(--cp-ivory, #FBFAF9); }
.cp-calc-method .methodology-item p { color: #C6DCE9; }
.cp-calc-method .methodology-item p strong { color: var(--cp-ivory, #FBFAF9); font-weight: 600; }
.cp-calc-method .methodology-item .source { color: #A9C4D6; }

.cp-calc-method :focus-visible { outline-color: var(--cp-robin, #64C9CE); }

/* S4 hands its bottom spacing to the methodology accordion. */
.cp-sec.cp-calc-s4 { padding-bottom: 48px !important; }


/* --------------------------------------------------------------------------
   15. S3 seven-domain panel
   S3's text column on the left, the panel on the right. The script
   highlights the two domains named in the results panel's Signals line and
   follows them as the visitor changes inputs. Stacks below 900px.
   -------------------------------------------------------------------------- */

.cp-calc-s3 .wrap {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 380px;
  column-gap: 72px;
  align-items: start;
}

.cp-calc-domains {
  box-sizing: border-box;
  margin: 0;
  padding: 26px 24px 22px;
  background: #FFFFFF;
  border: 1px solid var(--cp-oak-light, #DBCDBD);
  border-radius: 12px;
  font-family: 'Instrument Sans', sans-serif;
}

.cp-calc-s3 .cp-calc-domains .cp-calc-domains__label {
  max-width: none;
  line-height: 1.3;
  margin: 0 0 12px;
  font-family: 'Alegreya Sans SC', 'Instrument Sans', sans-serif;
  font-weight: 700;
  font-size: 16px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--cp-robin-deep, #257074);
}

.cp-calc-domains__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.cp-calc-domains__item {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 46px;
  margin: 0;
  padding: 6px 12px;
  border-radius: 8px;
  transition: background .3s ease;
}

.cp-calc-domains__mark {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  color: var(--cp-cerulean, #4281A4);
  transition: color .3s ease;
}
.cp-calc-domains__mark svg { display: block; width: 100%; height: 100%; }

.cp-calc-domains__name {
  font-size: 17px;
  color: var(--cp-slate, #2A2F3B);
}

.cp-calc-domains__tag {
  display: none;
  margin-left: auto;
  padding: 2px 10px;
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  color: var(--cp-robin-deep, #257074);
  background: #FFFFFF;
  border: 1px solid #9FD8DB;
  border-radius: 20px;
}

/* A signal domain */
.cp-calc-domains__item.is-signal { background: var(--cp-tint-robin, #E6F3F3); }
.cp-calc-domains__item.is-signal .cp-calc-domains__mark { color: var(--cp-robin-deep, #257074); }
.cp-calc-domains__item.is-signal .cp-calc-domains__name { font-weight: 600; color: var(--cp-navy, #07355B); }
.cp-calc-domains__item.is-signal .cp-calc-domains__tag { display: inline-block; }

/* Baltic, not Cerulean: Cerulean on white measures just under 4.5:1 at
   this size. */
.cp-calc-s3 .cp-calc-domains .cp-calc-domains__link {
  display: block;
  margin-top: 14px;
  padding-top: 16px;
  border-top: 1px solid #EDE4D8;
  font-size: 17px;
  font-weight: 600;
  color: var(--cp-baltic, #05597D);
  text-decoration: none;
}
.cp-calc-domains__link:hover { color: var(--cp-navy, #07355B); text-decoration: underline; }
.cp-calc-domains__link:focus-visible { outline: 3px solid var(--cp-cerulean, #4281A4); outline-offset: 3px; }

@media (max-width: 900px) {
  .cp-calc-s3 .wrap { grid-template-columns: minmax(0, 1fr); row-gap: 40px; }
  .cp-calc-domains { max-width: 480px; }
}

@media (prefers-reduced-motion: reduce) {
  .cp-calc-domains__item,
  .cp-calc-domains__mark { transition: none; }
}