/* C5C lower-page layout, measured against the supplied 1920px references. */
body[data-product="c5c"] {
  --detail-unit: 1px;
  --detail-rule: #4D4D4D;
  --detail-row-rule: #3B3B3B;
  --detail-muted: #C9C9C9;
  --detail-text: #D5DADC;
  --detail-blue: #5799DF;
}

.c5c-range {
  position: relative;
  aspect-ratio: 1920 / 590;
  overflow: hidden;
  background: #04101c;
  color: #fff;
  font-family: 'DM Sans', Arial, sans-serif;
}
.c5c-range-image {
  position: absolute;
  top: 0;
  left: -6.5%;
  display: block;
  width: 110%;
  max-width: none;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}
.c5c-range-copy {
  position: absolute;
  top: calc(110 * var(--detail-unit));
  left: 48.2%;
  right: 5%;
}
.c5c-range h2,
.c5c-specs-intro h2,
.c5c-comparison h2 {
  margin: 0;
  color: #fff;
  font-family: 'DM Sans', Arial, sans-serif;
  font-size: 34px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0;
}
.c5c-range-copy p {
  margin: calc(16 * var(--detail-unit)) 0 0;
  color: var(--detail-text);
  font-size: max(14px, calc(18 * var(--detail-unit)));
  line-height: 1.5;
}
.c5c-range-copy .c5c-range-distance { margin-top: calc(26 * var(--detail-unit)); }

.c5c-details-surface { position: relative; isolation: isolate; background: #000; font-family: 'DM Sans', Arial, sans-serif; }
.c5c-details-surface::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0 0 auto;
  height: calc(1125 * var(--detail-unit));
  background: url("assets/C5CTHEDETAILS.png") center top / cover no-repeat;
  opacity: .42;
  pointer-events: none;
}
.c5c-specs {
  padding: calc(86 * var(--detail-unit)) 0 0;
  color: var(--detail-text);
  font-family: 'DM Sans', Arial, sans-serif;
}
.c5c-specs-layout,
.c5c-comparison-inner {
  width: min(calc(100% - 48px), calc(1428 * var(--detail-unit)));
  margin: 0 auto;
}
.c5c-specs-layout {
  display: grid;
  grid-template-columns: calc(430 * var(--detail-unit)) minmax(0, 1fr);
  gap: calc(84 * var(--detail-unit));
  align-items: start;
}
.c5c-specs-intro { min-width: 0; padding-top: calc(76 * var(--detail-unit)); }
.c5c-detail-eyebrow {
  margin: 0;
  color: var(--detail-blue);
  font-family: 'DM Sans', Arial, sans-serif;
  font-size: 18px;
  font-weight: 700;
  line-height: 25px;
  letter-spacing: 0;
}
.c5c-specs-intro h2 { margin-top: calc(20 * var(--detail-unit)); }
.c5c-specs-intro h2 span { display: block; margin-left: calc(20 * var(--detail-unit)); color: var(--detail-text); }
.c5c-specs-subtitle {
  margin: calc(12 * var(--detail-unit)) 0 0 calc(20 * var(--detail-unit));
  color: var(--detail-muted);
  font-size: max(12px, calc(14 * var(--detail-unit)));
  line-height: 1.5;
}
.c5c-specs-highlights {
  margin: calc(128 * var(--detail-unit)) 0 0;
  padding-left: calc(50 * var(--detail-unit));
  max-width: 367px;
  color: #fff;
  font-size: 18px;
  font-weight: 300;
  line-height: 40px;
  letter-spacing: 0;
}
.c5c-specs-highlights li { margin: 0; padding-left: calc(2 * var(--detail-unit)); }
.c5c-specs-highlights li::marker { font-size: .7em; }
.c5c-specs-columns {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: calc(108 * var(--detail-unit));
  padding: calc(136 * var(--detail-unit)) calc(60 * var(--detail-unit)) calc(48 * var(--detail-unit)) 0;
  border-top: 1px solid var(--detail-rule);
}
.c5c-specs-column { display: flex; flex-direction: column; gap: calc(28 * var(--detail-unit)); min-width: 0; }
.c5c-spec-group { min-width: 0; }
.c5c-spec-group h3 {
  margin: 0 0 calc(10 * var(--detail-unit));
  color: var(--detail-text);
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
}
.c5c-spec-group dl { margin: 0; }
.c5c-spec-group dl > div {
  display: grid;
  grid-template-columns: 142px minmax(0, 1fr);
  align-items: center;
  gap: calc(16 * var(--detail-unit));
  min-height: calc(42 * var(--detail-unit));
  padding: calc(7 * var(--detail-unit)) 0;
  border-bottom: 1px solid var(--detail-row-rule);
  font-size: 14px;
  font-weight: 400;
  line-height: 14px;
  letter-spacing: 0;
}
.c5c-spec-group dt { color: var(--detail-muted); }
.c5c-spec-group dd { margin: 0; color: var(--detail-text); overflow-wrap: anywhere; }

