/* The calculator pages (calculators/*): one family design. Layout and spacing only; body type comes from styles.css.
   The tool's own markup is untouched: .cx-tool and .calc-grid are display: contents, so the form and the result
   sit straight in the hero grid. */
.cx { --edge: max(24px, calc((100vw - 1240px) / 2 + 24px)); --tint: #f5f4ef; --dim: #c9c9c1; }
.cx p { margin: 0 0 14px; }
.cx .cx-in { max-width: var(--max); margin: 0 auto; padding: 0 24px; }
.cx .cx-btns { display: flex; flex-wrap: wrap; gap: 12px; margin: 22px 0 0; }
.cx .cx-btns .btn { margin: 0; }

/* Hero: worksheet on the left, the readout in a black column to the window edge */
.cx .cx-top { border-bottom: 2px solid var(--black); }
.cx .cx-grid { display: grid; grid-template-columns: var(--edge) minmax(0, 1fr) minmax(400px, 41%); grid-template-rows: auto auto auto 1fr; min-height: calc(100vh - 143px); }
.cx .cx-grid::before { content: ""; grid-column: 3; grid-row: 1 / -1; background: var(--black); }
.cx .cx-head { grid-column: 2; grid-row: 1; padding: 64px 72px 8px 0; }
.cx .cx-head h1 { color: var(--black); margin: 0 0 18px; font-size: clamp(2.6rem, 5vw, 4.6rem); line-height: 1; }
.cx .cx-head .lead { margin: 0; max-width: 40em; }
.cx .cx-tool, .cx .cx-tool > .calc-grid { display: contents; }

.cx .calc-form { grid-column: 2; grid-row: 2 / 5; padding: 36px 72px 72px 0; margin: 0; background: none; border: 0; border-radius: 0; box-shadow: none; }
.cx .calc-form h3 { margin: 0 0 14px; }
.cx .calc-form label { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 330px); gap: 6px 32px; align-items: center; margin: 0; padding: 18px 0; border-top: 1px solid var(--line); }
.cx .calc-form label:last-of-type { border-bottom: 2px solid var(--black); }
.cx .calc-form label:first-of-type { border-top: 2px solid var(--black); }
.cx .calc-form label > input, .cx .calc-form label > select { grid-column: 2; grid-row: 1; }
.cx .calc-form .field-hint { grid-column: 1; }
.cx .calc-form input[type="number"], .cx .calc-form input[type="text"], .cx .calc-form select { border: 2px solid var(--black); border-radius: 8px; padding: 13px 14px; font-weight: 700; background: var(--white); color: var(--black); }
.cx .calc-form input[type="number"] { font-family: "Anton", sans-serif; font-weight: 400; font-size: 1.35rem; padding: 9px 14px; letter-spacing: .01em; }
.cx .calc-form input:focus, .cx .calc-form select:focus { outline: 3px solid var(--lime); outline-offset: 1px; }
.cx .calc-form .btn { width: auto; margin-top: 26px; padding-left: 44px; padding-right: 44px; }

.cx .calc-result { grid-column: 3; grid-row: 1 / 3; align-self: start; position: sticky; top: 100px; background: none; border: 0; border-radius: 0; padding: 64px var(--edge) 32px 52px; color: var(--white); }
.cx .calc-result h3, .cx .calc-result h4, .cx .calc-result strong { color: var(--white); }
.cx .calc-result .calc-result-sub { color: var(--dim); }
.cx .calc-result .calc-placeholder { color: var(--white); font-weight: 700; font-size: 1.3rem; line-height: 1.45; border-left: 6px solid var(--lime); padding-left: 20px; margin: 0; }
.cx .calc-result-row { border-bottom: 1px solid rgba(255, 255, 255, .16); }
.cx .calc-result-row .value { font-size: 1.45rem; }
.cx .calc-result-highlight { margin: 0 0 12px; padding: 22px 24px 20px; border-radius: 0; color: var(--black); flex-direction: column; align-items: flex-start; gap: 2px; }
.cx .calc-result-highlight .value { font-size: clamp(2.8rem, 4.6vw, 4.4rem); line-height: 1.05; }
.cx .calc-result-highlight strong { color: var(--black); }
.cx .calc-result * + .calc-result-highlight { margin-top: 18px; }
.cx .calc-result .calc-note { color: var(--dim); }
.cx .calc-result .calc-note a, .cx .calc-result a { color: var(--white); }
.cx .calc-email-capture { grid-column: 3; grid-row: 3; align-self: start; border-radius: 0; margin: 8px var(--edge) 0 52px; }
.cx .calc-email-capture h3, .cx .calc-email-capture a { color: var(--black); }

.cx .cx-small { grid-column: 3; grid-row: 4; align-self: end; padding: 28px var(--edge) 56px 52px; color: var(--dim); }
.cx .cx-small strong { display: block; color: var(--white); margin-bottom: 4px; }
.cx .cx-small a { color: var(--white); }

