/*
 * D-305 (owner, 6 Nov: "one V2 calculator shell for all 19 calculators and 6 checklists; formulas and fields stay the same"):
 * the V2 glass theme for the vendor calculator pages (wrapper .term-calculator-page, shared term-calc-* sections) and the
 * product checklists (wrapper .pi-checklist-page, shared pi-checklist-* sections). Markup, field names, ids and scripts are
 * untouched - this file only restyles. Loaded on every page after cta.css (layouts/partials/head); every rule is scoped to
 * those two wrappers, so no other page changes.
 * OLD: the vendor "new_ui" look (flat white sections, uppercase headings, a dark green results panel, pale pills).
 */
:is(.term-calculator-page, .pi-checklist-page) {
  --ck-coral: #f05d49; --ck-coral-2: #ff8b78; --ck-deep: #c23b28; --ck-ink: #1d2333; --ck-text: #3f3833; --ck-mute: #6b625c;
  --ck-glass: linear-gradient(150deg, rgba(255, 255, 255, .92) 0%, rgba(255, 255, 255, .66) 100%);
  --ck-ring: inset 0 0 0 1px rgba(255, 255, 255, .95), 0 0 0 1px rgba(240, 93, 73, .1), 0 26px 50px -34px rgba(92, 23, 14, .4);
  --ck-gloss: radial-gradient(120% 90% at 30% 14%, rgba(255, 255, 255, .55) 0, rgba(255, 255, 255, .12) 36%, rgba(255, 255, 255, 0) 58%), linear-gradient(150deg, #ff8b78, #e5503c);
  position: relative; isolation: isolate;
  background: radial-gradient(55% 34% at 92% 2%, rgba(255, 139, 120, .18), transparent 70%), radial-gradient(45% 30% at 0% 22%, rgba(240, 93, 73, .09), transparent 70%), #fdfaf8;
}
/* the sections sit on the shared ground (no white bands, no hard edges) */
:is(.term-calculator-page, .pi-checklist-page) > section,
:is(.term-calculator-page, .pi-checklist-page) section:not(.term-calc-cta-banner) { background: transparent !important; }
.term-calculator-page .term-calc-hero, .pi-checklist-page .pi-checklist-hero { padding-top: calc(var(--cy-hdr-h, 64px) + 28px) !important; }

/* headings: V2 (ink, sentence case), coral gradient accents */
:is(.term-calculator-page, .pi-checklist-page) h1 { text-transform: none !important; letter-spacing: -.035em !important; line-height: 1.08 !important; color: var(--ck-ink) !important; font-weight: 800 !important; }
:is(.term-calculator-page, .pi-checklist-page) :is(.term-calc-title-gradient, .pi-checklist-hero-accent) { background: linear-gradient(95deg, var(--ck-coral-2) 0%, var(--ck-coral) 45%, #e0442f 100%) !important; -webkit-background-clip: text !important; background-clip: text !important; color: transparent !important; }
:is(.term-calculator-page, .pi-checklist-page) h2 { text-transform: none !important; letter-spacing: -.025em !important; color: var(--ck-ink) !important; }
:is(.term-calculator-page, .pi-checklist-page) .compare-accent { display: none !important; }
:is(.term-calculator-page, .pi-checklist-page) :is(.term-calc-hero-lead, .term-calc-hero-subtitle, .pi-checklist-hero-lead) { color: var(--ck-text); }

/* the calculator: a glass input card and an ember results card */
.term-calculator-page .term-calc-form-card { background: var(--ck-glass) !important; -webkit-backdrop-filter: blur(16px) saturate(1.3); backdrop-filter: blur(16px) saturate(1.3);
  border: 0 !important; border-radius: 24px !important; box-shadow: var(--ck-ring) !important; }
.term-calculator-page .term-calc-form-card :is(input[type="text"], input[type="number"], input[type="tel"], input[type="email"], input[type="date"], select, textarea) {
  border-radius: 12px !important; border: 1px solid rgba(29, 35, 51, .12) !important; background-color: rgba(255, 255, 255, .9) !important; color: var(--ck-ink) !important;
  box-shadow: none !important; transition: border-color .2s, box-shadow .2s; }
.term-calculator-page .term-calc-form-card :is(input, select, textarea):focus { border-color: var(--ck-coral) !important; box-shadow: 0 0 0 3px rgba(240, 93, 73, .16) !important; outline: none !important; }
.term-calculator-page input[type="range"] { accent-color: var(--ck-coral); }
.term-calculator-page [class*="input-box"] { border-radius: 12px !important; }
.term-calculator-page .term-calc-results-shell { border: 0 !important; border-radius: 26px !important; overflow: hidden;
  background: radial-gradient(120% 70% at 10% -10%, rgba(240, 93, 73, .4) 0%, rgba(240, 93, 73, 0) 55%), linear-gradient(165deg, #4a1a12 0%, #2a0d09 55%, #1c0907 100%) !important;
  box-shadow: 0 30px 60px -30px rgba(42, 13, 9, .75), 0 0 0 1px rgba(255, 179, 158, .14) !important; }
.term-calculator-page .term-calc-results-label { color: #ffd9cc !important; }
.term-calculator-page .term-calc-results-inner { border-radius: 18px !important; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .9), 0 16px 30px -22px rgba(0, 0, 0, .5) !important; }
.term-calculator-page :is(.term-calc-cover-value, .term-calc-cover-unit) { color: var(--ck-deep) !important; }
.term-calculator-page .term-calc-results-footnote { color: rgba(255, 238, 230, .82) !important; }
/* the "why this amount" tiles inside the results card and the meta icons */
.term-calculator-page :is(.term-calc-meta-icon, .term-calc-step-icon, .term-calc-decision-icon, .term-calc-cta-check-icon, .term-calc-list-check-icon) { border-radius: 50%; }

/* how it works, why, next decisions: glass cards */
.term-calculator-page :is(.term-calc-step, .term-calc-decision-card),
.pi-checklist-page :is(.pi-checklist-feature-card, .pi-checklist-howto-card, .pi-checklist-stat) {
  background: var(--ck-glass) !important; -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border: 0 !important; border-radius: 22px !important; box-shadow: var(--ck-ring) !important;
  transition: transform .35s cubic-bezier(.16, 1.04, .3, 1), box-shadow .35s; }
.term-calculator-page .term-calc-decision-card:hover, .pi-checklist-page :is(.pi-checklist-feature-card, .pi-checklist-howto-card):hover { transform: translateY(-3px); }
.term-calculator-page .term-calc-step-num { color: var(--ck-coral) !important; }
.term-calculator-page :is(.term-calc-why-media, .pi-checklist-why-media) img, .pi-checklist-page .pi-checklist-why-media img { border-radius: 24px !important; }
.term-calculator-page .term-calc-disclaimer { color: var(--ck-mute) !important; }

/* buttons: the site CTA (D-266, D-278, D-281) */
:is(.term-calculator-page, .pi-checklist-page) :is(.term-calc-submit-btn, .term-calc-decision-cta, .pi-checklist-cta-btn, .term-calc-cta-call-btn) {
  display: inline-flex !important; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 22px !important; border: 0 !important; border-radius: 12px !important;
  font-size: 16px !important; font-weight: 600 !important; color: #fff !important; text-decoration: none !important; text-transform: none !important;
  background: var(--cy-cta-bg, linear-gradient(95deg, #ff8b78, #f05d49 58%, #e5503c)) !important; box-shadow: var(--cy-cta-bevel, inset 0 1px 0 rgba(255, 255, 255, .35)), 0 14px 26px -14px rgba(240, 93, 73, .7) !important;
  transition: transform .3s cubic-bezier(.16, 1.04, .3, 1), box-shadow .3s; }
:is(.term-calculator-page, .pi-checklist-page) :is(.term-calc-submit-btn, .term-calc-decision-cta, .pi-checklist-cta-btn, .term-calc-cta-call-btn):hover { transform: translateY(-2px); color: #fff !important; }
.term-calculator-page .term-calc-decision-cta { min-height: 40px; padding: 0 16px !important; font-size: 14px !important; }

/* the closing banner: coral glass */
.term-calculator-page .term-calc-cta-banner { background: transparent !important; }
.term-calculator-page .term-calc-cta-banner-inner { border-radius: 28px !important; overflow: hidden;
  background: radial-gradient(80% 120% at 100% 0%, rgba(255, 255, 255, .22), transparent 60%), linear-gradient(120deg, #f05d49 0%, #d8462f 55%, #a8321f 100%) !important;
  box-shadow: 0 34px 60px -34px rgba(168, 50, 31, .8) !important; }
.term-calculator-page .term-calc-cta-banner-bg-wrap { opacity: .25; }
.term-calculator-page .term-calc-cta-banner .term-calc-cta-call-btn { background: #fff !important; color: var(--ck-deep) !important; box-shadow: 0 14px 26px -14px rgba(0, 0, 0, .45) !important; }

/* checklists: hero stats and the feature panels */
.pi-checklist-page .pi-checklist-stats { gap: 10px !important; background: transparent !important; box-shadow: none !important; border: 0 !important; }
.pi-checklist-page .pi-checklist-stat-icon { background: var(--ck-gloss) !important; color: #fff !important; border-radius: 50% !important; }
.pi-checklist-page .pi-checklist-stat-icon img { filter: brightness(0) invert(1); }
.pi-checklist-page .pi-checklist-stat-value { color: var(--ck-deep) !important; }
.pi-checklist-page .pi-checklist-features-panel, .pi-checklist-page .pi-checklist-features-shell { background: transparent !important; border: 0 !important; box-shadow: none !important; }
.pi-checklist-page .pi-checklist-feature-num { background: var(--ck-gloss) !important; color: #fff !important; border-radius: 50% !important; }
@media (prefers-reduced-motion: reduce) { :is(.term-calculator-page, .pi-checklist-page) * { transition: none !important; } }
/* the step and decision icons are images: keep them, on a soft coral tint (white-glyph filters turn them into blocks) */
.term-calculator-page .term-calc-decision-icon { background: rgba(240, 93, 73, .1) !important; box-shadow: inset 0 0 0 1px rgba(240, 93, 73, .14) !important; }
/* one border per field: the vendor box carries the border, the input inside it none; button labels on one line */
.term-calculator-page .term-calc-form-card [class*="input-box"] :is(input, select) { border: 0 !important; background: transparent !important; box-shadow: none !important; }
.term-calculator-page .term-calc-form-card [class*="input-box"] { border: 1px solid rgba(29, 35, 51, .12) !important; background: rgba(255, 255, 255, .9) !important; }
.term-calculator-page .term-calc-form-card [class*="input-box"]:focus-within { border-color: var(--ck-coral) !important; box-shadow: 0 0 0 3px rgba(240, 93, 73, .16) !important; }
:is(.term-calculator-page, .pi-checklist-page) :is(.term-calc-submit-btn, .term-calc-decision-cta, .pi-checklist-cta-btn, .term-calc-cta-call-btn) { white-space: nowrap; }

/* ===================== D-305b: Careers (.career-page) in the V2 theme - CSS only; the job data, the search, the drawers
   and every field of the application form are untouched. OLD: uppercase hero title, flat white sections, plain cards. ===== */
.career-page { position: relative; isolation: isolate;
  background: radial-gradient(55% 30% at 92% 20%, rgba(255, 139, 120, .16), transparent 70%), radial-gradient(45% 26% at 0% 50%, rgba(240, 93, 73, .08), transparent 70%), #fdfaf8; }
.career-page > section:not(.career-hero) { background: transparent !important; }
.career-page .career-hero h1 { text-transform: none !important; letter-spacing: -.03em !important; line-height: 1.08 !important; }
.career-page h2 { text-transform: none !important; letter-spacing: -.025em !important; color: #1d2333 !important; }
.career-page .compare-accent { display: none !important; }
.career-page :is(.career-section-accent, .career-hero-accent) { background: linear-gradient(95deg, #ff8b78 0%, #f05d49 45%, #e0442f 100%); -webkit-background-clip: text; background-clip: text; color: transparent !important; }
/* the stats band, benefits, jobs, hiring steps: glass */
.career-page :is(.career-stats-grid, .career-job-card, .career-benefit-card, .career-life-card) {
  background: linear-gradient(150deg, rgba(255, 255, 255, .92) 0%, rgba(255, 255, 255, .66) 100%) !important; -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border: 0 !important; border-radius: 22px !important; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .95), 0 0 0 1px rgba(240, 93, 73, .1), 0 26px 50px -34px rgba(92, 23, 14, .4) !important; }
.career-page .career-job-card { transition: transform .35s cubic-bezier(.16, 1.04, .3, 1); }
.career-page .career-job-card:hover { transform: translateY(-3px); }
.career-page .career-benefit-card { padding: 18px 10px !important; }
.career-page :is(.career-benefit-icon, .career-stat-icon, .career-hiring-step-circle) { background: rgba(240, 93, 73, .1) !important; border-radius: 50% !important; box-shadow: inset 0 0 0 1px rgba(240, 93, 73, .14) !important; }
.career-page .career-job-tag { border-radius: 999px !important; background: rgba(240, 93, 73, .1) !important; color: #c23b28 !important; }
.career-page .career-search { border-radius: 12px !important; background: rgba(255, 255, 255, .9) !important; }
.career-page .career-search:focus-within { box-shadow: 0 0 0 3px rgba(240, 93, 73, .16) !important; }
.career-page .career-leader-card, .career-page .career-life-card-media { border-radius: 22px !important; overflow: hidden; }
/* buttons: the site CTA (primary) and a white glass secondary */
.career-page :is(.career-btn--primary, .career-job-apply, .career-drawer-apply-btn, .career-modal-submit) {
  display: inline-flex !important; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 20px !important; border: 0 !important; border-radius: 12px !important;
  font-weight: 600 !important; color: #fff !important; text-decoration: none !important; text-transform: none !important; white-space: nowrap;
  background: var(--cy-cta-bg, linear-gradient(95deg, #ff8b78, #f05d49 58%, #e5503c)) !important; box-shadow: var(--cy-cta-bevel, inset 0 1px 0 rgba(255, 255, 255, .35)), 0 14px 26px -14px rgba(240, 93, 73, .7) !important; }
.career-page .career-modal-submit { width: 100%; min-height: 48px; }
.career-page .career-btn--secondary { border-radius: 12px !important; min-height: 44px; display: inline-flex !important; align-items: center; padding: 0 20px !important; }
.career-page .career-job-view { color: #c23b28 !important; }

/* D-316 (responsive sweep): the closed Careers job drawer sat off-screen to the right but was still reachable with Tab
   (and read out). Closed, it is now hidden after its slide-out; open, it shows as before. */
.career-page ~ .career-drawer:not(.is-open), .career-drawer:not(.is-open) { visibility: hidden; transition: transform .35s ease, visibility 0s linear .35s; }
.career-drawer.is-open { visibility: visible; transition: transform .35s ease, visibility 0s; }

/* D-320 (owner, 8 Nov: "where is the rest of the content of these pages? why did you delete them"): nothing was deleted - the
   mouse wheel did not scroll these pages. style.css gives the page wrappers overflow-x: hidden, which also makes them their
   own vertical scroll box; since the V2 skin their content is 18px taller than that box, so the wheel scrolled the box by
   18px and stopped, and the page under the hero could only be reached with the keyboard or the scrollbar. clip hides the
   sideways overflow the same way but never makes a scroll box, so the wheel scrolls the page again.
   Found on all 19 calculators, the 6 checklists and Careers (scan of 56 pages). */
html body :is(.term-calculator-page, .pi-checklist-page, .career-page) { overflow-x: clip !important; overflow-y: visible !important; }

/* D-320 (owner, 8 Nov: "why is the Hospital protection page like this? fix the image properly"): the coral backdrop behind
   the hospital (hi-checklist/hero-shape.png) is drawn on a solid white rectangle, which showed as a white box on the tinted
   page. Multiply blends that white into the page colour; the coral shape and its shadow look the same. */
.hi-checklist-page .hi-checklist-hero-shape { mix-blend-mode: multiply; }
/* the photo's street was cut off in a hard straight line; it now fades out into the page */
.hi-checklist-page .hi-checklist-hero-hospital { -webkit-mask-image: linear-gradient(to bottom, #000 82%, transparent 100%); mask-image: linear-gradient(to bottom, #000 82%, transparent 100%); }

/* D-329 (owner, 8 Nov: "move the image up, I don't want to see the white space"): the Careers hero image started under the
   sticky header, leaving a white band behind it. The hero now starts at the top of the page (pulled up by the header's
   height: 76px from 992px, 64px below) and runs behind the glass header; its padding grows by the same amount, so the text
   stays where it was. */
.career-page > .career-hero:first-child { margin-top: -64px; padding-top: calc(64px + 64px) !important; }
@media (min-width: 768px) { .career-page > .career-hero:first-child { padding-top: calc(72px + 64px) !important; } }
@media (min-width: 992px) { .career-page > .career-hero:first-child { margin-top: -76px; padding-top: calc(88px + 76px) !important; } }