/* Encompass HR product page: a few additions on top of the shared site.css, not a full stylesheet. */

.ehr-logo { display: block; height: auto; max-width: 320px; margin-bottom: 1.2rem; }

.two-col-list { column-count: 2; column-gap: 2.5rem; }
.two-col-list li { break-inside: avoid; margin-bottom: .6rem; }

/* Screenshot gallery */
.ehr-gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; }
.ehr-gallery figure {
  margin: 0; border-radius: 10px; overflow: hidden; border: 1px solid var(--line);
  box-shadow: var(--shadow); background: var(--ie-white);
}
.ehr-gallery img { display: block; width: 100%; height: 190px; object-fit: cover; object-position: top; cursor: zoom-in; transition: transform .25s ease; }
.ehr-gallery figure:hover img { transform: scale(1.05); }
.ehr-gallery figcaption { padding: .65rem .85rem; font-size: .85rem; font-weight: 600; color: var(--ink); }

.ehr-lightbox {
  position: fixed; inset: 0; background: rgba(20, 20, 20, .92); z-index: 200; padding: 2rem;
  display: flex; align-items: center; justify-content: center; flex-direction: column;
  opacity: 0; pointer-events: none; transition: opacity .2s ease;
}
.ehr-lightbox.open { opacity: 1; pointer-events: auto; }
.ehr-lightbox img { max-width: min(1100px, 92vw); max-height: 78vh; border-radius: 8px; box-shadow: 0 20px 60px rgba(0, 0, 0, .5); cursor: zoom-out; }
.ehr-lightbox p { color: #fff; margin: .9rem 0 0; font-size: .9rem; text-align: center; }
.ehr-lightbox .ehr-lightbox-hint { color: #bbb; font-size: .78rem; margin-top: .3rem; }

/* Feature tabs */
.ehr-tab-panel[hidden] { display: none; }
.ehr-tabs-nav { display: flex; flex-wrap: wrap; gap: .55rem; margin-bottom: 1.6rem; }
.ehr-tab-btn {
  font-family: var(--ie-font-heading); font-weight: 600; font-size: .88rem;
  padding: .55rem 1.15rem; border-radius: 999px; border: 1px solid var(--line);
  background: var(--ie-white); color: var(--ink); cursor: pointer;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.ehr-tab-btn:hover { border-color: var(--ie-brand-red); }
.ehr-tab-btn.active { background: var(--ie-brand-red); border-color: var(--ie-brand-red); color: var(--ie-white); }

/* Pricing */
.ehr-pricing-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1rem; align-items: stretch; }
.ehr-plan-card {
  background: var(--ie-white); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1.5rem 1.25rem; display: flex; flex-direction: column; gap: .8rem;
}
.ehr-plan-card.featured { border-color: var(--ie-brand-red); box-shadow: 0 10px 30px -18px var(--ie-brand-red); }
.ehr-plan-badge {
  align-self: flex-start; margin: 0; padding: .25rem .7rem; border-radius: 999px;
  font-size: .72rem; font-weight: 700; letter-spacing: .02em;
  background: var(--red-wash); color: var(--ie-brand-red);
}
.ehr-plan-badge-empty { background: transparent; padding-top: 0; padding-bottom: 0; }
.ehr-plan-name { font-family: var(--ie-font-heading); font-weight: 700; font-size: 1.05rem; margin: 0; }
.ehr-plan-price { font-family: var(--ie-font-heading); font-weight: 800; font-size: 1.5rem; color: var(--ie-brand-red); margin: 0; line-height: 1.15; }
.ehr-plan-price small { display: block; font-family: var(--ie-font-body); font-weight: 500; font-size: .72rem; color: var(--ink-faint); text-transform: none; letter-spacing: 0; }
.ehr-plan-save {
  margin: -.3rem 0 0; padding: .3rem .6rem; border-radius: 6px;
  background: color-mix(in srgb, #1A7F37 12%, var(--ie-white)); color: #1A7F37;
  font-size: .74rem; font-weight: 700; line-height: 1.3;
}
.ehr-plan-card .btn {
  height: 2.75rem; padding: 0 .4rem; border-radius: 10px;
  font-size: .82rem; text-align: center; white-space: nowrap;
}
.ehr-plan-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .55rem; }
.ehr-plan-list li {
  font-size: .82rem; color: var(--ink-soft); padding-left: 1.2rem; position: relative; line-height: 1.4;
}
.ehr-plan-list li::before {
  content: "✓"; position: absolute; left: 0; top: 0; color: var(--ie-brand-red); font-weight: 700;
}

.ehr-plan-legend { font-size: .78rem; color: var(--ink-faint); margin: -.5rem 0 1.4rem; }
.ehr-plan-legend span { white-space: nowrap; margin-right: 1.1rem; }
.ehr-plan-legend .mod-full::before { color: var(--ie-brand-red); }
.ehr-plan-legend .mod-limited::before { color: #B8860B; }
.ehr-plan-legend .mod-none::before { color: var(--ink-faint); }

.ehr-plan-modules { list-style: none; margin: 0; padding-top: .6rem; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: .5rem; }
.ehr-plan-modules li {
  font-size: .81rem; padding-left: 1.3rem; position: relative; line-height: 1.35; color: var(--ink-soft);
}
.ehr-plan-modules li::before { position: absolute; left: 0; top: 0; font-weight: 700; }
.ehr-plan-modules li.mod-full::before { content: "✓"; color: var(--ie-brand-red); }
.ehr-plan-modules li.mod-limited::before { content: "±"; color: #B8860B; }
.ehr-plan-modules li.mod-limited { color: #8A6512; }
.ehr-plan-modules li.mod-none::before { content: "–"; color: var(--ink-faint); }
.ehr-plan-modules li.mod-none { color: var(--ink-faint); }

.ehr-compare { margin-top: 2rem; border-top: 1px solid var(--line); padding-top: 1.2rem; }
.ehr-compare summary { cursor: pointer; font-family: var(--ie-font-heading); font-weight: 600; color: var(--ie-brand-red); }
.ehr-compare-scroll { overflow-x: auto; margin-top: 1rem; }
.ehr-compare-table { width: 100%; border-collapse: collapse; font-size: .88rem; min-width: 720px; }
.ehr-compare-table th, .ehr-compare-table td { padding: .55rem .7rem; border-bottom: 1px solid var(--line); text-align: left; }
.ehr-compare-table th { font-family: var(--ie-font-heading); font-weight: 700; background: var(--ie-light-grey); }
.ehr-compare-table th:not(:first-child), .ehr-compare-table td:not(:first-child) { text-align: center; }
.ehr-compare-table tr.ehr-compare-cat td { background: var(--red-wash); font-weight: 700; color: var(--ink); font-size: .78rem; text-transform: uppercase; letter-spacing: .03em; }
.ehr-compare-table td.yes { color: var(--ie-brand-red); font-weight: 700; }
.ehr-compare-table td.no { color: var(--ink-faint); }

@media (max-width: 860px) {
  .ehr-gallery { grid-template-columns: repeat(2, 1fr); }
  .ehr-pricing-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 700px) {
  .two-col-list { column-count: 1; }
  .ehr-logo { max-width: 240px; }
  .ehr-gallery { grid-template-columns: 1fr; }
  .ehr-pricing-grid { grid-template-columns: 1fr; }
}

/* New: Ask HR and the mobile app */
.ehr-new-pill {
  display: inline-flex; align-items: center; gap: .6rem; margin-top: 1.4rem;
  padding: .45rem 1rem .45rem .45rem; border-radius: 999px; text-decoration: none;
  background: var(--red-wash); color: var(--ink); font-weight: 600; font-size: .9rem;
  border: 1px solid color-mix(in srgb, var(--ie-brand-red) 25%, var(--ie-white));
}
.ehr-new-pill span {
  background: var(--ie-gradient-innov); color: var(--ie-white); border-radius: 999px;
  padding: .2rem .7rem; font-family: var(--ie-font-heading); font-weight: 800; font-size: .75rem; letter-spacing: .04em; text-transform: uppercase;
}
.ehr-new-pill:hover { border-color: var(--ie-brand-red); color: var(--ink); }

.ehr-new { background: var(--ie-charcoal); color: var(--on-dark); position: relative; overflow: hidden; }
.ehr-new::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: var(--ie-gradient-innov); }
.ehr-new .eyebrow { color: #FF8A8A; }
.ehr-new h2, .ehr-new h3 { color: var(--on-dark); }
.ehr-new .section-lead { color: var(--on-dark-soft); }
.ehr-new-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem; }
.ehr-new-card {
  background: color-mix(in srgb, var(--ie-white) 6%, var(--ie-charcoal)); border: 1px solid color-mix(in srgb, var(--ie-white) 14%, var(--ie-charcoal));
  border-radius: var(--radius); padding: 1.8rem 1.6rem; display: flex; flex-direction: column; gap: .9rem;
}
.ehr-new-card p { color: var(--on-dark-soft); margin: 0; }
.ehr-new-tag {
  align-self: flex-start; background: var(--ie-gradient-innov); color: var(--ie-white) !important; border-radius: 999px;
  padding: .25rem .8rem; font-family: var(--ie-font-heading); font-weight: 700; font-size: .74rem; letter-spacing: .04em; text-transform: uppercase;
}
.ehr-new-card h3 { font-size: 1.5rem; margin: 0; }
.ehr-new-card .checks li { color: var(--on-dark-soft); }
.ehr-new-card .checks li::before { color: #FF8A8A; }
.ehr-new-actions { display: flex; flex-wrap: wrap; gap: .7rem; align-items: center; margin-top: .4rem; }
.ehr-new .btn-ghost { color: var(--on-dark); border-color: color-mix(in srgb, var(--ie-white) 35%, transparent); }
.ehr-new .btn-ghost:hover { border-color: var(--ie-white); color: var(--ie-white); }
.ehr-new-note { font-size: .82rem; color: var(--on-dark-soft) !important; }
@media (max-width: 820px) { .ehr-new-grid { grid-template-columns: 1fr; } }

.ehr-compare-table td.partial { color: var(--ink-faint); font-size: .8rem; font-weight: 600; }

.ehr-phones { display: grid; grid-template-columns: repeat(4, 1fr); gap: .8rem; margin: .4rem 0 .2rem; }
.ehr-phones figure { margin: 0; text-align: center; }
.ehr-phones img { display: block; width: 100%; height: auto; border-radius: 14px; border: 3px solid color-mix(in srgb, var(--ie-white) 22%, var(--ie-charcoal)); box-shadow: 0 10px 30px rgba(0,0,0,.4); }
.ehr-phones figcaption { margin-top: .4rem; font-size: .76rem; font-weight: 600; color: var(--on-dark-soft); }
@media (max-width: 560px) { .ehr-phones { grid-template-columns: repeat(2, 1fr); } }

.ehr-addons {
  margin: 1.6rem 0 2rem; padding: 1.5rem 1.6rem; border-radius: var(--radius);
  background: var(--ie-white); border: 1px solid var(--line); border-left: 5px solid var(--ie-brand-red);
  display: grid; grid-template-columns: minmax(220px, 1fr) 2fr; gap: 1.5rem; align-items: start;
}
.ehr-addons h3 { font-size: 1.15rem; margin: .6rem 0 0; }
.ehr-addons .ehr-new-tag { color: var(--ie-white); }
.ehr-addons .checks { margin: 0; }
@media (max-width: 820px) { .ehr-addons { grid-template-columns: 1fr; } }

.ehr-askhr-shot { margin: .4rem 0 .2rem; }
.ehr-askhr-shot img { display: block; width: 100%; height: auto; border-radius: 10px; border: 3px solid color-mix(in srgb, var(--ie-white) 22%, var(--ie-charcoal)); box-shadow: 0 10px 30px rgba(0,0,0,.4); }
.ehr-askhr-shot figcaption { margin-top: .45rem; font-size: .76rem; font-weight: 600; color: var(--on-dark-soft); text-align: center; }