/*
 * D-362 (owner, 10 Nov, with a polished mockup of the PI calculator: "view this image section by section, then update; you need to
 * add more beautification; it is still nothing like the reference"): the PI calculator drawn as that mockup, in CoverYou's colours,
 * Inter and the product heroes' H1 (accent in coral Pacifico). OLD (D-361b): the plain white reference.
 *   page      a soft coral glow over warm white, blurred blobs and small coral triangles
 *   hero      the copy over a frosted form card (compact fields, coral pill button with an arrow); the results card = a dark
 *             panel (recommended in a peach card, safer / maximum and the risk score in white cards, a coral pill) over a white
 *             area with "Why this result?" as coral-ticked rows
 *   steps     each drawing in a white circle with a small coral number badge, on a dashed line
 *   why       coral-ticked points; the photo in a frosted frame with a coral swoosh and a shield badge
 *   decision  heading between two hairlines; five frosted cards, outlined coral icons, coral text links
 *   others    the calculators as white pill rows with a coral icon and a chevron, in four columns
 *   FAQ       a peach banner with speech bubbles and View FAQs (the questions open below it)
 * Fields, names, ids and scripts unchanged. D-364: applies to every calculator (.term-calculator-page); the pi-calc-* and pic-* rules only meet the PI page.
 */
