/* plan-explorer
   ---------------------------------------------------------------------------
   Scoped reset first. The Atlas theme paints bare elements (img { margin:auto },
   borders and a background on table/th/td, list bullets), and a custom module
   inherits all of it silently. The reset is scoped with :where() so it carries
   ZERO specificity: every module rule below, even a single class, outranks it.
   That is the fix for the .emi-tp dl trap -- a class+element selector beating a
   single class -- without having to double up class names everywhere.
   --------------------------------------------------------------------------- */
:where(.emi-px) dl,
:where(.emi-px) dt,
:where(.emi-px) dd,
:where(.emi-px) ul,
:where(.emi-px) ol,
:where(.emi-px) li,
:where(.emi-px) p,
:where(.emi-px) h3,
:where(.emi-px) h4,
:where(.emi-px) figure,
:where(.emi-px) blockquote,
:where(.emi-px) fieldset,
:where(.emi-px) legend,
:where(.emi-px) table,
:where(.emi-px) thead,
:where(.emi-px) tbody,
:where(.emi-px) tr,
:where(.emi-px) th,
:where(.emi-px) td,
:where(.emi-px) img,
:where(.emi-px) svg,
:where(.emi-px) button,
:where(.emi-px) input,
:where(.emi-px) details,
:where(.emi-px) summary {
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  border-collapse: collapse;
}
:where(.emi-px) ul,
:where(.emi-px) ol,
:where(.emi-px) li { list-style: none; }
:where(.emi-px) img,
:where(.emi-px) svg { max-width: 100%; }
:where(.emi-px) button,
:where(.emi-px) input { font: inherit; color: inherit; }

/* Focus, once, for the whole module. The theme paints a green ring on :focus,
   which a mouse click on a <summary> or a programmatic focus() inside a dialog
   both trigger. Ring on keyboard focus only; anything below that needs a
   different ring says so with two classes and wins on specificity. */
