/*
 * D-333 (owner, 8 Nov: "why are the calculator pages like this? no properly set CTA. fix all the calculator pages' design,
 * they are very bad, not at all creative" / "fix all calculator pages"): a second V2 pass over the shared sections of all
 * 19 calculators (wrapper .term-calculator-page). CSS only: the text, fields, ids, links and scripts are unchanged.
 * Loaded after calc-skin.css (layouts/partials/head).
 *   - Hero: the benefit badges become glass pills; the PI, BMI and Calorie results panels (still the vendor's dark green)
 *     use the same coral "ember" panel as the other 16.
 *   - How it works: the huge "1"-"5" numbers lay over the drawings and the text ran to the card edges. Now each step is a
 *     glass card with a numbered coral badge on a dashed path that links the five steps, its drawing in a soft coral
 *     medallion, and padded text.
 *   - Why use: the photo sits in a frame with a tilted coral plate behind it and a floating "verified" tile; the
 *     checklist becomes glass rows.
 *   - Decision Centre: the CTA was a cramped button whose coral arrow vanished on the coral fill and whose label ran to the
 *     edge. Now every card ends in a full-width button (label left, white arrow in a circle right) at the same height, with a
 *     coral top edge and a gradient icon tile on hover.
 *   - Closing banner: the heading was dark ink on coral (calc-skin's h2 colour); it is white again, the photo is tinted
 *     into the coral, and the ticks are white.
 * Reduced motion: no floating or lifting. Lite mode: no blur.
 */
html body .term-calculator-page {
  --cv-coral: #f05d49; --cv-coral-2: #ff8b78; --cv-deep: #c23b28; --cv-ink: #1d2333; --cv-text: #3f3833; --cv-mute: #6b625c;
  --cv-glass: linear-gradient(155deg, rgba(255, 255, 255, .94) 0%, rgba(255, 255, 255, .7) 100%);
  --cv-ring: inset 0 0 0 1px rgba(255, 255, 255, .95), 0 0 0 1px rgba(240, 93, 73, .1), 0 30px 54px -36px rgba(92, 23, 14, .45);
  --cv-gloss: radial-gradient(120% 90% at 30% 14%, rgba(255, 255, 255, .5) 0, rgba(255, 255, 255, .1) 38%, rgba(255, 255, 255, 0) 60%), linear-gradient(150deg, #ff8b78, #e5503c);
  --cv-spring: cubic-bezier(.16, 1.04, .3, 1);
}

/* ---------- hero: benefit pills ---------- */
html body .term-calculator-page .term-calc-badges { display: flex !important; flex-wrap: wrap; gap: 8px !important; padding: 0 !important; list-style: none; }
html body .term-calculator-page .term-calc-badges > li { display: inline-flex !important; align-items: center; gap: 7px; margin: 0 !important; padding: 7px 13px 7px 9px !important; border-radius: 999px;
  background: rgba(255, 255, 255, .78); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .95), 0 0 0 1px rgba(240, 93, 73, .12), 0 10px 22px -16px rgba(92, 23, 14, .45);
  font-size: 14px; font-weight: 500; color: var(--cv-ink); white-space: nowrap; }
html body .term-calculator-page .term-calc-badges .term-calc-badge-icon { width: 18px; height: 18px; flex: none; }

/* ---------- hero: one results panel colour (PI, BMI and Calorie were the vendor's dark green) ---------- */
html body .term-calculator-page :is(.pi-calc-results-shell, .bmi-calc-results-shell, .calorie-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; }

/* ---------- how it works: a linked path of five steps ---------- */
html body .term-calculator-page .term-calc-steps { position: relative; display: grid !important; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 22px !important;
  max-width: 1180px; margin: 64px auto 0 !important; padding: 0 !important; }
/* the dashed path through the five badges */
html body .term-calculator-page .term-calc-steps::before { content: ""; position: absolute; z-index: 0; left: 10%; right: 10%; top: -1px; height: 2px;
  background: repeating-linear-gradient(90deg, rgba(240, 93, 73, .55) 0 8px, transparent 8px 16px); }