html body .term-calculator-page { --c: #f05d49; --cd: #c23b28; --ink: #15110f; --t: #3f3833; --m: #7a716c; --ring: rgba(21, 17, 15, .07);
  --glass: linear-gradient(160deg, rgba(255, 255, 255, .92), rgba(255, 255, 255, .72));
  --shadow: 0 30px 60px -34px rgba(168, 50, 31, .38), 0 0 0 1px rgba(255, 255, 255, .9) inset, 0 0 0 1px rgba(240, 93, 73, .06);
  position: relative; overflow-x: clip !important; overflow-y: visible !important; isolation: isolate;
  background:
    radial-gradient(700px 520px at 0% 8%, rgba(255, 150, 130, .30), transparent 65%),
    radial-gradient(760px 560px at 100% 2%, rgba(255, 170, 160, .28), transparent 65%),
    radial-gradient(800px 600px at 100% 45%, rgba(255, 186, 170, .22), transparent 65%),
    radial-gradient(800px 600px at 0% 62%, rgba(255, 170, 150, .20), transparent 65%),
    radial-gradient(900px 600px at 50% 100%, rgba(255, 180, 165, .24), transparent 65%),
    #fff8f6 !important; }
html body .term-calculator-page > section, html body .term-calculator-page section:not(.term-calc-cta-banner) { background: transparent !important; }
/* small coral triangles (decorative) */
html body .term-calculator-page::before, html body .term-calculator-page::after { content: ""; position: absolute; z-index: -1; width: 18px; height: 18px; background: linear-gradient(140deg, #ff8b78, #e5503c);
  clip-path: polygon(0 0, 100% 50%, 0 100%); border-radius: 3px; opacity: .85; }
html body .term-calculator-page::before { left: 6%; top: 360px; rotate: 10deg; }
html body .term-calculator-page::after { right: 7%; top: 130px; rotate: -30deg; width: 14px; height: 14px; }
html body .term-calculator-page .compare-accent, html body .term-calculator-page .cy-divider { display: none !important; }

/* ================= hero ================= */
html body .term-calculator-page .term-calc-hero { padding-bottom: 40px !important; }
html body .term-calculator-page .term-calc-hero-grid { gap: 28px !important; align-items: start !important; }
html body .term-calculator-page .term-calc-hero-intro h1 { font-size: clamp(30px, 2.6vw, 40px) !important; line-height: 1.1 !important; letter-spacing: -.035em !important; }
html:not(#cy-pi-1):not(#cy-pi-2):not(#cy-pi-3) body .term-calculator-page .term-calc-hero-subtitle { margin-top: 10px !important; font-size: 20px !important; line-height: 28px !important; font-weight: 700 !important; color: var(--ink) !important; }
html body .term-calculator-page .term-calc-hero-lead { color: var(--m) !important; }
html body .term-calculator-page .term-calc-badges > li { color: var(--t) !important; }
/* the form: a frosted card */
html body .term-calculator-page .term-calc-form-card { padding: 22px 22px 24px !important; border: 0 !important; border-radius: 24px !important; background: var(--glass) !important; box-shadow: var(--shadow) !important;
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }
html body .term-calculator-page .term-calc-form-title { font-size: 16px !important; font-weight: 700 !important; color: var(--ink) !important; margin-bottom: 14px !important; }
html body .term-calculator-page .term-calc-form-grid { gap: 10px 14px !important; }
html body .term-calculator-page .term-calc-field label, html body .term-calculator-page .term-calc-field-label { font-size: 12.5px !important; font-weight: 600 !important; color: var(--m) !important; margin-bottom: 4px !important; }
html body .term-calculator-page .pi-calc-field-label-row { margin-bottom: 4px !important; }
html body .term-calculator-page .term-calc-form-card input[type="text"], html body .term-calculator-page .term-calc-form-card input[type="tel"], html body .term-calculator-page .term-calc-form-card select:not(.cy-nm) { height: 40px !important; border: 1px solid rgba(21, 17, 15, .08) !important; border-radius: 10px !important;
  background-color: rgba(255, 255, 255, .95) !important; box-shadow: 0 1px 2px rgba(21, 17, 15, .04) !important; font-size: 13.5px !important; }
html body .term-calculator-page .term-calc-input-phone { height: 40px !important; border: 1px solid rgba(21, 17, 15, .08) !important; border-radius: 10px !important; background: #fff !important; overflow: hidden; }
html body .term-calculator-page .term-calc-input-phone input { border: 0 !important; height: 38px !important; }
html body .term-calculator-page .term-calc-phone-prefix { background: #fff4f1 !important; color: var(--cd) !important; font-weight: 600; }
html body .term-calculator-page .term-calc-form-card input:focus, html body .term-calculator-page .term-calc-form-card select:focus { border-color: var(--c) !important; box-shadow: 0 0 0 3px rgba(240, 93, 73, .14) !important; outline: none; }
html body .term-calculator-page .pi-calc-segment-btn { height: 40px !important; border: 1px solid rgba(21, 17, 15, .08) !important; border-radius: 10px !important; background: #fff !important; font-size: 13px !important; }
html body .term-calculator-page .pi-calc-segment-btn:has(.pi-calc-segment-input:checked), html body .term-calculator-page .pi-calc-segment-btn.is-selected { border-color: var(--c) !important; background: #fff1ed !important; color: var(--cd) !important; }
html body .term-calculator-page .term-calc-submit-btn { min-height: 46px !important; padding: 0 30px !important; border: 0 !important; border-radius: 999px !important; color: #fff !important; font-weight: 600 !important;
  background: linear-gradient(95deg, #ff7a63, #f05d49 55%, #e0442f) !important; box-shadow: 0 14px 26px -12px rgba(240, 93, 73, .75), inset 0 1px 0 rgba(255, 255, 255, .35) !important; }
html body .term-calculator-page .term-calc-submit-btn::after { content: "\2192"; margin-left: 10px; transition: translate .3s; }
html body .term-calculator-page .term-calc-submit-btn:hover::after { translate: 3px 0; }
html body .term-calculator-page .term-calc-disclaimer { color: var(--m) !important; font-style: italic; font-size: 12.5px !important; }

/* ================= results: a dark panel over a white area ================= */
html body .term-calculator-page .pi-calc-results-shell { padding: 10px !important; border: 0 !important; border-radius: 26px !important; background: var(--glass) !important; box-shadow: var(--shadow) !important; overflow: visible !important;
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }
html body .term-calculator-page .pi-calc-results-inner { padding: 0 !important; background: none !important; box-shadow: none !important; border-radius: 0 !important; gap: 0 !important; }
html body .term-calculator-page .pic-dark { display: flex; flex-direction: column; gap: 12px; padding: 18px 16px 18px; border-radius: 20px;
  background: radial-gradient(90% 50% at 100% 0%, rgba(240, 93, 73, .22), transparent 60%), linear-gradient(170deg, #2a2340 0%, #1e1a2e 55%, #15110f 100%); box-shadow: 0 20px 40px -24px rgba(21, 17, 15, .8); }
html body .term-calculator-page .pi-calc-results-label { margin: 0 !important; text-align: center !important; font-size: 15px !important; font-weight: 700 !important; color: #fff !important; }
html body .term-calculator-page .pi-calc-coverage-recommended { padding: 14px !important; border: 0 !important; border-radius: 16px !important; text-align: center !important;
  background: linear-gradient(160deg, #fff4ef, #ffe0d6) !important; box-shadow: inset 0 1px 0 #fff !important; }
html body .term-calculator-page .pi-calc-coverage-recommended .pi-calc-coverage-amount { color: var(--c) !important; font-size: 34px !important; font-weight: 800 !important; }
html body .term-calculator-page .pi-calc-coverage-recommended .pi-calc-coverage-tag, html body .term-calculator-page .pi-calc-coverage-recommended .pi-calc-coverage-note { color: var(--ink) !important; }
html body .term-calculator-page .pi-calc-coverage-row { gap: 10px !important; }
html body .term-calculator-page .pi-calc-coverage-safer, html body .term-calculator-page .pi-calc-coverage-max { padding: 12px !important; border: 0 !important; border-radius: 14px !important; background: #fff !important; text-align: center !important; }
html body .term-calculator-page :is(.pi-calc-coverage-safer, .pi-calc-coverage-max) .pi-calc-coverage-tag { color: var(--ink) !important; font-weight: 700 !important; }
html body .term-calculator-page .pi-calc-coverage-safer .pi-calc-coverage-amount, html body .term-calculator-page .pi-calc-coverage-safer .pi-calc-coverage-premium { color: #3b5bdb !important; }
html body .term-calculator-page .pi-calc-coverage-max .pi-calc-coverage-amount, html body .term-calculator-page .pi-calc-coverage-max .pi-calc-coverage-premium { color: #0ca750 !important; }
html body .term-calculator-page .pi-calc-coverage-note { color: var(--m) !important; }
html body .term-calculator-page .pi-calc-risk-strip { padding: 12px !important; border: 0 !important; border-radius: 14px !important; background: #fff !important; }
html body .term-calculator-page .pi-calc-risk-strip-divider-h { display: none !important; }
html body .term-calculator-page .pi-calc-know-more-btn { display: block; width: fit-content; margin: 10px auto 0 !important; padding: 10px 26px !important; border-radius: 999px !important; color: #fff !important;
  background: linear-gradient(95deg, #ff7a63, #f05d49 55%, #e0442f) !important; box-shadow: 0 12px 22px -10px rgba(240, 93, 73, .8) !important; font-weight: 600 !important; }
html body .term-calculator-page .pi-calc-know-more-btn::after { content: " \2192"; }
html body .term-calculator-page .pi-calc-why-result { padding: 16px 12px 4px; }
html body .term-calculator-page .pi-calc-why-result h3 { margin: 0 0 10px !important; text-align: left !important; font-size: 15px !important; font-weight: 700 !important; color: var(--ink) !important; }
html body .term-calculator-page .pi-calc-why-list { gap: 8px !important; }
html body .term-calculator-page .pi-calc-why-item { padding: 0 !important; border: 0 !important; background: none !important; box-shadow: none !important; align-items: flex-start !important; gap: 10px !important; }
html body .term-calculator-page .pi-calc-why-icon { width: 20px !important; height: 20px !important; padding: 0; border-radius: 50%; margin-top: 1px;
  content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='12' fill='%23f05d49'/%3E%3Cpath d='M7 12.5l3.2 3.2L17 9' fill='none' stroke='%23fff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
html body .term-calculator-page .pi-calc-why-item strong { font-size: 13.5px !important; color: var(--ink) !important; }
html body .term-calculator-page .pi-calc-why-item p { font-size: 13px !important; color: var(--m) !important; }
html body .term-calculator-page .pi-calc-results-footnote { padding: 6px 12px 10px; color: var(--m) !important; font-size: 12.5px !important; }

/* ================= section headings ================= */
html body .term-calculator-page :is(.compare-heading, .cy-section-head) h2, html body .term-calculator-page .term-calc-why-content h2 { color: var(--ink) !important; font-weight: 700 !important; letter-spacing: -.02em !important; text-transform: none !important; }
html body .term-calculator-page :is(.term-calc-decision, .doctor-calculators-section) :is(.compare-heading, .cy-section-head) h2 { display: inline-flex; align-items: center; gap: 18px; }
html body .term-calculator-page :is(.term-calc-decision, .doctor-calculators-section) :is(.compare-heading, .cy-section-head) h2::before,
html body .term-calculator-page :is(.term-calc-decision, .doctor-calculators-section) :is(.compare-heading, .cy-section-head) h2::after { content: ""; width: 40px; height: 1.5px; background: linear-gradient(90deg, transparent, var(--c)); }
html body .term-calculator-page :is(.term-calc-decision, .doctor-calculators-section) :is(.compare-heading, .cy-section-head) h2::after { background: linear-gradient(90deg, var(--c), transparent); }

/* ================= how it works: white circles, number badges, a dashed line ================= */
html body .term-calculator-page .term-calc-steps { position: relative; }
html body .term-calculator-page .term-calc-steps::before { content: ""; position: absolute; z-index: 0; left: 10%; right: 10%; top: 128px; border-top: 2px dashed rgba(240, 93, 73, .3); }
html body .term-calculator-page .term-calc-step { position: relative; z-index: 1; background: none !important; box-shadow: none !important; border: 0 !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
html body .term-calculator-page .term-calc-step-icon { border-radius: 50% !important; padding: 26px !important; box-sizing: border-box;
  background: radial-gradient(circle at 40% 30%, #fff, #fff6f3) !important; box-shadow: 0 0 0 8px rgba(255, 255, 255, .7), 0 24px 40px -22px rgba(168, 50, 31, .45) !important; }
html body .term-calculator-page .term-calc-step-num { left: calc(50% - 98px + 26px) !important; top: 64px !important; z-index: 3 !important; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%;
  font-size: 13px !important; line-height: 1 !important; font-weight: 700 !important; color: #fff !important; background: linear-gradient(150deg, #ff8b78, #e5503c);
  box-shadow: 0 0 0 3px #fff, 0 6px 12px -4px rgba(229, 80, 60, .7); }
html body .term-calculator-page .term-calc-step-copy h3 { color: var(--ink) !important; font-weight: 700 !important; }
html body .term-calculator-page .term-calc-step-copy p { color: var(--m) !important; }

/* ================= why: ticked points, a framed photo with a swoosh and a shield ================= */
html body .term-calculator-page .term-calc-why-list-checks .term-calc-list-check-icon { width: 20px !important; height: 20px !important;
  content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='12' fill='%23f05d49'/%3E%3Cpath d='M7 12.5l3.2 3.2L17 9' fill='none' stroke='%23fff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
html body .term-calculator-page .term-calc-why-list-checks li { color: var(--t) !important; }
html body .term-calculator-page .term-calc-why-media { position: relative; isolation: isolate; padding: 14px; border-radius: 30px; background: var(--glass); box-shadow: var(--shadow); }
html body .term-calculator-page .term-calc-why-media img { position: relative; z-index: 1; border-radius: 22px !important; box-shadow: none !important; display: block; width: 100%; }
html body .term-calculator-page .term-calc-why-media::before { content: ""; position: absolute; z-index: 0; left: -40px; right: -30px; top: 40%; height: 70%; border-radius: 50%; border: 2px solid rgba(240, 93, 73, .55); border-top-color: transparent; border-right-color: transparent; rotate: -8deg; pointer-events: none; }
html body .term-calculator-page .term-calc-why-media::after { content: ""; position: absolute; z-index: 2; right: -18px; top: 14%; width: 84px; height: 84px; border-radius: 50%;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2l8 3v6c0 5-3.4 9.3-8 11-4.6-1.7-8-6-8-11V5l8-3z' fill='%23f05d49'/%3E%3Cpath d='M8 12l3 3 5-6' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 44px no-repeat, radial-gradient(circle at 40% 30%, #fff, #ffece6);
  box-shadow: 0 0 0 8px rgba(255, 255, 255, .6), 0 20px 34px -14px rgba(229, 80, 60, .6); }

/* ================= decision centre: frosted cards ================= */
html body .term-calculator-page .term-calc-decision-card { padding: 20px 18px !important; border: 0 !important; border-radius: 22px !important; background: linear-gradient(165deg, rgba(255, 255, 255, .9), rgba(255, 240, 235, .75)) !important;
  box-shadow: var(--shadow) !important; -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); transition: transform .35s; }
html body .term-calculator-page .term-calc-decision-card:hover { transform: translateY(-4px); }
html body .term-calculator-page .term-calc-decision-icon { width: 44px !important; height: 44px !important; border-radius: 50% !important; background: #fff !important; box-shadow: 0 0 0 1px rgba(240, 93, 73, .2) !important; }
html body .term-calculator-page .term-calc-decision-card h3 { color: var(--ink) !important; font-weight: 700 !important; }
html body .term-calculator-page .term-calc-decision-card p { color: var(--m) !important; }
html body .term-calculator-page .term-calc-decision-cta { min-height: 0 !important; padding: 0 !important; background: none !important; box-shadow: none !important; color: var(--c) !important; font-weight: 600 !important; justify-content: flex-start !important; }

/* ================= other calculators: pill rows ================= */
html body .term-calculator-page .doctor-calculators-section .calc-card { min-height: 0 !important; padding: 10px 14px !important; border: 0 !important; border-radius: 999px !important; background: rgba(255, 255, 255, .92) !important;
  box-shadow: 0 0 0 1px rgba(240, 93, 73, .08), 0 10px 22px -18px rgba(168, 50, 31, .5) !important; transition: transform .3s; position: relative; padding-right: 34px !important; }
html body .term-calculator-page .doctor-calculators-section .calc-card::after { content: "\203A"; position: absolute; right: 16px; top: 50%; translate: 0 -50%; font-size: 20px; color: var(--c); }
html body .term-calculator-page .doctor-calculators-section .calc-card:hover { transform: translateY(-2px); }
html body .term-calculator-page .doctor-calculators-section .calc-card-icon { width: 30px !important; height: 30px !important; border-radius: 50% !important; background: #fff1ed !important; }
:is(html, .cy-nm) body .term-calculator-page .doctor-calculators-section h3, html body .term-calculator-page .doctor-calculators-section .calc-group-title { font-size: 15px !important; color: var(--ink) !important; }

/* ================= FAQ banner ================= */
.term-calculator-page .pic-faqband { padding: 20px 0 64px; }
.term-calculator-page .pic-faqband__card { position: relative; overflow: visible; display: grid; grid-template-columns: minmax(0, 1fr) auto 150px; gap: 24px; align-items: center; padding: 34px 40px; border-radius: 34px;
  background: radial-gradient(70% 140% at 0% 50%, rgba(255, 255, 255, .7), transparent 60%), linear-gradient(110deg, #fff1ec 0%, #ffd9cf 100%); box-shadow: var(--shadow); }
.term-calculator-page .pic-faqband__title { margin: 0 0 6px; font-size: clamp(22px, 2.2vw, 30px) !important; font-weight: 700 !important; letter-spacing: -.02em; color: var(--ink) !important; }
.term-calculator-page .pic-faqband__text { margin: 0; color: var(--t) !important; }
.term-calculator-page .pic-faqband__btn { display: inline-flex; align-items: center; gap: 8px; padding: 10px 22px; border: 1.5px solid var(--c); border-radius: 999px; background: rgba(255, 255, 255, .8); color: var(--cd); font-weight: 600; cursor: pointer; transition: background .25s, color .25s; }
.term-calculator-page .pic-faqband__btn:hover { background: var(--c); color: #fff; }
.term-calculator-page .pic-faqband__art { position: relative; height: 100px; }
.term-calculator-page .pic-bub { position: absolute; display: grid; place-items: center; border-radius: 22px; box-shadow: 0 18px 30px -14px rgba(21, 17, 15, .4); }
.term-calculator-page .pic-bub--q { left: 0; top: -36px; width: 76px; height: 70px; font: 800 40px/1 var(--cy-font, Inter, sans-serif); color: #fff; background: linear-gradient(150deg, #7c9cff, #4263eb); rotate: -8deg; }
.term-calculator-page .pic-bub--dots { right: 0; top: 20px; width: 84px; height: 62px; background: #fff; display: flex; gap: 6px; justify-content: center; align-items: center; rotate: 6deg; }
.term-calculator-page .pic-bub--dots i { width: 9px; height: 9px; border-radius: 50%; background: #3b3f6b; }
.term-calculator-page .pic-faqwrap .cy-section-head { display: none; }
@media (prefers-reduced-motion: no-preference) {
  .term-calculator-page .pic-bub--q { animation: pic-float 4s ease-in-out infinite; }
  .term-calculator-page .pic-bub--dots { animation: pic-float 4s ease-in-out 1.2s infinite; }
}
@keyframes pic-float { 50% { translate: 0 -6px; } }

/* the closing photo banner is not in the reference (the FAQ banner closes the page) */
html body .term-calculator-page .term-calc-cta-banner { display: none !important; }

@media (max-width: 991.98px) {
  html body .term-calculator-page .term-calc-steps::before { display: none; }
  .term-calculator-page .pic-faqband__card { grid-template-columns: minmax(0, 1fr); padding: 28px 22px; }
  .term-calculator-page .pic-faqband__art { display: none; }
  html body .term-calculator-page .term-calc-why-media::after { right: 6px; width: 64px; height: 64px; background-size: 34px, auto; }
}
html.cy-lite body .term-calculator-page .term-calc-form-card, html.cy-lite body .term-calculator-page .pi-calc-results-shell, html.cy-lite body .term-calculator-page .term-calc-decision-card, html.cy-lite body .term-calculator-page .term-calc-why-media { -webkit-backdrop-filter: none; backdrop-filter: none; }
/* the step drawings sit on white boxes: blend them into the circle */
html body .term-calculator-page .term-calc-step-icon img { mix-blend-mode: multiply; }
@media (max-width: 991.98px) { html body .term-calculator-page::before, html body .term-calculator-page::after { display: none; } }
/* D-363: the FAQ in the product pages' split glass layout, on this page's ground */
.term-calculator-page .pic-pgfaq { background: transparent !important; }
.term-calculator-page .pic-pgfaq .pg-faq { border-top: 0 !important; }

/* ===== D-364 (owner, 10 Nov: "go for it" - the PI calculator design on all 19 calculators): the other calculators' own result shells
   as the dark panel with white inner cards, their input boxes and sliders in the same light style. calc-skin.css (D-305) and
   calc-v2.css (D-333) no longer style any calculator. ===== */
html body .term-calculator-page .term-calc-results-shell, html body .term-calculator-page .bmi-calc-results-shell, html body .term-calculator-page .calorie-calc-results-shell {
  padding: 18px 16px !important; border: 0 !important; border-radius: 24px !important; overflow: hidden;
  background: radial-gradient(90% 50% at 100% 0%, rgba(240, 93, 73, .22), transparent 60%), linear-gradient(170deg, #2a2340 0%, #1e1a2e 55%, #15110f 100%) !important;
  box-shadow: 0 0 0 8px rgba(255, 255, 255, .75), 0 30px 60px -30px rgba(21, 17, 15, .6) !important; }
html body .term-calculator-page .term-calc-results-label, html body .term-calculator-page .term-calc-results-footnote { color: #fff !important; }
html body .term-calculator-page .term-calc-results-inner { border: 0 !important; border-radius: 16px !important; background: linear-gradient(160deg, #fff, #fff2ee) !important; box-shadow: inset 0 1px 0 #fff !important; }
html body .term-calculator-page .term-calc-cover-value, html body .term-calculator-page .term-calc-cover-unit { color: var(--c) !important; }
html body .term-calculator-page [class*="input-box"] { border: 1px solid rgba(21, 17, 15, .08) !important; border-radius: 10px !important; background: rgba(255, 255, 255, .95) !important; box-shadow: 0 1px 2px rgba(21, 17, 15, .04) !important; }
html body .term-calculator-page [class*="input-box"]:focus-within { border-color: var(--c) !important; box-shadow: 0 0 0 3px rgba(240, 93, 73, .14) !important; }
html body .term-calculator-page [class*="input-box"] input, html body .term-calculator-page [class*="input-box"] select { border: 0 !important; background: transparent !important; box-shadow: none !important; }
html body .term-calculator-page input[type="range"] { accent-color: var(--c); }
html body .term-calculator-page .term-calc-badges > li { background: rgba(255, 255, 255, .8) !important; border-radius: 999px !important; box-shadow: 0 0 0 1px rgba(240, 93, 73, .1) !important; }
/* fixes after the first look: one border per input box (the inner input had the form-card field style too); the result shells grow
   with their content (the term card was cut at the stretched row height); button labels on one line */
html body .term-calculator-page .term-calc-form-card [class*="input-box"] input, html body .term-calculator-page .term-calc-form-card [class*="input-box"] select { border: 0 !important; background: transparent !important; box-shadow: none !important; height: auto !important; }
html body .term-calculator-page .term-calc-results-shell, html body .term-calculator-page .bmi-calc-results-shell, html body .term-calculator-page .calorie-calc-results-shell, html body .term-calculator-page .pi-calc-results-shell { height: auto !important; max-height: none !important; overflow: visible !important; align-self: start !important; }
html body .term-calculator-page .term-calc-results-inner, html body .term-calculator-page [class*="results-inner"] { height: auto !important; max-height: none !important; }
html body .term-calculator-page .term-calc-submit-btn { white-space: nowrap; width: auto !important; }
/* the vendor shell pins its label, inner card and footnote with position: absolute, so the dark panel cannot grow with them; they
   flow in order now, and the panel ends under the footnote */
html body .term-calculator-page .term-calc-results-shell { display: flex !important; flex-direction: column; gap: 12px; min-height: 0 !important; }
html body .term-calculator-page .term-calc-results-shell>.term-calc-results-label, html body .term-calculator-page .term-calc-results-shell>.term-calc-results-inner, html body .term-calculator-page .term-calc-results-shell>.term-calc-results-footnote { position: static !important; inset: auto !important; transform: none !important; width: auto !important; max-width: none !important; min-height: 0 !important; margin: 0 !important; }
html body .term-calculator-page .term-calc-results-label { text-align: center; font-weight: 700 !important; }
html body .term-calculator-page .term-calc-results-footnote { text-align: center; }

/* D-365 (owner, 10 Nov: "fix this, not properly aligned and the CTAs are cutting out; do this for all the calculator pages" and the hero
   badges: "why are these so squished up"): other calculators - every row the same 64px height (a two-line name no longer makes a
   taller row, so the columns line up), full column width; the scroll box clips 10px outside its edge so the rows' rounded edges and
   shadows are no longer cut (the next row is 14px away, so nothing peeks in). Hero badges: real pill padding and spacing. */
html body .term-calculator-page .doctor-calculators-section .calc-column-list { gap: 14px !important; }
@media (min-width: 768px) {
  html body .term-calculator-page .doctor-calculators-section .calc-card { box-sizing: border-box; width: 100% !important; height: 64px !important; min-height: 64px !important; max-height: 64px;
    padding: 0 38px 0 14px !important; gap: 12px !important; align-items: center !important; border-radius: 18px !important; }
}
html body .term-calculator-page .doctor-calculators-section .calc-card-icon { flex: none; width: 36px !important; height: 36px !important; display: grid !important; place-items: center; }
html body .term-calculator-page .doctor-calculators-section .calc-card-icon img { width: 24px !important; height: 24px !important; }
html body .term-calculator-page .doctor-calculators-section .calc-card { font-size: 14px !important; line-height: 1.3 !important; }
html body .term-calculator-page .doctor-calculators-section .calc-column-viewport { overflow: clip !important; overflow-clip-margin: 10px; }
html body .term-calculator-page .doctor-calculators-section .calc-column-title { height: auto !important; margin-bottom: 12px !important; }
html body .term-calculator-page .doctor-calculators-section .calc-column-nav { margin-top: 14px !important; }
html body .term-calculator-page .term-calc-badges { display: flex !important; flex-wrap: wrap; gap: 10px !important; }
html body .term-calculator-page .term-calc-badges > li { display: inline-flex !important; align-items: center; gap: 8px !important; margin: 0 !important; padding: 7px 14px 7px 11px !important; white-space: nowrap; font-size: 14px !important; }
html body .term-calculator-page .term-calc-badges .term-calc-badge-icon { width: 18px !important; height: 18px !important; margin: 0 !important; }
/* phones: each column is a sideways row of tiles (icon over name); every tile the same size, the chevron in its top-right corner,
   the column titles without the white box */
@media (max-width: 767.98px) {
  html body .term-calculator-page .doctor-calculators-section .calc-card { box-sizing: border-box; height: 124px !important; min-height: 124px !important; padding: 14px 30px 12px 14px !important; flex-direction: column !important;
    align-items: flex-start !important; justify-content: space-between !important; gap: 8px !important; border-radius: 18px !important; }
  html body .term-calculator-page .doctor-calculators-section .calc-card::after { top: 22px; translate: none; right: 12px; }
  html body .term-calculator-page .doctor-calculators-section .calc-column-title { background: transparent !important; box-shadow: none !important; padding: 0 !important; }
  html body .term-calculator-page .doctor-calculators-section .calc-column-viewport { overflow-clip-margin: 0; }
}