.c5c-comparison { padding: 0 0 calc(117 * var(--detail-unit)); color: var(--detail-text); }
.c5c-comparison-copy { margin: 0 calc(70 * var(--detail-unit)); }
.c5c-comparison-eyebrow {
  display: flex;
  align-items: center;
  gap: calc(140 * var(--detail-unit));
  margin-right: calc(-56 * var(--detail-unit));
}
.c5c-comparison-eyebrow::after { content: ""; flex: 1; height: 1px; background: var(--detail-rule); }
.c5c-comparison h2 { margin-top: calc(18 * var(--detail-unit)); }
.c5c-comparison-description {
  margin: calc(16 * var(--detail-unit)) 0 0;
  max-width: calc(1120 * var(--detail-unit));
  color: var(--detail-muted);
  font-size: max(12px, calc(14 * var(--detail-unit)));
  font-weight: 400;
  line-height: 1.5;
}
.c5c-comparison-image {
  display: block;
  width: min(100%, calc(1108 * var(--detail-unit)));
  height: auto;
  margin: calc(56 * var(--detail-unit)) 0 0 calc(124 * var(--detail-unit));
}

@media (min-width: 981px) and (max-width: 1300px) {
  .c5c-specs-layout { grid-template-columns: minmax(230px, .8fr) minmax(0, 1.8fr); gap: 30px; }
  .c5c-specs-columns { gap: 28px; padding-right: 0; }
  .c5c-spec-group dl > div { grid-template-columns: minmax(0, .74fr) minmax(0, 1fr); }
  .c5c-specs-intro h2 { font-size: 26px; }
}
@media (max-width: 980px) {
  .c5c-specs { padding-top: 56px; }
  .c5c-specs-layout { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .c5c-specs-intro { padding-top: 0; }
  .c5c-specs-intro h2 { font-size: 30px; }
  .c5c-specs-intro h2 span,
  .c5c-specs-subtitle { margin-left: 0; }
  .c5c-specs-highlights { margin-top: 28px; padding-left: 20px; max-width: none; font-size: 16px; line-height: 1.75; }
  .c5c-specs-highlights li { margin-bottom: 10px; }
  .c5c-specs-columns { gap: 36px; padding: 36px 0 48px; }
  .c5c-specs-column { gap: 28px; }
  .c5c-spec-group h3 { font-size: 15px; margin-bottom: 12px; }
  .c5c-spec-group dl > div { grid-template-columns: minmax(0, .74fr) minmax(0, 1fr); min-height: 44px; padding: 10px 0; font-size: 13px; line-height: 1.45; gap: 12px; }
  .c5c-comparison { padding-top: 40px; padding-bottom: 56px; }
  .c5c-comparison-copy { margin: 0; }
  .c5c-comparison-eyebrow { margin-right: 0; gap: 24px; }
  .c5c-comparison h2 { margin-top: 16px; font-size: 30px; }
  .c5c-comparison-description { max-width: 100%; font-size: 13px; line-height: 1.7; }
  .c5c-comparison-image { width: 100%; margin: 32px auto 0; }
}
@media (max-width: 700px) {
  .c5c-range { aspect-ratio: auto; min-height: 400px; }
  /* Keep the moon and rangefinding display in view on narrow screens. */
  .c5c-range-image { left: 0; width: 100%; object-position: 32% bottom; }
  .c5c-range-copy { top: 32px; left: 24px; right: 24px; }
  .c5c-range h2 { font-size: 26px; max-width: 340px; text-shadow: 0 2px 16px #000; }
  .c5c-range-copy p { font-size: 14px; margin-top: 12px; }
  .c5c-range-copy .c5c-range-distance { margin-top: 16px; }
}
@media (max-width: 600px) {
  .c5c-specs-layout,
  .c5c-comparison-inner { width: calc(100% - 40px); }
  .c5c-specs-columns { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .c5c-spec-group dl > div { grid-template-columns: minmax(0, .85fr) minmax(0, 1fr); }
  .c5c-detail-eyebrow { font-size: 14px; }
  .c5c-comparison-eyebrow::after { display: none; }
  .c5c-comparison h2 { font-size: 28px; }
}