html body .term-calculator-page .term-calc-step { position: relative; z-index: 1; display: flex !important; flex-direction: column; width: auto !important; flex: none !important; min-width: 0;
  margin: 0 !important; padding: 40px 16px 22px !important; overflow: visible !important; text-align: center;
  background: var(--cv-glass) !important; -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border: 0 !important; border-radius: 24px !important; box-shadow: var(--cv-ring) !important;
  transition: transform .45s var(--cv-spring), box-shadow .45s ease; }
html body .term-calculator-page .term-calc-step:hover { transform: translateY(-6px); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .95), 0 0 0 1px rgba(240, 93, 73, .2), 0 36px 60px -34px rgba(92, 23, 14, .55) !important; }
html body .term-calculator-page .term-calc-step-visual { position: static !important; height: auto !important; margin: 0 0 16px !important; }
/* the number: a glossy coral badge on the path */
html body .term-calculator-page .term-calc-step-num { position: absolute !important; z-index: 2; left: 50% !important; top: -23px !important; translate: -50% 0;
  display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%;
  font: 700 18px/1 var(--cy-font, Inter, sans-serif) !important; letter-spacing: 0; color: #fff !important; background: var(--cv-gloss);
  box-shadow: 0 0 0 5px #fdfaf8, 0 0 0 6px rgba(240, 93, 73, .18), 0 14px 24px -10px rgba(229, 80, 60, .75); }
/* the drawing in a soft coral medallion */
html body .term-calculator-page .term-calc-step-icon { position: relative !important; inset: auto !important; display: grid !important; place-items: center;
  width: 148px !important; max-width: 100%; height: 148px !important; margin: 0 auto !important; padding: 18px !important; box-sizing: border-box; border-radius: 50% !important; overflow: hidden;
  background: radial-gradient(circle at 50% 38%, #fff 0%, #fff6f3 52%, #fde4de 100%) !important;
  box-shadow: inset 0 0 0 1px rgba(240, 93, 73, .14), inset 0 -10px 24px -14px rgba(240, 93, 73, .35), 0 16px 30px -22px rgba(92, 23, 14, .5) !important; }
/* some drawings sit on a white box: multiply melts the white into the medallion */
html body .term-calculator-page .term-calc-step-icon img { width: 100% !important; height: 100% !important; object-fit: contain; mix-blend-mode: multiply; transition: transform .6s var(--cv-spring); }
html body .term-calculator-page .term-calc-step:hover .term-calc-step-icon img { transform: scale(1.07); }
html body .term-calculator-page .term-calc-step-copy { padding: 0 2px; }
html body .term-calculator-page .term-calc-step-copy h3 { margin: 0 0 6px !important; font-size: 16px !important; line-height: 22px !important; font-weight: 700 !important; color: var(--cv-ink) !important; text-align: center !important; text-wrap: balance; }
html body .term-calculator-page .term-calc-step-copy p { margin: 0 !important; font-size: 14px !important; line-height: 21px !important; color: var(--cv-mute) !important; text-align: center !important; text-wrap: pretty; }

/* ---------- why use: framed photo, glass checklist ---------- */
html body .term-calculator-page .term-calc-why-media { position: relative; isolation: isolate; padding: 18px 18px 18px 0; }
html body .term-calculator-page .term-calc-why-media::before { content: ""; position: absolute; z-index: -1; inset: 0 0 34px 34px; border-radius: 30px; rotate: 3.5deg;
  background: radial-gradient(90% 80% at 20% 0%, rgba(255, 255, 255, .35), transparent 60%), linear-gradient(140deg, #ff8b78 0%, #f05d49 55%, #d8462f 100%);
  box-shadow: 0 34px 60px -34px rgba(168, 50, 31, .7); }
html body .term-calculator-page .term-calc-why-media::after { content: ""; position: absolute; z-index: 2; left: -22px; bottom: 6px; width: 64px; height: 64px; border-radius: 20px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l7 3v5c0 4.5-3 8.3-7 10-4-1.7-7-5.5-7-10V6l7-3z'/%3E%3Cpath d='M9 12l2 2 4-4'/%3E%3C/svg%3E") center / 30px no-repeat, var(--cv-gloss);
  box-shadow: 0 0 0 6px rgba(255, 255, 255, .85), 0 22px 36px -16px rgba(229, 80, 60, .8); }
html body .term-calculator-page .term-calc-why-media img { position: relative; z-index: 1; display: block; width: 100%; border-radius: 26px !important;
  box-shadow: 0 0 0 6px rgba(255, 255, 255, .9), 0 30px 56px -30px rgba(21, 17, 15, .55) !important; }
html body .term-calculator-page .term-calc-why-list-checks { display: grid !important; gap: 8px !important; margin-top: 4px !important; padding: 0 !important; }
html body .term-calculator-page .term-calc-why-list-checks > li { display: flex !important; align-items: center; gap: 12px !important; margin: 0 !important; padding: 10px 14px 10px 10px !important; border-radius: 14px;
  background: rgba(255, 255, 255, .72); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .95), 0 0 0 1px rgba(240, 93, 73, .1), 0 12px 24px -20px rgba(92, 23, 14, .45);
  font-size: 14px !important; line-height: 20px !important; color: var(--cv-ink) !important; transition: transform .35s var(--cv-spring); }
html body .term-calculator-page .term-calc-why-list-checks > li:hover { transform: translateX(4px); }
html body .term-calculator-page .term-calc-why-list-checks .term-calc-list-check-icon { flex: none; width: 26px !important; height: 26px !important; padding: 6px; box-sizing: border-box; border-radius: 50%;
  background: var(--cv-gloss); filter: none; box-shadow: 0 6px 12px -6px rgba(229, 80, 60, .8); }
/* the check glyph is a coral image: white on the coral dot */
html body .term-calculator-page .term-calc-why-list-checks .term-calc-list-check-icon { content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E"); }

/* ---------- decision centre: equal cards, one full-width CTA each ---------- */
html body .term-calculator-page :is(.term-calc-decision-grid, .travel-calc-decision-grid) { display: grid !important; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 20px !important;
  max-width: 1180px; margin: 40px auto 0 !important; }
html body .term-calculator-page .term-calc-decision-card { position: relative; overflow: hidden; display: flex !important; flex-direction: column; justify-content: flex-start !important;
  width: auto !important; min-height: 0 !important; margin: 0 !important; padding: 22px 20px 20px !important; text-decoration: none !important;
  background: var(--cv-glass) !important; border: 0 !important; border-radius: 24px !important; box-shadow: var(--cv-ring) !important;
  transition: transform .45s var(--cv-spring), box-shadow .45s ease; }
html body .term-calculator-page .term-calc-decision-card::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: linear-gradient(90deg, #ff8b78, #f05d49, #e5503c);
  transform: scaleX(0); transform-origin: left; transition: transform .5s var(--cv-spring); }
html body .term-calculator-page .term-calc-decision-card:hover { transform: translateY(-6px) !important; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .95), 0 0 0 1px rgba(240, 93, 73, .2), 0 36px 60px -34px rgba(92, 23, 14, .55) !important; }
html body .term-calculator-page .term-calc-decision-card:hover::before, html body .term-calculator-page .term-calc-decision-card:focus-visible::before { transform: scaleX(1); }
html body .term-calculator-page .term-calc-decision-card-body { flex: 1 1 auto; display: flex; flex-direction: column; }
html body .term-calculator-page .term-calc-decision-icon { width: 54px !important; height: 54px !important; margin: 0 0 16px !important; border-radius: 16px !important;
  background: rgba(240, 93, 73, .1) !important; box-shadow: inset 0 0 0 1px rgba(240, 93, 73, .16) !important; transition: background .4s ease, box-shadow .4s ease, rotate .5s var(--cv-spring); }
html body .term-calculator-page .term-calc-decision-icon img { width: 28px !important; height: 28px !important; transition: filter .4s ease; }
html body .term-calculator-page .term-calc-decision-card:hover .term-calc-decision-icon { background: var(--cv-gloss) !important; box-shadow: 0 12px 22px -10px rgba(229, 80, 60, .8) !important; rotate: -6deg; }
html body .term-calculator-page .term-calc-decision-card:hover .term-calc-decision-icon img { filter: brightness(0) invert(1); }
html body .term-calculator-page .term-calc-decision-card h3 { margin: 0 0 8px !important; font-size: 18px !important; line-height: 24px !important; font-weight: 700 !important; color: var(--cv-ink) !important; text-wrap: balance; }
html body .term-calculator-page .term-calc-decision-card p { margin: 0 !important; font-size: 14px !important; line-height: 21px !important; color: var(--cv-mute) !important; }
/* the CTA: full width at the bottom of every card, label left, white arrow in a circle right */
html body .term-calculator-page .term-calc-decision-cta { display: flex !important; align-items: center; justify-content: space-between !important; gap: 10px; width: 100%; box-sizing: border-box;
  min-height: 46px !important; margin: 20px 0 0 !important; padding: 0 6px 0 16px !important; border-radius: 13px !important;
  font-size: 15px !important; font-weight: 600 !important; line-height: 1.2 !important; color: #fff !important; text-align: left; white-space: nowrap; }
/* the arrow images differ per page (Travel's is a filled square), so the arrow is drawn here and the image is hidden */
html body .term-calculator-page .term-calc-decision-arrow { display: none !important; }
html body .term-calculator-page .term-calc-decision-cta::after { content: ""; flex: none; width: 34px; height: 34px; border-radius: 10px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / 17px no-repeat, rgba(255, 255, 255, .22);
  transition: translate .45s var(--cv-spring); }
html body .term-calculator-page .term-calc-decision-card:hover .term-calc-decision-cta::after { translate: 3px 0; }
/* the card lifts, so the button does not lift again */
html body .term-calculator-page .term-calc-decision-card:hover .term-calc-decision-cta { transform: none !important; }

/* the first card is the page's main next step: from 768px it is a large coral card (two rows high from 992px) and the
   others sit beside it in a 2 x 2 grid, so every button has room for its label and arrow */
@media (min-width: 768px) {
  html body .term-calculator-page :is(.term-calc-decision-grid, .travel-calc-decision-grid) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  html body .term-calculator-page .term-calc-decision-card:first-child { grid-column: 1 / -1; }
}
@media (min-width: 992px) {
  html body .term-calculator-page :is(.term-calc-decision-grid, .travel-calc-decision-grid) { grid-template-columns: minmax(0, 1.25fr) repeat(2, minmax(0, 1fr)); }
  html body .term-calculator-page .term-calc-decision-card:first-child { grid-column: 1; grid-row: 1 / span 2; padding: 32px 30px 30px !important; }
  /* four cards (Travel): the last one runs across both small columns */
  html body .term-calculator-page .term-calc-decision-card:nth-child(4):last-child { grid-column: 2 / -1; }
  html body .term-calculator-page .term-calc-decision-card:first-child h3 { font-size: 26px !important; line-height: 32px !important; letter-spacing: -.02em; max-width: 14ch; }
  html body .term-calculator-page .term-calc-decision-card:first-child p { font-size: 16px !important; line-height: 25px !important; max-width: 34ch; }
  html body .term-calculator-page .term-calc-decision-card:first-child .term-calc-decision-icon { width: 68px !important; height: 68px !important; border-radius: 20px !important; margin-bottom: 24px !important; }
  html body .term-calculator-page .term-calc-decision-card:first-child .term-calc-decision-icon img { width: 34px !important; height: 34px !important; }
}
html body .term-calculator-page .term-calc-decision-card:first-child { isolation: isolate;
  background: radial-gradient(90% 70% at 100% 0%, rgba(255, 255, 255, .28), transparent 60%), linear-gradient(150deg, #ff8b78 0%, #f05d49 48%, #c23b28 100%) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4), 0 34px 60px -30px rgba(168, 50, 31, .75) !important; }
/* two soft rings in the corner */
html body .term-calculator-page .term-calc-decision-card:first-child::after { content: ""; position: absolute; z-index: -1; right: -90px; bottom: -90px; width: 280px; height: 280px; border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, .22); box-shadow: 0 0 0 34px rgba(255, 255, 255, .06), 0 0 0 70px rgba(255, 255, 255, .04); }
html body .term-calculator-page .term-calc-decision-card:first-child::before { display: none; }
html body .term-calculator-page .term-calc-decision-card:first-child :is(h3, p) { color: #fff !important; }
html body .term-calculator-page .term-calc-decision-card:first-child p { color: rgba(255, 255, 255, .9) !important; }
html body .term-calculator-page .term-calc-decision-card:first-child .term-calc-decision-icon,
html body .term-calculator-page .term-calc-decision-card:first-child:hover .term-calc-decision-icon { background: rgba(255, 255, 255, .95) !important; box-shadow: 0 14px 26px -14px rgba(92, 23, 14, .6) !important; }
html body .term-calculator-page .term-calc-decision-card:first-child:hover .term-calc-decision-icon img { filter: none; }
html body .term-calculator-page .term-calc-decision-card:first-child:hover { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4), 0 40px 70px -30px rgba(168, 50, 31, .85) !important; }
html body .term-calculator-page .term-calc-decision-card:first-child .term-calc-decision-cta { min-height: 52px !important; background: #fff !important; color: var(--cv-deep) !important; font-size: 16px !important;
  box-shadow: 0 16px 28px -16px rgba(92, 23, 14, .7) !important; }
html body .term-calculator-page .term-calc-decision-card:first-child .term-calc-decision-cta::after {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f05d49' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / 17px no-repeat, rgba(240, 93, 73, .12); }

/* ---------- closing banner: white heading, photo tinted into the coral ---------- */
html body .term-calculator-page .term-calc-cta-banner-content h2, html body .term-calculator-page .term-calc-cta-banner h2 { color: #fff !important; text-shadow: 0 2px 18px rgba(92, 23, 14, .25); }
html body .term-calculator-page .term-calc-cta-banner-bg-wrap { opacity: .5 !important; mix-blend-mode: luminosity; }
html body .term-calculator-page .term-calc-cta-banner-bg-wrap::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(240, 93, 73, 0) 30%, rgba(216, 70, 47, .85) 58%); }
html body .term-calculator-page .term-calc-cta-shield { opacity: .35; }
html body .term-calculator-page .term-calc-cta-check-icon { filter: brightness(0) invert(1); }
html body .term-calculator-page .term-calc-cta-copy > p, html body .term-calculator-page .term-calc-cta-checks li { color: #fff !important; }
html body .term-calculator-page .term-calc-cta-banner .term-calc-cta-call-btn .term-calc-cta-phone-icon { filter: none; }

/* ---------- motion ---------- */
@media (prefers-reduced-motion: no-preference) {
  html body .term-calculator-page .term-calc-why-media::after { animation: cv-bob 5s ease-in-out infinite; }
  html body .term-calculator-page .term-calc-step-num { animation: cv-pulse 3.2s ease-in-out infinite; }
  html body .term-calculator-page .term-calc-step:nth-child(2) .term-calc-step-num { animation-delay: .4s; }
  html body .term-calculator-page .term-calc-step:nth-child(3) .term-calc-step-num { animation-delay: .8s; }
  html body .term-calculator-page .term-calc-step:nth-child(4) .term-calc-step-num { animation-delay: 1.2s; }
  html body .term-calculator-page .term-calc-step:nth-child(5) .term-calc-step-num { animation-delay: 1.6s; }
}
@keyframes cv-bob { 0%, 100% { translate: 0 0; } 50% { translate: 0 -8px; } }
@keyframes cv-pulse { 0%, 100% { box-shadow: 0 0 0 5px #fdfaf8, 0 0 0 6px rgba(240, 93, 73, .18), 0 14px 24px -10px rgba(229, 80, 60, .75); }
  50% { box-shadow: 0 0 0 5px #fdfaf8, 0 0 0 11px rgba(240, 93, 73, .1), 0 14px 24px -10px rgba(229, 80, 60, .75); } }
@media (prefers-reduced-motion: reduce) {
  html body .term-calculator-page :is(.term-calc-step, .term-calc-decision-card, .term-calc-why-list-checks > li):hover { transform: none !important; }
}
html.cy-lite body .term-calculator-page :is(.term-calc-step, .term-calc-decision-card, .term-calc-why-list-checks > li, .term-calc-badges > li) { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(255, 255, 255, .96) !important; }
html.cy-lite body .term-calculator-page .term-calc-step-num { animation: none; }

/* ---------- smaller screens ---------- */
/* the decision grid keeps a gutter where the page container has none (around 1024px it ran to the screen edges) */
html body .term-calculator-page :is(.term-calc-decision-grid, .travel-calc-decision-grid) { max-width: min(1180px, calc(100vw - 40px)) !important; }
/* below 1200px the five steps wrap 3 + 2, the short row centred */
@media (max-width: 1199.98px) {
  html body .term-calculator-page .term-calc-steps { display: flex !important; flex-wrap: wrap; justify-content: center; row-gap: 52px !important; max-width: 780px; }
  html body .term-calculator-page .term-calc-steps > .term-calc-step { flex: 0 0 calc((100% - 44px) / 3) !important; }
  html body .term-calculator-page .term-calc-steps::before { display: none; }
}
@media (max-width: 991.98px) {
  html body .term-calculator-page .term-calc-why-media { max-width: 520px; margin: 28px auto 0; padding-left: 18px; }
  html body .term-calculator-page .term-calc-why-media::after { left: -2px; }
}
@media (max-width: 767.98px) {
  html body .term-calculator-page .term-calc-steps { gap: 46px 14px !important; margin-top: 52px !important; }
  html body .term-calculator-page .term-calc-steps > .term-calc-step { flex: 0 0 calc((100% - 14px) / 2) !important; padding: 34px 12px 18px !important; }
  html body .term-calculator-page .term-calc-step-icon { width: 116px !important; height: 116px !important; padding: 14px !important; }
  html body .term-calculator-page :is(.term-calc-decision-grid, .travel-calc-decision-grid) { grid-template-columns: minmax(0, 1fr); }
  html body .term-calculator-page .term-calc-decision-card { display: grid !important; grid-template-columns: 54px minmax(0, 1fr); column-gap: 14px; padding: 18px !important; }
  html body .term-calculator-page .term-calc-decision-card-body { display: contents; }
  html body .term-calculator-page .term-calc-decision-icon { grid-row: 1 / span 2; margin: 0 !important; }
  html body .term-calculator-page .term-calc-decision-cta { grid-column: 1 / -1; margin-top: 16px !important; }
}
/* phones: each step is a compact row (drawing left, text right, number on the drawing's corner) on a dashed line that runs
   down the left, so the five steps take about half the height */
@media (max-width: 575.98px) {
  html body .term-calculator-page .term-calc-steps { flex-direction: column; flex-wrap: nowrap; gap: 14px !important; margin-top: 32px !important; }
  html body .term-calculator-page .term-calc-steps::before { display: block; left: 58px; right: auto; top: 20px; bottom: 20px; width: 2px; height: auto;
    background: repeating-linear-gradient(180deg, rgba(240, 93, 73, .5) 0 8px, transparent 8px 16px); }
  html body .term-calculator-page .term-calc-steps > .term-calc-step { flex: none !important; display: grid !important; grid-template-columns: 84px minmax(0, 1fr); align-items: center; column-gap: 16px;
    padding: 16px 16px 16px 14px !important; text-align: left; }
  html body .term-calculator-page .term-calc-step:hover { transform: none; }
  html body .term-calculator-page .term-calc-step-visual { margin: 0 !important; }
  html body .term-calculator-page .term-calc-step-icon { width: 84px !important; height: 84px !important; padding: 10px !important; }
  html body .term-calculator-page .term-calc-step-num { left: 6px !important; top: 6px !important; translate: none; width: 30px; height: 30px; font-size: 14px !important;
    box-shadow: 0 0 0 3px #fff, 0 8px 14px -6px rgba(229, 80, 60, .75) !important; animation: none !important; }
  html body .term-calculator-page .term-calc-step-copy h3, html body .term-calculator-page .term-calc-step-copy p { text-align: left !important; }
  html body .term-calculator-page .term-calc-step-copy h3 { font-size: 15px !important; line-height: 20px !important; margin-bottom: 4px !important; }
  html body .term-calculator-page .term-calc-step-copy p { font-size: 14px !important; line-height: 20px !important; }
  html body .term-calculator-page .term-calc-badges > li { white-space: normal; }
}
/* the vendor's tablet rules size each step (max 280px) and narrow the last odd one to half a row; the flex sizes above own
   the widths now */
@media (max-width: 1199.98px) {
  html body .term-calculator-page .term-calc-steps > .term-calc-step, html body .term-calculator-page .term-calc-steps > .term-calc-step:last-child:nth-child(odd) { width: auto !important; max-width: none !important; grid-column: auto; }
}
@media (max-width: 575.98px) {
  html body .term-calculator-page .term-calc-steps > .term-calc-step, html body .term-calculator-page .term-calc-steps > .term-calc-step:last-child:nth-child(odd) { width: 100% !important; align-self: stretch; }
}