/* =========================================================
   0) TOKENS / CONSTANTS
   --------------------------------------------------------- */
:root {
  /* Brand */
  --rm-teal: #008675;
  --rm-teal-700: #006a5b;
  --rm-teal-800: #005246;
  --ph-blue: #2378bd;
  --fa-brown: #977347;

  /* UI */
  --header-bg: #183939;
  --body-color: var(--bs-body-color, #212529);
  --muted-color: var(--bs-secondary-color, #6c757d);
  --hover-bg: var(--bs-dropdown-link-hover-bg, #f8f9fa);
  --chip-hover-bg: var(--bs-tertiary-bg, #f1f3f5);
  --modal-gray: #dddddd;

  /* Accents / badges */
  --badge-yellow: #f5c542;
  --save-chip-bg: #fff8e1;
  --save-chip-border: #ffe199;
  --save-chip-text: #a66900;

  /* Shadows */
  --shadow-dropdown: 0 8px 16px rgba(0, 0, 0, .5);
  --shadow-card-hover: 0 .5rem 1rem rgba(0, 0, 0, .15);
  --shadow-img: 0 0 15px rgba(0, 0, 0, .3);
}

/* Utility color helpers used in markup */
.rmback {
  background-color: var(--rm-teal);
}

.rmtext {
  color: var(--rm-teal-800);
}

.phback {
  background-color: var(--ph-blue);
}

.phtext {
  color: var(--ph-blue);
}

.faback {
  background-color: var(--fa-brown);
}

.fatext {
  color: var(--fa-brown);
}

/* =========================================================
   0.5) PROMO BAR
   --------------------------------------------------------- */
.promo-link {
  display: block
}

.promo-bar {
  background: var(--rm-teal-700);
  color: #fff;
  margin-top: 0;
  border: 0
}

.promo-bar .btn-outline-warning {
  --bs-btn-color: var(--rm-teal);
  --bs-btn-border-color: var(--rm-teal)
}

/* (Optional) if you keep header as-is */
.site-header {
  padding: 0;
  margin: 0
}



/* =========================================================
   1) HEADER / NAV
   --------------------------------------------------------- */

/* center the header’s nav on large screens */
.navbar-nav,
.mr-auto {
  /* mr-auto = legacy fallback */
  flex: 1;
  margin: auto !important;
  display: flex;
  justify-content: center;
}

/* dropdown look + behavior (shared) */
.dropdown-menu {
  background-color: #fff;
  border: 1px solid var(--header-bg);
  box-shadow: var(--shadow-dropdown);
  animation: fadeIn .2s ease-in;
}

.navbar .dropdown-menu {
  z-index: 1050;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ---- Products dropdown (wide with right-side actions) ---- */
.menu-products {
  min-width: 300px;
}

/* room so actions don’t wrap */
.menu-products .menu-product-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: .5rem 1rem;
  cursor: pointer;
  color: var(--bs-dropdown-link-color, var(--body-color));
}

.menu-products .menu-product-row:hover,
.menu-products .menu-product-row:focus-within {
  background-color: var(--hover-bg);
}

.menu-products a {
  color: inherit !important;
  text-decoration: none;
}

.menu-products a:hover,
.menu-products a:focus {
  color: inherit !important;
  text-decoration: none;
}

.menu-products .menu-product-link {
  white-space: nowrap;
}

.menu-products .menu-actions {
  display: inline-flex;
  gap: 1rem;
  white-space: nowrap;
}

.menu-products .menu-action {
  padding: .125rem .25rem;
  border-radius: .25rem;
}

.menu-products .menu-action:hover,
.menu-products .menu-action:focus-visible {
  background-color: var(--chip-hover-bg);
  outline: 2px solid transparent;
}

/* Mobile: stack rows for bigger tap targets */
@media (max-width:991.98px) {
  .menu-products {
    min-width: 100%;
  }

  .menu-products .menu-product-row {
    flex-direction: column;
    align-items: flex-start;
  }

  .menu-products .menu-actions {
    gap: .75rem;
  }
}

/* =========================================================
   2) BREADCRUMBS (below header)
   --------------------------------------------------------- */
.rm-bc {
  margin-top: .25rem;
}

.rm-bc .breadcrumb {
  --bs-breadcrumb-divider: '›';
  --bs-breadcrumb-divider-color: var(--muted-color);
  margin: .25rem 0 .5rem;
}

.rm-bc .breadcrumb-item+.breadcrumb-item::before {
  opacity: .5;
}

/* unify link/text color + remove default blue/underline */
.rm-bc .breadcrumb-item,
.rm-bc .breadcrumb-item a {
  color: var(--body-color);
}

.rm-bc .breadcrumb-item a {
  text-decoration: none;
}

/* current page: bold + safe truncation */
.rm-bc .breadcrumb-item.active {
  font-weight: 700;
  max-width: 60vw;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* “chip” hover for crumb links */
.rm-bc .rm-bc-link {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  white-space: nowrap;
  padding: 0 .25rem;
  border-radius: .25rem;
}

.rm-bc .rm-bc-link:hover,
.rm-bc .rm-bc-link:focus-visible {
  background-color: var(--chip-hover-bg);
  outline: 2px solid transparent;
}

/* home icon matches text size */
.rm-bc .rm-bc-home {
  width: 1em;
  height: 1em;
  display: inline-block;
  vertical-align: -.125em;
}

/* tiny-phone reduction: show only first + last */
@media (max-width:576px) {
  .rm-bc .breadcrumb-item:not(:first-child):not(:last-child) {
    display: none;
  }

  .rm-bc .breadcrumb-item:first-child::after {
    content: " …";
    color: var(--muted-color);
    margin-left: .25rem;
  }
}

/* =========================================================
   3) MAIN CONTENT (cards, general UI bits)
   --------------------------------------------------------- */

.card-title {
  min-height: 2.5rem;
}

.card:hover {
  transform: translateY(-3px);
  transition: transform .2s ease, box-shadow .2s ease;
  box-shadow: var(--shadow-card-hover);
}

/* badges */
.product-badge {
  display: inline-block;
  background-color: var(--badge-yellow);
  color: #000;
  font-weight: 600;
  font-size: .75rem;
  padding: .25em .5em;
  border-radius: .25rem;
  margin-right: .5rem;
}

.savings-badge {
  display: inline-block;
  background-color: var(--badge-yellow);
  color: #000;
  font-weight: 600;
  padding: .35em .65em;
  border-radius: .25rem;
  font-size: .85rem;
}

/* trust list links subtle */
.store-trust ul li a {
  color: inherit !important;
  text-decoration: underline;
  text-decoration-color: #aaa;
  text-underline-offset: 2px;
}

.store-trust ul li a:hover {
  color: var(--header-bg) !important;
  text-decoration-color: var(--header-bg);
}

/* =========================================================
   4) GALLERY / MODAL
   --------------------------------------------------------- */
.gallery {
  background-color: #fff;
  padding: 20px;
}

.gallery img {
  width: 100%;
  max-width: 100%;
  box-shadow: var(--shadow-img);
  cursor: pointer;
}

#gallery-modal .modal-body {
  background-color: var(--modal-gray);
}

#gallery-modal .modal-img {
  width: 100%;
  max-width: 100%;
  box-shadow: var(--shadow-img);
}

/* =========================================================
   5) ADD-ON CHOOSER (cards with selectable options)
   --------------------------------------------------------- */
.addon-card {
  position: relative;
  display: block;
  cursor: pointer;
}

.addon-card .addon-input {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
}

.addon-card .card {
  position: relative;
  overflow: hidden;
  transition: border-color .2s, box-shadow .2s, background-color .2s;
}

.addon-card:hover .card {
  box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .08);
}

/* selected state (modern + fallback) */
@supports selector(.addon-card:has(input:checked)) {
  .addon-card:has(input:checked) .card {
    border-color: var(--addon-accent, #0d6efd);
    background-color: color-mix(in srgb, var(--addon-accent, #0d6efd) 10%, #fff);
    box-shadow: 0 0 0 .25rem color-mix(in srgb, var(--addon-accent, #0d6efd) 25%, transparent);
  }
}

.addon-card .addon-input input:checked~.card {
  border-color: var(--addon-accent, #0d6efd);
  background-color: color-mix(in srgb, var(--addon-accent, #0d6efd) 10%, #fff);
  box-shadow: 0 0 0 .25rem color-mix(in srgb, var(--addon-accent, #0d6efd) 25%, transparent);
}

/* per-product accents */
.addon-card.accent-ph {
  --addon-accent: #0d6efd;
}

/* Personal Historian */
.addon-card.accent-rm {
  --addon-accent: var(--rm-teal);
}

/* RootsMagic */
.addon-card.accent-fa {
  --addon-accent: #8c6d3a;
}

/* Family Atlas */

/* selection marker (masked icon) */
.addon-card .addon-mark {
  position: absolute;
  bottom: .5rem;
  right: .5rem;
  width: 22px;
  height: 22px;
  background: currentColor;
  opacity: .6;
  pointer-events: none;
  transition: opacity .15s, transform .15s, background-color .2s;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cpath d='M528 320C528 205.1 434.9 112 320 112C205.1 112 112 205.1 112 320C112 434.9 205.1 528 320 528C434.9 528 528 434.9 528 320zM64 320C64 178.6 178.6 64 320 64C461.4 64 576 178.6 576 320C576 461.4 461.4 576 320 576C178.6 576 64 461.4 64 320z'/%3E%3C/svg%3E") no-repeat center/contain;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cpath d='M528 320C528 205.1 434.9 112 320 112C205.1 112 112 205.1 112 320C112 434.9 205.1 528 320 528C434.9 528 528 434.9 528 320zM64 320C64 178.6 178.6 64 320 64C461.4 64 576 178.6 576 320C576 461.4 461.4 576 320 576C178.6 576 64 461.4 64 320z'/%3E%3C/svg%3E") no-repeat center/contain;
}

.addon-card.is-selected .addon-mark {
  opacity: 1;
  transform: scale(1.1);
  color: var(--addon-accent, #0d6efd);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M256 512a256 256 0 1 1 0-512 256 256 0 1 1 0 512zm0-464a208 208 0 1 0 0 416 208 208 0 1 0 0-416zm70.7 121.9c7.8-10.7 22.8-13.1 33.5-5.3 10.7 7.8 13.1 22.8 5.3 33.5L243.4 366.1c-4.1 5.7-10.5 9.3-17.5 9.8-7 .5-13.9-2-18.8-6.9l-55.9-55.9c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l36 36 105.6-145.2z'/%3E%3C/svg%3E") no-repeat center/contain;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M256 512a256 256 0 1 1 0-512 256 256 0 1 1 0 512zm0-464a208 208 0 1 0 0 416 208 208 0 1 0 0-416zm70.7 121.9c7.8-10.7 22.8-13.1 33.5-5.3 10.7 7.8 13.1 22.8 5.3 33.5L243.4 366.1c-4.1 5.7-10.5 9.3-17.5 9.8-7 .5-13.9-2-18.8-6.9l-55.9-55.9c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l36 36 105.6-145.2z'/%3E%3C/svg%3E") no-repeat center/contain;
}

/* chooser footer */
.addon-footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: .25rem;
  padding-bottom: 1.5rem;
}

.select-hint {
  font-size: .85rem;
  font-weight: 500;
  color: #555;
  transition: opacity .25s;
}

.addon-card.is-selected .select-hint {
  opacity: 0;
}

/* title row in chooser cards */
.addon-card .title-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: .25rem .5rem;
  margin-bottom: .5rem;
}

.addon-card .title-row h4 {
  margin: 0;
  flex: 1 1 auto;
  min-width: 0;
}

.addon-card .title-row .badge {
  flex: 0 0 auto;
  margin-left: auto;
}

@media (max-width:480px) {
  .addon-card .title-row .badge {
    margin-left: 0;
  }
}

/* subtle “save” badge */
.badge.bg-save-subtle {
  background: var(--save-chip-bg);
  color: var(--save-chip-text);
  border: 1px solid var(--save-chip-border);
  font-weight: 600;
  font-size: .75rem;
  padding: .25em .5em;
  border-radius: .25rem;
}

/* =========================================================
   6) BUTTONS
   --------------------------------------------------------- */
.btn-rm {
  color: var(--rm-teal);
  border: 1px solid var(--rm-teal);
  background-color: transparent;
  transition: all .2s ease-in-out;
}

.btn-rm:hover,
.btn-rm:focus {
  background-color: var(--rm-teal);
  color: #fff;
  border-color: var(--rm-teal);
  text-decoration: none;
}

.btn-rm:active {
  background-color: var(--rm-teal-700);
  border-color: var(--rm-teal-700);
}

.btn-rm-primary {
  color: #fff;
  background-color: var(--rm-teal);
  border: 1px solid var(--rm-teal);
  transition: all .2s ease-in-out;
}

.btn-rm-primary:hover,
.btn-rm-primary:focus {
  color: #fff;
  background-color: var(--rm-teal-700);
  border-color: var(--rm-teal-700);
  text-decoration: none;
}

.btn-rm-primary:active {
  background-color: var(--rm-teal-800);
  border-color: var(--rm-teal-800);
}


/* =========================================================
   FAQ ACCORDION (Bootstrap 5)
   --------------------------------------------------------- */
.rm-faq .accordion-item {
  border: 1px solid rgba(0, 0, 0, .08);
  border-radius: .5rem;
  overflow: hidden;
  margin-bottom: .75rem;
  background-color: #fff;
}

.rm-faq .accordion-button {
  font-weight: 600;
  line-height: 1.35;
}

.rm-faq .accordion-button:focus-visible {
  outline: 3px solid var(--rm-teal);
  outline-offset: 2px;
}

.rm-faq .accordion-button:not(.collapsed) {
  color: var(--rm-teal);
  background-color: color-mix(in srgb, var(--rm-teal) 10%, #ffffff);
  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .06);
}

@supports not (color-mix: in srgb, red 10%, white) {
  .rm-faq .accordion-button:not(.collapsed) {
    background-color: #f0faf8;
    /* simple fallback */
  }
}

.rm-faq .accordion-body {
  font-size: 1rem;
}

.rm-faq .accordion-button::after {
  /* keep Bootstrap’s caret but tint slightly when open */
  transition: filter .2s ease;
}

.rm-faq .accordion-button:not(.collapsed)::after {
  filter: hue-rotate(150deg) saturate(1.25);
}


/* ===== Requirements (Requirements.ascx) ================================== */
.rm-reqs {
  color: var(--muted-color);
  line-height: 1.4;
}

.rm-reqs .os-entry {
  display: block;
}

.rm-reqs .os-icon {
  width: 1em;
  height: 1em;
  vertical-align: -.125em;
  margin-right: .35rem;
  opacity: .9;
}

.rm-reqs .os-label {
  font-weight: 600;
  color: var(--body-color);
}

.rm-reqs .os-list {
  margin-left: .15rem;
}

/* On small+ screens, put Windows/Mac on one line with breathing room */
@media (min-width: 576px) {
  .rm-reqs .os-entry {
    display: inline-block;
    margin-right: 1rem;
  }
}

/* --- Gallery Thumbnails ---------------------------------------------------------------- */
.rm-g-thumb {
  height: var(--rm-g-thumb-h, 220px);
  border: 1px solid rgba(0, 0, 0, .18);
  /* darker outline */
  background: var(--rm-modal-gray, #f7f7f8);
  border-radius: .75rem;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .06);
  /* subtle base shadow */
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.rm-g-img {
  width: 100%;
  height: 100%;
  display: block;
}

.rm-g-img-cover {
  object-fit: cover;
}

.rm-g-trigger {
  padding: 0;
  background: transparent;
  border: 0;
  cursor: pointer;
}

.rm-g-trigger:hover .rm-g-thumb {
  transform: translateY(-3px) scale(1.01);
  box-shadow: 0 12px 24px rgba(0, 0, 0, .16);
  border-color: var(--rm-teal, #0ea5a5);
}

.rm-g-trigger:focus-visible .rm-g-thumb {
  outline: 2px solid var(--rm-teal, #0ea5a5);
  outline-offset: 2px;
}

/* --- Gallery Modal look ---------------------------------------------------------- */
.rm-gallery-modal .modal-header {
  padding: .75rem 1rem;
  border-bottom: 0;
}

.rm-gallery-modal .modal-title {
  font-weight: 700;
  /* bold caption title */
}

.rm-gallery-modal .modal-body {
  background-color: #e9ecef;
  padding: 1rem;
}

.rm-gallery-modal .rm-modal-img {
  cursor: zoom-out;
  background: var(--rm-modal-gray, #f1f3f5);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .18);
}

.rm-gallery-modal .rm-nav {
  width: 2.25rem;
  height: 2.25rem;
  z-index: 5;
  border-radius: 999px;
  opacity: .9;
}

.rm-gallery-modal .rm-nav:hover {
  opacity: 1;
}

/* Darker backdrop just for this modal (class added on show) */
.modal-backdrop.rm-backdrop-dark.show {
  background-color: #000;
  opacity: .85;
  /* tweak darker/lighter to taste */
}


/* ---------------- Review Rotator ----------------------------------------- */
/* Tokens (accent + fixed-height math) */
.rm-review-rotator{
  --rr-accent: var(--rm-teal, #0F8D8A);
  --rr-lh: 1.5em;    /* quote line-height */
  --rr-lines: 4;     /* collapsed lines (sync with control) */
  --rr-author: 1.2em;/* ≈ one author line */
  --rr-pad-y: 3rem;  /* p-4 top+bottom */
  --rr-img: 4em;     /* 64px avatar ≈ 4em at 16px */
}
/* Accent variants */
.rm-accent-teal  { --rr-accent: var(--rm-teal, #0F8D8A); }
.rm-accent-blue  { --rr-accent: var(--rm-blue, #0A66C2); }
.rm-accent-brown { --rr-accent: var(--rm-brown, #7B5E57); }

/* Card */
.rm-review-card{
  background: var(--rm-surface, #f6f8f9);
  border: 1px solid rgba(0,0,0,.06);
  box-shadow: 0 .25rem .75rem rgba(0,0,0,.04);
  /* Reserve space to prevent page jump between slides */
  min-height: max(
    var(--rr-img),
    calc(var(--rr-lines) * var(--rr-lh) + var(--rr-author) + var(--rr-pad-y))
  );
}

/* Avatar */
.rm-review-img{ width:64px; height:64px; object-fit:cover; }

/* Quote */
.rm-quote{ position:relative; padding-left:1.5rem; }
.rm-quote::before{
  content:"“";
  position:absolute; left:.25rem; top:-.15rem;
  font-size:2rem; line-height:1;
  color:var(--rr-accent); opacity:.35;
}
.rm-quote-body{ margin:0; }
.rm-quote-lg{ font-size:clamp(1.125rem, 1.5vw, 1.375rem); } /* ~fs-4 → fs-3 */
.rm-quote-footer{ font-size:.95rem; }

/* Collapsed clamp */
.rm-quote-body[data-collapsed="true"]{
  display:-webkit-box; -webkit-box-orient:vertical; overflow:hidden;
  -webkit-line-clamp: var(--rr-lines, 4);
}

/* Inline five-star badge (replaces "*****") */
.rm-stars{
  height:1.1em; width:auto; display:inline-block;
  vertical-align:-0.15em; margin:0 .15em;
}

/* Carousel controls (faint side arrows) */
.rm-review-rotator .carousel-control-prev,
.rm-review-rotator .carousel-control-next{
  width:3rem; opacity:.25;
  transition:opacity .15s ease-in-out, transform .15s ease-in-out;
}
.rm-review-rotator:hover .carousel-control-prev,
.rm-review-rotator:hover .carousel-control-next{
  opacity:.6; transform:scale(1.02);
}
/* Nudge arrows outward on md+ */
@media (min-width:768px){
  .rm-review-rotator .carousel-control-prev{ left:-.25rem; }
  .rm-review-rotator .carousel-control-next{ right:-.25rem; }
}

/* Indicators (only if enabled) */
.rm-review-rotator .carousel-indicators [data-bs-target]{ background-color:rgba(0,0,0,.25); }
.rm-review-rotator .carousel-indicators .active{ background-color:var(--rr-accent); }

/* XS tweaks */
@media (max-width:575.98px){
  .rm-quote::before{ font-size:1.6rem; left:.2rem; top:-.2rem; }
  .rm-review-rotator{ --rr-img:0em; } /* avatar hidden on XS, don't force height */
}

/* Motion sensitivity */
@media (prefers-reduced-motion:reduce){
  .rm-review-rotator .carousel-control-prev,
  .rm-review-rotator .carousel-control-next{
    transition:none;
  }
}



/* --- VideoList ------------------------------------------------------------- */
.rm-video-card {
  border: 0;
  transition: transform .12s ease, box-shadow .12s ease;
  border-radius: 1rem;
}

.rm-video-card:hover,
.rm-video-card:focus-within {
  transform: translateY(-2px);
  box-shadow: 0 .5rem 1.25rem rgba(0, 0, 0, .12);
}

.rm-video-thumb-wrap {
  position: relative;
  overflow: hidden;
  border-top-left-radius: 1rem;
  border-top-right-radius: 1rem;
}

.rm-video-thumb {
  object-fit: cover;
  width: 100%;
  height: 100%;
  display: block;
}

.rm-video-play {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
}

.rm-video-play::before {
  content: "";
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: rgba(0, 0, 0, .45);
  display: block;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, .25) inset;
}

.rm-video-play::after {
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  border-left: 16px solid white;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  margin-left: 4px;
  /* nudge triangle to optical center */
}

.rm-video-title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: calc(1em * 2.4);
  /* keep rows even */
}

/* Optional: color accent on focus */
.rm-video-card a:focus-visible {
  outline: 3px solid var(--rm-teal, #0F8D8A);
  outline-offset: 3px;
  border-radius: .75rem;
}


.price-tag .curr {
  font-weight: 600;
}

.price-tag .orig {
  opacity: 0.7
}


/* put near other utilities */
.form-text {
  color: var(--muted-color);
}


/* -------- ProductHead (shared) -------- */

/* Standard hero image: preserve ratio, no halo */
.product-head .img-hero {
  display: block;
  height: auto;
  max-width: 100%;
  box-shadow: none;
  border-radius: 0;
}

/* Standard hero sizing (non-compact) */
@media (min-width: 992px) {
  .product-head:not(.product-head-compact) .img-hero {
    width: auto;
    /* preserve ratio with height cap */
    max-width: 560px;
    /* was 480 */
    max-height: 420px;
    /* was 360 */
  }
}

@media (min-width: 1200px) {
  .product-head:not(.product-head-compact) .img-hero {
    max-width: 600px;
    max-height: 460px;
  }
}


/* -------- ProductHead Compact layout -------- */

/* 200×200 compact image; keep proportions inside the box */
.product-head-compact .ph-compact-img {
  display: block;
  width: 200px;
  height: 200px;
  object-fit: contain;
}

/* Compact title & tagline (a touch larger) */
.product-head-compact .ph-title {
  font-size: 1.6rem;
  line-height: 1.2;
}

.product-head-compact .ph-tagline {
  font-size: 1rem;
}

@media (min-width: 992px) {
  .product-head-compact .ph-title {
    font-size: 1.7rem;
  }
}

/* Compact CTAs: tidy stack on md+, inline/wrap on small screens */
.product-head-compact .cta-col .btn {
  min-width: 8rem;
}

@media (min-width: 768px) {
  .product-head-compact .cta-col .btn {
    width: 100%;
  }
}

/* -------- Requirements -------- */

.product-req {
  line-height: 1.35;
  font-size: .95rem;
  /* slightly bigger */
  color: var(--bs-body-color, #212529);
  opacity: 1;
}

.product-req .os-label {
  font-weight: 600;
}


/* ---- TrialForm ---------------------------------------------------------- */
.trial-form .form-shell {
  background: transparent;
  border: 0;
  box-shadow: none;
  border-radius: 0;
  padding: 0;
  /* remove if you want spacing inside; add margins externally instead */
}

.trial-form .trial-product-art {
  max-width: 280px;
  height: auto;
}

.trial-form .hp {
  position: absolute;
  left: -10000px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ---------- Journey icons ---------- */
.journey-icon {
  width: var(--rm-icon-lg);
  height: var(--rm-icon-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-inline: auto;
}

.journey-icon img {
  width: 100%;
  height: 100%;
  display: block;
}

/* --- Journey Nav (light) ------------------------------------------------- */
.rm-journey-nav{
  max-height:200px; /* visual guardrail; content is ~120–150px tall */
}
.rm-journey-nav .step-link{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:.375rem; padding:.5rem .75rem; min-width:6.5rem;
  text-decoration:none; color:var(--body-color);
  background:#fff; border:1px solid #e6e6e6; border-radius:.75rem;
  transition:transform .15s ease, box-shadow .2s ease, border-color .2s ease, background-color .2s ease;
}
.rm-journey-nav .step-link:hover,
.rm-journey-nav .step-link:focus-visible{
  transform:translateY(-2px);
  box-shadow:0 .25rem .5rem rgba(0,0,0,.06);
  border-color:var(--rm-teal);
  outline:2px solid transparent;
}
.rm-journey-nav .icon-wrap{ width:52px; height:52px; display:grid; place-items:center; }
.rm-journey-nav .icon-wrap img{ width:100%; height:100%; transition:transform .15s ease; }

.rm-journey-nav .step-label{
  font-weight:600; font-size:.95rem; line-height:1; white-space:nowrap;
}
.rm-journey-nav .step-num{
  display:inline-block; min-width:1.25rem; height:1.25rem; line-height:1.25rem;
  font-size:.75rem; text-align:center; margin-right:.25rem;
  border-radius:999px; border:1px solid #ddd; background:#f8f9fa;
}

.rm-journey-nav .step-link.is-current{
  border-color:var(--rm-teal);
  background:color-mix(in srgb, var(--rm-teal) 10%, #fff);
  box-shadow:0 0 0 .2rem color-mix(in srgb, var(--rm-teal) 25%, transparent);
}
.rm-journey-nav .step-link.is-current .icon-wrap img{ transform:scale(1.08); }
.rm-journey-nav .step-link.is-current .step-label{ color:var(--rm-teal-800); }

@media (max-width:576px){
  .rm-journey-nav .icon-wrap{ width:44px; height:44px; }
  .rm-journey-nav .step-label{ font-size:.9rem; }
}

@media (prefers-reduced-motion: reduce){
  .rm-journey-nav .step-link, .rm-journey-nav .icon-wrap img{ transition:none; }
}