/* Sections set against a side heading */
.cx .cx-sec .cx-in, .cx .cx-hand .cx-in { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 0 7%; }
.cx .cx-sec { padding: 72px 0; }
.cx .cx-sec + .cx-sec .cx-in { border-top: 2px solid var(--black); padding-top: 64px; }
.cx .cx-sec + .cx-sec { padding-top: 0; }
.cx .cx-sec h2, .cx .cx-hand h2 { margin: 0; font-size: clamp(1.9rem, 3vw, 2.6rem); line-height: 1.05; align-self: start; position: sticky; top: 110px; }
.cx .cx-txt > :first-child { margin-top: 0; }
.cx .cx-txt > :last-child { margin-bottom: 0; }
.cx .cx-note { color: var(--grey); }
.cx .disclaimer-box { margin: 24px 0 0; }

/* Rates tables */
.cx .cx-table { margin: 0 0 22px; overflow-x: auto; }
.cx .rates-table { margin: 0; min-width: 0; font-size: inherit; }
.cx .rates-table th { text-transform: none; letter-spacing: 0; font-size: inherit; color: var(--black); border-bottom: 2px solid var(--black); padding-left: 0; }
.cx .rates-table td { padding-left: 0; }
.cx .rates-table td:first-child { font-weight: 700; }
.cx .cx-rates .cx-txt { display: grid; grid-template-columns: 1fr; gap: 0; }

/* The worked example: a slip on a lime-tint band */
.cx .cx-work { background: var(--tint); padding: 80px 0; }
.cx .cx-sec + .cx-work .cx-in, .cx .cx-work + .cx-sec .cx-in { border-top: 0; padding-top: 0; }
.cx .cx-work + .cx-sec { padding-top: 72px; }
.cx .cx-sec + .cx-work { padding-top: 80px; }
.cx .cx-slip { background: var(--white); border: 2px solid var(--black); padding: 10px 28px; margin: 26px 0; }
.cx .cx-line { display: flex; justify-content: space-between; align-items: baseline; gap: 24px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.cx .cx-line:last-child { border-bottom: 0; }
.cx .cx-line b { font-family: "Anton", sans-serif; font-weight: 400; font-size: 1.5rem; white-space: nowrap; letter-spacing: .01em; }
.cx .cx-line.cx-neg b { color: var(--grey); }
.cx .cx-line.cx-total { border-top: 4px double var(--black); margin-top: -1px; padding-top: 16px; }
.cx .cx-line.cx-total span { font-weight: 900; }
.cx .cx-line.cx-total b { font-size: 2.1rem; }

/* Steps */
.cx .cx-steps { list-style: none; counter-reset: cx; margin: 0 0 22px; padding: 0; }
.cx .cx-steps li { counter-increment: cx; display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 0 18px; padding: 18px 0; border-bottom: 1px solid var(--line); }
.cx .cx-steps li:first-child { padding-top: 4px; }
.cx .cx-steps li::before { content: counter(cx); grid-row: 1 / span 9; font-family: "Anton", sans-serif; font-size: 2.2rem; line-height: 1; color: var(--black); background: var(--lime); width: 56px; height: 56px; display: grid; place-items: center; }
.cx .cx-steps li > div { grid-column: 2; }
.cx .cx-steps li > div > strong:first-child { display: block; }

/* Questions: full width, two columns */
.cx .cx-faq { padding: 88px 0; border-top: 2px solid var(--black); }
.cx .cx-work + .cx-faq { border-top: 0; }
.cx .cx-faq h2 { margin: 0 0 44px; max-width: 18em; }
.cx .cx-qa { columns: 2; column-gap: 72px; }
.cx .cx-q { break-inside: avoid; padding: 0 0 30px; }
.cx .cx-q h3 { margin: 0 0 10px; }
.cx .cx-q p { margin: 0; }

/* Coaching, money coach and financial services tools */
.cx .cx-hand { background: var(--black); color: var(--white); padding: 72px 0; }
.cx .cx-hand h2 { color: var(--white); }
.cx .cx-hand .cx-note { color: var(--dim); }
.cx .cx-hand .btn-outline { color: var(--white); border-color: var(--white); }
.cx .cx-hand .btn-dark { background: var(--lime); color: var(--black); border-color: var(--lime); }
.cx .cx-guides { list-style: none; margin: 22px 0 0; padding: 0; border-top: 1px solid rgba(255, 255, 255, .25); }
.cx .cx-guides a { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 28px; padding: 20px 0; border-bottom: 1px solid rgba(255, 255, 255, .25); color: var(--white); text-decoration: none; }
.cx .cx-guides b { font-size: 1.15rem; }
.cx .cx-guides span { grid-column: 1; color: var(--dim); }
.cx .cx-guides em { grid-column: 2; grid-row: 1 / span 2; align-self: center; font-style: normal; font-weight: 900; color: var(--lime); white-space: nowrap; }
.cx .cx-guides em::after { content: " \2192"; }
.cx .cx-guides a:hover b { text-decoration: underline; }

/* Related calculators */
.cx .cx-more { padding: 72px 0 0; }
.cx .cx-hand + .cx-more, .cx .cx-faq + .cx-more { border-top: 2px solid var(--black); }
.cx .cx-more-h { display: flex; justify-content: space-between; align-items: baseline; gap: 24px; flex-wrap: wrap; margin-bottom: 30px; }
.cx .cx-more h2 { margin: 0; }
.cx .cx-all { font-weight: 900; color: var(--black); text-decoration: none; border-bottom: 3px solid var(--lime); padding-bottom: 3px; }
.cx .cx-all::after { content: " \2192"; }
.cx .cx-more-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 2px solid var(--black); border-bottom: 2px solid var(--black); }
.cx .cx-more-row a { display: flex; flex-direction: column; gap: 10px; padding: 26px 28px 30px; color: inherit; text-decoration: none; border-left: 1px solid var(--line); }
.cx .cx-more-row a:first-child { border-left: 0; padding-left: 0; }
.cx .cx-more-row b { font-size: 1.2rem; }
.cx .cx-more-row b::after { content: " \2192"; }
.cx .cx-more-row span { color: var(--grey); }
.cx .cx-more-row a:hover b { text-decoration: underline; text-decoration-color: var(--lime); text-decoration-thickness: 3px; }