.emi-px :focus { outline: none; }
.emi-px :focus-visible {
  outline: 3px solid var(--emi-px-link, #17538f);
  outline-offset: 3px;
}
/* The dialog containers take focus on open so a screen reader starts at the top
   of the dialog. They are not controls, so they get no ring. */
.emi-px__panel:focus,
.emi-px__panel:focus-visible,
.emi-px__oopsBox:focus,
.emi-px__oopsBox:focus-visible { outline: none; }

/* ------------------------------------------------------------------ section */
.emi-px {
  background: var(--emi-px-bg, #f5f6f8);
  color: var(--emi-px-body, #262e3d);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  line-height: 1.45;
  box-sizing: border-box;
}
.emi-px *,
.emi-px *::before,
.emi-px *::after { box-sizing: border-box; }

.emi-px__rail {
  max-width: 1100px;
  margin: 0 auto;
  padding-left: 24px;
  padding-right: 24px;
}

.emi-px__eyebrow {
  margin: 0 0 10px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--emi-px-accent, #198643);
}
.emi-px__heading {
  margin: 0 0 12px;
  font-size: clamp(26px, 3vw, 34px);
  line-height: 1.2;
  color: var(--emi-px-heading, #1f284a);
  max-width: none;
}
.emi-px__lead {
  margin: 0 0 26px;
  font-size: 19px;
  line-height: 1.5;
  color: var(--emi-px-muted, #4b5563);
  max-width: none;
}
.emi-px__lead p { margin: 0 0 12px; }
.emi-px__lead p:last-child { margin-bottom: 0; }

.emi-px__sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* --------------------------------------------------------- household picker */
.emi-px__picker {
  margin: 0 0 26px;
  border: 0;
  padding: 0;
  min-width: 0;
}
.emi-px__legend {
  padding: 0;
  margin: 0 0 10px;
  font-size: 18px;
  font-weight: 700;
  color: var(--emi-px-heading, #1f284a);
}
.emi-px__seg {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.emi-px__opt {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  cursor: pointer;
  min-height: 48px;
  padding: 8px 16px;
  border: 2px solid var(--emi-px-border, #dfe3e9);
  border-radius: 999px;
  background: var(--emi-px-card, #fff);
  font-size: 17px;
  font-weight: 700;
  color: var(--emi-px-heading, #1f284a);
}
.emi-px__opt input { width: 18px; height: 18px; accent-color: var(--emi-px-accent, #198643); }
.emi-px__opt input:focus-visible { outline: 3px solid var(--emi-px-link, #17538f); outline-offset: 3px; }

/* ------------------------------------------------------------------- a plan */
/* The break between the lead plan and the alternatives. A short centered rule and
   extra space above make it read as a new section, not a caption on the card above. */
.emi-px__ask {
  position: relative;
  margin: 80px 0 24px;
  padding-top: 32px;
  font-size: clamp(20px, 2.2vw, 24px);
  line-height: 1.3;
  text-align: center;
  color: var(--emi-px-heading, #1f284a);
}
.emi-px__ask::before {
  content: ""; position: absolute; top: 0; left: 50%;
  width: 64px; height: 3px; margin-left: -32px; border-radius: 2px;
  background: var(--emi-px-btnbg, #198643);
}
@media (max-width: 560px) { .emi-px__ask { margin-top: 56px; padding-top: 24px; } }
.emi-px__plan {
  position: relative;
  margin: 0 0 22px;
  background: var(--emi-px-card, #fff);
  border: 1px solid var(--emi-px-border, #dfe3e9);
  border-radius: var(--emi-px-radius, 12px);
}
/* inset shadow, not a border-top: a 6px border shifts this card's contents down
   relative to the others and breaks the name baseline */
.emi-px__plan--lead {
  border-color: var(--emi-px-accent, #198643);
  box-shadow: inset 0 6px 0 var(--emi-px-accent, #198643);
}
.emi-px__head { padding: 26px 26px 22px; }
.emi-px__plan--lead .emi-px__head { padding-top: 30px; }

.emi-px__tag {
  position: absolute;
  top: -14px;
  left: 26px;
  display: inline-block;
  white-space: nowrap;
  padding: 6px 11px;
  border-radius: 4px;
  background: var(--emi-px-accent, #198643);
  color: #fff;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  box-shadow: 0 0 0 3px var(--emi-px-bg, #f5f6f8);
}
.emi-px__name {
  margin: 0;
  font-size: clamp(24px, 2.6vw, 29px);
  line-height: 1.2;
  color: var(--emi-px-heading, #1f284a);
}
.emi-px__tagline {
  margin: 8px 0 0;
  font-size: 19px;
  line-height: 1.45;
  color: var(--emi-px-muted, #4b5563);
  max-width: 62ch;
}
.emi-px__buy {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  margin-top: 18px;
}
.emi-px__pricebox { margin: 0; }
.emi-px__price {
  font-size: 42px;
  font-weight: 800;
  line-height: 1;
  color: var(--emi-px-heading, #1f284a);
  font-variant-numeric: tabular-nums;
}
.emi-px__per {
  margin-left: 8px;
  font-size: 18px;
  color: var(--emi-px-muted, #4b5563);
}

.emi-px__btn {
  display: inline-block;
  min-width: 230px;
  padding: 14px 28px;
  border: 2px solid var(--emi-px-btnbg, #198643);
  border-radius: 6px;
  background: var(--emi-px-btnbg, #198643);
  color: var(--emi-px-btntext, #fff);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
}
.emi-px__btn:hover,
.emi-px__btn:focus-visible { filter: brightness(0.92); color: var(--emi-px-btntext, #fff); }
.emi-px__btn:focus-visible { outline: 3px solid var(--emi-px-link, #17538f); outline-offset: 3px; }
.emi-px__ctawrap { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.emi-px__ctanote { margin: 0; max-width: 280px; font-size: 16px; line-height: 1.4; text-align: center; color: var(--emi-px-muted, #4b5563); }
.emi-px__cardNote { max-width: none; margin-top: 8px; text-align: left; }

.emi-px__tbd {
  display: inline-block;
  padding: 6px 10px;
  border: 2px dashed #b9c1cd;
  border-radius: 4px;
  color: #6b7280;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.06em;
}

/* before you enrol: something the buyer must DO, not a benefit */
.emi-px__prenote {
  margin-top: 18px;
  padding: 16px 18px;
  border-radius: 8px;
  background: var(--emi-px-prebg, #eef4fb);
  border-left: 4px solid var(--emi-px-prebar, #17538f);
}
.emi-px__prenoteTitle {
  margin: 0 0 6px;
  font-size: 18px;
  font-weight: 800;
  color: var(--emi-px-heading, #1f284a);
}
.emi-px__prenoteBody { font-size: 17px; line-height: 1.5; color: var(--emi-px-muted, #4b5563); }
.emi-px__prenoteBody p { margin: 0 0 8px; }
.emi-px__prenoteBody p:last-child { margin-bottom: 0; }
.emi-px__prenoteLink { margin: 0; font-size: 17px; }
/* 44px tap target (WCAG 2.5.5). The extra height is padding on the link itself, so the
   visible text keeps its place and the whole row is tappable. */
.emi-px__prenoteLink a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 2px 0;
  font-weight: 700; color: var(--emi-px-link, #17538f);
  text-decoration: underline; text-underline-offset: 3px;
}

/* ---------------------------------------------------------- the four drawers */
.emi-px__acc { border-top: 1px solid var(--emi-px-border, #dfe3e9); }
.emi-px__accHead {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 26px;
  min-height: 64px;
  font-size: 19px;
  font-weight: 700;
  color: var(--emi-px-heading, #1f284a);
}
.emi-px__accHead::-webkit-details-marker { display: none; }
.emi-px__accHead::marker { content: ""; }
.emi-px__accIco {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--emi-px-ico, 26px);
  height: var(--emi-px-ico, 26px);
  color: var(--emi-px-icon, #198643);
}
.emi-px__accIco svg {
  width: var(--emi-px-ico, 26px);
  height: var(--emi-px-ico, 26px);
  fill: currentColor;
  margin: 0;
}
.emi-px__accTitle { flex: 1 1 auto; }
.emi-px__accToggle {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 17px;
  font-weight: 700;
  color: var(--emi-px-link, #17538f);
}
.emi-px__acc .emi-px__wClose { display: none; }
.emi-px__acc[open] .emi-px__wOpen { display: none; }
.emi-px__acc[open] .emi-px__wClose { display: inline; }
.emi-px__chev {
  width: 9px;
  height: 9px;
  border-right: 2.5px solid currentColor;
  border-bottom: 2.5px solid currentColor;
  transform: translateY(-3px) rotate(45deg);
}
.emi-px__acc[open] .emi-px__chev { transform: translateY(2px) rotate(225deg); }
/* A mouse click on <summary> fires :focus WITHOUT :focus-visible, so the theme's
   green ring appears on click. Kill the ring and underline instead. */
.emi-px__accHead:focus { outline: none; }
.emi-px__accHead:focus-visible { outline: none; }
.emi-px__accHead:hover .emi-px__accToggle,
.emi-px__accHead:focus-visible .emi-px__accToggle {
  text-decoration: underline;
  text-decoration-thickness: 3px;
  text-underline-offset: 5px;
}
.emi-px__accBody {
  background: var(--emi-px-panel, #f5f6f8);
  padding: 6px 26px 24px;
}
.emi-px__accBody--prose { padding-top: 20px; }

.emi-px__lv { margin: 0; }
.emi-px__lvRow {
  display: grid;
  grid-template-columns: minmax(0, 38%) minmax(0, 62%);
  gap: 20px;
  padding: 12px 0;
  border-bottom: 1px solid var(--emi-px-border, #dfe3e9);
}
.emi-px__lvRow:last-child { border-bottom: 0; }
.emi-px__lv dt { margin: 0; font-size: 18px; color: var(--emi-px-muted, #4b5563); }
.emi-px__lv dd { margin: 0; font-size: 18px; font-weight: 700; color: var(--emi-px-heading, #1f284a); }

/* a condition on a whole list, not on one line of it */
.emi-px__gnote {
  margin-top: 12px;
  padding: 12px 14px;
  border-radius: 6px;
  background: var(--emi-px-notebg, #fdf3e0);
  border-left: 3px solid var(--emi-px-notebar, #d99b0e);
  font-size: 16px;
  line-height: 1.5;
  color: #5c4a22;
}
.emi-px__gnote p { margin: 0 0 8px; }
.emi-px__gnote p:last-child { margin-bottom: 0; }

.emi-px__warn {
  margin-bottom: 16px;
  padding: 14px 16px;
  border-radius: 4px;
  background: var(--emi-px-warnbg, #fdf3f3);
  border-left: 4px solid var(--emi-px-warnbar, #b4392f);
  color: var(--emi-px-warntext, #7d2620);
  font-size: 17px;
  line-height: 1.5;
}
.emi-px__warn p { margin: 0 0 10px; }
.emi-px__warn p:last-child { margin-bottom: 0; }

.emi-px__prose { font-size: 18px; line-height: 1.5; color: var(--emi-px-muted, #4b5563); }
.emi-px__prose p { margin: 0 0 14px; }
.emi-px__prose p:last-child { margin-bottom: 0; }

.emi-px__docTitle {
  margin: 20px 0 8px;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: #6b7280;
}
.emi-px__docs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 26px;
  padding-top: 4px;
}
.emi-px__doc { font-size: 17px; font-weight: 700; color: var(--emi-px-link, #17538f); }
/* Download arrow, drawn as a mask so it takes the link colour from the field
   rather than baking a hex into a data URI. Wrapped in @supports so a browser
   without masking gets no pseudo-element at all, never an 18px solid square. */
@supports ((-webkit-mask-image: url("")) or (mask-image: url(""))) {
  .emi-px__doc::before {
    content: "";
    display: inline-block;
    width: 18px;
    height: 18px;
    margin-right: 8px;
    vertical-align: -3px;
    background-color: 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='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.5v11'/%3E%3Cpath d='m7 9.5 5 5 5-5'/%3E%3Cpath d='M4.5 20h15'/%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='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.5v11'/%3E%3Cpath d='m7 9.5 5 5 5-5'/%3E%3Cpath d='M4.5 20h15'/%3E%3C/svg%3E") center / contain no-repeat;
  }
}
.emi-px__doc--tbd { color: #6b7280; }
.emi-px__doc--tbd span {
  padding: 2px 7px;
  border: 2px dashed #b9c1cd;
  border-radius: 4px;
  font-size: 14px;
  letter-spacing: 0.06em;
}

/* ---------------------------------------- add to compare, on the plan itself */
.emi-px__cmprow {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  margin: 0 26px;
  padding: 16px 0 22px;
  border-top: 1px solid var(--emi-px-border, #dfe3e9);
}
.emi-px__add {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  cursor: pointer;
  min-height: 48px;
  font-size: 18px;
  font-weight: 700;
  color: var(--emi-px-heading, #1f284a);
}
.emi-px__add input { width: 20px; height: 20px; accent-color: var(--emi-px-accent, #198643); }
.emi-px__add input:focus-visible { outline: 3px solid var(--emi-px-link, #17538f); outline-offset: 3px; }
.emi-px__add input:disabled { cursor: not-allowed; }
.emi-px__add input:disabled + span { color: #9aa3b2; }
.emi-px__go {
  cursor: pointer;
  min-height: 52px;
  padding: 10px 24px;
  border: 2px solid var(--emi-px-heading, #1f284a);
  border-radius: 6px;
  background: var(--emi-px-card, #fff);
  color: var(--emi-px-heading, #1f284a);
  font-size: 18px;
  font-weight: 700;
}
.emi-px__go:hover,
.emi-px__go:focus-visible {
  background: var(--emi-px-heading, #1f284a);
  color: #fff;
}
.emi-px__go:focus-visible { outline: 3px solid var(--emi-px-link, #17538f); outline-offset: 3px; }

.emi-px__closing {
  margin-top: 8px;
  font-size: 17px;
  color: var(--emi-px-muted, #4b5563);
}
.emi-px__closing p { margin: 0 0 10px; }
.emi-px__closing p:last-child { margin-bottom: 0; }
.emi-px__closecta { margin: 20px 0 0; }

/* -------------------------------------------------------------- error dialog */
/* A real dialog, not alert(): alert() blocks the page, cannot be styled, and is
   not read as our own content. */
.emi-px__oops,
.emi-px__cmp {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.emi-px__oops { z-index: 2147483000; padding: 20px; }
.emi-px__cmp { z-index: 2147482000; padding: 18px; }
.emi-px__oops[hidden],
.emi-px__cmp[hidden] { display: none; }
.emi-px__scrim {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(15, 20, 35, 0.55);
}
.emi-px__oopsBox {
  position: relative;
  width: 100%;
  max-width: 480px;
  padding: 28px;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 24px 60px -20px rgba(15, 20, 35, 0.5);
}
.emi-px__oopsMark {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  margin-bottom: 16px;
  border-radius: 50%;
  background: var(--emi-px-diff, #fdf1d4);
}
.emi-px__oopsMark svg { width: 26px; height: 26px; color: #8a6d3b; }
.emi-px__oopsBox h3 { margin: 0; font-size: 23px; color: var(--emi-px-heading, #1f284a); }
.emi-px__oopsBody { margin-top: 10px; font-size: 19px; line-height: 1.5; color: var(--emi-px-muted, #4b5563); }
.emi-px__oopsBody p { margin: 0 0 10px; }
.emi-px__oopsBody p:last-child { margin-bottom: 0; }
.emi-px__oopsOk {
  margin-top: 22px;
  cursor: pointer;
  min-height: 54px;
  padding: 12px 30px;
  border: 2px solid var(--emi-px-heading, #1f284a);
  border-radius: 6px;
  background: var(--emi-px-heading, #1f284a);
  color: #fff;
  font-size: 18px;
  font-weight: 700;
}
.emi-px__oopsOk:hover,
.emi-px__oopsOk:focus-visible { filter: brightness(1.25); }
.emi-px__oopsOk:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }

/* ----------------------------------------------------------- compare overlay */
/* Columns of cards, not one wide table: each plan keeps its own buy button and
   survives the drop to a single column on a phone, which a table does not. */
.emi-px__panel {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 1140px;
  max-height: 92vh;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 24px 60px -20px rgba(15, 20, 35, 0.5);
}
.emi-px__cmpBar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  padding: 22px 26px 14px;
}
.emi-px__cmpBar h3 { margin: 0; font-size: 25px; color: var(--emi-px-heading, #1f284a); }
.emi-px__cmpLede { margin: 8px 0 0; font-size: 17px; color: var(--emi-px-muted, #4b5563); max-width: 70ch; }
.emi-px__cmpActs { flex: 0 0 auto; display: flex; align-items: center; gap: 12px; }
.emi-px__linkBtn {
  cursor: pointer;
  min-height: 44px;
  padding: 8px 4px;
  border: 0;
  background: none;
  color: var(--emi-px-link, #17538f);
  font-size: 17px;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 4px;
}
.emi-px__linkBtn:hover,
.emi-px__linkBtn:focus-visible { text-decoration-thickness: 3px; }
.emi-px__closeBtn {
  cursor: pointer;
  min-height: 48px;
  padding: 8px 20px;
  border: 2px solid var(--emi-px-border, #dfe3e9);
  border-radius: 6px;
  background: none;
  color: var(--emi-px-heading, #1f284a);
  font-size: 17px;
  font-weight: 700;
}
.emi-px__closeBtn:hover,
.emi-px__closeBtn:focus-visible {
  background: var(--emi-px-heading, #1f284a);
  color: #fff;
  border-color: var(--emi-px-heading, #1f284a);
}
.emi-px__cmpTools {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  padding: 8px 26px 16px;
  border-bottom: 1px solid var(--emi-px-border, #dfe3e9);
}
.emi-px__back { padding-left: 0; }
.emi-px__hint { font-size: 16px; color: #6b7280; }

/* the label sits inside the pill with the track on the end, so the control
   reads as one object rather than a label with a switch after it */
.emi-px__switch {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  cursor: pointer;
  min-height: 52px;
  padding: 8px 10px 8px 20px;
  border-radius: 999px;
  background: var(--emi-px-notebg, #fdf3e0);
}
.emi-px__switchLabel { font-size: 17px; font-weight: 700; color: #3d3326; }
.emi-px__switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.emi-px__track {
  display: inline-flex;
  align-items: center;
  width: 54px;
  height: 30px;
  padding: 3px;
  border-radius: 999px;
  background: #c6ccd8;
  transition: background 0.15s ease-out;
}
.emi-px__knob {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(15, 20, 35, 0.35);
  transition: transform 0.15s ease-out;
}
.emi-px__switch input:checked + .emi-px__track { background: var(--emi-px-switch, #f3b229); }
.emi-px__switch input:checked + .emi-px__track .emi-px__knob { transform: translateX(24px); }
.emi-px__switch input:focus-visible + .emi-px__track { outline: 3px solid var(--emi-px-link, #17538f); outline-offset: 3px; }

.emi-px__cmpScroll {
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  padding: 22px 26px 6px;
}
.emi-px__cols {
  display: grid;
  gap: 18px;
  align-items: start;
  grid-template-columns: minmax(0, 1fr);
}
.emi-px__cols[data-n="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.emi-px__cols[data-n="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.emi-px__cols[data-n="4"] { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.emi-px__card {
  background: #fff;
  border: 1px solid var(--emi-px-border, #dfe3e9);
  border-radius: 10px;
  overflow: hidden;
}
.emi-px__cardBadge {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 14px;
  background: var(--emi-px-heading, #1f284a);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
}
.emi-px__remove {
  cursor: pointer;
  min-height: 32px;
  padding: 4px;
  border: 0;
  background: none;
  color: #cfe6d8;
  font-size: 14px;
  font-weight: 700;
  text-decoration: underline;
}
.emi-px__remove:hover,
.emi-px__remove:focus-visible { color: #fff; }
.emi-px__cardBody { padding: 16px 16px 18px; }
.emi-px__cardName { margin: 0; font-size: 21px; line-height: 1.25; color: var(--emi-px-heading, #1f284a); }
.emi-px__cardSub { margin: 3px 0 0; font-size: 16px; color: #6b7280; }
.emi-px__cardPrice {
  margin: 14px 0 0;
  padding: 12px 14px;
  border-radius: 6px;
  background: var(--emi-px-price, #fdf6e6);
  font-size: 26px;
  font-weight: 800;
  color: var(--emi-px-heading, #1f284a);
  font-variant-numeric: tabular-nums;
}
.emi-px__cardPer { display: block; margin-top: 4px; font-size: 15px; font-weight: 400; color: var(--emi-px-muted, #4b5563); }
.emi-px__cardCta { display: block; margin-top: 14px; min-width: 0; width: 100%; }
.emi-px__cardLink {
  display: block;
  margin-top: 12px;
  font-size: 17px;
  font-weight: 700;
  text-align: center;
  color: var(--emi-px-link, #17538f);
}
.emi-px__cardSec {
  padding: 10px 16px;
  border-top: 1px solid var(--emi-px-border, #dfe3e9);
  border-bottom: 1px solid var(--emi-px-border, #dfe3e9);
  background: var(--emi-px-panel, #f5f6f8);
  font-size: 16px;
  font-weight: 700;
  color: var(--emi-px-heading, #1f284a);
}
.emi-px__cardRows { margin: 0; padding: 6px 16px 14px; }
.emi-px__cardRows dt { margin: 12px 0 0; font-size: 16px; color: var(--emi-px-muted, #4b5563); }
.emi-px__cardRows dd { margin: 3px 0 0; font-size: 17px; font-weight: 700; color: var(--emi-px-heading, #1f284a); }
.emi-px__cardFoot { padding: 8px 16px 18px; }

/* The compared plan's column. Same pale blue as the before-you-enroll callouts, so the
   page reads as one system. The section bands go transparent inside it: a grey band
   across a blue card looks like a rendering fault rather than a heading.
   Named --lead to match .emi-px__plan--lead on the in-page card. */
.emi-px__card--lead { background: var(--emi-px-prebg, #eef4fb); }
.emi-px__card--lead .emi-px__cardSec { background: transparent; }

/* the differences highlight, on the value only */
.emi-px__cmp--diff .emi-px__cardRows dd.is-diff,
.emi-px__cmp--diff .emi-px__covItem.is-diff {
  background: var(--emi-px-diff, #fdf1d4);
  border-radius: 4px;
  padding-left: 6px;
  padding-right: 6px;
  margin-left: -6px;
  margin-right: -6px;
}
.emi-px__covgroup { padding: 2px 16px 0; }
.emi-px__covTitle {
  margin: 14px 0 6px;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: #6b7280;
}
.emi-px__cov { margin: 0; padding: 0; list-style: none; }
.emi-px__covItem {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  padding: 5px 0;
  font-size: 17px;
  color: var(--emi-px-body, #262e3d);
}
.emi-px__covItem .emi-px__mark { flex: 0 0 auto; width: 19px; height: 19px; margin-top: 2px; }
.emi-px__covItem--no { color: #6b7280; }
.emi-px__covNote {
  margin: 8px 0 0;
  padding: 10px 12px;
  border-radius: 6px;
  background: var(--emi-px-notebg, #fdf3e0);
  border-left: 3px solid var(--emi-px-notebar, #d99b0e);
  font-size: 15px;
  line-height: 1.5;
  color: #5c4a22;
}
.emi-px__cmpFoot {
  margin: 0;
  padding: 14px 26px 20px;
  border-top: 1px solid var(--emi-px-border, #dfe3e9);
  border-radius: 0 0 12px 12px;
  background: #fff;
  font-size: 16px;
  line-height: 1.5;
  color: #6b7280;
}
.emi-px__cmpFoot p { margin: 0 0 8px; }
.emi-px__cmpFoot p:last-child { margin-bottom: 0; }

/* the body is frozen while an overlay is open; iOS needs position:fixed, which
   loses the scroll position, so module.js puts it back */
body.emi-px-locked { overflow: hidden; width: 100%; }

/* ------------------------------------------------------------------ responsive */
/* On a phone the overlay header was eating the whole screen and leaving the
   comparison itself a third of it. Everything that is guidance rather than
   content comes out: the lede, the back link, the hint under the toggle. Close
   and the differences toggle are the two controls that have to survive. */
@media (max-width: 860px) {
  .emi-px__cmp { padding: 0; }
  .emi-px__panel {
    max-width: none;
    max-height: 100vh;
    max-height: 100dvh;
    border-radius: 0;
  }
  .emi-px__cols[data-n="2"],
  .emi-px__cols[data-n="3"],
  .emi-px__cols[data-n="4"] { grid-template-columns: minmax(0, 1fr); }
  .emi-px__cmpBar { align-items: center; gap: 12px; padding: 14px 16px 10px; }
  .emi-px__cmpBar h3 { font-size: 20px; }
  .emi-px__cmpLede { display: none; }
  .emi-px__cmpActs { gap: 8px; }
  .emi-px__linkBtn { font-size: 16px; }
  .emi-px__closeBtn { min-height: 44px; padding: 6px 16px; }
  .emi-px__cmpTools { gap: 12px; padding: 0 16px 12px; }
  .emi-px__back { display: none; }
  .emi-px__hint { display: none; }
  .emi-px__switch { min-height: 46px; padding: 6px 8px 6px 16px; }
  .emi-px__switchLabel { font-size: 16px; }
  .emi-px__cmpScroll { padding: 14px 16px 6px; }
  .emi-px__cmpFoot { padding: 12px 16px 16px; border-radius: 0; font-size: 14px; }
}

@media (max-width: 760px) {
  .emi-px__rail { padding-left: 16px; padding-right: 16px; }
  .emi-px__lvRow { grid-template-columns: minmax(0, 1fr); gap: 3px; padding: 11px 0; }
  .emi-px__docs { grid-template-columns: minmax(0, 1fr); }
  .emi-px__head { padding-left: 20px; padding-right: 20px; }
  .emi-px__accHead { padding-left: 20px; padding-right: 20px; gap: 10px; }
  .emi-px__accBody { padding-left: 20px; padding-right: 20px; }
  .emi-px__cmprow { margin-left: 20px; margin-right: 20px; }
  .emi-px__tag { left: 20px; }
  .emi-px__buy { align-items: flex-start; }
  .emi-px__btn { width: 100%; min-width: 0; }
  .emi-px__ctawrap { width: 100%; }
  .emi-px__ctanote { max-width: none; }
  .emi-px__go { width: 100%; }
  .emi-px__add { width: 100%; }
  .emi-px__price { font-size: 36px; }
  .emi-px__accToggle { font-size: 16px; }
}

@media (max-width: 420px) {
  .emi-px__opt { width: 100%; justify-content: flex-start; border-radius: 10px; }
  .emi-px__switch { width: 100%; justify-content: space-between; }
}

@media (prefers-reduced-motion: reduce) {
  .emi-px__track,
  .emi-px__knob { transition: none; }
}

/* Print. Pressing Print inside the overlay should print the comparison, not the
   whole landing page behind it. module.js adds emi-px-print to <body> for the
   duration of the print call. visibility, not display: hiding <body>'s children
   would hide the overlay with them, since it lives inside the section. */
@media print {
  body.emi-px-print { visibility: hidden; }
  body.emi-px-print .emi-px__cmp,
  body.emi-px-print .emi-px__cmp * { visibility: visible; }
  body.emi-px-print .emi-px__cmp {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    padding: 0;
    display: block;
  }
  body.emi-px-print .emi-px__scrim,
  body.emi-px-print .emi-px__cmpActs,
  body.emi-px-print .emi-px__cmpTools { display: none; }
  body.emi-px-print .emi-px__panel {
    max-width: none;
    max-height: none;
    box-shadow: none;
    border-radius: 0;
  }
  body.emi-px-print .emi-px__cmpScroll { overflow: visible; padding: 0; }
  .emi-px__card { break-inside: avoid; page-break-inside: avoid; }
  .emi-px__acc { break-inside: avoid; page-break-inside: avoid; }
  .emi-px__cmprow { display: none; }
}

/* ------------------------------------------------------------- rail width */
/* A fixed 1100px rail left the page marooned in the middle of a wide monitor
   while the hero ran edge to edge. Now a field. Every module on a page must be
   set to the same value AND share this gutter, or their left edges disagree. */
.emi-px--w1100 .emi-px__rail { max-width: 1100px; }
.emi-px--w1280 .emi-px__rail { max-width: 1280px; }
.emi-px--w1440 .emi-px__rail { max-width: 1440px; }
.emi-px--w1680 .emi-px__rail { max-width: 1680px; }
.emi-px--wfull .emi-px__rail { max-width: none; }
.emi-px__rail { padding-left: 32px; padding-right: 32px; }
@media (max-width: 760px) {
  .emi-px__rail { padding-left: 20px; padding-right: 20px; }
}

/* The note under a value list is a plain sentence, not a boxed caveat. Stacking an
   amber note on top of the blue proof panel read as two warnings in a row, which is the
   opposite of what a reframing line is for. */
.emi-px__lvnote {
  margin: 12px 0 0;
  font-size: 17px;
  line-height: 1.5;
  color: var(--emi-px-body, #262e3d);
}
.emi-px__lvnote p { margin: 0 0 8px; }
.emi-px__lvnote p:last-child { margin-bottom: 0; }

/* Network proof panel. Evidence under the dentist counts: one stat and the footnote it
   has to carry. Blue rather than the amber group note, because this is proof, not a
   caveat, and the two should not read alike when they sit one above the other. */
.emi-px__proof {
  margin-top: 12px;
  padding: 12px 14px;
  border-radius: 6px;
  background: var(--emi-px-prebg, #eef4fb);
  border-left: 3px solid var(--emi-px-prebar, #17538f);
}
.emi-px__proofStat {
  margin: 0;
  font-size: 17px;
  line-height: 1.45;
  font-weight: 700;
  color: var(--emi-px-heading, #1f284a);
}
.emi-px__proofFoot {
  margin: 6px 0 0;
  font-size: 13px;
  line-height: 1.45;
  font-weight: 400;
  color: var(--emi-px-muted, #4b5563);
}

/* Rich text inherits the container's size. The Atlas theme sets a bare p { font-size: 16px },
   which silently shrank every paragraph typed into these fields below the size set on the
   container (delivery doc PART 1). Inline sizes chosen in the editor still win. */
.emi-px__lead p, .emi-px__lead li, .emi-px__lead span, .emi-px__lead strong, .emi-px__lead b, .emi-px__lead em, .emi-px__lead a, .emi-px__prenoteBody p, .emi-px__prenoteBody li, .emi-px__prenoteBody span, .emi-px__prenoteBody strong, .emi-px__prenoteBody b, .emi-px__prenoteBody em, .emi-px__prenoteBody a, .emi-px__closing p, .emi-px__closing li, .emi-px__closing span, .emi-px__closing strong, .emi-px__closing b, .emi-px__closing em, .emi-px__closing a { font-size: inherit; }