/* Close */
.cx .cx-close { padding: 80px 0 88px; }
.cx .cx-close .cx-in { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 32px 7%; align-items: end; }
.cx .cx-close h2 { margin: 0; font-size: clamp(2.2rem, 4.4vw, 3.8rem); line-height: 1; }
.cx .cx-close .cx-btns { margin-top: 0; }
.cx .cx-call { margin: 18px 0 0; }
.cx .cx-call a { color: var(--black); font-weight: 900; }

@media (max-width: 980px) {
  .cx .cx-grid { grid-template-columns: 24px minmax(0, 1fr) 24px; grid-template-rows: auto auto auto auto auto; min-height: 0; }
  .cx .cx-grid::before { grid-column: 1 / -1; grid-row: 3 / -1; }
  .cx .cx-head { grid-column: 2; padding: 40px 0 4px; }
  .cx .calc-form { grid-column: 2; grid-row: 2; padding: 26px 0 44px; }
  .cx .calc-result { grid-column: 2; grid-row: 3; position: static; padding: 40px 0 8px; }
  .cx .calc-email-capture { grid-column: 2; grid-row: 4; margin: 16px 0 0; }
  .cx .cx-small { grid-column: 2; grid-row: 5; padding: 20px 0 44px; }
  .cx .cx-sec .cx-in, .cx .cx-hand .cx-in, .cx .cx-close .cx-in { grid-template-columns: 1fr; }
  .cx .cx-sec h2, .cx .cx-hand h2 { position: static; margin-bottom: 24px; }
  .cx .cx-sec { padding: 52px 0; }
  .cx .cx-sec + .cx-sec .cx-in { padding-top: 48px; }
  .cx .cx-work, .cx .cx-sec + .cx-work { padding: 56px 0; }
  .cx .cx-work + .cx-sec { padding-top: 52px; }
  .cx .cx-hand { padding: 52px 0; }
  .cx .cx-faq { padding: 60px 0; }
  .cx .cx-faq h2 { margin-bottom: 30px; }
  .cx .cx-qa { columns: 1; }
  .cx .cx-more { padding-top: 56px; }
  .cx .cx-more-row { grid-template-columns: 1fr; }
  .cx .cx-more-row a, .cx .cx-more-row a:first-child { border-left: 0; padding: 22px 0; border-top: 1px solid var(--line); }
  .cx .cx-more-row a:first-child { border-top: 0; }
  .cx .cx-close { padding: 56px 0 64px; }
}
@media (max-width: 560px) {
  .cx .calc-form label { grid-template-columns: 1fr; padding: 16px 0; }
  .cx .calc-form label > input, .cx .calc-form label > select { grid-column: 1; grid-row: auto; }
  .cx .calc-form .field-hint { grid-row: auto; }
  .cx .calc-form .btn { width: 100%; }
  .cx .cx-slip { padding: 6px 18px; }
  .cx .cx-line { flex-wrap: wrap; gap: 4px 16px; }
  .cx .cx-line b { font-size: 1.3rem; }
  .cx .cx-line.cx-total b { font-size: 1.7rem; }
  .cx .cx-steps li { grid-template-columns: 44px minmax(0, 1fr); gap: 0 14px; }
  .cx .cx-steps li::before { width: 44px; height: 44px; font-size: 1.7rem; }
  .cx .calc-result-highlight .value { font-size: 2.6rem; }
}